OpenDoorManageMini/pages/replenish/replenishmentHomePage.vue

<template>
	<view class="container">
		<u-navbar leftIconColor="#fff" titleStyle="color:#fff;fontSize:36rpx;" :autoBack="true" bgColor="#2C6FF3"
			:placeholder="true" title="补货首页"></u-navbar>
		<view class="machine-box">
			机器编号：{{deviceId}}
		</view>

		<view class="top-wrap">
			<view class="tab-wrap">
				<view class="tab">
					<u-tabs :list="tabList" :activeStyle="{color: '#333',fontWeight: 'bold',fontSize:'36rpx'}"
						:inactiveStyle="{fontSize:'32rpx'}" :scrollable="false" :current="tabsIndex" @click="tabschange"
						lineColor="#2C6FF3">
					</u-tabs>
				</view>
			</view>
			<view class="search-container">
				<u-search animation placeholder="商品搜索" :clearabled="false" v-model="keyword" :showAction="false"
					@search="search"></u-search>
				<!-- 	<view class="scan-icon" @click="scan">
					<u-icon name="scan" size="22" color="#909399"></u-icon>
				</view> -->

				<view class="search-history flex flex-wrap flex-start" v-if="historyList.length>0">
					<view class="history-tips">最近搜索</view>
					<view class="history-item" v-for="(item,index) in historyList" :key="index"
						@click="searchFast(item)">
						{{item}}
					</view>
				</view>
			</view>

			<view class="btns flex justify-between">
				<view class="btn-left flex">
					<view class="icon-btn" style="margin-right: 12rpx;">
						<xbutton width="184rpx" round="14rpx" @click="addgoods"
							icon="https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/replenish/rep_home_add.png">
							新增商品</xbutton>
					</view>
					<view class="icon-btn" style="margin-right: 12rpx;">
						<xbutton width="184rpx" round="14rpx" @click="addlist"
							icon="https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/replenish/rep_home_add.png">
							商品清单</xbutton>
					</view>
					<!-- <view class="add-btn">
						<xbutton width="184rpx" round="14rpx"
							icon="https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/replenish/rep_home_full.png">
							一键满货</xbutton>
					</view> -->
				</view>
				<view class="btn-right">
					<xbutton width="144rpx" round="14rpx" @click="keep">提交</xbutton>
				</view>
			</view>
		</view>

		<scroll-view class="scrollview" :scroll-with-animation="true" scroll-y :style="{'height':fullHeight}"
			lower-threshold="100">
			<view v-if="goodsList&&goodsList.length>0" class="scroll-content">
				<view class="goods-box" v-for="(item,index) in goodsList" :key="item.id">
					<view class="flex flex-sub align-center">
						<view class="image">
							<u--image radius='14rpx' width="120rpx" height="120rpx"
								:src="item.cover?item.cover:'https://static.xynetweb.com/sysFile/defaultgoods.png'"
								mode="aspectFit" :lazy-load="true">
							</u--image>
						</view>
						<view class="flex flex-sub flex-direction justify-around goods-content">
							<view class="goods-name-price flex justify-between align-start">
								<view class="goods-name">
									{{item.name}}
								</view>
								<view class="goods-price" v-if="item.newPrice==null">
									￥{{$xy.delMoney(item.price)}}
								</view>
								<view class="goods-price flex" v-else>
									<view style="color: #666;text-decoration: line-through;">
										￥{{$xy.delMoney(item.price)}}
									</view>
									<view>
										￥{{$xy.delMoney(item.newPrice)}}
									</view>
								</view>
							</view>
							
							<view class="goods-stock flex">
								<view>商品ID：{{item.id}}</view>
							</view>
							
							<view class="goods-stock flex">
								<view>商品SKUID：{{item.skuId}}</view>
							</view>
							
							<view class="goods-stock flex">
								<view>容量：{{item.capacity}}</view>
								<view style="margin-left: 24rpx;" v-if="item.newCapacity">
									新容量：{{item.newCapacity}}</view>
							</view>
							
							<view class="goods-stock flex">
								<view>库存：{{item.stock}}</view>
								<view style="margin-left: 24rpx;" v-if="item.newStock!=0">
									新库存：{{Number(item.stock)+Number(item.newStock)}}</view>
							</view>
							<view class="btn-input flex align-center flex-start" v-if="deviceInfo.deviceType!=5">
								<view class="btn-input-left">补货：</view>
								<view class="btn-input-right flex align-center">
									<image
										src="https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/replenish/rep_home_sub.png"
										mode="widthFix" @click="sub(item)"></image>
									<input type="doit" v-model="item.newStock">
									<image
										src="https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/replenish/rep_home_sup.png"
										mode="widthFix" @click="sup(item)"></image>
								</view>
							</view>
							<view style="height:20rpx;" v-if="deviceInfo.deviceType==5"></view>
							<image class="edit-goods" @click.stop="editGoods(item,index)"
								src="https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/replenish/rep_home_edit.png"
								mode="widthFix"></image>
						</view>
					</view>

					<view class="edit-box" v-if="item.show">
						<view @click.stop="changePrice(item)">改价</view>
						<view @click.stop="changeCapacity(item)">容量</view>
						<view @click.stop="del(item)">删除</view>
						<!-- <view>满货</view> -->
					</view>
					<view class="bg" v-if="editIndex!=null" @click.stop="editHidden"></view>
				</view>
			</view>
			<view v-else class='empty'>
				<u-empty mode="data" text="数据为空"></u-empty>
			</view>
			<!-- <u-loadmore v-if="isEmpty===false" :status="loadmoreStatus" /> -->
		</scroll-view>

		<view class="flex align-center justify-around bottom-btn">
			<view class="bottom-view" @tap="gethomePage">
				<image class="bottom-image"
					src="https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/replenish/rep_home_upd.png"
					mode="widthFix"></image>
				<view class="bottom-text">刷新</view>
			</view>
			<view class="bottom-view" @tap="openCabinet">
				<image class="bottom-image"
					src="https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/replenish/rep_home_open.png"
					mode="widthFix"></image>
				<view class="bottom-text">一键开柜</view>
			</view>
			<view class="bottom-view" @tap="cper">
				<image class="bottom-image"
					src="https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/replenish/rep_home_rec.png"
					mode="widthFix">
				</image>
				<view class="bottom-text">补货记录</view>
			</view>
		</view>

		<xpopup :show="editPriceShow" @close="editPriceClose" @confirm="priceSet" :showBtn="true" :title="editTitle">
			<view class="pop-content">
				<u--input placeholder="请输入内容" type="digit" border="surround" v-model="editPrice" v-if="editTitle=='修改价格'"></u--input>
				<u--input placeholder="请输入内容" type="digit" border="surround" v-model="editCapacity" v-else></u--input>
			</view>
		</xpopup>

		<xpopup :show="backShow" @close="backClose" :safeAreaInsetBottom="false" :showBtn="false" @open="backOpen"
			mode="center">
			<view class="back-pop-content">
				<block v-for="(item,index) in changeList" :key="item.goodsName">
					<view class="back-price flex align-center" v-if="item.type=='price'">
						<view>{{item.goodsName}}</view>
						<view>价格:</view>
						<view>{{$xy.delMoney(item.oldPrice)}}</view>
						<view>更改为</view>
						<view>{{$xy.delMoney(item.newPrice)}}</view>
					</view>
					<view class="back-stock flex align-center" v-if="item.type=='stock'">
						<view>{{item.goodsName}}</view>
						<view>库存:</view>
						<view>{{item.oldStock}}</view>
						<view>更改为</view>
						<view>{{item.newStock}}</view>
					</view>
					<view class="back-capacity flex align-center"  v-if="item.type=='capacity'">
						<view>{{item.goodsName}}</view>
						<view>容量:</view>
						<view>{{item.oldCapacity}}</view>
						<view>更改为</view>
						<view>{{item.newCapacity}}</view>
					</view>
				</block>
			</view>
		</xpopup>
	</view>
