hire.vue 11.6 KB
<template>
	<view style="background-color: white; height: 100vh;">
		<view class="top">
			<image v-if="flag == 1" src="http://equiphappy.shs.broing.cn/assets/miniprogram/hire.png" style="height: 432rpx;width: 100%;" mode=""></image>
			<image v-else src="http://equiphappy.shs.broing.cn/assets/miniprogram/sell.png" style="height: 432rpx;width: 100%;" mode=""></image>
		</view>
		<view class="" style="padding: 32rpx; background: white;position: relative;">
			<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
				<u-form-item label="设备信息" labelWidth="200rpx" prop="userInfo.category_id" borderBottom ref="item1" @click="goChoose" style="position: relative;">
					<u--input v-model="model1.userInfo.name" disabled disabledColor="#ffffff" placeholder="请选择设备" style="position: relative;"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
					<view class="posBox" style="top:32rpx; left:32rpx">
						<image src="../../static/Group 193@2x.png" style="width: 40rpx;height: 24rpx;" mode=""></image>
					</view>
				</u-form-item>
				<u-form-item label="设备品牌" labelWidth="200rpx" prop="userInfo.brand_name" borderBottom
					@click="goLogo" ref="item1">
					<u--input v-model="model1.userInfo.brand_name" disabled disabledColor="#ffffff"
						placeholder="请选择" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
					<view class="posBox" style="top:112rpx;  left:32rpx">
						<image src="../../static/Group 193@2x.png" style="width: 40rpx;height: 24rpx;" mode=""></image>
					</view>
				</u-form-item>
				<u-form-item label="设备型号" labelWidth="200rpx" prop="userInfo.xh_name" borderBottom @click="goNum"
					ref="item1">
					<u--input v-model="model1.userInfo.xh_name" disabled disabledColor="#ffffff" placeholder="请选择"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
					<view class="posBox" style="top:194rpx; left:32rpx">
						<image src="../../static/Group 193@2x.png" style="width: 40rpx;height: 24rpx;" mode=""></image>
					</view>
				</u-form-item>
				<u-form-item label="设备停放地" labelWidth="200rpx" prop="userInfo.region" borderBottom  ref="item1" @click="goMap">
					<u--input v-model="model1.userInfo.region" disabled disabledColor="#ffffff" placeholder="请选择" 
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
					<view class="posBox" style="top:276rpx; left:32rpx">
						<image src="../../static/Group 193@2x.png" style="width: 40rpx;height: 24rpx;" mode=""></image>
					</view>
				</u-form-item>
				
				
				<!-- <u-form-item label="出厂年限" labelWidth="200rpx" prop="userInfo.year" borderBottom @click="show = true;" ref="item1">
					<picker mode="date" :value="model1.userInfo.year" :start="startDate" :end="endDate" @change="bindDateChange">
											<view class="uni-input">
												<view class="" :style="model1.userInfo.year == '请选择' ? 'color: rgb(192, 196, 204);' : 'color: #303133;'">
													{{model1.userInfo.year}}
												</view>
												<view class="">
													<u-icon name="arrow-right"></u-icon>
												</view>
											</view>
										</picker> -->
					<!-- <u--input v-model="model1.userInfo.year" placeholder="请输入" border="none"></u--input> -->
					<!-- <u--input v-model="model1.userInfo.year" disabled disabledColor="#ffffff" placeholder="请选择"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon> -->
				<!-- </u-form-item> -->
				
				<!-- <u-form-item label="表显小时数" labelWidth="200rpx" prop="userInfo.hours" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.hours" border="none"></u--input>
				</u-form-item> -->
				<u-form-item label="意向价格"  labelWidth="200rpx" prop="userInfo.price" borderBottom ref="item1">
					<u--input type="number" v-model="model1.userInfo.price" border="none"></u--input>
				</u-form-item>
				<u-form-item label="设备亮点" labelWidth="200rpx" prop="userInfo.bright" labelPosition="top" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.bright" border="none"></u--input>
				</u-form-item>
				
				
				<u-form-item v-for="item in model1.userInfo.dList" :label="item.name" labelWidth="200rpx"  borderBottom  ref="item1">
					<view class="flexb">
						<u--input :type="item.type === 1 ? 'number' : item.type === 2 ? 'digit' : 'text'" v-model="item.value" border="none"></u--input>
						<view class="" v-if="item.unit">
							{{item.unit}}
						</view>
					</view>
					<!-- <u--input v-model="model1.userInfo.region" disabled disabledColor="#ffffff" placeholder="请选择" 
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
					<view class="posBox" style="top:39%; left:32rpx">
						<image src="../../static/Group 193@2x.png" style="width: 40rpx;height: 24rpx;" mode=""></image>
					</view> -->
				</u-form-item>
				<u-form-item v-for="item in model1.userInfo.xhList" :label="item.name" labelWidth="200rpx"  borderBottom  ref="item1">
					<view class="flexb">
						<u--input :type="item.type === 1 ? 'number' : item.type === 2 ? 'digit' : 'text'" v-model="item.value" border="none"></u--input>
						<view class="" v-if="item.unit">
							{{item.unit}}
						</view>
					</view>
					<!-- <u--input :type="item.type == 1 ? number : text" v-model="model1.userInfo[item.id]" border="none"></u--input>		 -->			<!-- <u--input v-model="model1.userInfo.region" disabled disabledColor="#ffffff" placeholder="请选择" 
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
					<view class="posBox" style="top:39%; left:32rpx">
						<image src="../../static/Group 193@2x.png" style="width: 40rpx;height: 24rpx;" mode=""></image>
					</view> -->
				</u-form-item>
			</u--form>
			<view class="" v-if="flag == 1" style="width: 60%;margin-top: 50rpx;display: flex;justify-content: center;margin-left: 20%;">
				<u-button shape="circle" text="上传设备照片"  style="color: white;" color="linear-gradient(to right, #46BAEC,#2F67D3)"
					@click="goUpload('hire')" ></u-button>
			</view>
			<view class="" v-else style="width: 60%;margin-top: 50rpx;display: flex;justify-content: center;margin-left: 20%;">
				<u-button shape="circle" text="上传设备照片"  color="linear-gradient(to right, #FFC773,#ED681D)"
					@click="goUpload('sale')"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
