uniAppXCX/pages/order/order.vue

<template>
  <view class="container">
    <view class="content">
      <view class="tabs2 tabw">
        <image
          class="tabs2_bk"
          style="width: 100%; height: 30px"
          :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/knapsack/tabBk2.png'"
          mode=""
        ></image>
        <view class="tabs2_info">
          <view :class="['tabItem', tab2Active == 1 ? 'active' : '']" @click="tabs2Click(1)">待付款</view>
          <view :class="['tabItem', tab2Active == 2 ? 'active' : '']" @click="tabs2Click(2)">待发货</view>
          <view :class="['tabItem', tab2Active == 3 ? 'active' : '']" @click="tabs2Click(3)">待收货</view>
          <view :class="['tabItem', tab2Active == 4 ? 'active' : '']" @click="tabs2Click(4)">全部</view>
        </view>
      </view>

      <view class="list">
        <view class="card" style="position: relative" v-for="(item, index) in list2">
          <view class="row text" style="font-weight: 600">
            {{ item.order.addTime }}
            <view class="status2 type1" v-if="item.order.orderStatus == 101">待付款</view>
            <view class="status2 type5" v-if="item.order.orderStatus == 103">已取消</view>
            <view class="status2 type2" v-if="item.order.orderStatus == 201">待发货</view>
            <view class="status2 type3" v-if="item.order.orderStatus == 301">待收货</view>
            <view class="status2 type4" v-if="item.order.orderStatus == 401">已完成</view>
          </view>
          <view class="row text" style="font-size: 12px">订单ID：{{ item.order.orderSn }}</view>
          <view class="row" style="margin-top: 10px" v-for="(item2, index2) in item.prizeList">
            <view class="left">
              <image class="img2" :src="item2.prizeIcon" mode="aspectFill"></image>
            </view>
            <view class="right" style="font-size: 14px">
              <view class="row" style="font-size: 12px">
                {{ item2.prizeName }}
              </view>
              <view class="row" style="font-weight: 600; color: #ff2c43">
                ￥：9.9
                <span style="color: #000">× {{ item2.prizeNum }}</span>
              </view>
            </view>
          </view>
          <view class="row button" style="font-size: 14px">
            <span></span>
            <span>
              实付金额:
              <span style="font-weight: 600; color: #ff2c43">
                ￥
                <span style="font-size: 18px">{{ item.order.actualPrice }}</span>
              </span>
            </span>
          </view>
          <view class="row cardButtons" v-if="item.order.orderStatus == 101">
            <view class="button button1" @click="cancelOrder(item)">取消订单</view>
            <view class="button button2" @click="reOrder(item)">去支付</view>
          </view>
        </view>
        <noData v-if="list2.length == 0" />
      </view>
    </view>
  </view>
</template>

<script>
import noData from '@/component/noData.vue'
import {
  packagePrizeListApi,
  packageOrderListApi,
  prizerRecoverApi,
  cancelOrderApi,
  reOrderApi,
} from '@/api/knapsack.js'
export default {
  components: {
    noData,
  },
  data() {
    return {
      list: [],
      allCheck: false,
      params: {
        limit: 999,
        page: 1,
        status: 0,
        sort: null,
      },
      list2: [],
      params2: {
        limit: 999,
        page: 1,
      },
      selectIndex: [],
      sortList: [
        {
          value: 0,
          text: '按时间排序',
        },
      ],
      tab2Active: 4,
    }
  },
  onShow() {
    this.selectIndex = []
  },
  onReady() {},
  onLoad(option) {
    this.tabs2Click(option.type)
  },
  watch: {
    list: {
      deep: true,
      handler(newValue, oldValue) {
        // console.log(newValue, 'newValue')
        let bool = true
        for (var i = 0; i < newValue.length; i++) {
          if (!newValue[i].check) {
            bool = false
          }
        }
        this.allCheck = bool
      },
    },
  },
  methods: {
    tabs2Click(index) {
      this.tab2Active = index
      let type = null
      switch (index) {
        case 1:
          type = 101
          break
        case 2:
          type = 201
          break
        case 3:
          type = 301
          break
        case 4:
          type = null
          break
      }
      this.getList2(type)
    },

    getList2(type) {
      console.log(type)
      // 获取商城订单列表
      if (type) {
        this.params2.status = type
      } else {
        this.params2.status = ''
      }
      packageOrderListApi(this.params2).then(res => {
        console.log(res, '商城订单列表')
        this.list2 = res.data.list
      })
    },

    // 取消订单
    cancelOrder(item) {
      console.log(item, 'item')
      let _this = this
      wx.showModal({
        title: '取消订单',
        content: '确认取消此订单？',
        success(res) {
          if (res.confirm) {
            let params = {
              orderId: item.order.id,
            }
            cancelOrderApi(params).then(res => {
              console.log(res, 'res')
              _this.tabs2Click(_this.tab2Active)
            })
          }
        },
      })
    },
    reOrder(item) {
      console.log(item, 'item')
      // let prizeList = item.prizeList
      // let ids = []
      // for (var i = 0; i < prizeList.length; i++) {
      // 	ids.push(prizeList[i].id)
      // }
      // getApp().globalData.orderConfirmIds = ids
      // getApp().globalData.selectAddrss = null
      // this.$navigateTo('/pages/orderConfirm/orderConfirm')
      let params = {
        orderId: item.order.id,
      }
      reOrderApi(params).then(res => {
        console.log(res, 'res')
        // _this.tabs2Click(_this.tab2Active)
        this.wxPayment(res.data)
      })
    },
    wxPayment(data) {
      let _this = this
      wx.requestPayment({
        timeStamp: data.timeStamp,
        nonceStr: data.nonceStr,
        package: data.packageValue,
        signType: data.signType,
        paySign: data.paySign,
        success: function (res) {
          console.log(res, '支付过程成功')
          wx.showToast({
            title: '支付成功。',
            icon: 'success',
          })
          _this.tabs2Click(_this.tab2Active)
        },
        fail: function (res) {
          console.log('支付过程失败')
          // util.showErrorToast('支付失败');
        },
        complete: function (res) {
          console.log('支付过程结束')
        },
      })
    },
  },
}
</script>

