普兆健康管家前端代码仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

261 lines
5.8 KiB

<template>
<view>
<uv-popup ref="popup" mode="bottom" bgColor="none" >
<view class="popup__view">
<view class="flex header">
<view class="title">支付订单</view>
<button class="btn" @click="close">关闭</button>
</view>
<view class="main">
<view class="section flex flex-column info">
<view class="info-title">{{ orderData.title }}</view>
<view class="flex info-amount">¥<text class="highlight">{{ orderData.amount }}</text></view>
</view>
<view class="section flex payment">
<view class="flex">
<image class="payment-icon" src="@/pages_order/static/order/icon-wx.png" mode="widthFix"></image>
<view class="payment-text">微信</view>
</view>
<view>
<uv-radio-group
:value="1"
shape="circle"
size="36rpx"
iconSize="36rpx"
activeColor="#7451DE"
>
<uv-radio :name="1"></uv-radio>
</uv-radio-group>
</view>
</view>
<view class="section agreement">
<uv-checkbox-group
v-model="checkboxValue"
shape="circle"
>
<uv-checkbox
size="36rpx"
icon-size="36rpx"
activeColor="#7451DE"
:name="1"
></uv-checkbox>
</uv-checkbox-group>
<view class="desc">
我已阅读并同意
<!-- todo: 替换配置项key -->
<text class="highlight" @click="$refs.modal.open('config_privacy', '应用内支付用户协议')">《应用内支付用户协议》</text>
<!-- todo: 替换配置项key -->
<text class="highlight" @click="$refs.modal.open('config_agreement', '支付与隐私的声明')">《支付与隐私的声明》</text>
</view>
</view>
</view>
<view class="flex footer">
<button class="flex btn btn-cancel" @click="onCancel">暂不支付</button>
<button class="flex btn btn-pay" @click="onPay">支付</button>
</view>
</view>
</uv-popup>
<agreementModal ref="modal" @confirm="onConfirmAgreement"></agreementModal>
</view>
</template>
<script>
export default {
data() {
return {
orderData: {}
}
},
methods: {
open(data) {
const {
title,
orderId,
amount,
} = data
this.orderData = {
title,
orderId,
amount,
}
this.$refs.popup.open()
console.log('orderData', this.orderData)
},
close() {
this.$refs.popup.close()
},
onCancel() {
// todo: jump to order list page?
this.close()
},
onConfirmAgreement(confirm) {
if (confirm) {
this.checkboxValue = [1]
} else {
this.checkboxValue = []
}
},
onPay() {
// todo: pay
// todo: jump to order list page
this.$emit('submitted')
},
},
}
</script>
<style lang="scss" scoped>
.popup__view {
width: 100vw;
display: flex;
flex-direction: column;
box-sizing: border-box;
background: #FFFFFF;
border-top-left-radius: 32rpx;
border-top-right-radius: 32rpx;
}
.header {
position: relative;
width: 100%;
padding: 24rpx 0;
box-sizing: border-box;
border-bottom: 2rpx solid #EEEEEE;
.title {
font-family: PingFang SC;
font-weight: 500;
font-size: 34rpx;
line-height: 1.4;
color: #181818;
}
.btn {
font-family: PingFang SC;
font-weight: 500;
font-size: 32rpx;
line-height: 1.4;
color: #8B8B8B;
position: absolute;
top: 26rpx;
left: 40rpx;
}
}
.main {
padding: 64rpx 40rpx;
}
.section {
margin-top: 24rpx;
}
.info {
row-gap: 8rpx;
&-title {
font-family: PingFang SC;
font-weight: 400;
font-size: 28rpx;
line-height: 1.4;
color: #000000;
}
&-amount {
font-family: PingFang SC;
font-weight: 500;
font-size: 24rpx;
line-height: 1.4;
color: #7451DE;
.highlight {
font-size: 64rpx;
margin-left: 8rpx;
}
}
}
.payment {
justify-content: space-between;
box-sizing: border-box;
padding: 24rpx 32rpx;
background: #FAFAFF;
box-shadow: -4rpx -4rpx 20rpx 0 #FFFFFFC4,
4rpx 4rpx 20rpx 0 #AAAACC1F,
2rpx 2rpx 4rpx 0 #AAAACC40,
-2rpx -2rpx 4rpx 0 #FFFFFF;
border-radius: 32rpx;
&-icon {
width: 56rpx;
height: auto;
}
&-text {
margin-left: 16rpx;
font-family: PingFang SC;
font-weight: 400;
font-size: 28rpx;
line-height: 1.5;
color: #252545;
}
}
.agreement {
margin-top: 24rpx;
display: flex;
.desc {
font-family: PingFang SC;
font-size: 24rpx;
font-weight: 400;
line-height: 1.4;
color: #8B8B8B;
}
.highlight {
color: $uni-color;
}
}
.footer {
width: 100%;
// todo:check
// height: 214rpx;
padding: 32rpx 40rpx;
box-sizing: border-box;
border-top: 2rpx solid #F1F1F1;
column-gap: 32rpx;
.btn {
flex: 1;
font-family: PingFang SC;
font-weight: 500;
font-size: 36rpx;
line-height: 1.4;
border-radius: 41rpx;
&-cancel {
padding: 14rpx 0;
color: #252545;
border: 2rpx solid #252545;
}
&-pay {
padding: 16rpx 0;
color: #FFFFFF;
background-image: linear-gradient(to right, #4B348F, #845CFA);
}
}
}
</style>