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.cate_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;">
					<view class='uploadimg' @click="show=true">
						<u-icon name="plus" color="#777777"></u-icon>
						<view class="" style="color: #777777;font-size: 20rpx;">
							上传图片/视频
						</view>
					</view>
					<!-- <view class="" style="width: 100rpx;height: 100rpx;background-color: red;" @click="test">

					</view> -->
					<!-- <u-upload :fileList="formData.imageList" @afterRead="afterRead" @delete="deletePic" name="6"
						multiple :maxCount="5" accept="video">
						<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 inputAlign='right' 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 inputAlign='right' 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 inputAlign='right' 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>
		<u-picker :show="show" :columns="columns" confirmColor='#33BB3C' @close='show=false' @confirm='choseMedia'
			@cancel='show=false'></u-picker>

	</view>


</template>

<script>
	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";
	import {
		serialize,
		Toast,
		Loading,
		hideLoading,
		Modal
	} from "@/libs/uniApi.js";
	export default {
		components: {
			uploadImgVideo,
		},
		data() {
			return {
				columns: [
					['图片', '视频', ]
				],
				isWholeSale: false, //批发商
				show: false, //选择图片还是视屏
				showCustom: false, //计量单位自定义 
				mer_id: "",
				attrList: ['斤',
					"公斤",
					"吨",
					"升",
					"个",
					"台",
					"瓶",
					"桶",
					"箱",
					"袋",
					"包",
					"盒",
					"件",
					"罐"
				],
				selfAttr: "",
				formData: {
					"store_name": "",
					"imageList": [

					],
					"attrValue": [{
						"price": "",
						"unit_name": "",
						"wholesale_unit_name": "",
						"wholesale_price": '',
						"cost": "",
						"stock": "",
						"ot_price": "",
						"procure_price": "",
						"bar_code": "",
						"weight": "",
						"volume": "",
						"extension_one": "",
						"extension_two": "",
						open: true,
						spec_type: " "
					}],
					"cate_name": "",
					"unit_name": "",
					"cate_id": '',
					"mer_cate_id": [

					],
					"mer_cate_name": "",
					"spec_type": "0",
					"attr": [],
					"specifica": "",
					"delivery_way": [

					],
					"delivery_free": "1",
					"temp_id": "",
					"tempName": "",
					"once_min_count": "",
					"image": "",
					"slider_image": [
						""
					],
					"is_good": 0,
					"is_gift_bag": 0,
					"sort": "",
					"once_count": "",
					"video_link": "",
					"content": {
						"title": "",
						"image": [

						]
					},
					"stock": ""
				},
				showPouple: false,
				fileList6: [],
				value1: "",
				value2: "",
				value3: "",
				value4: "",
				maxLength: 30,
				showSex: false,
				rules: {
					title: {
						type: 'string',
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					}

				},
			};
		},

		methods: {
			choseMedia(e) {
				console.log(e.value)
				this.show = false
				if (e.value[0] == '图片') {
					this.handleChooseImage()
					// uni.chooseImage({
					// 	count: 6, //默认9
					// 	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// 	sourceType: ['album', 'camera'], //从相册选择
					// 	success: function(res) {
					// 		console.log(JSON.stringify(res.tempFilePaths));
					// 	}
					// });
				} else {
					this.uploadVideo()
					// uni.chooseVideo({
					// 	sourceType: ['camera', 'album'],
					// 	success: function(res) {
					// 		self.src = res.tempFilePath;
					// 	}
					// });
				}

			},
			// 选择图片
			handleChooseImage() {
				let that = this;
				that.$util.uploadImageOne('upload/image', function(res) {
					// that.setFormData.imageList.push(res.data.path);
				});
			},
			// 上传视频
			uploadVideo() {
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: res => {
						console.log(res)

						if (Math.ceil(res.size / 1024) < this.upload_max * 1024) {
							uni.uploadFile({
								url: this.uploadUrl, //仅为示例，非真实的接口地址
								filePath: res.tempFilePath,
								name: 'file',
								//请求参数
								// formData: {
								//   user: 'test'
								// },
								header: {
									// #ifdef MP
									'Content-Type': 'multipart/form-data',
									// #endif
									[TOKENNAME]: 'Bearer ' + store.state.app.token
								},
								success: uploadFileRes => {
									// let data = JSON.parse(uploadFileRes.data);
									// this.addGoodsSecoundData.video_link = (data.data.src);
								},
								complete: a => {
									// console.log(a);
								}
							});
						} else {
							uni.showModal({
								title: '提示',
								content: `视频超出限制${this.upload_max}MB,已过滤`
							});
						}
					},
					fail: err => {
						// 取消上传也会出现弹框
						// uni.showModal({
						//   content: JSON.stringify(err)
						// });
						console.log(err)
					}
				});
			},

			test() {
				uni.chooseFile({
					count: 6, //默认100
					extension: ['.zip', '.doc'],
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
					}
				});

			},
			// 删除图片
			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() {
				let data = uni.$u.deepClone(this.formData)


				data.imageList = data.imageList.map(item => item.url)
				data.image = data.imageList[0]
				data.slider_image = data.imageList.splice(0, 1)
				data.store_name = data.cate_name
				productCreate(this.mer_id, data)
					.then(res => {
						console.log("提交成功")
						// 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.includes('--') ? JSON.parse(option.data).label
					.split('--')[1] : JSON.parse(option.data).label;
				this.formData.cate_id = JSON.parse(option.data).value
			}
		},
	};
</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>