shop-applet/pages/product/addGood/addGood.vue

<template>
	<view class='content'>
		<u--form :model="formData" :rules="rules" ref="formData" :labelStyle="{fontSize:'32rpx'}" labelWidth='auto'>
			<view class="card" style="height: 300rpx;"
				@click="navgo(`/pages/product/addGoodDetail/goodsSearch?mer_id=${mer_id}`)">
				<u-form-item label="想卖什么" prop="title">
					<text slot='right' style="font-size:28rpx ; color:#989898 ;">{{value1.length}}/{{maxLength}}</text>
				</u-form-item>
				<u-line></u-line>
				<u--textarea v-model="formData.store_name" placeholder="请输入内容" :autoHeight='true'
					:maxlength='maxLength'></u--textarea>
			</view>
			<view class="card" style="min-height: 268rpx;">
				<u-form-item label="商品图片" prop="userInfo.name" ref="item1" labelWidth='auto'>
					<text style="font-size:24rpx ; color:#E18C34 ;">上传时应注重真实性、清晰度</text>
				</u-form-item>
				<view class="" style="display: flex;flex-wrap: wrap;">
					<u-upload :fileList="formData.imageList" @afterRead="afterRead" @delete="deletePic" name="6"
						multiple :maxCount="5">
						<view class='uploadimg'>
							<u-icon name="plus" color="#777777"></u-icon>
							<view class="" style="color: #777777;font-size: 24rpx;">
								上传图片
							</view>
						</view>
					</u-upload>
				</view>
			</view>
			<view class="card">
				<u-form-item label="规格与价格" prop="userInfo.name" ref="item1" border-bottom>
				</u-form-item>
				<u-form-item label="计量单位" prop="userInfo.name" ref="item1" border-bottom>
					<view style="display: flex;" slot='right' @click='showPouple=true'>
						<view style="margin-right: 10rpx;line-height: 25rpx;color:#777777">
							{{formData.attrValue[0].unit_name ||'请选择'}}
						</view>
						<u-icon name="arrow-right" style="margin-right: 30rpx;"></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="零售价格" prop="userInfo.name" ref="item1" border-bottom>
					<u--input placeholderStyle="color:#777777" style="width: 220rpx;" placeholder="请输入零售价"
						v-model="formData.attrValue[0].price" slot='right'></u--input>
				</u-form-item>
				<u-form-item v-if='isWholeSale' label="批发价格" prop="userInfo.name" ref="item1" border-bottom>
					<u--input placeholderStyle="color:#777777" style="width: 250rpx;" placeholder="请输入批发价格"
						v-model="formData.attrValue[0].wholesale_price" slot='right'></u--input>
				</u-form-item>
				<u-form-item label="商品库存" prop="userInfo.name" ref="item1">
					<u--input placeholderStyle="color:#777777" style="width: 220rpx;" placeholder="请输入零售价"
						v-model="formData.attrValue[0].stock" slot='right'></u--input>
				</u-form-item>
			</view>
			<view class="footer">
				<view class="footer-top" @click='goDetail'>
					<text style="margin: 10rpx auto;">
						显示全部<u-icon style="display: inline-block;font-weight: bold;" color="$uni-newTheme-color"
							name="arrow-right"></u-icon>
					</text>
				</view>
				<view class="footer-bottom">
					发布内容越详尽，成单力越高哦~
				</view>
			</view>

			<view class="submit-btn" @click='submit'>
				<u-button text="立即发布获取订单" color="#33BB3C" class="custom-style"></u-button>
			</view>
		</u--form>
		<u-popup :show="showPouple" @close="showPouple=false" @open="showPouple=true" :round="10">
			<view class="RegularFont" style="padding: 42rpx 40rpx">
				<view class="pop-head">
					<text v-if='!showCustom' @click='showPouple=false'>取消</text>
					<text v-else @click='showCustom=false'>
						<u-icon name="arrow-left" size="20"></u-icon>
					</text>
					<text style="font-size:32rpx ;color:#333333 ;">计量单位</text>
					<text v-if='showCustom' @click='addAttr'>确定</text>
					<text v-else></text>
				</view>
				<view style="height: 500rpx;">
					<u-transition :show="!showCustom" mode="slide-right">
						<view class="goods-leval">
							<view class="goods-leval-li" v-for='(item,index) in attrList' :key='index'
								@click='choseAttr(item)'>
								{{item}}
							</view>
							<view class="goods-leval-li " style="display: flex;color:#38BE41 ;"
								@click="showCustom=true">
								<u-icon name="plus" color="#38BE41" style='margin-right: 8rpx;'></u-icon> 自定义
							</view>
						</view>
					</u-transition>
					<u-transition :show="showCustom" mode="slide-left">
						<view class="transition">
							<u--textarea v-model="selfAttr" placeholder="请输入计量单位"></u--textarea>
						</view>
					</u-transition>
				</view>
			</view>
		</u-popup>


	</view>


</template>

