feat(coupon): 优惠券

src/client/coupon/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <view class="container">
+    <tab :navList="list"></tab>
+  </view>
+</template>
+
+<script>
+import tab from '@/components/tab';
+export default {
+  components: {
+    tab,
+  },
+  data() {
+    return {
+      list: [
+        {
+          id: 0,
+          name: '通用',
+        },
+        {
+          id: 1,
+          name: '满减',
+        },
+        {
+          id: 2,
+          name: '折扣',
+        },
+        {
+          id: 3,
+          name: '赠送',
+        },
+      ],
+      current: 1,
+    };
+  },
+  methods: {
+    sectionChange() {},
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/tab/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <view>
+    <view class="tabs">
+      <view class="tab" :class="{ active: currentIndex === index }" v-for="(item, index) in navList" :key="index" @tap="onClickNav(index)">
+        <view class="name-item">{{ item.name }}</view>
+      </view>
+    </view>
+    <slot :name="navList[currentIndex].name"></slot>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    navList: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      currentIndex: 0,
+    };
+  },
+  methods: {
+    onClickNav(index) {
+      this.currentIndex = index;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.tabs {
+  display: flex;
+  justify-content: space-around;
+  font-size: 28rpx;
+  color: #ffffff;
+  background-color: #00bcd4;
+  .name-item {
+    padding: 20rpx 0;
+    color: #ffffff;
+  }
+}
+
+.active {
+  font-weight: bold;
+  position: relative;
+
+  .name-item::after {
+    content: '';
+    height: 2px;
+    width: 100%;
+    background-color: #ffffff;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
+}
+</style>

src/pages.json

@@ -62,6 +62,12 @@
             "navigationBarTitleText": "个人中心"
           }
         },
+        {
+          "path": "coupon/index",
+          "style": {
+            "navigationBarTitleText": "优惠券"
+          }
+        },
         {
           "path": "search/index",
           "style": {