Browse Source

积分兑换页面修改、产品详情页面修改

chengjunhui 11 hours ago
parent
commit
91a6fb7ade
5 changed files with 102 additions and 101 deletions
  1. 28 34
      components/skuSelect/skuSelect.vue
  2. 1 1
      hooks/usePageData.ts
  3. 1 1
      pages.json
  4. 68 61
      pages/shop/goodsDetails.vue
  5. 4 4
      pages/shop/pointsMall.vue

+ 28 - 34
components/skuSelect/skuSelect.vue

@@ -3,19 +3,13 @@
     <view class="popupBox">
       <view class="popupBox_t">
         <view class="popupBox_t_l">
-          <image
-            class=""
-            :src="skuValue.cover || details.coverImage"
-            mode="aspectFill"
-          ></image>
+          <image class="" :src="skuValue.cover || details.coverImage" mode="aspectFill"></image>
           <view class="popupBox_t_l_info">
             <view class="popupBox_t_l_info_price">
-              <view
-                class="popupBox_t_l_info_price_l"
-                v-if="details.productPaymentMode == 1"
-              >
-                <text class="iconfont">&#xe669;</text>
-                <text>{{ skuValue.exchangePoint }}</text>
+              <view class="popupBox_t_l_info_price_l" v-if="details.productPaymentMode == 1">
+                <!-- <text class="iconfont">&#xe669;</text> -->
+                <text>{{ skuValue.exchangePoint ? skuValue.exchangePoint * 1 : 0 }}积分</text>
+                <text v-if="skuValue.salePrice && skuValue.salePrice * 1"> + ¥{{ skuValue.salePrice ? skuValue.salePrice * 1 : 0 }}</text>
               </view>
               <view class="popupBox_t_l_info_price_l" v-else>
                 <rich-text :nodes="$mUtil.priceBigSmall(skuValue.salePrice)">
@@ -24,38 +18,22 @@
               <!-- <text class="popupBox_t_l_info_price_r">¥80 </text> -->
               <!-- <text class="u-ml10">7.5折</text> -->
             </view>
-            <view class="popupBox_t_l_info_stock"
-              >库存 {{ skuValue.stock }} 件</view
-            >
+            <view class="popupBox_t_l_info_stock">库存 {{ skuValue.stock }} 件</view>
             <view class="popupBox_t_l_info_sku">{{ skuValue.skuSetName }}</view>
           </view>
         </view>
         <!-- <view class="popupBox_t_r iconfont">&#xe612;</view> -->
         <view>
-          <uv-icon
-            name="close-circle"
-            color="#999999"
-            size="28"
-            @click="closePopup"
-          ></uv-icon>
+          <uv-icon name="close-circle" color="#999999" size="28" @click="closePopup"></uv-icon>
         </view>
       </view>
       <scroll-view scroll-y class="popupBox_sku_box">
-        <view
-          class="popupBox_sku"
-          v-for="(item, index) in skuTable"
-          :key="index"
-        >
+        <view class="popupBox_sku" v-for="(item, index) in skuTable" :key="index">
           <view class="popupBox_sku_item">
             <view class="popupBox_sku_item_lab">{{ item.head.name }}</view>
             <view class="popupBox_sku_item_list">
-              <view
-                :class="selectedObj[index] == v.id ? 'active' : ''"
-                v-for="(v, i) in item.values || []"
-                :key="i"
-                @click="chonseSku(index, v.id)"
-                >{{ v.name }}</view
-              >
+              <view :class="selectedObj[index] == v.id ? 'active' : ''" v-for="(v, i) in item.values || []" :key="i"
+                @click="chonseSku(index, v.id)">{{ v.name }}</view>
             </view>
           </view>
         </view>
