93 lines
1.9 KiB
Vue
93 lines
1.9 KiB
Vue
<template>
|
|
<uni-popup ref="popup" type="center">
|
|
<view class="c-wrapper" :style="{ '--v-primary': calcThemeColor() }">
|
|
<view class="c-title">会员余额支付</view>
|
|
<view class="c-amount">
|
|
<text>金额</text>
|
|
￥{{ vdata.amount }}
|
|
</view>
|
|
<view class="but-wrapper">
|
|
<view class="cancel" @tap="close">取消</view>
|
|
<view class="confirm" @tap="confirm">确认支付</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive } from "vue"
|
|
import { calcThemeColor } from "@/util/member.js"
|
|
const vdata = reactive({})
|
|
const popup = ref(null)
|
|
const emits = defineEmits(['pay'])
|
|
const open = (amount) => {
|
|
vdata.amount = amount
|
|
popup.value.open()
|
|
}
|
|
const close = () => popup.value.close()
|
|
const confirm = () => {
|
|
emits('pay')
|
|
}
|
|
defineExpose({ open, close })
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.c-wrapper {
|
|
width: 650rpx;
|
|
height: 508rpx;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
|
|
.c-title {
|
|
margin: 50rpx 0 70rpx 0;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
.remarks-content {
|
|
margin: 30rpx 0;
|
|
}
|
|
|
|
.c-amount {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
color: #000000ff;
|
|
font-size: 50rpx;
|
|
font-weight: 500;
|
|
|
|
text {
|
|
margin-bottom: 20rpx;
|
|
color: #808080ff;
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
|
|
.but-wrapper {
|
|
display: flex;
|
|
margin-top: 50rpx;
|
|
justify-content: space-between;
|
|
view {
|
|
flex: 0 0 45%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 90rpx;
|
|
color: #fff;
|
|
border-radius: 15rpx;
|
|
}
|
|
|
|
.cancel {
|
|
color: #808080ff;
|
|
}
|
|
.confirm {
|
|
width: 350rpx;
|
|
height: 110rpx;
|
|
border-radius: 20rpx;
|
|
background-color: var(--v-primary);
|
|
}
|
|
}
|
|
}
|
|
</style> |