110 lines
2.5 KiB
Vue
110 lines
2.5 KiB
Vue
<template>
|
||
<uni-popup type='bottom' ref='popupRef' :mask-click='false' @touchmove.stop.prevent=''>
|
||
<view class='popup-content c-flex-column'>
|
||
<view class='c-flex-row'>
|
||
<image :src='assetsUrl("ic_back.png")' @click.stop='close()' />
|
||
<text>选择支付方式</text>
|
||
</view>
|
||
|
||
<view class='c-flex-row' @click.stop='doPayment(PAYMENT_TYPE_WECHAT)'>
|
||
<image :src='assetsUrl("ic_wechat.png")' />
|
||
<text>微信支付</text>
|
||
<image :src='assetsUrl(currentType===PAYMENT_TYPE_WECHAT?"ic_checkbox_active.png":"ic_checkbox_normal.png")' />
|
||
</view>
|
||
<view class='divider' style='margin: 40rpx 0' />
|
||
<view class='c-flex-row' @click.stop='doPayment(PAYMENT_TYPE_BALANCE)'>
|
||
<image :src='assetsUrl("ic_balance.png")' />
|
||
<text>余额（剩余￥100）</text>
|
||
<image :src='assetsUrl(currentType===PAYMENT_TYPE_BALANCE?"ic_checkbox_active.png":"ic_checkbox_normal.png")' />
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</template>
|
||
|
||
<script lang='ts' setup>
|
||
import { assetsUrl } from '@/utils/assets';
|
||
|
||
const popupRef = ref();
|
||
const PAYMENT_TYPE_WECHAT = 0;
|
||
const PAYMENT_TYPE_BALANCE = 1;
|
||
const currentType = ref(PAYMENT_TYPE_WECHAT);
|
||
|
||
const emits = defineEmits(['change']);
|
||
const show = () => {
|
||
popupRef.value.open();
|
||
};
|
||
|
||
const close = () => {
|
||
popupRef.value.close();
|
||
};
|
||
|
||
const doPayment = (paymentType: number) => {
|
||
emits('change', paymentType);
|
||
currentType.value = paymentType;
|
||
switch (paymentType) {
|
||
case PAYMENT_TYPE_WECHAT:
|
||
console.log('PAYMENT_TYPE_WECHAT');
|
||
break;
|
||
case PAYMENT_TYPE_BALANCE:
|
||
console.log('PAYMENT_TYPE_BALANCE');
|
||
break;
|
||
}
|
||
close();
|
||
};
|
||
|
||
defineExpose({
|
||
show
|
||
});
|
||
</script>
|
||
|
||
<style lang='scss' scoped>
|
||
.popup-content {
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
padding: 38rpx 45rpx 140rpx 45rpx;
|
||
|
||
view:nth-of-type(1) {
|
||
display: flex;
|
||
margin-bottom: 70rpx;
|
||
position: relative;
|
||
|
||
image {
|
||
width: 35rpx;
|
||
height: 35rpx;
|
||
align-self: flex-start;
|
||
}
|
||
|
||
text {
|
||
font-weight: bold;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
view:nth-of-type(n+2) {
|
||
image:nth-of-type(1) {
|
||
width: 47rpx;
|
||
height: 47rpx;
|
||
}
|
||
|
||
text {
|
||
align-self: center;
|
||
flex: 1;
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
margin-left: 23rpx;
|
||
}
|
||
|
||
image:nth-of-type(2) {
|
||
width: 35rpx;
|
||
height: 35rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|