uni-xiudoyou/src/pages/goods/goods.vue

<!-- shop -->
<template>
  <view class="shop">
    <view class="header-warp">
      <view class="header-search">
        <view class="search">
          <input
            type="text"
            placeholder-style="color:#a3a8a8;font-size:10px;"
            placeholder="请输入商品名称"
            class="cellphone"
            v-model="params.name"
          />
          <text class="txt" @tap="searchByname">搜索</text>
        </view>
        <view class="btn-time">
          <image
            src="../../static/images/addicon.png"
            class="timeicon"
            @tap="topage()"
          ></image>
        </view>
      </view>

      <view class="uni-list-cell">
        <view class="uni-list-cell-db">
          <picker
            @change="bindPickerChange"
            :value="index"
            :range="shopArray"
            range-key="name"
            class="uni-upd"
          >
            <view class="uni-input">{{ shopArray[index].name }}</view>
          </picker>
          <view class="icon-warp">
            <image
              src="../../static/images/moreicon.png"
              class="iconRight"
            ></image>
          </view>
        </view>
      </view>

      <view class="header-bar">
        <view
          class="item"
          @tap="changeTabByStatus(1, '1')"
          :class="{ active: isactive === 1 }"
        >
          <view class="ordertype">待审核</view>
          <view class="heng"></view>
        </view>
        <view
          class="item"
          @tap="changeTab(2, '1')"
          :class="{ active: isactive === 2 }"
        >
          <view class="ordertype">已上架</view>
          <view class="heng"></view>
        </view>
        <view
          class="item"
          @tap="changeTab(3, '0')"
          :class="{ active: isactive === 3 }"
        >
          <view class="ordertype">已下架</view>
          <view class="heng"></view>
        </view>
        <view class="line"></view>
      </view>
    </view>
    <view style="height: 272upx;"></view>
    <!-- 审核 -->
    <view class="order-content" v-if="isactive === 1">
      <view class="order-list" v-for="(item, index) in shoplist" :key="index">
        <view class="order-title">
          <text class="ordernum">{{ item.name }}</text>
        </view>
        <view class="order-detail">
          <view class="left">
            <image :src="item.icon" class="img"></image>
          </view>
          <view class="center">
            <view class="shop-detail door">所属店铺：{{ item.shopName }}</view>
            <view class="shop-detail type">类型：{{ item.typeName }}</view>
            <view class="shop-detail putaway"
              >上下架状态：{{ item.upDown | putaway }}</view
            >
            <view class="shop-detail status"
              >状态：{{ item.status | state }}</view
            >
          </view>

          <view class="right" v-if="item.price">￥<text class="price">{{ item.price | dounit }}</text></view>
          
        </view>
        <view class="operate">
          <view
            class="btn stick"
            :class="{ isactive: item.sort != 0 }"
            @tap="sticktop(item.id, item.sort)"
            >{{ item.sort === 0 ? '置顶' : '取消置顶' }}</view
          >
          <!-- <view class="btn sold" @tap="passGet(item.id)">审核</view> -->
          <view class="btn compile" @tap="topage(item.id)">编辑</view>
          <view class="btn delete" @tap="deleteshop(item.id)">删除</view>
        </view>
      </view>
    </view>
    <!-- 已上架 -->
    <view class="order-content" v-if="isactive === 2">
      <view class="order-list" v-for="(item, index) in shoplist" :key="index">
        <view class="order-title">
          <text class="ordernum">{{ item.name }}</text>
        </view>
        <view class="order-detail">
          <view class="left">
            <image :src="item.icon" class="img"></image>
          </view>
          <view class="center">
            <view class="shop-detail door">所属店铺：{{ item.shopName }}</view>
            <view class="shop-detail type">类型：{{ item.typeName }}</view>
            <view class="shop-detail putaway"
              >上下架状态：{{ item.upDown | putaway }}</view
            >
            <view class="shop-detail status"
              >状态：{{ item.status | state }}</view
            >
          </view>

          <view class="right" v-if="item.price">￥<text class="price">{{ item.price | dounit }}</text></view>
        </view>
        <view class="operate">
          <view
            class="btn stick"
            :class="{ isactive: item.sort != 0 }"
            @tap="sticktop(item.id, item.sort)"
            >{{ item.sort === 0 ? '置顶' : '取消置顶' }}</view
          >
          <view class="btn sold" @tap="shopPutDown(item.id)">下架</view>
          <view class="btn compile" @tap="topage(item.id)">编辑</view>
          <view class="btn delete" @tap="deleteshop(item.id)">删除</view>
        </view>
      </view>
    </view>
    <!-- 已下架 -->
    <view class="order-content" v-if="isactive === 3">
      <view class="order-list" v-for="(item, index) in shoplist" :key="index">
        <view class="order-title">
          <text class="ordernum">{{ item.name }}</text>
        </view>
        <view class="order-detail">
          <view class="left">
            <image :src="item.icon" class="img"></image>
          </view>
          <view class="center">
            <view class="shop-detail door">所属店铺：{{ item.shopName }}</view>
            <view class="shop-detail type">类型：{{ item.typeName }}</view>
            <view class="shop-detail putaway"
              >上下架状态：{{ item.upDown | putaway }}</view
            >
            <view class="shop-detail status"
              >状态：{{ item.status | state }}</view
            >
          </view>

          <view class="right" v-if="item.price"
            >￥<text class="price">{{ item.price | dounit }}</text></view
          >
        </view>
        <view class="operate">
          <view
            class="btn stick"
            :class="{ isactive: item.sort != 0 }"
            @tap="sticktop(item.id, item.sort)"
            >{{ item.sort === 0 ? '置顶' : '取消置顶' }}</view
          >
          <view class="btn sold" @tap="shopPutUp(item.id)">上架</view>
          <view class="btn compile" @tap="topage(item.id)">编辑</view>
          <view class="btn delete" @tap="deleteshop(item.id)">删除</view>
        </view>
      </view>
    </view>

    <tabBar :currentIndex="typeNum" :role="roleList"></tabBar>
    <uni-load-more :status="more"> </uni-load-more>
    <rf-loading v-if="loading"></rf-loading>
  </view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
  name: 'order',
  components: { uniLoadMore },
  data() {
    //这里存放数据
    return {
      typeNum: 2,
      roleList:[],

      deleteId: '',
      scenicID: 0, // 景区id 唯一（一个账号代表一个景区）
      loading: false,
      more: 'loading', // more  loading noMore
      shopArray: [{ name: '全部', id: '' }],
      shopID: '',
      index: 0,
      topstatus: '-1', // 置顶传-1，取消置顶传-2

      isactive: 1,
      soleStatus: 1, // 触底状态

      shoplist: [],

      // 列表参数
      putAwat: '1', // 已上架1;已下架0
      status: '1', // 待审核：1，审核通过：2，审核未通过：3

      params: {
        pageNum: 1,
        pageSize: 10,
        mid: 0, // 景区id
        status: '1', // 审核状态
        upDown: '', // 上下架状态
        shopId: '', // 商铺id 选择框
        name: '',
      },
    };
  },
  filters: {
    putaway(val) {
      if (val === '0') {
        return '已下架';
      } else if (val === '1') {
        return '已上架';
      }
    },
    state(val) {
      if (val === '1') {
        return '待审核';
      } else if (val === '2') {
        return '审核通过';
      } else if (val === '3') {
        return '审核未通过';
      }
    },
    dounit(val) {
      if (val) {
        return val / 100;
      } else {
        return '';
      }
    },
  },
  onReady () {
    // this.roleList = this.$mStore.getters.hasrole.reverse()
    let role = uni.getStorageSync('role')
    this.roleList = role.reverse()
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.more = 'loading';
    this.isactive = 1;
    this.params = {
      pageNum: 1,
      pageSize: 10,
      mid: 0, // 景区id
      status: '1', // 审核状态
      upDown: '', // 上下架状态
      shopId: '', // 商铺id 选择框
      name: '',
    };
    this.getShopMessage();
  },
  // 上拉加载
  onReachBottom() {
    if (this.soleStatus === 1) {
      if (this.more === 'noMore') {
        return;
      }
      this.getMoreByStatus();
    }
  },
  onShow() {
    this.getShopList();
    this.getShopMessage();
  },
  //方法集合
  methods: {
    // 跳转详情
    topage(id) {
      
      // if (id) {
      //   uni.setStorageSync('Id', id);
      // }
      this.$mRouter.push({ route: '/pages/goods/shopdetail', query:{id: id}});
    },
    // 删除商品
    async deleteshop(id) {
      let _self = this;
      this.deleteId = id;
      uni.showModal({
        content: '是否删除该商品？',
        success: (confirmRes) => {
          if (confirmRes.confirm) {
            _self.$http
              .delete('/goods/del/' + this.deleteId)
              .then(async (res) => {
                if (res.code === 200 && res.msg === 'OK') {
                  _self.$mHelper.toast('删除成功');
                  setTimeout(() => {
                    _self.getTicketShopList();
                  }, 500);
                }
              });
          }
        },
      });
    },
    // 根据名字搜索
    searchByname() {
      this.more = 'loading';
      this.params.pageNum = 1;
      this.getTicketShopList();
    },
    // 选择商铺
    bindPickerChange(e) {
      this.more = 'loading';
      this.params.pageNum = 1;
      this.shopID = '';
      this.index = e.detail.value;
      this.params.shopId = this.shopArray[this.index].id;
      this.getTicketShopList();
    },
    // 获取店铺列表
    async getShopList() {
      await this.$http.get('/homePage/getShopByMerId').then((res) => {
        if (res.data && res.code === 200) {
          let newarr = [{ name: '全部', id: '' }];
          this.shopArray = newarr.concat(res.data);
        }
      });
    },
    // 商家信息
    async getShopMessage() {
      await this.$http.get('/getUserInfo').then(async (res) => {
        if (res.data) {
          uni.setStorageSync('scenicId', res.data.id);
          this.params.mid = res.data.id;
          this.getTicketShopList();
        }
      });
      uni.stopPullDownRefresh(); // 关闭下拉刷新
    },
    // 待审核tab切换
    changeTabByStatus(type, status) {
      this.more = 'loading';
      this.shoplist = [];
      this.params.pageNum = 1;
      this.isactive = type;
      this.params.status = status;
      this.status = status;
      delete this.params.upDown;
      this.getTicketShopList();
    },
    // tab
    changeTab(type, putaway) {
      this.more = 'loading';
      this.params.pageNum = 1;
      this.isactive = type;
      this.params.upDown = putaway;
      this.putAwat = putaway;
      delete this.params.status;
      this.getTicketShopList();
    },
    // 置顶
    sticktop(id, status) {
      if (status != 0) {
        this.topstatus = '-2';
      } else {
        this.topstatus = '-1';
      }
      this.$http
        .PUT('/goods/changeSort?id=' + id + '&sort=' + this.topstatus)
        .then((res) => {
          if (res.code === 200) {
            if (status != 0) {
              this.$mHelper.toast('取消成功');
            } else {
              this.$mHelper.toast('置顶成功');
            }
            this.getTicketShopList();
          }
        });
    },

    // 商品列表（待审核状态）
    async getTicketShopList() {
      this.soleStatus = 1;
      this.shoplist = [];

      // 判断tab切换的条件
      if (this.params.upDown === '1' || this.params.upDown === '0') {
        delete this.params.status;
      } else {
        delete this.params.upDown;
      }
      await this.$http.get('/goods/list', this.params).then((res) => {
        if (res.data.list.length > 0) {
          this.shoplist = res.data.list;
          if (res.data.nextPage === 0) {
            this.more = 'noMore';
          }
        } else {
          this.more = 'noMore';
        }
      });
    },
    // 更多（待审核状态）
    async getMoreByStatus() {
      this.params.pageNum++;
      let listArr = [];
      // 判断tab切换的条件
      if (this.params.upDown === '1' || this.params.upDown === '0') {
        delete this.params.status;
      } else {
        delete this.params.upDown;
      }
      await this.$http.get('/goods/list', this.params).then((res) => {
        if (res.data.list.length > 0) {
          listArr = res.data.list;
          this.shoplist = this.shoplist.concat(listArr);
          if (res.data.nextPage === 0) {
            this.more = 'noMore';
          }
        } else {
          this.more = 'noMore';
          return;
        }
      });
    },
    // 通过审核
    passGet(id) {},
    // 下架
    shopPutDown(id) {
      this.changeShopStatus(id, this.params.upDown);
    },
    // 上架
    shopPutUp(id) {
      this.changeShopStatus(id, this.params.upDown);
    },
    // 修改商品状态
    async changeShopStatus(ids, upordown, state) {
      let upstate = 0;
      if (upordown === '1') {
        upstate = 0;
      } else {
        upstate = 1;
      }

      let data = {
        id: ids,
        upDown: upstate,
        status: state,
      };
      if (state) {
        delete data.upDown;
      } else {
        delete data.status;
      }
      await this.$http
        .postBody('/goods/changeStatusOrUpDown', data)
        .then(async (res) => {
          if (res.code === 200 && res.msg === 'OK') {
            this.getTicketShopList();
            this.$mHelper.toast('操作成功');
          }
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.shop {
  background-color: #f4f4f4;

  .header-warp {
    width: 100%;
    background-color: #fff;
    padding: 15upx 33upx 0;
    position: fixed;
    z-index: 99;

    .header-search {
      display: flex;
      align-items: center;

      .search {
        flex: 1;
        display: flex;
        align-items: center;
        height: 80upx;
        margin-left: 20upx;
        background-color: #f7f7f7;
        border-radius: 10upx;

        .cellphone {
          flex: 1;
          height: 100%;
          color: $titleColor;
          padding-left: 20upx;
        }

        .search-holder {
          color: #f00;
        }

        .txt {
          height: 72upx;
          width: 90upx;
          text-align: center;
          line-height: 72upx;
          color: #a95cff;
          font-size: 28upx;
        }
      }

      .btn-time {
        margin-left: 20upx;
        display: flex;
        justify-content: center;
        align-items: center;
        .timeicon {
          width: 48upx;
          height: 48upx;
        }
      }
    }

    .uni-list-cell {
      padding: 0 20upx;
      border-bottom: 1px solid #f4f4f4;
      .uni-list-cell-db {
        height: 80upx;
        font-size: 28upx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        color: #8f8f8f;
        font-size: 30upx;
        .uni-upd {
          width: 100%;
        }
      }
      .uni-input {
        height: 100%;
        line-height: 80upx;
      }
      .icon-warp {
        width: 19upx;
        .iconRight {
          width: 19upx;
          height: 27upx;
        }
      }
    }

    .header-bar {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      .item {
        position: relative;
        width: 33.33%;
        height: 99upx;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .ordertype {
          position: relative;
          font-size: 30upx;
          letter-spacing: 3upx;
          color: #7a7c7c;
        }

        .heng {
          position: absolute;
          display: none;
          bottom: 0;
          width: 40upx;
          height: 6upx;
          border-radius: 4upx;
          background-color: #a95cff;
        }
      }

      .active .ordertype {
        color: #a95cff;
      }

      .active .heng {
        display: block;
      }
    }
  }

  .order-content {
    padding: 24upx 32upx 0;

    .order-list {
      background-color: #fff;
      border-radius: 10upx;
      padding: 30upx 24upx 33upx;
      margin-bottom: 24upx;

      .order-title {
        border-bottom: 1px solid $bordrColor;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 22upx;

        .ordernum {
          font-size: 34upx;
          color: $titleColor;
        }
      }

      .order-detail {
        margin-top: 24upx;
        display: flex;
        .left {
          .img {
            width: 120upx;
            height: 120upx;
            border-radius: 5upx;
            background-color: pink;
          }
        }
        .center {
          width: 370upx;
          margin-left: 25upx;
          .shop-detail {
            font-size: 26upx;
            color: #7a7a7a;
            margin-top: 7upx;
            &:first-child {
              margin-top: 0;
            }
          }
        }
        .right {
          flex: 1;
          color: #ff6a5e;
          .price {
            font-size: 30upx;
          }
        }
      }

      .operate {
        border-top: 1px solid #e7e7e7;
        padding-top: 24upx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10upx;
        .btn {
          width: 160upx;
          height: 58upx;
          border: 1upx solid #7a7c7c;
          border-radius: 6upx;
          margin-right: 22upx;
          text-align: center;
          line-height: 58upx;
          font-size: 28upx;
          color: #7a7c7c;
          letter-spacing: 3upx;
        }
        .isactive {
          color: #ff6a5e;
          border: 1upx solid #ff6a5e;
        }
        .delete {
          margin-right: 0;
          background-color: #ff6a5e;
          color: #ffffff;
          border: none;
        }
      }
    }
  }
}
</style>