ch-tgr/src/views/Trade/NTradeList.vue

<template>
  <BasePage>
    <div class="tradelist">
      <div class="tabs">
        <van-tabs class="area" v-model:active="TradeArea" color="#f00" title-active-color="#222"
          title-inactive-color="#999" line-width="0" line-height=".667vw" @change="changeMall">
          <van-tab v-for="i in mallList" :title="i.label" :name="i.value"></van-tab>
        </van-tabs>

        <van-tabs class="states" v-model:active="activeTab" color="#ca2904" title-active-color="#ca2904"
          title-inactive-color="#000" line-width="4vw" line-height=".667vw" @change="onTabChange">
          <van-tab title="全部" name=""></van-tab>
          <van-tab v-for="i in tradeStates" :title="i.label" :name="String(i.value)"></van-tab>
        </van-tabs>
      </div>
      <van-search v-model="searchParams.ordernum" left-icon=" " shape="round" placeholder="输入订单号搜索" @search="onSearch"
        @clear="onClear">
        <template #right-icon>
          <van-icon name="/img/sort-search.png" @click="onSearch"></van-icon>
        </template>
      </van-search>

      <BaseList ref="baseList" url="/v1/client/FOrdersClient" :params="searchParams" :parseData="res => res.data.items"
        style="padding: 3.33vw;" @refresh="onRefresh">
        <template #default="{ item }">
          <div :key="item.ordernum" class="list">
            <div class="code">
              订单编号:{{ item.ordernum }}
              <img src="/img/orderCopy.png" @click="$copyText(item.ordernum); $showSuccessToast('复制订单编号成功')" />
            </div>
            <div class="_info" v-for="list in (item.orderdetails || [])" :key="list.id">
              <img :src="$file(list.proimg)">
              <div class="_c">
                <div class="_name">
                  <span>{{ list.proname }}</span>
                </div>
                <div class="_spec">
                  <span>{{ list.proskuname?.split(';').join('/') }}</span>
                  <p>x{{ list.buynums }}</p>
                </div>
                <div class="_price">
                  <span>¥{{ list.originalprice?.toFixed(2) }}</span>
                  <div>
                    <span style="margin-left: auto;">实付：</span>
                    <b><span>￥</span>{{ list.saleprice?.toFixed(2) }}</b>
                  </div>
                </div>
              </div>
            </div>
            <p v-if="item.remark" style="margin-bottom: 3vw;">
              订单备注：{{ item.remark }}
            </p>
            <div class="state">
              <b :class="`b${item.state}`">
                {{ item.statename }}
              </b>
              <div class="btn">
                <a class="a2" v-if="item.state == 0" @click="cancelTrade(item)">
                  取消订单
                </a>
                <a class="a0" v-if="item.state == 0" @click="$navigate(`/Pay?ordernum=${item.ordernum}`)">
                  立即支付
                </a>
                <a class="a1" @click="$navigate(`/TradeDetail?ordernum=${item.ordernum}`)">
                  查看详情
                </a>
              </div>
            </div>
          </div>
        </template>
      </BaseList>
    </div>
  </BasePage>
</template>

<script>
export default {
  name: 'TradeList',
  data() {
    return {
      activeTab: '',
      TradeArea: Number(this.$route.query.TradeArea) || 3,
      searchParams: {
        ordernum: '',
        state: '',
        mallstate: Number(this.$route.query.TradeArea) || 3,
      },
      tradeStates: [
      ],
      mallList: [
        { value: 3, label: '礼包订单' },
        { value: 2, label: '商城订单' },
        { value: 1, label: '买单订单' },
      ],
    }
  },
  mounted() {
    this.getTradeStates();
  },
  watch: {
    TradeArea(val) {
      this.searchParams.mallstate = val;
    },
    '$route.query.state': {
      handler(newVal) {
        if (newVal !== undefined && newVal !== '') {
          this.activeTab = String(newVal);
          // this.getTradeStates();
        } else {
          this.activeTab = '';
        }
      }
    }
  },
  methods: {
    back() {
      this.$router.push('/My')
    },
    onTabChange(name) {
      this.searchParams.state = name;
      this.$refs.baseList?.refresh();
    },
    changeMall(name) {
      this.searchParams.mallstate = Number(name) || 3;
      this.searchParams.state = '';
      this.$refs.baseList?.refresh();
    },
    onSearch() {
      this.$refs.baseList?.refresh();
    },
    onClear() {
      this.searchParams.ordernum = '';
      this.$refs.baseList?.refresh();
    },
    getTradeStates() {
      this.$get('/v1/client/FOrdersClient/orderstate').then(res => {
        this.tradeStates = res.data;
        this.$nextTick(() => {
          const stateFromRoute = this.$route.query.state;
          if (stateFromRoute !== undefined && stateFromRoute !== '') {
            this.activeTab = String(stateFromRoute);
            this.searchParams.state = stateFromRoute;
          }
        });
      }).catch((err) => {
        this.$showFailToast(err.message || '获取订单状态失败');
      });
    },
    onRefresh() {
    },
    cancelTrade(item) {
      this.$showConfirmDialog({
        title: "是否确认取消订单",
      }).then(() => {
        this.$put(`/v1/client/FOrdersClient/${item.ordernum}/cancel`).then(() => {
          this.$showSuccessToast('取消订单成功');
          this.$refs.baseList?.refresh();
        }).catch(err => {
          this.$showFailToast(err.errmsg || '取消失败');
        });
      }).catch(() => { });
    },
  }
}
</script>