购物车

mallApp/src/pages/item/components/buy-foot.vue

@@ -5,9 +5,16 @@
                 <i class="iconfont icondianpu"></i>
                 <div class="btn-text">店铺首页</div>
             </div>
+            <div class="btn-wrap" @click="goCart()">
+                <i class="iconfont icongouwuche"></i>
+                <div class="btn-text">我的购物车</div>
+            </div>
         </div>
         <div class="btn-right">
-            <button class="button-com red" @click="buy">购买</button>
+            <view class="action-group">
+                <button class="action-btn action-btn--cart" @click="addCart">加入购物车</button>
+                <button class="action-btn action-btn--buy" @click="buy">立即购买</button>
+            </view>
         </div>
     </div>
 </template>
@@ -17,17 +24,23 @@ export default {
     name: 'buy-foot',
     props:{
         isShare:{
-			type:Boolean,
+			type: Boolean,
 			default: false
 		},
     },
 	methods: {
+		addCart() {
+			this.$emit('addCart')
+		},
 		buy() {
 			this.$emit('buy')
 		},
         goShop(){
             this.$emit('goShop')
         },
+        goCart() {
+            this.$emit('goCart')
+        },
         goBack() {
             uni.navigateBack();
         }
@@ -38,25 +51,59 @@ export default {
 <style lang="scss" scoped>
 .app-footer {
     @include disFlex(center, space-between);
+    padding: 0 16upx;
+    box-sizing: border-box;
     .btn-left {
-        @include disFlex(center, space-evenly);
-        width: 36%;
+        @include disFlex(center, space-between);
+        width: 38%;
+        .btn-wrap {
+            flex: 1;
+            @include disFlex(center, center);
+            flex-direction: column;
+        }
         .iconfont {
             font-size: 44upx;
+            color: #333;
         }
         .btn-text {
-            font-size: 24upx;
+            font-size: 22upx;
             font-weight: bold;
+            color: #333;
+            margin-top: 4upx;
+            white-space: nowrap;
         }
     }
     .btn-right {
-        width: 62%;
-        @include disFlex(center, center);
-        .button-com {
-            width: calc(90% - 30upx);
-            font-size: 32upx;
-            font-weight: 400;
+        width: 60%;
+        .action-group {
+            display: flex;
+            flex-direction: row;
+            width: 100%;
+            border-radius: 100upx;
+            overflow: hidden;
+        }
+        .action-btn {
+            flex: 1;
+            min-width: 0;
+            margin: 0;
+            padding: 24upx 8upx;
+            font-size: 28upx;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 1.2;
+            border: none;
+            border-radius: 0;
+            box-sizing: border-box;
+            &::after {
+                border: none;
+            }
+        }
+        .action-btn--cart {
+            background-color: #ffb800;
+        }
+        .action-btn--buy {
+            background-color: #ff6600;
         }
     }
 }
-</style>
+</style>

mallApp/src/pages/item/components/sel-popup.vue

@@ -22,7 +22,7 @@
           </view>
         </scroll-view>
         <view class="tui-popup-btn">
-          <button class="button-com red" @click="nextFn">下一步</button>
+          <button class="button-com red" @click="nextFn">{{ confirmLabel }}</button>
         </view>
       </view>
     </bottom-popup>
@@ -53,6 +53,10 @@ export default {
     show: {
       type: Boolean,
       default: true
+    },
+    actionType: {
+      type: String,
+      default: 'buy'
     }
   },
   data() {
@@ -65,7 +69,11 @@ export default {
         return this.info.cover
     },
     maxStock() {
-      return 9999
+      const stock = Number(this.info.stock)
+      return stock > 0 ? stock : 9999
+    },
+    confirmLabel() {
+      return this.actionType === 'cart' ? '加入购物车' : '立即购买'
     }
   },
   methods: {

mallApp/src/pages/item/detail.vue

@@ -42,8 +42,21 @@
         </view>
       </view>
     </view>
-    <sel-popup :show="popupShow" :info="data" :buyNum="buyNum" @change="changeNum" @close="hidePopup" @nextFn="nextFn" />
-    <buy-foot @buy="showPopup" :stock="data.stock" @goShop="goShopIndex()" />
+    <sel-popup
+      :show="popupShow"
+      :info="data"
+      :buyNum="buyNum"
+      :action-type="popupAction"
+      @change="changeNum"
+      @close="hidePopup"
+      @nextFn="onPopupConfirm"
+    />
+    <buy-foot
+      @buy="openBuyPopup"
+      @addCart="openCartPopup"
+      @goShop="goShopIndex"
+      @goCart="goCartPage"
+    />
   </view>
 </template>
 <script>
@@ -77,6 +90,7 @@ export default {
       imgList: [],
       buyNum: 1,
       popupShow: false,
+      popupAction: 'buy',
       loginShow: false,
       showShare: false,
 			pageType: "cg",
@@ -105,13 +119,38 @@ export default {
     ...mapGetters({ shopUser: "getShopUser",loginInfo:"getLoginInfo" })
   },
   methods: {
-    nextFn(num){
-      let customData = {...this.data,bigCount: Number(num),smallCount:0,itemPrice:this.data.skPrice,bigPrice:this.data.skPrice,smallPrice:0}
+    getAffirmUrl() {
+      const account = this.option.account || ''
+      return `/pages/billing/affirmGhs?account=${account}&hdId=${this.hdId}`
+    },
+    onPopupConfirm(num) {
+      const customData = {
+        ...this.data,
+        bigCount: Number(num),
+        smallCount: 0,
+        itemPrice: this.data.skPrice,
+        bigPrice: this.data.skPrice,
+        smallPrice: 0
+      }
       this.addItemEvent(customData)
-      this.$util.pageTo({url:"/pages/billing/affirmGhs?account="+this.option.account+'&hdId='+this.hdId,type:2})
+      this.hidePopup()
+      if (this.popupAction === 'buy') {
+        this.$util.pageTo({ url: this.getAffirmUrl(), type: 2 })
+      } else {
+        uni.showToast({
+          title: '已加入购物车',
+          duration: 1500
+        })
+      }
     },
-    goShopIndex(){
-      this.$util.pageTo({url:"/pages/item/item?account="+this.option.account+'&hdId='+this.hdId,type:2})
+    goShopIndex() {
+      this.$util.pageTo({ url: `/pages/item/item?account=${this.option.account}&hdId=${this.hdId}`, type: 2 })
+    },
+    goCartPage() {
+      if (!this.checkLogin()) {
+        return
+      }
+      this.$util.pageTo({ url: this.getAffirmUrl(), type: 2 })
     },
     init() {
       let that = this
@@ -170,22 +209,54 @@ export default {
     changeNum(e) {
       this.buyNum = e.value;
     },
-    showPopup() {
-        if(this.globalLoginStyle == 0){
-          let that = this
-          uni.showModal({
-                title: '提示',
-                content: '请先注册登录哦',
-                confirmText: "好的",
-                success: function(res) {
-                if (res.confirm) {
-                    that.pageTo({url:'/pages/login/index',type:2})
-                }
+    checkLogin() {
+      if (this.globalLoginStyle == 0) {
+        const that = this
+        uni.showModal({
+          title: '提示',
+          content: '请先注册登录哦',
+          confirmText: '好的',
+          success(res) {
+            if (res.confirm) {
+              that.pageTo({ url: '/pages/login/index', type: 2 })
             }
-          })
-          return false;
-        }
-        this.popupShow = true
+          }
+        })
+        return false
+      }
+      return true
+    },
+    openCartPopup() {
+      if (!this.checkLogin()) {
+        return
+      }
+      if (!this.data || !this.data.id) {
+        return
+      }
+      const stock = Number(this.data.stock) || 0
+      if (stock <= 0) {
+        this.$msg('暂无库存')
+        return
+      }
+      this.popupAction = 'cart'
+      this.buyNum = 1
+      this.popupShow = true
+    },
+    openBuyPopup() {
+      if (!this.checkLogin()) {
+        return
+      }
+      if (!this.data || !this.data.id) {
+        return
+      }
+      const stock = Number(this.data.stock) || 0
+      if (stock <= 0) {
+        this.$msg('暂无库存')
+        return
+      }
+      this.popupAction = 'buy'
+      this.buyNum = 1
+      this.popupShow = true
     },
     hidePopup() {
       this.popupShow = false;