Skip to content

J
jd-vx-app
Commit f0f897fb authored by 肖健's avatar 肖健
Browse files
Options

挪车码领取活动

parent 0b77380e
Show whitespace changes
Inline Side-by-side
Showing with 314 additions and 155 deletions
pages/main.vue
View file @ f0f897fb
......@@ -354,6 +354,7 @@
this.tabChange(tabbar)
}
if(routerLogin){
uni.setStorageSync('routerLogin', false)
uni.redirectTo({
url:routerLogin
})
......
pages/mrAct/index.vue
View file @ f0f897fb
<!-- 挪车码领取活动页面 -->
<template>
<view style="background-color: #fff;">
<view style="background-color: #5797D5;">
<view>
<image style="width: 750rpx;height: 600rpx;" src="http://jdnc-oss.uzosp.com/2023/01/10/9da1c3c2d8374436bdf2782982090980.jpg"></image>
</view>
<view style="position: relative;top:-65rpx;margin: 0 auto; width: 706rpx;height: 938rpx; display: flex; justify-content: center;align-items: center;
background: url('http://jdnc-oss.uzosp.com/2023/01/10/a2ca3df54fe449b78b711715b18f3bd2.png') no-repeat; background-size: 100% 100%;">
<view style="margin-top: 58rpx; width: 550rpx; height: 770rpx;">
<view class="car_info">
<view class="info_list" style="padding:20rpx 0;">
<view class="left">
品牌车型：
<!-- <view class="info_list" style="padding:20rpx 0;"> -->
<view class="info_list">
<view class="left" style="width: 170rpx;">
品牌车型:
</view>
<view class="right info" style="width:500rpx;" v-if="carInfo" @click="getCarList">
<view class="right info" style="width:400rpx;" v-if="carInfo" @click="getCarList">
<image :src="carInfo.logoUrl" mode=""></image>
<view>
<view>
......@@ -14,42 +21,58 @@
</view>
{{carInfo.carModel}}
</view>
<image class="gt" src="@/static/move-car/move-car-code1.png">
<view class="gt">
<u-icon name="arrow-right" color="#fff"></u-icon>
</view>
</view>
<view class="right" style="width:500rpx;" v-else @click="getCarList">
<text style="margin-right:10rpx;color:#999;">请选择</text>
<image class="gt" src="@/static/move-car/move-car-code1.png">
<view class="right" style="width:400rpx;" v-else @click="getCarList">
<u--text suffixIcon="arrow-right" align="right" size="28rpx" color="#fff" iconStyle="font-size: 28rpx;color:#fff;" text="请选择"></u--text>
</view>
</view>
</view>
<view style="margin: 0 auto; width: 90%;">
<u--form labelPosition="left" errorType="toast" :labelStyle="{'fontSize': '32rpx'}" labelWidth="200rpx" :model="actInfo" :rules="rules" ref="form1">
<u-form-item label="收货人:" prop="userName" borderBottom>
<u--input v-model="actInfo.userName" maxlength="50" border="none" inputAlign="right"></u--input>
<view>
<u--form labelPosition="left" errorType="toast" :labelStyle="{'fontSize': '30rpx', color : '#fff'}" labelWidth="200rpx" :model="actInfo" :rules="rules" ref="form1">
<u-form-item label="收货人:" prop="userName">
<u--input v-model="actInfo.userName" fontSize="28rpx" color="#fff" maxlength="50" border="none" inputAlign="right"></u--input>
</u-form-item>
<u-form-item label="收货电话:" prop="telNumber" borderBottom>
<u--input v-model="actInfo.telNumber" maxlength="20" border="none" inputAlign="right" @change="checkMobileInfo"></u--input>
<u-line color="rgba(255,225,255,.1)"></u-line>
<u-form-item label="收货电话:" prop="telNumber">
<u--input v-model="actInfo.telNumber" fontSize="28rpx" color="#fff" maxlength="20" border="none" inputAlign="right"></u--input>
</u-form-item>
<u-form-item label="收货地址:" prop="address" borderBottom>
<u--input v-model="actInfo.address" @tap="chooseAddress" placeholder="省/市/区" disabled disabledColor="transparent" border="none" inputAlign="right"></u--input>
<u-icon slot="right" name="arrow-right" @tap="chooseAddress"></u-icon>
<u-line color="rgba(255,225,255,.1)"></u-line>
<u-form-item label="收货地址:" prop="address">
<u--input v-model="actInfo.address" fontSize="28rpx" color="#fff" @tap="chooseAddress" placeholder="省/市/区" disabled disabledColor="transparent"
border="none" inputAlign="right"></u--input>
<u-icon slot="right" name="arrow-right" color="#fff" @tap="chooseAddress"></u-icon>
</u-form-item>
<u-form-item label="详细地址:" prop="detailInfo" borderBottom>
<u--input v-model="actInfo.detailInfo" maxlength="100" border="none" inputAlign="right"></u--input>
<u-line color="rgba(255,225,255,.1)"></u-line>
<u-form-item label="详细地址:" prop="detailInfo">
<u--input v-model="actInfo.detailInfo" fontSize="28rpx" color="#fff" maxlength="100" border="none" inputAlign="right"></u--input>
</u-form-item>
<u-form-item label="验证码:" prop="smsCode" borderBottom>
<u--input v-model="actInfo.smsCode" type="number" maxlength="6" border="none" inputAlign="right"></u--input>
<view slot="right" style="margin-left: 20rpx;border-left: 2rpx solid rgba(0,0,0,.1);padding-left:20rpx;">
<text style="font-size:32rpx; " @tap="getCode">{{tips}}</text>
<u-line color="rgba(255,225,255,.1)"></u-line>
<u-form-item label="验证码:" prop="smsCode">
<u--input v-model="actInfo.smsCode" type="number" fontSize="28rpx" color="#fff" maxlength="6" border="none" inputAlign="right"></u--input>
<view slot="right" style="margin-left: 20rpx;border-left: 2rpx solid rgba(255,225,255,.1);padding-left:20rpx;">
<text style="font-size:28rpx;color:#fff" @tap="getCode">{{tips}}</text>
</view>
</u-form-item>
<u-form-item v-if="captcha" label="图形验证:" prop="vc" borderBottom>
<u--input v-model="actInfo.vc" maxlength="20" border="none" inputAlign="right" ></u--input>
<image slot="right" :src="captchaImg" style="width: 101px; height: 38px;margin-left: 20rpx;" @click="getCaptchaImage"></image>
</u-form-item>
</u--form>
<u-button type="primary" text="提交" @click="submitAct" :disabled="disabledSubmit"></u-button>
<view style="margin-top: 38rpx;display: flex; justify-content: center;">
<view v-if="!disabledSubmit" style="background: url('../../static/act/submit_btn.png') no-repeat; background-size: 100% 100%; width: 481rpx; height: 120rpx;"
@click="submitAct">
<view style="display: flex;justify-content: center;align-items: center;height: 120rpx; width: 481rpx;position: relative; top:-6rpx;">
<text style="font-size: 38rpx;color:#8E3B09;font-weight: bold;line-height: 42rpx;">立即领取</text>
<image src="@/static/act/arrow-right.png" style="width:18rpx;height:28rpx; margin-left: 20rpx;"></image>
</view>
</view>
<view v-if="disabledSubmit" style="background: url('../../static/act/submit_btn.dis.png') no-repeat; background-size: 100% 100%; width: 481rpx; height: 120rpx;"
@click="submitAct">
<view style="display: flex;justify-content: center;align-items: center;height: 120rpx; width: 481rpx;position: relative; top:-6rpx;">
<text style="font-size: 38rpx;color:#8E3B09; opacity: 0.3; font-weight: bold;line-height: 42rpx;">立即领取</text>
<image src="@/static/act/arrow-right-dis.png" style="width:18rpx;height:28rpx; margin-left: 20rpx;"></image>
</view>
</view>
</view>
<u-code ref="uCode" @change="codeChange" seconds="60" @start="disabled1 = true" @end="disabled1 = false"></u-code>
<address-picker :show="addressShow" @confirm="addressConfirm" @cancel="addressCancel"></address-picker>
......@@ -92,12 +115,85 @@
</u-popup>
</view>
</view>
</view>
<!-- <view style="margin: 0 auto; width: 706rpx;">
<image style="width: 706rpx;height: 527rpx;" src="http://jdnc-oss.uzosp.com/2023/01/10/550c77228abf46e49d9588568e14e57a.png"></image>
</view>
<view style="margin: 59rpx auto 0 auto; width: 710rpx;">
<image style="width: 710rpx;height: 865rpx;" src="http://jdnc-oss.uzosp.com/2023/01/10/e4a7db688c274e76921025b0675a420c.png"></image>
</view>
<view style="margin: 59rpx auto 0 auto; width: 708rpx;padding-bottom: 87rpx;">
<image style="width: 708rpx;height: 1429rpx;" src="http://jdnc-oss.uzosp.com/2023/01/10/f4c2093310604cf983b50b87f9ca99a4.png"></image>
</view> -->
<!-- 爱车选择弹框 -->
<u-popup :show="inputCodeShow" mode="bottom" round="10" @close="inputCodeShow = false">
<view class="love_car_list">
<view class="love_title">
输入图形验证码
<text @click.stop="inputCodeShow = false">x</text>
</view>
<view style="width: 600rpx; margin: 0 auto;">
<u--form labelPosition="left" errorType="toast" :labelStyle="{'fontSize': '30rpx'}" labelWidth="150rpx" :model="verifyInfo" :rules="verifyRules" ref="form2">
<u-form-item label="验证码:" prop="vc">
<u--input v-model="verifyInfo.vc" maxlength="20" fontSize="28rpx" placeholder="请输入结果" border="bottom" inputAlign="right" ></u--input>
<image slot="right" :src="captchaImg" style="width: 101px; height: 38px;margin-left: 20rpx;" @click="getCaptchaImage"></image>
</u-form-item>
</u--form>
</view>
<view style="width: 600rpx; margin: 30rpx auto 0 auto;">
<u-button color="#1c81e8" text="确认" customStyle="width: 400rpx" @click="submitVerifyCode"></u-button>
</view>
</view>
</u-popup>
<!-- 领取成功 -->
<u-popup :show="receiveSuccessShow" mode="center" bgColor="transparent" @close="receiveSuccessShow = false">
<view style="width: 522rpx; height: 396rpx;background: url('../../static/act/receive-success.png') no-repeat; background-size: 100% 100%;">
<view style="margin: 18rpx auto 13rpx auto ;width: 72rpx; height: 72rpx;background: url('../../static/act/ok.png') no-repeat; background-size: 100% 100%;"></view>
<view style="text-align: center;">
<text style="color:#E62929;font-size: 36rpx;line-height: 36rpx;font-weight: bold;">领取成功</text>
</view>
<view style="margin: 12rpx auto 0 auto;width:380rpx;text-align: center;">
<text style="font-weight: 400;color: #620F0F;font-size: 24rpx;">您已经免费领取京东汽车挪车牌，正在为您派送中，请耐心等待。</text>
</view>
<view @click="goToIndex" style="margin: 12rpx auto 0 auto;width: 398rpx; height: 108rpx;background: url('../../static/act/back-index.png') no-repeat; background-size: 100% 100%;">
<view style="display: flex;justify-content: center;align-items: center;height: 108rpx;position: relative; top:-6rpx">
<text style="font-size: 32rpx;color:#8E3B09;text-shadow: 0px 4px 8px rgba(146,66,25,0.27); font-weight: bold;line-height: 36rpx;">返回首页</text>
</view>
</view>
</view>
</u-popup>
<!-- 已经领取 -->
<u-popup :show="receivedFailShow" mode="center" bgColor="transparent" @close="receivedFailShow = false">
<view style="width: 522rpx; height: 396rpx;background: url('../../static/act/receive-success.png') no-repeat; background-size: 100% 100%;position: relative;">
<view style="text-align: center;margin-top: 30rpx;">
<text style="color:#620F0F;font-size: 36rpx;line-height: 36rpx;font-weight: 500;">温馨提示</text>
</view>
<view style="margin: 23rpx auto 0 auto;width:380rpx;text-align: center;">
<text style="font-weight: 400;color: #620F0F;font-size: 24rpx;">{{ alreadyMsg}}</text>
</view>
<view style="position: absolute; bottom: 52rpx; width: 100%;">
<view @click="closeReceivedFail" style="margin:0 auto;width: 398rpx; height: 108rpx;background: url('../../static/act/back-index.png') no-repeat; background-size: 100% 100%;">
<view style="display: flex;justify-content: center;align-items: center;height: 108rpx;position: relative; top:-6rpx">
<text style="font-size: 32rpx;color:#8E3B09;text-shadow: 0px 4px 8px rgba(146,66,25,0.27); font-weight: bold;line-height: 36rpx;">知道了</text>
</view>
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
data() {
return {
receivedFailShow:false,
receiveSuccessShow:false,
inputCodeShow:false,
addressShow:false,
//获取短信验证码相关 begin
......@@ -114,7 +210,7 @@ export default {
carInfo: null,
//选择车辆相关 end
disabledSubmit:false,
disabledSubmit:true,
//是否已经领取过
already: true,
......@@ -124,6 +220,10 @@ export default {
captcha : false,
captchaImg : '',
verifyInfo: {
vc:'',
vi: '',
},
actInfo: {
carId:'',
......@@ -131,8 +231,6 @@ export default {
telNumber: '',
address: '',
detailInfo: '',
vc:'',
vi: '',
smsCode: '',
},
rules: {
......@@ -185,33 +283,33 @@ export default {
message: '请输入短信验证码',
trigger: ['blur', 'change']
}],
},
verifyRules: {
'vc': [
{
type: 'string',
required: false,
message: '请输入图形验证码',
required: true,
message: '请输入结果',
trigger: ['blur', 'change']
},
{
// 自定义验证函数，见上说明
validator: (rule, value, callback) => {
if(this.captcha) {
if(!value) {
return false
}
}
return true
},
message: '请输入图形验证码',
// 触发器可以同时用blur和change
trigger: ['change','blur'],
}
],
},
}
}
},
methods: {
closeReceivedFail() {
this.receivedFailShow = false
},
goToIndex() {
this.receiveSuccessShow = false
uni.navigateTo({
url: '/pages/main'
})
},
chooseAddress() {
if(this.disabledSubmit) {
return
}
this.addressShow = true
},
addressConfirm(e) {
......@@ -225,6 +323,9 @@ export default {
this.tips = text;
},
getCode() {
if(this.disabledSubmit) {
return
}
let that = this
if(!that.actInfo.telNumber) {
uni.$u.toast('请填写收货电话')
......@@ -235,25 +336,40 @@ export default {
return
}
if (that.$refs.uCode.canGetCode) {
that.checkCaptchaInfo()
} else {
//uni.$u.toast('倒计时结束后再发送');
}
},
sendSmsCode() {
let that = this
// 模拟向后端请求验证码
uni.showLoading({
title: '正在获取短信验证码'
})
that.$http.request({
url:'/app/smsCode/mr_activity',
method:'post',
data:{phone: that.actInfo.telNumber},
load:false
}).then(res => {
let opts = {
url: '/app/smsCode/mr_activity',
method: 'post'
}
let data = {phone: that.actInfo.telNumber, vi : that.verifyInfo.vi, vc : that.verifyInfo.vc}
that.http.httpTokenRequest(opts, data).then(res => {
uni.hideLoading();
let code = res.data.code
if (code == 200) {
// 这里此提示会被this.start()方法中的提示覆盖
uni.$u.toast('验证码已发送');
uni.$u.toast('别着急！短信已经发送了~');
// 通知验证码组件内部开始倒计时
that.$refs.uCode.start();
})
} else {
//uni.$u.toast('倒计时结束后再发送');
this.inputCodeShow = false
} else if (code == 1000000004) {
that.getCaptchaImage()
uni.$u.toast(res.data.msg)
} else{
uni.$u.toast(res.data.msg)
}
})
},
// 选择爱车
radioChange(item){
......@@ -264,6 +380,9 @@ export default {
},
// 获取爱车列表
getCarList(){
if(this.disabledSubmit) {
return
}
this.$http.request({
url:'/app/vehicleAdmin/list',
method:'get',
......@@ -290,7 +409,7 @@ export default {
data:{ },
load:false
}).then(res => {
that.actInfo.vi = res.uuid
that.verifyInfo.vi = res.uuid
that.captchaImg = 'data:image/gif;base64,' + res.img
})
},
......@@ -301,34 +420,45 @@ export default {
url:'/app/move/activity/c',
method:'get',
data:{ },
isFactory:false,
load:false
}).then(res => {
that.already = res.already
if(that.already) {
that.disabledSubmit = true
} else {
that.disabledSubmit = false
}
that.alreadyMsg = res.alreadyMsg
})
},
//活动检查手机信息
async checkMobileInfo() {
async checkCaptchaInfo() {
let that = this
let token = uni.getStorageSync('userToken')
let telNumber = that.actInfo.telNumber
if(!uni.$u.test.mobile(telNumber) || !token) {
return
}
await that.$http.request({
url:'/app/move/activity/c/m',
method:'post',
data:{ telNumber : telNumber},
data:{ },
load:false
}).then(res => {
that.captcha = res.captcha
//为true的时候加载图形验证码
if(that.captcha) {
that.getCaptchaImage()
this.inputCodeShow = true
} else {
that.sendSmsCode()
}
})
},
submitVerifyCode() {
let that = this
that.$refs.form2.validate().then(res => {
that.sendSmsCode()
}).catch(errors => {
if(errors && errors.length > 0) {
uni.$u.toast(errors[0].message)
}
})
},
......@@ -336,6 +466,23 @@ export default {
submitAct() {
let that = this
let token = uni.getStorageSync('userToken')
if(!token) {
uni.setStorageSync('routerLogin', '/pages/mrAct/index')
//跳转到登录页
let returnPage = '/pages/main';
let pageType = "reLaunch"
uni.navigateTo({
url: "/pages/login/index/index?returnPage=" + returnPage + '&pageType=' + pageType
})
return
}
if(that.disabledSubmit) {
this.receivedFailShow = true
return
}
that.$refs.form1.validate().then(res => {
let data = JSON.parse(JSON.stringify(that.actInfo))
let address = data.address.split('/')
......@@ -344,7 +491,6 @@ export default {
data.city = address[1]
data.district = address[2]
let opts = {
url: '/app/move/activity',
method: 'post'
......@@ -352,9 +498,10 @@ export default {
that.http.httpTokenRequest(opts, data).then(res => {
let code = res.data.code
if (code == 200) {
console.log('success', res)
} else if (code == 1000000003 || code == 1000000004) {
that.getCaptchaImage()
this.receiveSuccessShow = true
that.getActCheckInfo()
} else if (code == 1000000003) {
that.checkCaptchaInfo()
uni.$u.toast(res.data.msg)
} else if (code == 1000000005) { //禁用领取按钮
that.disabledSubmit = true
......@@ -373,22 +520,29 @@ export default {
})
},
},
onReady() {
this.$refs.form1.setRules(this.rules)
},
onLoad(option) {
onShow() {
let that = this
let token = uni.getStorageSync('userToken')
if(token) {
that.getActCheckInfo()
// that.getCaptchaImage()
}
},
}
</script>
<style lang="scss" scoped>
.u-popup-slot {
width: 750rpx;
height: 300rpx;
display: flex;
justify-content: center;
align-items: center;
}
// 爱车列表
.love_car_list{
padding:30rpx 40rpx;
......@@ -468,9 +622,7 @@ export default {
// 已绑定车辆信息
.car_info{
background: #FFFFFF;
background-color: #fff;
padding:0 40rpx;
//padding:0 40rpx;
position: relative;
top:-6rpx;
.select-car{
......@@ -484,10 +636,11 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
// border-bottom:2rpx solid rgba(0,0,0,.1);
border-bottom:2rpx solid rgba(255,225,255,.1);
.left{
font-size: 32rpx;
font-size: 30rpx;
color:#fff;
}
.right{
font-size: 28rpx;
......@@ -505,12 +658,16 @@ export default {
max-width:48rpx;height: 48rpx;
}
>view{
margin:0 10rpx;
line-height: 1.5;
color: #fff;
font-size: 26rpx;
white-space: nowrap;overflow: hidden; text-overflow:ellipsis;
>view{
font-weight:bold;
font-size: 32rpx;
color: #333;
font-size: 30rpx;
color: #fff;
white-space: nowrap;overflow: hidden; text-overflow:ellipsis;
}
}
}
......@@ -518,7 +675,8 @@ export default {
width: 100%;
}
.gt{
max-width:16rpx !important;height:20rpx !important;
width: 45rpx !important;
// max-width:16rpx !important;height:20rpx !important;
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment