<template>
	<view class="page1">
		<view class="title-box">
			<uni-search-bar class="uni-mt-10" radius="5" placeholder="请输入商品名称" cancelButton="none" @blur="search"
				@clear="clearSearch" />
		</view>
		<view class="content-left" style="height: 85%;float: left;position: fixed;top: 100rpx;">
			<view class="left-box" v-if="gateType == ''" v-for="(item, index) in indexList" :key="index"
				:class="item.parentId ? 'left-box-hover':''" @tap="clickLeftBtn(index)">
				<text style="width: 100%;height: 90rpx;line-height: 90rpx;display: inline-block;overflow: hidden;"
					:class="item.parentId ? 'red' :''">{{item.categoryName}}</text>
			</view>
		</view>
		<view class="content-right"
			style="padding-top:14%;width: 570rpx;background: #fff;margin: 0 0 0 170rpx;padding-bottom: 110rpx;">
			<view class="right-box" v-for="(item,index) in shopList" :key="index" v-if="item.delFlag">
				<!-- 当商品的delFlag=0和未入库状态时，显示此遮罩，点击弹出弹窗提示不能操作 -->
				<!-- <view class="shop-mask" v-if="item.delFlag == 0 || item.purchasePrice==null || item.inStorageStatus == 0" @tap.stop="clickMask"></view> -->
				<view class="box-left" @tap.stop="largeImg(item)">
					<img class="img-radius" :src="item.productPicture" alt="" v-if="item.productPicture">
					<view class="noPic" v-else>暂无图片</view>
					<view v-if="shopId == '1960543009070256129'" style="margin-bottom: 15px;background: red;color: #fff;width: 23%;height: 30rpx;font-size: 20rpx;position: absolute;bottom: 0;    text-align: center;border-radius: 5px;">
						主播佣金{{item.commission == null ? 0:item.commission+'%'}}
					</view>
				</view>
				<view class="box-right">
					<view class="box-right-name">
						{{item.productName == null ?'':item.productName}}
						<text style="color: red;" v-if="item.delFlag == 0">(已下架)</text>
					</view>
					<view class="box-right-num">{{item.productSn==null?'':item.productSn}}</view>
					<view class="box-right-num">供应商:{{item.supplierName == null ?'':item.supplierName}}</view>
					<view class="box-right-price"  v-if ='shopId != "1960543009070256129"'>
						<view class="price-box" v-if="type==0">
							<text>{{item.purchasePrice?item.purchasePrice:'暂无'}}</text>
							<text>采购价</text>
						</view>
						<view class="price-box">
							<text>{{item.wholesalePrice}}</text>
							<text>批发价</text>
						</view>
						<view class="price-box">
							<text>{{item.price}}</text>
							<text>零售价</text>
						</view>
						<view class="price-box" @tap.stop="seeStockCount(item.stockCount,item.minusStockCount)">
							<text>{{item.stockCount + item.minusStockCount}}</text>
							<view>
								库存
								<uni-icons type="help" size="15"></uni-icons>
							</view>
						</view>
					</view>
					<view class="box-right-price"  v-else>
						<view class="price-box" v-if='shopOwnerPhone == username || username == item.createBy'>
							<text>{{item.purchasePrice?item.purchasePrice+'%':'暂无'}}</text>
							<text>团长佣金</text>
						</view>
						<view class="price-box">
							<text>{{item.wholesalePrice}}</text>
							<text>直播价</text>
						</view>
						<view class="price-box">
							<text>{{item.price}}</text>
							<text>日常价</text>
						</view>
						<view class="price-box" @tap.stop="seeStockCount(item.stockCount,item.minusStockCount)">
							<text>{{item.stockCount + item.minusStockCount}}</text>
							<view>
								库存
								<uni-icons type="help" size="15"></uni-icons>
							</view>
						</view>
					</view>
				</view>
				<checkbox-group @tap="checkboxChange(item)">
					<label>
						<checkbox :checked="item.checked" class="checkbox" />
					</label>
				</checkbox-group>
			</view>
			<view class="right-box" v-for="(item,index) in shopList1" :key="index" v-if="item.delFlag">
				<!-- 当商品的delFlag=0和未入库状态时，显示此遮罩，点击弹出弹窗提示不能操作 -->
				<!-- <view class="shop-mask" v-if="item.delFlag == 0 || item.purchasePrice==null || item.inStorageStatus == 0" @tap.stop="clickMask"></view> -->
				<view class="box-left" @tap.stop="largeImg(item)">
					<img class="img-radius" :src="item.productPicture" alt="" v-if="item.productPicture">
					<view class="noPic" v-else>暂无图片</view>
					<view v-if="shopId == '1960543009070256129'" style="margin-bottom: 15px;background: red;color: #fff;width: 23%;height: 30rpx;font-size: 20rpx;position: absolute;bottom: 0;    text-align: center;border-radius: 5px;">
						主播佣金{{item.commission == null ? 0:item.commission+'%'}}
					</view>
				</view>
				<view class="box-right">
					<view class="box-right-name">
						{{item.productName == null ?'':item.productName}}
						<text style="color: red;" v-if="item.delFlag == 0">(已下架)</text>
					</view>
					<view class="box-right-num">{{item.productSn}}</view>
					<view class="box-right-num">供应商:{{item.supplierName== null?'':item.supplierName}}</view>
					<view class="box-right-price" v-if ='shopId != "1960543009070256129"'>
						<view class="price-box" v-if="type==0">
							<text>{{item.purchasePrice?item.purchasePrice:'暂无'}}</text>
							<text>采购价</text>
						</view>
						<view class="price-box">
							<text>{{item.wholesalePrice}}</text>
							<text>批发价</text>
						</view>
						<view class="price-box">
							<text>{{item.price}}</text>
							<text>零售价</text>
						</view>
						<view class="price-box" @tap.stop="seeStockCount(item.stockCount,item.minusStockCount)">
							<text>{{item.stockCount + item.minusStockCount}}</text>
							<view>
								库存
								<uni-icons type="help" size="15"></uni-icons>
							</view>
						</view>
					</view>
					<view class="box-right-price" v-else>
						<view class="price-box" v-if='shopOwnerPhone == username || username == item.createBy'>
							<text>{{item.purchasePrice?item.purchasePrice+'%':'暂无'}}</text>
							<text>团长佣金</text>
						</view>
						<view class="price-box">
							<text>{{item.wholesalePrice}}</text>
							<text>直播价</text>
						</view>
						<view class="price-box">
							<text>{{item.price}}</text>
							<text>日常价</text>
						</view>
						<view class="price-box" @tap.stop="seeStockCount(item.stockCount,item.minusStockCount)">
							<text>{{item.stockCount + item.minusStockCount}}</text>
							<view>
								库存
								<uni-icons type="help" size="15"></uni-icons>
							</view>
						</view>
					</view>
				</view>
				<checkbox-group @tap="checkboxChange(item)">
					<label>
						<checkbox :checked="item.checked" class="checkbox" />
					</label>
				</checkbox-group>
			</view>
			<u-loadmore :status="status" />
		</view>
		
		<view class="bottom-box">
			<view class="bottom-left" @tap="toggle('carPopup')">
				<view class="bottom-left-box">
					<uni-icons type="cart" size="20" color="#646566"></uni-icons>
					<text class="uni-tab__text">已选择</text>
				</view>
				<text style="background-color:#ff0000;color:#fff;position: absolute;top: 0;right: 10rpx;"
					class="uni-tab__dot">{{ carList.length }}</text>
			</view>
			<view class="bottom-right">
				<button class="bottom-btn" @tap="clickShareBtn('all')">分享全部</button>
				<button class="bottom-btn" style="border-radius:0;background: linear-gradient(90deg, #DDA0DD, #FFB6C1);"
					@tap="clickShareBtn">分享选中</button>
				<!-- <button class="bottom-btn" @tap="clickShareBtn">分享选中</button> -->
				<button class="bottom-btn" @tap="$refs.upNewPopup.open()">上新推送</button>
			</view>
		</view>
		<!-- 分享弹出层 -->
		<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
			<uni-popup-share></uni-popup-share>
		</uni-popup>
		<!-- 上新提醒弹出 -->
		<uni-popup ref="upNewPopup" background-color="#fff">
			<view class="popup-pay-content" style="height:auto;">
				<view class="content-list">
					<view class="list-name">客户</view>
					<view class="list-val">
						<input type="text" @tap="goPopleList('khName')" placeholder="可选择客户" disabled
							:value="khName.name" style="text-align: center;margin-top: 20rpx;">
						<uni-icons type="close" @tap="clearkhName" v-if="khName!=''" size="18"
							style="margin-left: 80rpx;line-height: 80rpx;"></uni-icons>
						<view v-else style="margin-left: 80rpx;line-height: 80rpx;">
							<uni-icons type="right" size="16"></uni-icons>
						</view>

					</view>
				</view>
				<view v-if="khName == ''">
					<view class="popup-pay-title">
						<text>选择推送群体</text>
					</view>
					<view v-if="customerCategoryList != null" class="popup-pay-container" @tap="checkUserClass('31','')">
						<text style="display: inline-block">全部客户</text>
					</view>
					<view class="popup-pay-container" @tap="checkUserClass('0','')">
						<text style="display: inline-block">全部客户（零售价）</text>
					</view>
					<view class="popup-pay-container" @tap="checkUserClass('1','')">
						<text style="display: inline-block">全部客户（批发价）</text>
					</view>
					<view v-for="(item,index) in customerCategoryList" :key="index" @tap="checkUserClass('3',item)"
						class="popup-pay-container">
						<text style="display: inline-block">{{item.categoryName}}</text>
					</view>
				</view>
				<view @tap="upNewRemind" v-else
					style="height: 80rpx;background: blue;color: #fff;border-radius: 10px;text-align: center;line-height: 80rpx;margin-top: 20rpx;">
					推送
				</view>
			</view>
		</uni-popup>
		<!-- 选择分享价格弹出 -->
		<uni-popup ref="payDialog" background-color="#fff">
			<view class="popup-pay-content">
				<view class="content-list" @tap.stop="goPopleList('khName')">
					<view class="list-name">客户</view>
					<view class="list-val">
						<input type="text" placeholder="可选择客户" disabled :value="khName.name"
							style="text-align: center;margin-top: 20rpx;">
						<uni-icons type="right" size="16" style="margin-left: 80rpx;line-height: 80rpx;"></uni-icons>
					</view>
				</view>
				<view v-if="shopId != '1960543009070256129'">
					<view class="popup-pay-title">
						<text>选择商品价格</text>
					</view>
					<view class="popup-pay-container" @tap="checkPay('0','')">
						<text style="display: inline-block">以零售价分享</text>
					</view>
					<view class="popup-pay-container" @tap="checkPay('1','')">
						<text style="display: inline-block">以批发价分享</text>
					</view>
					<view v-for="(item,index) in customerCategoryList" :key="index" @tap="checkPay('3',item)"
						class="popup-pay-container">
						<text style="display: inline-block">{{item.categoryName}}</text>
					</view>
				</view>
				<view v-else>
					<view class="popup-pay-container" @tap="checkPay('1','')">
						<text style="display: inline-block">分享</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 购物车弹出层 -->
		<uni-popup ref="carPopup" background-color="#fff">
			<view class="popup-content">
				<view v-for="(item,index) in gwcList" style="position: relative;" :key="index">
					<view class="popup-title">
						<view class="popup-title-left">
							<img class="img-radius" :src="item.productPicture" alt="" v-if="item.productPicture">
							<view class="noPic" v-else>暂无图片</view>
						</view>
						<view class="popup-title-right">
							<view class="popup-title-right-box" style="color: #088FEB;">{{item.productName}}</view>
							<view class="popup-title-right-box">{{item.productSn}}</view>
							<view class="popup-title-right-box" style="color: darkorange;" @tap="inputDialogToggle">
								<text style="margin-right:20rpx;">￥{{item.price}}</text>
								<view style="position: absolute;top: 30rpx;right: 30rpx;" @tap.stop="delShop(item.id)">
									<uni-icons color="red" type="trash" size="26"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="popup-bottom">
				<view class="popup-bottom-left">
					<text>共 {{carType}} 款</text>
				</view>
				<view class="popup-bottom-right">
					<view class="bottom-btn" @tap="closeCar">关闭</view>
				</view>
			</view>
		</uni-popup>
		<!-- 显示正负库存弹窗 -->
		<uni-popup ref="showPopup" background-color="#fff">
			<view class="popup-pay-content" style="width: 550rpx;">
				<view class="popup-pay-title">
					<text>库存数</text>
				</view>
				<view style="width: 100%;height: 150rpx;">
					<view
						style="width: 200rpx;height: 130rpx;border: 3px solid #FFE4C4;border-radius: 10px;margin-top: 20rpx;padding-top: 20rpx;display: flex;flex-direction: column;text-align: center;float: left;margin-left: 20rpx;">
						<text style="font-weight: bold;">
							正数库存
						</text>
						<text style="font-size: 30rpx;color: #000;font-weight: bold;">
							{{zheng}}
						</text>
					</view>
					<view
						style="width: 200rpx;height: 130rpx;border: 3px solid #FFE4C4;border-radius: 10px;margin-top: 20rpx;padding-top: 20rpx;display: flex;flex-direction: column;text-align: center;float: left;margin-left: 40rpx;">
						<text style="font-weight: bold;">
							负数库存
						</text>
						<text style="font-size: 30rpx;color: #000;font-weight: bold;">
							{{fu}}
						</text>
					</view>
				</view>
				<view class="popup-pay-container" style="display: flex;margin-top: 50rpx;background: #89CFF0;">
					<view @tap='$refs.showPopup.close()'
						style="flex:1;text-align: center;border-right: 1px solid #eee;background: #088FEB;font-size:32rpx;">
						确认
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 弹出多图轮播 -->
		<uni-popup ref="imgPopup" background-color="#fff">
			<view class="showImg-box">
				<swiper indicator-dots class="swiper-box" @change="lunbochange" circular autoplay
					:current="swiperDotIndex">
					<swiper-item v-for="(item, index) in bigImg" :key="index">
						<view class="swiper-item">
							<image mode='aspectFit' show-menu-by-longpress :src="item.productPicture" alt=""
								style="width: 100%;height: 100%;border-radius: 10px;" />
							</image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</uni-popup>
		<view v-if="canvasshow">
			<canvas canvas-id="myCanvas" style="width: 1700px; height: 2200px;"></canvas>
		</view>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				bigImg: [],
				swiperDotIndex: 0,
				canvasshow: false,
				indexList: [],
				pageNum: 1, //分页的页码
				shopList: [],
				shopList1: [],
				shopId:uni.getStorageSync('shopId'),
				shopOwnerPhone:uni.getStorageSync('shopOwnerPhone'),
				username:uni.getStorageSync('username'),
				info: 0,
				classId: '',
				gateType: '',
				goodsList: [],
				categoryId: '', //分类id
				searchName: '', //搜索框输入值
				checkbox: '', //需要分享的商品id
				id: '',
				carList: [],
				zheng: '',
				fu: '',
				khName: [],
				carNum: 0,
				carType: 0,
				type: '',
				gwcList: [],
				data: {},
				height: 0,
				base64: '',
				shareSuccess: false,
				tempFilePath: '',
				mini_program_openid: '',
				unionid: '',
				official_account_openid: '',
				customerCategoryList: [],
				FWHPic: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/f2ba2080aaa54c618c2e47df4f220087.png'
			}
		},
		created() {
			uni.hideHomeButton() //左上角HOME按钮
		},
		onReachBottom() {
			if (this.pageNum >= this.pages) return;
			// this.status = 'loading';
			this.pageNum++;
			if (this.gateType == 'search') {
				this.getShareList('search');
			} else {
				this.getShareList();
			}

		},
		onShareTimeline() {
			return {
				title: '查看我的推荐',
				imageUrl: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/70c3d9a274ff4feeb6df0bcb8be0f733.jpg',
				query: 'khid=' + this.khid
			}
		},
		onShareAppMessage() {
			this.shareSuccess = true
			if (this.carList.length == 1 && this.data.shareType == '2') {
				return {
					title: this.shopName + '的推荐',
					imageUrl: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/70c3d9a274ff4feeb6df0bcb8be0f733.jpg',
					path: '/package1/index/oneGoodsShare?khid=' + this.khid + '&userId=' + this.khName.userId + '&shareType=' +
						this.data.shareType + '&mini_program_openid=' + this.mini_program_openid + '&unionid=' + this
						.unionid + '&official_account_openid=' + this.official_account_openid + '&customId=' + this.khName.id
				}
			} else {
				return {
					title: this.shopName + '的推荐',
					imageUrl: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/70c3d9a274ff4feeb6df0bcb8be0f733.jpg',
					path: '/package1/index/downStearmList?khid=' + this.khid + '&userId=' + this.khName.userId +
						'&shareType=' + this.data.shareType + '&mini_program_openid=' + this.mini_program_openid +
						'&unionid=' + this.unionid + '&official_account_openid=' + this.official_account_openid + '&customId=' + this.khName.id
				}
			}

		},
		onShow() {
			let that = this;
			if (this.shareSuccess) {
				if (this.khName != '' && (this.khName.officialAccountOpenid == null || this.khName.officialAccountOpenid == '' || this.khName.officialAccountOpenid == 'null' || this.khName.officialAccountOpenid == undefined)) {
					uni.showModal({
						title: "提示",
						content: "该客户没有关注公众号，无法接收消息通知，是否邀请用户关注？",
						success: function(res) {
							if (res.confirm) {
								uni.previewImage({
									urls: [that.FWHPic]
								})
							}
						}
					})
				}
				this.shareSuccess = false
			}
		},
		onLoad(option) {
			// wx.updateShareMenu({
			//   withShareTicket: true,
			//   isPrivateMessage:true,
			//   success () { }
			// })
			this.height = wx.getSystemInfoSync().windowHeight
			if (option.khid != undefined) {
				uni.redirectTo({
					url: "/package1/index/downStearmList?khid=" + option.khid
				})
			} else {
				this.type = uni.getStorageSync('type')
				this.getGategoryList()
			}
			this.shopName = option.shopName ? option.shopName : uni.getStorageSync('shopName')
			this.getCustomerCategoryList()
		},
		methods: {
			lunbochange(e) {
				this.current = e.detail.current
			},
			largeImg(img) {
				if ((img.productPicture == null && img.productPictures == null) || (img.productPicture == '' && img.productPictures == null)) {
					this.tui.toast("暂无可展示的图片", 300)
					return
				}
				this.bigImg = []
				if (img.productPicture != null) {
					let data = {
						productPicture: img.productPicture
					}
					this.bigImg.push(data)
				}
				if (img.productPictures != null) {
					for (let i = 0; i < img.productPictures.length; i++) {
						this.bigImg.push(img.productPictures[i])
					}
				}
				this.$refs.imgPopup.open()
			},
			//上新推送按钮
			upNewRemind() {
				this.checkUserClass('4')
				this.$refs.upNewPopup.close()
			},
			checkUserClass(type, item) {
				let that = this;
				if (type == '31') {
					for (let i = 0; i < this.customerCategoryList.length; i++) {
						this.upNew('3',this.customerCategoryList[i])
					}
					//给没有客户价格的客户发送
					this.upNew('5','')
				} else if (type == '3') { //某一个客户价格
					this.upNew('3',item)
				} else if (type == '0') { //零售价
					this.upNew('0','')
				} else if (type == '1') { //批发价
					this.upNew('1','')
				} else if (type == '4') { //单独给一个客户发送
					this.upNew('3',this.khName)
				}
			},
			upNew(type,item){
				let that = this;
				
				this.$refs.upNewPopup.close()
				this.data = {
					shareType: '2', //2 分享勾选商品
					shareProductId: this.carList //勾选商品的id string类型 中间通过”,“连接
				}
				this.data.priceType = type == '5' ?'1' : type == '4' ? ((this.khName.categoryId != '' && this.khName.categoryId != null && this.khName.categoryId != 'null') ? '3' : '1') : type
				
				if(type == '3'){
					let obj = {
						id: item.categoryId,
						name: item.categoryName,
						userId: this.khName.userId,
						customId:this.khName.id,
						mini_program_openid :this.khName.mini_program_openid,
						unionid:this.khName.unionid,
						official_account_openid:this.khName.official_account_openid
					}
					this.data.scene = JSON.stringify(obj)
				}
				this.tui.request("/app/productShare/save", "POST", this.data, false, true).then((res) => {
					if (res.code == 200) {
						this.khid = res.result.id
						let content = {
							thing3:'【'+uni.getStorageSync('shopName')+'】'+'上新啦！点击查看详情',
							time2:res.result.createTime
						}
						this.tui.request("/social/wechat/sendWechatTempMessage", "post", {
							tempId:'M45X8AmPi58c16M9YVTMEOhwEVEa9s5md-6i3TwjpRQ',
							title:'店铺上新',
							content:JSON.stringify(content),
							pagePath:'package1/index/downStearmList?khid=' + this.khid + '&userId=' + this.khName.userId +
									'&shareType=' + this.data.shareType + '&mini_program_openid=' + this.khName.miniProgramOpenid +
									'&unionid=' + this.khName.unionid + '&official_account_openid=' + this.khName.officialAccountOpenid + '&customId=' + this.khName.id,
							upNewType:(type == '0' || type == '1')?type:'',
							userId:type == '4'?this.khName.userId:"",
							categoryId:type == '4'? this.khName.categoryId : item.categoryId?item.categoryId:'',
							isAll:type== '5'?'1':''
						}, false, false).then((res) => {
							if (res.code == 200) {
								
							} else {
								this.tui.toast(res.message)
							}
						}).catch((res) => {})
					} else {
						this.tui.toast(res.message)
					}
				}).catch((res) => {})
				this.$refs.payDialog.close()

				
			},
			clearkhName() {
				this.khName = ''
				
				this.$forceUpdate()
			},
			//获取客户分类
			getCustomerCategoryList() {
				this.tui.request("/app/customerCategory/getCustomerCategoryListByShopId", "POST", {
					shopId: uni.getStorageSync('shopId')
				}, false, true).then((res) => {
					if (res.code == 200) {
						if (res.result.length > 0) {
							this.customerCategoryList = res.result
							for (let i = 0; i < this.customerCategoryList.length; i++) {
								let data = {
									categoryName: this.customerCategoryList[i].categoryName,
									categoryId: this.customerCategoryList[i].id,
									categoryPrice: ""
								}
								this.customerCategoryList[i] = data
							}
						} else {
							this.customerCategoryList = null
						}

					} else {
						this.tui.toast(res.message)
					}
				}).catch((res) => {})
			},
			seeStockCount(zheng, fu) {
				this.zheng = zheng;
				this.fu = fu;
				this.$refs.showPopup.open()
			},
			goPopleList() {
				uni.navigateTo({
					url: '/package1/index/peopleList?popleType=khName'
				})
			},
			getUserData(khid) {
				let that = this;
				this.tui.request("/order/ow/getWechatQrcode", "post", {
					page: 'package1/index/downStearmList',
					scene: khid,
					envVersion: __wxConfig.envVersion,
				}, false, true).then((res1) => {
					if (res1.code == 200) {
						let imgA = res1.result;
						uni.downloadFile({
							url: imgA,
							success: (res2) => {
								this.base64 = res2.tempFilePath
								if (this.data.shareType == "1") {
									uni.showLoading({
										title: '请求中...'
									})
									setTimeout(res3 => {
										uni.hideLoading()
										uni.showModal({
											title: '提示',
											content: '确定要分享全部吗？',
											success(res3) {
												if (res3.confirm) {
													that.getData()
												}
											}
										})
									}, 500)


								} else {
									this.$refs.share.open()
								}
							}
						});
					} else {
						this.tui.toast(res.message)
					}
				}).catch((res) => {
					
				})
			},
			getData() {
				let that = this
				uni.showLoading({
					title: '生成中...'
				})
				this.canvasshow = true
				const ctx = uni.createCanvasContext('myCanvas', this);
				//背景图
				let imgA = 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/0f96ca9700b741d486dd23bbe4e0f970.jpg';
				uni.downloadFile({
					url: imgA,
					success: (res2) => {
						if (res2.statusCode === 200) {
							// // 绘制第一张图片
							ctx.drawImage(res2.tempFilePath, 0, 0, 1700, 2200);
							ctx.draw()
							// 绘制第二张图片
							ctx.drawImage(that.base64, 650, 850, 400, 400);
							ctx.draw(true);
							// 设置字体样式
							ctx.font = 'bold 200px SimSun';
							// 设置文字颜色
							ctx.fillStyle = '#088FEB';

							var text = this.shopName;
							var textWidth = ctx.measureText(text).width;
							// 计算居中位置
							var x = (1700 - textWidth) / 2;

							// 绘制文字
							ctx.fillText(text, x, 700);
							ctx.draw(true)
							setTimeout(ress => {
								uni.canvasToTempFilePath({
									x: 0,
									y: 0,
									width: 1700,
									height: 2200,
									destWidth: 1701,
									destHeight: 2200,
									canvasId: 'myCanvas',
									success: (res3) => {
										this.canvasshow = false
										this.tempFilePath = res3.tempFilePath
										uni.previewImage({
											urls: [res3.tempFilePath]
										})
										uni.hideLoading()
									}
								});
							}, 500)
						}
					}
				});

			},
			//初始化获取分类列表
			getGategoryList() {
				this.tui.request("/app/productCategory/list", "get", {
					// shopId: 1,
				}, false, true).then((res) => {
					if (res.code == 200) {
						this.indexList = res.result;
						for (var i = 0; i < this.indexList.length; i++) {
							if (i == 0) {
								this.indexList[i].parentId = true
							} else {
								this.indexList[i].parentId = false
							}
						}
						this.categoryId = this.indexList[0].id
						this.pageNum = 1
						this.searchName = ""
						this.shopList1 = []
						this.shopList = []
						this.getShareList();
					} else {
						this.tui.toast(res.message)
					}
				}).catch((res) => {})
			},
			//点击分类获取商品列表
			async getShareList(type) {
				let that = this
				this.goodsList = []
				await this.tui.request("/app/product/getShareList", "POST", {
					categoryId: this.searchName == "" ? this.categoryId : "",
					searchStr: this.searchName,
					pageNum: this.pageNum,
					pageSize: '10'
				}, false, false).then((res) => {
					if (res.code == 200) {
						for (var i = 0; i < res.result.records.length; i++) {
							if (res.result.records != '') {
								res.result.records[i].checked = false
							}
						}
						this.$nextTick(() => {
							if (type == 'search') {
								this.gateType = 'search'
								this.shopList = []
								this.status = 'nomore';
								if (this.pages == 1) {
									this.shopList1 = res.result.records
								} else {
									this.shopList1 = [...this.shopList1, ...res.result.records]
								}
								this.pages = res.result.pages
							} else {
								this.gateType = ''
								this.shopList1 = []
								this.status = 'nomore';
								if (this.pages == 1) {
									this.shopList = res.result.records
								} else {
									this.shopList = [...this.shopList, ...res.result.records]
								}
								this.pages = res.result.pages
							}
						})


					} else {
						this.tui.toast(res.message)
					}
				}).catch((res) => {})
				await this.getCheck()
			},
			//顶部搜索框
			search(e) {
				this.pageNum = 1
				this.shopList1 = []
				this.shopList = []
				if (e.value == '') {
					this.searchName = ""
					this.getShareList()
				} else {
					this.searchName = e.value

					this.getShareList('search')

				}
			},
			clearSearch() {
				this.searchName = ''
				this.getGategoryList()
			},
			getCheck() {
				let that = this;
				if (that.carList != '') {
					if (this.searchName != '') {
						for (var i = 0; i < that.carList.length; i++) {
							for (var m = 0; m < that.shopList.length; m++) {
								if (that.carList[i] == that.shopList[m].id) {
									that.shopList[m].checked = true
								}
							}
						}
					} else {
						for (var i = 0; i < that.carList.length; i++) {
							for (var m = 0; m < that.shopList.length; m++) {
								// for (var j = 0; j < that.shopList[m].length; j++) {
								if (that.carList[i] == that.shopList[m].id) {
									that.shopList[m].checked = true
								}
								// }
							}
						}
					}
				}
				this.$forceUpdate()
			},
			//未入库遮罩
			clickMask() {
				uni.showToast({
					title: '请将商品上架或入库后再操作！',
					icon: 'none'
				})
			},
			//点击左侧菜单切换
			clickLeftBtn(index) {
				for (var i = 0; i < this.indexList.length; i++) {
					if (i == index) {
						this.indexList[i].parentId = true
					} else {
						this.indexList[i].parentId = false
					}
				}
				this.categoryId = this.indexList[index].id
				this.pageNum = 1
				this.searchName = ""
				this.shopList1 = []
				this.shopList = []
				this.getShareList(this.indexList[index].id)
			},
			//选中商品
			checkboxChange(item) {
				item.checked = !item.checked
				if (this.carList.indexOf(item.id) != -1) {
					this.carList.splice(this.carList.indexOf(item.id), 1)
				} else {
					this.carList.push(item.id)
				}
				if (this.gwcList.length == 0) {
					this.gwcList.push(item)
				} else {
					for (let i = 0; i < this.gwcList.length; i++) {
						if (this.gwcList[i].id == item.id) {

							this.gwcList.splice(i, 1)
						} else {
							if (this.gwcList.length == (i + 1)) {

								this.gwcList.push(item)
								return
							}

						}
					}
				}
			},
			//点击分享按钮
			clickShareBtn(e) {
				if (e != 'all' && this.carList == '') {
					this.tui.toast("请勾选商品后再分享", 1000)
					return
				}
				if (e == 'all') {
					this.data = {
						shareType: '1', //1 分享全部

					}
				} else {
					this.data = {
						shareType: '2', //2 分享勾选商品
						shareProductId: this.carList //勾选商品的id string类型 中间通过”,“连接
					}
				}
				this.$refs.payDialog.open()
			},
			//弹出购物车或者商品规格选择弹窗
			toggle(type, item) {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				if (type == 'carPopup') {
					this.$refs.carPopup.open('bottom')
					this.carType = this.carList.length
				} else {
					this.checkGoods(item);
					this.$refs.popup.open('bottom')
				}
			},
			//删除整条商品
			delShop(id) {
				var that = this;
				uni.showModal({
					title: "提示",
					content: "确定删除此条商品吗？",
					success: function(res) {
						if (res.confirm) {
							for (let i = 0; i < that.gwcList.length; i++) {

								if (that.gwcList[i].id == id) {
									that.carList.splice(that.carList.indexOf(id), 1)
									that.carType = that.carList.length
									that.gwcList.splice(i, 1)
									for (let m = 0; m < that.goodsList.length; m++) {
										if (that.goodsList[m].id == id) {
											that.$set(that.goodsList[m], 'checked', !that.goodsList[m].checked)
										}

									}
								}
							}
						}

					}
				})
			},
			checkPay(type, item) {
				let that = this;
				this.data.priceType = type
				let obj = {
					id: item.categoryId,
					name: item.categoryName,
					userId: this.khName.userId,
					customId:this.khName.id,
					mini_program_openid :this.mini_program_openid,
					unionid:this.unionid,
					official_account_openid:this.official_account_openid
				}
				this.data.scene = JSON.stringify(obj)
				this.tui.request("/app/productShare/save", "POST", this.data, false, true).then((res) => {
					if (res.code == 200) {
						this.khid = res.result.id
						this.getUserData(res.result.id)
					} else {
						this.tui.toast(res.message)
					}
				}).catch((res) => {})
				this.$refs.payDialog.close()
				// setTimeout(res=>{
				// 	this.khName = {}
				// },1000)
			},
			//关闭购物车弹窗
			closeCar() {
				this.$refs.carPopup.close()
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		font-size: 24rpx;
	}

	.page1 {
		font-size: 28rpx;
	}

	.uni-tab__dot {
		padding: 0 8rpx;
		line-height: 30rpx;
		color: #ffffff;
		text-align: center;
		font-size: 24rpx;
		background-color: #ff0000;
		border-radius: 30rpx;
	}

	.uni-tab__text {
		font-size: 24rpx;
		color: #646566;
	}

	.title-box {
		background: #fff;
		position: fixed;
		z-index: 99;
		width: 100%;
		top: 0;
	}

	.bottom-box {
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		background: #fff;
		z-index: 98;
	}

	.bottom-left {
		width: 15%;
		position: relative;
	}

	.bottom-right {
		width: 85%;
		display: flex;

		.bottom-btn {
			margin: 0;
			padding: 0;
			width: 45%;
			line-height: 70rpx;
			height: 70rpx;
			text-align: center;
			margin-top: 10rpx;
			color: #fff;
			font-size: 28rpx;
		}

		.bottom-btn:first-child {
			background: linear-gradient(90deg, #FF9797, #FFC1E0);
			border-top-left-radius: 70rpx;
			border-bottom-left-radius: 70rpx;
			margin-left: 20rpx;
		}

		.bottom-btn:last-child {
			background: linear-gradient(90deg, #60F3FF, #088FEB);
			border-top-right-radius: 70rpx;
			border-bottom-right-radius: 70rpx;
		}
	}

	.bottom-left-box {
		display: flex;
		flex-direction: column;
		text-align: center;
	}

	.content-box {
		background: #fff;
		flex: 1;
		display: flex;
		margin-top: 113rpx;
		overflow: scroll;
	}

	.content-left {
		width: 170rpx;
		background: #eee;
		height: 100%;
		overflow: scroll;
	}

	.left-box {
		width: 100%;
		height: 90rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 90rpx;
		border-bottom: 1px solid #fff;
	}

	.left-box-hover {
		width: 100%;
		height: 90rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 90rpx;
		border-bottom: 1px solid #fff;
		background-color: #fff;
	}

	.red {
		border-right: 3px solid red;
	}

	.content-right {
		height: 100%;
		overflow-y: scroll;
	}

	.right-box {
		width: 100%;
		height: 240rpx;
		display: flex;
		border-bottom: 1px solid #eee;
		position: relative;
	}

	.box-left {
		width: 130rpx;
		height: 131rpx;
		background-size: 100%;
		margin: 25rpx 30rpx 35rpx 10rpx;
		border-radius: 20rpx;
	}

	.box-left img {
		width: 100%;
		height: 100%;

	}

	.box-right {
		margin-top: 17rpx;
	}

	.box-right-name {
		font-size: 30rpx;
		font-weight: bold;
	}

	.box-right-num {
		padding: 5rpx 0;
		color: #777;
	}

	.box-right-price {
		display: flex;
		font-size: 25rpx;
	}

	.checkbox {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: 20rpx;
		right: 30rpx;
	}

	.price-box {
		display: flex;
		flex-direction: column;
		margin-right: 20rpx;
	}

	.price-box text:first-child {
		color: #ffa200
	}

	.uni-tab__cart-button-right,
	.uni-tab__cart-sub-right {
		display: none;
		flex: none;
	}

	.popup-content {
		align-items: center;
		justify-content: center;
		padding: 30rpx;
		height: 1200rpx;
		background-color: #fff;
		margin-bottom: 30rpx;
		overflow: scroll;
	}

	.popup-title-right-box {
		height: 50rpx;
		line-height: 50rpx;
	}

	.popup-title-right {
		width: 400rpx;
		margin-left: 30rpx;
	}

	.popup-title-left {
		width: 150rpx;
		height: 150rpx;
	}

	.popup-title-left image {
		width: 150rpx;
		height: 150rpx;

	}

	.popup-title {
		display: flex;
		height: 180rpx;
		border-bottom: 1px solid #eee;
		margin-top: 20rpx;
	}

	.popup-bottom {
		width: 95%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 2.5%;
		display: flex;
		z-index: 99;
		background: #fff;
	}

	.popup-bottom-left {
		width: 50%;
		line-height: 80rpx;
	}

	.popup-bottom-right {
		width: 50%;
		line-height: 100rpx;

		.bottom-btn {
			width: 70%;
			line-height: 70rpx;
			height: 70rpx;
			text-align: center;
			/* margin-top: 10rpx; */
			color: #fff;
			font-size: 28rpx;
			margin: 0 auto;
			background: linear-gradient(90deg, #60F3FF, #088FEB);
			border-radius: 70rpx;
		}
	}

	.shop-mask {
		width: 100%;
		height: 190rpx;
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.1);
		z-index: 99;
	}

	.popup-pay-content {
		align-items: center;
		justify-content: center;
		padding: 30rpx;
		width: 500rpx;
		max-height: 800rpx;
		overflow: scroll;
		background-color: #fff;
	}

	.popup-pay-title {
		margin-top: 20rpx;
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		position: relative;
	}

	.popup-pay-container {
		margin-top: 20rpx;
		height: 100rpx;
		border-radius: 10px;
		background: #088FEB;
		line-height: 100rpx;
		text-align: center;
		border-bottom: 1px solid #eee;
		border-top: 1px solid #eee;
		color: #fff;
	}

	.noPic {
		border-radius: 10px;
		width: 130rpx;
		height: 130rpx;
		text-align: center;
		line-height: 140rpx;
		color: #777;
		background: #eee;
	}

	.content-list {
		width: 100%;
		display: flex;
		height: 80rpx;
		border-bottom: 1px solid #eee;
	}

	.list-name {
		width: 100rpx;
		text-align: left;
		line-height: 80rpx;
		height: 80rpx;
		font-size: 36rpx;
	}

	.list-val {
		width: 345rpx;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
	}
	.showImg-box {
		width: 700rpx;
		height: 1000rpx;
		border-radius: 10px;
	}
	.swiper-box {
		height: 1000rpx;
	}
	
	.swiper-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 1000rpx;
		color: #fff;
		background-color: #cee1fd;
		border-radius: 10px;
	}
	@media screen and (min-width: 760px) {
		/* 适配宽度为768px及以上的屏幕 */
		.popup-content {
			height: 750rpx;
		}
	}
</style>