Skip to content

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

增加挪车码推广活动

parent a01abb97
Hide whitespace changes
Inline Side-by-side
Showing with 449 additions and 12 deletions
pagesA/pages/popAct/index.vue
View file @ eda800c7
<!-- 挪车码领取活动页面 -->
<template>
<view>
<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: 545.8rpx; display: flex; justify-content: center;align-items: center;
background: url('http://jdnc-oss.uzosp.com/2023/02/14/153d2fa24e13437595da1cebf9f25657.png') no-repeat; background-size: 100% 100%;">
<view style="margin-top: 35rpx; width: 550rpx; height: 410rpx;">
<view class="car_info">
<!-- <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:400rpx;" v-if="carInfo" @click="getCarList">
<image :src="carInfo.logoUrl" mode=""></image>
<view>
<view>
{{carInfo.brand + "-" + carInfo.seriesName}}
</view>
{{carInfo.carModel}}
</view>
<view class="gt">
<u-icon name="arrow-right" color="#fff"></u-icon>
</view>
</view>
<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>
<u--form labelPosition="left" errorType="toast" :labelStyle="{'fontSize': '30rpx', color : '#fff'}" labelWidth="200rpx" :model="actInfo" :rules="rules" ref="form1">
<u-form-item label="图形验证:" prop="vc" v-if="inputCodeShow">
<u--input v-model="actInfo.vc" maxlength="20" fontSize="28rpx" color="#fff" placeholderStyle="color:rgba(255,225,255,.6)" 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 style="margin-top: 38rpx;display: flex; justify-content: center;">
<view style="background: url('http://jdnc-oss.uzosp.com/2023/01/11/6ca8d901b4654bfaaeb6c43e64010b9e.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:#BE2D2D;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>
<!-- 爱车选择弹框 -->
<u-popup :show="selectCar" mode="bottom" round="10" @close="selectCar = false">
<view class="love_car_list">
<view class="love_title">
选择车辆
<text @click.stop="selectCar = false">x</text>
</view>
<view class="love_list">
<view v-if="carList.length != 0">
<view class="love_item" v-for="(item,i) in carList" :key="i" @click="radioChange(item)">
<image :src="item.logoUrl"></image>
<view class="love_info">
<view>
{{item.brand + "-" + item.seriesName}}
</view>
<view>
{{item.carModel}}
</view>
</view>
<view class="radio">
<image src="@/static/move-car/radio-active.png" v-if="item.id === radioValue"></image>
<image src="@/static/move-car/radio.png" v-else></image>
</view>
</view>
</view>
<view style="padding-top:140rpx;text-align: center;" v-else>
暂时没有车辆，请添加！
</view>
</view>
<view class="love_btn">
<button type="primary" @click="addCar">
<image src="@/static/move-car/love-car5.png">添加车辆
</button>
</view>
</view>
</u-popup>
</view>
</view>
</view>
<view style="margin: 0 auto; width: 704rpx;">
<image style="width: 704rpx;height: 427.4rpx;" src="http://jdnc-oss.uzosp.com/2023/02/14/c96367c6ad1d4914a6a25af82dfcdcb9.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>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
export default {
data() {
return {
inputCodeShow:false,
//选择车辆相关 begin
selectCar:false,
radioValue:"",
//选择车辆id
carId: '',
carList:[],
carInfo: null,
//选择车辆相关 end
//是否要显示图形验证码
captcha : false,
captchaImg : '',
actInfo: {
carId:'',
vc:'',
vi: '',
},
rules: {
'carId': [{
type: 'string',
required: true,
message: '请选择品牌车型',
trigger: ['blur', 'change']
}],
'vc': [{
type: 'number',
required: true,
message: '请输入图形验证码',
trigger: ['blur', 'change']
}],
},
appName: '京东挪车牌领取',
configData : {},
}
}
},
methods: {
goToIndex() {
uni.reLaunch({
url: '/pages/main'
})
},
checkLogin() {
let token = uni.getStorageSync('userToken')
if(!token) {
uni.setStorageSync('routerLoginPageType', 'switchTab')
//跳转到登录页
let returnPage = '/pages/main';
let pageType = "reLaunch"
uni.navigateTo({
url: "/pages/login/index/index?returnPage=" + returnPage + '&pageType=' + pageType
})
return null
}
return 1
},
// 选择爱车
radioChange(item){
this.carInfo = item
this.radioValue = item.id
this.selectCar = false
this.actInfo.carId = item.id
},
// 获取爱车列表
getCarList(){
let v = this.checkLogin()
if(v) {
this.$http.request({
url:'/app/vehicleAdmin/list',
method:'get',
data:{},
isFactory:false,
}).then(res => {
this.carList = res.data || []
this.selectCar = true
})
}
},
// 添加车辆
addCar() {
this.selectCar = false
uni.navigateTo({
url: '/pages/transitionPage'
});
},
//活动检查信息
getCaptchaImage() {
let that = this
that.$http.request({
url:'/app/pop/act/captchaImage',
method:'get',
data:{ },
load:false
}).then(res => {
that.actInfo.vi = res.uuid
that.captchaImg = 'data:image/gif;base64,' + res.img
})
},
//活动检查手机信息
async checkCaptchaInfo() {
let that = this
await that.$http.request({
url:'/app/pop/act/c',
method:'get',
data:{ },
load:false
}).then(res => {
that.captcha = res.captcha
that.configData = res.config
//为true的时候加载图形验证码
if(that.captcha) {
that.getCaptchaImage()
this.inputCodeShow = true
this.actInfo.vc = null
} else {
this.inputCodeShow = false
}
})
},
toJdPage() {
let item = this.configData
this.$goToLocation(item)
},
//活动检查信息
submitAct() {
let that = this
let v = that.checkLogin()
if(!v) {
return
}
that.$refs.form1.validate().then(res => {
let opts = {
url: '/app/pop/act',
method: 'post'
}
that.http.httpTokenRequest(opts, that.actInfo).then(res => {
let code = res.data.code
if (code == 200) {
that.checkCaptchaInfo()
//跳转到京东主站
that.toJdPage()
} else{
uni.$u.toast(res.data.msg)
that.checkCaptchaInfo()
}
})
}).catch(errors => {
if(!that.actInfo.carId) {
uni.$u.toast('请选择品牌车型')
return
}
if(errors && errors.length > 0) {
uni.$u.toast(errors[0].message)
}
})
},
},
onReady() {
this.$refs.form1.setRules(this.rules)
},
onShareAppMessage(res) {
if (res.from === 'menu') {
return {
title: this.appName,
path: '/pages/main?returnPage=/pagesA/pages/popAct/index'
};
}
},
onShareTimeline(res){
return {
title: this.appName,
path: '/pages/main?returnPage=/pagesA/pages/popAct/index'
};
},
onLoad(option) {
uni.setNavigationBarTitle({
title: this.appName,
});
let that = this
let token = uni.getStorageSync('userToken')
if(token) {
that.checkCaptchaInfo()
}
},
}
</script>
<style>
</style>
<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;
.love_title{
text-align: center;
font-size: 36rpx;
font-weight: bold;
margin-bottom:30rpx;
position: relative;
text{
position: absolute;
right:20rpx;
top:-4rpx;
font-size:40rpx;
font-weight:500;
color: #666;
}
}
.love_list{
height:400rpx;
overflow: auto;
.love_item{
padding:20rpx 0;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 2rpx solid #E8E8E8;
&:first-child{
border:none;
}
image{
width:100rpx;height:100rpx;
}
.love_info{
width:450rpx;
>view{
&:first-child{
font-size:34rpx;
font-weight: bold;
margin-bottom:10rpx;
}
&:last-child{
font-size: 28rpx;
color:#666;
}
}
}
.radio{
width:60rpx;
>image{
width:48rpx;height:48rpx;
}
}
}
}
.love_btn{
padding:50rpx;
button {
height:80rpx;
line-height:80rpx;
border-radius:50rpx;
// background: linear-gradient(150deg, #E1251B, #E14A1B);
background: linear-gradient(-36deg, #1C81E8, #1CA2E8);
box-shadow:2rpx 4rpx 6rpx 0 rgba(20, 68, 225, 0.29);
// box-shadow: 0 6rpx 13rpx 2rpx rgba(225, 50, 27, 0.17);
border:0;
font-size:32rpx !important;
>image{
width:30rpx;height:30rpx;
margin-right:10rpx;
position: relative;
top:4rpx;
}
}
}
}
// 已绑定车辆信息
.car_info{
//padding:0 40rpx;
position: relative;
top:-6rpx;
.select-car{
line-height:80rpx;
text-align: right;
font-size: 28rpx;
color: #E1251B;
}
.info_list{
line-height:90rpx;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom:2rpx solid rgba(255,225,255,.1);
.left{
font-size: 30rpx;
color:#fff;
}
.right{
font-size: 28rpx;
color: #666;
line-height: 1.8;
word-wrap:break-word;
text-align: right;
&.info{
display: flex;
align-items: center;
justify-content: flex-end;
text-align: left;
// padding:20rpx 0;
image{
max-width:48rpx;height: 48rpx;
}
>view{
line-height: 1.5;
color: #fff;
font-size: 26rpx;
white-space: nowrap;overflow: hidden; text-overflow:ellipsis;
>view{
font-weight:bold;
font-size: 30rpx;
color: #fff;
white-space: nowrap;overflow: hidden; text-overflow:ellipsis;
}
}
}
.car__input{
width: 100%;
}
.gt{
width: 45rpx !important;
// max-width:16rpx !important;height:20rpx !important;
}
}
}
.car_btn{
width: 400rpx;
line-height: 76rpx;
background: #FFFFFF;
border: 2rpx solid #DDDDDD;
border-radius: 10rpx;
text-align: center;
margin:30rpx auto 0;
font-size: 32rpx;
color: #666;
}
}
</style>
\ No newline at end of file
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