商品详情页接口

src/api/points.js

@@ -92,4 +92,16 @@ export function getPointShopList(data) {
         data
     });
     */
-}
+   
+
+}
+
+
+//查询商品详情
+export function productGetById(data) {
+    return request({
+        method: 'get',
+        url: '/product/getById/',
+        data
+    });
+}

src/points/components/product-list/product-list.vue

@@ -208,8 +208,8 @@ export default {
     },
     // 处理兑换
     handleExchange(product) {
-      uni.redirectTo({
-        url: '/points/productDetails/index'
+      uni.navigateTo({
+        url: '/points/productDetails/index?id=10'
       });
       console.log('兑换商品:', product)
     },

src/points/productDetails/components/selectProduct.vue

@@ -14,39 +14,53 @@
             <view style="display:flex;justify-content: space-between;">
                 <view style="display:flex;">
                     <view>
-                        <image style="width: 120rpx;height: 120rpx;" src="@/static/points/closeIcon.png" mode="">
+                        <image v-if="selectedObj" style="width: 120rpx;height: 120rpx;"
+                            :src="$globalData.publicUrl + selectedObj.image"
+                            mode="">
+                        </image>
+                        <image v-else style="width: 120rpx;height: 120rpx;"
+                            :src="$globalData.publicUrl + params.productMainImage"
+                            mode="">
                         </image>
                     </view>
                     <view
                         style="margin-left: 24rpx;display: flex;flex-direction: column;justify-content: space-between;">
-                        <view class="price">实付价 ￥10元+1000积分 </view>
-                        <view class="spec">已选:大号,白色 </view>
+                        <view class="price" v-if="selectedObj">实付价
+                            {{ params.paymentType == 1 ? selectedObj.pricePoint + '积分' :
+                                params.paymentType == 2 ? '￥' + selectedObj.priceMoney + '元' :
+                                    params.paymentType == 3 ? '￥' + selectedObj.priceMoney + '元' + '+' +
+                                        selectedObj.pricePoint + '积分' : null }}
+                        </view>
+                        <view class="price" v-else>实付价
+                            {{ params.paymentType == 1 ? params.pricePoint + '积分' :
+                                params.paymentType == 2 ? '￥' + params.priceMoney + '元' :
+                                    params.paymentType == 3 ? '￥' + params.priceMoney + '元' + '+' +
+                                        params.pricePoint + '积分' : null }}
+                        </view>
+                        <view class="spec" v-if="selectedObj">已选:{{ selectedObj.specValueText }} </view>
                     </view>
 
                 </view>
-                <view class="deletePrice">100</view>
+                <view class="deletePrice" v-if="selectedObj">{{ selectedObj.originPrice }}元</view>
             </view>
         </view>
         <!--选择规格 -->
         <view class="specClass">
-            <view class="title">颜色（3）</view>
-            <view style="display: flex;flex-wrap: wrap;">
-                <view class="specCombination" :class="value == 4 ? 'active' : ''" v-for="value in 4">
-                    浅纹-白色-普通
-                </view>
-            </view>
-            <view class="title" style="margin-top: 24rpx;">尺码（2）</view>
-            <view style="display: flex;flex-wrap: wrap;">
-                <view class="specCombination" :class="value == 2 ? 'active' : ''" v-for="value in 2">
-                    普通大号 - 1000ML
+            <view v-for="arr in specList">
+                <view class="title">{{ arr[0] }} ({{ Array.from(arr[1]).length }})</view>
+                <view style="display: flex;flex-wrap: wrap;">
+                    <view  class="specCombination" @click="selectedSpecFun(value, arr[0])"
+                        :class="selectedObj?selectedObj.specValueText.indexOf(value) != -1 ? 'active' : '':''"
+                        v-for="value in Array.from(arr[1])">
+                        {{ value }}
+                    </view>
                 </view>
             </view>
-
         </view>
         <!--运费 -->
         <view class="yunFeiClass">
             <view class="text">运费</view>
-            <view class="price">￥0</view>
+            <view class="price">￥{{ params.freight }}</view>
 
         </view>
         <!--订单备注 -->
@@ -57,10 +71,22 @@
 
         </view>
         <view class="footer-bar">
-            <u-button :customStyle="{
+
+            <u-button v-if="!selectedObj" :customStyle="{
+                color: '#fff',
+                background: '#03C1B8'
+            }">请选择</u-button>
+            <u-button v-else-if="selectedObj && selectedObj.stock" :customStyle="{
                 color: '#fff',
                 background: '#03C1B8'
-            }" @click="redeemNowFun">实付价 ￥10元+1000积分</u-button>
+            }" @click="redeemNowFun">实付价 {{ params.paymentType == 1 ? selectedObj.pricePoint + '积分' :
+                params.paymentType == 2 ? '￥' + selectedObj.priceMoney + '元' :
+                    params.paymentType == 3 ? '￥' + selectedObj.priceMoney + '元' + '+' +
+                        selectedObj.pricePoint + '积分' : null }}</u-button>
+            <u-button v-else-if="selectedObj.stock === 0" :customStyle="{
+                color: '#999999 ',
+                background: '#eee'
+            }">库存不足</u-button>
         </view>
     </view>
 
