caimei-distribution-www/src/views/order-list/index.vue

<template>
  <div>
    <nav-bar title="订单列表" @click-left="$router.back()">
      <van-tabs v-model="formData.listType" @change="handlerOrderStatus">
        <van-tab v-for="item in orderLinks" :title="item.name" :key="item.status" />
      </van-tabs>
      <div class="order-select" v-if="!isIns && $store.getters.isManage">
        <van-button
          v-for="btn in manageOrderList"
          :key="btn.id"
          class="manage-btn"
          :class="activeBtn === btn.id ? 'activeBtn' : ''"
          @click="handlerManage(btn.id)"
          >{{ btn.title }}</van-button
        >
      </div>
    </nav-bar>
    <div class="order-list">
      <order-list-card
        @handlerOrder="handlerOrder"
        v-for="item in dataList"
        :key="item.id"
        :status="item.status"
        :userId="item.userId"
        :productInfo="item.orderProductList[0]"
      >
        <template #order-head>
          <div class="order-place" v-if="isIns && activeBtn === 2">
            <div class="order-No">订单号：{{ item.shopOrderNo }}</div>
            <div class="order-time-state">
              <div class="order-time">下单时间：{{ item.orderTime }}</div>
              <div class="order-state">{{ item.status | statusFilters }}</div>
            </div>
          </div>
          <div class="order-team" v-if="activeBtn !== 2 && !isIns">
            <div class="order-name">{{ item.clubName }}</div>
            <div class="order-author">{{ item.linkMan }}</div>
          </div>
        </template>
        <template #order-foot>
          <div class="order-btn-all" v-if="activeBtn === 2">
            <order-btn-type
              :productInfo="item"
              :status="item.status"
              :activeBtn="activeBtn"
              @orderCancel="orderCancel"
              @orderPay="orderPay"
              @orderQuery="orderQuery"
              @orderConfirm="orderConfirm"
              @shareOrder="shareOrder"
            />
          </div>
        </template>
      </order-list-card>
    </div>
  </div>
</template>

