intelligentGroup/pageTwo/me/addNeeds.vue

<template>
	<view class="box fromClass">
		<view class="pass" v-if="active==5">
			驳回原因：{{content.statusremark}}
		</view>
		<view class="lanBox">
			<view class="lan">
				<view class="left">产品名称（标题）</view>
				<view class="right">
					<input name="name" type="text" v-model="content.title" placeholder="标题" :disabled="disabled" />
				</view>
			</view>
			<!--  -->
			<view class="lan" v-if="type!=9">
				<view class="left">产品图片</view>
				<view class="right pics mb-10" v-for="(img,ind) in urlList" v-if="urlList.length">
					<image :src="img" mode="aspectFill" @click="handleimage(ind)" />
					<uni-icons type="close" size="22" class="uni-icons" @click="handleDel(ind)" @click.stop
						v-if="!disabled"></uni-icons>
				</view>
				<view v-if="!disabled&&urlList.length<6" @click="handleimage()" class="right pics size20">+</view>
				<text class="size12 c999 desc">最多可上传6张，大小不超过2M</text>
			</view>
			<!--  -->
			<view class="lan" v-if="type!=9">
				<view class="left">系统划分</view>
				<view class="right" v-if="!disabled">
					<picker mode="selector" :range="industrylist" range-key="name" :value="content.industryname"
						@change="changeIndustry">
						<view class="uni-input">{{content.industryname?content.industryname:"请选择"}}</view>
						<uni-icons type="forward" size="20" color="#999"></uni-icons>
					</picker>
				</view>
				<view class="right" v-else>
					{{content.industryname}}
				</view>
			</view>
			<!--  -->
			<view class="lan" v-if="type!=9">
				<view class="left">所在省市</view>
				<view class="right" v-if="!disabled">
					<pickRegions @getRegion="handleGetRegion" class="regions" :isArea="true">
						<view class="city" v-if="content.province">
							{{content.province}}{{content.city}}{{content.area}}
						</view>
						<view v-else>请选择省/市/区</view>
						<uni-icons type="forward" size="20" color="#999"></uni-icons>
					</pickRegions>
				</view>
				<view class="right" v-else>
					{{content.province}}{{content.city}}{{content.area}}
				</view>
			</view>
			<view class="lan" v-if="type!=9">
				<view class="left">详细地址</view>
				<view class="right">
					<input name="name" type="text" v-model="content.address" placeholder="单元楼栋" :disabled="disabled" />
				</view>
			</view>
			<!-- <view class="lan" v-if="type!=9">
				<view class="left">市场价</view>
				<view class="right">
					<input name="name" type="text" v-model="content.price" placeholder="市场价" :disabled="disabled" />
				</view>
			</view>
			<view class="lan" v-if="type!=9">
				<view class="left">会员价</view>
				<view class="right">
					<input name="name" type="text" v-model="content.vipprice" placeholder="会员价" :disabled="disabled" />
				</view>
			</view> -->
			<view class="lan">
				<view class="left">产品规格及介绍</view>
				<view class="right textarea">
					<textarea v-model="content.desc" name="content" :disabled="disabled" maxlength="-1" />
				</view>
			</view>
		</view>
		<view class="btn" @click="confirmInfo" v-if="!disabled">提交</view>
		<!-- <view class="wrapper" v-if="showModal">
			<view class="bg" @click="showModal=false">
				<view class="all">
					<icon class="iconfont icon-yuanxingxuanzhongfill"></icon>
					<view class="bold size20">提交成功</view>
					<view>在“个人中心”查看审核进度</view>
					<view>如有疑问请联系联系人</view>
				</view>
				<view class="greenBtn">
					<view class="btn">确认</view>
					<view class="btn">取消</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import pickRegions from "@/uni_modules/pick-regions/pick-regions.vue"
	export default {
		data() {
			return {
				content: {
					type: "",
					title: "",
					province: "",
					city: "",
					area: "",
					address: "",
					industryid: "",
					industryname: "",
					price: "",
					vipprice: "",
					desc: '',
					pics: [],
				},
				urlList: [],
				pathList: [],
				showModal: false,
				type: 3,
				status: "",
				disabled: false,
				active: 0,
				imageStyles: {
					width: 100,
					height: 100,
				},
				imgArr: []

			};
		},
		components: {
			pickRegions
		},
		computed: {
			...mapState(["user", "HomeContent"]),
			industrylist() {
				return this.HomeContent.industrylist
			},
		},
		onLoad(options) {
			this.status = options.status
			if (this.status == 'add') {
				this.type = options.type
				this.content.type = this.type
				this.disabled = false
			} else {
				this.content = JSON.parse(options.item)
				this.type = this.content.type
				this.content.industryid = this.type != 9 ? this.industrylist[this.industrylist.findIndex(ite => ite
					.name === this.content.industryname)].id : ''
				this.active = this.content.active //审核中、已驳回、已发布的状态
				this.disabled = this.active == 4 ? true : false
				let url = []
				let path = []

				this.content.pics.forEach(item => {
					url.push(item.url)
					path.push(item.path)
				})
				this.urlList = url
				this.pathList = path
				console.log(this.urlList, this.pathList)
			}
			console.log("options", options)
			uni.setNavigationBarTitle({
				title: this.type == 3 ? "发布商品" : this.type == 8 ? '发布供货' : '发布采购'
			});
		},
		methods: {
			// 提交
			confirmInfo() {
				let that = this
				if (this.type == 9) {
					if (!this.content.title) {
						this.$tools.msg("请填写产品名称")
						return;
					}
					if (!this.content.desc) {
						this.$tools.msg("请填写产品规格及介绍")
						return;
					}
				} else {
					if (!this.content.title) {
						this.$tools.msg("请填写产品名称")
						return;
					}
					if (!this.content.pics) {
						this.$tools.msg("请上传产品图片")
						return;
					}
					if (!this.content.industryid) {
						this.$tools.msg("请选择系统划分")
						return;
					}
					if (!this.content.province) {
						this.$tools.msg("请选择所在省市")
						return;
					}
					if (!this.content.address) {
						this.$tools.msg("请填写详细地址")
						return;
					}
					// if (!this.pathList) {
					// 	this.$tools.msg("请输入市场价")
					// 	return;
					// }
					// if (!this.content.vipprice) {
					// 	this.$tools.msg("请输入会员价")
					// 	return;
					// }
					if (!this.content.desc) {
						this.$tools.msg("请填写产品规格及介绍")
						return;
					}
					this.content.pics = this.pathList
				}
				if (that.status == 'add') {
					that.subInfo(that.content);
				} else {
					uni.showModal({
						title: '提示',
						content: "修改后将重新审核发布",
						success: function(res) {
							if (res.confirm) {
								that.EditInfo(that.content)
							} else if (res.cancel) {
								that.$tools.msg('您已取消操作')
							}
						}
					});
				}
				console.log("提交", this.content)
			},
			subInfo(data) {
				let that = this
				that.$model.getProductAdd(data).then(res => {
					if (res.code == 0) {
						that.$tools.msg("提交成功");
						uni.showToast({
							title: "提交成功",
							duration: 2000
						});
						setTimeout(function() {
							uni.switchTab({
								url: "/pages/me/me"
							})
						}, 2000)
					} else {
						that.$tools.msg(res.message);
					}
				});
			},
			handlecolse() {
				this.content.province = ""
				this.content.city = ""
				this.content.area = ""
			},
			EditInfo(data) {
				let that = this
				that.$model.getProductEdit(data).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: "提交成功",
							duration: 2000
						});
						setTimeout(function() {
							uni.switchTab({
								url: "/pages/me/me"
							})
						}, 2000)
					} else {
						that.$tools.msg(res.message);
					}
				});
			},
			handleimage(ind) {
				let that = this
				let imgArr = []
				if (this.disabled) return
				uni.chooseImage({
					count: 3, //默认9
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						imgArr.push(res.tempFilePaths)
						imgArr.forEach(ele => {
							ele.forEach(item => {
								that.$model.getUpLoadimg({
									uploadpath: item
								}).then(ress => {
									if (ress.code == 0) {
										that.urlList.push(ress.data.url)
										that.pathList.push(ress.data.path)
									} else {
										that.$tools.msg("不支持该图像")
									}
								})
							})
						})
					}
				})

			},
			handleDel(ind) {
				let that = this
				that.urlList.splice(ind, 1)
				that.pathList.splice(ind, 1)
				console.log("ind", ind)
			},
			handleGetRegion(ite) {
				console.log("省市区", ite)
				this.content.province = ite[0].name
				this.content.city = ite[1].name
				this.content.area = ite[2].name
			},
			// 所属行业
			changeIndustry(e) {
				this.content.industryname = this.HomeContent.industrylist[e.target.value].name
				this.content.industryid = this.HomeContent.industrylist[e.target.value].id
			},
		},

	};
</script>

<style scoped="scoped" lang="scss">
	.right {

		/deep/picker,
		.regions {
			width: 100%;
		}
	}

	/deep/.is-add {
		background-color: #fff;
	}

	.pics {
		width: 100px !important;
		height: 100px !important;
		justify-content: center;
		padding: 0 !important;
		float: left;
		// border: none !important;
		// background-color: inherit !important;

		.uni-icons {
			background: #fff;
			border-radius: 50%;
			position: absolute;
			right: 0;
			font-size: inherit !important;
		}

		image {
			width: 100%;
			height: 100%;

		}
	}

	.lan {
		justify-content: space-between;
	}
</style>