import loadingPage from '../../uni_modules/uview-ui/libs/config/props/loadingPage';
	export default {
		data() {
			const currentDate = this.getDate({
			            format: true
			        })
			return {
				flag: String,
				
				model1: {
					show:false,
					showSex: false,
					userInfo: {
						name: '',
						region: '',
						price: 0,
						day: '',
						hours:'',
						bright:	"",
						brand_name:'',
						xh_name:'',
						dList:[],
						xhList:[],
					},
				},
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
				rules: {
					'userInfo.category_id': {
						type: 'string',
						required: true,
						message: '请选择设备型号',
						trigger: ['blur', 'change']
					},
					'userInfo.region': {
						type: 'string',
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					},
					
				},
			}
		},
		onLoad(option) {
			console.log(option);
			this.flag = option.val
			if(option.info){
				let info = JSON.parse(option.info)
				console.log(info);
				this.model1.userInfo = info
				this.model1.userInfo.name = (info.brand && info.brand.name)
				console.log(this.model1.userInfo);
			}
			
			
			
		},
		
		onShow() {
			let pagearr = getCurrentPages(); //获取应用页面栈
			let currentPage = pagearr[pagearr.length - 1]; //获取当前页面信息
			console.log('option:', currentPage) //获取页面传递的信息
			this.model1.userInfo.category_id = currentPage.$vm.category_id || (this.model1.userInfo.category && this.model1.userInfo.category.id) || ''
			this.model1.userInfo.name = currentPage.$vm.name || (this.model1.userInfo.category && this.model1.userInfo.category.name) || ''
			this.model1.userInfo.brand_id = currentPage.$vm.brand_id || (this.model1.userInfo.brand &&this.model1.userInfo.brand.id) || ''
			this.model1.userInfo.brand_name = currentPage.$vm.brand_name || (this.model1.userInfo.brand && this.model1.userInfo.brand.name) || ''
			this.model1.userInfo.xinghao_id = currentPage.$vm.xh_id || (this.model1.userInfo.xinghao && this.model1.userInfo.xinghao.id) || ''
			this.model1.userInfo.xh_name = currentPage.$vm.xh_name || (this.model1.userInfo.xinghao && this.model1.userInfo.xinghao.name) || ''
			console.log(this.model1.userInfo);
			if(currentPage.$vm.isFlash !== 1){
				this.getCate()
				this.getXh()
			}
			
		},
		methods: {
			goLogo() {
				uni.navigateTo({
					url: '/pages/sellAndBuy/logo'
				})
			},
			getCate(){
				uni.$u.http.post('/api/equip/get_category_fields',{
					category_id: this.model1.userInfo.category_id
				}).then(res => {
					this.model1.userInfo.dList = []
					console.log(res);
					res && res.data && res.data.forEach(item => {
						this.model1.userInfo.dList.push({...item, value:''})
					}) 
					console.log(this.model1.userInfo.dList);
				})
				
			},
			getXh(){
				uni.$u.http.post('/api/equip/get_xinghao_fields',{
					xinghao_id: this.model1.userInfo.xinghao_id
				}).then(res => {
					console.log(res);
					this.model1.userInfo.xhList = []
					res && res.data && res.data.forEach(item => {
						this.model1.userInfo.xhList.push({...item, value:''})
					})
				})
			},
			  getDate(type) {
			            const date = new Date();
			            let year = date.getFullYear();
			            let month = date.getMonth() + 1;
			            let day = date.getDate();
			
			            if (type === 'start') {
			                year = year - 60;
			            } else if (type === 'end') {
			                year = year + 2;
			            }
			            month = month > 9 ? month : '0' + month;
			            day = day > 9 ? day : '0' + day;
			            return `${year}-${month}-${day}`;
			        },
			bindDateChange: function(e) {
			            this.model1.userInfo.year = e.detail.value
			        },
			goNum() {
				uni.navigateTo({
					url: '/pages/sellAndBuy/chooseNum'
				})
			},
			goMap(){
				
				
				let that = this
				uni.chooseLocation({
					success: function (res) {
						console.log('位置名称:' + res.name);
						console.log('详细地址:' + res.address);
						console.log('纬度:' + res.latitude);
						console.log('经度:' + res.longitude);
						console.log(that.model1);
						that.model1.userInfo.region = res.address
						that.model1.userInfo.lat = res.latitude
						that.model1.userInfo.lng = res.longitude
					}
				});
				
				
			},
			goChoose(){
				uni.navigateTo({
					url: '/pages/subPages/more?val=2'
				})
			},
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.uForm.validateField('userInfo.sex')
			},
			goUpload(val){
				console.log(this.model1);
				uni.navigateTo({
					url:`/pages/sellAndBuy/upload?info=${JSON.stringify(this.model1.userInfo)}&val=${val}`
				})
			}
		},
		onReady() {
			//如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	}
</script>

<style scoped lang="scss">
.posBox{
	width: 40rpx;
	height: 24rpx;
	position: absolute;
}
.flexb{
	display: flex;
	align-items: center;
}
.uni-input{
	 
	 font-size: 30rpx;
	 display: flex;
	 align-items: center;
	 justify-content: space-between;
}
</style>