480 lines
15 KiB
Vue
480 lines
15 KiB
Vue
<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>
|