购物车

src/App.vue

@@ -4,7 +4,7 @@
  * @Author: dream
  * @Date: 2021-03-25 15:13:56
  * @LastEditors: dream
- * @LastEditTime: 2021-03-30 10:25:34
+ * @LastEditTime: 2021-03-30 15:33:35
 -->
 <script>
 export default {
@@ -43,5 +43,8 @@ export default {
     /deep/ u-line {
       flex: none;
     }
+    /deep/ button[disabled] {
+      background: $iph-btn-disabel-bg !important;
+    }
   }
 </style>

src/components/iphEmpty.vue

@@ -4,7 +4,7 @@
  * @Author: dream
  * @Date: 2021-03-28 15:09:24
  * @LastEditors: dream
- * @LastEditTime: 2021-03-28 15:30:31
+ * @LastEditTime: 2021-03-30 15:50:43
 -->
 <template>
 	<view
@@ -18,6 +18,11 @@
       <image class="empty-img" src="~@/static/common/def_list.png" />
       <text class="empty-text">暂无内容</text>
     </block>
+    <block v-if="type === 2">
+      <image class="empty-shopcat-img" src="~@/static/common/icon_quesheng_gwc.png" />
+      <text class="empty-shopcat-text">购物车空空如也，快来挑好货吧</text>
+    </block>
+    <slot />
   </view>
 </template>
 
@@ -59,5 +64,15 @@ export default {
     font-size: 28px;
     color: $iph-empty-text;
   }
+  .empty-shopcat-img {
+    width: 194px;
+    height: 186px;
+  }
+  .empty-shopcat-text {
+    margin-top: 32px;
+    line-height: 40px;
+    font-size: 28px;
+    color: $iph-desc-text;
+  }
 }
 </style>

src/components/iphGoodCard.vue

@@ -4,7 +4,7 @@
  * @Author: dream
  * @Date: 2021-03-28 10:12:49
  * @LastEditors: dream
- * @LastEditTime: 2021-03-28 15:10:06
+ * @LastEditTime: 2021-03-30 14:53:16
 -->
 <template>
 	<view class="good-card-main u-flex u-col-top" @click="cardClick">
@@ -26,11 +26,18 @@
           v-if="value.originalPrice"
         >¥{{value.originalPrice}}</view>
         <view class="u-flex-1 u-flex u-row-right">
-          <block v-if="!isShowEmpty">
-            <view class="iph-icon iph-icon-plus" @click.stop="plusClick"></view>
+          <block v-if="showType === 1">
+            <block v-if="!isShowEmpty">
+              <view class="iph-icon iph-icon-plus" @click.stop="plusClick"></view>
+            </block>
+            <block v-else>
+              <view class="u-font-28 good-disable-price u-line-40">已售完</view>
+            </block>
           </block>
-          <block v-else>
-            <view class="u-font-28 good-disable-price u-line-40">已售完</view>
+          <block v-if="showType === 2">
+            <view class="iph-icon iph-icon-subtract" @click.stop="subtractNum"></view>
+            <view class="good-num u-p-l-20 u-p-r-20">{{value.num}}</view>
+            <view class="iph-icon iph-icon-plus" @click.stop="addNum"></view>
           </block>
         </view>
       </view>
