h5-colexiu/src/views/order-detail/index.tsx

import ColProtocol from '@/components/col-protocol'
import { Button, Dialog, Icon, Popup, Sticky, Toast } from 'vant'
import ColPopup from '@/components/col-popup'
import { defineComponent } from 'vue'
import { postMessage } from '@/helpers/native-message'
import styles from './index.module.less'
import UserAuth from './userAuth'
import request from '@/helpers/request'

// 调用原生支付
// postMessage({ api: 'paymentOrder', content: { orderNo: 0 } })
// listenerMessage({ api: 'paymentResult', callback: (res: any) => {
//   status: 'success | fail'
// }})

import iconTips from '@common/images/icon_tips.png'
import Payment from './payment'
import ColHeader from '@/components/col-header'
import { state } from '@/state'
import { orderInfos, orderStatus, resestState } from './orderStatus'
import OrderVideo from './order-video'
import OrderLive from './order-live'
import OrderPractice from './order-practice'
import OrderVip from './order-vip'
import OrderMusic from './order-music'
import { moneyFormat } from '@/helpers/utils'
import OrderPinao from './order-pinao'
import { getMusicDetail } from '@/student/trade/tradeOrder'
import OrderActive from './order-active'
import UseCoupon from './use-coupons'
import OrderAlbum from './order-album'
import { useRect } from '@vant/use'

