13 changed files with 366 additions and 89 deletions
-
11config/api.js
-
2manifest.json
-
8pages.json
-
62pages/exercises/examSubjiect1/examResultsOne.vue
-
8pages/exercises/myStudy/comp/statistics.vue
-
107pages/exercises/myStudy/myStudy.vue
-
204pages/vip/paymentOrder/paymentOrder.vue
-
13pages/vip/vipEntry/comp/commentItem.vue
-
40pages/vip/vipEntry/vipEntry.vue
-
BINstatic/images/jiaofei_wxIphone@2x.png
-
BINstatic/images/jiaofei_zfbIphone@2x.png
-
BINstatic/images/jiaofei_zhifu_selectIphone@2x.png
-
BINstatic/images/jiaofei_zhifu_unselectIphone@2x.png
@ -0,0 +1,204 @@ |
|||
<template> |
|||
<view class="payWay"> |
|||
<view class="card"> |
|||
<view class="name">{{ orderName }}</view> |
|||
<view class="price"><text>￥</text> 1000</view> |
|||
</view> |
|||
|
|||
<view class="card"> |
|||
<view class="h1">请选择支付方式</view> |
|||
<view class="zfb" @click="changePayWay(2)"> |
|||
<view class="leftCon"> |
|||
<view class="icon"> |
|||
<image src="@/static/images/jiaofei_zfbIphone@2x.png" mode=""></image> |
|||
</view> |
|||
<view class="text"> |
|||
支付宝支付 |
|||
</view> |
|||
</view> |
|||
<view class="rightStatusIcon"> |
|||
<image src="@/static/images/jiaofei_zhifu_selectIphone@2x.png" mode="" v-if="payWay==2"> |
|||
</image> |
|||
<image src="@/static/images/jiaofei_zhifu_unselectIphone@2x.png" mode="" v-else></image> |
|||
</view> |
|||
</view> |
|||
<view class="zfb" @click="changePayWay(1)"> |
|||
<view class="leftCon"> |
|||
<view class="icon"> |
|||
<image src="@/static/images/jiaofei_wxIphone@2x.png" mode=""></image> |
|||
</view> |
|||
<view class="text"> |
|||
微信支付 |
|||
</view> |
|||
</view> |
|||
<view class="rightStatusIcon"> |
|||
<image src="@/static/images/jiaofei_zhifu_selectIphone@2x.png" mode="" v-if="payWay==1"> |
|||
</image> |
|||
<image src="@/static/images/jiaofei_zhifu_unselectIphone@2x.png" mode="" v-else></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="footBox"> |
|||
<view class="btn border" @click="cancelPay" >取消本次支付</view> |
|||
<view class="btn" @click="submitPay">确认支付</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref } from 'vue' |
|||
import { createPrepaidApi, memberVoicePage } from '@/config/api.js' |
|||
import carStore from '@/store/modules/car.js' |
|||
import { |
|||
onLoad, |
|||
} from "@dcloudio/uni-app" |
|||
|
|||
let usecarStore = carStore() |
|||
const payWay = ref(1) |
|||
|
|||
function cancelPay() { |
|||
uni.navigateBack() |
|||
} |
|||
|
|||
function changePayWay(val) { |
|||
payWay.value = val |
|||
} |
|||
|
|||
function submitPay() { |
|||
console.log('去支付吧') |
|||
} |
|||
|
|||
let memberGradeId = 1 |
|||
async function createPrepaidApiFn() { |
|||
let obj = { |
|||
"memberGradeId": memberGradeId, |
|||
"payType": 2, |
|||
"returnUrl": "", |
|||
"source": 1 |
|||
} |
|||
const {data: res} = await createPrepaidApi(obj) |
|||
// vipItemData.value = res |
|||
console.log(res) |
|||
} |
|||
createPrepaidApiFn() |
|||
let orderName = ref('') |
|||
let price = ref(0) |
|||
onLoad((option)=>{ |
|||
if(option.id) memberGradeId = option.id |
|||
if(option.name) orderName.value = option.name |
|||
if(option.price) orderName.value = option.price |
|||
}) |
|||
|
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.payWay { |
|||
padding: 0 32rpx; |
|||
background: #F6F7FA; |
|||
min-height: 100vh; |
|||
overflow: hidden; |
|||
.h1 { |
|||
padding: 20rpx 0 20rpx 10rpx; |
|||
font-weight: 700; |
|||
} |
|||
.card { |
|||
border-radius: 20rpx; |
|||
background-color: #fff; |
|||
padding: 20rpx; |
|||
margin: 40rpx 0; |
|||
overflow: hidden; |
|||
.price { |
|||
font-size: 56rpx; |
|||
font-weight: 700; |
|||
text-align: center; |
|||
padding-bottom: 20rpx; |
|||
text { |
|||
font-size: 30rpx; |
|||
margin-right: -10rpx; |
|||
} |
|||
} |
|||
.name { |
|||
font-weight: 400; |
|||
font-size: 28rpx; |
|||
color: #CCCCCC; |
|||
padding: 24rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
.zfb { |
|||
background-color: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 0 16px; |
|||
height: 110rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 20rpx; |
|||
|
|||
.leftCon { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.icon { |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
|
|||
image { |
|||
display: block; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
|
|||
.text { |
|||
font-size: 32rpx; |
|||
color: #333; |
|||
margin: 0 10rpx 0 20rpx; |
|||
} |
|||
|
|||
.recommendIcon { |
|||
width: 64rpx; |
|||
height: 34rpx; |
|||
|
|||
image { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: block; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.rightStatusIcon { |
|||
width: 42rpx; |
|||
height: 42rpx; |
|||
|
|||
image { |
|||
display: block; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.footBox { |
|||
display: flex; |
|||
padding: 32rpx 0; |
|||
justify-content: space-between; |
|||
.btn { |
|||
width: 48%; |
|||
height: 98rpx; |
|||
background: #2168FC; |
|||
border-radius: 16rpx; |
|||
color: #fff; |
|||
text-align: center; |
|||
line-height: 98rpx; |
|||
&.border { |
|||
background: none; |
|||
border: 1px solid #2168FC; |
|||
color: #2168FC; |
|||
|
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: 48 | Height: 48 | Size: 1.9 KiB |
|
After Width: 48 | Height: 48 | Size: 2.1 KiB |
|
After Width: 42 | Height: 42 | Size: 2.1 KiB |
|
After Width: 43 | Height: 43 | Size: 4.4 KiB |
Write
Preview
Loading…
Cancel
Save
Reference in new issue