@@ -42,6 +49,10 @@
 export default {
   name: 'goodCard',
   props: {
+    showType: {
+      type: Number,
+      default: 1
+    },
     value: {
       type: Object,
       default: () => {}
@@ -57,6 +68,12 @@ export default {
     },
     plusClick () {
       this.$emit('plusClick', this.value)
+    },
+    subtractNum () {
+      this.$emit('subtractNum', this.value)
+    },
+    addNum () {
+      this.$emit('addNum', this.value)
     }
   }
 }
@@ -64,7 +81,6 @@ export default {
 
 <style lang="scss" scoped>
 .good-card-main {
-  padding: 0 24px;
   background-color: $iph-standby-bg;
   .good-image {
     position: relative;
@@ -87,14 +103,20 @@ export default {
   }
   .good-desc {
     .good-name {
+      line-height: 36px;
       font-size: 30px;
       font-weight: 500px;
+      color: $iph-base-text;
     }
     .good-specification {
+      font-size: 26px;
+      line-height: 36px;
       color: $iph-desc-text;
     }
     .good-warehouse {
-      @extend .good-specification;
+      font-size: 24px;
+      line-height: 34px;
+      color: $iph-desc-text;
     }
     .good-price {
       font-weight: 500;
@@ -107,6 +129,9 @@ export default {
       width: 40px;
       height: 40px;
     }
+    .good-num {
+      color: $iph-base-text;
+    }
   }
   .add-icon {
     width: 40px;

src/components/iphHeader.vue

@@ -4,13 +4,13 @@
  * @Author: dream
  * @Date: 2021-03-27 10:20:21
  * @LastEditors: dream
- * @LastEditTime: 2021-03-27 13:59:46
+ * @LastEditTime: 2021-03-30 11:46:52
 -->
 <template>
 	<view class="iph-header-main">
-		<u-navbar :is-back="false" :border-bottom="false">
-			<view class="u-m-l-24 u-font-36 u-line-50 bold" @click="showChooseShop = true">{{checkedShop}}</view>
-		</u-navbar>
+    <u-navbar :is-back="false" :border-bottom="false">
+      <view class="header-title u-m-l-24 u-font-36 u-line-50 bold" @click="showChooseShop = true">{{checkedShop}}</view>
+    </u-navbar>
     <u-select
       v-model="showChooseShop"
       :list="shopList"
@@ -24,6 +24,16 @@
 <script>
 export default {
   name: 'iphHeader',
+  props: {
+    type: {
+      type: Number,
+      default: 1
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
   data () {
     return {
       checkedShop: '',

src/pages.json

@@ -10,7 +10,7 @@
 	}, {
 		"path": "pages/shopcat/shopcat",
 		"style": {
-			"navigationStyle": "custom"
+			"navigationBarTitleText": "购物车"
 		}
 	}, {
 		"path": "pages/my/my",

src/pages/goods/goods.vue

@@ -4,7 +4,7 @@
  * @Author: dream
  * @Date: 2021-03-25 15:55:15
  * @LastEditors: dream
- * @LastEditTime: 2021-03-29 14:51:43
+ * @LastEditTime: 2021-03-30 14:03:29
 -->
 <template>
 	<view class="goods-main">
@@ -27,6 +27,7 @@
         <block v-for="(item, index) in goodList" :key="index">
           <view class="u-p-b-48">
             <iph-good-card
+              :showType="1"
               :value="item"
               :isShowEmpty="!item.stock"
               @cardClick="toGoodDetail"
@@ -112,6 +113,7 @@ export default {
     }
     .main-right {
       @extend .main-left;
+      padding: 0 24px;
       background-color: $iph-standby-bg;
     }
   }

src/pages/shopcat/shopcat.vue

@@ -4,29 +4,210 @@
  * @Author: dream
  * @Date: 2021-03-25 15:55:43
  * @LastEditors: dream
- * @LastEditTime: 2021-03-26 10:25:44
+ * @LastEditTime: 2021-03-30 15:58:55
 -->
 <template>
-	<view>shopcat</view>
+	<view class="shopcat-main" :style="{ paddingBottom: `${pagePaddingBottom}px`}">
+    <view class="shop-header iph-bg-fff u-border-bottom">
+      <u-checkbox class="checkall" v-model="checkedAll" icon-size="28" shape="circle" :label-disabled="false">
+        <view class="u-flex u-m-l-32">
+          <view class="icon iph-icon-shop u-m-r-8"></view>
+          <view class="shop-name u-font-28 u-line-40 u-flex-1 u-line-1">趣包·高新店</view>
+        </view>
+      </u-checkbox>
+    </view>
+    <view class="good-list iph-bg-fff">
+      <u-checkbox-group class="single-list">
+        <u-swipe-action
+          class="single-swipe"
+          v-for="(item, index) in goodlist"
+          :key="index"
+          :index="index"
+          :options="options"
+          btn-width="136"
+          @click="removeGood"
+        >
+          <u-checkbox class="check-single" v-model="item.checked" shape="circle" icon-size="28" :label-disabled="false">
+            <iph-good-card :showType="2" :value="item" />
+          </u-checkbox>
+        </u-swipe-action>
+      </u-checkbox-group>
+      <iph-empty :show="!goodlist.length" :type="2" marginTop="94">
+        <button class="go-order-btn">去订购</button>
+      </iph-empty>
+    </view>
+    <iph-fixed-bottom @getHeight="getFooterHeight">
+      <view class="shopcat-footer u-flex iph-bg-fff">
+        <u-checkbox class="checkall" v-model="checkedAll" icon-size="40" shape="circle" :label-disabled="false">
+          <view class="check-all u-m-l-16">全选</view>
+        </u-checkbox>
+        <view class="total-price u-flex-1 u-flex u-row-right">合计：¥938</view>
+        <button class="pay-btn" disabled>结算(2)</button>
+      </view>
+    </iph-fixed-bottom>
+  </view>
 </template>
 
 <script>
+import IphGoodCard from '@/components/iphGoodCard.vue'
+import IphFixedBottom from '@/components/iphFixedBottom.vue'
+import IphEmpty from '@/components/iphEmpty.vue'
 export default {
+  components: { IphGoodCard, IphFixedBottom, IphEmpty },
   name: 'shopcat',
   data () {
     return {
-
+      pagePaddingBottom: 0,
+      checkedAll: false,
+      options: [{
+        text: '删除',
+        style: {
+          fontSize: '26rpx',
+          lingHeight: '36rpx',
+          backgroundColor: '#FD3220'
+        }
+      }],
+      goodlist: [{
+        img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=288400877,2749955263&fm=26&gp=0.jpg',
+        astrict: '1件起订',
+        name: '两行文案两行文案两行文案两行文案两行文案两行文案两行文案两',
+        spce: '一件',
+        warehouse: '云东仓',
+        salesPrice: 468,
+        stock: 0,
+        num: 2,
+        checked: false
+      }, {
+        img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=288400877,2749955263&fm=26&gp=0.jpg',
+        astrict: '1件起订',
+        name: '两行文案两行',
+        spce: '一件',
+        warehouse: '云东仓',
+        salesPrice: 468,
+        stock: 0,
+        num: 2,
+        checked: false
+      }]
     }
   },
-  onLoad () {
-
-  },
   methods: {
-
+    removeGood (key) {
+      this.goodlist.splice(key, 1)
+    },
+    getFooterHeight (val) {
+      this.pagePaddingBottom = val + 8
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-
+.shopcat-main {
+  .shop-header {
+    padding: 24px 32px;
+    .checkall {
+      /deep/ .u-checkbox {
+        width: 100%;
+        .u-checkbox__label {
+          width: 100%;
+        }
+        .u-checkbox__icon-wrap--circle {
+          width: 28px !important;
+          height: 28px !important;
+        }
+      }
+      .shop-name {
+        color: $iph-base-text;
+        font-weight: 500;
+      }
+      .icon {
+        width: 28px;
+        height: 28px;
+      }
+    }
+  }
+  .good-list {
+    .single-list {
+      width: 100%;
+      /deep/ .single-swipe {
+        width: 100%;
+        .check-single {
+          width: 100% !important;
+          .u-checkbox {
+            padding: 0 32px;
+            width: 100% !important;
+            .u-checkbox__label {
+              margin-left: 32px;
+              margin-right: 0;
+              padding: 40px 0;
+              width: 100%;
+              border-bottom: 2px solid #F2F4F8;
+            }
+            .u-checkbox__icon-wrap--circle {
+              width: 28px !important;
+              height: 28px !important;
+            }
+          }
+        }
+        &:last-child {
+          .check-single {
+            .u-checkbox {
+              .u-checkbox__label {
+                border-bottom: none;
+              }
+            }
+          }
+        }
+      }
+    }
+    .go-order-btn {
+      margin: 40px 0 96px;
+      padding: 10px 64px;
+      font-size: 28px;
+      line-height: 40px;
+      border-radius: 30px;
+      background-color: $iph-standby-bg;
+      &::after {
+        border-color: $iph-border-standby;
+        border-radius: 60px;
+      }
+    }
+  }
+  .shopcat-footer {
+    padding: 24px 32px;
+    .checkall {
+      /deep/ .u-checkbox {
+        width: 100%;
+        .u-checkbox__label {
+          width: 100%;
+        }
+        .u-checkbox__icon-wrap--circle {
+          width: 40px !important;
+          height: 40px !important;
+        }
+      }
+      .check-all {
+        font-size: 26px;
+        line-height: 36px;
+        color: $iph-base-text;
+      }
+    }
+    .total-price {
+      line-height: 44px;
+      font-size: 32px;
+      font-weight: 500;
+    }
+    .pay-btn {
+      margin-left: 24px;
+      padding: 16px 66px;
+      width: 226px;
+      height: 72px;
+      font-size: 28px;
+      line-height: 40px;
+      color: $iph-standby-text;
+      background-color: $u-type-primary;
+      border-radius: 38px;
+    }
+  }
+}
 </style>

src/uni.scss

@@ -13,10 +13,12 @@ $iph-placeholder-color: #cccccc;
 $iph-empty-text: #717171;
 
 $iph-border-base: #eeeeee;
+$iph-border-standby: #E5E5E5;
 
 $iph-base-bg: #f5f5f5;
 $iph-standby-bg: #ffffff;
 $iph-black-bg: #000000;
+$iph-btn-disabel-bg: #999999;
 
 .bold {
   font-weight: bold;
@@ -59,7 +61,17 @@ $iph-black-bg: #000000;
   background-size: contain;
 }
 
+.iph-icon-subtract {
+  background: url('~@/static/common/icon_dc_subtract.png') no-repeat center center;
+  background-size: contain;
+}
+
 .iph-icon-shopcat {
   background: url('~@/static/common/icon_gwc_bz.png') no-repeat center center;
   background-size: contain;
 }
+
+.iph-icon-shop {
+  background: url('~@/static/common/icon_dian.png') no-repeat center center;
+  background-size: contain;
+}