export default defineComponent({
  name: 'order-detail',
  data() {
    const query = this.$route.query
    return {
      loading: false, // 是否加载中，为了处理0元订单（）
      orderType: query.orderType as string,
      recomUserId: query.recomUserId, // 推荐人id
      activityId: query.activityId, // 活动编号
      id: query.id,
      agreeStatus: false,
      popupShow: false,
      paymentStatus: false,
      orderAmount: 0, // 订单金额，用于使用优惠券，余额，优惠等
      orderPrice: 0, // 支付金额，最后支付金额
      dataLoading: true,
      exists: false, // 是否签署过用户注册协议
      bottomHeight: 0
    }
  },
  unmounted() {
    // 销毁时解绑监听
    orderStatus.orderInfo = {
      orderNo: '',
      actualPrice: 0,
      payStatus: false
    }
  },
  computed: {
    orderList() {
      // 商品列表
      const orderObject = orderStatus.orderObject
      return orderObject.orderList || []
    }
  },
  async mounted() {
    await this.getUserRegisterProtocol()
    // 判断是否是曲目购买（只有智能陪练才会有入口），其它地方不会有入口
    this.dataLoading = true
    if (this.orderType == 'MUSIC' && this.id) {
      try {
        const item = await getMusicDetail(this.id)
        orderStatus.orderObject.orderType = 'MUSIC'
        orderStatus.orderObject.orderName = item.musicSheetName
        orderStatus.orderObject.orderDesc = item.musicSheetName
        orderStatus.orderObject.actualPrice = item.musicPrice
        orderStatus.orderObject.recomUserId = this.recomUserId
        orderStatus.orderObject.activityId = this.activityId
        // 判断当前订单是否在支付中
        if (['WAIT_PAY', 'PAYING'].includes(item.orderStatus)) {
          orderStatus.orderObject.orderNo = item.orderNo
        } else if (['PAID', 'CLOSE', 'FAIL'].includes(item.orderStatus)) {
          // 判断订单是否是其它状态
          Toast('订单有误')
          postMessage({ api: 'back', content: {} })
        }
        orderStatus.orderObject.orderList = [
          {
            orderType: 'MUSIC',
            goodsName: item.musicSheetName,
            actualPrice: item.musicPrice,
            ...item
          }
        ]
      } catch {
        //
      }
    }
    this.orderAmount = orderStatus.orderObject.actualPrice || 0
    this.orderPrice = orderStatus.orderObject.actualPrice || 0
    this.dataLoading = false
    // 0元支付特别处理
    if (this.orderPrice === 0 && orderStatus.orderObject.orderType) {
      this.loading = true
      this.onSubmit()
    }

    this.$nextTick(() => {
      // paymentButton
      // 处理超过一屏显示
      const { height } = useRect((this as any).$refs.paymentButtom)
      this.bottomHeight = height + 10
    })
  },
  methods: {
    async getUserRegisterProtocol() {
      // 获取是否签署过《用户注册协议》
      try {
        const res = await request.get(
          state.platformApi + '/sysUserContractRecord/checkContractSign',
          {
            params: {
              contractType: 'REGISTER'
            }
          }
        )
        this.exists = res.data
      } catch {
        //
      }
    },
    async onAuthSuccess() {
      this.popupShow = false
      await this.getUserRegisterProtocol()
      this.onSubmit() // 实名成功后自动支付
    },
    async onSubmit() {
      // console.log(this.orderInfos)
      if (this.orderPrice > 0) {
        if (!this.agreeStatus) {
          Toast('请先阅读并同意《酷乐秀平台服务协议》')
          return
        }
        const users = state.user.data
        // 判断是否需要实名认证, 姓名，卡号，是否签协议
        if (!users?.realName || !users?.idCardNo || !this.exists) {
          this.popupShow = true
          return
        }
      }

      // 判断是否有订单号
      if (orderStatus.orderObject.orderNo) {
        this.paymentStatus = true
        return
      }

      // 正常支付
      try {
        const orderObject = orderStatus.orderObject
        const url =
          state.platformType === 'TEACHER'
            ? '/api-teacher/userOrder/executeOrder'
            : '/api-student/userOrder/executeOrder'
        const res = await request.post(url, {
          data: {
            orderName: orderObject.orderName,
            orderDesc: orderObject.orderDesc,
            orderType: orderObject.orderType,
            actualPrice: this.orderPrice || 0,
            recomUserId: orderObject.recomUserId,
            activityId: orderObject.activityId,
            couponId: orderObject.couponId,
            orderInfos: [...orderInfos()]
          }
        })
        const result = res.data || {}
        // 支付成功
        if (result.status == 'PAID') {
          this.$router.replace({
            path: '/tradeDetail',
            query: {
              orderNo: result.orderNo
            }
          })
          return
        }

        // 拉起支付方式
        orderStatus.orderObject.orderNo = result.orderNo
        orderStatus.orderObject.actualPrice = result.actualPrice
        this.paymentStatus = true
      } catch {
        this.loading = false
        if (this.orderPrice === 0) {
          Dialog.alert({
            title: '提示',
            message: '支付失败，请稍后重试！',
            confirmButtonText: '确定',
            confirmButtonColor: '#2dc7aa'
          })
        }
      }
    },
    onBackOut() {
      // 关闭订单后需要重置数据
      resestState()
    },
    onCouponSelect(item: any) {
      console.log('onCouponSelect', item)
      let discountCount = 0
      ;(item || []).forEach((item: any) => {
        discountCount += Number(item.discountPrice)
      })

      const lastAmount = Number(
        (Number(this.orderAmount) - Number(discountCount)).toFixed(2)
      )
      this.orderPrice = lastAmount >= 0 ? lastAmount : 0

      // 设置优惠券编号
      const couponIds = (item || []).map((item: any) => {
        return item.couponIssueId
      })
      orderStatus.orderObject.couponId = couponIds.join(',') || ''
    }
  },
  render() {
    return (
      <div
        class={styles['order-detail']}
        style={{
          paddingBottom: this.bottomHeight + 'px'
        }}
      >
        <ColHeader />

        {!this.loading && (
          <>
            {this.orderList.map((item: any) => {
              if (item.orderType === 'VIDEO') {
                return <OrderVideo item={item} />
              } else if (item.orderType === 'LIVE') {
                return <OrderLive item={item} />
              } else if (item.orderType === 'PRACTICE') {
                return <OrderPractice item={item} />
              } else if (item.orderType === 'VIP') {
                return <OrderVip item={item} />
              } else if (item.orderType === 'MUSIC') {
                return <OrderMusic item={item} />
              } else if (item.orderType === 'PINAO_ROOM') {
                return <OrderPinao item={item} />
              } else if (item.orderType === 'ACTI_REGIST') {
                return <OrderActive item={item} />
              } else if (item.orderType === 'ALBUM') {
                return <OrderAlbum item={item} />
              }
            })}

            {/* 优惠券使用 */}
            {!this.dataLoading && (
              <UseCoupon
                discountPrice={orderStatus.orderObject.discountPrice}
                orderType={this.orderType}
                orderAmount={this.orderAmount}
                onCouponSelect={this.onCouponSelect}
                disabled={orderStatus.orderObject.orderNo ? true : false}
              />
            )}

            {/* <div class={styles.tips}>
          <h3>
            <Icon name={iconTips} size={15} />
            温馨提示
          </h3>
          
          {state.platformType === 'TEACHER' ? (
            <p>
              1、琴房时长为虚拟商品，一经购买不予退费； <br />
              2、琴房时长消耗以时长扣减逻辑为准。
            </p>
          ) : (
            <p>
              1、您支付的课程费用将由平台收取； <br />
              2、陪练课、直播课课程结束后，平台将单课时费用向老师结算；
              <br />
              3、除直播课未达到开课人数外，其他服务一经购买不予退费。
            </p>
          )}
        </div> */}

            <div class={styles.paymentInfo} ref="paymentButtom">
              {this.orderPrice > 0 && (
                <div class={styles.protocol}>
                  <ColProtocol
                    v-model={this.agreeStatus}
                    showHeader
                    style={{ paddingLeft: 0, paddingRight: 0 }}
                  />
                </div>
              )}

              <div class={styles.btnGroup}>
                <div class={styles.priceSection}>
                  支付金额：
                  <div class={styles.price}>
                    <span class={styles.priceUnit}>￥</span>
                    <span class={styles.priceNum}>
                      {moneyFormat(this.orderPrice)}
                    </span>
                  </div>
                </div>
                <Button
                  type="primary"
                  round
                  class={styles.btn}
                  onClick={this.onSubmit}
                >
                  立即支付
                </Button>
              </div>
            </div>
          </>
        )}
        <ColPopup v-model={this.popupShow}>
          <UserAuth exists={this.exists} onSuccess={this.onAuthSuccess} />
        </ColPopup>

        <Popup
          show={this.paymentStatus}
          closeOnClickOverlay={false}
          position="bottom"
          round
          closeOnPopstate
          safeAreaInsetBottom
          style={{ minHeight: '30%' }}
        >
          <Payment
            v-model={this.paymentStatus}
            orderInfo={orderStatus.orderObject}
            onBackOut={this.onBackOut}
          />
        </Popup>
      </div>
    )
  }
})