创意需求发布

components/cityPicker/cityPicker.vue

@@ -0,0 +1,120 @@
+<template>
+	<view>
+		<u-picker :show="show" ref="uPicker" :columns="cityList" @confirm="confirm" @change="changeHandler"
+			@cancel="cancel"></u-picker>
+	</view>
+</template>
+
+<script>
+	import { cityData } from '@/utills/city.js'
+	export default {
+		name: "cityPicker",
+		props: {
+			showPicker: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				cityData,
+				//显示选择器
+				show: false,
+				// 打开选择器显示默认城市
+				cityList: [],
+				cityLevel1: [],
+				cityLevel2: [],
+				cityLevel3: []
+			};
+		},
+		watch: {
+			showPicker: {
+				handler(val) {
+					console.log(val)
+					this.show = this.showPicker
+				},
+				immediate: true
+			},
+			show: {
+				handler(val) {
+					if(val) {
+						this.cityList = [],
+						this.cityLevel1 = [],
+						this.cityLevel2 = [],
+						this.cityLevel3 = []
+						this.initCityData();
+					}
+				},
+				immediate: true
+			}
+		},
+		onLoad() {
+			// 城市选择器初始化
+			this.initCityData();
+		},
+		methods: {
+			initCityData() {
+				// 遍历城市js
+				this.cityData.forEach((item1, index1) => {
+					let temp2 = [];
+					this.cityLevel1.push(item1.provinceName);
+
+					let temp4 = [];
+					let temp3 = [];
+					// 遍历市
+					item1.cities.forEach((item2, index2) => {
+						temp2.push(item2.cityName);
+						// 遍历区
+						item2.counties.forEach((item3, index3) => {
+							temp3.push(item3.countyName);
+						})
+						temp4[index2] = temp3;
+						temp3 = [];
+					})
+					this.cityLevel3[index1] = temp4;
+
+					this.cityLevel2[index1] = temp2;
+				})
+				// 选择器默认城市
+				this.cityList.push(this.cityLevel1, this.cityLevel2[0], this.cityLevel3[0][0]);
+			},
+			// 选中时执行
+			changeHandler(e) {
+				const {
+					columnIndex,
+					index,
+					indexs,
+					value,
+					values,
+					// 微信小程序无法将picker实例传出来，只能通过ref操作
+					picker = this.$refs.uPicker
+				} = e;
+				if (columnIndex === 0) { // 选择第一列数据时
+					// 设置第二列关联数据
+					picker.setColumnValues(1, this.cityLevel2[index]);
+					// 设置第三列关联数据
+					picker.setColumnValues(2, this.cityLevel3[index][columnIndex]);
+				} else if (columnIndex === 1) { // 选择第二列数据时
+					// 设置第三列关联数据
+					picker.setColumnValues(2, this.cityLevel3[indexs[0]][index]);
+				}
+			},
+			// 单击确认按钮时执行
+			confirm(e) {
+				// 输出数组 [省, 市, 区]
+				console.log(e.value);
+				this.$emit('confirm', e.value)
+				// 隐藏城市选择器
+				this.show = false;
+			},
+			cancel() {
+				this.$emit('cancel')
+				this.show = false
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>

pages/ideasAndNeeds/ideasAndNeeds.vue

@@ -1,6 +1,100 @@
 <template>
-	<view>
+	<view class="content">
-		创意需求
+		<view class="top-tab">
+			<u-tabs :list="tabsList" :scrollable="false" lineWidth="25" lineColor="#0A994A" color="#969696"
+				:activeStyle="{color: '#15CA65', fontWeight: '400', transform: 'scale(1.05)', size:'20rpx'}"
+				lineHeight="4" :current="tabCurrent" @change="tabChange"></u-tabs>
+		</view>
+		<u--form :model="needsPublishForm" ref="uNeedsForm" :labelStyle="formLabelStyle">
+			<view style="margin-bottom: 20rpx;">
+				<u-form-item label="姓名" borderBottom>
+					<u-input v-model="needsPublishForm.name" :border="false" placeholder="请输入您的名称"
+						placeholder-style="color:#CCCCCC" />
+				</u-form-item>
+				<u-form-item label="城市">
+					<u-input v-model="needsPublishForm.city" :border="false" placeholder="请选择所在城市"
+						placeholder-style="color:#CCCCCC" suffixIcon="arrow-right" suffixIconStyle="color: #969696"
+						@focus="showCityPicker = true" @tap="showCityPicker = true" />
+					<cityPicker :show-picker="showCityPicker" @cancel="showCityPicker = false" @confirm="getCityValue">
+					</cityPicker>
+				</u-form-item>
+			</view>
+
+			<view style="margin-bottom: 20rpx;">
+				<view v-if="tabCurrent === 1">
+					<u-form-item label="品名" borderBottom>
+						<u-input v-model="needsPublishForm.productName" :border="false" placeholder="请输入您的产品名称"
+							placeholder-style="color:#CCCCCC" />
+					</u-form-item>
+					<u-form-item label="分类" borderBottom>
+						<u-input v-model="needsPublishForm.productCategory" :border="false" placeholder="请选择分类"
+							placeholder-style="color:#CCCCCC" suffixIcon="arrow-right" suffixIconStyle="color: #969696"
+							@focus="showCategoryPicker = true" @click="showCategoryPicker = true" />
+						<!-- <u-select v-model="showProductPicker" :list="productPickerList"></u-select> -->
+						<u-picker :show="showCategoryPicker" :columns="categoryPickerList"
+							@cancel="showCategoryPicker = false" @confirm="getCategoryValue"></u-picker>
+					</u-form-item>
+				</view>
+				<u-form-item label="产品" borderBottom>
+					<u-input v-model="needsPublishForm.product" :border="false" placeholder="请选择产品类型"
+						placeholder-style="color:#CCCCCC" suffixIcon="arrow-right" suffixIconStyle="color: #969696"
+						@focus="showProductPicker = true" @click="showProductPicker = true" />
+					<!-- <u-select v-model="showProductPicker" :list="productPickerList"></u-select> -->
+					<u-picker :show="showProductPicker" :columns="productPickerList" @cancel="showProductPicker = false"
+						@confirm="getProductValue"></u-picker>
+				</u-form-item>
+				<u-form-item label="定位" borderBottom>
+					<u-input v-model="needsPublishForm.position" :border="false" placeholder="请选择产品定位"
+						placeholder-style="color:#CCCCCC" suffixIcon="arrow-right" suffixIconStyle="color: #969696"
+						@focus="showPositionPicker = true" @click="showPositionPicker = true" />
+					<u-picker :show=showPositionPicker :columns="positionPickerList"
+						@cancel="showPositionPicker = false" @confirm="getPositionValue"></u-picker>
+				</u-form-item>
+				<view style="padding: 20rpx 15rpx;background-color: #fff;">
+					<u-textarea v-model="needsPublishForm.describle" border="surround" placeholder="请输入具体描述(限120字)"
+						:maxlength="120" placeholder-style="color:#CCCCCC"></u-textarea>
+				</view>
+			</view>
+
+			<view v-if="tabCurrent === 1" style="margin-bottom: 20rpx;">
+				<u-form-item label="上传图片" labelPosition="top">
+					<view style="padding-left: 20rpx;margin-top: 20rpx;">
+						<u-upload
+							:fileList="fileList1"
+							@afterRead="afterRead"
+							@delete="deletePic"
+							name="1"
+							multiple
+							:maxCount="10"
+						></u-upload>
+					</view>
+				</u-form-item>
+			</view>
+
+			<view style="background-color: #fff;">
+				<u-form-item label="手机" borderBottom>
+					<u--input placeholder="请输入手机号" :border="false" v-model="needsPublishForm.phone"
+						placeholder-style="color:#CCCCCC"></u--input>
+				</u-form-item>
+				<u-form-item label="验证" borderBottom>
+					<view style="display: flex;padding-right: 20rpx;align-items: center;">
+						<u--input placeholder="请输入验证码" :border="false" v-model="needsPublishForm.invalidCode"
+							placeholder-style="color:#CCCCCC"></u--input>
+						<u-code ref="uCode" @change="codeChange" keep-running change-text="倒计时XS"
+							@start="disabled = true" @end="disabled = false"></u-code>
+						<u-button size="small" type="primary" @tap="getCode" :text="tips" color="#EEEEEE"
+							:disabled="disabled" customStyle="color:#666666; width:160rpx;"></u-button>
+					</view>
+				</u-form-item>
+				<view style="padding: 30rpx;background-color: #fff;">
+					<u-button color="#0EBB5B" text="确定发布"></u-button>
+				</view>
+				<view style="padding: 20rpx;text-align: center;background-color: #fff;">
+					<text
+						style="font-size: 24rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #C8C8C8;line-height: 28rpx;">承诺声明预留文字位置承诺声明预留文字位置</text>
+				</view>
+			</view>
+		</u--form>
 	</view>
 </template>
 
@@ -8,15 +102,154 @@
 	export default {
 		data() {
 			return {
-
+				tabsList: [{
+					name: '需求发布'
+				}, {
+					name: '创意发布'
+				}],
+				tabCurrent: 0,
+				needsPublishForm: {
+					city: null,
+					position: null
+				},
+				formLabelStyle: {
+					'font-size': '32rpx !important'
+				},
+				showCityPicker: false,
+				showProductPicker: false,
+				showPositionPicker: false,
+				showCategoryPicker: false,
+				seconds: 10,
+				disabled: false,
+				tips: '获取验证码',
+				productPickerList: [
+					['烘焙', '零食', '饮料']
+					// {name: '烘焙', val: 'hongbei'}
+					// {name: '零食', val: 'ls'}
+					// {name: '饮料', val: 'yl'}
+				],
+				positionPickerList: [
+					['无添加剂', '无添加剂', '无添加剂']
+				],
+				categoryPickerList: [
+					['类别1', '类别', '类别']
+				],
+				fileList1: []
 			}
 		},
 		methods: {
-
+			tabChange(data) {
+				this.tabCurrent = data.index
+				this.needsPublishForm = {}
+			},
+			changeCity(data) {
+				this.needsPublishForm.city = data.data.join('')
+				console.log('showCityPicker = true')
+			},
+			getCityValue(data) {
+				this.showCityPicker = false
+				this.needsPublishForm.city = data.join('/')
+			},
+			getProductValue(data) {
+				this.showProductPicker = false
+				this.needsPublishForm.product = data.value[0]
+			},
+			getPositionValue(data) {
+				this.showPositionPicker = false
+				this.needsPublishForm.position = data.value[0]
+			},
+			getCategoryValue(data) {
+				this.showCategoryPicker = false
+				this.needsPublishForm.productCategory = data.value[0]
+			},
+			getCode() {
+				if (this.$refs.uCode.canGetCode) {
+					// 模拟向后端请求验证码
+					uni.showLoading({
+						title: '正在获取验证码'
+					})
+					setTimeout(() => {
+						uni.hideLoading();
+						// 这里此提示会被this.start()方法中的提示覆盖
+						uni.$u.toast('验证码已发送');
+						// 通知验证码组件内部开始倒计时
+						this.$refs.uCode.start();
+					}, 2000);
+				} else {
+					uni.$u.toast('倒计时结束后再发送');
+				}
+			},
+			codeChange(text) {
+				this.tips = text;
+			},
+						// 删除图片
+						deletePic(event) {
+							this[`fileList${event.name}`].splice(event.index, 1)
+						},
+						// 新增图片
+						async afterRead(event) {
+							// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
+							let lists = [].concat(event.file)
+							let fileListLen = this[`fileList${event.name}`].length
+							lists.map((item) => {
+								this[`fileList${event.name}`].push({
+									...item,
+									status: 'uploading',
+									message: '上传中'
+								})
+							})
+							for (let i = 0; i < lists.length; i++) {
+								const result = await this.uploadFilePromise(lists[i].url)
+								let item = this[`fileList${event.name}`][fileListLen]
+								this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
+									status: 'success',
+									message: '',
+									url: result
+								}))
+								fileListLen++
+							}
+						},
+						uploadFilePromise(url) {
+							// return new Promise((resolve, reject) => {
+							// 	let a = uni.uploadFile({
+							// 		url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
+							// 		filePath: url,
+							// 		name: 'file',
+							// 		formData: {
+							// 			user: 'test'
+							// 		},
+							// 		success: (res) => {
+							// 			setTimeout(() => {
+							// 				resolve(res.data.data)
+							// 			}, 1000)
+							// 		}
+							// 	});
+							// })
+						},
 		}
 	}
 </script>
 
-<style>
+<style lang="less" scoped>
+	.content {
+		background-color: #F8F8F8;
 
+		.top-tab {
+			background-color: #fff;
+			margin-bottom: 10rpx;
+		}
+
+		/deep/.u-form-item__body__left__content__label {
+			font-size: 32rpx !important;
+		}
+
+		/deep/.u-form-item__body {
+			padding: 13rpx 0 !important;
+		}
+
+		/deep/.u-textarea {
+			border-radius: 20rpx;
+			border: 1px solid #EEEEEE;
+		}
+	}
 </style>