|
@@ -1,5 +1,5 @@
|
|
|
import OHeader from '@/components/o-header'
|
|
|
-import { defineComponent, reactive } from 'vue'
|
|
|
+import { defineComponent, onMounted, reactive } from 'vue'
|
|
|
import styles from './order-detail.module.less'
|
|
|
import Addres from './component/addres'
|
|
|
import OSticky from '@/components/o-sticky'
|
|
@@ -7,6 +7,9 @@ import { Button, Cell, CellGroup, Image, Popup, Tag } from 'vant'
|
|
|
import Payment from '@/views/adapay/payment'
|
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
|
import OQrcode from '@/components/o-qrcode'
|
|
|
+import request from '../request-music'
|
|
|
+import item from '@/student/coupons/item'
|
|
|
+import { moneyFormat } from '@/helpers/utils'
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'order-detail',
|
|
@@ -15,11 +18,35 @@ export default defineComponent({
|
|
|
const router = useRouter()
|
|
|
const state = reactive({
|
|
|
paymentStatus: false,
|
|
|
- showQrcode: false
|
|
|
+ showQrcode: false,
|
|
|
+ orderNo: route.query.orderNo,
|
|
|
+ orderInfo: {} as any, // 订单信息
|
|
|
+ goodsInfos: [] as any // 订单信息列表
|
|
|
})
|
|
|
+
|
|
|
+ const getOrderDetails = async () => {
|
|
|
+ try {
|
|
|
+ const { data } = await request.get('/api-student/userPaymentOrder/detail/' + state.orderNo)
|
|
|
+ console.log(data)
|
|
|
+ const goodsInfos = data.goodsInfos || []
|
|
|
+ state.orderInfo = data
|
|
|
+ goodsInfos.forEach((item: any) => {
|
|
|
+ const img = item.goodsUrl ? item.goodsUrl.split(',')[0] : ''
|
|
|
+ item.goodsUrl = img
|
|
|
+ })
|
|
|
+ state.goodsInfos = goodsInfos
|
|
|
+ } catch {
|
|
|
+ //
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
const onSubmit = () => {
|
|
|
state.paymentStatus = true
|
|
|
}
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ getOrderDetails()
|
|
|
+ })
|
|
|
return () => (
|
|
|
<>
|
|
|
<OHeader />
|
|
@@ -29,42 +56,26 @@ export default defineComponent({
|
|
|
</div>
|
|
|
|
|
|
<CellGroup style={{ margin: 0 }}>
|
|
|
- <Cell class={styles.cellItem} center>
|
|
|
- {{
|
|
|
- icon: () => (
|
|
|
- <Image
|
|
|
- class={styles.img}
|
|
|
- src="https://daya.ks3-cn-beijing.ksyuncs.com/12/1670231208704.png"
|
|
|
- />
|
|
|
- ),
|
|
|
- title: () => (
|
|
|
- <div class={styles.goodsContent}>
|
|
|
- <h2>长笛标准配置</h2>
|
|
|
- <Tag type="primary">品牌型号</Tag>
|
|
|
- <p class={styles.goodsNum}>x 1</p>
|
|
|
- </div>
|
|
|
- ),
|
|
|
- value: () => <span class={styles.cellPrice}>1212</span>
|
|
|
- }}
|
|
|
- </Cell>
|
|
|
- <Cell class={styles.cellItem} center>
|
|
|
- {{
|
|
|
- icon: () => (
|
|
|
- <Image
|
|
|
- class={styles.img}
|
|
|
- src="https://daya.ks3-cn-beijing.ksyuncs.com/12/1670231208704.png"
|
|
|
- />
|
|
|
- ),
|
|
|
- title: () => (
|
|
|
- <div class={styles.goodsContent}>
|
|
|
- <h2>长笛标准配置长笛标准配置</h2>
|
|
|
- <Tag type="primary">品牌型号</Tag>
|
|
|
- <p class={styles.goodsNum}>x 1</p>
|
|
|
- </div>
|
|
|
- ),
|
|
|
- value: () => <span class={styles.cellPrice}>1212</span>
|
|
|
- }}
|
|
|
- </Cell>
|
|
|
+ {state.goodsInfos &&
|
|
|
+ state.goodsInfos.map((goods: any) => (
|
|
|
+ <Cell class={styles.cellItem} center>
|
|
|
+ {{
|
|
|
+ icon: () => <Image class={styles.img} src={goods.goodsUrl} />,
|
|
|
+ title: () => (
|
|
|
+ <div class={styles.goodsContent}>
|
|
|
+ <h2>{goods.goodsName}</h2>
|
|
|
+ <Tag type="primary">{goods.brandName}</Tag>
|
|
|
+ <p class={styles.goodsNum}>x 1</p>
|
|
|
+ </div>
|
|
|
+ ),
|
|
|
+ value: () => (
|
|
|
+ <span class={styles.cellPrice}>
|
|
|
+ {goods.currentPrice > 0 ? moneyFormat(goods.currentPrice) : '赠送'}
|
|
|
+ </span>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Cell>
|
|
|
+ ))}
|
|
|
</CellGroup>
|
|
|
</div>
|
|
|
|
|
@@ -72,7 +83,7 @@ export default defineComponent({
|
|
|
<div class={styles.paymentContainer}>
|
|
|
<div class={styles.payemntPrice}>
|
|
|
<p class={styles.needPrice}>
|
|
|
- 共需支付:<span>¥3,860.00</span>
|
|
|
+ 共需支付:<span>¥{moneyFormat(state.orderInfo.currentPrice)}</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class={styles.paymentBtn}>
|
|
@@ -97,34 +108,83 @@ export default defineComponent({
|
|
|
style={{ minHeight: '30%' }}
|
|
|
>
|
|
|
<Payment
|
|
|
- paymentConfig={{}}
|
|
|
+ paymentConfig={state.orderInfo}
|
|
|
onClose={() => (state.paymentStatus = false)}
|
|
|
onBackOut={() => {
|
|
|
console.log('back')
|
|
|
// router.back()
|
|
|
}}
|
|
|
+ onConfirm={(val: any) => {
|
|
|
+ const config: any = route.query.config ? JSON.parse(route.query.config as any) : {}
|
|
|
+ // let a = {
|
|
|
+ // paymentChannel: null,
|
|
|
+ // merOrderNo: '1607581937480556546',
|
|
|
+ // subject: '华为+HUAWEI+P20+1,JM测试数据511,乐器保养',
|
|
|
+ // body: '华为+HUAWEI+P20+1,JM测试数据511,乐器保养',
|
|
|
+ // addition: null,
|
|
|
+ // price: 3798,
|
|
|
+ // bankType: null,
|
|
|
+ // code: null,
|
|
|
+ // expirationTime: '2022-12-27+12:09:36',
|
|
|
+ // wxAppId: 'wx8654c671631cfade',
|
|
|
+ // userId: null
|
|
|
+ // }
|
|
|
+ if (val.payCode === 'payResult') {
|
|
|
+ router.push({
|
|
|
+ path: '/payResult',
|
|
|
+ query: {
|
|
|
+ pay_channel: val.pay_channel,
|
|
|
+ wxAppId: config.wxAppId,
|
|
|
+ body: config.body,
|
|
|
+ price: config.price
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ router.push({
|
|
|
+ path: '/payCenter',
|
|
|
+ query: {
|
|
|
+ pay_channel: val.pay_channel,
|
|
|
+ wxAppId: config.wxAppId,
|
|
|
+ body: config.body,
|
|
|
+ price: config.price
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }}
|
|
|
/>
|
|
|
</Popup>
|
|
|
|
|
|
<Popup
|
|
|
v-model:show={state.showQrcode}
|
|
|
- position="bottom"
|
|
|
- style={{ background: 'transparent' }}
|
|
|
+ // position="bottom"
|
|
|
+ style={{ background: 'transparent', overflow: 'initial' }}
|
|
|
safeAreaInsetBottom={true}
|
|
|
>
|
|
|
<div class={styles.codeContainer}>
|
|
|
+ <i class={styles.codeClose} onClick={() => (state.showQrcode = false)}></i>
|
|
|
<div class={styles.codeImg}>
|
|
|
<div class={styles.codeContent}>
|
|
|
<h2 class={styles.codeTitle}>乐团报名</h2>
|
|
|
- <div class={styles.codeName}>武汉小学2022上学期团武汉小学</div>
|
|
|
+ <div class={styles.codeName}>请截图下方二维码 登录支付宝扫码支付</div>
|
|
|
|
|
|
<div class={styles.codeQr}>
|
|
|
<OQrcode text="http://ponline.dayaedu.com/" size={'400'} />
|
|
|
</div>
|
|
|
<div style={{ textAlign: 'center' }}>
|
|
|
- <span class={styles.codeBtnText}>扫描上方二维码完成资料填写</span>
|
|
|
+ <span class={styles.codeBtnText}>请在30分钟内扫码支付</span>
|
|
|
+ </div>
|
|
|
+ <div class={styles.codeTips}>
|
|
|
+ <div class={styles.tipsTitle}>使用说明:</div>
|
|
|
+ <div class={styles.tipsContent}>
|
|
|
+ 1.长按二维码保存图片到相册(或截屏保存到相册)
|
|
|
+ <br />
|
|
|
+ 2.打开支付宝扫一扫
|
|
|
+ <br />
|
|
|
+ 3.选择相册中的二维码
|
|
|
+ <br />
|
|
|
+ 4.请在30分钟内扫码支付
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class={styles.codeTips}>二维码将在两小时后失效,请及时登记</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|