qjm/pages/upload/child/arrts.vue

<template>
	<view class="content">
		<view class="showarrt-box" v-if="arrts.length != 0">
			<view class="showarrt-item flex" :key="index" v-for="(item,index) in arrts">
				<view class="show-name">
					{{item.value}}
				</view>
				<view class="show-info clamp" @click="open(item,index)">
					<text v-for='(ite,ind) in item.detail'>{{ite}} <text
							v-if="(ind+1) != item.detail.length">,</text></text>
				</view>
			</view>
		</view>
		<view class="btn-box flex">
			<view class="addarrt-btn " @click="open()">
				添加新规格
			</view>
			<view class="shengchen" @click="scarrt()" v-if="arrts.length != 0">
				立即生成
			</view>
		</view>
		<view class="batch" v-if="header.length != 0 && values.length !=0">
			<view class="batch-title">
				批量设置
			</view>
			<view class="box-1">
				<view class="box-left">
					商品规格图片
					<text class="imp">*</text>
					：
				</view>
				<view class="box-image" @click="navCroper(400,400,'guige')">
					<image v-if="guige" :src="guige" mode=""></image>
					<image v-else src="../../../static/img/addP.png" mode=""></image>
				</view>
			</view>
			<view class="box-1">
				<view class="box-left">
					商品售价
					<text class="imp">*</text>
					：
				</view>
				<input type="number" placeholder="请填写商品售价" value="" class="list-input" v-model="price" />
			</view>
			<view class="box-1">
				<view class="box-left">
					商品成本价
					<text class="imp">*</text>
					：
				</view>
				<input type="number" placeholder="请填写商品成本价" value="" class="list-input" v-model="o_price" />
			</view>
			<view class="box-1">
				<view class="box-left">
					商品原价
					<text class="imp">*</text>
					：
				</view>
				<input type="number" placeholder="请填写商品原价" value="" class="list-input" v-model="y_price" />
			</view>
			<view class="box-1">
				<view class="box-left">
					佣金计算值
					<text class="imp">*</text>
					：
				</view>
				<input type="number" placeholder="请填写佣金计算值" value="" class="list-input" v-model="breakprice" />
			</view>
			<view class="box-1">
				<view class="box-left">
					库存
					<text class="imp">*</text>
					：
				</view>
				<input type="number" placeholder="请填写库存" value="" class="list-input" v-model="stock" />
			</view>
			<view class="batch-btn" @click="setup()">
				批量设置
			</view>
		</view>
		<view class="batch" v-for="(item,index) in values">
			<view v-for="(itm,ind) in header">
				<view class="box-1" v-if="itm.title != '操作' && itm.title != '图片'">
					<view class="box-left">
						{{itm.title}}
					</view>
					<input type="text" v-if="itm.slot && itm.title == '产品编号'" :placeholder="'请填写'+itm.title" value=""
						class="list-input" v-model="item[itm.slot]" />
					<input type="number" v-if="itm.slot && itm.title != '产品编号'" :placeholder="'请填写'+itm.title" value=""
						class="list-input" v-model="item[itm.slot]" />
					<input type="text" v-if="itm.key" :placeholder="'请填写'+itm.title" value="" class="list-input"
						disabled="" v-model="item[itm.key]" />
				</view>
				<view class="box-1" v-if="itm.title == '图片'">
					<view class=" box-left">
						{{itm.title}}
						<text class="imp">*</text>
						：
					</view>
					<view class="box-image" @click="navCroper(400,400,index)">
						<image v-if="item[itm.slot]" :src="item[itm.slot]" mode=""></image>
						<image v-else src="../../../static/img/addP.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="batch-btn" @click="del(index)">
				删除
			</view>
		</view>

		<uni-popup ref="arrt" type="bottom">
			<view class="choose-main">
				<view class="choose-top flex">
					<view class="choose-font" @click="close()">
						取消
					</view>
					<view class="choose-del" v-if="tebindex|| tebindex===0" @click="dearrt()">
						删除
					</view>
					<view class="choose-qd" @click="qd()">
						确定
					</view>
				</view>
				<scroll-view scroll-y="true" style="height: 600rpx;">
					<view class="addarrt-box">
						<view class="box-1">
							<view class="box-left">
								规格
								<text class="imp">*</text>
								：
							</view>
							<view class="list-input">
								<input v-if="isqd == 1" type="text" placeholder="请修改规格" value="" class="input"
									v-model="arrtname" @blur="jcarrtvalue" />
								<input v-if="isqd ==0" type="text" placeholder="请填写规格" value="" class="list-input"
									v-model="showarrtname" />
								<view class="delarrts" v-if="isqd ==0" @click="addarrtname()">
									添加
								</view>
							</view>

						</view>

						<view class="box-1" v-for="(item,index) in addarrts">
							<view class="box-left">
								修改规格值
								<text class="imp">*</text>
								：
							</view>
							<view class="list-input">
								<input type="text" placeholder="请修改规格值" :value="item" class="input"
									v-model="addarrts[index]" @blur="jcarrtvalue" />
								<view class="delarrts" @click="delarrtvalue(index)">
									删除
								</view>
							</view>
						</view>
						<view class="box-1" v-if="isqd == 1">
							<view class="box-left">
								规格值
								<text class="imp">*</text>
								：
							</view>
							<view class="list-input">
								<input type="text" class="" placeholder="请填写规格值" value="" v-model="addarrt" />
								<view class="delarrts" @click="addarrtvalue">
									添加
								</view>
							</view>

						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		is_format_attr
	} from '@/api/upload.js'
	export default {
		props: {
			//分类选项
			baseURL: {
				type: String,
				default: ''
			},
			value: {
				type: Array,
				default: []
			},
			item: {
				type: Array,
			}
		},
		data() {
			return {
				values: this.value,
				items: this.item ? this.item : [],
				header: [], //规格头
				tebindex: '', //第几个规格
				arrts: [], //规格值
				showarrts: {
					value: '',
					detail: []
				}, //显示一条规格的东西
				isqd: 0, //是否添加完成规格0没有1开始修改
				showarrtname: '', //添加的规格
				arrtname: '', //添加的规格
				addarrts: [], //添加的规格值列表
				addarrt: '', //添加的规格值
				guige: '', //单规格图片
				price: '', //单规格售价
				o_price: '', //单规格成本价
				y_price: '', //单规格原价
				breakprice: '', //单规格佣金计算值
				stock: '', //单规格库存
			};
		},
		mounted() {
			console.log(this.values);
			if (this.items.length != 0) {
				this.arrts = this.items
				this.scarrt()
			}
		},
		methods: {
			open(opt, ind) {
				console.log(opt, ind, );
				if (opt) {
					this.arrtname = opt.value
					this.addarrts = opt.detail
				}
				if (ind != undefined) {
					this.tebindex = ind;
					console.log(this.tebindex);
				}
				this.$refs.arrt.open()
			},
			close() {
				this.isqd = 0
				this.showarrtname = ''
				this.tebindex = ''
				this.arrtname = '';
				this.addarrts = [];
				this.addarrt = '';
				this.$refs.arrt.close()
			},
			setup() {
				const obj = this
				this.value.forEach(e => {
					if (obj.guige) {
						e.pic = obj.guige
					}
					if (obj.price) {
						e.price = obj.price * 1
					}
					if (obj.o_price) {
						e.cost = obj.o_price * 1
					}
					if (obj.y_price) {
						e.ot_price = obj.y_price * 1
					}
					if (obj.breakprice) {
						e.brokerage_origin = obj.breakprice
					}
					if (obj.stock) {
						e.stock = obj.stock
					}
				})
			},
			addarrtname() {
				if (this.showarrtname == '') {
					return this.$api.msg("请填写规则")
				}
				this.isqd = 1
				this.arrtname = this.showarrtname
				this.showarrtname = ''
			},
			succ() {
				console.log(this.value, '111');
				this.$emit('getarrts', this.value, this.item);
			},
			addarrtvalue(e) {
				if (this.addarrt) {
					this.addarrts.push(this.addarrt)
					this.addarrt = ''
				}
			},
			delarrtvalue(ind) {
				console.log(ind, '123456');
				if (this.arrts.length == 1) {
					return this.$api.msg('请设置至少一个规则值')
				}
				this.addarrts.splice(ind, 1)
			},
			dearrt() {
				this.arrts.splice(this.tebindex, 1)
				this.close()
			},
			del(index) {
				if (this.value.length == 1) {
					return this.$api.msg('请设置至少一个规则')
				}
				this.value.splice(index, 1)
			},
			jcarrtvalue(e, type) {
				if (!e.detail.value) {
					return this.$api.msg('规格值不能为空')
				}
			},
			qd() {
				if (this.addarrts.length == 0) {
					this.close();
					return this.$api.msg('规格值不能为空')
				}
				if (typeof(this.tebindex) != 'string') {
					console.log(this.tebindex);
					this.arrts[this.tebindex].value = this.arrtname;
					this.arrts[this.tebindex].detail = this.addarrts;
				} else {
					let data = {
						value: '',
						detail: [],
						attrHidden: '',
						detailValue: ''
					};
					data.value = this.arrtname;
					data.detail = this.addarrts;
					this.arrts.push(data);
				}
				this.close()
			},
			upLoad(path) {
				// #ifdef H5
				console.log(path, 'h5');
				// #endif
				uni.showLoading({
					title: '图片上传中',
					mask: true
				});
				return new Promise((resolve, error) => {
					uni.uploadFile({
						url: this.baseURL + '/api/upload/image', //仅为示例，非真实的接口地址
						filePath: path,
						name: 'file',
						header: {
							"Authori-zation": 'Bearer ' + uni.getStorageSync('token')
						},
						success: (uploadFileRes) => {
							if ("string" === typeof uploadFileRes.data) {
								resolve(JSON.parse(uploadFileRes.data).data)
							} else {
								resolve(uploadFileRes.data.data)
							}
						},
						complete() {
							uni.hideLoading()
						}
					});
				})
			},
			navCroper(w, h, type) {
				let that = this;
				this.onImg().then((url) => {
					uni.navigateTo({
						url: `/pages/set/cropper?width=${w}&height=${h}`,
						events: {
							uploadSuccess(res) {
								that.upLoad(res).then((urldata) => {
									if (type == 'guige') {
										that.guige = urldata.url
									} else {
										that.value[type].pic = urldata.url
									}
								})
							}
						},
						success: function(res) {
							// 通过eventChannel向被打开页面传送数据
							res.eventChannel.emit('urlNext', {
								url
							})
						}
					})
				})
			},
			onImg(type) {
				const _this = this
				return new Promise((ok, erro) => {
					// 判断是否需要选择
					uni.showActionSheet({
						itemList: ['拍照', '选择一张照片'],
						success: function(res) {
							_this.chooseImage(res.tapIndex).then((url) => {
								ok(url)
							}).catch((res) => {
								erro(res)
							})
						},
						fail: function(res) {
							erro(res)
							console.log(res.errMsg);
						}
					});
				})

			},
			chooseImage: function(index) {
				const _this = this
				return new Promise((ok, error) => {
					// 从相册/相机选择
					// 如需直接开相机或直接选相册，请只使用一个选项
					const sourceType = index === 0 ? ['camera'] : ['album']
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: sourceType,
						success: function(res) {
							ok(res.tempFilePaths[0])
						},
						fail(e) {
							uni.showModal({
								title: '文件打开错误',
								content: '请设置授权文件存储权限',
								showCancel: false,
							});
							error(e)
						}
					});
				})

			},
			// 生成规格
			scarrt() {
				uni.showLoading({
					title: '生成中'
				})
				is_format_attr({
					attrs: this.arrts
				}).then(({
					data
				}) => {
					uni.hideLoading()
					this.items = data.attr
					this.header = data.header
					if (!this.values) {
						this.values = data.value
					}
				}).catch(err => {
					uni.hideLoading()
				})
			}
		}
	};
