yihuo/pages/order_product_detail/index.vue

<template>
  <page title="订单详情" ref="pageRef" nav-color="transparent">
      <view v-if="data" class="wrapper marginT12 marginX16 padding16 bgcolor-white radius12">
          <view class="flex-align paddingY16">
              <view class="bold">订单详情</view>
              <view v-if="data.type == 2" class="presell">预售订单</view>
          </view>
          <view class="top flex-align flex1">
              <image :src="data.itemList[0].cover" mode="scaleToFill" class="img radius8" />
              <view class="self-stretch flex-column-between marginL12 flex1">
                  <view class="color-1 font4">{{ data.itemList[0].name }}</view>
                  <view class="flex-align-between">
                      <view class="color-theme">
                          <text class="font2">¥</text>
                          <text class="font8 bold">{{ data.itemList[0].price }}</text>
                      </view>
                      <view class="color-1 font2">x{{ data.itemList[0].quantity }}</view>
                  </view>
              </view>
          </view>
          <view class="flex-align-between font2">
              <view>商品金额</view>
              <view>¥{{ data.totalAmount }}</view>
          </view>
          <view class="flex-align-between font2 paddingT12">
              <view>快递费</view>
              <view>¥{{ data.expressAmount }}</view>
          </view>
          <view class="flex-align-between font2 paddingT12">
              <view>优惠券</view>
              <view>-¥{{ data.couponAmount }}</view>
          </view>
          <view
              v-if="data.status === 0 && data.type == 2 && data.paidAmount > 0"
              class="paddingT25 flex-align-end"
          >
              <view class="font2 color-3">共{{ data.itemList[0].quantity }}件</view>
              <view class="flex-align paddingL12">
                  <view class="color-3 font1 flex-align">
                      <view>总价：</view>
                      <view class="">
                          <text class="font1">¥</text>
                          <text class="font6 bold">{{ data.totalAmount }}</text>
                      </view>
                  </view>
                  <view class="color-theme font1 flex-align paddingL12">
                      <view>需付款：</view>
                      <view class="">
                          <text class="font1">¥</text>
                          <text class="font6 bold">
                              {{ data.paymentAmount - data.paidAmount }}
                          </text>
                      </view>
                  </view>
              </view>
          </view>
          <view v-else-if="data.status === 0" class="paddingT25 flex-align-end">
              <view class="font2 color-3">共{{ data.itemList[0].quantity }}件</view>
              <view class="color-1 paddingL9">小计：</view>
              <view class="color-theme font8 paddingL4">
                  <text class="font4">￥</text>
                  {{ data.paymentAmount }}
              </view>
          </view>
          <view v-else class="paddingT25 flex-align-end">
              <view class="font2 color-3">共{{ data.itemList[0].quantity }}件</view>
              <view class="font2 color-1 paddingL9">实付款：</view>
              <view class="color-1 font8 paddingL4">
                  <text class="font4">￥</text>
                  {{ data.paidAmount }}
              </view>
          </view>
      </view>
      <view v-if="data" class="marginT12 marginX16 padding16 bgcolor-white radius12">
          <view class="flex-align-between">
              <view class="font2 flex-shrink0">订单号</view>
              <view class="font2 flex1 text-right line-ellipsis marginL10">
                  {{ data.tradeNo }}
              </view>
              <button class="btn-clear copy marginL5 flex-shrink0" @click="copy(data.tradeNo)">
                  复制
              </button>
          </view>
          <view class="flex-align-between paddingT20">
              <view class="font2 flex-shrink0">下单时间</view>
              <view class="font2">{{ data.createTime }}</view>
          </view>
          <view class="flex-align-between paddingT20" v-if="data.paymentTime">
              <view class="font2 flex-shrink0">付款时间</view>
              <view class="font2">{{ data.paymentTime }}</view>
          </view>
          <view class="flex-align-between paddingT20">
              <view class="font2 flex-shrink0">收货地址</view>
              <view class="font2 text-right marginL16">
                  {{ data.contactName }}，{{ data.contactNo }}，{{ data.province }}{{ data.city
                  }}{{ data.district }}{{ data.address }}
              </view>
          </view>
      </view>
      <view
          v-if="data && data.type === 2"
          class="flex-align-between marginT12 marginX16 padding16 bgcolor-white radius12"
      >
          <view class="font2 flex-shrink0">尾款提醒手机号</view>
          <view class="font2 text-right marginL10">
              {{ data.restNotifyMobile }}
          </view>
      </view>
      <view class="fill"></view>
      <view v-if="data" class="bottom-fixed bgcolor-white">
          <view
              v-if="[0, 1].includes(data.status)"
              :class="data.status === 1 ? 'paddingB25' : null"
              class="paddingX16 paddingT13 flex-align-end"
          >
              <button
                  :class="data.status === 1 ? 'btn-size' : 'btn'"
                  class="cm-plain-btn"
                  style="margin-right: 20rpx !important"
                  @click.stop="showAddress"
              >
                  修改地址
              </button>
              <button
                  v-if="data.type === 2 && data.status === 0"
                  :class="data.status === 1 ? 'btn-size' : 'btn'"
                  class="cm-plain-btn"
                  @click.stop="showModal = true"
              >
                  修改尾款手机号
              </button>
          </view>
          <view v-if="data.status === 0" class="paddingX16 paddingT13 paddingB25 flex-align-end">
              <view class="flex-align">
                  <view
                      v-if="data.type === 1 || (data.type === 2 && data.restFlag === 1)"
                      class="color-1"
                  >
                      合计：
                  </view>
                  <view v-if="data.type === 2 && !data.restFlag" class="color-1">需付定金：</view>
                  <view
                      v-if="data.type === 1 || (data.type === 2 && data.restFlag === 1)"
                      class="color-theme font8 paddingL4 paddingR16"
                  >
                      <text class="font4">￥</text>
                      {{ data.paymentAmount - data.paidAmount }}
                  </view>
                  <text
                      v-if="data.type === 2 && !data.restFlag"
                      class="color-theme font8 paddingL4 paddingR16"
                  >
                      ￥{{ data.depositAmount }}
                  </text>
              </view>
              <button class="cm-btn btn-size" @click.stop="realPay">确认并支付</button>
          </view>
          <view
              v-if="[2, 99].includes(data.status)"
              class="paddingX16 paddingT13 paddingB25 flex-align-end"
          >
              <button class="cm-plain-btn btn-size" @click="showExpress">查看物流</button>
              <view v-if="data.status === 2" class="paddingL16 flex-shrink0">
                  <button class="cm-plain-btn btn-size" @click.stop="receive">确认收货</button>
              </view>
          </view>
      </view>
      <view v-if="showModal" class="modal">
          <view class="phone-modal flex-column-align-center">
              <view class="title">修改尾款提醒手机号</view>
              <view class="content flex-align">
                  <text class="">手机号：</text>
                  <input
                      class="phone"
                      style="width: 400rpx"
                      v-model.trim="phoneNum"
                      type="number"
                      placeholder-style="color: #ccc"
                  />
              </view>
              <view class="flex-align footer">
                  <button class="btn" @click.stop="showModal = false">取消</button>
                  <button class="btn marginL10" @click.stop="showPhone">确定</button>
              </view>
          </view>
      </view>
  </page>