@@ -70,30 +96,97 @@
 
 export default {
     components: {},
+    props: {
+        params: {
+            type: Object,
+            default: {}
+        }
+    },
     data() {
         return {
-            showPopup: false
+            reasonRefusal: '',
+            showPopup: false,
+            specValueText: '',
+            specValuePrice: '',
+            specList: [],
+            selectedObj: null
+
 
 
         }
     },
     onLoad(data) {
-
+        console.log('555')
     },
     onShow() {
+        console.log('555')
 
     },
     onPageScroll() {
     },
+    create() {
+        console.log('55522')
+    },
+    computed: {
+        // specValuePrice() {
+        //     return ;
+        // }
+    },
 
     methods: {
+        //
+        onShowFun(selectedObj) {
+            if (selectedObj) {
+                this.selectedObj = JSON.parse(JSON.stringify(selectedObj))
+            }else{
+                this.selectedObj = this.params.specComboVOList[0]
+            }
+            const map = new Map();
+            this.params.specComboVOList.forEach(item => {
+                item.specNameValueList.forEach(spec => {
+                    const key = spec.specName;
+                    if (!map.has(key)) {
+                        map.set(key, new Set());
+                    }
+                    map.get(key).add(spec.specValue);
+                });
+            })
+            this.specList = Array.from(map)
+        },
+        //点击选规则
+        selectedSpecFun(specValue, specName) {
+            if (this.selectedObj) {
+                let selectedObj = JSON.parse(JSON.stringify(this.selectedObj))
+                let specValueT
+                selectedObj.specNameValueList.forEach((e, i) => {
+                    if (e.specName == specName) {
+                        specValueT = e.specValue
+                    }
+                })
+                selectedObj.specValues.forEach((r, n) => {
+                    if (r == specValueT) {
+                        selectedObj.specValues.splice(n, 1)
+                    }
+                })
+                this.params.specComboVOList.forEach((item, index) => {
+                    if (item.specValueText.indexOf(specValue) != -1 && item.specValueText.indexOf(selectedObj.specValues.toString()) != -1) {
+                        this.selectedObj = item
+                    }
+
+                })
+            }
+
+            //console.log(this.selectedObj, 'this.selectedObj')
+            //console.log(specValue, specName, 'value,specName')
+
+        },
         //关闭选择商品页
         closeSelectProduct() {
-            this.$emit('closeSelectProduct')
+            this.$emit('closeSelectProduct', this.selectedObj ? JSON.parse(JSON.stringify(this.selectedObj)) : null)
         },
         //去我的地址页面
         addressSelectFun() {
-             uni.navigateTo({
+            uni.navigateTo({
                 url: '/points/productDetails/addressManagement'
             });
         }
@@ -177,11 +270,11 @@ export default {
     .specClass {
         background-color: #fff;
         margin-top: 24rpx;
-        padding: 24rpx;
-        height: 396rpx;
+        padding: 0 24rpx 24rpx 24rpx;
         border-radius: 20rpx 20rpx 20rpx 20rpx;
 
         .title {
+            padding-top: 24rpx;
             font-weight: bold;
             font-size: 28rpx;
             color: #333333;

src/points/productDetails/index.vue

@@ -9,38 +9,57 @@
       </u-navbar>
       <!-- 主图 -->
       <view class="mainImame">
-
+        <ImageItem :src="$globalData.publicUrl + params.productMainImage" />
       </view>
       <view class="content">
         <!-- 第一行text -->
         <view class="firstRow">
-          <text class="priceClass">10元+1000积分</text>
-          <text class="deletePriceClass">100元</text>
-          <view class="productName"> 广誉源会员定制玻璃杯广誉源会员定制玻璃杯</view>
-          <view class="discribeClass">双层曲线杯身在隔热防烫</view>
+          <text v-if="selectedObj" class="priceClass">
+            {{ params.paymentType == 1 ? selectedObj.pricePoint + '积分' :
+              params.paymentType == 2 ? selectedObj.priceMoney + '元' :
+                params.paymentType == 3 ? selectedObj.priceMoney + '元' + '+' +
+                  selectedObj.pricePoint + '积分' : null }}
+          </text>
+          <text v-else class="priceClass">
+            {{ params.paymentType == 1 ? params.pricePoint + '积分' :
+              params.paymentType == 2 ? params.priceMoney + '元' :
+                params.paymentType == 3 ? params.priceMoney + '元' + '+' +
+                  params.pricePoint + '积分' : null }}
+          </text>
+          <text class="deletePriceClass">{{selectedObj?selectedObj.originPrice:params.specComboVOList?params.specComboVOList[0].originPrice:null}}元</text>
+          <view class="productName"> {{ params.name }}</view>
+          <view class="discribeClass">{{ params.summary }}</view>
           <view class="serviceClass">
-            <ImageItem style="width: 24rpx;height: 24rpx;margin-right: 4rpx;" src="/static/points/Group4.png" />放心购
-            <ImageItem style="width: 24rpx;height: 24rpx;margin-left: 26rpx;margin-right: 4rpx;"
-              src="/static/points/Group6.png" />假一赔三
-            <ImageItem style="width: 24rpx;height: 24rpx;margin-left: 26rpx;margin-right: 4rpx;"
-              src="/static/points/Group2.png" /> 7天无理由退换
-            <ImageItem style="width: 24rpx;height: 24rpx;margin-left: 26rpx;margin-right: 4rpx;"
-              src="/static/points/return7.png" /> 破损包退换
+            <view v-for="item in servicePromiseArr">
+              <view style="display: flex;align-items: center;" v-if="item.isShow">
+                <ImageItem style="width: 24rpx;height: 24rpx;margin-right: 4rpx;" :src="item.icon" />
+                <view style="margin-right: 24rpx;">{{ item.name }}</view>
+              </view>
+            </view>
           </view>
 
         </view>
         <!-- 第二行text -->
         <view class="seconedRow">
           <view class="specClass">
-            <view style="display: flex;align-items: center;">
-              <text style="color: #666666;">规格</text>
-              <ImageItem class="imgClass" v-for="item in 3" src="/static/points/Group6.png" />
-            </view>
-            <view style="display: flex;align-items: center;">
-              <text style="color: #666666;margin-right: 8rpx;">已选：白色，大号</text>
+            <view v-if="!selectedObj"
+              style="display: flex;align-items: center;justify-content:space-between;width: 100%;">
+              <view style="color: #666666;">选择</view>
               <image style="width: 28rpx;height: 28rpx;" @click="selectProductShowFun"
+                src="@/static/points/Keyboard_arrow_rifht.png" mode=""></image>
+            </view>
+            <view  v-if="selectedObj" style="display: flex;align-items: center;justify-content: space-between;width: 100%;">
+              <view style="display: flex;align-items: center;">
+                <text style="color: #666666;">规格</text>
+                <ImageItem class="imgClass" :src="$globalData.publicUrl + selectedObj.image" />
+              </view>
+              <view style="display: flex;align-items: center;">
+                <text style="color: #666666;margin-right: 8rpx;">已选：{{ selectedObj.specValueText }}</text>
+                <image style="width: 28rpx;height: 28rpx;" @click="selectProductShowFun"
                   src="@/static/points/Keyboard_arrow_rifht.png" mode=""></image>
+              </view>
             </view>
+
           </view>
           <view class="arriveAddressClass">
             <text style="color: #666666;margin-right: 24rpx;">送至</text>
@@ -52,16 +71,20 @@
           </view>
           <view class="seedAddressClass">
             <text style="color: #666666;margin-right: 24rpx;">发货</text>
-            <text>山西省太原市小店区 | 免运费</text>
+            <text>山西省太原市小店区 | {{ params.freight == 0 ? '免运费' : '运费' + params.freight + '元' }}</text>
           </view>
           <view class="promiseSeedTime" style="margin-left: 80rpx;">
-            下单后48小时内发货
+            下单后{{ params.deliveryTime }}小时内发货
           </view>
 
         </view>
         <!-- 第三行商品详情 -->
         <view class="produceDateil">
           <view style="font-weight: 800;font-size: 32rpx;color: #333333;">商品详情</view>
+          <view v-for="img in params.productImage" style="margin-top: 20rpx;">
+            <image style="width: 100%;" :src="$globalData.publicUrl + img" mode="aspectFill"></image>
+          </view>
+
         </view>
         <!-- 兑换须知 -->
         <view class="niticeClass">
@@ -96,23 +119,21 @@
       </view>
 
       <view class="footer-bar">
-        <u-button :customStyle="{
+        <u-button v-if="selectedObj?selectedObj.stock:params.stock" :customStyle="{
           color: '#fff',
           background: '#03C1B8'
         }" @click="redeemNowFun">立即兑换</u-button>
-      </view>
-      <!-- <view class="footer-bar">
-        <u-button :customStyle="{
+        <u-button v-else :customStyle="{
           color: '#999999 ',
           background: '#eee'
         }">库存不足</u-button>
-      </view> -->
+      </view>
 
       <u-popup :show="redemptionRulesShowPopup" mode="bottom" @close="redemptionRulesShowPopup = false" round="20">
         <RedemptionRules ref="redemptionRulesRef"></RedemptionRules>
       </u-popup>
       <u-popup :show="selectProductShowPopup" mode="bottom" round="10">
-        <SelectProduct ref="selectProductRef" @closeSelectProduct="closeSelectProduct"></SelectProduct>
+        <SelectProduct :params="params" ref="selectProductRef" @closeSelectProduct="closeSelectProduct"></SelectProduct>
       </u-popup>
 
     </scroll-view>
@@ -127,6 +148,7 @@
 import ImageItem from "@/components/swiper/components/image.vue";
 import RedemptionRules from "./components/redemptionRules.vue";
 import SelectProduct from "./components/selectProduct.vue";
+import { productGetById } from '@/api/points'
 
 export default {
   components: { ImageItem, RedemptionRules, SelectProduct },
@@ -135,11 +157,22 @@ export default {
       isTop: 0,
       redemptionRulesShowPopup: false,
       selectProductShowPopup: false,
+      params: {},
+      servicePromiseArr: [
+        { name: '放心购', icon: '/static/points/Group4.png', isShow: false },
+        { name: '假一赔三', icon: '/static/points/Group6.png', isShow: false },
+        { name: '7天无理由退换', icon: '/static/points/Group2.png', isShow: false },
+        { name: '破损包退换', icon: '/static/points/return7.png', isShow: false },
+      ],
+      selectedObj: null
 
 
     }
   },
-  onLoad(data) {
+  onLoad(id) {
+    if (id) {
+      this.productGetByIdFun(id)
+    }
 
   },
   onShow() {
@@ -154,22 +187,57 @@ export default {
     handleContentScroll(e) {
       this.isTop = e.detail.scrollTop > 0
     },
+    //查询商品详情
+    productGetByIdFun(id) {
+      productGetById({ id: 19 }).then(res => {
+        if (res.data.code === 200) {
+          this.params = Object.assign({}, res.data.data)
+          //this.selectedObj = this.params.specComboVOList[0]
+          this.servicePromiseArr.forEach(element => {
+            this.params.servicePromise.map(m => {
+              if (m == element.name) {
+                element.isShow = true
+              }
+            })
+
+          });
+
+        }
+
+      })
+
+    },
     //兑换须知页面
     clichFun() {
       this.redemptionRulesShowPopup = true
     },
     //立即兑换
     redeemNowFun() {
-      uni.navigateTo({
-        url: '/points/productDetails/paymentSuccessful'
-      });
+      if (this.selectedObj) {
+        uni.navigateTo({
+          url: '/points/productDetails/paymentSuccessful'
+        });
+      } else {
+        this.selectProductShowPopup = true
+        this.$nextTick(() => {
+          this.$refs.selectProductRef.onShowFun(this.selectedObj)
+        });
+      }
+
     },
     //打开选择商品页
     selectProductShowFun() {
       this.selectProductShowPopup = true
+      this.$nextTick(() => {
+        this.$refs.selectProductRef.onShowFun(this.selectedObj)
+      });
     },
-
-    closeSelectProduct() {
+    //关闭选择商品页
+    closeSelectProduct(selectedObj) {
+      if(selectedObj){
+        this.selectedObj = selectedObj
+      }
+      
       this.selectProductShowPopup = false
     },
     //去我的地址页面
@@ -198,7 +266,6 @@ export default {
 <style lang="scss" scoped>
 .mainImame {
   height: 456rpx;
-  border: 1px solid red
 }
 
 .footer-bar {
@@ -223,7 +290,6 @@ export default {
 
   .firstRow {
     background-color: #fff;
-    height: 288rpx;
     border-radius: 20rpx 20rpx 20rpx 20rpx;
     padding: 26rpx 24rpx 24rpx 24rpx;
 
@@ -254,7 +320,6 @@ export default {
     .productName {
       margin-top: 22rpx;
       width: 638rpx;
-      height: 88rpx;
       font-weight: bold;
       font-size: 36rpx;
       color: #333333;
@@ -295,7 +360,6 @@ export default {
   }
 
   .seconedRow {
-    height: 284rpx;
     background: #FFFFFF;
     border-radius: 20rpx 20rpx 20rpx 20rpx;
     margin-top: 24rpx;
@@ -313,6 +377,7 @@ export default {
       align-items: center;
       justify-content: space-between;
       position: relative;
+
       .imgClass {
         width: 64rpx;
         height: 64rpx;