<script>
import { orderList, orderInsList } from '@/api/institutionApi/order'
import OrderBtnType from './components/order-btn-type'
import orderIndex from './mixins/order-index'
import { Toast } from 'vant'
export default {
  mixins: [orderIndex],
  components: { OrderBtnType },
  data () {
    return {
      orderLinks: [
        {
          status: 0,
          icon: '',
          link: '',
          content: 200,
          name: '全部订单'
        },
        {
          status: 1,
          icon: '',
          link: '',
          content: 200,
          name: '待确认'
        },
        {
          status: 2,
          icon: '',
          link: '',
          content: 200,
          name: '待付款'
        },
        {
          status: 3,
          icon: '',
          link: '',
          content: 200,
          name: '待发货'
        },
        {
          status: 4,
          icon: '',
          link: '',
          content: 200,
          name: '已发货'
        },
        {
          status: 5,
          icon: '',
          link: '',
          content: 200,
          name: '退货/款'
        }
      ],
      manageOrderList: [
        {
          id: 2,
          title: '我的订单'
        },
        {
          id: 3,
          title: '团队订单'
        }
      ],
      activeBtn: 2,
      active: 0,
      formData: {
        pageSize: 20,
        pageNum: 1,
        serviceProviderId: this.$store.getters.userInfo.id, // 1381
        groupServiceId: 0,
        listType: this.$route.query.active || 0,
        orderSubmitType: 1,
        type: 2,
        orderState: 0
      },
      dataList: []
    }
  },
  computed: {
    isIns () {
      return this.$route.query.isIns
    },
    uId () {
      return this.$route.query.uId || 666808
    }
  },
  mounted () {
    if (this.isIns) {
      this.orderInsList()
    } else {
      this.handlerManage(this.activeBtn)
    }
  },
  methods: {
    async handlerManage (id) {
      this.activeBtn = id
      this.formData.orderSubmitType = id
      const j =
      id === 1
        ? { id: this.$store.getters.userInfo.id }
        : { parentId: this.$store.getters.userInfo.id }
      const form = {
        ...this.formData,
        ...j
      }
      const data = await orderList(form)
      this.dataList = data.list
    },
    async orderInsList () {
      const data = await orderInsList(Object.assign(this.formData, { userId: this.uId }))
      this.dataList = data.list
    },
    handlerOrder (item) {
      console.log(item)
      this.$router.push(
        `/order-detail?shopOrderId=${item[0].shopOrderId}&userId=${item[1]}&isIns=${this.isIns}&activeBtn=${this.activeBtn}`
      )
    },
    async orderList (form) {
      const data = await orderList(form)
      this.dataList = data
    },
    handlerOrderStatus ($event) {
      if (this.isIns) {
        this.formData.orderState = $event
        return this.orderInsList()
      }
      this.handlerManage(this.activeBtn)
    },
    orderCancel () {
      console.log('取消订单')
      this.handlerManage(this.activeBtn)
    },
    orderQuery () {
      console.log('查看物流')
    },
    orderPay () {
      console.log('支付订单')
    },
    orderConfirm () {
      this.handlerManage(this.activeBtn)
    },
    // 分享当前页面
    initAppMessageShareData (info) {
      this.$wxReady((wx) => {
        // 需在用户可能点击分享按钮前就先调用
        wx.updateAppMessageShareData({
          title: '分享订单', // 分享标题
          desc: '分享订单', // 分享描述
          link: `https://sell-b.caimei365.com/#/share?type=1&shopOrderId=${info.shopOrderId}&userId=${info.userId}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
          imgUrl: 'https://static.caimei365.com/app/mini-distribution/qrcode.png', // 分享图标
          fail: () => {
            this.initAppMessageShareData(info)
          }
        })
      })
    },
    shareOrder (info) {
      this.initAppMessageShareData(info)
      setTimeout(() => {
        Toast.success('请点击右上角...进行分享')
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.van-tab {
  line-height: 0;
}
::v-deep .van-tab--active {
  color: #ff5b00;
  font-weight: 600;
}
::v-deep .van-tabs__line {
  background: #ff5b00;
}
.order-list-card {
  border-radius: 1.1vw;
  margin: 3vw 0;
}
.order-list {
  padding: 0 3.2vw 3.2vw 3.2vw;
}
.order-select {
  background: #f5f5f5;
  padding: 4.3vw 3.2vw;
  display: flex;
  align-items: center;
  .manage-btn {
    background: #fff;
    color: #666666;
    width: 32vw;
    height: 9.6vw;
    border-radius: 1.1vw;
    margin-right: 3.2vw;
    &.activeBtn {
      color: #fff;
      background: #ff5b00;
    }
  }
}
.order-place {
  padding-bottom: 3.2vw;
  border-bottom: 1px solid #e1e1e1;
  margin-bottom: 5.3vw;
  .order-No {
    color: #333333;
    font-size: 3.7vw;
    margin-bottom: 1.3vw;
  }
  .order-time-state {
    @include display-flex-between;
    .order-time {
      color: #999999;
      font-size: 3.5vw;
    }
    .order-state {
      color: #ff2a2a;
      font-size: 3.5vw;
    }
  }
}
.order-team {
  display: flex;
  justify-content: space-between;
  padding-bottom: 3.2vw;
  border-bottom: 1px solid #e1e1e1;
  margin-bottom: 4.3vw;
  .order-name {
    color: #333333;
    font-size: 4.3vw;
    font-weight: 600;
  }
  .order-author {
    padding: 0.5vw 3vw;
    background: #ffeee4;
    color: #ff5b00;
    font-size: 3.7vw;
  }
}
.order-btn-all {
  margin-top: 4.3vw;
  ::v-deep .van-button {
    width: 21.3vw;
    height: 8.5vw;
    border-radius: 1.1vw;
    margin-left: 3.2vw;
    font-size: 3.5vw;
    white-space: nowrap;
    margin-bottom: 2vw;
  }
}
</style>