</template>
<script>
  import resource from '@/utils/resource'
  import { baseEncode } from '../../utils/utils'
  export default {
      data() {
          return {
              resource,
              data: null,
              tradeNo: '',
              showModal: false,
              phoneNum: ''
          }
      },
      computed:{

        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.tradeNo = options.tradeNo
      },
      mounted() {
          setTimeout(() => {
              this.getData(true)
          }, 100)
      },
      onPullDownRefresh() {
          this.getData(false)
      },
      onShow() {
          this.getData(true)
      },
      methods: {
          async getData(loading = false) {
              const res = await this.$service.mall.orderDetail(this.tradeNo, loading)
              uni.stopPullDownRefresh()
              if (res && res.itemList[0].spu) {
                  let obj = res.itemList[0].spu
                  if (obj.parameter) {
                      res.itemList[0].parameterStr = JSON.parse(obj.parameter)
                          .map((item) => item.value)
                          .join('/')
                  }
              }
              this.data = res
          },
          copy(text) {
              this.$common.copy(text)
          },
          showAddress() {
              this.$router.push('address', { type: 0, tradeNo: this.tradeNo })
          },
          async showPhone() {
              if (this.phoneNum) {
                  await this.$service.mall
                      .updatePhone({
                          restNotifyMobile: this.phoneNum,
                          tradeNo: this.data.tradeNo
                      })
                      .then((res) => {
                          if (res.code === '0') {
                              this.$message.success('修改成功!')
                              this.showModal = false
                              this.getData(true)
                          }
                      })
              } else {
                  this.$message.warn('尾款提醒手机号不能为空！')
              }
          },
          showExpress() {
              this.$router.push('packages', { type: 1, tradeNo: this.data.deliveryTradeNo })
          },
          async realPay() {
              const res = await this.$service.mall.orderPay(this.tradeNo, 'WXPAY_JSAPI')
              if (res) {
                  if (res.paySuccess) {
                      this.getData(true)
                      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) => {}
              })
          },
          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')
          },
          receive() {
              this.$message.confirm('确认收货吗?', async () => {
                  const res = await this.$service.mall.receive(this.tradeNo)
                  res && this.getData(true)
              })
          }
      }
  }
</script>
<style lang="scss" scoped>
  .wrapper {
    padding: 0 20rpx !important;
      .presell {
          height: 44rpx;
          line-height: 44rpx;
          border-radius: 22rpx;
          font-size: 24rpx;
          color: #fff;
          padding: 0 16rpx;
          background: $color-theme;
          margin-left: 16rpx;
      }
      .top {
          padding: 0 0 40rpx;
          .img {
              width: 136rpx;
              height: 136rpx;
          }
      }
  }
  .copy {
      padding: 0 6rpx;
      line-height: 32rpx;
      border-radius: 8rpx;
      text-align: center;
      color: #000;
      font-size: 24rpx;
      background: #fec433;
  }
  .fill {
      height: 172rpx;
  }
  .btn-size {
      width: 288rpx;
      height: 64rpx;
      border-radius: 44rpx;
      font-size: 28rpx;
  }
  .btn {
      height: 48rpx;
      line-height: 48rpx;
      text-align: center;
      padding: 0 20rpx;
      color: #fff;
      font-size: 28rpx;
      background: linear-gradient(90deg, #2affff 0%, #4d70f2 100%);
      border-radius: 24rpx;
  }
  .modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      .phone-modal {
          position: relative;
          width: 600rpx;
          height: 400rpx;
          background-color: white;
          padding: 20px;
          border-radius: 5px;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
          .title {
              width: 350rpx;
              position: absolute;
              top: 30rpx;
              left: 50%;
              transform: translateX(-50%);
              font-size: 40rpx;
              font-weight: 500;
          }
          .content {
              .phone {
                  color: #000;
                  height: 78rpx;
                  background: rgb(241, 239, 239);
                  border-radius: 16rpx;
                  margin: 0 auto;
              }
          }
          .footer {
              position: absolute;
              bottom: 40rpx;
              right: 40rpx;
          }
      }
  }
</style>