moxuan_takeaway_shanghu/my/publish/goods.vue

<template>
	<view class="padding">
		<view class="text-white padding bg radius">
			<div style="color: red">新增商品默认库存为1000件，需要修改可点击操作批量修改库存</div>
			<u-form :model="shop" label-position="top">
				<u-form-item label="商品标题">
					<u-input v-model="shop.goodsName" placeholder="请填写商品标题" />
					<view class="btn_search" @click="handleSearch">查询</view>
				</u-form-item>
				<u-form-item label="商品分类">
					<u-input v-model="shop.classifyName" placeholder="请选择" :disabled="true" @click="getflshow()" />
				</u-form-item>
				<u-form-item label="商品标签">
					<!-- <u-input v-model="" placeholder="请填写" /> -->
					<view class="flex align-center flex-wrap margin-bottom-sm">
						<view v-for="(item, index) in goodsLabel" :key="index" class="btn flex align-center margin-top">
							<view>{{ item }}</view>
							<view class="margin-left-sm" @tap.stop="bindupdata(index)">x</view>
						</view>
						<view class="btns margin-top" @click="addtype1()">+添加</view>
					</view>
				</u-form-item>

				<u-form-item label="商品原价(选填)">
					<u-input v-model="shop.originalMoney" @input="ZheKouInput" placeholder="请填写" />
				</u-form-item>

				<u-form-item label="打包费(选填)">
					<u-input v-model="shop.packMoney" placeholder="请填写" />
				</u-form-item>

				<u-form-item label="商品售价">
					<u-input v-model="shop.goodsMoney" @input="ZheKouInput" placeholder="请填写" />
				</u-form-item>
				<view class="padding bg radius margin-tb" style="padding: 10px 0">
					<view>
						<view class="text-lg" style="color: #333">商品描述(选填)</view>
						<view class="margin-tb-sm">
							<u-input
								v-model="shop.goodsDescribe"
								type="textarea"
								height="200"
								placeholde="请描述一下您的特长"
								maxlengt="200"
								:clearable="false"
								style="background: #f5f5f5"
							/>
						</view>
					</view>
					<view>
						<view class="text-lg margin-top-sm text-black">商品封面图</view>
						<view class="flex" style="overflow: hidden; flex-wrap: wrap">
							<view v-if="shop.goodsCover.length">
								<view class="margin-top flex margin-right-sm flex-wrap">
									<view class="flex" style="width: 200rpx; height: 200rpx; margin-right: 2rpx; position: relative">
										<image :src="shop.goodsCover" style="width: 100%; height: 100%"></image>
										<view style="z-index: 9; position: absolute; top: -15rpx; right: -15rpx" @click="removeImgs()">
											<u-icon name="close-circle-fill" color="#FCD202" size="50rpx"></u-icon>
										</view>
									</view>
								</view>
							</view>
							<view class="margin-top" @click="addImage(1)" v-if="shop.goodsCover.length <= 0">
								<view style="width: 200rpx; height: 200rpx; background: #f4f5f6" class="flex justify-center align-center">
									<view>
										<view class="text-center">
											<image src="../static/addimg.png" style="width: 65rpx; height: 55rpx"></image>
										</view>
										<view class="text-center text-black">添加图片</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view>
						<view class="text-lg margin-top-sm text-black">商品轮播图（可多张）</view>
						<view class="flex" style="overflow: hidden; flex-wrap: wrap">
							<view v-if="goodsPicture.length">
								<view class="margin-top flex margin-right-sm flex-wrap">
									<view
										class="flex"
										style="width: 200rpx; height: 200rpx; margin-right: 2rpx; position: relative"
										v-for="(image, index) in goodsPicture"
										:key="index"
									>
										<image :src="image" style="width: 100%; height: 100%"></image>
										<view style="z-index: 9; position: absolute; top: -15rpx; right: -15rpx" @click="removeImg(index, 'lb')">
											<u-icon name="close-circle-fill" color="#FCD202" size="50rpx"></u-icon>
										</view>
									</view>
								</view>
							</view>
							<view class="margin-top" @click="addImages(1)" v-if="goodsPicture.length < maxCount">
								<view style="width: 200rpx; height: 200rpx; background: #f4f5f6" class="flex justify-center align-center">
									<view>
										<view class="text-center">
											<image src="../static/addimg.png" style="width: 65rpx; height: 55rpx"></image>
										</view>
										<view class="text-center text-black">添加图片</view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view>
						<view class="text-lg margin-top-sm text-black">商品详情图（可多张）(选填)</view>
						<view class="flex" style="overflow: hidden; flex-wrap: wrap">
							<view v-if="goodsParticularsPicture.length">
								<view class="margin-top flex margin-right-sm flex-wrap">
									<view
										class="flex"
										style="width: 200rpx; height: 200rpx; margin-right: 2rpx; position: relative"
										v-for="(image, index) in goodsParticularsPicture"
										:key="index"
									>
										<image :src="image" style="width: 100%; height: 100%"></image>
										<view style="z-index: 9; position: absolute; top: -15rpx; right: -15rpx" @click="removeImg(index, 'sq')">
											<u-icon name="close-circle-fill" color="#FCD202" size="50rpx"></u-icon>
										</view>
									</view>
								</view>
							</view>
							<view class="margin-top" @click="addImages(2)" v-if="goodsParticularsPicture.length < maxCount">
								<view style="width: 200rpx; height: 200rpx; background: #f4f5f6" class="flex justify-center align-center">
									<view>
										<view class="text-center">
											<image src="../static/addimg.png" style="width: 65rpx; height: 55rpx"></image>
										</view>
										<view class="text-center text-black">添加图片</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- <view>
						<view class="text-lg margin-top-sm text-black">商品详情图（可多张）</view>
						<editor id="editor"
							style="height:350rpx;color: #000000;font-size: 28rpx;width: 100%;border: 2rpx solid #F0F0F0;padding: 16rpx;"
							placeholder="请输入商品详情" @ready="onEditorReady" @input="getText"></editor>
					</view>
					<view>
						<view class="margin-top" @click="addImages(2)" v-if="goodsParticularsPicture.length<=1">
							<view style="width: 200rpx;height: 200rpx;background: #f4f5f6;"
								class="flex justify-center align-center">
								<view>
									<view class="text-center">
										<image src="../static/addimg.png" style="width: 65rpx;height: 55rpx;">
										</image>
									</view>
									<view class="text-center text-black">添加图片</view>
								</view>
							</view>
						</view>
					</view> -->
				</view>
				<u-form-item label="规格类型">
					<u-input v-model="attrsType" placeholder="请选择" :disabled="true" @click="ggShow()" />
				</u-form-item>
				<u-form-item label="商品规格" v-if="attrsid == 2">
					<view style="width: 100%">
						<view style="display: flex; width: 100%">
							<u-input style="width: 80%" v-model="attrs" placeholder="请选择" :disabled="true" @click="openguige()" />
							<view style="width: 20%; text-align: right; color: #ff4701" v-if="attrs" @click="goGuiGeItem()">修改价格</view>
						</view>
						<view style="color: #ff4701; font-size: 24upx">*修改商品、商品售价后，商品规格将重置，请谨慎操作！</view>
					</view>
				</u-form-item>
			</u-form>
		</view>

		<u-button @click="submit" class="margin-top" :custom-style="customStyle" shape="square" :hair-line="false">提交</u-button>
		<!-- 规格弹框 -->
		<u-popup v-model="Guigeshow" mode="bottom" border-radius="14" :closeable="closeable">
			<view>
				<scroll-view scroll-y="true" style="max-height: calc(100vh - 120rpx)">
					<view class="padding">
						<view>规格类型</view>
						<view class="flex align-center margin-top-sm flex-wrap">
							<view class="" v-for="(item, indexs) in list" :key="indexs">
								<view class="btn margin-top-sm flex align-center flex-wrap" :class="listIndex == indexs ? 'boxH' : ''" @click="bindguige(indexs, 1, item.ruleName)">
									{{ item.ruleName }}
								</view>
								<!-- <view class="btns margin-top-sm" @click="addtype(1)">+添加</view> -->
							</view>
						</view>
						<view v-for="(name, index) in attrList.ruleValue" :key="index">
							<view class="margin-top-sm">{{ name.value }}</view>
							<view class="flex align-center flex-wrap margin-top-sm">
								<!-- :class="typeIndex1 == index&&typeIndex == ind?'active':''" -->
								<view class="btn margin-top-sm" v-for="(ite, ind) in name.detail1" :key="ind" @click="bindguige(ind, 2, name.detail, index)" v-if="name.detail1">
									{{ ite }}
								</view>
								<!-- <view class="btns margin-top-sm">+添加</view> -->
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="addguige" @click="bindget()">确定</view>
			</view>
		</u-popup>

		<u-select v-model="flshow" :list="ClassifyList" valueName="classifyId" labelName="classifyName" @confirm="confirm"></u-select>
		<!-- 规格类型 -->
		<u-select v-model="ggshow" :list="attrList1" valueName="id" labelName="name" @confirm="ggconfirm"></u-select>
		<!-- 添加规格弹框 -->
		<u-popup v-model="show2" mode="center" border-radius="14" width="500rpx" height="300rpx" :closeable="closeable">
			<view>
				<view class="padding">
					<view>添加标签</view>
					<view>
						<u-input v-model="typeName" placeholder="请填写" />
					</view>
				</view>
				<view class="addguiges" @click="bindclose1()">确定</view>
			</view>
		</u-popup>

		<!-- 选择图片弹窗 -->
		<u-popup v-model="tupianShow" mode="center" border-radius="4">
			<view class="tupianPop">
				<view class="pop_header">
					选择图片
					<u-icon name="close" color="#000" size="28" @click="handleClose"></u-icon>
				</view>

				<!-- 封面图区域 -->
				<view class="box_header">
					封面图
					<text class="header_text">/ 共{{ totalCountFengmian }}条</text>
				</view>
				<view class="pop_box">
					<scroll-view class="box_body" enable-flex scroll-y @scrolltolower="scrolltolowerFengmian">
						<view class="img_box" v-for="item in fengmianList" :key="item.id" @click="clickItemFengmian(item)">
							<image class="images" :src="item.goodsCover" mode="aspectFill"></image>
							<view class="box_check" v-if="!item.isCheck"></view>
							<view v-else class="box_check_active">
								<u-icon name="checkmark" color="#fff" size="28"></u-icon>
							</view>
						</view>

						<view v-if="!fengmianList.length" class="">暂无数据</view>
					</scroll-view>
				</view>

				<!-- 轮播图区域 -->
				<view class="box_header">
					轮播图
					<text class="header_text">/ 共{{ totalCountLunbo }}条</text>
				</view>
				<view class="pop_box">
					<scroll-view class="box_body" enable-flex scroll-y @scrolltolower="scrolltolowerLunbo">
						<view class="img_box" v-for="item in lunboList" :key="item.id" @click="clickItemLunbo(item)">
							<image class="images" :src="item.goodsPicture" mode="aspectFill"></image>
							<view class="box_check" v-if="!item.isCheck"></view>
							<view v-else class="box_check_active">
								<u-icon name="checkmark" color="#fff" size="28"></u-icon>
							</view>
						</view>

						<view v-if="!lunboList.length" class="">暂无数据</view>
					</scroll-view>
				</view>

				<!-- 详情图区域 -->
				<view class="box_header">
					详情图
					<text class="header_text">/ 共{{ totalCountXiangqing }}条</text>
				</view>
				<view class="pop_box">
					<scroll-view class="box_body" enable-flex scroll-y @scrolltolower="scrolltolowerXiangqing">
						<view class="img_box" v-for="item in xiangqingList" :key="item.id" @click="clickItemXiangqing(item)">
							<image class="images" :src="item.goodsParticularsPicture" mode="aspectFill"></image>
							<view class="box_check" v-if="!item.isCheck"></view>
							<view v-else class="box_check_active">
								<u-icon name="checkmark" color="#fff" size="28"></u-icon>
							</view>
						</view>

						<view v-if="!xiangqingList.length" class="">暂无数据</view>
					</scroll-view>
				</view>

				<!-- 确认按钮区域 -->
				<view class="btn_pop" @click="handleConfrim">确认</view>
			</view>
		</u-popup>

		<!-- 用于图片压缩的canvas画布 -->
		<canvas
			:style="{
				width: cw + 'px',
				height: cw + 'px',
				position: 'absolute',
				zIndex: -1,
				left: '-10000rpx',
				top: '-10000rpx'
			}"
			canvas-id="zipCanvas"
		></canvas>
		<!--画布结束-->
	</view>