</template>

<script>
	import {
		supplyPage,
		delGoods,
		save,
		saveByOpenDoor,
		check,
		create
	} from "@/api/replenishment/replenishment.js"

	import {
		saveKeyWord
	} from '@/utils/common.js'
	export default {
		data() {
			return {
				goodsList: [],
				page: 1, //当前分页
				size: 10, //分页数据条数
				tabsIndex: 0,
				addGoodsShow: false,
				active: '',
				deviceId: null,
				deviceName: null,
				name: '', //商品名称/条形码

				workNo: '',
				fullHeight: 0,
				historyList: [],
				keyword: '',

				tabList: [{
						name: '全部'
					},
					{
						name: '缺货'
					},
					{
						name: '售罄'
					}
				],

				editIndex: null,
				editPriceShow: false,
				editPrice: null,
				editGoodsIndex: null,
				changeList: [], //提交反显信息

				backShow: false,
				deviceInfo: {},
				editTitle:'修改价格',
				editCapacity:null
			}
		},
		onLoad(o) {
			let _this = this;
			const query = uni.createSelectorQuery().in(this);
			query.select(".scrollview").boundingClientRect((data) => {
				uni.getSystemInfo({
					success(res) {
						// 针对iPhone X等机型底部安全距离做适配
						const model = res.model;
						const modelInclude = [
							"iPhone X",
							'iPhone XR',
							"iPhone XS",
							"iPhone XS MAX",
							"iPhone 12/13 mini",
							"iPhone 12/13 (Pro)",
							"iPhone 12/13 Pro Max",
							"iPhone 14 Pro Max"
						];
						let safeDistance = modelInclude.includes(model)
						//动态设置商品区域高度
						if (safeDistance) {
							_this.fullHeight = res.windowHeight - data.top - 50 - 34 + 'px';
						} else {
							_this.fullHeight =res.windowHeight - data.top - 50 + 'px';
						}
					},
				});
			}).exec();

			if (uni.getStorageSync('goods')) {
				this.historyList = JSON.parse(uni.getStorageSync('goods'))
			}
			this.deviceId = o.id;
			this.deviceName = o.deviceName;
		},

		onShow() {
			this.gethomePage()
		},

		methods: {
			search(val) {
				if (val) {
					this.historyList = saveKeyWord('goods', this.keyword)
				}
				this.gethomePage()
			},

			searchFast(e) {
				this.keyword = e
				this.search()
			},


			scanQRCode() {
				uni.scanCode({
					needResult: 1, //默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ["qrCode", "barCode"], //// 可以指定扫二维码还是一维码，默认二者都有
					success: (res) => {
						var result = res.resultStr; //当needResult 为 1 时，扫码返回的结果  获取扫码信息
						this.name = result
						this.gethomePage()
					},
				});
			},

			tabschange(e) {
				this.tabsIndex = e.index
				this.gethomePage()
			},

			addgoods() {
				this.$tab.navigateTo('/pages/equipment/addCom?id=' + this.deviceId)
			},

			addlist() {
				this.$tab.navigateTo('/pages/commodity/commoditylist?id=' + this.deviceId)
			},

			//补货记录
			cper() {
				this.$tab.navigateTo('replenishmentRecord?id=' + this.deviceId)
			},

			//一键满货
			allFull() {
				uni.showModal({
					title: '提示',
					content: '是否确认一键满货',
					success: res => {
						if (res.confirm) {
							for (var i = 0; i < this.goodsList.length; i++) {
								this.goodsList[i].stock = this.goodsList[i].capacity
								this.goodsList[i].newkcrl = true
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			// 一键开柜
			openCabinet() {
				uni.showModal({
					title: '提示',
					content: '是否确认一键开柜',
					success: res => {
						if (res.confirm) {
							saveByOpenDoor({
									"deviceId": this.deviceId
								})
								.then(res => {
									this.workNo = res.data

									this.checkWx()
								})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//效验活动
			checkWx() {
				check({
						"deviceId": this.deviceId,
						"deviceType": 1,
						"door": 0,
						"isRestock": true
					})
					.then(res => {
						this.createOrder(res.data)
					})
			},
			//创建活动
			createOrder(e) {
				create({
					"deviceId": this.deviceId,
					"deviceType": 1,
					"door": 0,
					"payQueryOrderId": "",
					"payType": '',
					"sysType": 1,
					"workNo": this.workNo,
					"workType": 2
				}).then(res => {
					uni.showLoading({
						title: '开门中...'
					});

					setTimeout(function() {
						uni.showToast({
							title: '开门成功',
							duration: 2000
						});
						uni.hideLoading();
					}, 2000);
				}).catch(err => {
					uni.showToast({
						title: JSON.stringify(res),
						duration: 10000
					});
				})
			},

			// 满货
			fullCargo(val) {
				uni.showModal({
					title: '提示',
					content: '是否确认满货',
					success: res => {
						if (res.confirm) {
							for (var i = 0; i < this.goodsList.length; i++) {
								if (this.goodsList[i].goodsId === val.goodsId) {
									this.goodsList[i].stock = val.capacity
									this.goodsList[i].newkcrl = true
								}
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//保存
			keep() {
				var goods = [] //收集提交改动商品参数
				var changeList = [] //收集提交改动商品清单，做提醒结果用
				this.goodsList.forEach(item => {
					if (item.newPrice != null || item.newStock != 0||item.newCapacity!=null) {
						goods.push({
							"deviceGoodsId": item.id,
							"oldStock": item.stock,
							"newStock": Number(item.newStock) + Number(item.stock),
							"oldPrice": item.price,
							"newPrice": item.newPrice,
							"oldCapacity": item.oldCapacity,
							"newCapacity": item.newCapacity,
							"oldWarning": item.warning,
							"newWarning": item.warning,
							"goodsId": item.goodsId,
							"goodsName": item.name
						})

						if (item.newPrice != null) { //改价商品
							changeList.push({
								goodsName: item.name,
								type: 'price',
								oldPrice: item.price,
								newPrice: item.newPrice
							})
						}
						if (item.newStock != 0) { //改库存商品
							changeList.push({
								goodsName: item.name,
								type: 'stock',
								oldStock: item.stock,
								newStock: Number(item.newStock) + Number(item.stock)
							})
						}
						if (item.newCapacity != null) { //改容量商品
							changeList.push({
								goodsName: item.name,
								type: 'capacity',
								oldCapacity: item.capacity,
								newCapacity: item.newCapacity
							})
						}
					}
				})

				this.changeList = JSON.parse(JSON.stringify(changeList))

				if (goods.length == 0) {
					this.$modal.msg('您未对商品做任何改动~')
					return
				}
				uni.showModal({
					title: '提示',
					content: '是否确认保存',
					success: res => {
						if (res.confirm) {
							save({
								id: this.workNo ? this.workNo : '',
								deviceId: this.deviceId,
								goods: goods
							}).then(res => {
								this.showChanged()
								this.clearStorage()
								this.gethomePage()
							}).catch(err => {
								uni.showModal({
									title: '提示',
									content: err,
									success: res => {
										if (res.confirm) {
											console.log('确定')
										}
									}
								})
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			//保存成功,显示改动结果
			showChanged() {
				this.backOpen()
			},

			// 保存成功,清空缓存
			clearStorage() {
				uni.setStorageSync(`replenish:${this.deviceId}`, '')
			},

			backClose() {
				this.backShow = false
			},

			backOpen() {
				this.backShow = true
			},

			//删除
			del(val) {
				this.editHidden()
				let _this = this
				uni.showModal({
					title: '提示',
					content: '是否确认删除',
					success: function(res) {
						if (res.confirm) {
							delGoods({
								"deviceId": _this.deviceId,
								"goodsIds": [val.goodsId]
							}).then(res => {
								_this.gethomePage()
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			gethomePage() {
				supplyPage({
					page: {
						size: -1
					},
					search: this.keyword,
					deviceId: this.deviceId,
					type: this.tabsIndex + 1, //类型
					isRefresh: true
				}).then(res => {
					let deviceInfo = res.data.deviceInfo
					let data = res.data.page.records
					let sto = uni.getStorageSync(`replenish:${this.deviceId}`)
					for (var i = 0; i < data.length; i++) {
						data[i].oldCapacity = data[i].capacity
						data[i].show = false
						data[i].newPrice = null
						data[i].newStock = 0

						// 暂存补货数据
						if (sto && sto != '') {
							let replenishList = JSON.parse(sto);
							replenishList.forEach(j => {
								if (data[i].goodsId === j.goodsId) {
									data[i].newPrice = j.newPrice
									data[i].newStock = j.newStock
								}
							})
						}
					}
					this.deviceInfo = deviceInfo
					this.goodsList = data;
				})
			},

			editGoods(item, index) {
				item.show = true
				this.editIndex = index
				this.editGoodsIndex = index
			},

			editHidden() {
				if (this.editIndex != null) {
					this.goodsList[this.editIndex].show = false
					this.editIndex = null
				}
			},

			sub(item) {
				if (Number(item.stock) + Number(item.newStock) == 0) {
					this.$modal.msg('这个商品没库存啦~')
					return
				}
				item.newStock--
				this.goodsChange()
			},

			sup(item) {
				item.newStock++
				this.goodsChange()
			},

			// 库存调整,设置缓存
			goodsChange(item) {
				//设置缓存
				let newListSto = []
				this.goodsList.forEach(i => {
					if (i.newPrice != null || i.newStock != 0) {
						let obj = {
							goodsId: i.goodsId,
							newPrice: i.newPrice,
							newStock: i.newStock
						}
						newListSto.push(obj)
					}
				})

				uni.setStorageSync(`replenish:${this.deviceId}`, JSON.stringify(newListSto))
			},

			changePrice(item) {
				this.editTitle='修改价格'
				this.editPriceShow = true;
				this.editHidden()
			},
			
			changeCapacity(){
				this.editTitle='修改容量'
				this.editPriceShow = true;
				this.editHidden()
			},

			editPriceClose() {
				this.editPriceShow = false;
			},

			priceSet() {
				if(this.editTitle=='修改价格'){
					if (this.editPrice == null) {
						this.$modal.msg('商品价格不能为空！')
						return
					}
					let reg = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/
					if (!reg.test(this.editPrice)) {
						uni.showToast({
							icon: 'none',
							title: '价格最多保留两位小数！'
						})
						return;
					}
					this.editPriceClose()
					this.goodsList[this.editGoodsIndex].newPrice = this.editPrice * 100
					this.goodsChange() //设置缓存
					
					this.editPrice = null
					this.editGoodsIndex = null
				}else{ //修改容量
					if (this.editCapacity == null) {
						this.$modal.msg('商品容量不能为空！')
						return
					}
					let reg = /^([0-9]*)$/
					if (!reg.test(this.editCapacity)) {
						uni.showToast({
							icon: 'none',
							title: '容量必须为整数！'
						})
						return;
					}
					this.editPriceClose()
					this.goodsList[this.editGoodsIndex].newCapacity = this.editCapacity
					this.goodsChange() //设置缓存
					
					this.newCapacity = null
					this.editGoodsIndex = null
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: #eee;
	}
</style>
<style scoped lang="scss">
	.container {
		height: 100vh;
		background-color: #F4F4F4;
		position: static;

		.machine-box {
			width: 750rpx;
			height: 74rpx;
			font-size: 32rpx;
			line-height: 58rpx;
			text-align: center;
			background: #2C6FF3;
			color: #fff;
			border-radius: 0px 0px 50rpx 50rpx;
		}

		.top-wrap {
			background: linear-gradient(0deg, #D7D7D7, #FFFFFF);
		}

		.tab-wrap {
			background-color: #fff;
			padding-left: 30rpx;

			.tab {
				width: 60%;
			}
		}

		.search-container {
			padding: 26rpx 13rpx 26rpx;
			background-color: #fff;
			position: relative;

			.scan-icon {
				position: absolute;
				right: 36rpx;
				top: 38rpx;
				z-index: 2;
			}

			.search-history {
				.history-tips {
					font-size: 24rpx;
					color: #333333;
					line-height: 40rpx;
					margin-right: 10rpx;
					margin-top: 24rpx;
				}

				.history-item {
					margin-right: 10rpx;
					padding: 0 13rpx;
					background: #F6F8FB;
					color: #333;
					font-size: 24rpx;
					line-height: 40rpx;
					border-radius: 40rpx;
					margin-top: 24rpx;
				}
			}
		}

		.btns {
			background-color: #fff;
			padding: 20rpx 13rpx 20rpx;
		}

		.empty {
			margin-top: 120rpx
		}

		.active {
			background-color: #2C6FF3;
			color: #fff;
		}

		.marleft {
			margin-left: 10rpx;
		}

		.martop {
			margin-top: 20rpx;
		}

		.scrollview {
			padding-top: 10rpx;
		}

		.goods-box {
			width: 724rpx;
			margin-left: 13rpx;
			background-color: #fff;
			box-shadow: 0px 0px 10px 0px rgba(174, 201, 255, 0.2);
			border-radius: 14rpx;
			padding: 28rpx 12rpx 22rpx;
			position: relative;

			.edit-box {
				width: 180rpx;
				background-color: #fff;
				font-size: 30rpx;
				text-align: center;
				line-height: 60rpx;
				padding: 10rpx 0;
				box-shadow: 0px 0px 10px 0px rgba(174, 201, 255, 0.2);
				position: absolute;
				right: 20rpx;
				bottom: -120rpx;
				z-index: 99999;
			}

			&+.goods-box {
				margin-top: 10rpx;
			}

			.image {
				margin-right: 35rpx;
				height: 120rpx;
				width: 120rpx;
			}

			.goods-content {
				position: relative;

				.goods-name-price {
					.goods-name {
						font-size: 28rpx;
						font-weight: 800;
						color: #333333;
						line-height: 34rpx;
					}

					.goods-price {
						font-size: 32rpx;
						line-height: 32rpx;
						font-weight: 800;
						color: #FF0000;
						margin-right: 10rpx;
					}
				}

				.goods-stock {
					font-size: 26rpx;
					font-weight: 500;
					color: #555555;
					line-height: 26rpx;
					margin-top: 30rpx;
				}

				.btn-input {
					margin-top: 18rpx;

					.btn-input-left {
						font-size: 26rpx;
					}

					.btn-input-right {
						justify-content: flex-end;
						margin-left: 50rpx;

						>image {
							width: 56rpx;
							height: 56rpx;
						}

						>input {
							width: 100rpx;
							height: 56rpx;
							line-height: 56rpx;
							border: 2rpx solid #2C6FF3;
							border-radius: 10rpx;
							text-align: center;
							margin: 0 50rpx;
						}
					}
				}

				.edit-goods {
					width: 56rpx;
					height: 56rpx;
					position: absolute;
					right: 10rpx;
					bottom: 0;
				}
			}
		}

		.pop-content {
			padding: 24rpx;
		}

		.bottom-btn {
			width: 100%;
			position: fixed;
			bottom: 0;
			right: 0;
			left: 0;
			background-color: #fff;
			height: calc(98rpx + env(safe-area-inset-bottom) / 2);
			padding-bottom: calc(env(safe-area-inset-bottom) / 2);
			box-shadow: 0px -2px 10px 0px rgba(174, 201, 255, 0.2);
			z-index: 999;
		}

		.scroll-content {
			padding-bottom: calc(160rpx + env(safe-area-inset-bottom) / 2);
		}

		.bottom-view {
			display: flex;
			flex-direction: column;
			flex: 1;
			text-align: center;
			align-items: center;
		}

		.bottom-image {
			height: 48rpx;
			width: 48rpx;
		}

		.bottom-text {
			font-size: 22rpx;
			line-height: 22rpx;
			margin-top: 8rpx;
		}

		.save {
			position: fixed;
			right: 15rpx;
			bottom: 120rpx;
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
			background-color: #f6d232;

			image {
				width: 80rpx;
			}
		}

		.bg {
			position: fixed;
			width: 100%;
			height: 100vh;
			z-index: 99998;
			left: 0;
			top: 0;
		}

		.back-pop-content {
			width: 700rpx;
			padding: 24rpx;
			line-height: 50rpx;

			>view {
				font-size: 30rpx;

				>view {
					display: inline-block;
				}

				>view:nth-child(1) {
					width: 270rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				>view:nth-child(2) {
					margin-left: 24rpx;
				}

				>view:nth-child(3) {
					color: #38fb58;
					margin-left: 24rpx;
					margin-right: 24rpx;
					width: 50rpx;
				}

				>view:nth-child(5) {
					color: #ef9840;
					margin-left: 24rpx;
					width: 50rpx;
				}
			}

			.back-price {

				>view:nth-child(2) {
					color: #2C6FF3;
				}
			}

			.back-stock {
				>view:nth-child(2) {
					color: #ff67bd;
				}
			}
			
			.back-capacity{
				>view:nth-child(2) {
					color: #ff5500;
				}
			}
		}
	}
</style>