qjm/pages/upload/uploadP.vue

<template>
	<view class="content">
		<swiper class="swiper-box" :skip-hidden-item-layout='true' :style="{ height: maxheight }" disable-touch
			:current="current">
			<swiper-item>
				<scroll-view scroll-y="true" style="height: 100%;">
					<view class="tip">
						最多可以添加5张商品图片
					</view>
					<view class="banner-box">
						<view class="banner" v-for="(item,index) in imageList" :key="index">
							<view class="banner-main">
								<image :src="item" mode=""></image>
							</view>
							<image class="cha" @click.stop="delImg(index)" src="../../static/img/cha.png" mode="">
							</image>
						</view>
						<view class="banner" v-if="imageList.length < 5" @click="navCroper(400,400,'banner')">
							<image src="../../static/img/addP.png" mode=""></image>
						</view>
					</view>
					<view class="main">
						<view class="box-1">
							<view class="box-left">
								商品名称
								<text class="imp">*</text>
								：
							</view>
							<input type="text" placeholder="请填写商品名称" value="" class="list-input" v-model="name" />
						</view>
						<view class="box-1">
							<view class="box-left">
								商品编码
								<text class="imp">*</text>
								：
							</view>
							<input type="text" placeholder="请填写商品编码" value="" class="list-input" v-model="bianma" />
						</view>
						<classify v-if="classify.length != 0" :list="classify" :choose="chooseClass"
							@chooseClasswc="chooseClasswc"></classify>
						<view class="box-1">
							<view class="box-left">运费模板</view>
							<picker @change="bindYf" :range="yfarray" range-key="name" class="list-input">
								<text>{{ yf.name }}</text>
							</picker>
						</view>
						<view class="box-1">
							<view class="box-left">商品规格</view>
							<u-radio-group @change="radioGroupChange" v-model="isdanname">
								<u-radio v-for="(item, index) in list" :key="index" :name="item">
									{{item}}
								</u-radio>
							</u-radio-group>
						</view>
						<arrts :value="values" :item="item" @getarrts="getarrts" ref='attr' :baseURL="baseURL"
							v-if="isdan === 1"></arrts>
						<view class="box-1" v-if="isdan === 0">
							<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" v-if="isdan === 0">
							<view class="box-left">
								商品售价
								<text class="imp">*</text>
								：
							</view>
							<input type="text" placeholder="请填写商品售价" value="" class="list-input" v-model="price" />
						</view>
						<view class="box-1" v-if="isdan === 0">
							<view class="box-left">
								商品成本价
								<text class="imp">*</text>
								：
							</view>
							<input type="text" placeholder="请填写商品成本价" value="" class="list-input" v-model="o_price" />
						</view>
						<view class="box-1" v-if="isdan === 0">
							<view class="box-left">
								商品原价
								<text class="imp">*</text>
								：
							</view>
							<input type="text" placeholder="请填写商品原价" value="" class="list-input" v-model="y_price" />
						</view>
						<view class="box-1" v-if="isdan === 0">
							<view class="box-left">
								佣金计算值
								<text class="imp">*</text>
								：
							</view>
							<input type="text" placeholder="请填写佣金计算值" value="" class="list-input"
								v-model="breakprice" />
						</view>
						<view class="box-1" v-if="isdan === 0">
							<view class="box-left">
								库存
								<text class="imp">*</text>
								：
							</view>
							<input type="text" placeholder="请填写库存" value="" class="list-input" v-model="stock" />
						</view>
						<view class="box-1" v-if="isdan === 0">
							<view class="box-left">
								编码
								<text class="imp">*</text>
								：
							</view>
							<input type="text" placeholder="请填写编码" value="" class="list-input" v-model="bian" />
						</view>
					</view>
					<view class="btn" @click="next()">
						下一页
					</view>
				</scroll-view>
			</swiper-item>

			<swiper-item v-if="showNext">
				<scroll-view scroll-y="true" style="height: 100%; padding-bottom: 20rpx;">
					<view class="bjq">
						<jinEdit v-if="isshow ==1" ref="set" placeholder="请输入文章内容" @editOk="editOk"
							uploadFileUrl="/api/upload/image" :header="{'Authori-zation': AuthoriZation}"
							:showImgSize="true" :html="content" height="50vh"></jinEdit>
					</view>
					<view class="btn1" @click="before()">
						上一页
					</view>
					<view class="btn" @click="save()">
						提交审核
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import jinEdit from '@/components/jin-edit/jin-edit.vue';
	import arrts from './child/arrts.vue'
	import classify from './child/classify.vue';
	import {
		mapState
	} from "vuex";
	import {
		temp_list,
		get_product_info,
		save,
		set_apply
	} from '@/api/upload.js'
	export default {
		components: {
			classify,
			jinEdit,
			arrts
		},
		onReady() {
			// 初始化获取页面宽度
			var obj = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.swiper-box').boundingClientRect();
					query.exec(function(res) {
						obj.maxheight = resu.windowHeight - res[0].top + 'px';
						console.log(obj.maxheight, 132456);
					});
				},
				fail: res => {}
			});
		},
		data() {
			return {
				showNext: false, //默认不显示第二页
				maxheight: '',
				origin_id: 0,
				isshow: 0,
				product: {},
				item: [],
				id: 0,
				values: [],
				current: 0, //当前页数
				yfarray: [], //运费列表
				yf: {
					name: '请选择运费模板'
				}, //运费
				imageList: [], //轮播图列表
				name: '', //商品名称
				bianma: '', //商品编码
				list: ['单规格', '多规格'],
				isdan: '',
				isdanname: '',
				chooseClass: [],
				classify: [], //商品分类
				guige: '', //单规格图片
				price: '', //单规格售价
				o_price: '', //单规格成本价
				y_price: '', //单规格原价
				breakprice: '', //单规格佣金计算值
				stock: '', //单规格库存
				bian: '', //单规格编码
				content: '', //商品详情
				AuthoriZation: '', //请求头
			};
		},
		computed: {
			...mapState(['baseURL']),
		},
		onLoad(opt) {
			if (opt.id) {
				this.id = opt.id
			}
			this.AuthoriZation = 'Bearer ' + uni.getStorageSync('token')
			// this.gettemp_list();
			this.getclass()
		},
		onShow() {},
		onReachBottom() {},
		methods: {
			editOk(res) {
				//  保存富文本转出的html
				this.content = res.html
				console.log(this.content);
			},
			getarrts(res, val) {
				this.values = res
				this.item = val
			},
			gettemp_list() {
				temp_list().then(({
					data
				}) => {
					console.log(data);
					this.yfarray = data.data
				})
			},
			getclass() {
				const obj = this
				get_product_info({}, obj.id).then(({
					data
				}) => {
					obj.yfarray = data.tempList
					obj.classify = data.cateList
					console.log(obj.classify, '123456');
					obj.product = data.productInfo
					let info = data.productInfo
					if (obj.id != 0) {
						obj.name = info.store_name;
						obj.bianma = info.set_code;
						obj.isdan = info.spec_type;
						obj.isdanname = info.spec_type == 0 ? '单规格' : '多规格'
						info.cate_id.forEach(e => {
							for (let i = 0; i < data.cateList.length; i++) {
								if (data.cateList[i].value == e) {
									this.chooseClass.push(data.cateList[i])
								}
							}

						})
						data.tempList.forEach(e => {
							if (e.id == info.temp_id) {
								this.yf = e
							}
						})
						if (info.spec_type == 0) {
							obj.guige = info.attr.pic;
							obj.price = info.attr.price;
							obj.o_price = info.attr.cost;
							obj.y_price = info.attr.ot_price;
							obj.breakprice = info.attr.brokerage_origin;
							obj.stock = info.attr.stock;
							obj.bian = info.attr.bar_code;
						}
						if (info.spec_type == 1) {
							obj.values = info.attrs;
							obj.item = [...info.items];
							console.log(obj.values, '12345');
						}
						obj.content = info.description;
						obj.imageList = info.slider_image;
						obj.origin_id = info.origin_id;
					}
					obj.isshow = 1;
				})
			},
			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) => {
							console.log(uploadFileRes, '1245');
							if ("string" === typeof uploadFileRes.data) {
								resolve(JSON.parse(uploadFileRes.data).data)
							} else {
								resolve(uploadFileRes.data.data)
							}
						},
						complete() {
							uni.hideLoading()
						}
					});
				})
			},
			bindYf: function(e) {
				this.yf = this.yfarray[e.target.value];
			},
			save() {
				const obj = this
				this.$refs.set.release(true)
				let attr = {}
				let attrs = []
				if (this.isdan == 0) {
					attr = {
						bar_code: obj.bian,
						brokerage: 0,
						brokerage_origin: obj.breakprice,
						brokerage_two: 0,
						cost: obj.o_price,
						integral: 0,
						ot_price: obj.y_price,
						pic: obj.guige,
						price: obj.price,
						stock: obj.stock,
						volume: 0,
						weight: 0
					}
					attrs.push(attr)
				}
				if (this.isdan == 1) {
					attr = obj.values[0]
					attrs = obj.values
				}
				let cate_id = []
				obj.chooseClass.forEach(e => {
					console.log(e, 'eee');
					cate_id.push(e.value + '')
				})
				console.log(cate_id, '654321');
				setTimeout(() => {
					save({
						activity: ['秒杀', '砍价', '拼团', ],
						attr: attr,
						attrs: attrs,
						cate_id: cate_id,
						commission: 0,
						description: obj.content,
						ficti: 0,
						give_integral: 0,
						image: obj.imageList[0],
						is_benefit: 0,
						is_best: 0,
						is_good: 0,
						is_hot: 0,
						is_new: 0,
						is_show: 1,
						is_sub: 0,
						items: obj.item,
						keyword: '',
						postage: '',
						price: '',
						set_code: obj.bianma,
						slider_image: obj.imageList,
						sort: 0,
						spec_type: obj.isdan,
						store_info: '',
						store_name: obj.name,
						store_type: 1,
						temp_id: obj.yf.id,
						unit_name: '',
						video_link: '',
						origin_id: obj.origin_id ? obj.origin_id : obj.id
					}, 0).then(({
						data
					}) => {
						console.log(data, 'success');
						set_apply({}, data.id).then(e => {
							obj.$api.msg('提交审核成功')
							uni.navigateTo({
								url: '/pages/upload/commodity'
							})
						})
					}).catch(err => {
						console.log(err, '123456');
					})
				}, 20)
			},
			navCroper(w, h, type) {
				let that = this;
				this.onImg().then((url) => {
					uni.navigateTo({
						url: `/pages/set/cropper?width=${w}&height=${h}`,
						events: {
							uploadSuccess(res) {
								uni.showLoading({
									title: '图片上传中',
									mask: true
								});
								that.upLoad(res).then((urldata) => {
									if (type == 'banner') {
										that.imageList.push(urldata.url)
									}
									if (type == 'guige') {
										that.guige = urldata.url
									}
									uni.hideLoading()
								}).catch(err => {
									uni.hideLoading()
								})
							}
						},
						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)
						}
					});
				})

			},
			radioGroupChange(e) {
				if (e == '单规格') {
					this.isdan = 0
				} else {
					this.isdan = 1
				}
				console.log(this.isdan);


			},
			chooseClasswc(e) {
				this.chooseClass = e;
			},
			//删除图片
			delImg(i) {
				uni.showModal({
					content: '确定删除这张吗',
					success: res => {
						if (res.confirm) {
							this.imageList.splice(i, 1);
						} else if (res.cancel) {}
					}
				});
			},
			next() {
				this.current += 1
				if (this.isdan == 1) {
					this.$refs.attr.succ()
				}
				this.showNext = true;
			},
			before() {
				this.current -= 1
			}
		}
	};
</script>

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

	.tip {
		font-size: 24rpx;
		color: #fd3939;
		padding: 10rpx 20rpx;
	}

	.banner-box {
		background: #ffffff;
		padding: 20rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;

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

		.banner {
			position: relative;
			width: 160rpx;
			height: 160rpx;
			margin-right: 10rpx;

			.banner-main {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				width: 160rpx;
				height: 160rpx;
				border-radius: 20rpx;

				image {
					border-radius: 20rpx;
				}
			}

			.cha {
				position: absolute;
				top: 0;
				right: 0;
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.main {
		background: #ffffff;
		margin-top: 20rpx;
		padding: 0 20rpx 20rpx;
	}

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

		.box-left {
			padding-left: 2rpx;
			width: 50%;
			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: 50%;
			flex: 1;
			text-align: right;
			padding-right: 24rpx;

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

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

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

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

	.btn1 {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 560rpx;
		height: 76rpx;
		background: #ffffff;
		border: 1px solid #000000;
		border-radius: 38rpx;
		font-size: 34rpx;
		font-weight: 500;
		color: #000000;
		margin: 40rpx auto 20rpx;
	}

	.bjq {
		background: #ffffff;
		padding: 20rpx;
	}
</style>