nongxiaoyu/pages/service/sales-publish.vue

<template>
	<view class="sales-publish-container">
		<!-- 表单内容 -->
		<view class="form-container">
			<!-- 产品名称 -->
			<view class="form-item">
				<view class="item-label">
					<text class="label-text">产品名称</text>
					<text class="required">*</text>
				</view>
				<view class="item-content">
					<input class="form-input" v-model="formData.productName" placeholder="请输入产品名称"
						placeholder-style="color: #999;" maxlength="20" @input="onNameInput" />
					<view class="char-count">{{ nameLength }}/20</view>
				</view>
			</view>

			<!-- 产品分类 -->
			<view class="form-item">
				<view class="item-label">
					<text class="label-text">产品分类</text>
					<text class="required">*</text>
				</view>
				<view class="item-content">
					<view class="category-selector" @click="showCategoryPicker = true">
						<text class="selector-text" :class="{ placeholder: !formData.category }">
							{{ formData.category || '请选择产品分类' }}
						</text>
						<text class="arrow-icon">></text>
					</view>
				</view>
			</view>

			<!-- 销售价格 -->
			<view class="form-item">
				<view class="item-label">
					<text class="label-text">销售价格</text>
					<text class="required">*</text>
				</view>
				<view class="item-content">
					<view class="input-with-unit">
						<text class="currency-symbol">¥</text>
						<input class="form-input" v-model="formData.price" placeholder="请输入销售价格"
							placeholder-style="color: #999;" type="digit" />
						<text class="unit-text">元/斤</text>
					</view>
				</view>
			</view>

			<!-- 产品简介 -->
			<view class="form-item">
				<view class="item-label">
					<text class="label-text">产品简介</text>
				</view>
				<view class="item-content">
					<textarea class="form-textarea" v-model="formData.description" placeholder="请简单介绍您的农产品特色、种植方式等"
						placeholder-style="color: #999;" maxlength="80" auto-height @input="onDescInput" />
					<view class="char-count">{{ descLength }}/80</view>
				</view>
			</view>

			<!-- 产品图片 -->
			<view class="form-item">
				<view class="item-label">
					<text class="label-text">产品图片</text>
					<text class="required">*</text>
					<text class="optional">(最多3张)</text>
				</view>
				<view class="item-content">
					<view class="image-upload-area">
						<view class="image-item" v-for="(image, index) in formData.images" :key="index">
							<image class="uploaded-image" :src="image" mode="aspectFill"></image>
							<view class="image-delete" @click="removeImage(index)">×</view>
						</view>
						<view class="image-upload-btn" v-if="formData.images.length < 3" @click="chooseImage">
							<text class="upload-icon">+</text>
							<text class="upload-text">上传图片</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 产地信息 -->
			<view class="form-item">
				<view class="item-label">
					<text class="label-text">产地信息</text>
				</view>
				<view class="contact-info">
					<view class="contact-row">
						<text class="contact-label">产地：</text>
						<text class="contact-value">{{ locationInfo.address }}</text>
					</view>
					<view class="contact-row">
						<text class="contact-label">地块：</text>
						<text class="contact-value">{{ locationInfo.field }}</text>
					</view>
				</view>
			</view>
			<uni-data-picker v-slot:default="{data, error, options}" :localdata="localData" popup-title="请选择省市区"
				@change="onchange" @nodeclick="onnodeclick">
				<view class="selectedAddress">
					<view v-if="data.length == 0 && curLocation">{{ curLocation }}</view>
					<view v-if="data.length" class="selected">
						<view v-for="(item,index) in data" :key="index" class="selected-item">
							<text>{{item.text}} </text>
						</view>
					</view>
					<view class="addrlocation">
						<uni-icons type="location" color="#ec4149" size="24"></uni-icons>
					</view>
				</view>
			</uni-data-picker>
			<!-- 联系人信息 -->
			<view class="form-item">
				<view class="item-label">
					<text class="label-text">联系人信息</text>
				</view>
				<view class="item-content">
					<view class="contact-input-row">
						<text class="contact-label">联系人：</text>
						<input class="contact-input" v-model="formData.contactName" placeholder="请输入联系人姓名"
							placeholder-style="color: #999;" maxlength="10" />
					</view>
					<view class="contact-input-row">
						<text class="contact-label">电话：</text>
						<input class="contact-input" v-model="formData.contactPhone" placeholder="请输入联系电话"
							placeholder-style="color: #999;" type="number" maxlength="11" />
					</view>
				</view>
			</view>
		</view>

		<!-- 底部提交按钮 -->
		<view class="bottom-action-bar">
			<view class="submit-btn" @click="submitForm">
				<text class="btn-text">{{ isEditMode ? '保存修改' : '提交审核' }}</text>
			</view>
		</view>

		<!-- 分类选择弹窗 -->
		<view class="picker-modal" v-if="showCategoryPicker" @click="showCategoryPicker = false">
			<view class="picker-content" @click.stop>
				<view class="picker-header">
					<text class="picker-title">选择产品分类</text>
					<text class="picker-close" @click="showCategoryPicker = false">×</text>
				</view>
				<view class="picker-options">
					<view class="picker-option" v-for="category in categoryOptions" :key="category"
						@click="selectCategory(category)">
						<text class="option-text">{{ category }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import cityRows from '@/utils/data.json';
	export default {
		data() {
			return {
				isEditMode: false, // 是否为编辑模式
				editProductId: '', // 编辑的产品ID
				productType: 'sale', // 产品类型：sale（销售）或 purchase（收购）
				formData: {
					productName: '',
					category: '',
					price: '',
					description: '',
					images: [],
					contactName: '',
					contactPhone: ''
				},
				locationInfo: {
					address: '张家村',
					field: '水稻田A区'
				},
				categoryOptions: ['蔬菜', '水果', '粮食', '畜产品', '水产品', '中药材'],
				showCategoryPicker: false,
				nameLength: 0,
				descLength: 0,
				localData: [], //省市区地址
				curLocation: uni.getStorageSync('location_address')
			}
		},

		onLoad(options) {
			this.localData = this.get_city_tree()

			// 检查是否为编辑模式
			if (options.action === 'edit' && options.id) {
				this.isEditMode = true;
				this.editProductId = options.id;
				this.productType = options.type || 'sale';

				// 设置页面标题
				uni.setNavigationBarTitle({
					title: this.productType === 'sale' ? '编辑销售信息' : '编辑收购信息'
				});

				// 加载产品数据
				this.loadProductData();
			} else {
				// 新建模式
				this.isEditMode = false;
				uni.setNavigationBarTitle({
					title: '发布农产品'
				});
			}
		},

		methods: {
			onchange(e) {
			    const value = e.detail.value
				console.log("value",value);
			},
			onnodeclick(node) {
				console.log("node",node);
				console.log("curLocation",this.curLocation);
			},
			// 省市区数据树生成
			get_city_tree() {
				let res = []
				if (cityRows.length) {
					// 递归生成
					res = this.handleTree(cityRows)
				}
				return res
			},


			handleTree(data, parent_code = null) {
				let res = []

				let keys = {
					id: 'code',
					pid: 'parent_code',
					children: 'children',

					text: 'name',
					value: 'code'
				}

				let oneItemDEMO = {
					text: '',
					value: '',
					children: []
				}
				let oneItem = {}

				// 循环
				for (let index in data) {
					// 判断
					if (parent_code === null) {
						// 顶级菜单 - 省
						if (!data[index].hasOwnProperty(keys.pid) || data[index][keys.pid] == parent_code) {
							// 不存在parent_code，或者已匹配
							oneItem = JSON.parse(JSON.stringify(oneItemDEMO))
							oneItem.text = data[index][keys.text]
							oneItem.value = data[index][keys.value]

							// 递归下去
							oneItem.children = this.handleTree(data, data[index][keys.id])
							res.push(oneItem)
						}
					} else {
						// 非顶级菜单 - 市、区、街道
						if (data[index].hasOwnProperty(keys.pid) && data[index][keys.pid] == parent_code) {
							// 已匹配
							oneItem = JSON.parse(JSON.stringify(oneItemDEMO))
							oneItem.text = data[index][keys.text]
							oneItem.value = data[index][keys.value]

							// 递归下去
							oneItem.children = this.handleTree(data, data[index][keys.id])
							res.push(oneItem)

						}
					}
				}
				return res
			},
			// 加载产品数据（编辑模式）
			loadProductData() {
				// 模拟从API加载数据，实际应用中需要根据ID和类型调用相应的API
				uni.showLoading({
					title: '加载中...'
				});

				setTimeout(() => {
					let mockData;

					if (this.productType === 'sale') {
						// 销售信息的模拟数据
						mockData = {
							productName: '2024年红富士苹果',
							category: '水果',
							price: '8.5',
							description: '自家果园种植的红富士苹果，个大味甜，果形端正，色泽鲜艳。采用有机种植方式，无农药残留，口感清脆香甜。',
							images: [
								'/static/images/products/corn-seeds-new.jpg',
								'/static/images/products/rice-seeds.jpg'
							],
							contactName: '张先生',
							contactPhone: '18812341234'
						};
					} else {
						// 收购信息的模拟数据
						mockData = {
							productName: '高价收购优质土豆',
							category: '蔬菜',
							price: '3.5',
							description: '大量收购优质土豆，要求新鲜无病害，无青皮，规格统一。支持长期合作，价格优惠，现金结算。',
							images: [
								'/static/images/products/agriculture-tools.jpg'
							],
							contactName: '李先生',
							contactPhone: '13856785678'
						};
					}

					// 填充表单数据
					this.formData = {
						...mockData
					};

					// 更新字符计数
					this.nameLength = this.formData.productName.length;
					this.descLength = this.formData.description.length;

					uni.hideLoading();
				}, 1000);
			},

			// 产品名称输入处理
			onNameInput(e) {
				this.nameLength = e.detail.value.length;
			},

			// 描述输入处理
			onDescInput(e) {
				this.descLength = e.detail.value.length;
			},

			// 选择分类
			selectCategory(category) {
				this.formData.category = category;
				this.showCategoryPicker = false;
			},

			// 选择图片
			chooseImage() {
				const remainingCount = 3 - this.formData.images.length;
				uni.chooseImage({
					count: remainingCount,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.formData.images = this.formData.images.concat(res.tempFilePaths);
					},
					fail: (err) => {
						console.error('选择图片失败:', err);
					}
				});
			},

			// 删除图片
			removeImage(index) {
				this.formData.images.splice(index, 1);
			},

			// 表单验证
			validateForm() {
				if (!this.formData.productName.trim()) {
					uni.showToast({
						title: '请输入产品名称',
						icon: 'none'
					});
					return false;
				}

				if (!this.formData.category) {
					uni.showToast({
						title: '请选择产品分类',
						icon: 'none'
					});
					return false;
				}

				if (!this.formData.price || this.formData.price <= 0) {
					uni.showToast({
						title: '请输入有效的销售价格',
						icon: 'none'
					});
					return false;
				}

				if (this.formData.images.length === 0) {
					uni.showToast({
						title: '请至少上传一张产品图片',
						icon: 'none'
					});
					return false;
				}

				if (!this.formData.contactName.trim()) {
					uni.showToast({
						title: '请输入联系人姓名',
						icon: 'none'
					});
					return false;
				}

				if (!this.formData.contactPhone.trim()) {
					uni.showToast({
						title: '请输入联系电话',
						icon: 'none'
					});
					return false;
				}

				// 简单的手机号格式验证
				const phoneRegex = /^1[3-9]\d{9}$/;
				if (!phoneRegex.test(this.formData.contactPhone)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					});
					return false;
				}

				return true;
			},

			// 提交表单
			submitForm() {
				if (!this.validateForm()) {
					return;
				}

				// 显示加载提示
				const loadingTitle = this.isEditMode ? '保存中...' : '提交中...';
				uni.showLoading({
					title: loadingTitle
				});

				// 模拟提交
				setTimeout(() => {
					uni.hideLoading();

					if (this.isEditMode) {
						// 编辑模式 - 保存修改
						uni.showModal({
							title: '保存成功',
							content: '您的修改已保存成功！',
							showCancel: false,
							success: () => {
								uni.navigateBack();
							}
						});
					} else {
						// 新建模式 - 提交审核
						uni.showModal({
							title: '提交成功',
							content: '您的农产品信息已提交审核，审核通过后将在销售页面展示。',
							showCancel: false,
							success: () => {
								uni.navigateBack();
							}
						});
					}
				}, 2000);
			}
		}
	}