</script>

<style lang="scss">
	page,
	.content {
		min-height: 100%;
		height: auto;
	}

	.addarrt-box {
		padding: 20rpx;

		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 200rpx;
			height: 54rpx;
			background: #000000;
			border-radius: 38rpx;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			margin: 40rpx auto 20rpx;
		}
	}

	.box-1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding-top: 20rpx;

		.box-left {
			padding-left: 2rpx;
			width: 30%;
			text-align: left;
			color: #000000;

			.imp {
				color: #e63931;
			}
		}

		input {
			height: 66rpx;
			line-height: 66rpx;
			// height: 88rpx;
		}

		.list-input {
			color: #9598a3;
			height: 66rpx;
			padding-left: 24rpx;
			font-size: 28rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			width: 75%;
			flex: 1;
			text-align: right;
			padding-right: 24rpx;

			.input {
				color: #9598a3;
				width: 100%;

				.input-placeholder {
					height: 70rpx;
					color: #959595;
				}
			}

			.delarrts {
				margin-left: 20rpx;
				flex-shrink: 0;
				line-height: 1;
				padding: 10rpx 20rpx;
				background: #ffffff;
				border-radius: 10rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #fd3b39;
				border: 1px solid #fd3b39;
			}


		}

		.box-image {
			height: 66rpx;
			width: 66rpx;

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

	.showarrt-box {
		background: #ffffff;

		.showarrt-item {
			margin-top: 20rpx;
			height: 66rpx;

			.show-name {
				padding-left: 2rpx;
				width: 50%;
				text-align: left;
				color: #000000;
			}

			.show-info {
				width: 50%;
				font-size: 28rpx;
				color: #959595;
				text-align: right;
				padding-right: 24rpx;
			}
		}
	}

	.btn-box {
		background: #ffffff;
		padding: 20rpx 0;

		.addarrt-btn {
			color: #256fe7;
		}

		.shengchen {
			padding-left: 24rpx;
			background: #ffffff;
			padding: 20rpx 0;
			color: #e63931;
		}
	}

	.choose-main {
		background: #ffffff;
	}

	.choose-top {
		padding: 20rpx 40rpx 20rpx;
		font-size: 32rpx;

		.choose-font {
			color: #d4c7c2;
		}

		.choose-del {
			color: #256fe7;
		}

		.choose-qd {
			color: #e63931;
		}
	}

	.batch {
		border: 1px solid #000000;
		border-radius: 10rpx;
		margin-top: 20rpx;
		padding: 20rpx;
		background: #ffffff;

		.batch-title {
			font-size: 30rpx;
			text-align: center;
		}

		.batch-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 400rpx;
			height: 76rpx;
			background: #000000;
			border-radius: 38rpx;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			margin: 40rpx auto 20rpx;
		}
	}
</style>