yihuo/pages/order_product/index.vue

<template>
  <page title="商城订单" ref="pageRef" nav-color="transparent" custom-class="paddingB30">
      <tabbar
          :data="tabbarData"
          :initial="initial"
          @change="onChange"
          custom-class="paddingX14 marginB7"
      />
      <view v-if="tableData && tableData.length > 0">
          <view v-for="item in tableData" :key="item.tradeNo" class="cell">
              <view class="filter" />
              <view class="top">
                  <view class="flex-align-between">
                      <view class="flex-align">
                          <view class="font2 color-2">下单时间：{{ item.createTime }}</view>
                          <view v-if="item.type == 2" class="presell">预售订单</view>
                      </view>
                      <view class="color-theme font2">
                          <text v-if="item.status === 0">待支付</text>
                          <text v-if="item.status === 99">已完成</text>
                          <text v-else-if="item.status === 1">待发货</text>
                          <text v-else-if="item.status === 2">待收货</text>
                          <text v-else-if="item.status === 10">已取消</text>
                          <text v-else-if="item.status === 11">超时取消</text>
                          <text v-else-if="item.status === 12">系统取消</text>
                      </view>
                  </view>
                  <view
                      v-if="item.status === 0 && !(item.type == 2 && item.paidAmount > 0)"
                      class="color-2 font2 paddingT5"
                  >
                      {{ item.paymentTimeoutTime }}将自动取消该订单，如有优惠券，将自动退回
                  </view>
              </view>
              <view class="middle flex-align flex1" @click="showDetail(item)">
                  <image :src="item.itemList[0].cover" mode="aspectFit" class="img" />
                  <view class="self-stretch flex-column-between marginL12 flex1" style="width: 0">
                      <view class="color-1 bold line-ellipsis font4">
                          {{ item.itemList[0].name }}
                      </view>
                      <view class="flex-align-between">
                          <view class="flex-align">
                              <view class="color-1 bold font4">
                                  ¥{{ item.itemList[0].price }}
                              </view>
                              <view
                                  v-if="
                                      item.status === 0 && item.type == 2 && item.paidAmount > 0
                                  "
                                  class="deposit"
                              >
                                  定金：¥{{ item.depositAmount }}
                              </view>
                          </view>
                          <view class="color-1 font2">X{{ item.itemList[0].quantity }}</view>
                      </view>
                      <view class="color-theme font2" v-if="item.couponAmount">
                          使用优惠券-{{ item.couponAmount }}
                      </view>
                      <view v-if="item.status === 0" class="flex-align">
                          <view class="color-3 font1 flex-align">
                              <view>总价：</view>
                              <view>
                                  <text class="font1">¥</text>
                                  <text class="font6 bold">{{ item.totalAmount }}</text>
                              </view>
                          </view>
                          <view class="color-theme font1 flex-align paddingL12">
                              <view
                                  v-if="
                                      item.type === 1 || (item.type === 2 && item.restFlag === 1)
                                  "
                              >
                                  需付款：
                              </view>
                              <view v-if="item.type === 2 && !item.restFlag">需付定金：</view>
                              <view>
                                  <text class="font1">¥</text>
                                  <text
                                      v-if="
                                          item.type === 1 ||
                                          (item.type === 2 && item.restFlag === 1)
                                      "
                                      class="font6 bold"
                                  >
                                      {{ item.paymentAmount - item.paidAmount }}
                                  </text>
                                  <text
                                      v-if="item.type === 2 && !item.restFlag"
                                      class="font6 bold"
                                  >
                                      {{ item.depositAmount }}
                                  </text>
                              </view>
                          </view>
                      </view>
                      <view v-else class="color-theme flex-align">
                          <view class="color-3 font1 flex-align">
                              <view>总价：</view>
                              <view>
                                  <text class="font1">¥</text>
                                  <text class="font6 bold">{{ item.totalAmount }}</text>
                              </view>
                          </view>
                          <view class="color-theme font1 flex-align paddingL12">
                              <text class="font2">实付款：</text>
                              <text class="font8 bold">¥{{ item.paidAmount }}</text>
                          </view>
                      </view>
                  </view>
              </view>
              <view class="paddingY12 flex-align">
                  <view class="font2 line-ellipsis flex1" style="width: 0">
                      订单号：{{ item.tradeNo }}
                  </view>
                  <button
                      class="btn-clear copy flex-shrink0"
                      @click.stop="$common.copy(item.tradeNo)"
                  >
                      复制
                  </button>
              </view>
              <view class="paddingB12 flex-align-end">
                  <view v-if="item.status === 0" class="paddingL18 flex-shrink0">
                      <button class="cm-plain-btn btn" @click.stop="realPay(item)">付款</button>
                  </view>
                  <view v-if="item.status === 1" class="paddingL10 flex-shrink0">
                      <button class="cm-plain-btn btn info" @click.stop="showAddress(item)">
                          修改地址
                      </button>
                  </view>
                  <button
                      v-if="item.status === 2"
                      class="btn"
                      style="padding: 0 10rpx; margin: 0 10rpx"
                      @click.stop="receive(item)"
                  >
                      确认收货
                  </button>
                  <button
                      v-if="[2, 99].includes(item.status)"
                      class="btn"
                      style="padding: 0 10rpx; margin: 0 10rpx"
                      @click.stop="showExpress(item)"
                  >
                      物流信息
                  </button>
              </view>
          </view>
      </view>
      <empty v-if="isEmpty" :top="200" light />
  </page>
