417 lines
13 KiB
Vue
417 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">
|
|
<text class="cor">*</text>产品尺寸
|
|
</view>
|
|
<input class="input" type="text" v-model="data.width" placeholder="请填写产品尺寸 宽" />
|
|
<input class="input" type="text" v-model="data.height" placeholder="请填写产品尺寸 高" />
|
|
</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="text" v-model="data.contact_phone" class="input" placeholder="请填写联系电话" />
|
|
</view>
|
|
<view class="li">
|
|
<view class="">
|
|
<text class="cor">*</text>预约时间
|
|
</view>
|
|
<input type="text" v-model="data.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">
|
|
<view class="title">现场图片</view>
|
|
<view class="img-content">
|
|
<image v-for="(item,index) in imgsrcArr" class="img" :src="item" :key="index"
|
|
mode="aspectFill"></image>
|
|
|
|
</view>
|
|
<view class="iocn-content" @click="chooseImg()">
|
|
<image class="icon" src="../../static/iocn/jia.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<button class="submit-button" @click="submitData()" type="default">确认提交</button>
|
|
|
|
</view>
|
|
</container-subgroup-two>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
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: "",
|
|
},
|
|
imgsrcArr: [],
|
|
typeIndex: 0,
|
|
typeData: [{
|
|
title: '巡检',
|
|
state: false
|
|
},
|
|
{
|
|
title: '保养',
|
|
state: false
|
|
},
|
|
{
|
|
title: '移屏',
|
|
state: false
|
|
},
|
|
{
|
|
title: '拆屏',
|
|
state: false
|
|
},
|
|
]
|
|
}
|
|
},
|
|
onLoad(op) {
|
|
this.getType()
|
|
if (op.index != undefined) this.typeIndex = op.index;
|
|
},
|
|
methods: {
|
|
// 切换类型
|
|
typeIndexFun(index) {
|
|
this.typeIndex = index
|
|
this.data.type_id = this.typeData
|
|
},
|
|
getType() {
|
|
this.$requst.post('/universal/api.vas/vas_type', this.data).then(res => {
|
|
if (res.code == 1) {
|
|
this.typeData = [...res.data]
|
|
console.log(this.typeData)
|
|
} else {
|
|
|
|
}
|
|
})
|
|
},
|
|
openDatetimePicker() {
|
|
this.$refs.myPicker.show();
|
|
},
|
|
// 获取预约时间
|
|
handleSubmit(e) {
|
|
// {year: "2019", month: "07", day: "17", hour: "15", minute: "21"}
|
|
console.log(e)
|
|
this.data.appointment_time = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`;
|
|
|
|
|
|
},
|
|
// 选择图片
|
|
chooseImg() {
|
|
uni.chooseImage({
|
|
count: 2,
|
|
sourceType: ['album', 'camera'],
|
|
success: (res) => {
|
|
this.imgsrcArr = []
|
|
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('上传成功');
|
|
if (!this.data.pictures) {
|
|
this.data.pictures = res.data.id + ","
|
|
} else {
|
|
this.data.pictures += res.data.id
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 提交
|
|
submitData() {
|
|
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.data.pictures) {
|
|
this.$toolAll.tools.showToast("请选择现场图片");
|
|
return
|
|
}
|
|
this.data.appointment_time = new Date(this.data.appointment_time).getTime()
|
|
this.$requst.post('/universal/api.vas/vas', this.data).then(res => {
|
|
if (res.code == 1) {
|
|
console.log(res)
|
|
} else {
|
|
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</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 {
|
|
display: flex;
|
|
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: 130rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.scene-img .iocn-content {
|
|
width: 135rpx;
|
|
height: 135rpx;
|
|
background-color: #DCDCDC;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.scene-img .iocn-content .icon {
|
|
|
|
width: 62rpx;
|
|
height: 62rpx;
|
|
|
|
}
|
|
</style>
|