252 lines
9.6 KiB
Vue
252 lines
9.6 KiB
Vue
<template>
|
||
<view class="submit-page">
|
||
<!-- <u-navbar title="单位采集" id="navbar" :border-bottom="false" :is-back="true" :immersive="true" :is-fixed="true"></u-navbar> -->
|
||
<view class="form-area">
|
||
<view class="basic-info">
|
||
<view class="title-text"><text class="text-style">基本信息</text></view>
|
||
<view class="form-item">
|
||
<view class="label-item"><text class="label-text">单位名称</text></view>
|
||
<view class="assembly-item"><input placeholder="请输入单位名称" placeholder-class="placeholder-style" class="input-style" v-model="formData.company"></u-input></view>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="label-item"><text class="label-text">联系人</text></view>
|
||
<view class="assembly-item"><input placeholder="请输入联系人" placeholder-class="placeholder-style" class="input-style" v-model="formData.contacts"></u-input></view>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="label-item"><text class="label-text">联系电话</text></view>
|
||
<view class="assembly-item"><input placeholder="请输入联系电话" placeholder-class="placeholder-style" class="input-style" v-model="formData.mobile"></u-input></view>
|
||
</view>
|
||
</view>
|
||
<view class="procurement-info">
|
||
<view class="title-text"><text class="text-style">采购信息</text></view>
|
||
<view class="form-item">
|
||
<view class="label-item"><text class="label-text">总人数</text></view>
|
||
<view class="assembly-item"><input placeholder="请输入总人数" placeholder-class="placeholder-style" class="input-style" v-model="formData.persons"></u-input></view>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="label-item"><text class="label-text">预算金额</text></view>
|
||
<view class="assembly-item"><input placeholder="请输入预算金额" placeholder-class="placeholder-style" class="input-style" v-model="formData.budget"></u-input></view>
|
||
</view>
|
||
<view class="form-item-2">
|
||
<view class="label-item"><text class="label-text">意向品类</text></view>
|
||
<view class="assembly-item">
|
||
<uni-data-checkbox multiple v-model="formData.kind" :localdata="categoryData"></uni-data-checkbox>
|
||
|
||
<!-- <checkbox-group>
|
||
<label>
|
||
<checkbox value="cb" checked="true" color="#FFCC33" style="transform:scale(0.7)" />选中
|
||
</label>
|
||
<label>
|
||
<checkbox value="cb" color="#FFCC33" style="transform:scale(0.7)" />未选中
|
||
</label>
|
||
</checkbox-group> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="receiving-info">
|
||
<view class="title-text"><text class="text-style">收货信息</text></view>
|
||
<view class="form-item">
|
||
<view class="label-item"><text class="label-text">收货时间</text></view>
|
||
<view class="assembly-item" @click="showTime=true">
|
||
<view class="time-text">
|
||
<text class="placeholder-style" v-if="formData.get_time==''">
|
||
请选择收货时间
|
||
</text>
|
||
<text class="text-style" v-else>{{formData.get_time}}</text>
|
||
<u-icon name="arrow-right" color="#b2b1b6" size="28"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="label-item"><text class="label-text">所在地区</text></view>
|
||
<view class="assembly-item" @click="openAddress">
|
||
<view class="address-text">
|
||
<text class="placeholder-style" v-if="formData.province==''">
|
||
请选择所在地区
|
||
</text>
|
||
<text class="text-style" v-else>{{formData.province}}-{{formData.city}}-{{formData.district}}</text>
|
||
<u-icon name="arrow-right" color="#b2b1b6" size="28"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="assembly-item-2"><textarea placeholder="请输入详细地址" placeholder-class="placeholder-style" class="textarea-style" v-model="formData.address"></textarea></view>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<view class="assembly-item-2"><textarea placeholder="请提出您的建议" placeholder-class="placeholder-style" class="textarea-style" v-model="formData.idea"></textarea></view>
|
||
</view>
|
||
</view>
|
||
<view class="bottom-area">
|
||
<view class="note-text">
|
||
<text class="text-style">信息提交后会有专门的客服经理致电联系您</text>
|
||
</view>
|
||
<view class="submit-btn">
|
||
<button class="btn-style" @click="submit()">提交</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-select v-model="showAddress" mode="mutil-column-auto" @confirm="addressChange" :list="addressList"></u-select>
|
||
<u-picker mode="time" v-model="showTime" @confirm="timeChange"></u-picker>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import area from '@/utils/area'
|
||
import {jicaiBuy} from '@/api/order'
|
||
import {
|
||
trottle
|
||
} from "@/utils/tools";
|
||
import {
|
||
baseURL
|
||
} from '@/config/app';
|
||
export default {
|
||
//name: 'submit',
|
||
components: {},
|
||
data() {
|
||
return {
|
||
formData: {
|
||
company:'', // 单位名称
|
||
contacts:'', // 联系人
|
||
mobile:'',// 联系电话
|
||
persons:'',// 总人数
|
||
budget:'',// 预算金额
|
||
kind:[],// 意向品类
|
||
get_time:'',// 收货时间
|
||
province:'',// 省
|
||
city:'',// 市
|
||
district:'',// 区
|
||
address:'',// 详细地址
|
||
idea:'', // 建议
|
||
},
|
||
showAddress:false,// 是否显示地址下拉列表
|
||
showTime:false,// 是否显示时间选择框
|
||
addressList:[],// 地址列表
|
||
categoryData:[
|
||
{
|
||
'text':'粮油副食',
|
||
'value':'粮油副食'
|
||
//disabled: false
|
||
},
|
||
{
|
||
'text':'水果生鲜',
|
||
'value':'水果生鲜'
|
||
//disabled: false
|
||
},
|
||
{
|
||
'text':'食品饮料',
|
||
'value':'食品饮料'
|
||
//disabled: false
|
||
},
|
||
{
|
||
'text':'纸品家清',
|
||
'value':'纸品家清'
|
||
//disabled: false
|
||
},
|
||
{
|
||
'text':'美妆个护',
|
||
'value':'美妆个护'
|
||
//disabled: false
|
||
},
|
||
{
|
||
'text':'家居家纺',
|
||
'value':'家居家纺'
|
||
//disabled: false
|
||
},
|
||
{
|
||
'text':'其他',
|
||
'value':'其他'
|
||
//disabled: false
|
||
},
|
||
|
||
] // 意向品类数据
|
||
};
|
||
},
|
||
// 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object(用于页面传参)，参考示例
|
||
onLoad() {
|
||
console.log('页面加载');
|
||
this.getData();
|
||
|
||
},
|
||
// 函数
|
||
methods: {
|
||
/**
|
||
* 获取表单要填写的数据
|
||
*/
|
||
getData(){
|
||
let app = this
|
||
app.addressList=area;
|
||
console.log(app.categoryData)
|
||
},
|
||
/**
|
||
* 打开地址选择框
|
||
*/
|
||
openAddress(){
|
||
console.log('e....')
|
||
this.showAddress=true;
|
||
},
|
||
/**
|
||
* 地址选择变换
|
||
*/
|
||
addressChange(info){
|
||
this.formData.province = info[0]["label"]
|
||
this.formData.city = info[1]["label"]
|
||
this.formData.district = info[2]["label"]
|
||
},
|
||
/*时间选择*/
|
||
timeChange(info){
|
||
console.log(info)
|
||
this.formData.get_time = info["year"]+"-"+info["month"]+"-"+info["day"]
|
||
},
|
||
/**
|
||
* 点击导航栏返回触发
|
||
*/
|
||
leftClick() {
|
||
console.log('返回');
|
||
},
|
||
/**
|
||
* 意向品类多选变换时
|
||
* */
|
||
checkboxChange(e) {
|
||
//console.log(e);
|
||
},
|
||
/**
|
||
* 选中任一checkbox时，由checkbox-group触发
|
||
* */
|
||
checkboxGroupChange(e) {
|
||
// console.log(e);
|
||
},
|
||
/**
|
||
* 表单提交
|
||
*/
|
||
submit(){
|
||
console.log("aaaaa")
|
||
if(!this.formData.company || !this.formData.contacts || !this.formData.mobile || !this.formData.persons || !this.formData.budget || !this.formData.kind.length || !this.formData.get_time || !this.formData.province || !this.formData.address){
|
||
this.$toast({
|
||
title:'请先完善上方表单'
|
||
})
|
||
return
|
||
}
|
||
this.formData.kind = this.formData.kind.join(",")
|
||
//console.log()
|
||
//let data = this.formData
|
||
jicaiBuy(this.formData).then(res => {
|
||
if (res.code == 1) {
|
||
this.$toast({
|
||
title: '提交成功'
|
||
}, {
|
||
url: '/pages/index/index'
|
||
});
|
||
}
|
||
});
|
||
}
|
||
},
|
||
// 计算属性
|
||
computed: {}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import './jicai.scss';
|
||
</style>
|