@@ -238,9 +216,11 @@ defineExpose({
     padding: 0 30rpx 30rpx;
     display: flex;
     justify-content: space-between;
+
     .popupBox_t_l {
       display: flex;
       align-items: center;
+
       image {
         width: 200rpx;
         height: 200rpx;
@@ -249,26 +229,31 @@ defineExpose({
         margin-right: 20rpx;
         flex-shrink: 0;
       }
+
       .popupBox_t_l_info {
         .popupBox_t_l_info_price {
           display: flex;
           color: #999;
           font-size: 24rpx;
           align-items: baseline;
+
           .popupBox_t_l_info_price_l {
             font-size: 36rpx;
             color: #da4f4f;
           }
+
           .popupBox_t_l_info_price_r {
             text-decoration: line-through;
             margin-left: 15px;
           }
         }
+
         .popupBox_t_l_info_stock {
           color: #999;
           font-size: 24rpx;
           margin-top: 5rpx;
         }
+
         .popupBox_t_l_info_sku {
           font-size: 28rpx;
           color: #1a1a1a;
@@ -276,6 +261,7 @@ defineExpose({
         }
       }
     }
+
     .popupBox_t_r {
       color: #999;
       font-size: 50rpx;
@@ -288,11 +274,13 @@ defineExpose({
 
   .popupBox_sku {
     margin-top: 10rpx;
+
     .popupBox_sku_item {
       .popupBox_sku_item_lab {
         padding: 0 30rpx;
         font-size: 28rpx;
       }
+
       .popupBox_sku_item_list {
         padding: 0 30rpx;
         display: flex;
@@ -300,7 +288,8 @@ defineExpose({
         align-items: center;
         margin-top: 20rpx;
         flex-wrap: wrap;
-        > view {
+
+        >view {
           background-color: #f6f6f6;
           border: 1px solid #f6f6f6;
           padding: 12rpx 30rpx;
@@ -310,7 +299,8 @@ defineExpose({
           border-radius: 4px;
           margin-right: 10rpx;
         }
-        > .active {
+
+        >.active {
           background-color: #f2f5f4;
           border: 1px solid #eb5153;
           color: #eb5153;
@@ -319,18 +309,22 @@ defineExpose({
       }
     }
   }
+
   .popupBox_num {
     display: flex;
     justify-content: space-between;
     padding: 0 30rpx;
     margin-top: 30rpx;
+
     .popupBox_num_lab {
       font-size: 28rpx;
     }
   }
+
   .popupBox_btn {
     padding: 0 30rpx;
     margin-top: 68rpx;
+
     button {
       width: 100%;
       height: 84rpx;

+ 1 - 1
hooks/usePageData.ts

@@ -58,7 +58,7 @@ export function usePageData(ApiFn : Function, agms : AgmsTs) {
 	})
 
 	onPullDownRefresh(() => {
-		initData();
+		initData(params.value);
 	})
 
 	return {

+ 1 - 1
pages.json

@@ -159,7 +159,7 @@
 						"enablePullDownRefresh": true,
 						"navigationBarBackgroundColor": "#f7f7f7"
 					}
-				},
+				}
 			]
 		},
 		{

+ 68 - 61
pages/shop/goodsDetails.vue

@@ -2,29 +2,23 @@
   <view class="container">
     <uv-navbar title="商品详情" placeholder @leftClick="goBack"></uv-navbar>
     <view class="swiperBox">
-      <uv-swiper
-        :list="details.images"
-        height="100vw"
-        indicator
-        indicatorMode="dot"
-      ></uv-swiper>
+      <uv-swiper :list="details.images" height="100vw" indicator indicatorMode="dot"></uv-swiper>
     </view>
     <view class="priceBox">
       <view class="priceBox_l" v-if="details.productPaymentMode == 1">
         <!-- <text class="iconfont2">&#xe669;</text> -->
-        <text>{{ details.minPoints }}</text>
-        +
-        <view>
-          <rich-text
-            :nodes="$mUtil.priceBigSmallTwo(details.minSalePrice)"
-          ></rich-text>
-        </view>
+        <text>{{ details.minPoints }}积分</text>
+        <template v-if="details.minSalePrice && details.minSalePrice * 1">
+          +
+          <view>
+            <rich-text :nodes="$mUtil.priceBigSmallTwo(details.minSalePrice)"></rich-text>
+          </view>
+        </template>
+
       </view>
       <view class="priceBox_l" v-if="details.productPaymentMode == 0">
         <view>
-          <rich-text
-            :nodes="$mUtil.priceBigSmallTwo(details.minSalePrice)"
-          ></rich-text>
+          <rich-text :nodes="$mUtil.priceBigSmallTwo(details.minSalePrice)"></rich-text>
           <!-- <rich-text :nodes="$mUtil.priceBigSmall('100')"></rich-text> -->
         </view>
       </view>
@@ -46,12 +40,8 @@
         </view>
         <view class="titleBox_b_r">
-          <view @click="collect" v-if="!collectStatus" class="iconfont"
-            >&#xe757;</view
-          >
-          <view @click="collect" v-else class="iconfont collectionActive"
-            >&#xe613;</view
-          >
+          <view @click="collect" v-if="!collectStatus" class="iconfont">&#xe757;</view>
+          <view @click="collect" v-else class="iconfont collectionActive">&#xe613;</view>
         </view>
       </view>
     </view>
@@ -66,9 +56,7 @@
             shopDetails.businessName
           }}</view>
           <view class="shopBox_l_content_address uv-line-2">
-            <text class="iconfont" style="color: #fa6138" @click.stop="goLocal"
-              >&#xe990;</text
-            >
+            <text class="iconfont" style="color: #fa6138" @click.stop="goLocal">&#xe990;</text>
             {{ shopDetails.address }}
           </view>
         </view>
@@ -79,14 +67,9 @@
     </view>
     <uv-sticky :offsetTop="tabTop" z-index="100">
       <view class="tab">
-        <view @tap="change(0)" :class="{ active: isChecked == 0 }"
-          >商品详情</view
-        >
-        <view @tap="change(1)" :class="{ active: isChecked == 1 }"
-          >用户评论<span v-if="commentTotal > 0"
-            >({{ commentTotal }})</span
-          ></view
-        >
+        <view @tap="change(0)" :class="{ active: isChecked == 0 }">商品详情</view>
+        <view @tap="change(1)" :class="{ active: isChecked == 1 }">用户评论<span v-if="commentTotal > 0">({{ commentTotal
+        }})</span></view>
       </view>
     </uv-sticky>
     <view v-if="isChecked == 0">
@@ -100,11 +83,7 @@
     </view>
 
     <view class="btnBox">
-      <view class="btnBox_l">
-        <!-- <button open-type="share" class="btnBox_l_share">
-          <view class="iconfont">&#xe625;</view>
-          <view class="btnBox_l_text">分享</view>
-        </button> -->
+      <view class="btnBox_l" v-if="details.productPaymentMode == 0">
         <view class="btnBox_l_chat" @click="goChat">
           <image :src="$handleImageUrl('/kefu.png')" mode="aspectFill"></image>
           <view class="btnBox_l_text">客服</view>
@@ -117,28 +96,16 @@
         </view>
       </view>
       <!--普通商品-->
-      <view class="btnBox_r">
-        <button
-          class="btnBox_r_car"
-          v-if="details.productPaymentMode != 1"
-          @click="buy(0)"
-        >
+      <view class="btnBox_r" :class="{btnBox_r_margin: details.productPaymentMode == 1}">
+        <button class="btnBox_r_car" v-if="details.productPaymentMode != 1" @click="buy(0)">
           加入购物车
         </button>
-        <button
-          v-if="details.productPaymentMode != 1"
-          class="btnBox_r_buy"
-          :class="{ btnBox_r_buy_active: details.productPaymentMode == 1 }"
-          @click="buy(1)"
-        >
+        <button v-if="details.productPaymentMode != 1" class="btnBox_r_buy"
+          :class="{ btnBox_r_buy_active: details.productPaymentMode == 1 }" @click="buy(1)">
           立即购买
         </button>
-        <button
-          v-if="details.productPaymentMode == 1"
-          class="btnBox_r_buy"
-          :class="{ btnBox_r_buy_active: details.productPaymentMode == 1 }"
-          @click="buy(2)"
-        >
+        <button v-if="details.productPaymentMode == 1" class="btnBox_r_buy"
+          :class="{ btnBox_r_buy_active: details.productPaymentMode == 1 }" @click="buy(2)">
           立即兑换
         </button>
       </view>
@@ -358,10 +325,12 @@ const goChat = () => {
 .container {
   padding-bottom: 150rpx;
 }
+
 .swiperBox {
   width: 100%;
   height: 100vw;
 }
+
 .priceBox {
   padding: 24rpx;
   display: flex;
@@ -369,22 +338,27 @@ const goChat = () => {
   background: #fa6138;
   color: #fff;
   font-size: 36rpx;
+
   .iconfont2 {
     font-size: 50rpx;
     vertical-align: bottom;
   }
+
   .discount {
     margin-left: 20rpx;
     font-size: 24rpx;
     text-decoration: line-through;
   }
+
   .priceBox_l {
     display: flex;
     align-items: center;
   }
 }
+
 .titleBox {
   padding: 8rpx 30rpx 40rpx;
+
   .titleBox_t {
     .tipsStatus {
       display: inline-block;
@@ -397,29 +371,35 @@ const goChat = () => {
       color: #fff;
       font-size: 20rpx;
     }
-    > text {
+
+    >text {
       font-size: 34rpx;
       font-weight: bold;
       color: #1a1a1a;
     }
   }
+
   .titleBox_b {
     display: flex;
     justify-content: space-between;
     align-items: center;
+
     .titleBox_b_l {
       font-size: 24rpx;
       margin-top: 15rpx;
       color: #999999;
+
       text {
         color: #ff6600;
       }
     }
+
     .titleBox_b_r {
       .iconfont {
         font-size: 40rpx;
         color: #999;
       }
+
       .collectionActive {
         color: #ff0000;
         // -webkit-transform: scale(1.2);
@@ -428,6 +408,7 @@ const goChat = () => {
     }
   }
 }
+
 .shopBox {
   border-top: 10rpx solid #f5f5f5;
   border-bottom: 10rpx solid #f5f5f5;
@@ -435,21 +416,25 @@ const goChat = () => {
   align-items: center;
   justify-content: space-between;
   padding: 35rpx 30rpx;
+
   .shopBox_l {
     display: flex;
     align-items: center;
+
     image {
       width: 104rpx;
       height: 104rpx;
       border-radius: 50%;
       margin-right: 25rpx;
     }
+
     .shopBox_l_content {
       .shopBox_l_content_name {
         font-size: 28rpx;
         color: #1a1a1a;
         font-weight: bold;
       }
+
       .shopBox_l_content_address {
         font-size: 24rpx;
         color: #999;
@@ -458,6 +443,7 @@ const goChat = () => {
     }
   }
 }
+
 .tab {
   position: sticky;
   top: 0;
@@ -469,9 +455,11 @@ const goChat = () => {
   display: flex;
   align-items: center;
   justify-content: space-around;
-  > view {
+
+  >view {
     padding-bottom: 30rpx;
     position: relative;
+
     &::before {
       content: "";
       position: absolute;
@@ -483,16 +471,19 @@ const goChat = () => {
       background: #fa6138;
       transition: all 0.3s;
     }
+
     &.active {
       font-size: 30rpx;
       color: #fa6138;
       font-weight: 700;
+
       &::before {
         width: 100%;
       }
     }
   }
 }
+
 .btnBox {
   display: flex;
   align-items: center;
@@ -505,32 +496,38 @@ const goChat = () => {
   border-top: 1rpx solid #e6e6e6;
   background: #fff;
   box-sizing: border-box;
+
   .btnBox_l {
     display: flex;
     align-items: center;
     height: 84rpx;
-    > view,
-    > button {
+
+    >view,
+    >button {
       display: flex;
       flex-direction: column;
       justify-content: flex-end;
       height: 84rpx;
       line-height: 42rpx;
       margin-right: 20rpx;
+
       .iconfont {
         color: #999;
         font-size: 40rpx;
       }
+
       .btnBox_l_text {
         color: #1a1a1a;
         font-size: 28rpx;
       }
+
       image {
         width: 40rpx;
         height: 40rpx;
         margin: 0 auto;
       }
     }
+
     // .btnBox_l_chat {
     // }
     .btnBox_l_cart {
@@ -538,9 +535,13 @@ const goChat = () => {
       margin-right: 0;
     }
   }
+  .btnBox_r_margin {
+    margin: auto;
+  }
   .btnBox_r {
     display: flex;
-    > button {
+
+    >button {
       width: 200rpx;
       height: 85rpx;
       line-height: 85rpx;
@@ -549,18 +550,22 @@ const goChat = () => {
       border-radius: 40rpx;
       font-size: 30rpx;
     }
+
     .btnBox_r_car {
       background: #ff9651;
       margin-right: 20rpx;
     }
+
     .btnBox_r_buy {
       background: #fa6138;
     }
+
     .btnBox_r_buy.btnBox_r_buy_active {
       width: 400rpx !important;
     }
   }
 }
+
 button {
   border: none;
   padding: 0;
@@ -568,6 +573,7 @@ button {
   background-color: transparent;
   background: transparent;
 }
+
 button::after {
   border: none;
 }
@@ -576,6 +582,7 @@ button::after {
   padding: 20rpx;
   min-height: 50vh;
 }
+
 .commentBox {
   min-height: 50vh;
 }

+ 4 - 4
pages/shop/pointsMall.vue

@@ -1,7 +1,7 @@
 <template>
     <view class="pointsMall">
         <view class="background">
-            <view class="me-integral" v-if="userCode">
+            <view class="me-integral" v-if="userCode != null">
                 <view class="item"> 我的积分: </view>
                 <view class="num"> {{ userCode || 0 }}积分 </view>
             </view>
@@ -9,7 +9,7 @@
         <swiper class="commodity" @change="imgActiveFun" :indicator-dots="false" :autoplay="false"
             v-if="headGoodsList && headGoodsList.length > 0">
             <swiper-item v-for="item in headGoodsList" :key="item.id" @click="
-                goProductDetails('/pages/product/goods/IntegralGood?id=' + item.id)
+                goProductDetails('/pages/shop/goodsDetails?id=' + item.productId)
                 ">
                 <view class="commodity-item">
                     <image :src="`${item.coverImage}?x-oss-process=style/w_350`" mode=""></image>
@@ -39,7 +39,7 @@
             </view>
             <view class="middle" v-if="RowsList && RowsList.length > 0">
                 <view class="item" v-for="(item, index) in RowsList" :key="index" @click="
-                    goProductDetails('/pages/product/goods/IntegralGood?id=' + item.id)
+                    goProductDetails('/pages/shop/goodsDetails?id=' + item.productId)
                     ">
                     <image :src="`${item.coverImage}?x-oss-process=style/w_350`" mode=""></image>
                     <view class="titletop ">
@@ -81,7 +81,7 @@ const goProductDetails = (url) => {
 const getMyMsg = () => {
     totalIntegral_Api().then(res => {
         if (res && res.code == 200) {
-            userCode.value = res.data
+            userCode.value = res.data || 0;
             // console.log(userCode.value)
         }
     })