</template>
<script>
  import { LEVEL_MAP } from '@/utils/config'
  import tabbar from '@/components/tabbar'
  import empty from '@/components/empty'
  import pageMixin from './../../mixin/page'
  import loginMixin from '@/mixin/login'
  import { baseEncode } from '../../utils/utils'
  export default {
      mixins: [pageMixin, loginMixin],
      components: { tabbar, empty },
      data() {
          return {
              LEVEL_MAP,
              initial: 0,
              tabbarData: [
                  {
                      label: '全部',
                      value: 'all'
                  },
                  {
                      label: '待支付',
                      value: 'to_pay'
                  },
                  {
                      label: '待补款',
                      value: 'to_payLeft'
                  },
                  {
                      label: '待发货',
                      value: 'to_delivery'
                  },
                  {
                      label: '待收货',
                      value: 'to_receive'
                  },
                  {
                      label: '已完成',
                      value: 'complete'
                  },
                  {
                      label: '未完成',
                      value: 'uncomplete'
                  }
              ],
              index: 0
          }
      },
      computed: {
          itemWidth() {
              let width = this.$store.state.systemInfo.screenWidth
              width = (width - 28 - 30 - 16) / 5
              let height = (91 / 60) * width
              return { width, height }
          },
          payInfo() {
              return this.$store.state.payInfo
          }
      },
      watch: {
          payInfo(val) {
              if (val && val.payResult == 'SUCCESS') {
                  this.paySuccess(val)
              } else if (val && val.payResult !== 'SUCCESS') {
              }
          }
      },
      onLoad(options) {
          this.initial = options.active || 0
          this.index = this.initial
          if (this.$store.state.hide == 1) {
              this.$service.user.getHide()
          }
      },
      mounted() {
          setTimeout(() => {
              this.refresh(true)
          }, 100)
      },
      onPullDownRefresh() {
          this.refresh()
      },
      onReachBottom() {
          this.loadMore()
      },
      methods: {
          init() {
              this.refresh()
          },
          async loadData(loading) {
              const item = this.tabbarData[this.index]
              const res = await this.$service.mall.orders(
                  this.pageNum,
                  this.pageSize,
                  item.value,
                  loading
              )
              return res
          },
          onChange(index) {
              this.index = index
              this.refresh(true)
          },
          showDetail(item) {
              this.$router.push('order_product_detail', { tradeNo: item.tradeNo })
          },
          showExpress(item) {
              this.$router.push('packages', { type: 1, tradeNo: item.deliveryTradeNo })
          },
          async realPay(item) {
              const res = await this.$service.mall.orderPay(item.tradeNo, 'ALIPAY_APP')
              if (res) {
                  if (res.paySuccess) {
                      this.refresh()
                      if (this.$store.state.hide == 1) {
                          this.$service.user.getHide()
                      }
                      return
                  }
                  let self = this
                  // 支付宝支付
                  uni.requestPayment({
                      provider: 'alipay',
                      orderInfo: res.payInfo,
                      success: function (res) {
                          self.close()
                          if (self.$store.state.hide == 1) {
                              self.$service.user.getHide()
                          }
                          self.$router.push('order_product')
                      },
                      fail: function (err) {
                          console.log('fail:' + JSON.stringify(err));
                      }
                  });
                  return
              }
          },
          // wechatPay(data) {
          //     let payInfo = data.payInfo
          //     wx.requestPayment({
          //         timeStamp: payInfo.timeStamp,
          //         nonceStr: payInfo.nonceStr,
          //         package: payInfo.packageValue,
          //         signType: payInfo.signType,
          //         paySign: payInfo.paySign,
          //         success: (res) => {
          //             this.close()
          //             if (this.$store.state.hide == 1) {
          //                 this.$service.user.getHide()
          //             }
          //             this.$router.push('order_product')
          //         },
          //         fail: (res) => {}
          //     })
          // },
          wechatPay(data) {
              let payInfo = data.payInfo
              wx.requestPayment({
                  timeStamp: payInfo.timeStamp,
                  nonceStr: payInfo.nonceStr,
                  package: payInfo.packageValue,
                  signType: payInfo.signType,
                  paySign: payInfo.paySign,
                  success: (res) => {
                    this.close()
                    if (this.$store.state.hide == 1) {
                        this.$service.user.getHide()
                    }
                    this.$router.push('order_product')
                  },
                  fail: (res) => {}
              })
          },
          thirdPay(data) {
              let self = this
              let redirectUrl = data.redirectUrl
              let requestId = data.requestId
              const base64Url = encodeURIComponent(baseEncode(redirectUrl))
              wx.openEmbeddedMiniProgram({
                  path: 'pages/pay/order', // 启动目标页面
                  appId: 'wx0448557563ffc600', // 启动的小程序
                  envVersion: 'release', // develop | trial | release
                  verify: 'binding',
                  extraData: {
                      title: '订单付款', // 导航Title
                      tip: `待支付订单付款`, // 支付提示内容
                      requestId: requestId, // 本次请求ID
                      action: 'epPay', // 支付模式
                      payUrl: base64Url // 支付地址, 需要进行Base64转换
                  },
                  success: (res) => {
                      console.info('启动成功', res)
                  },
                  fail: (err) => {
                      console.info('启动失败', err)
                  }
              })
          },
          paySuccess(payInfo) {
              this.close()
              this.$store.state.payInfo = null
              if (this.$store.state.hide == 1) {
                  this.$service.user.getHide()
              }
              this.$router.push('order_product')
          },
          showAddress(item) {
              this.$router.push('address', { type: 0, tradeNo: item.tradeNo })
          },
          receive(item) {
              this.$message.confirm('确认收货吗?', async () => {
                  const res = await this.$service.mall.receive(item.tradeNo)
                  res && this.refresh()
              })
          }
      }
  }
