shop-applet/components/payPwd/index.vue

92 lines
1.9 KiB
Vue

<template>
<uni-popup ref="payModal" type="center" safeArea :animation="true">
<view class="payModal">
<view class="payModal-title">{{code == 101?'未设置密码':'支付密码错误'}}</view>
<view class="payModal-btns">
<view class="wrap" style="display: flex;flex: 1;" v-if="code == 101">
<view class="payModal-btns-left payModal-common" @click="handleClick(1)">设置密码</view>
<view class="payModal-btns-right payModal-common" @click="handleClick(2)">取消</view>
</view>
<view class="wrap" style="display: flex;flex: 1;" v-else>
<view class="payModal-btns-left payModal-common" @click="handleClick(1)">忘记密码</view>
<view class="payModal-btns-right payModal-common" @click="handleClick(2)">重试</view>
</view>
</view>
</view>
</uni-popup>
</template>
<script>
export default {
data() {
return {
code: ''
}
},
methods: {
// 打开
handleOpen(code) {
this.code = code;
this.$refs.payModal.open();
},
// 关闭
handleClose() {
this.$refs.payModal.close();
},
handleClick(type) {
if (type == 1) {
this.$emit('left', this.code);
} else {
this.$emit("right", this.code);
}
}
}
}
</script>
<style lang="scss">
.payModal {
width: 600rpx;
background-color: #fff;
border-radius: 30rpx;
.payModal-title {
text-align: center;
padding: 40rpx 50rpx 50rpx;
font-size: 30rpx;
color: #333;
border-bottom: 2rpx solid #e6e6e6;
}
.payModal-btns {
display: flex;
flex: 1;
.payModal-btns-left {
height: 88rpx;
line-height: 88rpx;
flex: 1;
text-align: center;
font-weight: bold;
border-right: 2rpx solid #e6e6e6;
color: #333;
}
.payModal-btns-right {
color: #2a5ac2;
}
.payModal-common {
height: 88rpx;
line-height: 88rpx;
flex: 1;
text-align: center;
font-weight: bold;
}
}
}
</style>