fix: 对接商品详情

src/views/commodityCenter/commodityManage/detail.vue

@@ -2,27 +2,101 @@
 <template>
   <div>
     <!-- 模板内容 -->
-    <div class="g-card">
-      <span class="g-card-title">商品详情页</span>
-    </div>
-
+    <el-form :model="form" disabled label-width="120px" label-position="right">
+      <div class="g-card">
+        <span class="g-card-title">商品详情页</span>
+          <el-form-item label="商品名称">
+              <el-input v-model="form.productName"></el-input>
+          </el-form-item>
+          <el-form-item label="商品类目">
+              <el-input v-model="form.categoryName"></el-input>
+          </el-form-item>
+          <el-form-item label="商品封面图">
+            <img class="formImage" :src="form.productImage">
+          </el-form-item>
+          <el-form-item label="上传视频">
+              <video
+                  ref="videoPlayer"
+                  id="video"
+                  class="video-js vjs-default-skin vjs-big-play-centered"
+                  controls
+                  webkit-playsinline="true"
+                  playsinline="true"
+                  :autoplay="false"
+                  preload="auto"
+              ></video>
+          </el-form-item>
+          <el-form-item label="商品详情描述">
+            <el-input type="textarea" v-model="form.instructions"></el-input>
+          </el-form-item>
+          <el-form-item label="组合套餐">
+            <div v-for="(item, index) in form.groupList">
+                <div class="topName">{{ item.productGroupTopName }}</div>
+                <div v-for="(sub, subIndex) in item.list">
+                    <div class="listItem">
+                        <span>{{ sub.productName }}</span>
+                        <span>{{ sub.quantity }}{{ sub.unit }}</span>
+                        <span>{{ `${sub.price}元` }}</span>
+                    </div>
+                </div>
+            </div>
+          </el-form-item>
+      </div>
+        <div class="g-card">
+            <span class="g-card-title">价格设定</span>
+            <el-form-item label="原价">
+                <el-input v-model="form.price"></el-input>
+            </el-form-item>
+            <el-form-item label="参考售价">
+                <el-input v-model="form.soldPrice"></el-input>
+            </el-form-item>
+        </div>
+    </el-form>
   </div>
 </template>
 
 <!-- 行为区域 -->
 <script>
+import videojs from 'video.js'
+import 'video.js/dist/video-js.css';
+import axios from "axios";
+
 export default {
   // 数据存放区域
   data() {
     return {
+        form: {},
+        player: null
     }
   },
   // 生命周期函数
   created() {
-    console.log(this.$route.query.info)
+      if(this.$route.query.id) {
+          this.initData();
+      }
   },
   // 方法函数
   methods: {
+      playerMedia() {
+          this.player = videojs(this.$refs.videoPlayer, function onPlayerReady() {
+              console.log('Your player is ready!');
+          });
+          this.player.src({
+              src: this.form.video, // 替换为你的MP4视频URL
+              type: 'video/mp4'
+          });
+      },
+      async initData() {
+          try {
+              const res = await axios.get(`https://test.baoxianzhanggui.com/locallive-java/customer/product/getProductDetail?productId=${this.$route.query.id}` );
+              this.form = res.data.result
+              if(this.form.video) {
+                  this.playerMedia()
+              }
+          } catch (error) {
+              console.error('获取产品详情失败:', error);
+          }
+      }
   },
   // 计算属性
   computed: {
@@ -30,4 +104,26 @@ export default {
 }
 </script>
 <!-- 样式区域 -->
-<style lang='scss' scoped></style>
+<style lang='scss' scoped>
+.formImage{
+  display: block;
+  width: 320px;
+  height: 180px;
+  border-radius: 5px;
+}
+#video{
+  width: 320px;
+  height: 180px;
+}
+.topName{
+  font-size: 16px;
+}
+.listItem{
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  span{
+    margin-right: 10px;
+  }
+}
+</style>

src/views/commodityCenter/commodityManage/list.vue

@@ -100,7 +100,7 @@ export default {
     viewDetails(row) {
       this.$router.push({
         path: 'commodityManageDetail',
-        query: {info:row },
+        query: {id: row.productId },
       })
     },
     /**