</script>

<style lang="scss">
	.sales-publish-container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: calc(128rpx + env(safe-area-inset-bottom));
	}

	.form-container {
		padding: 20rpx;
	}

	.form-item {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 24rpx;
		margin-bottom: 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.item-label {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.label-text {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
	}

	.required {
		color: #ff4d4f;
		font-size: 28rpx;
		margin-left: 4rpx;
	}

	.optional {
		color: #999;
		font-size: 24rpx;
		margin-left: 8rpx;
	}

	.item-content {
		position: relative;
	}

	.form-input {
		width: 100%;
		height: 44rpx;
		font-size: 28rpx;
		color: #333;
		line-height: 44rpx;
	}

	.form-textarea {
		width: 100%;
		min-height: 120rpx;
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
	}

	.char-count {
		position: absolute;
		right: 0;
		bottom: -4rpx;
		font-size: 24rpx;
		color: #999;
	}

	// 分类选择器
	.category-selector {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.selector-text {
		font-size: 28rpx;
		color: #333;

		&.placeholder {
			color: #999;
		}
	}

	.arrow-icon {
		font-size: 24rpx;
		color: #999;
	}

	// 带单位的输入框
	.input-with-unit {
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #f0f0f0;
		padding: 12rpx 0;
	}

	.currency-symbol {
		font-size: 28rpx;
		color: #333;
		margin-right: 8rpx;
	}

	.unit-text {
		font-size: 28rpx;
		color: #666;
		margin-left: 8rpx;
		white-space: nowrap;
	}

	// 图片上传
	.image-upload-area {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;
	}

	.image-item {
		position: relative;
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.uploaded-image {
		width: 100%;
		height: 100%;
	}

	.image-delete {
		position: absolute;
		top: -8rpx;
		right: -8rpx;
		width: 32rpx;
		height: 32rpx;
		background-color: #ff4d4f;
		color: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		font-weight: bold;
	}

	.image-upload-btn {
		width: 160rpx;
		height: 160rpx;
		border: 2rpx dashed #ddd;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #fafafa;
	}

	.upload-icon {
		font-size: 48rpx;
		color: #999;
		margin-bottom: 8rpx;
	}

	.upload-text {
		font-size: 24rpx;
		color: #999;
	}

	// 产地信息
	.contact-info {
		background-color: #f8f9fa;
		border-radius: 8rpx;
		padding: 20rpx;
	}

	.contact-row {
		display: flex;
		align-items: center;
		margin-bottom: 12rpx;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.contact-value {
		font-size: 26rpx;
		color: #333;
	}

	// 联系人信息输入
	.contact-input-row {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.contact-label {
		font-size: 28rpx;
		color: #333;
		width: 120rpx;
		font-weight: bold;
	}

	.contact-input {
		flex: 1;
		height: 44rpx;
		font-size: 28rpx;
		color: #333;
		line-height: 44rpx;
		border-bottom: 1rpx solid #f0f0f0;
		padding: 12rpx 0;
	}

	// 底部提交按钮
	.bottom-action-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		background-color: #fff;
		border-top: 1rpx solid #f0f0f0;
		padding: 20rpx 30rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		z-index: 1000;
		box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);
		box-sizing: border-box;
	}

	.submit-btn {
		width: 100%;
		height: 88rpx;
		background-color: #4CAF50;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: background-color 0.2s ease;
		box-sizing: border-box;

		&:active {
			background-color: #45a049;
		}

		.btn-text {
			font-size: 32rpx;
			color: #fff;
			font-weight: bold;
		}
	}

	// 分类选择弹窗
	.picker-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 2000;
		display: flex;
		align-items: flex-end;
	}

	.picker-content {
		width: 100%;
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		padding: 0;
	}

	.picker-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.picker-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.picker-close {
		font-size: 36rpx;
		color: #999;
	}

	.picker-options {
		padding: 20rpx 0;
	}

	.picker-option {
		padding: 24rpx 30rpx;
		border-bottom: 1rpx solid #f8f8f8;
		transition: background-color 0.2s ease;

		&:last-child {
			border-bottom: none;
		}

		&:active {
			background-color: #f5f5f5;
		}
	}

	.option-text {
		font-size: 30rpx;
		color: #333;
	}
</style>