</script>
<style lang="scss" scoped>
  .cell {
      background: #fff;
      border-radius: 16rpx;
      margin: 20rpx 14px;
      position: relative;
      padding: 0 15px;

      .filter {
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          right: 0;
          z-index: -1;
          border-radius: 16rpx;
          backdrop-filter: blur(20rpx);
      }

      .top {
          padding: 20rpx 0;
          border-bottom: 2rpx solid #eee;
          .presell {
              background: $color-theme;
              width: 128rpx;
              height: 44rpx;
              line-height: 44rpx;
              border-radius: 22rpx;
              font-size: 24rpx;
              color: #fff;
              margin-left: 16rpx;
              text-align: center;
          }
      }

      .middle {
          padding: 24rpx 0;
          border-bottom: 2rpx solid #eee;

          .img {
              width: 180rpx;
              height: 180rpx;
              border-radius: 8rpx;
          }
          .deposit {
              background: $color-theme;
              height: 40rpx;
              line-height: 40rpx;
              border-radius: 20rpx;
              font-size: 22rpx;
              color: #fff;
              padding: 0 16rpx;
              margin-left: 16rpx;
          }
      }

      .copy {
          padding: 0 6rpx;
          height: 32rpx;
          line-height: 32rpx;
          border-radius: 8rpx;
          text-align: center;
          color: #000;
          font-size: 24rpx;
          background: #fec433;
      }

      .btn {
          height: 48rpx;
          line-height: 48rpx;
          text-align: center;
          padding: 0 20rpx;
          color: #000;
          font-size: 24rpx;
          background: #fec433;
          border-radius: 24rpx;
          border: none;
          box-shadow: none;
          &::after {
              display: none !important;
          }
      }
  }
</style>