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>
|