feat(share): 分享注册流程完善，添加邮费逻辑，分享列表tab区分专区

App.vue

@@ -12,13 +12,13 @@ export default {
     }
     const whiteList = [
       'pages/shareRegist/index',
-      // 'pages/shareRegist/success',
+      'pages/shareRegist/success',
       'pages/login/index',
       // 'pages/wechatPay/bfPay/',
       // 'pages/wechatPay/hfPay/',
-      // 'pages/shareArea/hiList',
-      // 'pages/shareArea/hiOrder',
-      // 'pages/pay/hiPay'
+      'pages/shareArea/hiList',
+      'pages/shareArea/hiOrder',
+      'pages/pay/hiPay',
     ]
     if (whiteList.indexOf(options.path) !== -1) return
     this.$store.dispatch('GetInfo')

components/address.vue

@@ -1,15 +1,15 @@
-
-
 <template>
   <view>
-    <u-picker @cancel='pickershow=false'
+    <u-picker
+      @cancel="pickershow = false"
       :show="pickershow"
       ref="uPicker"
       :defaultIndex="defaultIndex"
       :columns="columns"
       @confirm="confirm"
-              keyName='name'
-              @change="changeHandler"></u-picker>
+      keyName="name"
+      @change="changeHandler"
+    ></u-picker>
   </view>
 </template>
 
