裂变星小程序-25.03.04
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.
 
 
 

121 lines
2.7 KiB

<template>
<uv-popup
ref="popup"
:overlayOpacity="0.8"
:customStyle="{
backgroundColor: 'transparent',
}"
>
<view class="flex content">
<template v-if="mode === 'activate'">
<image class="popup-bg" src="@/pages_order/static/center/activate-code.png"></image>
<view class="flex popup-btns">
<button plain class="btn-simple" @click="close">
<image class="popup-btn" src="@/pages_order/static/center/cancel.png"></image>
</button>
<button plain class="btn-simple" @click="onConfirm">
<image class="popup-btn" src="@/pages_order/static/center/confirm.png"></image>
</button>
</view>
<uv-input
v-model="code"
:focus="true"
inputAlign="center"
color="#3DFEE0"
fontSize="45rpx"
border="none"
:customStyle="{
backgroundColor: 'transparent',
width: '250rpx',
height: '63rpx',
position: 'absolute',
top: '216rpx',
left: '160rpx',
}"
></uv-input>
</template>
<template v-else>
<image class="popup-bg" src="@/pages_order/static/center/not-agent.png"></image>
<view class="flex popup-btns">
<button plain class="btn-simple" @click="close">
<image class="popup-btn" src="@/pages_order/static/center/cancel.png"></image>
</button>
<button plain class="btn-simple" @click="mode = 'activate'" >
<image class="popup-btn" src="@/pages_order/static/center/activate.png"></image>
</button>
</view>
</template>
</view>
</uv-popup>
</template>
<script>
export default {
props: {
role: {
default: null
}
},
data() {
return {
mode: '',
code: '',
}
},
methods: {
open(role) {
this.mode = role ? 'activate' : ''
this.$refs.popup.open();
},
close() {
this.$refs.popup.close();
},
async onConfirm() {
try {
await this.$fetch('openVip', { code: this.code })
this.$store.commit('getUserInfo')
uni.showToast({
title: '激活成功',
icon: 'none'
})
this.close()
} catch (err) {
}
}
},
}
</script>
<style scoped lang="scss">
.content {
position: relative;
flex-direction: column;
width: 570rpx;
}
.popup {
&-bg {
width: 514rpx; height: 355rpx;
}
&-btns {
justify-content: space-between;
margin-top: 56rpx;
width: 100%;
}
&-btn {
width: 265rpx;
height: 84rpx;
}
}
</style>