</template>

<script>
import configdata from '@/common/config.js'
import getLessLimitSizeImage from '@/utils/imageCompress.js'
export default {
	data() {
		return {
			shop: {
				goodsName: '',
				classifyId: '',
				classifyName: '',
				goodsLabel: [],
				attr: [],
				sku: [],
				originalMoney: '',
				packMoney: 0,
				goodsMoney: '',
				goodsDescribe: '',
				//详情图
				goodsCover: '',
				goodsPicture: [],
				goodsParticularsPicture: [],
				shopId: uni.getStorageSync('shopId')
			},
			shops: {
				goodsName: '',
				classifyId: '',
				classifyName: '',
				goodsLabel: [],
				attr: [],
				sku: [],
				originalMoney: '',
				packMoney: 0,
				goodsMoney: '',
				goodsDescribe: '',
				//详情图
				goodsCover: '',
				goodsPicture: [],
				goodsParticularsPicture: [],
				shopId: uni.getStorageSync('shopId')
			},
			attrs: '',
			goodsLabel: [],
			goodsPicture: [],
			goodsParticularsPicture: [],
			customStyle: {
				backgroundColor: '#FFCC00',
				color: '#000000',
				border: 0
			},
			status: 1,
			customStyle1: {
				color: '#000000',
				position: 'fixed',
				bottom: '15rpx',
				left: '0rpx',
				right: '0rpx',
				margin: '0rpx 50rpx',
				backgroundColor: '#FFCC00'
			},

			Guigeshow: false,
			//详情图
			goodsCover: [],

			shopId: '',
			page: 1,
			limit: 100,
			list: [],
			listIndex: 0,
			typeIndex: 0,
			typeIndex1: 0,
			wdIndex: 0,
			show: false,
			typeName: '',
			shows: false,
			typeperature: '',
			flshow: false,
			ggshow: false,
			ClassifyList: [],
			attrList: {},
			attrLists: [],
			shopId: '',
			show2: false,
			update: 0,
			maxCount: 4,
			editorCtx: '',
			htmlMessage: '',
			closeable: true,
			attrsType: '多规格',
			attrsid: 2,
			attrList1: [
				{
					name: '单规格',
					id: 1
				},
				{
					name: '多规格',
					id: 2
				}
			],
			//画板边长默认是屏幕宽度，正方形画布
			cw: uni.getSystemInfoSync().windowWidth,
			tupianShow: false,
			fengmianList: [],
			currPageFengmian: 1,
			totalCountFengmian: 0,

			lunboList: [],
			currPageLunbo: 1,
			totalCountLunbo: 0,

			xiangqingList: [],
			currPageXiangqing: 1,
			totalCountXiangqing: 0
		}
	},
	onLoad(option) {
		console.log('option', option)
		if (option.goodsId) {
			this.update = 1
			uni.setNavigationBarTitle({
				title: '修改商品'
			})
			this.goodsDet(option.goodsId)
		} else {
			this.update = 0
		}
		// console.log(option, '店铺id')
		// this.shopId = option.shopId
		this.shopId = this.$queue.getData('shopId')

		this.getguige()
		// this.onEditorReady();
	},
	onShow() {
		let list = this.$queue.getData('guigeSelectItemList')
		if (list) {
			this.shop.sku = list
			this.$queue.remove('guigeSelectItemList')
		}
		this.getClassifyList()
	},
	methods: {
		handleConfrim() {
			let fmList = this.fengmianList.filter((ele) => ele.isCheck)
			let lbList = []
			this.lunboList.forEach((ele) => {
				if (ele.isCheck) {
					lbList.push(ele.goodsPicture)
				}
			})
			let xqList = []
			this.xiangqingList.forEach((ele) => {
				if (ele.isCheck) {
					xqList.push(ele.goodsParticularsPicture)
				}
			})
			console.log(fmList)
			console.log(lbList)
			console.log(xqList)
			this.tupianShow = false
			if (fmList.length) {
				this.shop.goodsCover = fmList[0].goodsCover
			}
			if (lbList.length) {
				this.goodsPicture = [...this.goodsPicture, ...lbList]
			}
			if (xqList.length) {
				this.goodsParticularsPicture = [...this.goodsParticularsPicture, ...xqList]
			}
		},
		clickItemFengmian(item) {
			if (item.isCheck) {
				item.isCheck = false
			} else {
				this.fengmianList.forEach((ele) => (ele.isCheck = false))
				item.isCheck = true
			}
		},
		clickItemLunbo(item) {
			let count = 0
			this.lunboList.forEach((ele) => {
				if (ele.isCheck) {
					count++
				}
			})

			if (item.isCheck) {
				item.isCheck = false
			} else {
				if (count >= this.maxCount - this.goodsPicture.length) {
					uni.showToast({
						title: '最多上传4张',
						icon: 'none'
					})
				} else {
					item.isCheck = true
				}
			}
		},
		clickItemXiangqing(item) {
			let count = 0
			this.xiangqingList.forEach((ele) => {
				if (ele.isCheck) {
					count++
				}
			})

			if (item.isCheck) {
				item.isCheck = false
			} else {
				if (count >= this.maxCount - this.goodsParticularsPicture.length) {
					uni.showToast({
						title: '最多上传4张',
						icon: 'none'
					})
				} else {
					item.isCheck = true
				}
			}
		},
		scrolltolowerFengmian() {
			if (this.totalCountFengmian > this.fengmianList.length) {
				this.currPageFengmian++
				this.getFengMian()
			} else {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none'
				})
			}
		},
		scrolltolowerLunbo() {
			if (this.totalCountLunbo > this.lunboList.length) {
				this.currPageLunbo++
				this.getLunBo()
			} else {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none'
				})
			}
		},
		scrolltolowerXiangqing() {
			if (this.totalCountXiangqing > this.xiangqingList.length) {
				this.currPageXiangqing++
				this.getXiangQing()
			} else {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none'
				})
			}
		},
		handleSearch() {
			if (!this.shop.goodsName) {
				uni.showToast({
					title: '请输入商户标题',
					icon: 'none'
				})
				return
			}
			this.fengmianList = []
			this.currPageFengmian = 1
			this.lunboList = []
			this.currPageLunbo = 1
			this.xiangqingList = []
			this.currPageXiangqing = 1
			this.tupianShow = true
			this.getFengMian()
			this.getLunBo()
			this.getXiangQing()
		},
		async getFengMian() {
			let data = {
				page: this.currPageFengmian,
				limit: 6,
				name: this.shop.goodsName
			}
			let res = await this.$Request.getA('/app/goods/goodsCoverList', data)
			// console.log(res)
			if (res.code == 0) {
				res.data.list.forEach((item) => {
					item.isCheck = false
				})
				this.fengmianList = [...this.fengmianList, ...res.data.list]
				this.totalCountFengmian = res.data.totalCount
			}
		},
		async getLunBo() {
			let data = {
				page: this.currPageLunbo,
				limit: 6,
				name: this.shop.goodsName
			}
			let res = await this.$Request.getA('/app/goods/goodsPictureList', data)
			// console.log(res)
			if (res.code == 0) {
				res.data.list.forEach((item) => {
					item.isCheck = false
				})
				this.lunboList = [...this.lunboList, ...res.data.list]
				this.totalCountLunbo = res.data.totalCount
			}
		},
		async getXiangQing() {
			let data = {
				page: this.currPageXiangqing,
				limit: 6,
				name: this.shop.goodsName
			}
			let res = await this.$Request.getA('/app/goods/goodsParticularsPictureList', data)
			// console.log(res)
			if (res.code == 0) {
				res.data.list.forEach((item) => {
					item.isCheck = false
				})
				this.xiangqingList = [...this.xiangqingList, ...res.data.list]
				this.totalCountXiangqing = res.data.totalCount
			}
		},
		handleClose() {
			this.tupianShow = false
		},
		ZheKouInput(e) {
			console.log(e)
			this.attrs = ''
			this.shop.attr = []
			if (this.attrsid == 1) {
				this.guigeclect()
			} else {
				this.getgoodslist()
			}
		},
		goGuiGeItem() {
			this.$queue.setData('guigeSelectItemList', this.shop.sku)
			uni.navigateTo({
				url: '/my/publish/guigeitem'
			})
		},
		//获取分类
		getflshow() {
			console.log(this.ClassifyList.length)

			if (this.ClassifyList.length == 0) {
				uni.navigateTo({
					url: '/my/store/fenlei'
				})
			} else {
				this.flshow = true
			}
		},
		// 规格类型
		ggShow() {
			this.ggshow = true
		},
		//获取商品规格列表
		getgoodslist() {
			let ruleValues = this.attrList.ruleValue

			for (var j = 0; j < ruleValues.length; j++) {
				let details = ruleValues[j].detail
				ruleValues[j].detail = ruleValues[j].detail.toString()
			}
			let data = {
				attrName: this.attrList.ruleName,
				attrValue: ruleValues,
				ruleId: this.attrList.id
			}

			this.$Request
				.postJsonBB(
					'/admin/goods/isFormatAttr',
					{
						coverImg: this.shop.goodsCover,
						originalPrice: this.shop.originalMoney,
						price: this.shop.goodsMoney
					},
					data
				)
				.then((res) => {
					if (res.code == 0) {
						// this.shop.sku.push(res.data.value)
						this.shop.sku = res.data.value
						console.log(res.data.value, '111', this.shop.sku)
					}
				})
		},
		//获取规格
		bindget() {
			this.getgoodslist()
			this.attrs = this.attrList.ruleName
			var obj = {}
			obj.attrName = this.attrList.ruleName
			obj.attrValue = this.attrList.ruleValue
			obj.ruleId = this.attrList.id
			this.shop.attr.push(obj)
			this.Guigeshow = false
		},
		//商品分类
		confirm(e) {
			// console.log(e)
			this.shop.classifyName = e[0].label
			this.shop.classifyId = e[0].value
		},
		//规格分类
		ggconfirm(e) {
			// console.log(e)
			this.attrsType = e[0].label
			this.attrsid = e[0].value
			if (e[0].value == 1) {
				this.shop.attr = []
				this.guigeclect()
			}
		},
		// 单规格
		guigeclect() {
			let data = {
				coverImg: this.shop.goodsCover,
				originalPrice: this.shop.originalMoney,
				price: this.shop.goodsMoney
			}
			this.$Request.getA('/admin/goods/onlyFormatAttr', data).then((res) => {
				if (res.code == 0) {
					// this.shop.sku.push(res.data.value)
					this.shop.sku = res.data.value
					console.log(res.data.value, '111', this.shop.sku)
				}
			})
		},
		addtype(index) {
			if (index == 1) {
				this.show = true
			} else if (index == 2) {
				this.shows = true
			}
		},
		bindclose() {
			if (index == 1) {
				this.show = false
			} else if (index == 2) {
				this.shows = false
			}
		},
		//弹框规格切换
		bindguige(index, e, name, index1) {
			// console.log(index, e, name)
			if (e == 1) {
				this.listIndex = index
				this.attrList = this.list[index]
			} else if (e == 2) {
				this.typeIndex = index
				this.typeIndex1 = index1
			} else if (e == 3) {
				this.wdIndex = index
			}
		},
		//规格弹框
		openguige() {
			if (!this.attrList.ruleValue) {
				uni.showToast({
					title: '暂无规格',
					icon: 'none',
					duration: 1000
				})
				return
			}
			// 打开规格选项弹框
			this.Guigeshow = true
		},
		//获取商品规格
		getguige() {
			let data = {
				// page: this.page,
				// limit: this.limit,
				shopId: this.shopId
			}
			this.$Request.getA('/selfGoodsRule/list', data).then((res) => {
				if (res.code == 0) {
					// this.shop.sku =  res.data
					if (res.data.length > 0) {
						this.list = res.data
						this.list.forEach((res) => {
							res.ruleValue.forEach((ret) => {
								ret.detail = ret.detail.split(',')
								ret.detail1 = ret.detail
							})
						})
						console.log('this.attrList', this.list)
						this.attrList = this.list[0]
						if (this.shop.attr && this.shop.attr.length > 0) {
							for (var i in res.data) {
								if (this.shop.attr[0].ruleId == res.data[i].id) {
									this.attrs = res.data[i].ruleName
								}
							}
						}
					}
				}
			})
		},
		// 商品类型
		getClassifyList() {
			let data = {
				shopId: this.shopId
			}
			this.$Request.getA('/admin/goods/selectAllClassify', data).then((res) => {
				if (res.code == 0) {
					this.ClassifyList = res.data
					this.counts = this.ClassifyList[0].classifyId
					if (this.shop.classifyId != '') {
						for (var i in res.data) {
							if (this.shop.classifyId == res.data[i].classifyId) {
								this.shop.classifyName = res.data[i].classifyName
							}
						}
					}
				}
			})
		},
		getStarttime(e) {
			console.log(e)
			console.log(this.shop)
			this.shop.openTime = e.hour + ':' + e.minute
		},
		getEndtime(e) {
			console.log(e)
			this.shop.closeTime = e.hour + ':' + e.minute
		},
		// 详情图删除
		removeImg(index, texts) {
			if (texts == 'lb') {
				this.goodsPicture.splice(index, 1)
			} else if (texts == 'sq') {
				this.goodsParticularsPicture.splice(index, 1)
			}
		},
		// 身份证 资格证删除
		removeImgs() {
			// if (index == 1) {
			this.shop.goodsCover = ''
			// }
		},
		bindOpen(e) {
			console.log(e)
			let that = this
			uni.chooseLocation({
				success: function (res) {
					console.log('位置名称：' + res.name)
					console.log('详细地址：' + res.address)
					console.log('纬度：' + res.latitude)
					console.log('经度：' + res.longitude)
					that.shop.detailedAddress = res.address
					that.shop.shopLat = res.latitude
					that.shop.shopLng = res.longitude
				}
			})
		},

		// 图片上传
		addImages(e) {
			let num = 0
			if (e == 1) {
				num = this.maxCount - this.goodsPicture.length
			}
			if (e == 2) {
				num = this.maxCount - this.goodsParticularsPicture.length
			}

			let that = this
			uni.chooseImage({
				count: num,
				sourceType: ['album', 'camera'],
				success: (res) => {
					for (let i = 0; i < res.tempFiles.length; i++) {
						//这里的id和页面中写的html代码的canvas的id要一致
						let canvasId = 'zipCanvas'
						//原图的路径
						let imagePath = res.tempFiles[i].path
						//大小限制
						let limitSize = 1024 * 2
						//初始绘画区域是画布自身的宽度也就是屏幕宽度
						let drawWidth = uni.getSystemInfoSync().windowWidth
						let that = this
						getLessLimitSizeImage(canvasId, imagePath, limitSize, drawWidth, that, (resPath) => {
							uni.showLoading({
								title: '上传中'
							})
							uni.uploadFile({
								url: that.config('APIHOST1') + '/alioss/upload',
								filePath: resPath,
								name: 'file',
								success: (uploadFileRes) => {
									if (e == 1) {
										if (that.goodsPicture.length < 6) {
											that.goodsPicture.push(JSON.parse(uploadFileRes.data).data)
										}
									} else if (e == 2) {
										if (that.goodsParticularsPicture.length < 6) {
											that.goodsParticularsPicture.push(JSON.parse(uploadFileRes.data).data)
										}
										console.log(that.goodsParticularsPicture)
									}
									uni.hideLoading()
								},
								fail: () => {
									uni.showToast({
										title: '上传失败',
										icon: 'error'
									})
								}
							})
						})
					}
				}
			})
		},
		// 图片上传
		addImage(e) {
			let that = this
			uni.chooseImage({
				count: 1,
				sourceType: ['album', 'camera'],
				success: (res) => {
					for (let i = 0; i < res.tempFiles.length; i++) {
						//这里的id和页面中写的html代码的canvas的id要一致
						let canvasId = 'zipCanvas'
						//原图的路径
						let imagePath = res.tempFiles[i].path
						//大小限制
						let limitSize = 1024 * 2
						//初始绘画区域是画布自身的宽度也就是屏幕宽度
						let drawWidth = uni.getSystemInfoSync().windowWidth
						let that = this
						getLessLimitSizeImage(canvasId, imagePath, limitSize, drawWidth, that, (resPath) => {
							uni.showLoading({
								title: '上传中'
							})
							uni.uploadFile({
								url: that.config('APIHOST1') + '/alioss/upload',
								filePath: resPath,
								name: 'file',
								success: (uploadFileRes) => {
									if (e == 1) {
										that.shop.goodsCover = JSON.parse(uploadFileRes.data).data
									}
									uni.hideLoading()
								},
								fail: () => {
									uni.showToast({
										title: '上传失败',
										icon: 'error'
									})
								}
							})
						})
					}
				}
			})
		},
		config: function (name) {
			var info = null
			if (name) {
				var name2 = name.split('.') //字符分割
				if (name2.length > 1) {
					info = configdata[name2[0]][name2[1]] || null
				} else {
					info = configdata[name] || null
				}
				if (info == null) {
					let web_config = cache.get('web_config')
					if (web_config) {
						if (name2.length > 1) {
							info = web_config[name2[0]][name2[1]] || null
						} else {
							info = web_config[name] || null
						}
					}
				}
			}
			return info
		},
		// 发布
		submit() {
			this.shop.goodsPicture = this.goodsPicture
			this.shop.goodsPicture = this.goodsPicture.toString()

			this.shop.goodsParticularsPicture = this.goodsParticularsPicture.toString()
			this.shop.goodsLabel = this.goodsLabel.toString()
			if (!this.shop.goodsName) {
				uni.showToast({
					title: '请填写商品标题',
					icon: 'none',
					duration: 1000
				})
				return
			}
			if (!this.shop.classifyName) {
				uni.showToast({
					title: '请选择商品分类',
					icon: 'none',
					duration: 1000
				})
				return
			}
			if (!this.shop.goodsLabel) {
				uni.showToast({
					title: '请填写商品标签',
					icon: 'none',
					duration: 1000
				})
				return
			}
			if (!this.shop.originalMoney) {
				this.shop.originalMoney = this.shop.goodsMoney
				// uni.showToast({
				// 	title: '请填写商品原价',
				// 	icon: 'none',
				// 	duration: 1000
				// })
				// return
			}
			// console.log(this.shop.packMoney,'------------')
			// if (this.shop.packMoney*1 != '') {
			// 	uni.showToast({
			// 		title: '请填写商品打包费',
			// 		icon: 'none',
			// 		duration: 1000
			// 	})
			// 	return
			// }
			if (!this.shop.goodsMoney) {
				uni.showToast({
					title: '请填写商品售价',
					icon: 'none',
					duration: 1000
				})
				return
			}
			if (!this.shop.goodsDescribe) {
				this.shop.goodsDescribe = '无'
				// uni.showToast({
				// 	title: '请填写商品描述',
				// 	icon: 'none',
				// 	duration: 1000
				// })
				// return
			}
			if (!this.shop.goodsCover) {
				uni.showToast({
					title: '请上传商品封面图',
					icon: 'none',
					duration: 1000
				})
				return
			}

			if (!this.shop.goodsPicture) {
				uni.showToast({
					title: '请上传商品轮播图',
					icon: 'none',
					duration: 1000
				})
				return
			}
			if (!this.shop.goodsParticularsPicture) {
				this.goodsParticularsPicture = [this.Tupian('/xiangqing/12ecc56005731327e02f42f0d851848.png')]
				// uni.showToast({
				// 	title: '请上传商品详情图',
				// 	icon: 'none',
				// 	duration: 1000
				// })
				// return
			}
			if (this.attrsid == 2) {
				if (this.shop.attr.length == 0) {
					uni.showToast({
						title: '请选择商品规格',
						icon: 'none',
						duration: 1000
					})
					return
				}
			}

			let shops = this.shop
			for (var i = 0; i < shops.attr.length; i++) {
				let attrValues = shops.attr[i].attrValue
				for (var j = 0; j < attrValues.length; j++) {
					let details = attrValues[j].detail
					let detailss = ''
					for (var z = 0; z < details.length; z++) {
						detailss = detailss + details[z]
					}
					shops.attr[i].attrValue[j].detail = detailss
				}
			}
			if (this.update == 0) {
				var url = '/admin/goods/insertGoods'
			}
			if (this.update == 1) {
				var url = '/admin/goods/update'
			}

			this.$Request.postJsonA(url, shops).then((res) => {
				if (res.code == 0) {
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})

					setTimeout(function () {
						uni.navigateBack()
					}, 1000)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			})
		},
		//删除规格
		bindupdata(index) {
			console.log('this.shop.goodsLabel', typeof this.goodsLabel)
			this.goodsLabel.splice(index, 1)
		},
		addtype1() {
			this.typeName = ''
			this.show2 = true
		},
		bindclose1() {
			if (!this.typeName) {
				uni.showToast({
					title: '请填写规格',
					icon: 'none',
					duration: 1000
				})
				return
			}
			this.goodsLabel.push(this.typeName)
			this.show2 = false
		},
		// 获取商铺详情
		goodsDet(goodsId) {
			let data = {
				goodsId: goodsId
			}
			this.$Request.getA('/admin/goods/selectGoodsById', data).then((res) => {
				if (res.code == 0) {
					this.dataCentre = res.data
					this.shop = res.data
					this.getClassifyList()
					if (this.shop.goodsLabel) {
						this.goodsLabel = this.shop.goodsLabel.split(',')
					}
					if (this.shop.goodsPicture) {
						this.goodsPicture = this.shop.goodsPicture.split(',')
					}
					if (this.shop.goodsParticularsPicture) {
						this.goodsParticularsPicture = this.shop.goodsParticularsPicture.split(',')
					}
					if (res.data.attr.length == 0) {
						this.attrsid = 1
						this.attrsType = '单规格'
					} else {
						this.attrsid = 2
						this.attrsType = '多规格'
					}
					this.getguige()
				}
			})
		}
	}
}
</script>

