uniAppXCX/pages/knapsack/knapsack.vue

<template>
  <view class="container">
    <view class="tabs">
      <uni-transition ref="ani" class="tabsTransition" :styles="styles" :show="true">
        <image
          class="tabsBk"
          :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/knapsack/tabBk.png'"
          mode="widthFix"
        ></image>
      </uni-transition>

      <view :class="['tab', activeIndex == 1 ? 'active' : '']" @click="tabClick(1)">现货奖品</view>
      <view :class="['tab', activeIndex == 2 ? 'active' : '']" @click="tabClick(2)">商城订单</view>
    </view>

    <view class="content" v-if="activeIndex == 1">
      <view class="tabs2">
        <image
          class="tabs2_bk"
          :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/knapsack/tabBk2.png'"
          mode="widthFix"
        ></image>
        <view class="tabs2_info">
          <span class="text">选择排序方式：</span>
          <uni-data-select class="select" v-model="params.sort" :localdata="sortList"></uni-data-select>
        </view>
      </view>
      <view class="list">
        <uni-swipe-action :autoClose="false">
          <uni-swipe-action-item
            v-for="(item, index) in list"
            :key="index"
            :show="showCheck ? 'left' : 'none'"
            :disabled="true"
          >
            <template v-slot:left>
              <view class="swipeLeft">
                <radio class="radio" :checked="item.check == true" @click="checkClick($event, item)" />
              </view>
            </template>
            <view class="card">
              <view class="row" style="margin-top: 10px">
                <view class="left">
                  <image
                    class="img"
                    :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka.jpeg'"
                    mode="aspectFill"
                  ></image>
                </view>
                <view class="right" style="font-size: 14px">
                  <view class="row title">
                    {{ item.prizeName }}
                  </view>
                  <view class="row text">获得时间：{{ item.creatTime }}</view>
                  <view class="row" style="color: #ff2c43">
                    回收积分：{{ item.integral }}
                    <!-- <span class="status">{{ item.prizeStatus }}</span> -->
                  </view>
                  <view class="row button">
                    <span></span>
                    <span>
                      <image
                        @click="decompose(item)"
                        style="width: 44px"
                        :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/knapsack/button5.png'"
                        mode="widthFix"
                      ></image>
                    </span>
                  </view>
                </view>
              </view>
            </view>
          </uni-swipe-action-item>
        </uni-swipe-action>
        <noData v-if="list.length == 0" />
      </view>

      <view class="buttons" v-if="!showCheck">
        <image
          class="button"
          @click="clickCheckType(2)"
          :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/knapsack/button3.png'"
          mode="heightFix"
        ></image>
        <image
          class="button"
          @click="clickCheckType(1)"
          :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/knapsack/button4.png'"
          mode="heightFix"
        ></image>
      </view>
      <view class="bottom" v-if="showCheck">
        <view class="left">
          <image
            class="radio1"
            @click="clickCheckAll(true)"
            v-if="!allCheck"
            :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/knapsack/check.png'"
            mode="widthFix"
          ></image>
          <image
            class="radio2"
            @click="clickCheckAll(false)"
            v-else
            :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/knapsack/checkActive.png'"
            mode="widthFix"
          ></image>
          <view class="text" style="color: #000">全选</view>
          <view class="text">
            已选 (
            <span style="color: #000">{{ selectIndex.length }}</span>
            )
          </view>
        </view>
        <view class="right">
          <view class="button button1" @click="cancelCheck">取消</view>
          <view class="button button2" v-if="checkType == 1" @click="toConfirmConfirm">选择地址</view>
          <view class="button button2" v-if="checkType == 2" @click="decompose">分解</view>
        </view>
      </view>
    </view>
    <view class="content" v-if="activeIndex == 2">
      <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 {
      showCheck: false,
      // 多选类型 1下单 2分解
      checkType: 1,
      activeIndex: 1,
      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.cancelCheck()
    this.selectIndex = []
    this.showCheck = false
    this.activeIndex = 1
    this.$refs.ani.init({
      duration: 100,
      timingFunction: 'linear',
      transformOrigin: '50% 50%',
      show: true,
    })
    this.$refs.ani.step({
      translateX: '0',
    })
    this.$refs.ani.run(() => {
      console.log('动画支持完毕')
    })
    // 获取背包数据
    this.getList()
    // 获取商城订单数据（全部）
    this.getList2()
  },
  onReady() {},
  onLoad() {},
  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)
    },
    toConfirmConfirm() {
      if (this.selectIndex.length == 0) {
        wx.showToast({
          title: '请选则要发货卡牌。',
          icon: 'none',
        })
        return
      }
      getApp().globalData.orderConfirmIds = this.selectIndex
      getApp().globalData.selectAddrss = null
      this.$navigateTo('/pages/orderConfirm/orderConfirm')
    },
    // 取消选择
    cancelCheck() {
      this.showCheck = false
      this.selectIndex = []
      for (var i = 0; i < this.list.length; i++) {
        this.list[i].check = false
      }
    },
    clickCheckAll(bool) {
      this.selectIndex = []
      for (var i = 0; i < this.list.length; i++) {
        this.list[i].check = bool
        if (bool) {
          this.selectIndex.push(this.list[i].id)
        }
      }
    },
    clickCheckType(type) {
      // 下单或分解多选打开
      this.checkType = type
      this.showCheck = true
    },
    checkClick(e, item) {
      console.log(item, 'item')
      item.check = !item.check

      let index = this.selectIndex.indexOf(item.id)
      if (item.check && index == -1) {
        this.selectIndex.push(item.id)
      } else if (!item.check && index != -1) {
        this.selectIndex.splice(index, 1)
      }
      console.log(this.selectIndex, 'this.selectIndex')
    },
    getList() {
      // 获取背包列表
      packagePrizeListApi(this.params).then(res => {
        console.log(res, '奖品背包')
        let list = res.data.list
        for (var i = 0; i < list.length; i++) {
          list[i].check = false
        }
        this.list = list
      })
    },
    getList2(type) {
      // 获取商城订单列表
      if (type) {
        this.params2.status = type
      } else {
        this.params2.status = ''
      }
      packageOrderListApi(this.params2).then(res => {
        console.log(res, '商城订单列表')
        this.list2 = res.data.list
      })
    },
    tabClick(index) {
      this.activeIndex = index
      if (index == 1) {
        this.$refs.ani.step({
          translateX: '0',
        })
        this.$refs.ani.run(() => {
          console.log('动画支持完毕')
        })
      }
      if (index == 2) {
        this.$refs.ani.step({
          translateX: '120px',
        })
        this.$refs.ani.run(() => {
          console.log('动画支持完毕')
        })
      }
    },
    decompose(value) {
      // 分解卡牌
      let _this = this
      let prizeIdList = []
      if (value.prizeName) {
        prizeIdList = [value.id]
      } else if (this.selectIndex.length > 0) {
        prizeIdList = this.selectIndex
      } else {
        wx.showToast({
          title: '请选则要分解卡牌。',
          icon: 'none',
        })
        return
      }
      wx.showModal({
        title: '确认分解卡牌？',
        content: '卡牌分解后将无法找回。',
        success: res => {
          if (res.confirm) {
            prizerRecoverApi(prizeIdList).then(res => {
              console.log(res, 'res')
              wx.showToast({
                title: '分解成功。',
                icon: 'none',
              })
              _this.getList()
            })
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        },
      })
    },
    // 取消订单
    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: #d4f9fc;
          color: #00bcc8;
        }
        .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>