@@ -43,7 +43,9 @@ export default {
         if (this.cityList.length > 0) {
           this.getDefaultIndex(n)
         } else {
-          this.getAllAreaList(uni.getStorageSync('pkCountry')||this.user.pkSettleCountry).then((res) => {
+          this.getAllAreaList(
+            uni.getStorageSync('pkCountry') || this.user.pkSettleCountry
+          ).then(res => {
             if (res) {
               this.getDefaultIndex(n)
             }
@@ -54,14 +56,16 @@ export default {
   },
   created() {
     this.user = uni.getStorageSync('User')
-    this.getAllAreaList(uni.getStorageSync('pkCountry')||this.user.pkSettleCountry)
+    this.getAllAreaList(
+      uni.getStorageSync('pkCountry') || this.user.pkSettleCountry
+    )
   },
   methods: {
     getDefaultIndex(arr) {
-      let a = this.provinceList.findIndex((item) => item.pkId == arr[0])
-      let b = this.cityList[a].arrList.findIndex((item) => item.pkId == arr[1])
-      let c = this.quList.findIndex((item) => item.pkId == arr[1])
-      let d = this.quList[c].arrList.findIndex((item) => item.pkId == arr[2])
+      let a = this.provinceList.findIndex(item => item.pkId == arr[0])
+      let b = this.cityList[a].arrList.findIndex(item => item.pkId == arr[1])
+      let c = this.quList.findIndex(item => item.pkId == arr[1])
+      let d = this.quList[c].arrList.findIndex(item => item.pkId == arr[2])
       this.columns = [
         this.provinceList,
         this.cityList[a].arrList,
@@ -83,9 +87,9 @@ export default {
       return new Promise((reslove, reject) => {
         api
           .getAllAreaList({
-            pkCountry: pkCountry,
+            pkCountry: pkCountry || 1,
           })
-          .then((res) => {
+          .then(res => {
             this.provinceList = res.data.provinceList
             // 市数组
             let cityList = []
@@ -138,7 +142,7 @@ export default {
       if (columnIndex === 0) {
         picker.setColumnValues(1, this.cityList[indexs[0]].arrList)
         let arr = []
-        this.quList.forEach((item) => {
+        this.quList.forEach(item => {
           if (item.pkId == this.cityList[indexs[0]].arrList[0].pkId) {
             arr = item.arrList
           }
@@ -147,7 +151,7 @@ export default {
         // picker为选择器this实例，变化第二列对应的选项
       } else if (columnIndex === 1) {
         let arr = []
-        this.quList.forEach((item) => {
+        this.quList.forEach(item => {
           if (item.pkId == this.cityList[indexs[0]].arrList[index].pkId) {
             arr = item.arrList
           }

config/goods.js

@@ -117,3 +117,7 @@ export const energyShop = params =>
 //hi粉确认订单
 export const energyShopSilo = params =>
   http.post('/sale/api/order/valid-silo', params)
+
+// 分享注册确认订单页面获取邮费
+export const getSharePostage = params =>
+  http.post('/sale/api/retail-order/query-reg-order-postage', params)

pages/shareArea/hiList.vue

@@ -1,15 +1,18 @@
 <template>
   <view class="contain">
-    <!-- 头部营销区域 -->
-    <view class="header-section">
-      <view class="hero-content">
-        <view class="hero-title">
-          <text class="hero-main">新人专享特惠</text>
-          <text class="hero-sub">精选好物·品质优选</text>
+    <!-- Tab选项卡 -->
+    <view class="tab-container">
+      <view class="tab-wrapper">
+        <view
+          v-for="tab in tabs"
+          :key="tab.value"
+          class="tab-item"
+          :class="{ 'tab-active': activeTab === tab.value }"
+          @click="switchTab(tab.value)"
+        >
+          <text class="tab-text">{{ tab.label }}</text>
+          <view class="tab-line" v-if="activeTab === tab.value"></view>
         </view>
-        <!-- <view class="promotion-banner">
-          <text class="promo-text">限时优惠·新人福利</text>
-        </view> -->
       </view>
     </view>
 
@@ -30,15 +33,41 @@
             <view class="goodList_ib">
               <view class="price-container">
                 <!-- <text class="currency">￥</text> -->
-                <text class="price">{{
-                  item.waresPrice | numberToCurrency
-                }}</text>
+                <text class="price">{{ formatCurrency(item.waresPrice) }}</text>
+                <text v-if="item.isSale === 1" class="sale-status">已售罄</text>
               </view>
               <!-- <img @click.stop="addCar(item)"
                        src="@/static/images/cart.png"
                        alt=""> -->
             </view>
-            <view class="toBuy" @click.stop="goBuy(item)">立即购买</view>
+
+            <!-- 数量控制区域 -->
+            <view class="quantity-section" v-if="item.isSale !== 1">
+              <view class="quantity-control">
+                <view
+                  class="quantity-btn minus"
+                  :class="{ disabled: item.quantity <= 1 }"
+                  @click.stop="updateQuantity(item, -1)"
+                >
+                  <text class="quantity-icon">−</text>
+                </view>
+                <view class="quantity-display">
+                  <text class="quantity-text">{{ item.quantity || 1 }}</text>
+                </view>
+                <view
+                  class="quantity-btn plus"
+                  @click.stop="updateQuantity(item, 1)"
+                >
+                  <text class="quantity-icon">+</text>
+                </view>
+              </view>
+              <view class="toBuy" @click.stop="goBuy(item)">购买</view>
+            </view>
+
+            <!-- 禁售状态 -->
+            <view class="sold-out-section" v-if="item.isSale === 1">
+              <view class="sold-out-btn">暂时缺货</view>
+            </view>
           </view>
         </view>
         <view class="list-bottom">
@@ -52,6 +81,7 @@
 <script>
 import * as api from '@/config/login.js'
 import { setToken } from '@/config/auth.js'
+import { formatCurrency } from '@/util/index.js'
 
 export default {
   data() {
@@ -59,22 +89,25 @@ export default {
       pkParent: '',
       goodList: [],
       placeParent: '',
-    }
+      activeTab: 41, // 默认选中精品专区
+      tabs: [
+        {
+          label: '精品专区',
+          value: 41,
         },
-  filters: {
-    seles(value) {
-      if (value > 999) {
-        return 999 + '+'
-      } else {
-        return value
-      }
+        {
+          label: '商城专区',
+          value: 43,
         },
+      ],
+    }
   },
   onLoad(options) {
     this.pkParent = options.pkParent
     this.getToken()
   },
   methods: {
+    formatCurrency,
     getToken() {
       api
         .autoLogin({
@@ -97,15 +130,35 @@ export default {
       api
         .queryWares({
           shareMemberCode: this.pkParent,
+          specialArea: this.activeTab,
         })
         .then(res => {
-          this.goodList = res.data
+          // 为每个商品初始化quantity字段
+          this.goodList = res.data.map(item => ({
+            ...item,
+            quantity: item.quantity || 1,
+          }))
         })
     },
+    switchTab(value) {
+      if (this.activeTab !== value) {
+        this.activeTab = value
+        this.goodList = [] // 清空当前列表
+        this.getList() // 重新获取数据
+      }
+    },
+    updateQuantity(item, change) {
+      const newQuantity = (item.quantity || 1) + change
+      if (newQuantity >= 1) {
+        // 使用Vue.set或直接赋值来确保响应式更新
+        this.$set(item, 'quantity', newQuantity)
+      }
+    },
     goBuy(item) {
       const params = {
         ...item,
         pkParent: this.pkParent,
+        specialArea: this.activeTab,
       }
       uni.navigateTo({
         url: '/pages/shareArea/hiOrder?allData=' + JSON.stringify(item),
@@ -117,88 +170,60 @@ export default {
 
 <style lang="scss" scoped>
 .contain {
-  background: linear-gradient(
-    135deg,
-    #005bac 0%,
-    #0066cc 50%,
-    #f5f7fa 50%,
-    #e8f4f8 100%
-  );
+  background: #f8fafc;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
 }
 
-// 头部营销区域
-.header-section {
-  background: linear-gradient(135deg, #005bac 0%, #0066cc 100%);
-  padding: 50rpx 32rpx 60rpx;
-  animation: slideDown 0.6s ease-out;
-
-  .hero-content {
-    text-align: center;
-
-    .hero-title {
-      margin-bottom: 24rpx;
-
-      .hero-main {
-        display: block;
-        color: #fff;
-        font-size: 40rpx;
-        font-weight: 700;
-        margin-bottom: 8rpx;
-        animation: fadeInUp 0.8s ease-out 0.2s both;
-      }
-
-      .hero-sub {
-        display: block;
-        color: rgba(255, 255, 255, 0.9);
-        font-size: 26rpx;
-        font-weight: 400;
-        animation: fadeInUp 0.8s ease-out 0.4s both;
-      }
-    }
-
-    .promotion-banner {
-      background: linear-gradient(
-        135deg,
-        #ff6b35 0%,
-        #f7931e 50%,
-        #ffd700 100%
-      );
-      border-radius: 30rpx;
-      padding: 18rpx 36rpx;
-      box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.4);
-      animation:
-        fadeInUp 0.8s ease-out 0.6s both,
-        promoBreathe 3s ease-in-out infinite 1s;
+// Tab选项卡样式
+.tab-container {
+  background: #ffffff;
+  padding: 20rpx 24rpx 0;
   position: relative;
-      overflow: hidden;
-      border: 2rpx solid rgba(255, 255, 255, 0.3);
+  z-index: 4;
 
-      &::after {
-        content: '';
+  .tab-wrapper {
+    display: flex;
+    justify-content: center;
+    position: relative;
+
+    .tab-item {
+      flex: none;
+      position: relative;
+      cursor: pointer;
+      margin: 0 32rpx;
+      padding: 16rpx 0;
+
+      .tab-text {
+        font-size: 30rpx;
+        font-weight: 500;
+        color: #9ca3af;
+        transition: all 0.3s ease;
+      }
+
+      .tab-line {
         position: absolute;
-        top: 0;
-        left: -100%;
-        width: 100%;
-        height: 100%;
-        background: linear-gradient(
-          90deg,
-          transparent,
-          rgba(255, 255, 255, 0.4),
-          transparent
-        );
-        animation: shimmer 2.5s ease-in-out infinite;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 3rpx;
+        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+        border-radius: 2rpx;
+        animation: slideIn 0.3s ease;
       }
 
-      .promo-text {
-        color: #fff;
-        font-size: 28rpx;
-        font-weight: 700;
-        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-        position: relative;
-        z-index: 2;
+      &.tab-active {
+        .tab-text {
+          color: #1f2937;
+          font-weight: 600;
+        }
+      }
+
+      &:active {
+        .tab-text {
+          transform: scale(0.95);
+        }
       }
     }
   }
@@ -208,12 +233,9 @@ export default {
 .goods-container {
   flex: 1;
   background: #f8fafc;
-  border-radius: 40rpx 40rpx 0 0;
-  margin-top: -40rpx;
+  padding: 24rpx 24rpx 0;
   position: relative;
   z-index: 3;
-  padding: 32rpx 24rpx 0;
-  animation: fadeIn 0.8s ease-out 0.3s both;
 
   .section-title {
     text-align: center;
@@ -244,18 +266,19 @@ export default {
   .goodList_i {
     display: flex;
     background: #ffffff;
-    border-radius: 20rpx;
+    border-radius: 24rpx;
     margin-bottom: 24rpx;
-    padding: 24rpx;
-    box-shadow: 0 4rpx 16rpx rgba(0, 91, 172, 0.06);
-    border: 1rpx solid rgba(0, 91, 172, 0.1);
-    transition: all 0.3s ease;
+    padding: 32rpx;
+    box-shadow: 0 4rpx 20rpx rgba(102, 126, 234, 0.08);
+    border: 1rpx solid rgba(102, 126, 234, 0.08);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     animation: slideInUp 0.6s ease-out both;
     opacity: 0;
 
     &:hover {
-      transform: translateY(-4rpx);
-      box-shadow: 0 12rpx 32rpx rgba(0, 91, 172, 0.15);
+      transform: translateY(-6rpx);
+      box-shadow: 0 16rpx 40rpx rgba(102, 126, 234, 0.2);
+      border-color: rgba(102, 126, 234, 0.15);
     }
 
     .cover {
@@ -300,6 +323,7 @@ export default {
         .price-container {
           display: flex;
           align-items: baseline;
+          justify-content: space-between;
 
           .currency {
             color: #ff6b35;
@@ -313,6 +337,16 @@ export default {
             font-size: 36rpx;
             font-weight: 700;
           }
+
+          .sale-status {
+            color: #ef4444;
+            font-size: 24rpx;
+            font-weight: 500;
+            background: rgba(239, 68, 68, 0.1);
+            padding: 4rpx 12rpx;
+            border-radius: 12rpx;
+            border: 1rpx solid rgba(239, 68, 68, 0.2);
+          }
         }
 
         img {
@@ -321,18 +355,106 @@ export default {
         }
       }
 
-      .toBuy {
-        background: #005bac;
-        color: #ffffff;
-        padding: 20rpx 0;
-        text-align: center;
-        border-radius: 12rpx;
+      // 数量控制区域
+      .quantity-section {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 16rpx;
+
+        .quantity-control {
+          display: flex;
+          align-items: center;
+          background: #f8fafc;
+          border-radius: 20rpx;
+          border: 1rpx solid #e2e8f0;
+          overflow: hidden;
+
+          .quantity-btn {
+            width: 60rpx;
+            height: 60rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: #ffffff;
+            transition: all 0.2s ease;
+            cursor: pointer;
+
+            .quantity-icon {
+              font-size: 32rpx;
+              font-weight: 600;
+              color: #667eea;
+            }
+
+            &.minus {
+              &.disabled {
+                opacity: 0.3;
+                cursor: not-allowed;
+
+                .quantity-icon {
+                  color: #9ca3af;
+                }
+              }
+            }
+
+            &:not(.disabled):active {
+              background: #f1f5f9;
+              transform: scale(0.95);
+            }
+          }
+
+          .quantity-display {
+            min-width: 80rpx;
+            height: 60rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: #ffffff;
+            border-left: 1rpx solid #e2e8f0;
+            border-right: 1rpx solid #e2e8f0;
+
+            .quantity-text {
               font-size: 28rpx;
               font-weight: 600;
+              color: #1f2937;
+            }
+          }
+        }
+      }
+
+      // 禁售状态区域
+      .sold-out-section {
+        display: flex;
+        justify-content: flex-end;
+
+        .sold-out-btn {
+          background: #f3f4f6;
+          color: #9ca3af;
+          padding: 16rpx 32rpx;
+          text-align: center;
+          border-radius: 12rpx;
+          font-size: 24rpx;
+          font-weight: 500;
+          border: 1rpx solid #e5e7eb;
+          cursor: not-allowed;
+        }
+      }
+
+      .toBuy {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: #ffffff;
+        padding: 16rpx 24rpx;
+        text-align: center;
+        border-radius: 12rpx;
+        font-size: 24rpx;
+        font-weight: 600;
         border: none;
-        transition: all 0.3s ease;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         position: relative;
         overflow: hidden;
+        box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
+        flex-shrink: 0;
+        min-width: 120rpx;
 
         &::before {
           content: '';
@@ -351,9 +473,9 @@ export default {
         }
 
         &:hover {
-          background: #0066cc;
-          transform: translateY(-2rpx);
-          box-shadow: 0 6rpx 16rpx rgba(0, 91, 172, 0.3);
+          background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
+          transform: translateY(-1rpx);
+          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
 
           &::before {
             left: 100%;
@@ -361,7 +483,7 @@ export default {
         }
 
         &:active {
-          transform: scale(0.98);
+          transform: scale(0.95) translateY(0);
         }
       }
     }
@@ -379,6 +501,17 @@ export default {
 }
 
 // 动画定义
+@keyframes slideIn {
+  from {
+    transform: scaleX(0);
+    opacity: 0;
+  }
+  to {
+    transform: scaleX(1);
+    opacity: 1;
+  }
+}
+
 @keyframes slideDown {
   from {
     opacity: 0;
@@ -477,19 +610,24 @@ export default {
 
 // 响应式优化
 @media (max-width: 750rpx) {
-  .header-section {
-    padding: 40rpx 24rpx 50rpx;
+  .tab-container {
+    padding: 24rpx 16rpx 0;
 
-    .hero-content {
-      .hero-title .hero-main {
-        font-size: 36rpx;
+    .tab-wrapper {
+      .tab-item {
+        margin: 0 24rpx;
+        padding: 12rpx 0;
+
+        .tab-text {
+          font-size: 28rpx;
+        }
       }
     }
   }
 
   .goodList {
     .goodList_i {
-      padding: 20rpx;
+      padding: 24rpx;
 
       .cover {
         width: 200rpx;
@@ -511,9 +649,39 @@ export default {
           }
         }
 
+        .quantity-section {
+          .quantity-control {
+            .quantity-btn {
+              width: 50rpx;
+              height: 50rpx;
+
+              .quantity-icon {
+                font-size: 28rpx;
+              }
+            }
+
+            .quantity-display {
+              min-width: 70rpx;
+              height: 50rpx;
+
+              .quantity-text {
+                font-size: 24rpx;
+              }
+            }
+          }
+        }
+
         .toBuy {
-          padding: 18rpx 0;
-          font-size: 26rpx;
+          padding: 14rpx 20rpx;
+          font-size: 22rpx;
+          min-width: 100rpx;
+        }
+
+        .sold-out-section {
+          .sold-out-btn {
+            padding: 14rpx 28rpx;
+            font-size: 22rpx;
+          }
         }
       }
     }

pages/shareArea/hiOrder.vue

@@ -163,7 +163,7 @@
             <view class="disFlex justBwn">
               <view class="tit3">{{ '金额小计' }}</view>
               <view class="tit1">{{
-                allData.waresPrice | numberToCurrency
+                (allData.waresPrice * allData.quantity) | numberToCurrency
               }}</view>
             </view>
           </view>
@@ -178,7 +178,7 @@
         <view class="footer_l">
           <view class="disFlex">
             <view class="h1">总价</view>
-            <view class="r1">{{ allData.waresPrice | numberToCurrency }}</view>
+            <view class="r1">{{ totalPrice | numberToCurrency }}</view>
           </view>
           <!-- <view class="disFlex">
             <view class="h1">{{'业绩'}}</view>
@@ -325,7 +325,6 @@ export default {
       this.allData
     )
     this.placeParent = uni.getStorageSync('placeParent')
-    this.allData.quantity = 1
     this.setGoodlistType()
     this.getGenerate()
     this.getCountry()
@@ -333,24 +332,18 @@ export default {
     // this.getDeliveryList()
   },
   onShow() {},
-  methods: {
-    getRegiestLevel() {
-      const params = {
-        firstCheck: 0,
-        specialArea: this.specialArea,
-        shopList: this.shoppingArr.map(id => {
-          return {
-            shoppingId: id,
-          }
-        }),
-      }
+  computed: {
+    totalPrice() {
+      return (
+        this.allData.waresPrice * this.allData.quantity +
+        Number(this.form.postage)
+      )
     },
+  },
+  methods: {
     regionSelectHandle() {
       this.$refs.regionAddress.setShow(this.provinceList[0].pkId)
     },
-    setRegionAddress(area) {
-      this.regionAddress = area
-    },
     phonePass(rule, value, callback) {
       if (!value) {
         callback(new Error('请输入联系电话'))
@@ -393,12 +386,18 @@ export default {
       this.isCountry = true
       this.countryIndex = index
     },
+    getPostage() {
+      api
+        .getSharePostage({
+          specialArea: this.allData.specialArea,
+          waresList: this.waresList,
+          ...this.form,
+        })
+        .then(res => {
+          this.form.postage = res.data.postage
+        })
+    },
     sureCountry(e) {
-      console.log(
-        '%c [ e ]-418',
-        'font-size:13px; background:#b131b9; color:#f575fd;',
-        e
-      )
       const { value } = e
       this.form.pkCountry = value[0].id
       this.form.pkCountryLabel = value[0].label
@@ -423,6 +422,7 @@ export default {
           .fansConfirm(
             Object.assign({}, this.form, {
               waresList: this.waresList,
+              specialArea: this.allData.specialArea,
             })
           )
           .then(res => {
@@ -437,15 +437,10 @@ export default {
     },
     setGoodlistType() {
       let carList = {
-        quantity: 1,
+        quantity: this.allData?.quantity || 1,
         pkWares: this.allData.pkId,
         skuList: [],
       }
-      console.log(
-        '%c [ carList ]-419',
-        'font-size:13px; background:#b131b9; color:#f575fd;',
-        this.allData
-      )
       this.allData.productGroup.forEach(item => {
         carList.skuList.push({
           pkWaresSku: item.pkSkuId,
@@ -464,6 +459,7 @@ export default {
       this.form.recProvince = obj.province
       this.form.recCity = obj.city
       this.form.recCounty = obj.county
+      this.getPostage()
       this.$forceUpdate()
       // this.setGoodlistType()
       // this.queryAdressPostage()