811 lines
23 KiB
Vue
811 lines
23 KiB
Vue
<template>
|
|
<view class="bindview">
|
|
<!-- 绑定车辆 -->
|
|
<view class="bgcview">
|
|
<view class="top">
|
|
<text class="top_txt">填写车辆信息</text>
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<image class="top_imgview" :src="`${config.aliyunOssUrl}/static/images/app/serve/re_bind_bgc.png`"
|
|
mode=""></image>
|
|
<!-- #endif -->
|
|
<!-- #ifdef APP -->
|
|
<image class="top_imgview" src="@/static/images/app/serve/re_bind_bgc.png" mode=""></image>
|
|
<!-- #endif -->
|
|
</view>
|
|
<view class="content">
|
|
<view class="form-box">
|
|
<u-form labelPosition="left" :model="formData" ref="uForm" label-width='190rpx'>
|
|
<u-form-item label="车牌号码" border-bottom='true' prop="carNo"
|
|
:rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
|
|
<view class="fcar_letter" @click="keyboardShow=true">
|
|
<view class="f_car_num">
|
|
<view class="fcn_l"> {{ formData.carNo.charAt(0) }} </view>
|
|
<view class="fcn_r">
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<image class="fcn_r_img"
|
|
:src="`${config.aliyunOssUrl}/static/images/app/serve/re_bind_down.png`"
|
|
mode=""></image>
|
|
<!-- #endif -->
|
|
<!-- #ifdef APP -->
|
|
<image class="fcn_r_img" src="@/static/images/app/serve/re_bind_down.png"
|
|
mode=""></image>
|
|
<!-- #endif -->
|
|
</view>
|
|
</view>
|
|
<view class="letter_number">
|
|
<view class="ln_one"> {{ formData.carNo.charAt(1) }} </view>
|
|
<view class="ln_point"> {{ formData.carNo.charAt(2) }} </view>
|
|
<view class="ln_one"> {{ formData.carNo.charAt(3) }} </view>
|
|
<view class="ln_one"> {{ formData.carNo.charAt(4) }} </view>
|
|
<view class="ln_one"> {{ formData.carNo.charAt(5) }} </view>
|
|
<view class="ln_one"> {{ formData.carNo.charAt(6) }} </view>
|
|
<view class="ln_one"> {{ formData.carNo.charAt(7) }} </view>
|
|
<view class="ln_one"> {{ formData.carNo.charAt(8) }} </view>
|
|
</view>
|
|
</view>
|
|
</u-form-item>
|
|
<!-- <u-form-item label="车型" border-bottom='true'>
|
|
<view class="lr" v-if="carInfo.modelName">
|
|
{{carInfo.modelName?carInfo.modelName:'--'}}
|
|
</view>
|
|
<view class="lr" v-else @click="showModelName=true">
|
|
<u--input placeholder="请选择车型(非必选)" v-model="formData.modelName" :readonly='true'
|
|
placeholderStyle=" color: #999999 " suffixIcon="arrow-right"
|
|
suffixIconStyle="color: #999999" border='none' inputAlign='right'></u--input>
|
|
</view>
|
|
</u-form-item> -->
|
|
<u-form-item label="品牌" prop="brandName" borderBottom @click="hideKeyboard()" ref="item1"
|
|
labelWidth="140rpx">
|
|
<u--input v-model="carInfo.brandName" disabled disabledColor="#ffffff" placeholder="请选择"
|
|
inputAlign="right" border="none"></u--input>
|
|
<u-icon slot="right" color="#999" name="arrow-right"></u-icon>
|
|
</u-form-item>
|
|
<u-form-item label="车系" prop="modelName" borderBottom @click="modelShow=true" ref="item1"
|
|
labelWidth="140rpx">
|
|
<u--input v-model="carInfo.modelName" disabled disabledColor="#ffffff" placeholder="请选择"
|
|
inputAlign="right" border="none"></u--input>
|
|
<u-icon slot="right" color="#999" name="arrow-right"></u-icon>
|
|
</u-form-item>
|
|
<u-form-item label="车型" prop="vehicleModelName" borderBottom @click="powerShow=true" ref="item1"
|
|
labelWidth="140rpx">
|
|
<u--input v-model="carInfo.vehicleModelName" disabled disabledColor="#ffffff" placeholder="请选择"
|
|
inputAlign="right" border="none"></u--input>
|
|
<u-icon slot="right" color="#999" name="arrow-right"></u-icon>
|
|
</u-form-item>
|
|
<u-form-item label="上传行驶证" border-bottom='true'>
|
|
<view class="lr" v-if='carInfo.driveLicense'>
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<image v-if='carInfo.driveLicense' style="width: 112rpx; height: 112rpx;"
|
|
:src="carInfo.driveLicense"></image>
|
|
<image v-else style="width: 112rpx; height: 112rpx;"
|
|
:src="`${config.aliyunOssUrl}/static/images/app/serve/re_bind_travel.png`" mode="">
|
|
</image>
|
|
<!-- #endif -->
|
|
<!-- #ifdef APP -->
|
|
<image v-if='carInfo.driveLicense' style="width: 112rpx; height: 112rpx;"
|
|
:src="carInfo.driveLicense"></image>
|
|
<image v-else style="width: 112rpx; height: 112rpx;"
|
|
src="@/static/images/app/serve/re_bind_travel.png" mode=""></image>
|
|
<!-- #endif -->
|
|
</view>
|
|
<view v-else class="form-item">
|
|
<text style="color:#999999" v-show="!formData.driveLicense">(必选)</text>
|
|
<view class="image-box rel">
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<image class="upload-bg" v-show="formData.driveLicense" :src="formData.driveLicense"
|
|
mode=""></image>
|
|
<image v-show="!formData.driveLicense" class="upload-bg"
|
|
:src="`${config.aliyunOssUrl}/static/images/app/serve/re_bind_travel.png`"
|
|
mode="" @click="upload('image', 'driveLicense')"></image>
|
|
<image v-show="formData.driveLicense" class="reduce abs"
|
|
:src="`${config.aliyunOssUrl}/static/images/app/serve/realname_clea.png`"
|
|
mode="" @click="DelPic('driveLicense')"></image>
|
|
<!-- #endif -->
|
|
<!-- #ifdef APP -->
|
|
<image class="upload-bg" v-show="formData.driveLicense" :src="formData.driveLicense"
|
|
mode=""></image>
|
|
<image v-show="!formData.driveLicense" class="upload-bg"
|
|
src="@/static/images/app/serve/re_bind_travel.png" mode=""
|
|
@click="upload('image', 'driveLicense')"></image>
|
|
<image v-show="formData.driveLicense" class="reduce abs"
|
|
src="@/static/images/app/serve/realname_clea.png" mode=""
|
|
@click="DelPic('driveLicense')"></image>
|
|
<!-- #endif -->
|
|
</view>
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item label="解绑日期" prop="dataTime" @click="datetimeShow=true" border-bottom='true'>
|
|
<view class="lr">
|
|
<u--input v-model="dataTime" placeholder="请选择(必选)" :readonly='true'
|
|
suffixIcon="arrow-right" suffixIconStyle="color: #999999"
|
|
placeholderStyle=" color: #999999 " border="none" inputAlign='right'></u--input>
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item label="车辆类型" border-bottom='true'>
|
|
<view class="lr" v-if="carInfo.category">
|
|
{{carInfo.category==1?'公户':carInfo.category==2?'私户':'--'}}
|
|
</view>
|
|
<view class="lr" v-else @click="showCategory=true">
|
|
<u--input placeholder="请选择(非必选)" v-model="category" :readonly='true'
|
|
placeholderStyle=" color: #999999 " suffixIcon="arrow-right"
|
|
suffixIconStyle="color: #999999" border='none' inputAlign='right'></u--input>
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item label="所属公司" border-bottom='true'
|
|
v-if="carInfo.category==1 || formData.category==1">
|
|
<view class="lr" v-if="carInfo.category">
|
|
{{carInfo.company?carInfo.company:'--'}}
|
|
</view>
|
|
<view class="lr" v-else>
|
|
<u--input placeholder="请填写(非必填)" v-model="formData.company"
|
|
placeholderStyle=" color: #999999 " border='none' inputAlign='right'></u--input>
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item label="车主姓名" border-bottom='true'>
|
|
<!-- <view class="lr" v-if="carInfo.ownerName">
|
|
{{carInfo.ownerName?carInfo.ownerName:'--'}}
|
|
</view> -->
|
|
<view class="lr" >
|
|
<u--input placeholder="请填写(非必填)" v-model="formData.ownerName"
|
|
placeholderStyle=" color: #999999" inputAlign="right" border='none'></u--input>
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item label="使用性质" border-bottom='true'>
|
|
<view class="lr" v-if="carInfo.type">
|
|
{{carInfo.type==1?'预约出租客运':carInfo.type==2?'非营运租赁':carInfo.type==3?'租赁':'--'}}
|
|
</view>
|
|
<view class="lr" v-else @click="showType=true">
|
|
<u--input placeholder="请选择(非必选)" v-model="type" :readonly='true'
|
|
placeholderStyle=" color: #999999 " suffixIcon="arrow-right"
|
|
suffixIconStyle="color: #999999" border='none' inputAlign='right'></u--input>
|
|
</view>
|
|
</u-form-item>
|
|
</u-form>
|
|
</view>
|
|
</view>
|
|
<u-button @click="submit" :color='isFormDataEmpty ?"#84D2CF":"#13AFA8"' shape="circle">提交</u-button>
|
|
<!-- 车牌号 -->
|
|
<u-keyboard mode="car" @change="keyboardChange" @confirm='keyboardConfirmBtn' :show="keyboardShow"
|
|
@backspace="backspace" safeAreaInsetBottom autoChange @cancel="cancel" @close="carClose">
|
|
</u-keyboard>
|
|
<!-- 日期 -->
|
|
<u-datetime-picker ref="datetimePicker" :show="datetimeShow" v-model="datetimeValue" mode="date" title='请选择'
|
|
:formatter="formatter" @change="datetimeChange" @confirm='datetimeConfirmBtn'
|
|
@cancel="datetimeShow=false">
|
|
</u-datetime-picker>
|
|
<!-- 车型 -->
|
|
<!-- <u-popup :show="showModelName" mode="right" @close="showModelName=false">
|
|
<view class="model_view">
|
|
<view class="view_txt"> 请选择车型 </view>
|
|
<view class="list_view">
|
|
<u-list @scrolltolower="scrolltolower" height="400">
|
|
<u-list-item v-for="(item, index) in modelNameList" :key="index">
|
|
<u-cell :title="`${item.brandName} —— ${item.name}`" @click="clickCell(item)"></u-cell>
|
|
</u-list-item>
|
|
</u-list>
|
|
</view>
|
|
</view>
|
|
</u-popup> -->
|
|
<!-- 车辆类型 -->
|
|
<u-picker :show="showCategory" :columns="columnsCategory" keyName="category" @confirm='confirmCategoryBtn'
|
|
@cancel='showCategory=false'></u-picker>
|
|
<!-- 使用性质 -->
|
|
<u-picker :show="showType" :columns="columnsType" keyName="type" @confirm='confirmTypeBtn'
|
|
@cancel='showType=false'></u-picker>
|
|
|
|
<popup ref="popupRef" :content='content' @sureBtn='sureBtn' @cancel='cancelBtn'></popup>
|
|
<!-- 品牌 -->
|
|
<u-picker :show="showSex" :columns="actionsList" keyName="name" @cancel="showSex=false"
|
|
@confirm="actCarTypeFn" @close="showSex=false"></u-picker>
|
|
<!-- 车系 -->
|
|
<u-picker :show="modelShow" :columns="modelList" keyName="name" @cancel="modelShow=false"
|
|
@close="modelShow=false" @confirm="actCarModelFn"></u-picker>
|
|
<!-- 车型 -->
|
|
<u-picker :show="powerShow" :columns="powerList" keyName="name" @cancel="powerShow=false"
|
|
@close="powerShow=false" @confirm="actPowerlFn"></u-picker>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
modelBrandList,
|
|
allBrandModelList
|
|
} from "@/api/carShop/car/car.js"
|
|
import popup from './popup';
|
|
import {
|
|
userBindAPI,
|
|
getCarInfoAPI,
|
|
modelListAPI,
|
|
getMineInfoAPI,
|
|
realNameDetaiNowlAPI
|
|
} from '@/api/serve/repair'
|
|
import config from '@/config';
|
|
export default {
|
|
components: {
|
|
popup
|
|
},
|
|
data() {
|
|
return {
|
|
showSex: false,
|
|
actionsList: [],
|
|
modelShow: false,
|
|
modelList: [],
|
|
powerShow: false,
|
|
powerList: [],
|
|
content: '',
|
|
title: '',
|
|
whoBtn: null,
|
|
config,
|
|
screenHeight: wx.getSystemInfoSync().screenHeight,
|
|
datetimeShow: false,
|
|
datetimeValue: Number(new Date()),
|
|
keyboardShow: false,
|
|
alltime: '',
|
|
// 车型-车辆-性质
|
|
formData: {
|
|
carNo: "",
|
|
category: null,
|
|
company: "",
|
|
driveLicense: "",
|
|
ownerName: "",
|
|
type: null,
|
|
unbindTime: "",
|
|
modelName: ''
|
|
},
|
|
carInfo: {},
|
|
noneInfo: true,
|
|
dataTime: '',
|
|
// 车型
|
|
modelData: {
|
|
page: 1,
|
|
limit: 20,
|
|
},
|
|
modelTotal: 0,
|
|
modelTotalPage: 0,
|
|
// showModelName: false,
|
|
modelNameList: [],
|
|
nameList: [],
|
|
// 车辆类型
|
|
category: '',
|
|
showCategory: false,
|
|
columnsCategory: [
|
|
// ['公户', '私户']
|
|
[{
|
|
category: '公户',
|
|
id: 1
|
|
},
|
|
{
|
|
category: '私户',
|
|
id: 2
|
|
}
|
|
]
|
|
],
|
|
// 使用性质
|
|
type: '',
|
|
showType: false,
|
|
columnsType: [
|
|
// ['预约出租客运', '非营运租赁','租赁']
|
|
[{
|
|
type: '预约出租客运',
|
|
id: 1
|
|
},
|
|
{
|
|
type: '非营运租赁',
|
|
id: 2
|
|
},
|
|
{
|
|
type: '租赁',
|
|
id: 3
|
|
}
|
|
]
|
|
],
|
|
// 用户信息
|
|
mineInfo: {}
|
|
}
|
|
},
|
|
computed: {
|
|
isFormDataEmpty() {
|
|
const {
|
|
ownerName,
|
|
carNo,
|
|
category,
|
|
carType,
|
|
company,
|
|
driveLicense,
|
|
type,
|
|
unbindTime,
|
|
} = this.formData;
|
|
return !carNo && !driveLicense && !unbindTime;
|
|
}
|
|
},
|
|
onShow() {
|
|
// this.modelListFn()
|
|
this.init()
|
|
},
|
|
watch: {
|
|
formData: {
|
|
handler(val) {
|
|
if (val.carNo.length > 9) {
|
|
this.$toast('超出车牌长度')
|
|
}
|
|
},
|
|
deep: true
|
|
},
|
|
nameList: {
|
|
handler(nV, oV) {
|
|
if (this.modelTotal > this.modelNameList.length) {
|
|
this.modelNameList = Array.from(new Set(this.modelNameList.concat(nV)))
|
|
}
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
onReady() {
|
|
this.$refs.datetimePicker.setFormatter(this.formatter)
|
|
},
|
|
methods: {
|
|
//初始化
|
|
init() {
|
|
//获取车型
|
|
allBrandModelList().then(res => {
|
|
console.log(res.data, '品牌车系车型列表');
|
|
this.actionsList = [res.data]
|
|
})
|
|
// 用户信息
|
|
getMineInfoAPI().then(res => {
|
|
this.mineInfo = res.data
|
|
})
|
|
},
|
|
//选择
|
|
hideKeyboard(type) {
|
|
if (!this.carIdflag) {
|
|
this.showSex = true;
|
|
}
|
|
},
|
|
//选择车型
|
|
actPowerlFn(e) {
|
|
this.powerShow = false
|
|
this.carInfo.vehicleModelName = e.value[0].name
|
|
this.carInfo.modelId = e.value[0].id
|
|
this.formData.modelId = e.value[0].id
|
|
},
|
|
//确认车型
|
|
actCarModelFn(e) {
|
|
// console.log(e);
|
|
this.carInfo.modelName = e.value[0].name
|
|
this.powerList = [e.value[0].vehicleModelResponseList]
|
|
this.modelShow = false
|
|
},
|
|
//确认选择品牌
|
|
actCarTypeFn(e) {
|
|
this.carInfo.brandName = e.value[0].name
|
|
this.modelList = [e.value[0].carModelList]
|
|
this.showSex = false
|
|
},
|
|
// 使用性质
|
|
confirmTypeBtn(e) {
|
|
this.formData.type = e.value[0].id
|
|
this.type = e.value[0].type
|
|
this.showType = false
|
|
},
|
|
// 车辆类型
|
|
confirmCategoryBtn(e) {
|
|
this.formData.category = e.value[0].id
|
|
this.category = e.value[0].category
|
|
this.showCategory = false
|
|
},
|
|
|
|
// 车型
|
|
scrolltolower() {
|
|
if (this.modelData.page < this.modelTotalPage) {
|
|
this.modelData.page += 1
|
|
}
|
|
this.modelListFn()
|
|
},
|
|
// clickCell(item) {
|
|
// this.formData.modelName = item.name
|
|
// this.showModelName = false
|
|
// },
|
|
// 车辆型号
|
|
modelListFn() {
|
|
// 车辆型号
|
|
modelListAPI(this.modelData).then(res => {
|
|
this.nameList = res.data.list
|
|
this.modelTotal = res.data.total
|
|
this.modelTotalPage = res.data.totalPage
|
|
if (this.modelNameList.length == 0) {
|
|
this.modelNameList = res.data.list
|
|
}
|
|
}).catch(err => {
|
|
this.$toast(err)
|
|
})
|
|
},
|
|
|
|
sureBtn() {
|
|
uni.navigateTo({
|
|
url: "/pages/driver/serve/repair/realname",
|
|
});
|
|
},
|
|
cancelBtn() {
|
|
|
|
},
|
|
// 提交
|
|
async submit() {
|
|
if (!this.carInfo.company) {
|
|
this.carInfo.company = this.formData.company
|
|
}
|
|
this.carInfo.ownerName = this.formData.ownerName
|
|
// 未实名 isCertification => true已实名
|
|
if (this.mineInfo.isCertification) {
|
|
if (this.noneInfo) {
|
|
console.log(this.formData.unbindTime);
|
|
//carInfo.unbindTime
|
|
this.carInfo.unbindTime = this.formData.unbindTime
|
|
console.log(11111,this.carInfo);
|
|
userBindAPI(this.carInfo).then(res => {
|
|
console.log(11111,res);
|
|
if(res.data=='申请中'){
|
|
this.$toast('已提交换绑申请,请等待~')
|
|
}else{
|
|
uni.redirectTo({
|
|
url: '/pages/driver/serve/repair/bind_result'
|
|
})
|
|
}
|
|
})
|
|
} else {
|
|
userBindAPI(this.formData).then(res => {
|
|
console.log(2222,res);
|
|
if(res.data=='申请中'){
|
|
this.$toast('已提交换绑申请,请等待~')
|
|
}else{
|
|
uni.redirectTo({
|
|
url: '/pages/driver/serve/repair/bind_result'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
} else {
|
|
// this.$toast('请先完善实名信息')
|
|
this.$refs.popupRef.showPopup = true;
|
|
this.content = '您还没有完善信息，是否现在去完善信息！'
|
|
// uni.showModal({
|
|
// title: "您还没有完善信息，是否现在去完善信息！",
|
|
// cancelText: "稍后再去",
|
|
// confirmText: "现在就去",
|
|
// success: (res) => {
|
|
// if (res.confirm) {
|
|
// uni.navigateTo({
|
|
// url: "/pages/serve/repair/realname",
|
|
// });
|
|
// } else if (res.cancel) {
|
|
// console.log("用户点击取消");
|
|
// }
|
|
// },
|
|
// });
|
|
}
|
|
},
|
|
cancel() {
|
|
this.carClose()
|
|
this.formData.carNo = ''
|
|
},
|
|
carClose() {
|
|
this.keyboardShow = false
|
|
},
|
|
// 点击确认
|
|
keyboardConfirmBtn() {
|
|
getCarInfoAPI({
|
|
carNo: this.formData.carNo
|
|
}).then(res => {
|
|
if (res.data) {
|
|
console.log(res.data);
|
|
this.carInfo = res.data
|
|
this.$store.dispatch('CarNo', this.formData.carNo)
|
|
} else {
|
|
// this.$u.toast('车辆信息不存在')
|
|
this.carInfo = {}
|
|
this.noneInfo = false
|
|
}
|
|
}).finally(() => {
|
|
this.keyboardShow = false
|
|
// this.$store.dispatch('CarNo', this.formData.carNo)
|
|
})
|
|
},
|
|
// 退格
|
|
backspace() {
|
|
if (this.formData.carNo) this.formData.carNo = this.formData.carNo.substring(0, this.formData.carNo
|
|
.length - 1)
|
|
},
|
|
// 车牌格式 按键被点击
|
|
keyboardChange(e) {
|
|
let a = this.checkType(e);
|
|
if (a == 1) {
|
|
if (this.formData.carNo) {
|
|
this.formData.carNo = this.replaceStr(this.formData.carNo, 0, e)
|
|
} else {
|
|
this.formData.carNo = e
|
|
}
|
|
} else {
|
|
if (this.formData.carNo.length == 2) {
|
|
this.formData.carNo += ('·' + e)
|
|
} else {
|
|
if (this.formData.carNo.length < 9) {
|
|
this.formData.carNo += e
|
|
} else {
|
|
this.$toast('超出车牌长度')
|
|
}
|
|
}
|
|
}
|
|
},
|
|
// 下标替换字符串
|
|
replaceStr(str, index, char) {
|
|
const strAry = str.split('');
|
|
strAry[index] = char;
|
|
return strAry.join('');
|
|
},
|
|
checkType(str) {
|
|
if (/^[\u4e00-\u9fa5]+$/.test(str)) {
|
|
// 中文
|
|
return 1
|
|
} else if (/^[0-9]+$/.test(str)) {
|
|
// 数字
|
|
return 2
|
|
} else if (/^[a-zA-Z]+$/.test(str)) {
|
|
// 字母
|
|
return 3
|
|
}
|
|
},
|
|
|
|
|
|
// 日期
|
|
formatter(type, datetimeValue) {
|
|
if (type === 'year') {
|
|
return `${datetimeValue}年`
|
|
};
|
|
if (type === 'month') {
|
|
return `${datetimeValue}月`
|
|
};
|
|
if (type === 'day') {
|
|
return `${datetimeValue}日`
|
|
};
|
|
return datetimeValue
|
|
},
|
|
datetimeChange(val) {
|
|
this.datetimeValue = val.value
|
|
},
|
|
|
|
datetimeConfirmBtn() {
|
|
this.datetimeShow = false
|
|
const date = new Date(this.datetimeValue)
|
|
const year = date.getFullYear()
|
|
const month = date.getMonth() + 1
|
|
const day = date.getDate()
|
|
const hour = date.getHours()
|
|
const minute = date.getMinutes()
|
|
const second = date.getSeconds()
|
|
this.alltime = year + '-' + this.addZero(month) + '-' + this.addZero(day) + ' ' + this.addZero(hour) +
|
|
':' +
|
|
this.addZero(minute) + ':' + this.addZero(second)
|
|
this.formData.unbindTime = this.alltime
|
|
this.dataTime = `${year}年${month}月${day}日`
|
|
},
|
|
addZero(num) {
|
|
if (parseInt(num) < 10) {
|
|
num = '0' + num
|
|
}
|
|
return num
|
|
},
|
|
|
|
// 上传
|
|
upload(name, key, type) {
|
|
if (name === 'image') {
|
|
this.formData.type = 1
|
|
this.getImage(key);
|
|
} else if (name == 'all') {
|
|
|
|
} else {
|
|
this.formData.type = 2
|
|
this.getVideo(key)
|
|
}
|
|
},
|
|
//传图片
|
|
getImage(key) {
|
|
this.$util.uploadImageOne({
|
|
count: 1,
|
|
sizeType: ['compressed'],
|
|
sourceType: ['album', 'camera'],
|
|
dir: 'crmebimage/public/product/'
|
|
}, null, res => {
|
|
this.formData[key] = res.data
|
|
this.carInfo[key] = res.data
|
|
this.videoOrImage = false
|
|
uni.hideLoading();
|
|
});
|
|
},
|
|
//传视频
|
|
getVideo(key) {
|
|
this.$util.uploadVideo({
|
|
dir: 'crmebimage/public/product/'
|
|
},
|
|
e => {
|
|
uni.$u.debounce(() => {
|
|
this.$refs.uToast.show({
|
|
type: 'loading',
|
|
duration: 10000,
|
|
message: '上传进度' + e.progress + '%'
|
|
});
|
|
}, 100, true);
|
|
},
|
|
false,
|
|
res => {
|
|
this.formData[key] = res.data
|
|
this.videoImage = res.data + '?x-oss-process=video/snapshot,t_1000,ar_auto,m_fast,f_png,w_500'
|
|
this.$store.dispatch('SetForm', {
|
|
key: 'formData',
|
|
value: this.formData
|
|
})
|
|
// this.formData.video = res.data|| '';
|
|
// this.image = [{url: ,isCover: true}];
|
|
this.$refs.uToast.hide();
|
|
this.videoOrImage = false
|
|
});
|
|
},
|
|
/**删除图片*/
|
|
DelPic(key) {
|
|
this.formData[key] = ''
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.model_view {
|
|
padding: 50rpx 25rpx;
|
|
height: 100vh;
|
|
|
|
.view_txt {
|
|
margin-bottom: 15rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
|
|
.form-item {
|
|
width: 480rpx;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
|
|
.image-box {
|
|
position: relative;
|
|
margin-right: 24rpx;
|
|
margin-bottom: 24rpx;
|
|
width: 112rpx;
|
|
height: 112rpx;
|
|
|
|
.upload-bg {
|
|
width: 112rpx;
|
|
height: 112rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.reduce {
|
|
position: absolute;
|
|
top: -20rpx;
|
|
right: -20rpx;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
|
|
.lr {
|
|
width: 480rpx;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.fcar_letter {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
margin-right: 30rpx;
|
|
}
|
|
|
|
.letter_number {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
|
|
.ln_one {
|
|
width: 40rpx;
|
|
height: 44rpx;
|
|
background: #F5F5F5;
|
|
border-radius: 4rpx;
|
|
opacity: 1;
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #111111;
|
|
text-align: center;
|
|
line-height: 43rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.ln_point {
|
|
width: 16rpx;
|
|
height: 44rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
margin-right: 8rpx;
|
|
}
|
|
}
|
|
|
|
.f_car_num {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 62rpx;
|
|
height: 44rpx;
|
|
background: #13AFA8;
|
|
border-radius: 4rpx;
|
|
opacity: 1;
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
margin-right: 8rpx;
|
|
|
|
.fcn_r {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 4rpx;
|
|
|
|
.fcn_r_img {
|
|
width: 10rpx;
|
|
height: 6rpx;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.bindview {
|
|
background: #F5F5F5;
|
|
height: 100vh;
|
|
}
|
|
|
|
.bgcview {
|
|
background: linear-gradient(180deg, #E9FFFE 0%, #D3EAE9 31%, #F5F5F5 100%);
|
|
opacity: 1;
|
|
padding: 24rpx;
|
|
|
|
.top {
|
|
position: relative;
|
|
padding: 20rpx 0;
|
|
|
|
.top_txt {
|
|
font-size: 34rpx;
|
|
font-weight: 600;
|
|
color: #111111;
|
|
}
|
|
|
|
.top_imgview {
|
|
position: absolute;
|
|
top: -4rpx;
|
|
right: -24rpx;
|
|
width: 160rpx;
|
|
height: 164rpx;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
margin-bottom: 50rpx;
|
|
z-index: 1;
|
|
background: #FFFFFF;
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
opacity: 1;
|
|
|
|
.form-box {
|
|
padding: 25rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |