进度保存

src/components/iphHeader.vue

@@ -0,0 +1,54 @@
+<!--
+ * @Descripttion: 自定义头部导航栏
+ * @version: 1.0.0
+ * @Author: dream
+ * @Date: 2021-03-27 10:20:21
+ * @LastEditors: dream
+ * @LastEditTime: 2021-03-27 13:59:46
+-->
+<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-select
+      v-model="showChooseShop"
+      :list="shopList"
+      mode="single-column"
+      safe-area-inset-bottom
+      @confirm="changeChooseShop"
+    ></u-select>
+	</view>
+</template>
+
+<script>
+export default {
+  name: 'iphHeader',
+  data () {
+    return {
+      checkedShop: '',
+      showChooseShop: false,
+      shopList: [{
+        label: '趣包·高新店',
+        value: 1
+      }]
+    }
+  },
+  mounted () {
+    this.checkedShop = this.shopList[0].label
+  },
+  methods: {
+    changeChooseShop (arr) {
+      this.checkedShop = arr[0].label
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.iph-header-main {
+  .header-title {
+    color: $iph-prompt-text;
+  }
+}
+</style>

src/components/iphLeftMenu.vue

@@ -0,0 +1,93 @@
+<!--
+ * @Descripttion: 左侧导航菜单
+ * @version: 1.0.0
+ * @Author: dream
+ * @Date: 2021-03-27 14:13:43
+ * @LastEditors: dream
+ * @LastEditTime: 2021-03-27 18:29:15
+-->
+<template>
+	<view class="left-menu-main">
+    <block v-for="(item, index) in list" :key="index">
+      <view
+        :class="['menu-item', item.value === current ? 'active' : '']"
+        :id="`menu-item-${item.value}`"
+        @click="changeMenu(item)"
+      >{{item.label}}</view>
+    </block>
+    <view
+      class="menu-bar"
+      :style="{
+        height: `${bar.height}rpx`,
+        top: `${bar.top}rpx`
+      }"
+    ></view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'iphLeftMenu',
+  data () {
+    return {
+      current: 1,
+      list: [{
+        value: 1,
+        label: '包材'
+      }, {
+        value: 2,
+        label: '调料'
+      }, {
+        value: 3,
+        label: '面粉'
+      }, {
+        value: 4,
+        label: '两行文案两行'
+      }],
+      bar: {
+        top: 0,
+        height: 0
+      }
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.changeMenu(this.list[0])
+    })
+  },
+  methods: {
+    changeMenu (val) {
+      this.current = val.value
+      const view = uni.createSelectorQuery().in(this).select(`#menu-item-${this.current}`)
+      view.boundingClientRect(data => {
+        this.bar.top = data ? (data.top + 14) * 2 : 0
+        this.bar.height = data ? (data.height - 28) * 2 : 32
+      }).exec()
+      console.log(this.bar)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.left-menu-main {
+  width: 160px;
+  .menu-item {
+    padding: 28px;
+    font-weight: 500;
+    text-align: center;
+    color: $iph-tip-text;
+  }
+  .active {
+    color: $u-type-primary;
+    background-color: $iph-standby-bg;
+  }
+  .menu-bar {
+    position: absolute;
+    left: 0;
+    width: 6px;
+    background: $u-type-primary;
+    border-radius: 4px;
+  }
+}
+</style>

src/pages/goods/goods.vue

@@ -4,14 +4,32 @@
  * @Author: dream
  * @Date: 2021-03-25 15:55:15
  * @LastEditors: dream
- * @LastEditTime: 2021-03-26 10:24:30
+ * @LastEditTime: 2021-03-27 17:00:29
 -->
 <template>
-	<view>goods</view>
+	<view class="goods-main">
+    <iph-header />
+    <view class="goods-search-area">
+      <u-search
+        v-model="keyword"
+        placeholder="请输入商品名称"
+        bg-color="#F5F5F5"
+        search-icon-color="#BABABA"
+        placeholder-color="#999999"
+        :show-action="false"
+      ></u-search>
+    </view>
+    <view class="main">
+      <iph-left-mune/>
+    </view>
+  </view>
 </template>
 
 <script>
+import iphHeader from '@/components/iphHeader.vue'
+import IphLeftMune from '@/components/iphLeftMenu.vue'
 export default {
+  components: { iphHeader, IphLeftMune },
   name: 'goods',
   data () {
     return {
@@ -28,5 +46,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
+.goods-main {
+  .goods-search-area {
+    padding: 16px 24px 36px;
+    background-color: $iph-standby-bg;
+  }
+}
 </style>

src/uni.scss

@@ -4,6 +4,8 @@ $u-type-primary: #1677FF;
 
 $iph-base-text: #212121;
 $iph-standby-text: #ffffff;
+$iph-prompt-text: #333333;
+$iph-tip-text: #6E6E6E;
 $iph-placeholder-color: #cccccc;
 
 $iph-border-base: #eeeeee;
@@ -18,7 +20,14 @@ $iph-standby-bg: #ffffff;
 .u-line-40 {
   line-height: 40px;
 }
+.u-line-50 {
+  line-height: 50px;
+}
 
 .primary-color {
   color: $u-type-primary;
 }
+
+.iph-bg-fff {
+  background-color: #fff;
+}