<style>
page {
	background-color: #f5f5f5;
}

.bg {
	background-color: #ffffff;
}

.btn {
	border: 1upx solid #cccccc;
	border-radius: 10px;
	padding: 0rpx 30rpx;
	margin-right: 25rpx;
	height: 30px;
	line-height: 30px;
}

.boxH {
	background: #fcd202;
	border: none;
}

.btns {
	border: 1upx dashed #333333;
	border-radius: 28px;
	padding: 0rpx 35rpx;
	margin-right: 25rpx;
	height: 30px;
	line-height: 30px;
}

.active {
	background: #fcd202;
	border: none;
}

.actives {
	background: #fcd202;
	border: none;
}

.addguige {
	width: 90%;
	margin: 0 auto 25rpx;
	background: #fcd202;
	box-shadow: 0px 10upx 20upx 0px #ffd9b3;
	border-radius: 16upx;
	text-align: center;
	height: 88upx;
	line-height: 88upx;
	/* position: fixed;
	bottom: 25upx;
	left: 0;
	right: 0; */
}

.addguiges {
	width: 90%;
	margin: 0 auto;
	background: #fcd202;
	box-shadow: 0px 10upx 20upx 0px #ffd9b3;
	border-radius: 16upx;
	text-align: center;
	height: 88upx;
	line-height: 88upx;
	/* position: fixed;
		bottom: 25upx;
		left: 0;
		right: 0; */
}