<script>
	import form from "../../../uni_modules/uview-ui/libs/config/props/form";
	import {
		productCreate,
		productUpdate
	} from '@/api/product.js';
	import uploadImgVideo from "./components/uploadImgVideo.vue"
	import {
		TOKENNAME,
		HTTP_REQUEST_URL
	} from '@/config/app.js';
	import {
		formatDate
	} from "../../../libs/uniApi";
	export default {
		components: {
			uploadImgVideo,
		},
		data() {
			return {
				isWholeSale: false, //批发商
				show: false, //选择图片还是视屏
				showCustom: false, //计量单位自定义 
				mer_id: "",
				attrList: ['斤',
					"公斤",
					"吨",
					"升",
					"个",
					"台",
					"瓶",
					"桶",
					"箱",
					"袋",
					"包",
					"盒",
					"件",
					"罐"
				],
				selfAttr: "",
				formData: {
					store_name: "",
					imageList: [],
					attrValue: [],
					cate_name: "",
					cate_id: "",
					attrValue: [{
						"price": "",
						"unit_name": "",
						"wholesale_unit_name": "",
						"wholesale_price": '',
						"stock": "",
					}],
					product_attribute: [],
					spec_type: "0"
				},
				showPouple: false,
				fileList6: [],
				value1: "",
				value2: "",
				value3: "",
				value4: "",
				maxLength: 30,
				showSex: false,



				rules: {
					title: {
						type: 'string',
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					}
					// 'userInfo.name': {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请填写姓名',
					// 	trigger: ['blur', 'change']
					// },
					// 'userInfo.sex': {
					// 	type: 'string',
					// 	max: 1,
					// 	required: true,
					// 	message: '请选择男或女',
					// 	trigger: ['blur', 'change']
					// },
				},
			};
		},

		methods: {
			// 删除图片
			deletePic(event) {
				this.formData[`imageList`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.formData[`imageList`].length
				lists.map((item) => {
					this.formData[`imageList`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.formData[`imageList`][fileListLen]
					this.formData[`imageList`].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_REQUEST_URL + '/api/upload/image/field',
						filePath: url,
						name: 'field',
						success: (res) => {
							console.log(res.data)
							resolve(JSON.parse(res.data).data.path)
						}
					});
				})
			},

			choseAttr(name) {
				this.formData.attrValue[0].unit_name = name;
				this.formData.attrValue[0].wholesale_unit_name = name;
				this.showPouple = false
			},
			addAttr() {
				if (!this.selfAttr) return;
				this.attrList.push(this.selfAttr)
				this.formData.attrValue[0].unit_name = this.attrList[this.attrList.length - 1]
				this.formData.attrValue[0].wholesale_unit_name = this.attrList[this.attrList.length - 1]
				this.selfAttr = ''
				this.showCustom = false
				this.showPouple = false
			},

			goDetail() {
				uni.navigateTo({
					url: `/pages/product/addGoodDetail/addGoodDetail?mer_id=${this.mer_id}&&formData=${JSON.stringify(this.formData)}`
				})
			},
			navgo(url) {
				uni.navigateTo({
					url
				})
			},
			async submit() {
				this.formData.imageList = this.formData.imageList.map(item => item.url)
				console.log(this.formData)
				// await this.$refs.formData.validate()
				productCreate(this.mer_id, this.formData)
					.then(res => {
						hideLoading();
						Modal('提交成功', '点击确定，前往商品列表页面').then(() => {
							if (this.import == 1) {
								uni.$emit('importAttrValueOK', this.setFormData.import_id);
								uni.navigateBack();
							} else uni.redirectTo({
								url: `/pages/product/goodsOnSale/index?mer_id=${this.mer_id}&type=6`
							})
						}).catch(() => {
							uni.navigateBack()
						})
					})
					.catch(rej => {
						Toast(rej);
					});
				console.log(this.formData)
			}
		},
		onLoad(option) {
			this.mer_id = option.mer_id
			this.isWholeSale = this.$store.state.app.userInfo?.mer_info?.wholesale == 2;
			if (option.data) {
				this.formData.cate_name = JSON.parse(option.data).label
				this.formData.cate_id = JSON.parse(option.data).value
				console.log(option.data)
			}
		},



	};
</script>
<style lang='scss'>
	.content {
		width: 100vw;
		min-height: 100vh;
		background-color: #F1F1F1;
		box-sizing: border-box;
		padding: 20rpx;
		padding-bottom: 200rpx;
		font-family: PingFangRegular;


	}

	.card {
		background-color: white;
		padding: 28rpx 30rpx;
		border-radius: 12rpx;
		margin-bottom: 30rpx;
	}

	.uploadimg {
		width: 140rpx;
		height: 140rpx;
		border-radius: 16rpx;
		border: 2rpx solid #F1F1F1;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		box-sizing: border-box;
		padding: 20rpx 0;

	}


	.footer {
		margin-top: 130rpx;
		text-align: center;


		.footer-top {
			color: $uni-newTheme-color;
			display: flex;
			font-weight: bold;
			align-items: center;
		}

		.footer-bottom {
			font-size: 28rpx;
			color: #989898;

		}

	}

	.pop-head {
		display: flex;
		justify-content: space-between;
		color: #20B128;
		margin-bottom: 42rpx;
	}

	.goods-leval {
		display: flex;
		flex-wrap: wrap;
		overflow-y: auto;

		.goods-leval-li {
			margin-right: 20rpx;
			padding: 10rpx 40rpx;
			height: 60rpx;
			margin-bottom: 20rpx;
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			background-color: #F1F1F1;
		}

		.act {
			color: #20B128;
			background-color: #E8F7E9;
			border: 1px solid #20B128;


		}
	}

	.submit-btn {
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translate(-50%, 0);
		width: 670rpx;
		border-radius: 40rpx;
		overflow: hidden;
	}
</style>