flying-monkey/pages/appreciationServe/appreciationServe.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="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 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 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:''
                },
				pictures: [],
                imgsrcArr: [],
                typeIndex: 0,
                typeData: []
            }
        },
        onLoad(op) {
            this.getType()
            if (op.index != undefined) 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.data.appointment_time = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`;


            },
            // 选择图片
            chooseImg() {
                uni.chooseImage({
                    count: 2,
                    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);
                                }
                            })
                        }
                    }
                })
            },
            // 提交
            submitData() {
				this.data.pictures = this.pictures.join(',');
				console.log(this.data.pictures);
                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.appointment_time = new Date(this.data.appointment_time).getTime()/1000;
				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 {

                    }
                })
            }
        }
    }
</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>