<style scoped lang="scss">
.container {
  background: #9ec8f9;
  overflow: auto;

  .tabs {
    width: 240px;
    height: 44px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.8);
    margin: 20px auto 10px auto;
    color: #005ecc;
    font-size: 14px;
    display: flex;
    position: relative;

    .tabsTransition {
      width: 50%;
      height: 44px;
      position: absolute;

      .tabsBk {
        width: 100%;
        height: 100%;
      }
    }

    .tab {
      width: 50%;
      height: 44px;
      text-align: center;
      line-height: 44px;
      z-index: 2;
    }

    .active {
      color: #fff;
    }
  }

  .tabs2 {
    width: 240px;
    margin: 0 auto;
    position: relative;

    .tabs2_bk {
      width: 100%;
    }

    .tabs2_info {
      position: absolute;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      font-size: 12px;

      .text {
        color: #fff;
      }

      .select {
        width: 80px;
      }
    }
  }

  .tabw {
    width: calc(100% - 20px);
    margin: 0 auto;

    .tabs2_info {
      justify-content: space-around;

      .tabItem {
        color: #fff;
        padding: 5px 0;
        font-size: 13px;
      }

      .active {
        color: #8ef1ff !important;
        border-bottom: solid 2px #8ef1ff;
      }
    }
  }

  .list {
    padding: 10px;
    padding-bottom: 70px;

    .swipeLeft {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;

      .radio {
        transform: scale(0.8);
      }
    }

    .card {
      margin-bottom: 10px;
      border-radius: 8px;
      background: #fff;
      padding: 10px;

      .row {
        display: flex;
        justify-content: space-between;
        .status2 {
          position: absolute;
          right: 10px;
          width: 44px;
          height: 16px;
          font-size: 12px;
          border-radius: 2px;
          text-align: center;
          padding: 2px 5px;
        }
        .type1 {
          background: #ffe4e7;
          color: #ff2c43;
        }
        .type2 {
          background: #e2edfb;
          color: #005ecc;
        }
        .type3 {
          background: #00bcc8;
          color: #00c537;
        }
        .type4 {
          background: #def2e4;
          color: #00bcc8;
        }
        .type5 {
          background: #dedede;
          color: #999;
        }
        .left {
          display: flex;
          align-items: center;

          .photo {
            margin-right: 5px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
          }

          .name {
            font-size: 14px;
            font-weight: 600;
          }

          .img {
            width: 100px;
            height: 100px;
            border-radius: 2px;
            margin-right: 10px;
          }
          .img2 {
            width: 75px;
            height: 75px;
            border-radius: 2px;
            margin-right: 10px;
          }
        }

        .right {
          flex: 1;

          .row {
            margin-bottom: 5px;
          }

          .title {
            font-size: 16px;
            font-weight: 600;
          }
        }

        .text1 {
          color: #666666;
          font-size: 12px;
        }
      }
      .cardButtons {
        padding-top: 10px;
        border-top: solid 1px #eaeaea;
        justify-content: flex-end;

        .button {
          font-size: 12px;
          margin-left: 10px;
          padding: 4px 0;
          width: 60px;
          text-align: center;
          border-radius: 5px;
        }
        .button1 {
          color: #ff7d12;
          border: solid 1px #ff7d12;
        }
        .button2 {
          color: #fff;
          background: linear-gradient(180deg, #ffad3d 0%, #ff740a 100%);
        }
      }
    }
  }

  .buttons {
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    width: 100%;
    padding: 10px 0;
    margin-bottom: 30px;

    image {
      height: 42px;
    }
  }

  .bottom {
    background: #fff;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    width: calc(100% - 20px);
    padding: 10px;

    .left {
      display: flex;
      justify-content: center;
      align-items: center;

      .text {
        color: #999;
        font-size: 14px;
        margin-left: 10px;
      }

      .radio1 {
        width: 20px;
        height: 20px;
      }

      .radio2 {
        width: 18px;
        height: 18px;
      }
    }

    .right {
      display: flex;

      .button {
        height: 30px;
        padding: 0 20px;
        border-radius: 15px;
        font-size: 14px;
        line-height: 30px;
        margin-left: 15px;
      }
      .button1 {
        height: 28px;
        border: solid 1px #ff8015;
        color: #ff8015;
      }
      .button2 {
        // border: solid 1px #FF8015;
        background: linear-gradient(180deg, #ffad3d 0%, #ff740a 100%);
        color: #fff;
      }
    }
  }
}
</style>

<style scoped>
.tabs2_info >>> .uni-stat__select {
  background: none;
}

.tabs2_info >>> .uni-select {
  border: none !important;
  font-size: 12px;
}

.tabs2_info >>> .uni-icons {
  font-size: 20px !important;
}

.tabs2_info >>> .uni-select__input-text {
  color: #8ef1ff !important;
}

.tabs2_info >>> .uni-icons {
  color: #8ef1ff !important;
}

.tabs2_info >>> .uni-select__selector {
  width: 100px;
}

.tabs2_info >>> .uni-select__selector-item {
  font-size: 12px;
}
</style>