.u-input__textarea {
	background-color: #f5f5f5 !important;
	padding: 10rpx !important;
}

.btn_search {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 20rpx;
	width: 200rpx;
	height: 80rpx;
	color: #fff;
	border-radius: 10rpx;
	background-color: #3e8ef7;
}

.tupianPop {
	width: 672rpx;
	height: 95vh;
	overflow-y: auto;
}

.pop_header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20rpx;
	height: 70rpx;
	font-size: 32rpx;
	font-weight: bold;
	background-color: #f5f9ff;
}

.pop_box {
	padding: 0 20rpx;
	height: 20vh;
}

.box_header {
	padding: 0 20rpx;
	height: 70rpx;
	line-height: 70rpx;
	font-size: 28rpx;
	font-weight: bold;
}

.header_text {
	margin-left: 18rpx;
	color: #666666;
}

.box_body {
	display: flex;
	flex-wrap: wrap;
	height: 20vh;
}

.img_box {
	position: relative;
	margin-right: 55rpx;
	margin-top: 35rpx;
	width: 150rpx;
	height: 187rpx;
	border-radius: 8rpx;
}

.images {
	width: 100%;
	height: 100%;
	border-radius: 8rpx;
}

.box_check {
	position: absolute;
	top: -25rpx;
	right: -25rpx;
	width: 50rpx;
	height: 50rpx;
	border-radius: 50%;
	border: 2rpx solid #808080;
	background-color: #fff;
}

.box_check_active {
	position: absolute;
	top: -25rpx;
	right: -25rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50rpx;
	height: 50rpx;
	border-radius: 50%;
	background-color: #ff8d1a;
}

.btn_pop {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 20rpx auto;
	width: 626rpx;
	height: 90rpx;
	font-size: 32rpx;
	color: #fff;
	border-radius: 115rpx;
	background-color: #f18731;
}
</style>