首页

.eslintrc.js

@@ -4,7 +4,7 @@
  * @Author: dream
  * @Date: 2021-03-26 09:48:52
  * @LastEditors: dream
- * @LastEditTime: 2021-03-26 16:20:10
+ * @LastEditTime: 2021-03-28 12:40:35
  */
 module.exports = {
   env: {
@@ -30,6 +30,7 @@ module.exports = {
     'no-tabs': 'off',
     indent: ['warn', 2],
     'no-async-promise-executor': 'off',
-    'no-undef': 'off'
+    'no-undef': 'off',
+    'vue/valid-v-bind': 'off'
   }
 }

src/App.vue

@@ -4,7 +4,7 @@
  * @Author: dream
  * @Date: 2021-03-25 15:13:56
  * @LastEditors: dream
- * @LastEditTime: 2021-03-28 00:08:03
+ * @LastEditTime: 2021-03-28 10:54:41
 -->
 <script>
 export default {
@@ -32,6 +32,11 @@ export default {
     color: $iph-base-text;
     background-color: $iph-base-bg;
     font-family: PingFangSC-Regular, PingFang SC;
+    image {
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
+    }
     /deep/ .input-placeholder {
       color: $iph-placeholder-color;
     }

src/components/iphEmpty.vue

@@ -0,0 +1,63 @@
+<!--
+ * @Descripttion: 空状态
+ * @version: 1.0.0
+ * @Author: dream
+ * @Date: 2021-03-28 15:09:24
+ * @LastEditors: dream
+ * @LastEditTime: 2021-03-28 15:30:31
+-->
+<template>
+	<view
+    v-if="show"
+    class="iph-empty-main"
+    :style="{
+      marginTop: `${marginTop}rpx`
+    }"
+  >
+    <block v-if="type === 1">
+      <image class="empty-img" src="~@/static/common/def_list.png" />
+      <text class="empty-text">暂无内容</text>
+    </block>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'iphEmpty',
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    },
+    type: {
+      type: Number,
+      default: 1
+    },
+    marginTop: {
+      type: Number,
+      default: 0
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.iph-empty-main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  .empty-img {
+    width: 300px;
+    height: 288px;
+  }
+  .empty-text {
+    margin-top: 40px;
+    line-height: 34px;
+    font-size: 28px;
+    color: $iph-empty-text;
+  }
+}
+</style>

src/components/iphGoodCard.vue

@@ -0,0 +1,118 @@
+<!--
+ * @Descripttion: 货品卡片
+ * @version: 1.0.0
+ * @Author: dream
+ * @Date: 2021-03-28 10:12:49
+ * @LastEditors: dream
+ * @LastEditTime: 2021-03-28 15:10:06
+-->
+<template>
+	<view class="good-card-main u-flex u-col-top" @click="cardClick">
+    <view class="good-image">
+      <image :src="value.img" mode="aspectFill" />
+      <view class="good-tip">{{value.astrict}}</view>
+    </view>
+    <view class="good-desc u-flex-1 u-m-l-24">
+      <view class="good-name u-line-2">{{value.name}}</view>
+      <view class="good-specification u-m-t-8">{{value.spce}}</view>
+      <view class="good-warehouse u-font-24 u-m-t-8">{{value.warehouse}}</view>
+      <view class="u-flex u-m-t-24">
+        <view class="good-price">
+          <text class="u-font-22">¥</text>
+          <text class="u-font-32">{{value.salesPrice}}</text>
+        </view>
+        <view
+          class="good-disable-price u-m-l-8 u-font-22 text-through"
+          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>
+          <block v-else>
+            <view class="u-font-28 good-disable-price u-line-40">已售完</view>
+          </block>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'goodCard',
+  props: {
+    value: {
+      type: Object,
+      default: () => {}
+    },
+    isShowEmpty: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    cardClick () {
+      this.$emit('cardClick', this.value)
+    },
+    plusClick () {
+      this.$emit('plusClick', this.value)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.good-card-main {
+  padding: 0 24px;
+  background-color: $iph-standby-bg;
+  .good-image {
+    position: relative;
+    width: 188px;
+    height: 188px;
+    border-radius: 16px;
+    .good-tip {
+      position: absolute;
+      bottom: 0;
+      padding: 4px 0;
+      width: 100%;
+      line-height: 28px;
+      font-size: 20px;
+      text-align: center;
+      border-radius: 0 0 16px 16px;
+      color: $iph-standby-text;
+      background-color: $iph-black-bg;
+      opacity: .5;
+    }
+  }
+  .good-desc {
+    .good-name {
+      font-size: 30px;
+      font-weight: 500px;
+    }
+    .good-specification {
+      color: $iph-desc-text;
+    }
+    .good-warehouse {
+      @extend .good-specification;
+    }
+    .good-price {
+      font-weight: 500;
+      color: $iph-main-price-text;
+    }
+    .good-disable-price {
+      color: $iph-disable-price-text
+    }
+    .iph-icon {
+      width: 40px;
+      height: 40px;
+    }
+  }
+  .add-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 20px;
+    background-color: $u-type-primary;
+  }
+}
+</style>

src/components/iphLeftMenu.vue

@@ -4,7 +4,7 @@
  * @Author: dream
  * @Date: 2021-03-27 14:13:43
  * @LastEditors: dream
- * @LastEditTime: 2021-03-28 01:23:20
+ * @LastEditTime: 2021-03-28 13:42:16
 -->
 <template>
 	<scroll-view class="left-menu-main" scroll-y>
@@ -12,7 +12,7 @@
       <view
         :class="['menu-item', item.value === current ? 'active' : '']"
         :id="`menu-item-${item.value}`"
-        @click="changeMenu(item)"
+        @click="changeMenu(item.value)"
       >{{item.label}}</view>
     </block>
     <view
@@ -35,76 +35,48 @@
 <script>
 export default {
   name: 'iphLeftMenu',
+  props: {
+    value: {
+      type: Number || String,
+      default: 1
+    },
+    list: {
+      type: Array,
+      default: () => []
+    }
+  },
   data () {
     return {
-      current: 1,
-      list: [{
-        value: 1,
-        label: '包材'
-      }, {
-        value: 2,
-        label: '调料'
-      }, {
-        value: 3,
-        label: '面粉'
-      }, {
-        value: 4,
-        label: '两行文案两行'
-      }, {
-        value: 5,
-        label: '面粉'
-      }, {
-        value: 6,
-        label: '两行文案两行'
-      }, {
-        value: 7,
-        label: '面粉'
-      }, {
-        value: 8,
-        label: '两行文案两行'
-      }, {
-        value: 9,
-        label: '面粉'
-      }, {
-        value: 10,
-        label: '两行文案两行'
-      }, {
-        value: 11,
-        label: '面粉'
-      }, {
-        value: 12,
-        label: '两行文案两行'
-      }],
       bar: {
-        top: 0,
-        height: 0
+        top: 32,
+        height: 28
       },
       contentBar: {
         top: 0,
-        height: 0
+        height: 92
       }
     }
   },
   mounted () {
-    this.changeMenu(this.list[0])
+    this.changeMenu(this.value)
   },
   methods: {
     changeMenu (val) {
-      this.current = val.value
+      this.$emit('input', val)
       const warp = uni.createSelectorQuery().in(this).select('.left-menu-main')
-      const view = uni.createSelectorQuery().in(this).select(`#menu-item-${this.current}`)
+      const view = uni.createSelectorQuery().in(this).select(`#menu-item-${val}`)
       view.boundingClientRect(data => {
         warp.fields({
           rect: true,
           scrollOffset: true
         }, res => {
           if (data) {
-            this.bar.top = (data.top - res.top + res.scrollTop + 14) * 2
-            this.bar.height = (data.height - 28) * 2
+            this.bar.top = (data.top - res.top + res.scrollTop + 16) * 2
+            this.bar.height = (data.height - 32) * 2
             this.contentBar.top = (data.top - res.top + res.scrollTop) * 2
             this.contentBar.height = data.height * 2
           } else {
-            this.bar.top = 0
+            this.bar.top = 32
             this.bar.height = 28
             this.contentBar.top = 0
             this.contentBar.height = 92

src/pages/goods/goods.vue

@@ -4,7 +4,7 @@
  * @Author: dream
  * @Date: 2021-03-25 15:55:15
  * @LastEditors: dream
- * @LastEditTime: 2021-03-28 01:15:27
+ * @LastEditTime: 2021-03-28 15:42:14
 -->
 <template>
 	<view class="goods-main">
@@ -19,21 +19,65 @@
         :show-action="false"
       ></u-search>
     </view>
-    <view :style="{ height: `${mainHeight}px` }">
-      <iph-left-mune/>
+    <view class="main u-flex u-col-top" :style="{ height: `${mainHeight}px` }">
+      <view class="main-left">
+        <iph-left-mune v-model="currentCateVal" :list="cateList" />
+      </view>
+      <scroll-view class="main-right u-flex-1" scroll-y>
+        <block v-for="(item, index) in goodList" :key="index">
+          <view class="u-p-b-48">
+            <iph-good-card
+              :value="item"
+              :isShowEmpty="!item.stock"
+            />
+          </view>
+        </block>
+        <iph-empty :show="!goodList.length" :type="1" />
+      </scroll-view>
     </view>
   </view>
 </template>
 
 <script>
-import iphHeader from '@/components/iphHeader.vue'
+import IphHeader from '@/components/iphHeader.vue'
 import IphLeftMune from '@/components/iphLeftMenu.vue'
+import IphGoodCard from '@/components/iphGoodCard.vue'
+import IphEmpty from '@/components/iphEmpty.vue'
+
 export default {
-  components: { iphHeader, IphLeftMune },
+  components: { IphHeader, IphLeftMune, IphGoodCard, IphEmpty },
   name: 'goods',
   data () {
     return {
-
+      currentCateVal: 1,
+      cateList: [{
+        value: 1,
+        label: '包材'
+      }, {
+        value: 2,
+        label: '调料'
+      }, {
+        value: 3,
+        label: '面粉'
+      }],
+      goodList: [{
+        img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=288400877,2749955263&fm=26&gp=0.jpg',
+        astrict: '1件起订',
+        name: '华硕天选',
+        spce: '一件',
+        warehouse: '云东仓',
+        salesPrice: 468,
+        originalPrice: 480,
+        stock: 400
+      }, {
+        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
+      }]
     }
   },
   computed: {
@@ -43,9 +87,7 @@ export default {
       return height
     }
   },
-  methods: {
-
-  }
+  methods: {}
 }
 </script>
 
@@ -55,5 +97,16 @@ export default {
     padding: 16px 24px 36px;
     background-color: $iph-standby-bg;
   }
+  .main {
+    box-sizing: border-box;
+    width: 100%;
+    .main-left {
+      height: 100%;
+    }
+    .main-right {
+      @extend .main-left;
+      background-color: $iph-standby-bg;
+    }
+  }
 }
 </style>

src/uni.scss

@@ -5,17 +5,25 @@ $u-type-primary: #1677FF;
 $iph-base-text: #212121;
 $iph-standby-text: #ffffff;
 $iph-prompt-text: #333333;
+$iph-desc-text: #999999;
 $iph-tip-text: #6E6E6E;
+$iph-main-price-text: #fd3220;
+$iph-disable-price-text: #999999;
 $iph-placeholder-color: #cccccc;
+$iph-empty-text: #717171;
 
 $iph-border-base: #eeeeee;
 
 $iph-base-bg: #f5f5f5;
 $iph-standby-bg: #ffffff;
+$iph-black-bg: #000000;
 
 .bold {
   font-weight: bold;
 }
+.text-through {
+  text-decoration: line-through;
+}
 
 .u-line-40 {
   line-height: 40px;
@@ -31,3 +39,9 @@ $iph-standby-bg: #ffffff;
 .iph-bg-fff {
   background-color: #fff;
 }
+
+// icon
+.iph-icon-plus {
+  background: url('~@/static/common/icon_dc_jia.png') no-repeat center center;
+  background-size: contain;
+}