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>