购物车

hdApp/src/admin/ghsProduct/components/buy-foot.vue

@@ -5,56 +5,105 @@
                 <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>
+
 <script>
 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();
         }
 	}
 }
 </script>
+
 <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: #5bcb5e;
+        }
+        .action-btn--buy {
+            background-color: #049e2c;
         }
     }
 }
-</style>
+</style>

hdApp/src/admin/ghsProduct/components/sel-popup.vue

@@ -8,7 +8,7 @@
           <div class="tui-popup-price">
             <div class="goods-tit app-bold">{{ info.name }}</div>
             <div class="tui-amount tui-bold">￥{{ info.price?parseFloat(info.price):0 }}</div>
-            <text style="position:absolute;top:70upx;color:#333333;width:400upx;"></text>
+            <text style="position:absolute;top:70upx;color:#333333;width:400upx;">剩{{ info.stock ? parseFloat(info.stock) : 0 }}{{ info.bigUnit }}</text>
           </div>
         </div>
         <scroll-view scroll-y class="tui-popup-scroll">
@@ -20,7 +20,7 @@
           </div>
         </scroll-view>
         <div class="tui-popup-btn">
-          <button class="button-com red" @click="nextFn">下一步</button>
+          <button class="button-com green" @click="nextFn">{{ confirmLabel }}</button>
         </div>
       </div>
     </bottom-popup>
@@ -51,6 +51,10 @@ export default {
     show: {
       type: Boolean,
       default: true
+    },
+    actionType: {
+      type: String,
+      default: 'buy'
     }
   },
   data() {
@@ -63,7 +67,11 @@ export default {
       return this.info.cover
     },
     maxStock() {
-      return 99999
+      const stock = Number(this.info.stock)
+      return stock > 0 ? stock : 99999
+    },
+    confirmLabel() {
+      return this.actionType === 'cart' ? '加入购物车' : '立即购买'
     }
   },
   methods: {
@@ -141,7 +149,7 @@ export default {
   }
 
   .tui-amount {
-    color: #ff201f;
+    color: #049e2c;
     font-size: 34upx;
   }
 

hdApp/src/admin/ghsProduct/detail.vue

@@ -42,8 +42,21 @@
         </view>
       </view>
     </view>
-    <buy-foot @buy="showPopup" @goShop="goShopIndex()" />
-    <sel-popup :show="popupShow" :info="productInfo" :buyNum="buyNum" @change="changeNum" @close="hidePopup" @nextFn="nextFn" />
+    <buy-foot
+      @buy="openBuyPopup"
+      @addCart="openCartPopup"
+      @goShop="goShopIndex"
+      @goCart="goCartPage"
+    />
+    <sel-popup
+      :show="popupShow"
+      :info="productInfo"
+      :buyNum="buyNum"
+      :action-type="popupAction"
+      @change="changeNum"
+      @close="hidePopup"
+      @nextFn="onPopupConfirm"
+    />
     <app-share-mask :show="showShare" text="分享商品" @click="hideShare" />
   </view>
 </template>
@@ -78,6 +91,7 @@ export default {
       imgList: [],
       buyNum: 1,
       popupShow: false,
+      popupAction: 'buy',
       loginShow: false,
       showShare: false,
       isShare:true,
@@ -110,13 +124,80 @@ export default {
 		}
 	},
   methods: {
-    nextFn(num){
-      let customData = {...this.productInfo,bigCount: Number(num),smallCount:0,itemPrice:this.productInfo.price,bigPrice:this.productInfo.price,smallPrice:0}
+    getAffirmUrl() {
+      const ghsId = this.option.ghsId || ''
+      return `/admin/billing/affirmGhs?id=${ghsId}`
+    },
+    onPopupConfirm(num) {
+      const customData = {
+        ...this.productInfo,
+        bigCount: Number(num),
+        smallCount: 0,
+        itemPrice: this.productInfo.price,
+        bigPrice: this.productInfo.price,
+        smallPrice: 0
+      }
       this.addItemEvent(customData)
-      this.$util.pageTo({url:"/admin/billing/affirmGhs?id="+this.option.ghsId,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: `/pagesPurchase/ghsProduct?id=${this.option.ghsId}`, type: 2 })
+    },
+    goCartPage() {
+      if (!this.checkLogin()) {
+        return
+      }
+      this.$util.pageTo({ url: this.getAffirmUrl(), type: 2 })
+    },
+    checkLogin() {
+      if (this.notOpenShop) {
+        const that = this
+        that.$util.confirmModal({ content: '请先注册登录哦', okText: '好的' }, () => {
+          that.pageTo({ url: `/admin/home/login?itemId=${that.id}&ghsShopId=${that.shopId}`, type: 2 })
+        })
+        return false
+      }
+      return true
+    },
+    openCartPopup() {
+      if (!this.checkLogin()) {
+        return
+      }
+      if (!this.productInfo || !this.productInfo.id) {
+        return
+      }
+      const stock = Number(this.productInfo.stock) || 0
+      if (stock <= 0) {
+        this.$msg('暂无库存')
+        return
+      }
+      this.popupAction = 'cart'
+      this.buyNum = 1
+      this.popupShow = true
     },
-    goShopIndex(){
-      this.$util.pageTo({url:'/pagesPurchase/ghsProduct?id='+this.option.ghsId,type:2})
+    openBuyPopup() {
+      if (!this.checkLogin()) {
+        return
+      }
+      if (!this.productInfo || !this.productInfo.id) {
+        return
+      }
+      const stock = Number(this.productInfo.stock) || 0
+      if (stock <= 0) {
+        this.$msg('暂无库存')
+        return
+      }
+      this.popupAction = 'buy'
+      this.buyNum = 1
+      this.popupShow = true
     },
     init() {
       let that = this
@@ -210,18 +291,6 @@ export default {
     changeNum(e) {
       this.buyNum = e.value;
     },
-    showPopup() {
-        let that = this
-        if(this.notOpenShop == true){
-
-          that.$util.confirmModal({content:'请先注册登录哦',okText:'好的'},() => {
-            that.pageTo({url:'/admin/home/login?itemId='+this.id+'&ghsShopId='+this.shopId,type:2})
-          })
-
-          return false;
-        }
-        this.popupShow = true
-    },
     hidePopup() {
       this.popupShow = false;
     },