139 lines
3.5 KiB
Vue
139 lines
3.5 KiB
Vue
<template>
|
|
<view class="page-wrapper">
|
|
<view class="pay-number">
|
|
<view class="pay-icon">￥</view>
|
|
{{ vdata.payment }}
|
|
</view>
|
|
<view class="keyboard-list">
|
|
<block v-for="v in keyboardList" :key="v.value">
|
|
<view class="keyboard-item" hover-class="hover-button" hover-stay-time="50" @tap="changeKey(v.value)">
|
|
<image v-if="v.value == 'del'" :src="v.key" mode="scaleToFill" />
|
|
<text v-else>{{ v.key }}</text>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
<view class="pay-submit" hover-class="hover-submit" hover-stay-time="50" @tap="jumpPage">
|
|
<image src="/static/indexImg/pay.png" mode="scaleToFill" />
|
|
普通收款
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref } from 'vue'
|
|
|
|
const keyboardList = [
|
|
{ key: '1', value: '1' },
|
|
{ key: '2', value: '2' },
|
|
{ key: '3', value: '3' },
|
|
{ key: '4', value: '4' },
|
|
{ key: '5', value: '5' },
|
|
{ key: '6', value: '6' },
|
|
{ key: '7', value: '7' },
|
|
{ key: '8', value: '8' },
|
|
{ key: '9', value: '9' },
|
|
{ key: '.', value: '.' },
|
|
{ key: '0', value: '0' },
|
|
{ key: '/static/iconImg/escB.png', value: 'del' },
|
|
]
|
|
const vdata = reactive({
|
|
payment: '0.00',
|
|
})
|
|
|
|
const changeKey = (v) => {
|
|
if (v == 'del') {
|
|
vdata.payment = vdata.payment.slice(0, vdata.payment.length - 1)
|
|
if (vdata.payment == '') vdata.payment = '0.00'
|
|
return
|
|
}
|
|
if (vdata.payment == '0.00' && (v == '.' || v == '0')) return (vdata.payment = '0.')
|
|
if (vdata.payment == '0.00') return (vdata.payment = v)
|
|
if (vdata.payment.includes('.') && v == '.') return uni.$J.showToast('只能包含一位小数点')
|
|
if (vdata.payment.includes('.') && vdata.payment.split('.')[1].length == 2) return uni.$J.showToast('只能包含小数点后两位')
|
|
return (vdata.payment += v)
|
|
}
|
|
const jumpPage = () => {
|
|
wxfaceapp.postMsg({
|
|
targetAppid: 'wx4710a1619fbb3714',
|
|
content: JSON.stringify({ type: 'toPay' }),
|
|
success(res) {
|
|
console.log('通信成功', res)
|
|
},
|
|
fail(res) {
|
|
console.log('通信失败 ', res)
|
|
},
|
|
})
|
|
uni.navigateTo({ url: '/pages/payWait/payWait?payment=' + vdata.payment })
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page-wrapper {
|
|
padding: 0.1rpx 30rpx;
|
|
min-height: calc(100vh - 5rpx);
|
|
background: url('/static/indexImg/index-bg.png') no-repeat center center;
|
|
background-size: 100% 100%;
|
|
.pay-number {
|
|
margin-top: 60rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 180rpx;
|
|
background-color: #35d757;
|
|
border-radius: 22rpx;
|
|
font-size: 60rpx;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
.pay-icon {
|
|
font-size: 28rpx;
|
|
transform: translateY(30%);
|
|
}
|
|
}
|
|
}
|
|
.keyboard-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
margin-top: 60rpx;
|
|
.keyboard-item {
|
|
flex: 0 0 31.5%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 15rpx;
|
|
height: 110rpx;
|
|
font-weight: 700;
|
|
font-size: 36rpx;
|
|
border-radius: 22rpx;
|
|
background-color: #fff;
|
|
image {
|
|
width: 40rpx;
|
|
height: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
.pay-submit {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 70rpx;
|
|
background-color: #35d757;
|
|
border-radius: 22rpx;
|
|
height: 120rpx;
|
|
color: #fff;
|
|
font-weight: 700;
|
|
image {
|
|
margin-right: 10rpx;
|
|
width: 35rpx;
|
|
height: 35rpx;
|
|
transform: translateY(5rpx);
|
|
}
|
|
}
|
|
.hover-button {
|
|
background-color: rgba($color: #ccc, $alpha: 0.3) !important;
|
|
}
|
|
.hover-submit {
|
|
opacity: 0.5;
|
|
}
|
|
</style>
|