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.
169 lines
3.1 KiB
169 lines
3.1 KiB
<template>
|
|
<view class="paying-box">
|
|
|
|
<text class="p-text">支付金额</text>
|
|
|
|
<text class="p-total">￥{{props.payTotal||"0.00"}}</text>
|
|
|
|
<view class="p-zhichi">
|
|
<view class="p-line"></view>
|
|
<text class="p-words">支持以下付款方式</text>
|
|
<view class="p-line"></view>
|
|
</view>
|
|
|
|
<view class="p-icons">
|
|
<image class="p-image-pay-icon" src="/static/pay/wx-icon.png" mode="widthFix" />
|
|
<image class="p-image-pay-icon" src="/static/pay/zfb-icon.png" mode="widthFix" />
|
|
</view>
|
|
|
|
<image class="p-image-pay-picture" src="/static/pay/pay-picture.png" mode="widthFix" />
|
|
|
|
<text class="p-tips">请将付款码对准右下方扫码口</text>
|
|
|
|
<view class="p-btn" @click="handle_clickCard">
|
|
<image class="pb-image" src="/static/pay/pay-vip-icon.png" mode="aspectFit" />
|
|
<text class="pb-text">储值卡支付</text>
|
|
</view>
|
|
|
|
|
|
<view class="p-user">
|
|
<text class="p-txt">猫星人（18316553589）</text>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
//触发自定义事件
|
|
const emits = defineEmits(['clickVipCard'])
|
|
const props = defineProps({
|
|
payTotal: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
})
|
|
|
|
const handle_clickCard = () => {
|
|
console.log("handle_clickCard")
|
|
emits("clickVipCard", "false")
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.paying-box {
|
|
width: 750rpx;
|
|
// height: 500rpx;
|
|
@include ctf(center);
|
|
flex-direction: column;
|
|
|
|
.p-text {
|
|
margin-top: 161rpx;
|
|
font-weight: 600;
|
|
font-size: 22.22rpx;
|
|
color: #1A1A1A;
|
|
|
|
}
|
|
|
|
.p-total {
|
|
margin-top: 30.67rpx;
|
|
font-weight: 600;
|
|
font-size: 55.56rpx;
|
|
color: #1A1A1A;
|
|
}
|
|
|
|
.p-zhichi{
|
|
margin-top: 132.67rpx;
|
|
@include ctf(center);
|
|
flex-direction: row;
|
|
.p-line{
|
|
margin: 0 37.5rpx;
|
|
width: 200rpx;
|
|
height: 2rpx;
|
|
background: #E8E8E8;
|
|
}
|
|
.p-words {
|
|
font-weight: 700;
|
|
font-size: 22.22rpx;
|
|
color: #1A1A1A;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
|
|
.p-icons {
|
|
margin-top: 19.67rpx;
|
|
@include ctf(center);
|
|
flex-direction: row;
|
|
|
|
// width: 750rpx;
|
|
.p-image-pay-icon {
|
|
width: 41.67rpx;
|
|
height: 41.67rpx;
|
|
margin: 0 9rpx;
|
|
}
|
|
}
|
|
|
|
.p-image-pay-picture {
|
|
margin-top: 68rpx;
|
|
width: 138.89rpx;
|
|
height: 290.97rpx;
|
|
}
|
|
|
|
.p-tips {
|
|
margin-top: 50rpx;
|
|
font-weight: 800;
|
|
font-size: 22.22rpx;
|
|
color: #1A1A1A;
|
|
}
|
|
|
|
.p-btn {
|
|
margin-top: 107rpx;
|
|
@include ctf(center);
|
|
flex-direction: row;
|
|
width: 240.97rpx;
|
|
height: 81.94rpx;
|
|
background: #009874;
|
|
box-shadow: 0 0.69rpx 20.83rpx 0 #00987430;
|
|
border-radius: 13.89rpx;
|
|
|
|
.pb-image {
|
|
width: 41.9rpx;
|
|
height: 31.25rpx;
|
|
}
|
|
|
|
.pb-text {
|
|
margin-left: 17rpx;
|
|
font-weight: 800;
|
|
font-size: 22.22rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
.p-user {
|
|
margin-top: 92rpx;
|
|
margin-left: 67rpx;
|
|
margin-bottom: 92rpx;
|
|
width: 750rpx;
|
|
.p-txt {
|
|
font-weight: 400;
|
|
font-size: 22.22rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cancel-button {
|
|
@include ctf(center);
|
|
width: 131.94rpx;
|
|
height: 51.39rpx;
|
|
border: 0.69rpx solid #999999;
|
|
border-radius: 6.94rpx;
|
|
|
|
.v-text {
|
|
@include flcw(33.33upx, 46.53upx, #fff, 500);
|
|
font-weight: 500;
|
|
font-size: 16.67rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
</style>
|