tearoom/page_fenbaotwo/hexiao/index.vue
2025-03-27 14:11:02 +08:00

409 lines
8.7 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="page">
<u-navbar title="团购兑换" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
title-size='36' :custom-back="btns" height='50' id="navbar">
</u-navbar>
<view class="box">
<view class="top">
<view class="name">
<view class="lt">
团购劵兑换
</view>
<view class="rt" @click="btnxzdp">
{{storeIdname}}
</view>
</view>
<view class="dizhi">
请手动输入或扫码输入劵码
</view>
</view>
<view class="yanjuan">
<input type="text" v-model="ma" placeholder="请输入美团,快手或抖音团购劵码"/>
<image @click="btnsm" src="https://api.ccttiot.com/smartmeter/img/static/u4dXRqeDvi1s2EuDXAZV" mode=""></image>
</view>
<view class="yjanniu" @click="btnljyj">
立即验劵
</view>
<!-- <view class="kefu">
<image src="https://api.ccttiot.com/smartmeter/img/static/uOSlTej17SvPDYLMAT1w" mode=""></image>
</view> -->
<view class="tishi">
<view class="tit">
温馨提示
</view>
<view class="wz">
1、输入团购券码或点击「识图验券」选择二维码图片进 行验证,验证通过后根据弹窗指引前往预定界面进行使 用;
</view>
<view class="wz">
2、抵用券核销之后将会出现在您的优惠券里您可在 付费时选择使用,并抵用相应金额;
</view>
<view class="wz">
3、券码一旦使用概不退换感谢您的支持与理解
</view>
<view class="wz">
4、如有疑问请点击上方联系客服我们将第一时间为 您处理。
</view>
</view>
</view>
<view class="gg" @click="btnjiameng">
<image src="https://api.ccttiot.com/smartmeter/img/static/uNAE6YmSEpaH4SsZlg8S" mode=""></image>
</view>
<!-- 无效码 -->
<view class="wuxiao" v-if="wuxiaoflag">
<image src="https://api.ccttiot.com/smartmeter/img/static/uSv5E4CpkiwlJzUpadwS" mode=""></image>
<view class="name">
兑换失败
</view>
<view class="ts">
请检查输入和选择店铺是否正确
</view>
<view class="shuru" @click="wuxiaoflag = false">
重新输入
</view>
</view>
<view class="mask" v-if="wuxiaoflag"></view>
<!-- 有效 -->
<view class="wuxiao" style="width: 672rpx;height: 506rpx;" v-if="youxiaoflag">
<image src="https://api.ccttiot.com/smartmeter/img/static/uSv5E4CpkiwlJzUpadwS" mode=""></image>
<view class="juan">
<view class="top">
<view class="lt">
<view class="one">
五元优惠券满30可用
</view>
<view class="">
券有效期2025.03.20-2025.04.20
</view>
<view class="">
使用渠道:共享时光核销工具
</view>
</view>
<view class="rt">
¥5
</view>
</view>
<view class="bot">
使用规则满30元方可使用券码一旦使用概不
</view>
</view>
<view class="anniu">
<view class="qx">
取消兑换
</view>
<view class="qr">
确认兑换
</view>
</view>
</view>
<view class="mask" v-if="youxiaoflag"></view>
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: "#fff",
},
wuxiaoflag:false,
youxiaoflag:false,
storeId:'',
storeIdname:'选择店铺',
ma:''
}
},
onLoad(option) {
console.log(option);
if(option.storeId){
this.storeId = option.storeId
this.storeIdname = option.tit
}
},
methods: {
// 点击返回
btns(){
uni.switchTab({
url:'/pages/my'
})
},
// 点击选择店铺
btnxzdp(){
uni.navigateTo({
url:'/page_fenbaotwo/hexiao/xzdp'
})
},
// 点击立即验劵
btnljyj(){
if(this.storeId == ''){
uni.showToast({
title: '请选择店铺',
icon: 'none',
duration: 2000
})
}else{
let encodedData = encodeURIComponent(this.ma)
this.$u.get(`/system/card/prepare?storeId=${this.storeId}&encryptedData=${encodedData}`).then(res => {
if (res.code == 200) {
uni.reLaunch({
url:'/page_user/kabao/index'
})
}else{
this.wuxiaoflag = true
}
})
}
},
// 点击扫码
btnsm(){
uni.scanCode({
onlyFromCamera: true,
scanType: ['qrCode'],
success: res => {
console.log(res);
this.ma = res.result
}
})
},
// 点击跳转到加盟合作页
btnjiameng() {
uni.navigateTo({
url: '/page_user/zhaoshang'
})
},
}
}
</script>
<style lang="scss">
/deep/ .u-iconfont,
/deep/ .u-title{
padding-bottom: 20rpx;
}
page {
background: #F6F6F6;
}
.wuxiao{
width: 592rpx;
height: 446rpx;
background: #FFFFFF;
border-radius: 14rpx 14rpx 14rpx 14rpx;
position: fixed;
top: 524rpx;
left: 50%;
transform: translateX(-50%);
z-index: 3;
.juan{
width: 616rpx;
height: 246rpx;
background: #EFF6EE;
border-radius: 14rpx 14rpx 14rpx 14rpx;
border: 1rpx dashed #48893B;
margin: auto;
margin-top: 106rpx;
padding: 32rpx 30rpx;
box-sizing: border-box;
.top{
display: flex;
justify-content: space-between;
align-items: center;
.lt{
.one{
font-weight: 600;
font-size: 28rpx;
color: #3D3D3D;
margin-top: 0 !important;
}
view{
font-size: 22rpx;
color: #808080;
margin-top: 14rpx;
}
}
.rt{
font-weight: 600;
font-size: 50rpx;
color: #48893B;
}
}
.bot{
border-top: 1rpx solid #48893B;
font-size: 24rpx;
color: #535353;
margin-top: 20rpx;
padding-top: 20rpx;
box-sizing: border-box;
}
}
.anniu{
display: flex;
justify-content: space-between;
margin-top: 38rpx;
padding: 0 66rpx;
box-sizing: border-box;
.qx{
width: 250rpx;
height: 72rpx;
border-radius: 42rpx 42rpx 42rpx 42rpx;
border: 1rpx solid #7C7C7C;
font-size: 32rpx;
color: #7C7C7C;
text-align: center;
line-height: 72rpx;
}
.qr{
width: 250rpx;
height: 72rpx;
background: #48893B;
border-radius: 42rpx 42rpx 42rpx 42rpx;
text-align: center;
line-height: 72rpx;
font-size: 32rpx;
color: #FFFFFF;
line-height: 72rpx;
}
}
image{
width: 116rpx;
height: 116rpx;
position: absolute;
top: -50rpx;
left: 50%;
transform: translateX(-50%);
}
.name{
font-weight: 800;
font-size: 44rpx;
color: #3D3D3D;
margin-top: 96rpx;
width: 100%;
text-align: center;
}
.shuru{
width: 282rpx;
height: 74rpx;
background: #48893B;
border-radius: 42rpx 42rpx 42rpx 42rpx;
margin-top: 54rpx;
font-weight: 600;
font-size: 32rpx;
color: #FFFFFF;
text-align: center;
line-height: 74rpx;
margin: auto;
margin-top: 54rpx;
}
.ts{
font-size: 28rpx;
color: #3D3D3D;
text-align: center;
padding: 0 88rpx;
box-sizing: border-box;
margin-top: 32rpx;
}
}
.mask{
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.15);
z-index: 1;
}
.gg{
width: 100%;
margin-top: 40rpx;
text-align: center;
image{
width: 692rpx;
height: 196rpx;
}
}
.box{
width: 692rpx;
max-height: 1014rpx;
background: #FFFFFF;
margin: auto;
margin-top: 26rpx;
box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0,0,0,0.15);
border-radius: 18rpx 18rpx 18rpx 18rpx;
padding: 28rpx 30rpx;
.tishi{
margin-top: 30rpx;
.tit{
font-weight: 600;
font-size: 32rpx;
color: #3D3D3D;
}
.wz{
font-size: 26rpx;
color: #636363;
margin-top: 20rpx;
}
}
.kefu{
width: 100%;
text-align: right;
margin-top: 26rpx;
image{
width: 266rpx;
height: 134rpx;
}
}
.yjanniu{
width: 634rpx;
height: 98rpx;
line-height: 98rpx;
text-align: center;
background: #48893B;
border-radius: 8rpx 8rpx 8rpx 8rpx;
margin-top: 28rpx;
font-weight: 600;
font-size: 36rpx;
color: #FFFFFF;
}
.yanjuan{
width: 634rpx;
height: 98rpx;
border-radius: 8rpx 8rpx 8rpx 8rpx;
border: 2rpx solid #9B9B9B;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 28rpx;
box-sizing: border-box;
margin-top: 48rpx;
input{
width: 414rpx;
}
image{
width: 46rpx;
height: 46rpx;
}
}
.top{
.dizhi{
font-size: 24rpx;
color: #7C7C7C;
margin-top: 12rpx;
}
.name{
display: flex;
justify-content: space-between;
align-items: center;
.lt{
font-weight:600;
font-size: 32rpx;
color: #3D3D3D;
}
.rt{
font-size: 32rpx;
font-weight: 600;
color: #7C7C7C;
}
}
}
}
</style>