orchestra-app/src/student/music-group/pre-apply/component/payment.tsx

import OSticky from '@/components/o-sticky'
import {
  Button,
  Cell,
  CellGroup,
  Checkbox,
  CheckboxGroup,
  Icon,
  Image,
  Popup,
  showConfirmDialog,
  showToast,
  Tag
} from 'vant'
import { defineComponent, nextTick, onMounted, reactive, ref } from 'vue'
import styles from '../index.module.less'
import radioCheck from '@/common/images/icon-radio-check.png'
import radioDefault from '@/common/images/icon-radio-default.png'
import iconGives from '../images/icon-gives.png'
import { useRoute, useRouter } from 'vue-router'
import request from '@/helpers/request'
import { moneyFormat } from '@/helpers/utils'
import { CountUp } from 'countup.js'
import OPopup from '@/components/o-popup'
import MemberBao from '../../member-bao'
import GoodsDetail from '../../goods-detail'
import ODialog from '@/components/o-dialog'

export default defineComponent({
  name: 'payment',
  emits: ['next'],
  setup() {
    const route = useRoute()
    const router = useRouter()
    const state = reactive({
      paymentType: '',
      musicPaymentType: '', // 乐团中对应支付方式
      check: [] as any, // 选中的数据
      checkboxRefs: [] as any,
      details: [] as any, //
      goodsInfo: {} as any, // 商品
      textBookInfo: {} as any, // 教材
      repaireInfo: {} as any, // 乐器保养
      vipInfo: {} as any, // 团练宝
      paymentOrderDetails: [] as any, // 购买状态
      orderInfo: {
        needPrice: 0,
        originalPrice: 0
      },
      memberBaoStatus: false, // 团练宝详情状态
      goodsStatus: false, //
      selectGoodsId: null as any,
      currentPrice: 0,
      selectGoodsInfo: {} as any,
      dialogStatus: false,
      dialogMessage: '',
      dialogOrchestraStatus: false, // 是否为不同的乐团
      dialogConfig: {} as any
    })

    // 获取支付渠道
    const sysParamConfig = async () => {
      try {
        const { data } = await request.get('/api-student/sysParamConfig/queryByParamName', {
          params: {
            paramName: 'payment_service_provider'
          }
        })
        state.paymentType = data.paramValue || ''
      } catch {
        //
      }
    }

    // 查询未支付订单
    const paymentOrderUnpaid = async () => {
      try {
        const { data } = await request.get('/api-student/userPaymentOrder/unpaid', {
          params: {
            orchestraId: route.query.id
          }
        })
        // 判断是否有待支付订单
        if (data.id) {
          if (data.orchestraId !== route.query.id) {
            state.dialogMessage = '您在其它乐团存在待支付订单，取消后才可继续报名，是否确认取消？'
            state.dialogStatus = true
            state.dialogOrchestraStatus = true
            state.dialogConfig = data
          } else {
            state.dialogMessage = '您有待支付的订单，是否继续支付'
            state.dialogStatus = true
            state.dialogConfig = data
          }
        }
      } catch {
        //
      }
    }

    // 获取商品信息
    const registerGoods = async () => {
      try {
        const { data } = await request.get(
          '/api-student/orchestraRegister/registerGoods/' + route.query.id
        )

        state.musicPaymentType = data.paymentServiceProvider || ''
        // 获取已经购买商品信息
        const paymentOrderDetails = data.paymentOrderDetails || []
        paymentOrderDetails.forEach((item: any) => {
          state.paymentOrderDetails.push(item.goodsType)
        })
        // 初始化数据商品数据
        const details = data.details || []
        details.forEach((item: any) => {
          if (item.goodsType === 'INSTRUMENTS') {
            const img = item.goodsUrl ? item.goodsUrl.split(',')[0] : ''
            state.goodsInfo = { ...item, goodsUrl: img }
          } else if (item.goodsType === 'TEXTBOOK') {
            const img = item.goodsUrl ? item.goodsUrl.split(',')[0] : ''
            state.textBookInfo = { ...item, goodsUrl: img }
          } else if (item.goodsType === 'REPAIR') {
            state.repaireInfo = { ...item }
          } else if (item.goodsType === 'VIP') {
            state.vipInfo = { ...item }
          }
          state.details = details

          // 默认选中所有的

          if (
            !state.paymentOrderDetails.includes(item.goodsType) &&
            ['INSTRUMENTS', 'TEXTBOOK', 'VIP'].includes(item.goodsType)
          ) {
            state.check.push(item.goodsId)
          }
        })

        calcPrice()
      } catch {
        //
      }
    }

    const onSelect = (type: string) => {
      state.checkboxRefs[type].toggle()
      calcPrice()
    }

    // 初始化金额

    const calcPrice = () => {
      const details = state.details
      const tempPrice = {
        needPrice: 0, //需要支付金额
        originalPrice: 0 // 原价
      }
      details.forEach((item: any) => {
        // 是否选中
        if (
          state.check.includes(item.goodsId) &&
          !state.paymentOrderDetails.includes(item.goodsType)
        ) {
          tempPrice.needPrice += parseFloat(item.currentPrice || 0)
          tempPrice.originalPrice += parseFloat(item.originalPrice || 0)
        }
      })

      state.orderInfo = tempPrice

      initNumCountUp()
    }
    const countUpRef = reactive({
      needPrice: null as any,
      originalPrice: null as any
    })
    const initNumCountUp = () => {
      nextTick(() => {
        // 在读学员
        if (countUpRef.needPrice) {
          countUpRef.needPrice.update(state.orderInfo.needPrice)
        } else {
          countUpRef.needPrice = new CountUp('needPrice', state.orderInfo.needPrice, {
            decimalPlaces: 2
          })
          if (!countUpRef.needPrice.error) {
            countUpRef.needPrice.start()
          } else {
            console.error(countUpRef.needPrice.error)
          }
        }
        // if (countUpRef.originalPrice) {
        //   countUpRef.originalPrice.update(state.orderInfo.originalPrice)
        // } else {
        //   countUpRef.originalPrice = new CountUp('originalPrice', state.orderInfo.originalPrice, {
        //     decimalPlaces: 2
        //   })
        //   if (!countUpRef.originalPrice.error) {
        //     countUpRef.originalPrice.start()
        //   } else {
        //     console.error(countUpRef.originalPrice.error)
        //   }
        // }
      })
    }

    // 购买
    const onSubmit = async () => {
      try {
        // 判断订单号
        if (state.check.length <= 0) {
          showToast('请选择您要购买的商品')
          return
        }
        // 重新计算金额
        calcPrice()
        const params: any = [] // 支付参数
        const details = state.details

        let checkInstruments = false // 是否选择了乐器
        details.forEach((item: any) => {
          // 是否选中 并且没有购买过
          if (
            state.check.includes(item.goodsId) &&
            !state.paymentOrderDetails.includes(item.goodsType)
          ) {
            params.push({
              goodsId: item.goodsId,
              goodsNum: 1,
              goodsType: item.goodsType,
              paymentCashAmount: item.currentPrice, // 现金支付金额
              paymentCouponAmount: 0 // 优惠券金额
            })
          }
          // 判断是否是乐器
          if (
            item.goodsType === 'INSTRUMENTS' &&
            state.check.includes(item.goodsId) &&
            !state.paymentOrderDetails.includes(item.goodsType)
          ) {
            checkInstruments = false
          }
        })

        // 为了处理，商品和乐器保养做关联
        const repaire = state.repaireInfo
        if (checkInstruments && repaire.goodsId) {
          params.push({
            goodsId: repaire.goodsId,
            goodsNum: 1,
            goodsType: repaire.goodsType,
            paymentCashAmount: repaire.currentPrice, // 现金支付金额
            paymentCouponAmount: 0 // 优惠券金额
          })
        }

        // console.log({
        //   bizId: route.query.id, // 乐团编号
        //   orderType: 'ORCHESTRA',
        //   paymentCashAmount: state.orderInfo.needPrice || 0,
        //   paymentCouponAmount: 0,
        //   goodsInfos: params
        // })
        // 创建订单
        const { data } = await request.post('/api-student/userPaymentOrder/executeOrder', {
          hideLoading: false,
          data: {
            paymentType: state.musicPaymentType || state.paymentType,
            bizId: route.query.id, // 乐团编号
            orderType: 'ORCHESTRA',
            paymentCashAmount: state.orderInfo.needPrice || 0,
            paymentCouponAmount: 0,
            goodsInfos: params,
            orderName: '乐团报名缴费',
            orderDesc: '乐团报名缴费'
          }
        })

        console.log(data)
        router.push({
          path: '/orderDetail',
          query: {
            pm: 1, // h5乐团报名
            config: JSON.stringify({ ...data.paymentConfig, paymentType: data.paymentType }),
            orderNo: data.orderNo
          }
        })
      } catch (e: any) {
        //
        console.log(e)
      }
    }

    onMounted(() => {
      sysParamConfig()
      // 查询未支付订单
      registerGoods()
      paymentOrderUnpaid()
    })
    return () => (
      <>
        <div class={styles.applyTitle}>报名须知</div>
        <div class={[styles.paymentTips, styles.mlr13]}>
          <p>
            1、<span>乐团免费政策</span>：学生在团期间训练及教材免费政策（教材邮费需自理）；
          </p>
          <p>
            2、<span>入团须备工具</span>
            ：家长在开训前自行为学生准备好①乐器、②乐团AI学练工具两项训练工具；
          </p>
          <p>
            3、参加团购可享受同类工具同等品质价格低30%的团购政策，由基金会统一协调乐器调试及运输、学练工具安装及激活；
          </p>
          <p>
            4、自行准备工具的家长，等收到开团确认信息后，可根据参考表开始为学生进行乐团训练工具准备。
          </p>
        </div>
        <CheckboxGroup
          v-model={state.check}
          style={{ paddingBottom: '20px' }}
          onChange={() => {
            calcPrice()
          }}
        >
          {/* 判断是否买了乐器学习系统 */}
          {!state.paymentOrderDetails.includes('VIP') && (
            <>
              {/* <div class={styles.applyTitle}>乐团学习系统</div> */}
              <CellGroup
                inset
                class={[styles.mlr13, styles.sectionCell]}
                onClick={() => onSelect(state.vipInfo.goodsId)}
              >
                <Cell border={false}>
                  {{
                    icon: () => (
                      <Checkbox
                        name={state.vipInfo.goodsId}
                        class={styles.checkbox}
                        ref={(el: any) => (state.checkboxRefs[state.vipInfo.goodsId] = el)}
                        onClick={(e: Event) => {
                          e.stopPropagation()
                        }}
                        v-slots={{
                          icon: (props: any) => (
                            <Icon
                              class={styles.iconChecked}
                              name={props.checked ? radioCheck : radioDefault}
                            />
                          )
                        }}
                      />
                    ),
                    title: () => (
                      <div class={styles.section}>
                        <Image
                          class={styles.img}
                          src={state.vipInfo.goodsUrl}
                          onClick={(e: any) => {
                            e.stopPropagation()
                            state.memberBaoStatus = true
                          }}
                        />
                        <div class={styles.sectionContent}>
                          <h2
                            onClick={(e: any) => {
                              e.stopPropagation()
                              state.memberBaoStatus = true
                            }}
                          >
                            {state.vipInfo.goodsName}
                          </h2>
                          <Tag
                            color="linear-gradient(135deg, #FF8C4A 0%, #FF531C 100%)"
                            textColor="#fff"
                            class={styles.brandName}
                          >
                            6个月
                          </Tag>
                          <p class={[styles.model, 'van-multi-ellipsis--l2']}>
                            {state.vipInfo.description}
                          </p>
                        </div>
                      </div>
                    )
                  }}
                </Cell>
                <Cell>
                  {{
                    title: () => (
                      <div class={styles.extra}>
                        <div class={styles.sectionPrice}>
                          <p class={styles.price}>
                            团购价：
                            <span class={styles.numFont}>
                              <span class={styles.numPrefix}>¥</span>
                              {moneyFormat(state.vipInfo.currentPrice)}
                            </span>
                          </p>
                          <p class={styles.originPrice}>
                            原价：
                            <del class={styles.numFont}>
                              ¥ {moneyFormat(state.vipInfo.originalPrice)}
                            </del>
                          </p>
                        </div>
                      </div>
                    )
                  }}
                </Cell>
              </CellGroup>
            </>
          )}
          {/* 判断是否已经购买乐器 */}
          {!state.paymentOrderDetails.includes('INSTRUMENTS') && (
            <>
              {/* <div class={styles.applyTitle}>乐器</div> */}
              <CellGroup
                inset
                class={[styles.mlr13, styles.sectionCell]}
                onClick={() => onSelect(state.goodsInfo.goodsId)}
              >
                <Cell border={false}>
                  {{
                    icon: () => (
                      <Checkbox
                        name={state.goodsInfo.goodsId}
                        class={styles.checkbox}
                        ref={(el: any) => (state.checkboxRefs[state.goodsInfo.goodsId] = el)}
                        onClick={(e: Event) => {
                          e.stopPropagation()
                        }}
                        v-slots={{
                          icon: (props: any) => (
                            <Icon
                              class={styles.iconChecked}
                              name={props.checked ? radioCheck : radioDefault}
                            />
                          )
                        }}
                      />
                    ),
                    title: () => (
                      <div class={styles.section}>
                        <Image
                          class={styles.img}
                          src={state.goodsInfo.goodsUrl}
                          onClick={(e: any) => {
                            e.stopPropagation()
                            state.selectGoodsId = state.goodsInfo.goodsId
                            state.currentPrice = state.goodsInfo.currentPrice
                            state.selectGoodsInfo = {
                              showFree: true,
                              originalPrice: state.repaireInfo.originalPrice
                            }
                            state.goodsStatus = true
                          }}
                        />
                        <div class={styles.sectionContent}>
                          <h2
                            onClick={(e: any) => {
                              e.stopPropagation()
                              state.selectGoodsId = state.goodsInfo.goodsId
                              state.currentPrice = state.goodsInfo.currentPrice
                              state.goodsStatus = true
                            }}
                          >
                            {state.goodsInfo.goodsName}
                          </h2>
                          <Tag
                            color="linear-gradient(135deg, #FF8C4A 0%, #FF531C 100%)"
                            textColor="#fff"
                            class={styles.brandName}
                          >
                            {state.goodsInfo.brandName}
                          </Tag>
                          <p class={[styles.model, 'van-multi-ellipsis--l2']}>
                            {state.goodsInfo.description}
                          </p>
                        </div>
                      </div>
                    )
                  }}
                </Cell>
                <Cell border={false}>
                  {{
                    title: () => (
                      <div class={styles.extra}>
                        <div class={styles.sectionPrice}>
                          <p class={styles.price}>
                            团购价：
                            <span class={styles.numFont}>
                              <span class={styles.numPrefix}>¥ </span>
                              {moneyFormat(state.goodsInfo.currentPrice)}
                            </span>
                          </p>
                          <p class={styles.originPrice}>
                            原价：
                            <del class={styles.numFont}>
                              ¥ {moneyFormat(state.goodsInfo.originalPrice)}
                            </del>
                          </p>
                        </div>
                      </div>
                    )
                  }}
                </Cell>
                {/* <Cell center class={styles.gives}>
                  {{
                    title: () => (
                      <div class={styles.sectionTips}>
                        <Image src={iconGives} class={styles.iconGives} />
                        赠价值{state.repaireInfo.originalPrice}元乐器维保服务一年
                      </div>
                    )
                  }}
                </Cell> */}
              </CellGroup>
            </>
          )}

          {/* 判断是否已经购买教材 */}
          {!state.paymentOrderDetails.includes('TEXTBOOK') && (
            <>
              {/* <div class={styles.applyTitle}>教材</div> */}
              <CellGroup
                inset
                class={[styles.mlr13, styles.sectionCell]}
                onClick={() => {
                  return
                  // onSelect(state.textBookInfo.goodsId)
                }}
              >
                <Cell border={false}>
                  {{
                    icon: () => (
                      <Checkbox
                        name={state.textBookInfo.goodsId}
                        disabled
                        class={styles.checkbox}
                        ref={(el: any) => (state.checkboxRefs[state.textBookInfo.goodsId] = el)}
                        onClick={(e: Event) => {
                          e.stopPropagation()
                        }}
                        v-slots={{
                          icon: (props: any) => (
                            <Icon
                              class={styles.iconChecked}
                              name={props.checked ? radioCheck : radioDefault}
                            />
                          )
                        }}
                      />
                    ),
                    title: () => (
                      <div class={styles.section}>
                        <Image
                          class={styles.img}
                          src={state.textBookInfo.goodsUrl}
                          onClick={(e: any) => {
                            e.stopPropagation()
                            state.selectGoodsId = state.textBookInfo.goodsId
                            state.currentPrice = state.textBookInfo.currentPrice
                            state.selectGoodsInfo = {}
                            state.goodsStatus = true
                          }}
                        />
                        <div class={styles.sectionContent}>
                          <h2
                            onClick={(e: any) => {
                              e.stopPropagation()
                              state.selectGoodsId = state.textBookInfo.goodsId
                              state.currentPrice = state.textBookInfo.currentPrice
                              state.selectGoodsInfo = {}
                              state.goodsStatus = true
                            }}
                          >
                            {state.textBookInfo.goodsName}
                          </h2>
                          <Tag
                            color="linear-gradient(135deg, #FF8C4A 0%, #FF531C 100%)"
                            textColor="#fff"
                            class={styles.brandName}
                          >
                            {state.textBookInfo.brandName}
                          </Tag>
                          <p class={[styles.model, 'van-multi-ellipsis--l2']}>
                            {state.textBookInfo.description}
                          </p>
                        </div>
                      </div>
                    )
                  }}
                </Cell>
                <Cell>
                  {{
                    title: () => (
                      <div class={styles.extra}>
                        <div class={styles.sectionPrice}>
                          <p class={styles.price}>
                            团购价：
                            <span
                              class={[
                                state.textBookInfo.currentPrice > 0 ? styles.numFont : styles.free
                              ]}
                            >
                              {state.textBookInfo.currentPrice > 0 ? (
                                <>
                                  <span class={styles.numPrefix}>¥ </span>
                                  {moneyFormat(state.textBookInfo.currentPrice)}
                                </>
                              ) : (
                                '免费'
                              )}
                            </span>
                          </p>
                          <p class={styles.originPrice}>
                            原价：
                            <del class={styles.numFont}>
                              ¥ {moneyFormat(state.textBookInfo.originalPrice)}
                            </del>
                          </p>
                        </div>
                      </div>
                    )
                  }}
                </Cell>
              </CellGroup>
            </>
          )}
        </CheckboxGroup>
        <OSticky position="bottom" background="white">
          <div class={styles.paymentContainer}>
            <div class={styles.payemntPrice}>
              <p class={styles.needPrice}>
                支付金额：
                <span class={styles.numFont}>
                  <span>¥ </span>
                  <i style="font-style: normal" id="needPrice"></i>
                </span>
              </p>
              <p class={styles.allPrice}>
                <del class={styles.numFont}>
                  总原价：¥ {moneyFormat(state.orderInfo.originalPrice)}
                </del>
              </p>
            </div>
            <div class={styles.paymentBtn}>
              <Button
                color="linear-gradient(135deg, #FF8C4A 0%, #FF531C 100%)"
                round
                onClick={onSubmit}
              >
                立即提交
              </Button>
            </div>
          </div>
        </OSticky>
        <OPopup v-model:modelValue={state.memberBaoStatus} position="right">
          <MemberBao />
        </OPopup>
        <OPopup v-model:modelValue={state.goodsStatus} position="right" destroy>
          {state.goodsStatus && (
            <GoodsDetail
              id={state.selectGoodsId}
              groupPrice={state.currentPrice}
              goodsInfo={state.selectGoodsInfo}
            />
          )}
        </OPopup>
        <ODialog
          title="提示"
          v-model:show={state.dialogStatus}
          message={state.dialogMessage}
          confirmButtonText={state.dialogOrchestraStatus ? '确认取消' : '继续支付'}
          cancelButtonText="取消订单"
          showCancelButton={!state.dialogOrchestraStatus}
          messageAlign={state.dialogOrchestraStatus ? 'left' : 'center'}
          onConfirm={async () => {
            if (state.dialogOrchestraStatus) {
              try {
                await request.post(
                  '/api-student/userPaymentOrder/cancelPayment/' + state.dialogConfig.orderNo
                )
              } catch {
                //
              }
            } else {
              const paymentConfig = state.dialogConfig.paymentConfig
              router.push({
                path: '/orderDetail',
                query: {
                  pm: 1, // h5乐团报名
                  config: JSON.stringify({
                    ...paymentConfig.paymentConfig,
                    paymentType: paymentConfig.paymentType
                  }),
                  orderNo: paymentConfig.orderNo
                }
              })
            }
          }}
          onCancel={async () => {
            try {
              await request.post(
                '/api-student/userPaymentOrder/cancelPayment/' + state.dialogConfig.orderNo
              )
            } catch {
              //
            }
          }}
        />
      </>
    )
  }
})