feat: 商品详情开发完成

api/goods/index.js

@@ -1,6 +1,6 @@
 import request from '@/utils/request'
 import {httpRequest} from '@/utils/request/axios'
-const baseUrl = 'https://api.1024api.com/api-interface'
+const baseUrl = 'https://api.1024api.com/api-interface/app'
 
 // api地址
 const api = {
@@ -46,3 +46,19 @@ export const apiGetCommodityList = (data) => {
     );
   }
 
+// 获取商品详情
+export const apiGetCommodityDetail = (data) => {
+    return httpRequest.post(
+      `${baseUrl}/index/product/detail`,
+      data
+    );
+  }
+
+// 加入购物车
+export const apiAddCart = (data) => {
+    return httpRequest.post(
+      `${baseUrl}/shipping/cart/addOrUpdate`,
+      data
+    );
+  }
+

components/goods-sku-popup/index.vue

@@ -801,6 +801,7 @@
         let that = this;
         that.checkSelectComplete({
           success: function(selectShop) {
+            console.warn('----- my data is : ', selectShop)
             selectShop.buy_num = that.selectNum;
             that.$emit('buy-now', selectShop);
             that.$emit('buy', selectShop);

manifest.json

@@ -139,13 +139,10 @@
         "devServer" : {
             "port" : 8010,
             "proxy" : {
-                "/api" : {
+                "/index.php" : {
                     "target" : "https://shop2.client.yiovo.com",
                     "changeOrigin" : true,
-                    "secure" : true,
+                    "secure" : true
-                    "pathRewrite" : {
-                        "^/api" : "/index.php?s=/api"
-                    }
                 }
             }
         },

pages/goods/components/Service.vue

@@ -49,13 +49,16 @@
         // 显示详情内容弹窗
         showPopup: false,
         // 服务列表数据
-        list: []
+        list: [{
+  "name": "48小时发货",
+  "summary": "下单后48小时之内发货"
+}]
       }
     },
 
     created() {
       // 获取商品服务列表
-      this.getServiceList()
+    //   this.getServiceList()
     },
 
     methods: {

pages/goods/components/SkuPopup.vue

@@ -7,9 +7,8 @@
 </template>
 
 <script>
-  import { setCartTotalNum } from '@/core/app'
   import { hex2rgba } from '@/utils/color'
-  import * as CartApi from '@/api/cart'
+  import * as GoodsApi from '@/api/goods'
   import GoodsSkuPopup from '@/components/goods-sku-popup'
 
   export default {
@@ -52,9 +51,9 @@
       const app = this
       const { goods } = app
       app.goodsInfo = {
-        _id: goods.goods_id,
+        _id: goods.id,
-        name: goods.goods_name,
+        name: goods.title,
-        goods_thumb: goods.goods_image,
+        goods_thumb: goods.mainImageUrl,
         sku_list: app.getSkuList(),
         spec_list: app.getSpecList()
       }
@@ -71,60 +70,36 @@
       // 整理商品SKU列表
       getSkuList() {
         const app = this
-        const { goods: { goods_name, goods_image, skuList } } = app
+        const { goods: { id, title, mainImageUrl, skuList } } = app
-        const skuData = []
+        const skuData = [];
-        skuList.forEach(item => {
+        (skuList || []).forEach(item => {
           skuData.push({
             _id: item.id,
-            goods_sku_id: item.goods_sku_id,
+            goods_sku_id: item.id,
-            goods_id: item.goods_id,
+            goods_id: id,
-            goods_name: goods_name,
+            goods_name: title,
-            image: item.image_url ? item.image_url : goods_image,
+            image: item.imageUrl ? item.imageUrl : mainImageUrl,
-            price: item.goods_price * 100,
+            price: item.promotionPrice * 100,
-            stock: item.stock_num,
+            stock: item.stock,
-            spec_value_ids: item.spec_value_ids,
+            spec_value_ids: item.vvSkuPropertyValueList.map(item => item.id).join('_'),
-            sku_name_arr: app.getSkuNameArr(item.spec_value_ids)
+            sku_name_arr: item.vvSkuPropertyValueList.map(item => item.productPropertyValue)
           })
         })
         return skuData
       },
 
-      // 获取sku记录的规格值列表
-      getSkuNameArr(specValueIds) {
-        const app = this
-        const defaultData = ['默认']
-        const skuNameArr = []
-        if (specValueIds) {
-          specValueIds.forEach((valueId, groupIndex) => {
-            const specValueName = app.getSpecValueName(valueId, groupIndex)
-            skuNameArr.push(specValueName)
-          })
-        }
-        return skuNameArr.length ? skuNameArr : defaultData
-      },
-
-      // 获取指定的规格值名称
-      getSpecValueName(valueId, groupIndex) {
-        const app = this
-        const { goods: { specList } } = app
-        const res = specList[groupIndex].valueList.find(specValue => {
-          return specValue.spec_value_id == valueId
-        })
-        return res.spec_value
-      },
-
       // 整理规格数据
       getSpecList() {
-        const { goods: { specList } } = this
+        const { goods: { productPropertyList } } = this
         const defaultData = [{ name: '默认', list: [{ name: '默认' }] }]
-        const specData = []
+        const specData = [];
-        specList.forEach(group => {
+        (productPropertyList || []).forEach(group => {
           const children = []
-          group.valueList.forEach(specValue => {
+          group.vvProductPropertyValueList.forEach(specValue => {
-            children.push({ name: specValue.spec_value })
+            children.push({ name: specValue.productPropertyValue })
           })
           specData.push({
-            name: group.spec_name,
+            name: group.productPropertyName,
             list: children
           })
         })
@@ -150,18 +125,19 @@
       addCart(selectShop) {
         const app = this
         const { goods_id, goods_sku_id, buy_num } = selectShop
-        CartApi.add(goods_id, goods_sku_id, buy_num)
+        // CartApi.add(goods_id, goods_sku_id, buy_num)
+        GoodsApi.apiAddCart({ num: buy_num, skuId: goods_sku_id })
           .then(result => {
             // 显示成功
-            app.$toast(result.message)
+            app.$toast('添加成功')
             // 隐藏当前弹窗
             app.onChangeValue(false)
-            // 购物车商品总数量
+            /* // 购物车商品总数量
             const cartTotal = result.data.cartTotal
             // 缓存购物车数量
             setCartTotalNum(cartTotal)
             // 传递给父级
-            app.$emit('addCart', cartTotal)
+            app.$emit('addCart', cartTotal) */
           })
       },
 

pages/goods/components/SlideImage.vue

@@ -14,7 +14,7 @@
       <!-- 轮播图片 -->
       <swiper-item v-for="(item, index) in images" :key="index" @click="onPreviewImages(index)">
         <view class="slide-image">
-          <image class="image" :draggable="false" :src="item.preview_url"></image>
+          <image class="image" :draggable="false" :src="item"></image>
         </view>
       </swiper-item>
     </swiper>
@@ -77,7 +77,7 @@
         const app = this
         const imageUrls = []
         app.images.forEach(item => {
-          imageUrls.push(item.preview_url);
+          imageUrls.push(item);
         });
         uni.previewImage({
           current: imageUrls[index],

pages/goods/detail.vue

@@ -10,25 +10,25 @@
         <view class="block-left dis-flex flex-y-center">
           <!-- 商品售价 -->
           <text class="floor-price__samll">￥</text>
-          <text class="floor-price">{{ goods.goods_price_min }}</text>
+          <text class="floor-price">{{ goods.showPromotionPrice }}</text>
           <!-- 会员价标签 -->
           <view v-if="goods.is_user_grade" class="user-grade">
             <text>会员价</text>
           </view>
           <!-- 划线价 -->
-          <text v-if="goods.line_price_min > 0" class="original-price">￥{{ goods.line_price_min }}</text>
+          <text v-if="goods.showSalePrice > 0" class="original-price">￥{{ goods.showSalePrice }}</text>
         </view>
         <view class="block-right dis-flex">
           <!-- 销量 -->
           <view class="goods-sales">
-            <text>已售{{ goods.goods_sales }}件</text>
+            <text>已售{{ goods.showSaleCount }}件</text>
           </view>
         </view>
       </view>
       <!-- 标题、分享 -->
       <view class="info-item info-item__name dis-flex flex-y-center">
         <view class="goods-name flex-box">
-          <text class="twoline-hide">{{ goods.goods_name }}</text>
+          <text class="twoline-hide">{{ goods.title }}</text>
         </view>
         <view class="goods-share__line"></view>
         <view class="goods-share">
@@ -45,11 +45,11 @@
     </view>
 
     <!-- 选择商品规格 -->
-    <view v-if="goods.spec_type == 20" class="goods-choice m-top20 b-f" @click="onShowSkuPopup(1)">
+    <view class="goods-choice m-top20 b-f" @click="onShowSkuPopup(1)">
       <view class="spec-list">
         <view class="flex-box">
           <text class="col-8">选择：</text>
-          <text class="spec-name" v-for="(item, index) in goods.specList" :key="index">{{ item.spec_name }}</text>
+          <text class="spec-name" v-for="(item, index) in goods.productPropertyList" :key="index">{{ item.productPropertyName }}</text>
         </view>
         <view class="f-26 col-9 t-r">
           <text class="iconfont icon-arrow-right"></text>
@@ -71,8 +71,8 @@
       <view class="item-title b-f">
         <text>商品描述</text>
       </view>
-      <view v-if="goods.content != ''" class="goods-content__detail b-f">
+      <view v-if="goods.contentHtml != ''" class="goods-content__detail b-f">
-        <mp-html :content="goods.content" />
+        <mp-html :content="goods.contentHtml" />
       </view>
     </view>
 
@@ -91,7 +91,7 @@
             </view>
           </view>
           <!-- 客服 -->
-          <customer-btn v-if="isShowCustomerBtn" :showCard="true" :cardTitle="goods.goods_name" :cardImage="goods.goods_image"
+          <customer-btn v-if="isShowCustomerBtn" :showCard="true" :cardTitle="goods.title" :cardImage="goods.goods_image"
             :cardPath="pagePath">
             <view class="fast-item">
               <view class="fast-icon">
@@ -117,7 +117,7 @@
         <!-- 操作按钮 -->
         <view class="foo-item-btn">
           <view class="btn-wrapper">
-            <view v-if="isEnableCart" class="btn-item btn-item-deputy" @click="onShowSkuPopup(2)">
+            <view class="btn-item btn-item-deputy" @click="onShowSkuPopup(2)">
               <text>加入购物车</text>
             </view>
             <view class="btn-item btn-item-main" @click="onShowSkuPopup(3)">
@@ -132,7 +132,7 @@
     <!-- <shortcut bottom="120" /> -->
 
     <!-- 分享菜单 -->
-    <share-sheet v-model="showShareSheet" :shareTitle="goods.goods_name" :shareImageUrl="goods.goods_image" />
+    <share-sheet v-model="showShareSheet" :shareTitle="goods.title" :shareImageUrl="goods.goods_image" />
 
   </view>
 </template>
@@ -141,7 +141,6 @@
   import { getSceneData } from '@/core/app'
   import * as GoodsApi from '@/api/goods'
   import * as CartApi from '@/api/cart'
-  import SettingModel from '@/common/model/Setting'
   import { GoodsTypeEnum } from '@/common/enum/goods'
   import ShareSheet from '@/components/share-sheet'
   import CustomerBtn from '@/components/customer-btn'
@@ -175,10 +174,8 @@
         skuMode: 1,
         // 显示/隐藏分享菜单
         showShareSheet: false,
-        // 是否支持加入购物车
-        isEnableCart: false,
         // 是否显示在线客服按钮
-        isShowCustomerBtn: false,
+        isShowCustomerBtn: true,
       }
     },
     computed: {
@@ -197,12 +194,9 @@
       this.onRecordQuery(options)
       // 加载页面数据
       this.onRefreshPage()
-      // 是否显示在线客服按钮
-      this.isShowCustomerBtn = await SettingModel.isShowCustomerBtn()
     },
 
     methods: {
-
       // 记录query参数
       onRecordQuery(query) {
         const scene = getSceneData(query)
@@ -213,7 +207,8 @@
       onRefreshPage() {
         const app = this
         app.isLoading = true
-        Promise.all([app.getGoodsDetail(), app.getCartTotal()])
+        // Promise.all([app.getGoodsDetail(), app.getCartTotal()])
+        Promise.all([app.getGoodsDetail()])
           .finally(() => app.isLoading = false)
       },
 
@@ -221,12 +216,16 @@
       getGoodsDetail() {
         const app = this
         return new Promise((resolve, reject) => {
-          GoodsApi.detail(app.goodsId)
+            // GoodsApi.detail(app.goodsId)
+            GoodsApi.apiGetCommodityDetail({ productId: app.goodsId })
             .then(result => {
-              app.goods = result.data.detail
+                app.goods = result.data
-              if (app.goods.goods_type == GoodsTypeEnum.PHYSICAL.value) {
+                app.goods.goods_images = result.data.vvProductDetailList.filter((item) => item.type === 1).map((item) => item.detail)
-                app.isEnableCart = true
+                app.goods.goods_images.unshift(result.data.mainImageUrl)
-              }
+                app.goods.video = result.data.videoUrl
+                app.goods.contentHtml = result.data.vvProductDetailList.find((item) => item.type === 2)?.detail
+                app.goods.productPropertyList = result.data.vvProductPropertyList
+                app.goods.skuList = result.data.vvSkuList
               resolve(result)
             })
             .catch(reject)
@@ -248,7 +247,7 @@
 
       // 更新购物车数量
       onAddCart(total) {
-        this.cartTotal = total
+        // this.cartTotal = total
       },
 
       /**
@@ -257,11 +256,7 @@
        */
       onShowSkuPopup(skuMode = 1) {
         const app = this
-        if (app.isEnableCart) {
+        app.skuMode = skuMode
-          app.skuMode = skuMode
-        } else {
-          app.skuMode = 3
-        }
         app.showSkuPopup = !app.showSkuPopup
       },
 
@@ -287,7 +282,7 @@
      */
     onShareAppMessage() {
       return {
-        title: this.goods.goods_name,
+        title: this.goods.title,
         path: this.pagePath
       }
     },
@@ -299,7 +294,7 @@
      */
     onShareTimeline() {
       return {
-        title: this.goods.goods_name,
+        title: this.goods.title,
         path: this.pagePath
       }
     }

pages/goods2/detail.vue

@@ -221,6 +221,7 @@
           GoodsApi.detail(app.goodsId)
             .then(result => {
               app.goods = result.data.detail
+              console.warn('----- my data is app.goods: ', app.goods)
               if (app.goods.goods_type == GoodsTypeEnum.PHYSICAL.value) {
                 app.isEnableCart = true
               }

utils/request/axios.js

@@ -62,7 +62,15 @@ class HttpRequest {
   // 服务器接口请求
   request(requestConfig) {
     const _this = this;
-    const user_info = uni.getStorageSync("user_info") || {};
+    // 兼容H5（字符串）和微信小程序（对象）场景
+    let user_info = uni.getStorageSync("user_info") || {};
+    if (typeof user_info === "string") {
+      try {
+        user_info = JSON.parse(user_info) || {};
+      } catch (e) {
+        user_info = {};
+      }
+    }
     const reqData = Object.assign(requestConfig.data, {
       buyerId: user_info.buyerId,
       flag: user_info.flag,