studytour-front/pages_order/order/orderPay/index.vue

<template>
  <view class="page__view">
		<navbar leftClick @leftClick="$utils.navigateBack" >
      <view class="flex">
        <view>待支付</view>
        <view>
          <view>剩余</view>
          <!-- todo -->
          <view>10:00</view>
        </view>
        <view>后关闭</view>
      </view>
    </navbar>

    <view class="main">

      <productCard :data="detail"></productCard>

      <orderInfoView :data="detail"></orderInfoView>

      <view class="notice">
        <view class="notice-header">下单须知</view>
        <view class="notice-content">
          <!-- todo: check key -->
				  <uv-parse :content="configList['order_instructions']"></uv-parse>
        </view>
      </view>

    </view>
  
		<view class="bottom">
      <view class="agreement">
				<uv-checkbox-group
					v-model="checkboxValue"
					shape="circle"
				>
					<uv-checkbox
						size="40rpx"
						icon-size="40rpx"
						activeColor="#00A9FF"
						:name="1"
					></uv-checkbox>
				</uv-checkbox-group>
				<view class="desc">
          我已阅读并同意
					<!-- todo: 替换配置项key -->
					<text class="highlight" @click="$refs.modal.open('config_agreement', '退订政策')">《退订政策》</text>
					<!-- todo: 替换配置项key -->
					<text class="highlight" @click="$refs.modal.open('config_privacy', '合同范本')">《合同范本》</text>
					<!-- todo: 替换配置项key -->
					<text class="highlight" @click="$refs.modal.open('config_privacy', '预订须知')">《预订须知》</text>
					<!-- todo: 替换配置项key -->
					<text class="highlight" @click="$refs.modal.open('config_privacy', '安全提示')">《安全提示》</text>
				</view>
			</view>
      <view class="flex bar">
        <button plain class="flex flex-column btn btn-simple" open-type="contact">
          <image class="icon" src="@/pages_order/static/product/icon-service.png" mode="widthFix"></image>
          <view>联系客服</view>
        </button>
        <view class="col flex price">
          <view class="price-label">
            合计
          </view>
          <view class="price-unit">¥</view>
          <view class="price-value">
            {{ totalPrice }}
          </view>
        </view>
        <button class="col btn btn-primary" @click="onPay">立即支付</button>
      </view>
    </view>

		<agreementModal ref="modal" @confirm="onConfirmAgreement"></agreementModal>

  </view>
</template>

