415 lines
13 KiB
Vue
415 lines
13 KiB
Vue
<template>
|
|
<view class="content">
|
|
<statusNav returnColor="#c2c2c2" navBarTitle="增值服务"></statusNav>
|
|
<container-subgroup-two>
|
|
<view slot="content" style="margin: -20rpx -30rpx 0;">
|
|
<view class="select-type">
|
|
<view class="text">选择类型</view>
|
|
<view class="type">
|
|
<view class="li" @click="typeIndexFun(index)" :class="index==typeIndex?'on':''"
|
|
v-for="(item,index) in typeData">
|
|
{{item.name}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="appreciationServe-from">
|
|
<view class="li">
|
|
<view class="title">
|
|
<text class="cor">*</text>产品名称
|
|
</view>
|
|
<input class="input" v-model="data.title" type="text" placeholder="请填写产品名称" />
|
|
</view>
|
|
<view class="li">
|
|
<view class="title">
|
|
<text class="cor">*</text>规格型号
|
|
</view>
|
|
<input class="input" type="text" v-model="data.model" placeholder="请填写产品规格型号" />
|
|
</view>
|
|
|
|
<view class="li">
|
|
<view class="title">产品品牌</view>
|
|
<input class="input" type="text" v-model="data.brand" value="" placeholder="请输入品牌" />
|
|
</view>
|
|
<view class="li">
|
|
<view class="title flexs">
|
|
<text class="cor">*</text>产品尺寸
|
|
</view>
|
|
<view class="disac fon26">
|
|
<view class="disac">
|
|
宽：<input class="input" style="width: 100rpx;" type="digit" v-model="data.width" placeholder="38.5" />
|
|
</view>
|
|
<view class="mar-y40 mar-z10">x</view>
|
|
<view class="disac">
|
|
高：<input class="input" style="width: 100%;" type="digit" v-model="data.height" placeholder="14.5" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="supplementTitle">补充信息</view>
|
|
<view class="supplement-from">
|
|
<view class="li">
|
|
<view class="title">
|
|
<text class="cor">*</text>联系人
|
|
</view>
|
|
<input type="text" class="input" v-model="data.contact_name" placeholder="请填写联系人名称" />
|
|
</view>
|
|
<view class="li">
|
|
<view class="">
|
|
<text class="cor">*</text>联系电话
|
|
</view>
|
|
<input type="number" v-model="data.contact_phone" maxlength="11" class="input" placeholder="请填写联系电话" />
|
|
</view>
|
|
<view class="li">
|
|
<view class="">
|
|
<text class="cor">*</text>预约时间
|
|
</view>
|
|
<input type="text" disabled v-model="appointment_time" class="input" @tap="openDatetimePicker"
|
|
placeholder="请选择预约时间" />
|
|
|
|
</view>
|
|
<yy-mm-dd-hh-ss ref="myPicker" @submit="handleSubmit" :start-year="2022" :end-year="2122">
|
|
</yy-mm-dd-hh-ss>
|
|
<view class="li-textarea">
|
|
<view class="title">*详细地址</view>
|
|
<textarea class="textarea" v-model="data.addres" placeholder="请输入详细地址" />
|
|
</view>
|
|
|
|
<view class="scene-img dis">
|
|
<view class="title flexs">现场图片</view>
|
|
<view class="disac fw">
|
|
<view class="img-content" v-for="(item,index) in imgsrcArr" :key="index">
|
|
<image class="img mar-x10" :src="item" mode="aspectFill" lazy-load></image>
|
|
</view>
|
|
<view class="iocn-content flexs mar-x10" @click="chooseImg()">
|
|
<image class="icon" src="../../static/iocn/jia.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<button class="submit-button" @click="submitData()" type="default">确认提交</button>
|
|
|
|
</view>
|
|
</container-subgroup-two>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import permision from "@/js_sdk/wa-permission/permission.js"
|
|
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
|
|
import statusNav from '../../components/status-nav.vue';
|
|
import yyMmDdHhSs from '@/components/dates/yy-mm-dd-hh-ss.vue';
|
|
import {
|
|
uploadImg
|
|
} from '@/jsFile/public-api.js';
|
|
export default {
|
|
components: {
|
|
statusNav,
|
|
containerSubgroupTwo,
|
|
yyMmDdHhSs
|
|
},
|
|
data() {
|
|
return {
|
|
data: {
|
|
type_id: 1,
|
|
title: "",
|
|
brand: "",
|
|
model: "",
|
|
width: '',
|
|
height: '',
|
|
contact_name: "",
|
|
contact_phone: "",
|
|
appointment_time: '',
|
|
addres: "",
|
|
pictures:''
|
|
},
|
|
appointment_time:'',
|
|
pictures: [],
|
|
imgsrcArr: [],
|
|
typeIndex: 0,
|
|
typeData: []
|
|
}
|
|
},
|
|
onLoad(op) {
|
|
this.getType()
|
|
if (op.index != undefined) {
|
|
if(op.index==2) {
|
|
this.typeIndex = 3;
|
|
} else if(op.index==3) {
|
|
this.typeIndex = 2;
|
|
} else {
|
|
this.typeIndex = op.index;
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
// 切换类型
|
|
typeIndexFun(index) {
|
|
this.typeIndex = index
|
|
this.data.type_id = this.typeData[index].id;
|
|
},
|
|
getType() {
|
|
this.$requst.post('/universal/api.vas/vas_type', this.data).then(res => {
|
|
if (res.code == 1) {
|
|
this.typeData = [...res.data]
|
|
} else {
|
|
|
|
}
|
|
})
|
|
},
|
|
openDatetimePicker() {
|
|
this.$refs.myPicker.show();
|
|
},
|
|
// 获取预约时间
|
|
handleSubmit(e) {
|
|
// {year: "2019", month: "07", day: "17", hour: "15", minute: "21"}
|
|
this.appointment_time = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`;
|
|
this.data.appointment_time = this.$toolAll.tools.timeToTimestamp(`${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`)/1000;
|
|
},
|
|
// 选择图片
|
|
chooseImg() {
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sourceType: ['album', 'camera'],
|
|
success: (res) => {
|
|
let imgsrc = res.tempFilePaths;
|
|
imgsrc.forEach(item => {
|
|
this.imgsrcArr.push(item);
|
|
})
|
|
for (var i = 0; i < res.tempFilePaths.length; i++) {
|
|
uploadImg({
|
|
path: res.tempFilePaths[i]
|
|
}).then(res => {
|
|
if (res.code) {
|
|
this.$toolAll.tools.showToast('上传成功');
|
|
this.pictures.push(res.data.id);
|
|
}
|
|
})
|
|
}
|
|
},fail:(err)=> {
|
|
this.$toolAll.tools.checkQx(err.code);
|
|
}
|
|
})
|
|
},
|
|
// 提交
|
|
submitData() {
|
|
this.data.pictures = this.pictures.join(',');
|
|
if (!this.data.title) {
|
|
this.$toolAll.tools.showToast("请填写产品名称");
|
|
return
|
|
}
|
|
if (!this.data.contact_name) {
|
|
this.$toolAll.tools.showToast("请填写联系人名称");
|
|
return
|
|
}
|
|
var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; //11位手机号码正则
|
|
|
|
if (!reg_tel.test(this.data.contact_phone)) {
|
|
this.$toolAll.tools.showToast("请正确填写联系人电话");
|
|
return
|
|
}
|
|
if (!this.data.appointment_time) {
|
|
this.$toolAll.tools.showToast("请选择预约时间");
|
|
return
|
|
}
|
|
if (!this.data.addres) {
|
|
this.$toolAll.tools.showToast("请正确填写详细地址");
|
|
return
|
|
}
|
|
if (!this.pictures.length) {
|
|
this.$toolAll.tools.showToast("请选择现场图片");
|
|
return
|
|
}
|
|
this.data.pictures = this.pictures.join(',');
|
|
this.$requst.post('/universal/api.vas/vas', this.data).then(res => {
|
|
if (res.code) {
|
|
this.$toolAll.tools.showToast('提交成功');
|
|
setTimeout(()=>{
|
|
uni.navigateBack({delta:1})
|
|
},1000)
|
|
} else {
|
|
this.$toolAll.tools.showToast(res.msg);
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.content {}
|
|
|
|
.cor {
|
|
color: #FF0000;
|
|
}
|
|
|
|
.select-type {
|
|
display: flex;
|
|
margin-top: 10rpx;
|
|
height: 80rpx;
|
|
background-color: #FFFFFF;
|
|
align-items: center;
|
|
padding: 0rpx 28rpx;
|
|
}
|
|
|
|
.submit-button {
|
|
width: 686rpx;
|
|
border-radius: 50rpx;
|
|
height: 90rpx;
|
|
background-color: #02A2ea;
|
|
line-height: 90rpx;
|
|
color: #FFFFFF;
|
|
margin-top: 60rpx;
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.select-type .text {
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
margin-right: 34rpx;
|
|
}
|
|
|
|
.select-type .type {
|
|
display: flex;
|
|
}
|
|
|
|
.select-type .type .li {
|
|
width: 106rpx;
|
|
line-height: 44rpx;
|
|
text-align: center;
|
|
height: 44rpx;
|
|
color: #bbbbbb;
|
|
border-radius: 50rpx;
|
|
font-size: 24rpx;
|
|
border: solid 2rpx #99999b;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.select-type .type .on {
|
|
background-color: #0081ff;
|
|
border: none;
|
|
color: #FFFFFF;
|
|
box-shadow: 2rpx 2px 10rpx rgba(0, 81, 255, 0.5);
|
|
}
|
|
|
|
.appreciationServe-from {
|
|
padding: 0rpx 25rpx;
|
|
background-color: #FFFFFF;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.appreciationServe-from .li {
|
|
display: flex;
|
|
height: 80rpx;
|
|
border-bottom: 1rpx solid #f5f5f7;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.appreciationServe-from .li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.appreciationServe-from .li .title {
|
|
font-size: 26rpx;
|
|
color: #333333;
|
|
margin-right: 28rpx;
|
|
width: 118rpx;
|
|
text-align: right;
|
|
}
|
|
|
|
|
|
.appreciationServe-from .li .input {
|
|
font-size: 26rpx;
|
|
color: #333333;
|
|
flex: 1;
|
|
}
|
|
|
|
.supplementTitle {
|
|
padding: 20rpx 25rpx;
|
|
font-size: 26rpx;
|
|
|
|
color: #333333;
|
|
}
|
|
|
|
.supplement-from {
|
|
background-color: #FFFFFF;
|
|
padding: 0rpx 25rpx;
|
|
}
|
|
|
|
.supplement-from .li {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
height: 80rpx;
|
|
font-size: 27rpx;
|
|
border-bottom: 2rpx solid #f5f5f7;
|
|
line-height: 27rpx;
|
|
justify-content: space-between;
|
|
color: #333333;
|
|
}
|
|
|
|
.supplement-from .li .input {
|
|
text-align: right;
|
|
font-size: 24rpx
|
|
}
|
|
|
|
.supplement-from .li-textarea {
|
|
font-size: 27rpx;
|
|
line-height: 27rpx;
|
|
justify-content: space-between;
|
|
color: #333333;
|
|
padding-bottom: 13rpx;
|
|
}
|
|
|
|
.supplement-from .li-textarea .title {
|
|
padding-top: 26rpx;
|
|
padding-bottom: 17rpx;
|
|
}
|
|
|
|
.supplement-from .li-textarea .textarea {
|
|
width: 100%;
|
|
height: 127rpx;
|
|
background-color: #F5F5F5;
|
|
box-sizing: border-box;
|
|
padding: 20rpx;
|
|
font-size: 24rpx
|
|
}
|
|
|
|
.scene-img {
|
|
margin-top: 27rpx;
|
|
padding-bottom: 30rpx;
|
|
}
|
|
|
|
.scene-img .title {
|
|
margin-right: 28rpx;
|
|
font-size: 26rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.scene-img .img-content .img {
|
|
width: 170rpx;
|
|
height: 135rpx;
|
|
margin-right: 10rpx;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.scene-img .iocn-content {
|
|
width: 170rpx;
|
|
height: 135rpx;
|
|
background-color: #DCDCDC;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.scene-img .iocn-content .icon {
|
|
width: 62rpx;
|
|
height: 62rpx;
|
|
|
|
}
|
|
</style>
|