<template>
	<view class="page1">
		<view class="title-box" style="height:8%;">
			<uni-search-bar class="uni-mt-10" radius="5" placeholder="商品名称/货号/供应商" cancelButton="none"
				@blur="search" @clear="clearSearch" />
		</view>
		<view class="content-left" style="height: 84%;float: left;position: fixed;top: 8%;">
			<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="width: 570rpx;background: #fff;margin:0 0 0 170rpx;padding-top: 16%;">
			<view class="right-box" v-for="(item,index) in shopList" :key="index" @tap="toggle('bottom',item)">
				<!-- 当商品的delFlag=0和未入库状态时，显示此遮罩，点击弹出弹窗提示不能操作 -->
				<!-- <view class="shop-mask" v-if="item.delFlag == 0 || item.purchasePrice==null || item.inStorageStatus == 0" @tap.stop="clickMask(item)"></view> -->
				<view class="box-left">
					<view v-if="(item.hasCheck!= null && item.hasCheck!= undefined)" style="position: absolute;color: #fff;background: red;width: 45rpx;height: 40rpx;font-size: 20rpx;text-align: center;line-height: 40rpx;border-radius: 5px;">
						已选
					</view>
					<img class="img-radius" :src="item.productPicture" alt="" v-if="item.productPicture">
					<view class="noPic" v-else>暂无图片</view>
				</view>
				<view class="box-right">
					<view class="box-right-name">
						{{item.productSn==null?'':item.productSn}}
						<text v-if="item.productName">({{item.productName == null ?'':item.productName}})</text>
						<text style="color: red;" v-if="item.delFlag == 0">(已下架)</text>
					</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="storageType== 0">
							<text>{{item.inStorageStatus==0?'待入库':item.purchasePrice == null ?'新商品':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.inStorageStatus==0?'待入库':item.purchasePrice == null ?'新商品':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>
			</view>
			<view class="right-box" v-for="(item,index) in shopList1" :key="index" @tap="toggle('bottom',item)">
				<!-- 当商品的delFlag=0和未入库状态时，显示此遮罩，点击弹出弹窗提示不能操作 -->
				<!-- <view class="shop-mask" v-if="item.delFlag == 0 || item.purchasePrice==null || item.inStorageStatus == 0" @tap.stop="clickMask(item)"></view> -->
				<view class="box-left">
					<view v-if="(item.hasCheck!= null && item.hasCheck!= undefined)" style="position: absolute;color: #fff;background: red;width: 45rpx;height: 40rpx;font-size: 20rpx;text-align: center;line-height: 40rpx;border-radius: 5px;">
						已选
					</view>
					<img class="img-radius" :src="item.productPicture" alt="" v-if="item.productPicture">
					<view class="noPic" v-else>暂无图片</view>
				</view>
				<view class="box-right">
					<view class="box-right-name">
						{{item.productSn}}
						<text v-if="item.productName">({{item.productName == null ?'':item.productName}})</text>
						<text style="color: red;" v-if="item.delFlag == 0">(已下架)</text>
					</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="storageType== 0">
							<text>{{item.inStorageStatus==0?'待入库':item.purchasePrice == null ?'新商品':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.inStorageStatus==0?'待入库':item.purchasePrice == null ?'新商品':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>
			</view>
			<view style="width: 100%;height: 136rpx;"></view>
			<u-loadmore :status="status" />
		</view>
		<view class="bottom-box" style="position: fixed;bottom: 0;">
			<view class="bottom-left" >
				<!-- <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.size}}</text> -->
			</view>
			<view class="bottom-right">
				<view class="bottom-btn" @tap="backPrevPage">选好了</view>
			</view>
		</view>
		
		<!-- 购物车弹出层 -->
		<uni-popup ref="carPopup" background-color="#fff">
			<view class="popup-content">
				<view v-for="(item,index) in stockList" :key="index" style="position: relative;margin-top: 60rpx;">
					<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 v-if="item.productName != null" 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">
								<view style="position: absolute;top: 30rpx;right: 30rpx;" @tap.stop="delShop(item)">
									<uni-icons color="red" type="trash" size="26"></uni-icons>
								</view>
							</view>
						</view>
					</view>
					<view class="popup-container" v-for="(item1,index1) in item.checkStockAttributeVos" :key="index1">
						<view class="checkList" style="padding-bottom:160rpx;">
							<!-- <view style="margin-right:5%;" @tap="delShopSpec(item.id,item1.attributeList)">
								<uni-icons color="red" type="minus" size="26"></uni-icons>
							</view> -->
							<view class="checkList-box">
								{{item1.attributeList | sliceMsg}}
							</view>
							<view class="checkList-box">
								{{item1.stockCount}}
							</view>
							<uni-number-box min="-10000" max="100000" v-model="item1.pdNum" />
						</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="this.$refs.carPopup.close()">关闭</view>
					</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>
	</view>
</template>

<script>
	import base from '@/utils/ossUploadFile/base64.js';
	export default {
		components: {},
		data() {
			return {
				indexList: [],
				status: 'loadmore',
				pageNum: 1, //分页的页码
				shopList: [],
				shopList1: [],
				shopOwnerPhone:uni.getStorageSync('shopOwnerPhone'),
				username:uni.getStorageSync('username'),
				carPages:1,
				zheng:'',
				fu:'',
				pages: 1,
				totalPages: 0,
				info: 0,
				categoryId: '', //分类id
				searchName: '', //搜索框输入值
				shopId: '', //店铺id,
				carList: new Map(),
				attributeList: [],
				purchasePrice: 0,
				storageType: '',
				carType: 0,
				type: '',
				productId:'',
				pdList:[],
				stockList:[],
				height:0,
				gateType:''
			}
		},
		filters: {
			sliceMsg(val) {
				var name = ''
				if (typeof(val) == 'string') {
					let newObj = JSON.parse(val)
					for (let as in newObj) {
						name += newObj[as] + '/'
					}
				}
				return name;
			},
			maxNum(val) {
				if (val >= 10) {
					return 10
				} else if (val < 0) {
					return 0
				}
			}
		},
		onReachBottom() {
			if (this.pageNum >= this.pages) return;
			this.status = 'loading';
			this.pageNum ++
			if(this.gateType == 'search'){
				this.getShareList('search');
			}else{
				this.getShareList();
			}
		},
		onShow(){
			let that = this;
			this.pdList = this.pdList
			this.shopId = uni.getStorageSync('shopId')
			for(let i = 0;i<this.shopList.length;i++){
				if(this.shopList[i].id == this.pdList.id){
					this.shopList[i].hasCheck = true
				}
			}
			for(let i = 0;i<this.shopList1.length;i++){
				if(this.shopList1[i].id == this.pdList.id){
					this.shopList1[i].hasCheck = true
				}
			}
			if(this.pdList.saleDetailQueryDTO){
				
				if (this.carList.size == 0) { //当前页没有数据
					let obj = {
						id: this.pdList.id, 
						productName: this.pdList.productName, 
						productPicture: this.pdList.productPicture, 
						productSn: this.pdList.productSn, 
						supplierName:this.pdList.supplierName,
						stockLogList: new Map(),
					}
					for (let m = 0; m < this.pdList.saleDetailQueryDTO.length; m++) {
						obj.stockLogList.set(this.pdList.saleDetailQueryDTO[m].attributeList, this.pdList.saleDetailQueryDTO[m])
					}
					this.carList.set(this.pdList.id, obj)
				} else { //当前页有数据
					if (this.carList.has(this.pdList.id) == true) { //商品相同
						for (let m = 0; m < this.pdList.saleDetailQueryDTO.length; m++) {
							this.carList.get(this.pdList.id).stockLogList.set(this.pdList.saleDetailQueryDTO[m].attributeList,this.pdList.saleDetailQueryDTO[m])
						}
					} else { //商品不同
						let obj = {
							id: this.pdList.id,
							productName: this.pdList.productName, 
							productPicture: this.pdList.productPicture, 
							productSn: this.pdList.productSn, 
							supplierName:this.pdList.supplierName,
							stockLogList: new Map(),
						}
						for (let m = 0; m < this.pdList.saleDetailQueryDTO.length; m++) {
							obj.stockLogList.set(this.pdList.saleDetailQueryDTO[m].attributeList, this.pdList.saleDetailQueryDTO[m])
						}
						this.carList.set(this.pdList.id, obj)
					}
				}
			}
			this.carPages = 1
			this.stockList = []
			this.$forceUpdate()
			//this.stockSelect()
		},
		onLoad(option) {
			this.height = wx.getSystemInfoSync().windowHeight
			this.getGategoryList()
			this.storageType = uni.getStorageSync('type')
		},
		methods: {
			seeStockCount(zheng,fu){
				this.zheng = zheng;
				this.fu = fu;
				this.$refs.showPopup.open()
			},
			//初始化获取分类列表
			getGategoryList() {
				this.tui.request("/app/productCategory/list", "get", {}, 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.getShareList();
					} else {
						this.tui.toast(res.message)
					}
				}).catch((res) => {})
			},
			//点击底部选好了，返回上一页
			backPrevPage() {
				var data = []
				this.carList.forEach(item => {
					
					data.push(item)
					item.stockLogList1 = []
					item.stockLogList.forEach(item1 => {
						
						item.stockLogList1.push(item1)
					})
				})

				uni.navigateBack({
					delta: 1
				})
			},
			getShareList(type) {
				let data = {}
				let that = this
				if(type=='search'){
					this.gateType = 'search'
					data = {
						checkStockId:uni.getStorageSync('stockId'),
						categoryId: "",
						searchStr: this.searchName,
						pageNum: this.pageNum,
						pageSize: '10'
					}
				}else{
					this.gateType = ''
					data = {
						checkStockId:uni.getStorageSync('stockId'),
						categoryId: this.categoryId,
						searchStr: this.searchName,
						pageNum: this.pageNum,
						pageSize: '10'
					}
				}
				this.tui.request("/app/product/getShareList", "POST", data, false, false).then((res) => {
					if (res.code == 200) {
						if (type == 'search') {
							this.shopList = []
							this.status = 'nomore';
							if (this.pages == 1) {
								this.shopList1 = res.result.records
							} else {
								this.shopList1 = [...this.shopList1, ...res.result.records]
							}
							for(let i = 0;i<this.shopList1.length;i++){
								if(this.shopList1[i].checkStockAttributeVos != null){
									this.shopList1[i].hasCheck = true
								}
							}
							this.pages = res.result.pages
						} else {
							this.shopList1 = []
							this.status = 'nomore';
							if (this.pages == 1) {
								this.shopList = res.result.records
							} else {
								this.shopList = [...this.shopList, ...res.result.records]
							}
							for(let i = 0;i<this.shopList.length;i++){
								if(this.shopList[i].checkStockAttributeVos != null){
									this.shopList[i].hasCheck = true
								}
							}
							this.pages = res.result.pages
						}
					} else {
						this.tui.toast(res.message)
					}
				}).catch((res) => {})
			},
			//弹出购物车或者商品规格选择弹窗
			toggle(type, item) {
				if (type == 'carPopup') {
					this.$refs.carPopup.open('bottom')
				} else {
					
					this.productId = item.id
					// this.checkGoods(item);
					uni.navigateTo({
						url: '/package2/stock/stockDetail?item=' + JSON.stringify(item)
					})
				}

			},
			//未入库遮罩
			clickMask(item) {
				let title = ''
				if (item.delFlag == 0) {
					title = '请将商品上架后再操作！'
				} else {
					title = '请将上次入库的采购价维护后再进行操作！'
				}
				uni.showToast({
					title: title,
					icon: 'none'
				})
			},
			/* stockSelect(){
				this.tui.request("/app/checkStock/getCheckStock", "POST", {
					checkStockId:uni.getStorageSync('stockId'),
					pageNum:this.carPages,
					pageSize:10
				}, false, false).then((res) => {
					if (res.code == 200) {
						if (this.carPages == 1) {
							this.stockList = res.result.checkStockDetailVoList.records
						} else {
							this.stockList = [...this.stockList, ...res.result.checkStockDetailVoList.records]
						}
						this.carType = this.stockList.length
						if(this.carPages >=res.result.checkStockDetailVoList.pages)return
						this.carPages++
						this.stockSelect()
					} else {
						this.tui.toast(res.message)
					}
					
				}).catch((res) => {})
			}, */
			//扫一扫功能
			scanCode() {
				uni.scanCode({
					success: (res) => {
						this.tui.request("/app/product/getById/" + base.decode(res.result.split(',')[0]), "POST", {
							
						}, false, true).then((res1) => {
							if (res1.code == 200) {
								let shopId = base.decode(res.result.split(',')[1])
								if(shopId == uni.getStorageSync('shopId')){
									uni.navigateTo({
										url: '/package2/stock/stockDetail?item=' + JSON.stringify(res1.result)
									})
								}else{
									this.tui.toast('您的店铺中暂无该商品！')
								}
							} else {
								this.tui.toast(res1.message)
							}
						}).catch((res) => {})
			
					},
					fail: (res) => {
						uni.showToast({
							title: '扫描失败',
							icon: 'none'
						})
					}
				})
			},
			//顶部搜索框
			search(e) {
				if(e.value == ''){
					this.pageNum = 1
					this.searchName = ""
					this.getShareList()
				}else{
					this.pageNum = 1
					this.searchName = e.value
					this.getShareList('search')
					
				}
			},
			//清空搜索条件
			clearSearch(){
				this.searchName = ''
				this.getShareList()
			},
			//点击左侧菜单切换
			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()
			},
			//删除整条商品
			delShop(item) {
				var that = this;
				
				let dataList = []
				var itemData;
				itemData = {
					checkStockId:uni.getStorageSync('stockId'),
					productId: item.productId,
					productName:item.productName,
					productPicture:item.productPicture,
					productSn:item.productSn,
					checkStockAttributeVos:[]
				}
				dataList.push(itemData)
				this.tui.request("/app/checkStockDetail/addCheckStockDetail", "POST", dataList, false, false).then((res) => {
					if (res.code == 200) {
						/* this.stockSelect() */
					} else {
						this.tui.toast(res.message)
					}
				}).catch((res) => {})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.page1 {
		/* height: 100%; */
		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;
	}

	.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-container {
		width: 100%;
		background: #fff;
		height: 50rpx;
	}

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

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

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

	.bottom-left {
		/* width: 15%; */
		position: relative;
		padding-top: 20rpx;
	}

	.bottom-right {
		width: 100%;
		padding-top: 20rpx;
		.bottom-btn {
			width: 85%;
			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;
		}
	}

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

	.content-box {
		background: #fff;
		flex: 1;
		display: flex;
		height: 93%;
	}

	.content-left {
		width: 170rpx;
		background: #eee;
		height: 89%;
		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 {
		flex: 1;
		height: 100%;
	}

	.right-box {
		width: 100%;
		height: 190rpx;
		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;
	}


	.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;
	}


	.name {
		font-size: 30rpx;
		width: 50%;
		float: left;
		height: 70rpx;
		line-height: 70rpx;
	}

	.checkList {
		display: flex;
		height: 50rpx;
		font-size: 28rpx;
		line-height: 50rpx;
		margin: 20rpx 0;
	}

	.checkList-box {
		height: 50rpx;
		width: 60%;
	}

	.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);
	}
	.noPic{
		width: 150rpx;
		height: 150rpx;
		border-radius: 10px;
		text-align: center;
		line-height: 140rpx;
		color: #777;
		background: #eee;
	}
	button {
		color: #ffffff !important;
		background: #5fd9ee !important;
		width: 90%;
		// margin-top: 20upx;
	}
	.popup-pay-content {
		align-items: center;
		justify-content: center;
		padding: 30rpx;
		width: 500rpx;
		height: auto;
		background-color: #fff;
	}
	.popup-pay-title {
		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;
	}
</style>