<script>
	import { mapState } from 'vuex'

  import productCard from '@/pages_order/order/components/productCard.vue'
  import orderInfoView from '@/pages_order/order/components/orderInfoView.vue'
	import agreementModal from '@/pages_order/components/agreementModal.vue'

  export default {
    components: {
      productCard,
      orderInfoView,
      agreementModal,
    },
    data() {
      return {
        detail: {},
      }
    },
    computed: {
			...mapState(['configList', 'userInfo', 'orderInfo']),
      productPackage() {
        const { time, product } = this.detail
        const { timeOptions } = product || {}

        return timeOptions?.find?.(item => item.id === time) || {}
      },
			totalPrice() {
        const { adults, teenager, child, coupon, couponInfo } = this.detail

        const { adultsPrice, teenagerPrice, childPrice } = this.productPackage

        let total = 0
        
        adults && (total += adults * (adultsPrice || 0))
        teenager && (total += teenager * (teenagerPrice || 0))
        child && (total += child * (childPrice || 0))

        coupon && (total -= (couponInfo?.price || 0))

				return total
			},
    },
    onLoad() {
      // console.log('orderInfo', this.orderInfo)
      // this.detail = this.orderInfo
      // todo: check fetch by id?
      this.fetchOrderDetail()
    },
    onPullDownRefresh() {
      this.fetchOrderDetail()
    },
    methods: {
      async fetchOrderDetail() {
          try {

            this.detail = {
              product: {
                id: '001',
                image: new Array(6).fill('/static/image/temp-20.png').join(','),
                name: '新疆天山行7/9日丨醉美伊犁&吐鲁番双套餐',
                desc: '每天车程4小时内，含一程高铁丨喀拉峻草原、夏塔古道、昭苏天马、赛里木湖、昭苏油菜花、伊犁薰衣草丨吐鲁番坎儿井&火焰山',
                tags: ['坝上草原', '自然探索', '户外探索', '亲子游玩'],
                currentPrice: 688.99,
                originalPrice: 1200,
                registered: 4168,
                timeOptions: [
                  {
                    id: '0011',
                    startDate: '08/25',
                    endDate: '09/01',
                    currentPrice: 1200.99,
                    originalPrice: 2300,
                    adultsPrice: 2400,
                    teenagerPrice: 1800,
                    childPrice: 1200.99,
                  },
                  {
                    id: '0012',
                    startDate: '09/02',
                    endDate: '09/11',
                    currentPrice: 1200.99,
                    originalPrice: 2300,
                    adultsPrice: 2400,
                    teenagerPrice: 1800,
                    childPrice: 1200.99,
                  },
                  {
                    id: '0013',
                    startDate: '09/12',
                    endDate: '09/19',
                    currentPrice: 1200.99,
                    originalPrice: 2300,
                    adultsPrice: 2400,
                    teenagerPrice: 1800,
                    childPrice: 1200.99,
                  },
                ],
                itineraryHighlights: `
                  <p>
                    <img style="width: 100%;" src="/static/image/temp-31.png" mode="widthFix"/>
                    <img style="width: 100%;" src="/static/image/temp-32.png" mode="widthFix"/>
                    <img style="width: 100%;" src="/static/image/temp-33.png" mode="widthFix"/>
                    <img style="width: 100%;" src="/static/image/temp-34.png" mode="widthFix"/>
                    <img style="width: 100%;" src="/static/image/temp-35.png" mode="widthFix"/>
                  </p>
                `,
                courseObjectives: `
                  <p style="font-size: 36rpx;">
                    课程目标
                  <p>
                `,
                itineraryDetail: `
                  <p style="font-size: 36rpx;">
                    详细行程
                  <p>
                `,
              },
              time: "0012",
              adults: 2,
              teenager: 1,
              child: 1,
              members: [
                {
                  id: "001",
                  idNo: "430223********9999",
                  isDefault: false,
                  isSelected: true,
                  name: "李梓发",
                  type: 0,
                },
                {
                  id: "002",
                  idNo: "430223********9999",
                  isDefault: false,
                  isSelected: true,
                  name: "吴彦谦",
                  type: 0,
                },
                {
                  id: "003",
                  idNo: "430223********9999",
                  isDefault: false,
                  isSelected: true,
                  name: "冯云",
                  type: 1,
                },
                {
                  id: "004",
                  idNo: "430223********9999",
                  isDefault: false,
                  isSelected: true,
                  name: "冯思钗",
                  type: 2,
                },
              ],
              coupon: "001",
              discount: 88,
              invoice: null,
              name: "测试",
              phone: "13345678910",
              orderNo: 'BH872381728321983929',
              createTime: '2025-04-28 08:14',
              status: 0,
            }

            console.log('orderInfo', this.detail)

            // todo: check fetch by id?
            // this.detail = await this.$fetch('queryOrderById', { id: this.id })

          } catch (err) {

          }

          uni.stopPullDownRefresh()
      },
      async onPay() {
        try {
     
          // todo: fetch pay
          
          uni.showToast({
            title: '支付成功',
            icon: 'none'
          })
          
          setTimeout(() => {
            // todo: check → jump to order list page ?
            uni.reLaunch({
              url: `/pages_order/order/orderList/index`
            });
          }, 700)
        } catch (err) {

        }
      },
    },
  }
</script>

<style scoped lang="scss">

  @import '../styles/style.scss';

  .bottom {
    .bar {
      .price {
        justify-content: flex-start;
        column-gap: 8rpx;
        
        &-label {
          font-size: 24rpx;
          color: #626262;
        }

        &-unit,
        &-value {
          font-weight: 500;
          color: #FF4800;
        }

        &-unit {
          font-size: 24rpx;
        }

        &-value {
          font-size: 40rpx;
        }
      }

      .btn-simple {
        flex: none;
        width: auto;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 22rpx;
        line-height: 1.1;
        color: #999999;
        border: none;
        border-radius: unset;

        .icon {
          width: 52rpx;
          height: auto;
          margin-bottom: 4rpx;
        }
      }
    }
  }
  
</style>