Skip to content

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

油画

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