zssh-h5/components/overlay.vue

480 lines
15 KiB
Vue
Raw Permalink Normal View History

2024-07-09 15:49:34 +08:00
<template>
<view>
<u-overlay :show="show" @tap="cancle">
<view class="flex_items flex_center" style="width: 100%; height: 100vh">
<view @tap.stop="gonone" v-show="istype == 'istong'" class="bgwhite flex_column flex_items" style="width: 560rpx; height: 347rpx; border-radius: 30rpx">
<text class="f36 bold" style="margin-top: 48rpx">开通免密支付</text>
<view class="f26 bbe9s" style="margin-top: 48rpx; padding: 0 31rpx 48rpx 31rpx; color: #999">
我已阅读并同意
<text style="color: #fd5b23">掌上生活特约合作商户免密支付服务协议</text>
<text style="color: #fd5b23">代扣代缴服务协议</text>
</view>
<view @tap.stop="gook" class="flex_items flex_center" style="margin-top: 14rpx">
<text class="f36 bold" style="color: #fd5b23">确认开通</text>
</view>
</view>
<!-- 成功 -->
<view v-show="istype == 'issuccess'" @tap.stop="gonone" class="flex_column flex_items pos issuc">
<image :src="suct" style="width: 438rpx; height: 257rpx; margin: -100rpx auto" mode=""></image>
<view @click="cancle('qu')" class="back abs" style="width: 196rpx; height: 66rpx; background: none; bottom: 55rpx; left: 60rpx"></view>
<view @click="goorder" class="back abs" style="width: 196rpx; height: 66rpx; background: none; bottom: 55rpx; right: 60rpx"></view>
</view>
<!-- 失败 -->
<view v-show="istype == 'islose'" @tap.stop="gonone" class="flex_column flex_items pos islose">
<view style="color: #fd5b23; margin-top: 172rpx" class="f32">很遗憾您兑换失败</view>
<view class="mt50 flex_between flex_items" style="width: calc(100% - 132rpx)">
<view
@click="cancle('qu')"
class="f32 f-center"
style="width: 196rpx; height: 64rpx; border-radius: 58rpx; border: 1px solid #fd5b23; line-height: 64rpx; color: #fd5b23"
>
返回首页
</view>
<view
@click="goorder"
class="f32 f-center"
style="width: 196rpx; height: 70rpx; border-radius: 58rpx; background: #fd5b23; line-height: 70rpx; color: #fff"
>
查看订单
</view>
</view>
</view>
<!-- 须知 -->
<view v-show="istype == 'isxuzhi'" @tap.stop="gonone" class="flex_column flex_items xuzhi">
<view class="f26" style="width: calc(100% - 74rpx); margin-top: 285rpx; overflow-y: auto; height: 100%">
<view class="">产品说明:</view>
<view class="mt20 wen">1优酷VIP会员权益仅限PC和移动端使用不支持电视端使用</view>
<view class="mt20 wen">2充值账号请填写优酷绑定的对应手机号充值成功后使用此优酷账号登录优酷App查看到账情况</view>
<view class="mt20 wen">3首月9积分+15/第2个月起15元/(持续到第12个月第13个月起将不再自动扣款)</view>
<view class="mt20 wen">4如您的优酷账号已有优酷VIP会员则每次自动扣费后优酷VIP会员有效期叠加延长1个月</view>
<view class="mt20 wen">5该产品为虚拟商品请谨慎填写充值账号一经确认无法修改</view>
<view class="mt30 f26">使用规则:</view>
<view class="mt20 wen">1兑换:当下非优酷连续包月用户可兑换每位用户限兑1次;</view>
<view class="mt20 wen">2发货:兑换后自动充值2小时内到账:</view>
<view class="mt20 wen">3退订虚拟权益充值成功后不可退换次月起每月自动扣费前可至我的订单随时取消积分兑换的是连续包月限时特价权益一经兑换无论何时退订积分将不会退回</view>
<view class="mt30 f26">温馨提示:</view>
<view class="mt20 wen">1特别说明:本次兑换仅限购买指定商品使用仅限中国大陆地区用户使用:</view>
<view class="mt20 wen">2商品数量有限先到先得兑完即止</view>
<view class="mt20 wen">3参加活动前请确认理解本活动如对优酷会员相关内容有疑问请咨询优酷在线客服(优酷APP-我的-我的客服)</view>
<!-- <view class="mt30 f26">温馨提醒:</view>
<view class="mt20 wen">权益数量有限先到先得兑完为止虚拟权益一旦兑换不支持退换</view>
<view class="mt30 f26">价格说明:</view>
<view class="mt20 wen">基础价或划线价格指商品的专柜价吊牌价正品零售价厂商指导价或该商品的曾经展示过的销售价等并非原价仅供参考</view> -->
</view>
<view style="width: 100%; height: 15rpx"></view>
</view>
<!-- 登录 -->
<view v-if="istype == 'islogin'" @tap.stop="gonone" class="flex_column flex_items login pos">
<view class="" style="width: calc(100% - 132rpx); margin-top: 290rpx">
<u--form labelPosition="left" :model="form" labelWidth="60">
<u-form-item prop="form.phonew" border="none" style="border-radius: 8rpx">
<view class="flex_start flex_items" style="width: 428rpx; height: 73rpx; background: #fff8f5; border-radius: 43rpx">
<u--input
class="ml30"
v-model="form.phonew"
border="none"
maxlength="13"
placeholder="请输入手机号"
@input="handleTelInput"
placeholderStyle="color:#FFB89F;font-size:26rpx"
color="#FD5B23"
fontSize="13"
></u--input>
</view>
</u-form-item>
<u-form-item prop="form.code" border="none" style="border-radius: 8rpx">
<view class="flex_start flex_items" style="width: 428rpx; height: 73rpx; background: #fff8f5; border-radius: 43rpx">
<u--input
class="ml30"
v-model="form.code"
border="none"
placeholder="请输入验证码"
placeholderStyle="color:#FFB89F;font-size:26rpx"
color="#FD5B23"
maxlength="6"
fontSize="13"
></u--input>
<view @click="getcode" class="f24 mr30" :style="{ color: iscode == 1 ? '#666666' : '#FD5B23' }">
{{ codemsg }}
</view>
</view>
</u-form-item>
<view class="mt20 flex_items flex_center" style="width: 100%">
<view
@click="gologin"
class="f-center"
style="width: 428rpx; height: 64rpx; background: #fe9d7b; border-radius: 58rpx; line-height: 64rpx; color: #fff"
>
登录
</view>
</view>
</u--form>
</view>
</view>
<view v-if="istype == 'isdt'" @tap.stop="gonone" class="flex_column flex_items td pos">
<image :src="td" style="width: 438rpx; height: 281rpx; left: 54%; transform: translate(-50%, 0); top: -120rpx" class="abs" mode=""></image>
<view class="" style="width: calc(100% - 132rpx); margin-top: 200rpx">
<u--form labelPosition="left" :model="form" labelWidth="60">
<u-form-item prop="form.phonew" border="none" style="border-radius: 8rpx">
<view class="flex_start flex_items" style="width: 428rpx; height: 73rpx; background: #fff8f5; border-radius: 43rpx">
<u--input
class="ml30"
disabled
disabledColor="#FFF8F5"
v-model="form.phonew"
ref="mobile"
@input="handleTelInput"
border="none"
placeholder="请输入手机号"
placeholderStyle="color:#FFB89F;font-size:26rpx"
color="#FD5B23"
fontSize="13"
></u--input>
</view>
</u-form-item>
<u-form-item prop="form.code" border="none" style="border-radius: 8rpx">
<view class="flex_start flex_items" style="width: 428rpx; height: 73rpx; background: #fff8f5; border-radius: 43rpx">
<u--input
class="ml30"
v-model="form.code"
border="none"
placeholder="请输入验证码"
placeholderStyle="color:#FFB89F;font-size:26rpx"
color="#FD5B23"
maxlength="6"
fontSize="13"
></u--input>
<view @click="getcode('cancle')" class="f24 mr30" :style="{ color: iscode == 1 ? '#666666' : '#FD5B23' }">
{{ codemsg }}
</view>
</view>
</u-form-item>
<view class="mt30 flex_items flex_center" style="width: 100%">
<view style="width: 100%" class="flex_between flex_items">
<view
@click="unsubscribe"
class="f32 f-center"
style="width: 196rpx; height: 66rpx; border-radius: 58rpx; border: 1px solid #fd5b23; color: #fd5b23; line-height: 66rpx"
>
退订
</view>
<view
class="f32 f-center"
@click="cancle('qu')"
style="width: 196rpx; height: 70rpx; background: #fd5b23; border-radius: 58rpx; color: #fff; line-height: 70rpx"
>
取消
</view>
</view>
</view>
</u--form>
</view>
</view>
<!-- 退订成功 -->
<view v-show="istype == 'istdsucc'" @tap.stop="gonone" class="flex_column flex_items pos tdsuccbg">
<image :src="suct" style="width: 438rpx; height: 257rpx; margin: -100rpx auto" mode=""></image>
<view
@click="cancle('qu')"
class="back abs"
style="width: 196rpx; height: 66rpx; background: none; bottom: 55rpx; left: 50%; transform: translate(-50%)"
></view>
</view>
</view>
</u-overlay>
</view>
</template>
<script>
export default {
data() {
return {
show: true,
sunimg: require("@/static/yellow/sun.png"),
td: require("@/static/yellow/td.png"),
suct: require("@/static/yellow/successt.png"),
tdsucc: require("@/static/yellow/tdsucc.png"),
codemsg: "获取验证码",
form: {
phonew: "",
code: "",
open_id: uni.getStorageSync("opid")
},
iscode: 0,
lose: require("@/static/yellow/shibai.png")
};
},
props: ["istype", "isshow", "tdphone"],
mounted() {
if (this.istype == "isdt") {
if (this.tdphone != "") {
this.form.phonew = this.uti.handlephone(this.tdphone);
}
}
this.show = this.isshow;
},
methods: {
gook() {
console.log(1212);
},
cancle(aa) {
if (this.istype == "isxuzhi" || aa) {
this.show = false;
this.$emit("backshow", this.show);
}
},
handleTelInput(value) {
this.form.phonew = this.uti.handlephone(value);
},
getcode(types) {
if (this.form.phonew == "") {
uni.showToast({
title: "手机号不能为空",
icon: "none"
});
return false;
}
if (this.iscode == 1) {
return false;
}
this.getphonecode(types);
},
getphonecode(types) {
let that = this;
uni.showLoading({
title: "发送中..."
});
if (!types) {
that.api
.getphonecode({
phone: that.form.phonew.replace(/-/g, "")
})
.then((res) => {
console.log(res);
if (res.data.code == "200") {
uni.showToast({
title: "发送成功",
icon: "success",
duration: 800
});
setTimeout(function () {
if (that.codemsg == "获取验证码" || that.codemsg == "重新发送") {
// that.getphonecode()
that.codemsg = 60;
that.iscode = 1;
that.int = setInterval(() => {
that.codemsg -= 1;
if (that.codemsg == 0) {
clearInterval(that.int);
that.iscode = 0;
that.codemsg = "重新发送";
}
}, 1000);
}
}, 800);
} else {
uni.showToast({
title: res.data.message,
icon: "none"
});
}
});
} else {
// 退订
that.api
.getcanclecode({
phone: that.form.phonew.replace(/-/g, "")
})
.then((res) => {
console.log(res);
if (res.data.code == "200") {
uni.showToast({
title: "发送成功",
icon: "success",
duration: 800
});
setTimeout(function () {
if (that.codemsg == "获取验证码" || that.codemsg == "重新发送") {
// that.getphonecode()
that.codemsg = 60;
that.iscode = 1;
that.int = setInterval(() => {
that.codemsg -= 1;
if (that.codemsg == 0) {
clearInterval(that.int);
that.iscode = 0;
that.codemsg = "重新发送";
}
}, 1000);
}
}, 800);
} else {
uni.showToast({
title: res.data.message,
icon: "none"
});
}
});
}
},
unsubscribe() {
let that = this;
if (that.form.code === "") {
uni.showToast({
title: "请输入验证码",
icon: "none",
duration: 800
});
return;
}
if (that.form.code.length < 6) {
uni.showToast({
title: "验证码格式不符",
icon: "none",
duration: 800
});
return;
}
// uni.showLoading({
// title: '退订中...'
// })
that.api
.gounsubscribe({
phone: that.form.phonew.replace(/-/g, ""),
code: that.form.code,
open_id: uni.getStorageSync("opid")
})
.then((res) => {
if (res.data.code == "200") {
that.istype = "istdsucc";
that.isshow = true;
} else {
uni.showToast({
title: res.data.message,
icon: "none"
});
}
});
},
gologin() {
let that = this;
if (that.form.phonew === "") {
uni.showToast({
title: "请输入手机号",
icon: "none",
duration: 800
});
return;
}
if (that.form.phonew.length < 11) {
uni.showToast({
title: "手机号格式不符",
icon: "none",
duration: 800
});
return;
}
if (that.form.code === "") {
uni.showToast({
title: "请输入验证码",
icon: "none",
duration: 800
});
return;
}
if (that.form.code.length < 6) {
uni.showToast({
title: "验证码格式不符",
icon: "none",
duration: 800
});
return;
}
that.form.phone = that.form.phonew.replace(/-/g, "");
uni.showLoading({
title: "登录中..."
});
that.api.getlogin(that.form).then((res) => {
if (res.data.code == "200") {
uni.setStorageSync("token", res.data.data.front_token);
uni.showToast({
title: "登录成功",
icon: "success",
duration: 800
});
setTimeout(function () {
that.$emit("backshow", false);
}, 800);
} else {
uni.showToast({
title: res.data.message,
icon: "none"
});
}
});
},
goorder() {
uni.navigateTo({
url: "/pages/my/index"
});
},
gonone() {}
}
};
</script>
<style>
.xuzhi {
background-image: url("~@/static/yellow/xzbg.png") !important;
background-size: 100% 100%;
width: calc(100% - 190rpx);
height: 1075rpx;
}
.issuc {
background-image: url("~@/static/yellow/success.png") !important;
background-size: 100% 100%;
width: calc(100% - 190rpx);
height: 404rpx;
}
.tdsuccbg {
background-image: url("~@/static/yellow/tdsuccbg.png") !important;
background-size: 100% 100%;
width: calc(100% - 190rpx);
height: 404rpx;
}
.td {
background-image: url("~@/static/yellow/tdbg.png") !important;
background-size: 100% 100%;
width: calc(100% - 190rpx);
height: 566rpx;
}
.wen {
color: #666666;
line-height: 50rpx;
}
.islose {
background-image: url("~@/static/yellow/shibai.png") !important;
background-size: 100% 100%;
width: calc(100% - 190rpx);
height: 379rpx;
}
.login {
background-image: url("~@/static/yellow/logoin.png") !important;
background-size: 100% 100%;
width: calc(100% - 190rpx);
height: 641rpx;
}
</style>