商品管理页面

wx_application/src/router/index.js

@@ -60,10 +60,15 @@ const routes = [
   {
     path: '/goodManage',
     name: 'goodManage',
+    component: () => import('@/views/goods/manage')
+  },
+  {
+    path: '/goodManage1',
+    name: 'goodManage1',
     component: () => import('@/views/goods/goodManage')
   },
   {
-    path: '/goodGrounding',
+    path: '/goodGrounding1',
     name: 'goodGrounding',
     component: () => import('@/views/goods/goodGrounding')
   },

wx_application/src/views/goods/manage.vue

+<template>
+  <div>
+    <div class="container">
+      <div class="search_wraper">
+        <van-search
+          style="flex: 1;"
+          v-model="searchForm.inputValue"
+          placeholder="客官你要搜索点什么"
+          shape="round"
+          @search="onSearch"
+        >
+        </van-search>
+        <van-icon name="wap-nav" @click="showFilter"/>
+      </div>
+        <div class="list">
+          <div class="good" v-for="good in goodsList" :key="good.id">
+            <div class="left">
+              <img :src="good.logo" />
+            </div>
+            <div class="center">
+              <div class="name">{{good.name}}</div>
+              <div class="descri">{{good.descri}}</div>
+              <div class="commission">佣金：¥{{good.commission}}</div>
+            </div>
+            <div class="right">
+              <h3>￥{{good.price}}</h3>
+              <div class="right_btn">
+                <div class="sj" style="margin-right: 8px;" color="#75B2FD" @click="toConfig(good.id)">配置</div>
+                <div v-if="good.status === 1" class="sj" color="#75B2FD" @click="lowShelf(good.id)">下架</div>
+                <div v-if="good.status === 2" class="sj" color="#75B2FD" @click="upShelf(good.id)" >上架</div>
+              </div>
+            </div>
+          </div>
+        </div>
+    </div>
+    <van-popup
+      closeable
+      v-model="rightShow"
+      position="right"
+      :style="{ width: '70%', height: '100%', padding: '10% 3%' }"
+    >
+      <div class="config_label">状态</div>
+      <div class="config_status_wraper">
+        <van-button
+          v-for="status in statusData"
+          :key="status.value"
+          plain
+          round
+          size="small"
+          :type="status.isCheck ? 'info' : 'default'"
+          style="margin: 0 10px 20px 0;"
+          @click="handleStatus(status.value, status.isCheck)"
+        >
+          {{ status.name }}
+        </van-button>
+      </div>
+      <div class="config_label">排序</div>
+      <div class="config_sort_wraper">
+        <van-button
+          v-for="sort in sortData"
+          :key="sort.value"
+          plain
+          round
+          size="small"
+          :type="sort.isCheck ? 'info' : 'default'"
+          style="margin-right: 10px;"
+          @click="handleSort(sort.value, sort.isCheck)"
+        >
+          {{ sort.name }}
+        </van-button>
+      </div>
+    </van-popup>
+    <van-popup
+      closeable
+      v-model="bottomShow"
+      position="bottom"
+      :style="{ height: '32%', padding: '10% 5%' }"
+    >
+      <van-form @submit="configConfirm">
+        <van-field name="radio" label="佣金类型">
+          <template #input>
+            <van-radio-group v-model="configForm.type" direction="horizontal">
+              <van-radio name="1">固定金额</van-radio>
+              <van-radio name="2">成交价比例</van-radio>
+            </van-radio-group>
+          </template>
+        </van-field>
+        <van-field name="stepper" :label="configForm.type === '1' ? '固定金额' : '成交价比例%'">
+          <template #input>
+            <van-stepper v-model="configForm.count" />
+          </template>
+        </van-field>
+        <div style="text-align:center">
+          <van-button type="info" size="small" native-type="submit">确定</van-button>
+          <van-button type="default" size="small" style="margin-left: 20px">取消</van-button>
+        </div>
+      </van-form>
+    </van-popup>
+    
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      // 搜索项
+      searchForm: {
+        inputValue: "",
+        status: '',
+        sortBy: ''
+      },
+      // 商品列表
+      goodsList: [
+        {
+          id: 1,
+          name: '女式大衣成熟的参数电池多少困难成熟的参数电池是的成熟的参数电池',
+          logo: require('../../../public/img/goods.png'),
+          price: '588',
+          descri: '冬季长款卡其色S号适合秋冬季节基础上达成城市的基础上达成村上春树的吃大餐',
+          commission: '30',
+          status: 1
+        }, {
+          id: 2,
+          name: '女式大衣',
+          logo: require('../../../public/img/goods.png'),
+          price: '588',
+          descri: '冬季长款卡其色S号适合秋冬季节',
+          commission: '30',
+          status: 2
+        }, {
+          id: 3,
+          name: '女式大衣',
+          logo: require('../../../public/img/goods.png'),
+          price: '588',
+          descri: '冬季长款卡其色S号适合秋冬季节',
+          commission: '30',
+          status: 1
+        }
+      ],
+      // 是否底部弹出
+      bottomShow: false,
+      // 是否右侧弹出
+      rightShow: false,
+      // 配置表单
+      configForm: {
+        type: '1',
+        count: 0,
+      },
+      // 状态数据
+      statusData: [
+        { value: '1', name: '已上架', isCheck: true },
+        { value: '2', name: '已下架', isCheck: false }
+      ],
+      // 排序数据
+      sortData: [
+        { value: '1', name: '价格', isCheck: true },
+        { value: '2', name: '佣金', isCheck: false },
+        { value: '3', name: '日期', isCheck: false },
+      ]
+    }
+  },
+  methods: {
+    onSearch() {},
+    // 显示筛选项model
+    showFilter() {
+      this.rightShow = true
+    },
+    // 排序
+    handleSort(value, isCheck) {
+      if (!isCheck) {
+        this.sortData.map(item => {
+          item.isCheck = item.value === value
+        })
+      }
+    },
+    // 筛选状态
+    handleStatus(value, isCheck) {
+      const currentStatus = this.statusData.filter(item => item.value === value)[0]
+      currentStatus.isCheck = !currentStatus.isCheck
+    },
+    // 配置
+    toConfig(id) {
+      this.bottomShow = true
+    },
+    // 下架
+    lowShelf(id) {
+      this.$toast('商品下架成功！')
+    },
+    // 上架
+    upShelf(id) {
+      this.$toast('商品上架成功！')
+    },
+    // 佣金配置确定
+    configConfirm() {
+      this.bottomShow = false
+    },
+    // 佣金配置取消
+    configCancel() {
+      this.bottomShow = false
+    }
+  }
+};
+</script>
+
+<style scoped>
+.sj {
+  font-size: 14px;
+  font-weight: bold;
+  color: rgba(117, 178, 253, 1);
+}
+h3 {
+  font-size: 14px;
+  color: rgba(208, 2, 27, 1);
+  margin-top: 18px;
+}
+.name {
+  font-size: 14px;
+  font-weight: bold;
+  color: rgba(45, 71, 106, 1);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+}
+.descri {
+  font-size: 12px;
+  color: rgba(45, 71, 106, 1);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+.config_label {
+  font-size: 14px;
+}
+.commission {
+  font-size: 12px;
+  font-weight: bold;
+  color: rgba(208, 2, 27, 1);
+}
+.good {
+  height: 108px;
+  border-bottom: 1px solid rgba(238, 238, 238, 1);
+  width: 100%;
+  padding: 12px 0;
+  display: flex;
+  justify-content: space-between;
+}
+.list {
+  padding: 0 16px;
+  box-sizing: border-box;
+}
+.left,
+.right,
+.center {
+  height: 80px;
+}
+.left {
+  width: 80px;
+  border-radius:6px;
+}
+.left img {
+  width: 100%;
+}
+.center {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.right {
+  width: 20%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+.right_btn {
+  display: flex;
+}
+.container {
+  height: auto;
+  min-height: 100%;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+.search_wraper {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+}
+.active {
+  background-color: #75b2fd;
+}
+</style>