Skip to content

J
jd-vx-app
Commit 87d8363f authored by 程新智's avatar 程新智 👽
Browse files
Options

油画

parent fce20f06
Show whitespace changes
Inline Side-by-side
Showing with 282 additions and 234 deletions
pages/home.vue
View file @ 87d8363f
<!--
* @Author: euzhi
* @Description: 扫码绑定
-->
<template> <template>
<view class="appCotent" v-if="show"> <view class="appCotent">
<view class="index-content"> <div class="scan">
<u-swiper :radius="0" :height="210" :list="list5" circular @change="e => current = e.current" :autoplay="false"> <div class="contentMoveCar">
<view slot="indicator" class="indicator"> <div class="car_item__one">
<view class="indicator__dot" v-for="(item, index) in list5" :key="index" :class="[index === current && 'indicator__dot--active']"> <div class="item__content">
</view> {{moveCode}}
</view>
</u-swiper>
<u-gap bgColor="transparent" height="15"></u-gap>
<div class="content__code">
<div class="code__img">
<image :src="freeCode.mainImgUrl" class="code__img"></image>
</div> </div>
<div class="code__money">
<div class="money__title">
<text>{{freeCode.title}}</text>
</div> </div>
<div class="code__tips"> <div class="car_item__three">
<text>绑定友众账号，仅需支付邮费</text> 感谢您使用挪车二维码，请完成车牌号与手机的绑定以便享受挪车服务
</div> </div>
<div class="money__num">
<text class="num__one">￥0.00</text>
<text class="num__two">￥{{freeCode.originalPrice/100}}</text>
</div> </div>
<div class="moveCarMsg">
<div class="scan__tips">
<div>请填写以下信息</div>
<div @click="goLoveCar">从爱车选择<span>
<image src="@/static/move-car/scan_right.png" /></span></div>
</div> </div>
<div class="code__get" @click="getPrice"> <div class="car__num__self">
<div> <div class="car__num">车牌号：</div>
立即 <car-number class="car__in" v-model="moveCodeInfo.carNo"></car-number>
</div> </div>
<div> <active-form :formDate.sync="formData"></active-form>
领取
</div> </div>
<div class="view__btn view__no__bind" @click="confirmBinding">
确认绑定
</div> </div>
<div class="use__text">使用说明</div>
</div> </div>
<u-gap bgColor="transparent" height="15"></u-gap>
<div class="index__item3">
<image src="@/static/index/index23.png"></image>
</div>
<u-gap bgColor="transparent" height="15"></u-gap>
<div class="index__item3-1">
<image src="@/static/index/index14.png"></image>
</div>
<u-gap bgColor="transparent" height="15"></u-gap>
<div class="index__item4">
<image src="@/static/index/index20.png"></image>
</div>
<u-gap bgColor="transparent" height="15"></u-gap>
<div class="index__item5">
<image src="@/static/index/index8.png"></image>
</div>
<u-gap bgColor="transparent" height="60"></u-gap>
</view>
</view> </view>
</template> </template>
<script> <script>
import CarNumber from "@/common/codecook-carnumber/codecook-carnumber.vue";
export default { export default {
components: {
CarNumber,
},
data() { data() {
return { return {
show: false, model1: {
current: 0, carInfo: {},
balance: "0.00", },
list5: [], formData: [
//免费挪车码 // {
freeCode: {}, // id: "kjjns", //id必须唯一 可以是数字
}; // placeholder: "请输入",
// label: "车牌号", // 提示输入名
// type: "text", //类型
// rules: {
// name: "carNo", //字段名 即提交给后端的字段
// value: "",
// verify: false, //是否开启校验
// errMess: "车牌号未填写", //校验不通过的错误提示
// },
// },
{
id: "kjjns", //id必须唯一 可以是数字
placeholder: "请输入",
label: "品牌：", // 提示输入名
type: "text", //类型
rules: {
name: "brand", //字段名 即提交给后端的字段
value: "",
verify: false, //是否开启校验
errMess: "品牌未填写", //校验不通过的错误提示
},
},
{
id: "kjjns", //id必须唯一 可以是数字
placeholder: "请输入",
label: "车型：", // 提示输入名
type: "text", //类型
rules: {
name: "carModel", //字段名 即提交给后端的字段
value: "",
verify: false, //是否开启校验
errMess: "车型未填写", //校验不通过的错误提示
},
},
{
id: "kjjns", //id必须唯一 可以是数字
placeholder: "请输入",
label: "手机号：", // 提示输入名
type: "text", //类型
rules: {
name: "phone", //字段名 即提交给后端的字段userMobile
value: "",
verify: false, //是否开启校验
errMess: "手机号未填写", //校验不通过的错误提示
},
},
{
id: "uisdfjks",
placeholder: "请输入验证码",
label: "验证码：",
type: "text",
// oneKeyPhone:true,
rules: {
name: "yzm",
value: "", //字段值
verify: false,
errMess: "验证码未填写",
},
},
],
//挪车码
moveCode: '',
//绑定挪车码信息
moveCodeInfo: {},
//选择车辆id
carId: '',
}
}, },
methods: { methods: {
getPrice() { goLoveCar() {
uni.showToast({
title: "您的免费领取次数已用完",
icon: 'none',
duration: 2000,
});
//跳转到领取优惠卷页面
uni.navigateTo({ uni.navigateTo({
url: '/pagesA/pages/index/getPrice?orderId=' + this.freeCode.id url: '/pagesB/pages/move-car/loveCar?price=1'
}); });
}, },
getMoveCode() { confirmBinding() {
for (let i in this.formData) {
let name = this.formData[i].rules.name
if (name == 'yzm') {
this.moveCodeInfo.verificationCode = this.formData[i].rules.value
} else if (name == 'phone') {
this.moveCodeInfo.userMobile = this.formData[i].rules.value
} else {
this.moveCodeInfo[name] = this.formData[i].rules.value
}
}
//console.log(this.moveCodeInfo)
this.moveCodeInfo.moveCode = this.moveCode
let opts = { let opts = {
url: '/app/mall/free/code', url: '/app/moveCode/binding/',
method: 'get' method: 'put'
}; };
this.http.httpTokenRequest(opts, {}).then(res => { this.http.httpTokenRequest(opts, this.moveCodeInfo).then(res => {
if (res.data.code == 200) { if (res.data.code == 200) {
this.freeCode = res.data.data //展示绑定成功
uni.showToast({
title: "绑定成功",
icon: "success",
});
uni.navigateTo({
url: '/pagesB/pages/move-car/myMoveCar'
})
} else {
//绑定失败，展示失败信息
uni.showToast({
title: res.data.msg,
icon: "error",
});
} }
}) })
}, },
getRotationList() { getCarInfo() {
if (this.carId) {
let opts = { let opts = {
url: '/app/index/carouse/1', url: '/app/vehicleAdmin/' + this.carId,
method: 'get' method: 'get'
}; };
this.http.httpTokenRequest(opts, {}).then(res => { this.http.httpTokenRequest(opts, {}).then(res => {
if (res.data.code == 200) { if (res.data.code == 200) {
let data = [] this.model1.carInfo = res.data.data
data = res.data.data }
let imgList = []
data.forEach(e => {
imgList.push(e.imageUrl)
}) })
this.list5 = imgList this.formData.forEach(e => {
if (e.label == '车牌号') {
e.rules.value = this.model1.carInfo.carNo
} else if (e.label == '品牌') {
e.rules.value = this.model1.carInfo.brand
} else if (e.label == '车型') {
e.rules.value = this.model1.carInfo.carModel
} }
}) })
console.log(this.formData)
}
}, },
}, },
created() { onLoad(option) {
this.getMoveCode() this.moveCode = option.moveCode
this.getRotationList()
},
mounted() {
setTimeout(() => {
this.show = true
}, 100);
}, },
onReady: function () { onShow: function () {
uni.setNavigationBarTitle({ this.getCarInfo()
title: '首页' //console.log( this.$store.state.selectedCar);
});
} }
}; }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.index-content { .scan {
background-color: #f9f9f9; /deep/ .form-container .line .input {
height: 100%; text-align: right !important;
padding-right: 30rpx;
.index__item3 {
width: 100%;
height: 356rpx;
image {
width: 100%;
height: 356rpx;
} }
}
.index__item3-1 {
width: 100%;
height: 711rpx;
image { .use__text {
width: 100%; text-align: center;
height: 711rpx; font-size: 28rpx;
} font-family: PingFang SC;
font-weight: 500;
text-decoration: underline;
color: #3A86F7;
} }
.index__item4 { .view__btn {
width: 100%; width: 670rpx;
height: 646rpx; height: 76rpx;
text-align: center;
image { line-height: 76rpx;
width: 100%; margin: 0 auto;
height: 646rpx; font-size: 32rpx;
}
} }
.index__item5 { .view__no__bind {
width: 100%; background: url('@/static/move-car/move-car-view2.png') no-repeat;
height: 1289rpx; margin-bottom: 30rpx;
background-size: contain;
image { color: rgba(255, 255, 255, 1);
width: 100%;
height: 1289rpx;
} }
/deep/ .p-l14 {
padding-left: 0 !important;
} }
.content__code { .u-checkbox-group {
padding: 28rpx; display: inline-block !important;
box-sizing: border-box; }
width: 630rpx;
height: 220rpx;
background: #ffffff;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
border-radius: 10rpx 40rpx 10rpx 10rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin-left: 30rpx;
position: relative;
.code__img { /deep/.u-checkbox-group--row {
width: 160rpx; display: inline-block !important;
height: 160rpx;
background: #3699ff;
border-radius: 10rpx;
} }
.code__money { .contentMoveCar {
margin: 0 20rpx;
.money__title { padding: 40rpx;
font-size: 36rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
line-height: 42rpx;
.code__tips { .item__label {
font-size: 26rpx; font-size: 34rpx;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
color: #666666; color: #333333;
line-height: 42rpx; line-height: 42rpx;
} }
}
.money__num { .item__label__one {
.num__one { padding-right: 34rpx;
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #e1251b;
line-height: 42rpx;
} }
.num__two { .item__content {
font-size: 22rpx; width: 500rpx;
font-size: 40rpx;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: bold;
color: #999999; color: #F1251B;
line-height: 42rpx; line-height: 42rpx;
position: relative; text-align: center;
line-height: 100rpx;
height: 100rpx;
background: url(@/static/move-car/move-car-code5.png) no-repeat;
background-size: contain;
} }
.num__two::before { .car_item__one {
content: ''; display: flex;
width: 100%; align-items: center;
height: 1rpx; margin-bottom: 30rpx;
background: #999; justify-content: center;
position: absolute;
bottom: 16rpx;
left: 8rpx;
}
}
} }
.code__get { .car_item__three {
position: absolute; margin-top: 40rpx;
right: -60rpx; font-size: 24rpx;
width: 90rpx;
height: 90rpx;
font-size: 28rpx;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
color: #ffffff; color: #F88D28;
padding-top: 4rpx; line-height: 36rpx;
text-indent: 2em;
padding: 30rpx;
box-sizing: border-box; box-sizing: border-box;
text-align: center; background: url(@/static/move-car/move-car-code6.png) no-repeat;
background: url("@/static/index/index26.png") no-repeat;
background-size: contain; background-size: contain;
} }
} }
/deep/ .u-swiper__indicator { .moveCarMsg {
right: 0 !important; background: #FFFFFF;
} box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
border-radius: 20rpx;
padding: 32rpx 40rpx;
position: relative;
top: -56rpx;
/deep/ .u-swiper { .car__num__self {
border-radius: 0 0 0 100rpx !important; display: flex;
align-items: center;
justify-content: space-between;
.car__num {
width: 160rpx;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
}
} }
.indicator { .scan__tips {
@include flex(row); display: flex;
justify-content: center; align-items: center;
justify-content: space-between;
margin-bottom: 30rpx;
>div:nth-of-type(1) {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
}
&__dot { >div:nth-of-type(2) {
height: 20rpx; font-size: 28rpx;
width: 20rpx; font-family: PingFang SC;
border-radius: 100%; font-weight: 500;
background-color: rgba(255, 255, 255, 0.35); color: #F88D28;
margin: 0 10rpx;
transition: background-color 0.3s;
&--active { span {
background-color: #e1251b; image {
width: 11rpx;
height: 18rpx;
} }
margin-left: 10rpx;
} }
} }
.indicator-num {
padding: 4rpx 0;
background-color: rgba(0, 0, 0, 0.35);
border-radius: 100%;
width: 35px;
@include flex;
justify-content: center;
&__text {
color: #ffffff;
font-size: 24rpx;
} }
} }
} }
......
pagesB/pages/move-car/scan.vue
View file @ 87d8363f
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
</div> </div>
<div class="car__num__self"> <div class="car__num__self">
<div class="car__num">车牌号：</div> <div class="car__num">车牌号：</div>
<car-number v-model="moveCodeInfo.carNo"></car-number> <car-number class="car__input" v-model="moveCodeInfo.carNo"></car-number>
</div> </div>
<active-form :formDate.sync="formData"></active-form> <active-form :formDate.sync="formData"></active-form>
</div> </div>
...@@ -309,6 +309,9 @@ export default { ...@@ -309,6 +309,9 @@ export default {
font-weight: 500; font-weight: 500;
color: #666666; color: #666666;
} }
.car__input{
width: 100%;
}
} }
.scan__tips { .scan__tips {
......
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