<template>
	<div class="content">
		<div class="goodsCard acea-row row-between">
			<div class="conter">
				<div class="cart">
					<div :style="'height:' + 100 + '%'" class="acea-row">
						<div class="acea-row row-between row-bottom cart-left">
							<div class="left-top">
								<div v-if="checkOut == 0" class="cart">
									<div v-if="userInfo" class="title acea-row row-middle">
										<div class="picture" @click="getUserDetail">
											<img :src="userInfo.avatar" />
										</div>
										<div class="text">
											<div class="textCon line1">
												<div class="text-wrap">
													<div class="name-wrap">
														<span class="name">{{ userInfo.nickname }}</span>
														<span v-if="userInfo.phone"
															class="phone mr10">手机号：{{ userInfo.phone }}</span>
													</div>
												</div>
												<Dropdown class="switchs" trigger="click"
													@on-click="changeMenu($event)">
													<a href="javascript:void(0)">
														切换会员
														<Icon type="ios-arrow-down"></Icon>
													</a>
													<DropdownMenu slot="list">
														<DropdownItem name="1">选择用户</DropdownItem>
														<DropdownItem name="2">游客</DropdownItem>
													</DropdownMenu>
												</Dropdown>
											</div>
											<div v-if="userInfo.uid" class="user-msg">
												<span class="balance">积分<span class="num">{{
                            userInfo.integral
                          }}</span></span>
												<span class="balance">余额<span class="num">{{
                            userInfo.now_money
                          }}</span></span>
											</div>
										</div>
									</div>
									<div class="count">
										<div class="cart-sel">
											已选购<span class="num">{{ cartSum }}</span>件
										</div>
										<div class="count-r">
											<!--                      <span class="coupon" @click="couponTap">优惠券</span>-->
											<span class="clear" @click="delAll">
												<img alt="" src="../../assets/images/clear.png" />
												清空</span>
										</div>
									</div>
									<div class="listCon">
										<div v-if="cartList.length" class="list">
											<div v-for="(data, proindex) in cartList" :key="proindex + 'data'"
												class="promotions">
												<div v-for="(pro, index) in data.promotions" :key="index + 'pro'"
													class="promotions-msg">
													<div class="flex-1">
														<span class="card">{{ pro.title }}</span>
														<span class="desc">{{ pro.desc }}</span>
													</div>
												</div>
												<div v-for="(item, indexs) in data.cart" :key="indexs + 'car'"
													:class="{ is_give: item.is_gift }" class="item acea-row row-middle">
													<div class="picture">
														<img v-if="item.productInfo.attrInfo"
															:src="item.productInfo.attrInfo.image" />
														<img v-else :src="item.productInfo.image" />
													</div>
													<div v-if="!item.is_gift" class="text">
														<div class="name line1">
															{{ item.productInfo.store_name }}
														</div>
														<div class="sum_price">¥ {{ item.sum_price }}</div>
													</div>
													<div v-else class="text">
														<div class="give-name line1">
															{{ item.productInfo.store_name }}
														</div>
														<div class="give-info">赠品</div>
													</div>
													<div v-if="!item.is_gift" class="del"
														@click="delCart(item, proindex, indexs, 'cart')">
														删除
													</div>
													<div>
														<span>x{{ item.cart_num }}</span>
													</div>
												</div>
											</div>
										</div>
										<div v-if="invalidList.length" class="list promotions">
											<div v-for="(item, index) in invalidList" :key="index"
												class="item acea-row row-middle">
												<div class="picture">
													<img v-if="item.productInfo.attrInfo"
														:src="item.productInfo.attrInfo.image" />
													<img v-else :src="item.productInfo.image" />
												</div>
												<div class="text invalid">
													<div class="name line1">
														{{ item.productInfo.store_name }}
													</div>
													<div v-if="item.productInfo.attrInfo" class="info">
														<div class="suk line1">
															{{ item.productInfo.attrInfo.suk }}
														</div>
														<span class="iconfont iconxiayi"></span>
													</div>
													<div v-else class="info">默认</div>
													<div class="end">该商品已失效</div>
												</div>
												<div class="del" @click="delCart(item, index, 1, 'inv')">
													删除
												</div>
											</div>
										</div>
										<div v-if="!invalidList.length && !cartList.length"
											class="noCart acea-row row-center-wrapper">
											<div>
												<div class="picture">
													<img src="@/assets/images/no-cart.png" />
												</div>
												<div class="tip">暂无商品，快去添加吧～</div>
											</div>
										</div>
									</div>
									<div class="footer">
										<div class="left">
											<div class="conInfo">
												<div class="right">
													<div class="storeBnt-wrap">
													</div>
													<div class="discount">
														优惠: ¥{{
                              this.$computes.Sub(
                                priceInfo.sumPrice || 0,
                                priceInfo.payPrice || 0
                              ) || 0
                            }}
													</div>
													<div v-if="cartList.length" class="detailed" @click="discountCon">
														明细
													</div>
													<span class="discount">实付: </span>
													<span class="rmb">¥</span>
													<span class="num">{{
                            cartSum && priceInfo.payPrice ? priceInfo.payPrice : 0
                          }}</span>
												</div>
											</div>
										</div>
										<div class="footer-bottom">
											<Button :disabled="!cartList.length" @click="openSettle">立即结账</Button>
										</div>
									</div>
								</div>
								<div class="btn-group-vertical">
									<Button :disabled="!userInfo.uid" @click="rechargeBnt">充值</Button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="goods">
				<div class="acea-row" style="height: 100%">
					<div class="goodsCon">
						<div class="goods-top">
							<div ref="listWrap" class="list-wrap" @scroll="pageChange">
								<Row v-if="goodData.length && (goodFrom.cate_id !== '99999')"
									:gutter="15" class="list">
									<Col v-for="(item, index) in goodData" :key="index" :sm="12" :md="12" :lg="12"
										:xl="8" :xxl="4">
									<div :class="{ on: item.stock }" class="item"
										@click="!item.cart_num?attrTap(item):''">
										<div :style="{ height: goodsHeight + 'px' }" class="picture">
											<img :src="item.image" alt="商品图" style="width: 100%;" />
										</div>
										<div class="name line1">
											{{ item.store_name || item.title }}
										</div>
										<div class="text">
											<div class="text-left">
												<div class="money">
													<span class="rmb">¥</span>{{ item.price }}
												</div>
											</div>
											<!-- <div v-if="item.cart_num && cartList.length" class="icon-cart-num">
												{{ item.cart_num > 99 ? "99+" : item.cart_num }}
											</div> -->
											<div v-if="!item.stock && !item.cart_num" class="no-stock">
												<div class="trip">
													<div>暂无</div>
													<div>库存</div>
												</div>
											</div>
										</div>
									</div>
									</Col>
								</Row>
								<div v-else class="noGood acea-row row-center-wrapper">
									<div>
										<div class="picture">
											<img :src="
                        require(`@/assets/images/${
                          goodFrom.cate_id == '99999'
                            ? 'no-active.png'
                            : 'no-goods.png'
                        }`)
                      " />
										</div>
										<div class="tip">
											{{
                      goodFrom.cate_id === "99999"
                        ? "暂无活动，敬请期待～"
                        : "暂无商品，先看看别的吧～"
                    }}
										</div>
									</div>
								</div>
							</div>
							<!-- </Scroll> -->
						</div>
					</div>
				</div>
			</div>
		</div>
		<Modal v-model="modalUser" :mask-closable="false" :scrollable="true" closable footer-hide title="用户列表"
			width="950" class-name="user-modal">
			<userList v-if="modalUser" ref="users" :uid="userInfo.uid || 0" @getUserId="getUserId"></userList>
		</Modal>
		<settleDrawer v-model="settleVisible" :list="payList" :type="payType" :money="settleMoney" @close='cancel'
			:collection="collection" :verify="yueVerify" :z-index="zIndex" @payPrice="payPrice" @numTap="numTap"
			@delNum="delNum" @cashBnt="cashBnt"></settleDrawer>
		<recharge ref="recharge" v-model="rechargeVisible" :userInfo="userInfo" @getSuccess="getSuccess"
			@recharge="onRecharge"></recharge>
		<storeList ref="store" :storeInfo="storeInfos" @getStoreId="getStoreId" @getUserInfo="getUserInfo"></storeList>
		<Modal v-model="discount" footer-hide title="优惠明细" width="400">
			<div class="discountCon">
				<div class="item acea-row row-between-wrapper">
					<div>订单原价</div>
					<div>￥{{ priceInfo.sumPrice || 0 }}</div>
				</div>
				<div class="item acea-row row-between-wrapper">
					<div>会员优惠金额：</div>
					<div>￥{{ priceInfo.vipPrice || 0 }}</div>
				</div>
				<div class="item acea-row row-between-wrapper">
					<div>优惠券金额：</div>
					<div>￥{{ priceInfo.couponPrice || 0 }}</div>
				</div>
				<div class="item acea-row row-between-wrapper">
					<div>积分抵扣：</div>
					<div>￥{{ priceInfo.deductionPrice || 0 }}</div>
				</div>
				<div v-for="(item, index) in priceInfo.promotionsDetail" :key="index"
					class="item acea-row row-between-wrapper">
					<div>{{ item.title }}：</div>
					<div>￥{{ item.promotions_price || 0 }}</div>
				</div>
			</div>
		</Modal>
		<Modal v-model="userInfoShow" class-name="vertical-center-modal" footer-hide title="是否切换此用户" width="340">
			<div class="search_user_info">
				<div class="picture">
					<img :src="modalUserInfo.avatar" alt="" />
				</div>
				<p class="user_name">{{ modalUserInfo.real_name }}</p>
				<p class="user_id">ID:{{ modalUserInfo.uid }}</p>
				<p class="user_phone">手机号：{{ modalUserInfo.phone }}</p>
				<div class="sure_btn" @click="checkUser()">确定</div>
			</div>
		</Modal>
		<!-- 会员详情-->
		<user-details ref="userDetails" @operation="operation"></user-details>
	</div>
</template>

<script>
	import userList from "@/components/userList";
	import storeList from "@/components/storeList";
	import recharge from "@/components/recharge";
	import userDetails from "@/components/userDetail/userDetails";
	import settleDrawer from "@/components/settleDrawer";
	import "../../assets/js/core.js";
	import {
		cashierProduct,
		cashierCate,
		cashierUser,
		cashierCode,
		cashierCart,
		cashierDetail,
		cashierCartList,
		cashierCartNum,
		cashierchangeCart,
		cashierCartDel,
		cashierCompute,
		cashierCreate,
		cashierPay,
		postCashierSwitch,
		postCashierHang,
		getHangList,
		getHang,
		cashierHang,
		cashierGetAttr,
		swithUser
	} from "@/api/order";
	import {
		checkOrderApi,
		getUserInfo,
		userSaveApi
	} from "@/api/user";
	import {
		activityList,
		activityTypeList
	} from "@/api/product";
	import Setting from '@/setting';

	export default {
		name: "index",
		components: {
			userList,
			storeList,
			recharge,
			userDetails,
			settleDrawer,
		},
		data() {
			return {
				formItem: {
					price: 0,
				},
				discountPrice: 100,
				loading: false,
				cashBntLoading: false,
				activeHangon: -1,
				checkOut: 0,
				modalUser: false,
				flag: true,
				goodFrom: {
					store_name: "",
					field_key: "all",
					cate_id: "",
					service_card:1,
					page: 1,
					limit: 20,
					uid: 0,
					staff_id: 0,
				},
				total: 0,
				goodData: [],
				codeNum: "",
				payNum: "",
				userInfo: {},
				storeInfos: {}, //门店店员信息
				storeList: [], //门店列表
				attr: {
					productAttr: [],
					productSelect: {},
				},
				storeInfo: {}, //商品信息
				productValue: [],
				attrValue: "", //已选属性
				productId: 0, //产品id
				cartList: [],
				isCart: 0,
				cartInfo: {
					//更改属性所需参数
					cart_id: 0,
					product_id: 0,
					unique: "",
				},
				modal: false,
				fapi: {},
				cartSum: 0,
				priceInfo: {},
				createOrder: {
					remarks: "",
					change_price: 0,
					cart_id: [], // 购物车id
					userCode: "",
					is_price: 0,
					auth_code: "",
				},
				modalCash: false,
				numList: ["7", "8", "9", "4", "5", "6", "1", "2", "3", "0", "."],
				collectionArray: [],
				collection: 0,
				isOrderCreate: 0,
				discount: false,
				payType: "", // 支付方式
				orderId: "", //订单id
				goodsHeight: 0,
				invalidList: [],
				defaultcalc: false,
				orderSystem: {
					loadingMsg: null,
					timer: null,
				},
				disabled: false, //阻止属性弹窗多次提交
				unchangedPrice: 0,
				cumping: false, //加减节流
				modalUserInfo: {}, //搜索出来的用户信息
				userInfoShow: false, //扫码枪搜索用户弹窗状态
				settleVisible: false,
				payList: [{
						label: '微信/支付宝',
						value: '',
						status: true,
					},
					{
						label: '现金收款',
						value: 'cash',
						status: true,
					},
					{
						label: '余额收款',
						value: 'yue',
						status: true,
					},
				],
				rechargeVisible: false,
				settleMoney: 0,
				yueVerify: false,
				rechargeData: {},
				zIndex: 9999,
				endTimeout: ''
			};
		},
		watch: {
			goodData(value) {
				this.$nextTick(() => {
					if (value.length) {
						this.goodsHeight = this.$refs.listWrap.querySelector('.picture').clientWidth;
					}
				});
			}
		},
		created() {
			let clientWidth = document.documentElement.clientWidth;
			let pageLimt;
			if (clientWidth > 2260) {
				pageLimt = 30;
			} else if (clientWidth > 1580) {
				pageLimt = 30;
			} else if (clientWidth > 1270) {
				pageLimt = 30;
			} else {
				pageLimt = 30;
			}
			this.goodFrom.limit = pageLimt;
			this.userInfo = JSON.parse(window.localStorage.getItem("cashierUser")) || {};
			if (!this.userInfo.uid) {
				this.setUp();
			}
			console.log(this.$route.query)
			if (this.$route.query.uid || this.$route.query.tourist_uid) {
				let uid = this.$route.query.uid,
					touristId = this.$route.query.tourist_uid,
					staffId = this.$route.query.staff_id,
					index = this.$route.query.index;
				this.checkOut = 0;
				this.activeHangon = index;
				this.storeInfos.id = staffId;
				let data = {
					uid,
				};
				if (uid != 0) {
					this.userInfoData(data, true);
					this.getSwithUser(data);
				} else {
					this.setUp(touristId, true);
					if (touristId) {
						this.getSwithUser({
							tourist_uid: touristId
						});
					}
				}
			} else if (this.userInfo.uid) {
				this.getSwithUser({
					uid: this.userInfo.uid
				})
			} else if (this.userInfo.touristId) {
				console.log(this.userInfo.touristId)
				this.getSwithUser({
					tourist_uid: this.userInfo.touristId
				})
			}
		},
		methods: {
			reloadList() {
				this.reloading = true;
				this.limitTemp = this.goodFrom.limit;
				this.goodFrom.limit *= this.goodFrom.page;
				this.goodFrom.page = 1;
			},
			getSwithUser(data) {
				swithUser(data).then(res => {}).catch(err => {
					this.$Message.error(err.msg);
				})
			},
			// 打开硬件收银台钱箱
			jsToJava() {
				try {
					window.Jsbridge.invoke('openCacheBox', JSON.stringify({
						'p1-key': 'p1-value'
					}), this.myFunction());
				} catch (e) {
					console.log(e);
				}
			},
			myFunction() {
				console.log('myFunction called222');
			},
			tapPrice() {
				this.formItem.price = Number(this.formItem.price.toFixed(2));
				let num = this.$computes.Div(
					this.formItem.price || 0,
					this.unchangedPrice || 0
				);
				this.discountPrice = Number((num * 100).toFixed(2)) || 0;
			},
			cancelPrice() {
				this.formItem.price = this.priceInfo.payPrice || 0;
				this.tapPrice();
			},
			getSuccess(e) {
				let money = this.$computes.Add(this.userInfo.now_money, e);
				this.userInfo.now_money = money;
				let storage = window.localStorage;
				storage.setItem("cashierUser", JSON.stringify(this.userInfo));
			},
			clear() {
				this.priceInfo.couponPrice = 0;
				this.priceInfo.payPrice = 0;
				this.priceInfo.deductionPrice = 0;
				this.priceInfo.totalPrice = 0;
				this.priceInfo.vipPrice = 0;
				this.priceInfo.sumPrice = 0;
				this.cartList = [];
				this.cartSum = 0;
				this.collection = 0;
				this.collectionArray = [];
				this.createOrder.change_price = 0;
				this.createOrder.remarks = "";
				this.createOrder.is_price = 0;
				this.goodFrom.cate_id = "";
			},
			// 关闭支付弹窗
			cancel() {
				this.collection = 0;
				this.collectionArray = [];
				this.defaultcalc = false
			},
			defaultSel(type) {
				let uid = this.userInfo.uid;
				let touristId = this.userInfo.touristId;
				if (uid) {
					let flag = 0;
					this.hangData.forEach((item, index) => {
						if (item.uid == uid) {
							flag = 1;
							this.activeHangon = index;
						}
					});

					if (!flag) {
						this.activeHangon = -1;
					}
				} else if (touristId) {
					this.activeHangon = -1;
					this.hangData.forEach((item, index) => {
						if (item.tourist_uid == touristId) {
							this.activeHangon = index;
						}
					});
					if (this.activeHangon == -1) {
						this.activeHangon = 0;
						this.userInfo.touristId = this.hangData[0].tourist_uid;
						this.getSwithUser({
							tourist_uid: this.userInfo.touristId
						})
					}
				}
			},
			// 充值
			rechargeBnt() {
				this.rechargeVisible = true;
			},
			//点击出现优惠明细
			discountCon() {
				this.discount = true;
			},
			//现金收款创建订单并支付
			cashBnt(payNum) {
				if (this.cashBntLoading) return;
				this.cashBntLoading = true;
				this.payNum = payNum
				if (this.isOrderCreate) {
					this.getCashierPay("cash");
				} else {
					console.log(this.rechargeVisible, 'rechargeVisible')
					if (this.rechargeVisible) {
						this.rechargeBalance(payNum);
					} else {
						this.orderCreate(payNum);
					}
				}
				setTimeout(() => {
					this.cashBntLoading = false;
				}, 1000);
			},
			//清除计算机输入的数字
			delNum(type) {
				if (type === -1) {
					this.collectionArray = [];
				} else {
					this.collectionArray.pop();
				}
				this.collection = this.collectionArray.length ?
					this.collectionArray.join("") :
					0;
			},
			//输入实际收款金额
			numTap(item) {
				console.log('进入', this.defaultcalc);
				if (this.defaultcalc === false) {
					this.collection = "";
					this.defaultcalc = true;
				}
				let x = String(this.collection).indexOf(".") + 1;
				let y = String(this.collection).length - x;
				console.log(x, y);
				if (x === 0 || y < 2) {
					if (this.collectionArray.join("") <= 9999999) {
						this.collectionArray.push(item);
					}
					this.collection =
						this.collectionArray.join("") > 99999999 ?
						99999999 :
						this.collectionArray.join("");
				}
			},
			checkOrderTime(msg) {
				let that = this;
				let num = 1;
				let timer = (this.orderSystem.timer = setInterval(function() {
					that.confirmOrder(timer, msg);
					num++;
					if (num >= 60) {
						clearInterval(timer);
						msg();
						that.isOrderCreate = 1;
						that.$Message.success("支付失败");
					}
				}, 1000));
			},
			confirmOrder(timer, msg) {
				let data = {
					order_id: this.orderId,
				};
				checkOrderApi(3, data)
					.then((res) => {
						if (res.data.status == true) {
							msg();
							clearInterval(timer);
							this.isOrderCreate = 0;
							this.$Message.success("支付成功");
							this.goodList();
							let storage = window.localStorage;
							storage.setItem("cashierUser", JSON.stringify(this.userInfo));
							this.clear();
						}
					})
					.catch((err) => {
						msg();
						this.$Message.error(err.msg);
					});
			},
			payPrice(payType) {
				console.log(this.payType, payType)
				this.payType = payType;
				if (payType == "" || payType == "yue") {
					this.createOrder.userCode = "";
					this.createOrder.auth_code = "";
				} else if (payType == "cash") {
					this.keyboard();
				}
				this.createOrder.integral = this.integral;
				this.createOrder.coupon = this.coupon;
				this.createOrder.coupon_id = this.couponId;
				if (this.coupon && !this.couponId)
					return this.$Message.error("请选择有效优惠券");
				this.createOrder.pay_type = payType;
				this.createOrder.staff_id = this.storeInfos.id;
				// this.fapi.resetFields();
			},
			getCashierPay(payType) {
				let data = {
					payType: payType,
					userCode: this.payNum,
					auth_code: this.payNum,
				};
				if (payType == "cash") {
					if (parseFloat(this.priceInfo.payPrice) > parseFloat(this.collection)) {
						return this.$Message.error("您付款金额不足");
					}
				}
				cashierPay(this.orderId, data)
					.then((res) => {
						this.payNum = "";
						if (res.data.status == "SUCCESS") {
							this.isOrderCreate = 0;
							this.$Message.success("支付成功");
							this.modalCash = false;
							let storage = window.localStorage;
							storage.setItem("cashierUser", JSON.stringify(this.userInfo));
							this.clear();
							this.goodList();
							//现金收款打开钱箱
							if (payType == "cash") {
								this.jsToJava();
							}
						} else if (res.data.status == "PAY_ING") {
							let msg = this.$Message.loading({
								content: "等待支付中...",
								duration: 0,
							});
							this.orderSystem.loadingMsg = msg;
							this.orderId = res.data.order_id;
							this.checkOrderTime(msg);
							// this.confirmOrder();
						} else {
							this.isOrderCreate = 1;
							this.orderId = res.data.order_id;
							this.$Message.error(res.data.message);
						}
					})
					.catch((err) => {
						this.payNum = "";
						this.$Message.error(err.msg);
					});
			},

			// 创建订单
			orderCreate(payNum) {
				if (this.payType == "cash") {
					if (parseFloat(this.priceInfo.payPrice) > parseFloat(this.collection)) {
						return this.$Message.error("您付款金额不足");
					}
				}
				this.createOrder.tourist_uid = this.userInfo.touristId;
				if (this.payType == "") {
					this.createOrder.auth_code = payNum
				}
				if (this.payType=='yue') {
					this.createOrder.userCode=payNum
				}
				cashierCreate(this.userInfo.uid, this.createOrder)
					.then((res) => {
						console.log(res, '返回res')
						let storage = window.localStorage;
						this.payNum = "";
						if (this.payType == "yue") {
							this.settleVisible = false;
							this.payNum = "";
							this.createOrder.userCode = "";
							if (res.data.status == "ORDER_CREATE") {
								this.isOrderCreate = 1;
								this.orderId = res.data.order_id;
								this.$Message.success(res.data.message);
							} else if (res.data.status == "SUCCESS") {
								this.isOrderCreate = 0;
								this.$Message.success("支付成功");
								let money = this.$computes.Sub(
									this.userInfo.now_money,
									this.priceInfo.payPrice
								);
								this.userInfo.now_money = money;
								storage.setItem("cashierUser", JSON.stringify(this.userInfo));
								this.clear();
							} else {
								this.isOrderCreate = 1;
								this.orderId = res.data.order_id;
								this.$Message.error(res.data.message);
							}
						}
						if (this.payType == "cash") {
							if (res.data.status == "SUCCESS") {
								this.$Message.success("支付成功");
								// storage.removeItem("cashierUser");
								// this.userInfo = null;
								if (this.userInfo.uid) {}
								storage.setItem("cashierUser", JSON.stringify(this.userInfo));
								this.settleVisible = false;
								this.clear();
								this.jsToJava();
							}
						}
						if (this.payType == "") {
							console.log('支付')
							this.payNum = "";
							this.createOrder.auth_code = "";
							if (res.data.status == "ORDER_CREATE") {
								console.log('支付1')
								this.isOrderCreate = 1;
								console.log('支付23')
								this.orderId = res.data.order_id;
								console.log('支付22')
								this.$Message.success(res.data.message);
								console.log('支付2')
							} else if (res.data.status == "PAY_ING") {
								let msg = this.$Message.loading({
									content: "等待支付中...",
									duration: 0,
								});
								this.orderId = res.data.order_id;
								this.checkOrderTime(msg);
							} else if (res.data.status == "SUCCESS") {
								this.$Message.success("支付成功");
								storage.setItem("cashierUser", JSON.stringify(this.userInfo));
								this.settleVisible = false;
								this.clear();
							} else {
								this.isOrderCreate = 1;
								this.orderId = res.data.order_id;
								this.$Message.error(res.data.message);
							}
						}
					})
					.catch((err) => {
						console.log(err, 'err')
						this.payNum = "";
						this.$Message.error(err.msg);
					});
			},
			// 计算金额
			cartCompute(cartId) {
				let ids = [];
				if (cartId) {
					ids = [cartId];
				} else {
					if (!this.cartList.length) {
						this.priceInfo = {};
						return;
					}
					this.cartList.forEach((item) => {
						item.cart.forEach((good) => {
							ids.push(good.id);
						});
					});
				}
				this.createOrder.cart_id = ids;
				let data = {
					integral: this.integral,
					coupon: this.coupon,
					coupon_id: this.couponId,
					cart_id: ids,
				};
				if (cartId) {
					data.new = 1;
				}
				cashierCompute(this.userInfo.uid, data)
					.then((res) => {
						this.priceInfo = res.data;
						this.unchangedPrice = this.priceInfo.payPrice || 0;
						this.formItem.price = this.priceInfo.payPrice || 0;
						this.tapPrice();
						if (cartId) {
							this.openSettle();
						}
					})
					.catch((err) => {
						this.$Message.error(err.msg);
						this.coupon = false;
					});
			},
			changePrice() {
				this.modal2 = true;
			},
			// 删除
			del(ids, type, index, num, name) {
				this.$Modal.confirm({
					title: "删除该购物车",
					content: "<p>确定要删除该购物车吗？</p><p>删除该购物车后将无法恢复，请谨慎操作！</p>",
					onOk: () => {
						cashierCartDel(this.userInfo.uid, ids)
							.then((res) => {
								this.$Message.success("删除成功");
								this.reloadList();
								this.goodList();
								if (type) {
									this.clear();
									this.invalidList = [];
								} else {
									if (name == "inv" && num) {
										this.invalidList.splice(index, 1);
									} else {
										this.cartList[index].cart.splice(num, 1);
										if (this.cartList.length) {
											this.getCartList();
										} else {
											this.clear();
										}
									}
									// this.cartSum = this.cartSum - 1;
								}
							})
							.catch((err) => {
								this.$Message.error(err.msg);
							});
					},
					onCancel: () => {},
				});
			},
			delAll() {
				let ids = [];
				if (!this.cartList.length && !this.invalidList.length)
					return this.$Message.warning("购物车暂无商品");
				this.cartList.forEach((item) => {
					item.cart.forEach((good) => {
						ids.push(good.id);
					});
				});

				this.getSwithUser({
					chang_cart_remove: 1
				});

				this.invalidList.forEach((item) => {
					ids.push(item.id);
				});
				this.del({
						ids: ids,
					},
					1
				);
			},
			delCart(item, index, num, type) {
				let ids = [];
				ids.push(item.id);
				this.del({
						ids: ids,
					},
					0,
					index,
					num,
					type
				);
			},
			// 加入购物车
			joinCart(num, item) {
				let that = this;
				if (num) {
					let productSelect = that.productValue[this.attrValue];
					//如果有属性,没有选择,提示用户选择
					if (that.attr.productAttr.length && productSelect === undefined) {
						return this.$Message.warning("产品库存不足，请选择其它");
					}
				}

				if (this.activeHangon == -1) this.activeHangon = 0;
				// let uid = this.userInfo.uid;
				let uid = this.userInfo.uid || 0;
				let data = {
					productId: this.productId,
					cartNum: 1,
					uniqueId: num ?
						this.attr.productSelect !== undefined ?
						this.attr.productSelect.unique :
						"" : "",
					staff_id: this.storeInfos.id,
					tourist_uid: this.userInfo.touristId,
					new: 0,
					ServiceCardId: item.service_card
				};
				cashierCart(uid, data)
					.then((res) => {
						this.$Message.success("添加购物车成功");
						this.getCartList();
						//如果是扫码查询商品摒弃直接加入购物车的情况下，在加入购物车成功以后，清空输入框的内容，重新请求列表
						this.goodFrom.store_name = "";
						this.reloadList();
						this.goodList();
						this.disabled = true;
					})
					.catch((err) => {
						this.$Message.error(err.msg);
					});
			},
			// 获取用户详情
			getUserDetail() {
				if (this.userInfo.uid) {
					this.$refs.userDetails.modals = true;
					this.$refs.userDetails.activeName = "info";
					this.$refs.userDetails.getDetails(this.userInfo.uid);
				}
			},
			// 购物车列表
			getCartList() {
				let uid = this.userInfo.uid;
				let staffId = this.storeInfos.id;
				if (uid >= 0) {
					let data = {
						tourist_uid: this.userInfo.touristId
					};
					cashierCartList(uid, staffId, data)
						.then((res) => {
							this.cartList = res.data.valid;
							this.invalidList = res.data.invalid;
							this.cartSum = res.data.count;
							if (res.data.valid.length) {
								this.cartCompute();
							} else {
								this.clear();
							}
						})
						.catch((err) => {
							this.$Message.error(err.msg);
						})
						.finally((e) => {
							this.cumping = false;
						});
				} else {
					this.$Message.error("请添加或选择用户");
				}
			},
			// 选择属性
			attrTap(item) {
				console.log(item, 'item');
				this.disabled = false;
				if (this.userInfo && this.userInfo.uid >= 0) {
					this.productId = item.product_id;
					console.log(this.productId)
					if (!item.stock) return this.$Message.error("暂无库存");
					console.log(item);
					this.joinCart(0, item);

				} else {
					this.$Message.error("请添加或选择用户");
				}
			},
			// 商品详情
			goodsInfo(id) {
				cashierDetail(id, this.userInfo.uid)
					.then((res) => {
						let data = res.data;
						this.storeInfo = data.storeInfo;
						this.productValue = data.productValue;
						this.$set(this.attr, "productAttr", data.productAttr);
						this.DefaultSelect();
					})
					.catch((err) => {
						this.$Message.error(err.msg);
					});
			},
			// 商品详情
			cashierGetAttr(id) {
				cashierGetAttr(id, this.userInfo.uid)
					.then((res) => {
						let data = res.data;
						this.storeInfo = data.storeInfo;
						this.productValue = data.productValue;
						this.$set(this.attr, "productAttr", data.productAttr);
						this.DefaultSelect();
					})
					.catch((err) => {
						this.$Message.error(err.msg);
					});
			},
			/**
			 * 默认选中属性
			 *
			 */
			DefaultSelect: function() {
				let productAttr = this.attr.productAttr;
				let value = [];
				for (var key in this.productValue) {
					if (this.productValue[key].stock > 0) {
						value = this.attr.productAttr.length ? key.split(",") : [];
						break;
					}
				}
				//isCart 1为触发购物车 0为商品
				if (this.isCart) {
					//购物车默认打开时，随着选中的属性改变
					let attrValue = [];
					// this.cartList.forEach((res) => {
					//   if (res.id == this.cartInfo.cart_id) {
					//     attrValue = res.productInfo.attrInfo.suk.split(",");
					//   }
					// });
					this.cartList.forEach((item) => {
						item.cart.forEach((res) => {
							if (res.id == this.cartInfo.cart_id) {
								attrValue = res.productInfo.attrInfo.suk.split(",");
							}
						});
					});
					for (let i = 0; i < productAttr.length; i++) {
						this.$set(productAttr[i], "index", attrValue[i]);
					}
				} else {
					for (let i = 0; i < productAttr.length; i++) {
						this.$set(productAttr[i], "index", value[i]);
					}
				}
				//sort();排序函数:数字-英文-汉字；
				let productSelect = this.productValue[value.join(",")];
				if (productSelect && productAttr.length) {
					this.$set(
						this.attr.productSelect,
						"store_name",
						this.storeInfo.store_name
					);
					this.$set(this.attr.productSelect, "image", productSelect.image);
					this.$set(this.attr.productSelect, "price", productSelect.price);
					this.$set(this.attr.productSelect, "stock", productSelect.stock);
					this.$set(this.attr.productSelect, "unique", productSelect.unique);
					this.$set(this.attr.productSelect, "cart_num", 1);
					this.$set(this, "attrValue", value.join(","));
				} else if (!productSelect && productAttr.length) {
					this.$set(
						this.attr.productSelect,
						"store_name",
						this.storeInfo.store_name
					);
					this.$set(this.attr.productSelect, "image", this.storeInfo.image);
					this.$set(this.attr.productSelect, "price", this.storeInfo.price);
					this.$set(this.attr.productSelect, "stock", 0);
					this.$set(this.attr.productSelect, "unique", "");
					this.$set(this.attr.productSelect, "cart_num", 0);
					this.$set(this, "attrValue", "");
				} else if (!productSelect && !productAttr.length) {
					this.$set(
						this.attr.productSelect,
						"store_name",
						this.storeInfo.store_name
					);
					this.$set(this.attr.productSelect, "image", this.storeInfo.image);
					this.$set(this.attr.productSelect, "price", this.storeInfo.price);
					this.$set(this.attr.productSelect, "stock", this.storeInfo.stock);
					this.$set(
						this.attr.productSelect,
						"unique",
						this.storeInfo.unique || ""
					);
					this.$set(this.attr.productSelect, "cart_num", 1);
					this.$set(this, "attrValue", "");
				}
			},
			storeTap() {
				this.$refs.store.modals = true;
				this.$refs.store.cancel();
			},
			setUp(touristId, init) {
				let timestamp = new Date().getTime();
				let userInfo = {
					avatar: require("@/assets/images/yonghu.png"),
					nickname: "游客",
					uid: 0,
					touristId: touristId || timestamp,
				};
				if (!touristId) {
					this.getSwithUser({
						tourist_uid: timestamp
					})
				}
				this.userInfo = userInfo;
				let storage = window.localStorage;
				storage.setItem("cashierUser", JSON.stringify(userInfo));
				if (init) return;
				this.getCartList();
				this.reloadList();
				this.goodList();
			},
			// 选择用户
			changeMenu(name) {
				if (name == 1) {
					this.setUser();
				} else {
					this.activeHangon = -1;
					this.clear();
					this.setUp();
				}
			},
			// 修改用户
			setUser() {
				this.modalUser = true;
			},
			// 当前选中门店店员信息
			getStoreId(e) {
				this.clear();
				this.storeList.forEach((i) => {
					if (i.id == e.id) {
						sessionStorage.setItem("staffInfo", JSON.stringify(e));
						this.goodFrom.staff_id = e.id;
						this.storeInfos = i;
						this.getCartList();
						this.reloadList();
						this.goodList();
						this.getSwithUser({
							cashier_id: e.id
						});
					}
				});
			},
			// 门店店员信息以及门店店员列表
			getUserInfo(e) {
				this.storeInfos = e.users;
				this.storeList = e.storeList;
				this.goodFrom.staff_id = e.users.id;
				sessionStorage.setItem("staffInfo", JSON.stringify(e.users));
				if (this.userInfo) {
					this.getCartList();
				} else {
					this.setUp();
				}
				this.reloadList();
				this.goodList();
			},
			// 收银台切换购物车用户
			cashierSwitch(data) {
				postCashierSwitch(data, this.storeInfos.id)
					.then((res) => {})
					.catch((err) => {
						this.$Message.error(err.msg);
					});
			},
			getUserId(e) {
				this.clear();
				this.modalUser = false;
				let data = {
					uid: e.uid,
				};
				let dataSwitch = {
					uid: this.userInfo.touristId,
					to_uid: e.uid,
					is_tourist: 1,
				};
				this.cashierSwitch(dataSwitch);
				this.userInfoData(data);
				this.getSwithUser({
					uid: e.uid
				});
			},
			checkUser() {
				this.userInfoShow = false;
				this.goodFrom.store_name = "";
				this.getUserId(this.modalUserInfo);
			},
			// 获取收银台用户信息
			userInfoData(data, init) {
				cashierUser(data)
					.then((res) => {
						this.userInfo = res.data;
						let storage = window.localStorage;
						storage.setItem("cashierUser", JSON.stringify(res.data));
						if (init) return;
						this.getCartList();
						this.reloadList();
						this.goodList();
						this.defaultSel(1);
					})
					.catch((err) => {
						this.$Message.error(err.msg);
					});
			},
			//扫码枪扫码，针对带有字母的
			inputSaoMa(e) {
				console.log(e, '扫码枪输入结果')
				// setTimeout定时器的作用是，等待扫码枪输入完，拿到完整的二维码信息，再调接口（扫码枪输入速度大概8~20毫秒，手动输速度大概是80毫秒），否则拿不到完整的二维信息。
				let val = e;
				console.log(e, '扫码枪结果')
				if (val === "") return false;
				console.log(',this.codeNum2222')
				clearTimeout(this.endTimeout);
				console.log(',this.codeNum2')
				this.endTimeout = null;
				this.endTimeout = setTimeout(() => {
					console.log(',this.codeNum1')
					// if (this.payNum === val) {
					// 	clearTimeout(this.endTimeout)
					// 	if (val) {
					// 		this.createOrder.userCode = val;
					// 		this.createOrder.auth_code = val;
					// 		this.confirm();
					// 	}
					// }

					console.log(this.codeNum, ',this.codeNum')
					if (this.codeNum === val) {
						clearTimeout(this.endTimeout);
						if (val) {
							this.codeInfo({
								bar_code: val,
							});
						}
					}
				}, 500);
			},
			// 用户详情操作
			operation(type) {
				this.$refs.userDetails.modals = false;
				if (type === 1) {
					this.rechargeBnt();
				} else {
					this.setUser();
				}
			},
			codeInfo(data) {
				data.uid = this.userInfo ? this.userInfo.uid : 0;
				data.staff_id = this.storeInfos.id;
				data.tourist_uid = this.userInfo.touristId;
				if (this.userInfo == null) {
					this.codeNum = "";
					return this.$Message.error("请添加或选择用户");
				}
				cashierCode(data)
					.then((res) => {
						this.codeNum = "";
						let data = res.data;
						if (data.hasOwnProperty("userInfo")) {
							// 用户 Object.keys(this.userInfo).length
							if (this.userInfo) {
								this.$Modal.confirm({
									title: "切换用户",
									content: "<p>确定要切换用户吗？</p>",
									onOk: () => {
										this.userInfo = res.data.userInfo;
										let storage = window.localStorage;
										storage.setItem(
											"cashierUser",
											JSON.stringify(res.data.userInfo)
										);
										this.getCartList();
									},
									onCancel: () => {},
								});
							} else {
								this.userInfo = res.data.userInfo;
								let storage = window.localStorage;
								storage.setItem("cashierUser", JSON.stringify(res.data.userInfo));
							}
						}
						this.goodList();
						this.getCartList();
					})
					.catch((err) => {
						this.codeNum = "";
						this.$Message.error(err.msg);
					});
			},
			//商品列表
			goodList(type) {
				this.goodFrom.uid = this.userInfo ? this.userInfo.uid : 0;
				if (!this.userInfo.uid)
					this.goodFrom.tourist_uid = this.userInfo.touristId;
				cashierProduct(this.goodFrom)
					.then((res) => {
						let data = res.data;
						this.total = data.count;
						if (this.reloading) {
							this.reloading = false;
							this.goodFrom.limit = this.limitTemp;
							this.goodData = data.list;
						} else {
							this.goodData = this.goodData.concat(data.list);
						}
						if (data.attrValue) {
							// 加入购物车
							this.attr.productSelect.unique = data.attrValue.unique;
							this.productId = data.attrValue.product_id;
							this.joinCart(1);
						}
						if (data.userInfo) {
							this.modalUserInfo = data.userInfo;
							this.userInfoShow = true;
						}
					})
					.catch((err) => {
						this.$Message.error(err.msg);
					});
			},
			pageChange(event) {
				if (Math.abs(event.target.scrollHeight - event.target.clientHeight - event.target.scrollTop) < 1) {
						this.goodFrom.page++;
					this.goodList();
				}
			},
			// 监听键盘函数
			keyboard() {
				let that = this;

				function delNums(item) {
					that.collectionArray.pop();
					that.collection = that.collectionArray.length ?
						that.collectionArray.join("") :
						0;
				}


				document.onkeydown = function(event) {
					let e = event || window.event;
					let key = e.keyCode;
					if (that.modalCash) {
						event.stopPropagation(); // 阻止事件冒泡传递
						event.preventDefault(); //阻止默认事件原有功能
					}
					switch (key) {
						case 96:
						case 48:
							that.numTap(0);
							break;
						case 97:
						case 49:
							that.numTap(1);
							break;
						case 98:
						case 50:
							that.numTap(2);
							break;
						case 99:
						case 51:
							that.numTap(3);
							break;
						case 100:
						case 52:
							that.numTap(4);
							break;
						case 101:
						case 53:
							that.numTap(5);
							break;
						case 102:
						case 54:
							that.numTap(6);
							break;
						case 103:
						case 55:
							that.numTap(7);
							break;
						case 104:
						case 56:
							that.numTap(8);
							break;
						case 105:
						case 57:
							that.numTap(9);
							break;
						case 110:
							that.numTap(".");
							break;
						case 190:
							that.numTap(".");
							break;
						case 8:
							delNums();
							break;
					}
				};
			},
			// 打开结算抽屉
			openSettle() {
				this.payList.forEach((value, index, arr) => {
					value.status = true;
					if (value.value === 'yue' && !this.userInfo.uid) {
						value.status = false;
					}
					if (value.status && (!index || !arr[index - 1].status)) {
						this.payType = value.value;
					}
				});
				this.yueVerify = !!this.priceInfo.is_cashier_yue_pay_verify;
				this.settleMoney = this.priceInfo.payPrice;
				this.collection = this.priceInfo.payPrice;
				this.settleVisible = true;
			},
			onRecharge(e) {
				for (let i = 0; i < this.payList.length; i++) {
					this.payList[i].status = this.payList[i].value !== 'yue';
					if (!this.payList[i].status) {
						continue;
					}
					if (!i || !this.payList[i - 1].status) {
						this.payType = this.payList[i].value;
					}
				}
				this.yueVerify = !!this.priceInfo.is_cashier_yue_pay_verify;
				this.settleMoney = e.price;
				this.collection = e.price;
				this.rechargeData.rechar_id = e.rechar_id;
				this.rechargeData.price = e.price;
				this.zIndex = 1 + Number(this.$refs.recharge.$el.querySelector('.ivu-modal-mask').style.zIndex);
				this.settleVisible = true;
			},
			// 充值余额
			rechargeBalance(auth_code) {
				this.rechargeData.uid = this.userInfo.uid;
				this.rechargeData.pay_type = this.payType ? 4 : 3;
				this.rechargeData.auth_code = auth_code || '';
				userSaveApi(this.rechargeData).then((res) => {
					let status = res.data.status;
					switch (status) {
						case 'SUCCESS':
							this.$Message.success('充值成功');
							this.settleVisible = false;
							this.userInfoData({
								uid: this.userInfo.uid
							});
							break;
						case 'PAY_ING':
							let msg = this.$Message.loading({
								content: '等待支付中...',
								duration: 0,
							});
							this.checkOrderTime(msg);
							break;
						default:
							this.$Message.warning('支付失败');
							break;
					}
				}).catch((err) => {
					this.$Message.error(err.msg);
				});
			}
		},
	};
</script>

<style lang="stylus" scoped>
	::-webkit-scrollbar-thumb {
		-webkit-box-shadow: inset 0 0 6px #ccc;
	}

	::-webkit-scrollbar {
		width: 2px !important;
		/* 对垂直流动条有效 */
	}



	.left {
		/deep/ .ivu-form-item {
			margin-bottom: 12px !important;
		}
	}

	.noCart {
		height: 100%;
		display: flex;

		.tip {
			text-align: center;
			color: #ccc;
			font-size: 14px;
		}

		.picture {
			width: 200px;
			height: 140px;
			margin: 20px 160px;

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

	.goodsCard {
		flex: 1;
		max-width: 100%;
		min-width: 1100px;
		height: calc(100vh - 155px);
		display: flex;
		flex-wrap: nowrap;
		padding: 20px;
		background-color: #F5F5F5;
	}

	.cash {
		/deep/ .ivu-modal-body {
			padding: 0 !important;
		}
	}

	.discountCon {
		.item {
			font-size: 15px;
			margin-bottom: 10px;
		}
	}

	.content {
		height: calc(100vh - 66px);
		display: flex;
		flex-direction: column;
	}

	.goods {
		flex: 1;
		min-width: 0;
		// width: calc(100% - 500px);
		height: 100%;

		/deep/ .ivu-card-body {
			height: 100%;
			padding: 10px 0 0px 0 !important;
		}


		.goodsCon {
			flex: 1;
			min-width: 0;
			padding: 0 20px;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			/deep/ .ivu-input-group {
				.ivu-input {
					height: 50px;
					text-align: center;
					border: 0;
				}
			}

			.input {

				// padding: 20px 10px 10px 0;
				/deep/ .ivu-input-group-prepend,
				.ivu-input-group-append {
					border: 0;
					border-radius: 10px;
					background-color: #FFFFFF;
				}

				/deep/.ivu-input-search {
					border-radius: 0 10px 10px 0;
				}
			}

			.goods-top {
				flex: 1;
				min-height: 0;
				display: flex;
				flex-direction: column;
				overflow: hidden;
			}

			.page {
				margin-top: 0;
				padding: 10px 16px 10px 0;
			}

			.noGood {
				height: 100%;
				border-radius: 20px;
				background: #FFFFFF;

				.picture {
					width: 180px;
					height: 140px;
				}

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

				.tip {
					margin-top: 30px;
					font-size: 15px;
					text-align: center;
					color: #ccc;
				}
			}

			.list-wrap {
				flex: 1;
				min-height: 0;
				// padding-top: 20px;
				overflow-x: hidden;
			}

			.list-wrap::-webkit-scrollbar {
				display: none;
			}

			/deep/.ivu-scroll-container {
				height: 100%;
			}

			.list {
				.item {
					position: relative;
					padding: 10px;
					border-radius: 10px;
					margin-bottom: 15px;
					background: #FFFFFF;

					&.on:hover {
						background-color: #1890FF;
						color: #fff !important;
						box-shadow: 0px 0px 14px 0px rgba(0, 84, 161, 0.18);

						.name {
							color: #fff !important;
							margin-bottom: 10px;
						}

						.stock {
							color: #fff !important;

							span {
								border-color: #fff !important;
							}
						}

						.money {
							color: #fff !important;
						}
					}

					.icon-cart-num {
						position: absolute;
						top: -8px;
						right: 0;
						padding: 5px 7px 3px;
						border-radius: 11px;
						background: #FF7700;
						font-size: 14px;
						line-height: 14px;
						color: #FFFFFF;
					}

					.no-stock {
						top: 0;
						left: 0;
						position: absolute;
						width: 100%;
						height: 100%;
						background: rgba(0, 0, 0, 0.2);
						border-radius: 10px;
						display: flex;
						align-items: center;
						justify-content: center;

						.trip {
							background: #4E4E4E;
							width: 70px;
							height: 70px;
							border-radius: 50%;
							display: flex;
							align-items: center;
							flex-direction: column;
							justify-content: center;
							color: #FFFFFF;
							font-size: 14px;
						}
					}

					.picture {
						width: 100%;
						height: 130px;

						img {
							width: 100%;
							height: 100%;
							border-radius: 8px;
						}
					}

					.name {
						font-size: 16px;
						line-height: 16px;
						color: rgba(0, 0, 0, 0.85);
						margin-top: 10px;
						margin-bottom: 14px;
					}

					.text {
						display: flex;
						justify-content: space-between;
						max-height: 80px;

						.text-left {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
						}

						.iconfont {
							position: absolute;
							color: #1890FF;
							font-size: 20px;
							right: 5px;
							bottom: 5px;
						}

						.stock {
							font-size: 13px;
							color: #606266;
							margin: 2px 0;

							span {
								border-radius: 3px;
								border: 1px solid #606266;
								padding: 3px 6px;
								margin-right: 8px;
								font-size: 12px;
							}
						}

						.money {
							font-weight: 500;
							color: #F5222D;
							font-size: 18px;
							line-height: 18px;

							.rmb {
								font-size: 14px;
							}
						}
					}
				}

				.item-shadow {
					width: 150px;
				}
			}
		}

		.goodClass {
			width: 140px;
			overflow-y: auto;
			border-radius: 20px;
			padding: 20px 15px;
			background-color: #FFFFFF;

			.item {
				cursor: pointer;
				width: 110px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				margin-bottom: 18px;
				font-size: 16px;
				color: rgba(0, 0, 0, 0.85);
				border-radius: 20px;
				transition: all 0.1s;

				&.on {
					background-color: #1890FF;
					color: #fff;
				}
			}

			.item:hover {
				background-color: #1890FF;
				color: #fff;
			}
		}
	}

	.conter {
		height: 100%;
		width: 595px;

		/deep/ .ivu-card-body {
			height: 100%;
			padding: 0 !important;
		}

		.cart {
			position: relative;
			display: flex;
			flex-direction: column;
			height: 100%;
			// max-width: 500px;

			.title {
				padding: 0 18px;
				border: 2px solid #FF7700;
			}

			.left-top {
				width: 100%;
				height: 100%;
				display: flex;
				border-radius: 20px;
				background-color: #FFFFFF;
				overflow: hidden;

				.cart {
					// height: calc(100% - 82px);
					flex: 1;
					min-width: 0;
				}

				.btn-group-vertical {
					display: flex;
					flex-direction: column;
					padding: 27px 18px;
					border-left: 1px solid #EEEEEE;
					overflow-x: hidden;

					.ivu-btn {
						flex-shrink: 0;
						width: 100px;
						height: 40px;
						border-color: #1890FF;
						border-radius: 20px;
						margin-bottom: 30px;
						font-size: 16px !important;
						color: #1890FF;
					}

					.ivu-btn[disabled] {
						color: #c5c8ce;
						border-color: #dcdee2;
					}

					.ivu-btn:not([disabled]):active {
						background-color: #F1F1F1;
					}

					.ivu-btn.selected {
						background-color: #F1F1F1;
					}
				}
			}

			.cart-left {
				display: flex;
				flex-direction: column;
				width: 100%;
				height: 100%;

				.count {
					padding: 0px 24px 20px;
					border-bottom: 1px solid #EEEEEE;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.num {
						color: #FF7700;
						padding: 0 5px;
					}

					.cart-sel {
						font-size: 14px;
					}

					.count-r {
						display: flex;
						align-items: center;

						.coupon {
							border-radius: 4px;
							border: 1px solid #FF7700;
							color: #FF7700;
							padding: 3px 10px;
							cursor: pointer;
							font-size: 14px;
						}

						.clear {
							display: flex;
							align-items: center;
							cursor: pointer;
							font-size: 12px;

							img {
								width: 16px;
								height: 16px;
								margin: 0 6px 0 14px;
							}
						}
					}
				}
			}

			.title {
				// border-bottom: 1px solid #D8D8D8;
				// width: 376px;
				flex-shrink: 0;
				height: 90px;
				background: rgba(255, 119, 0, 0.05);
				border-radius: 10px;
				margin: 27px 24px 24px;
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				overflow: hidden;

				.picture {
					width: 50px;
					height: 50px;
					border-radius: 50%;
					margin-right: 15px;

					img {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.switchs {
					color: #FF7700;
					cursor: pointer;

					// position: absolute;
					// right: 19px;
					// top: 10px;

					a {
						font-size: 14px;
						color: #FF7700;
					}
				}

				.text {
					font-size: 13px;
					font-weight: 400;
					color: rgba(51, 51, 51, 0.85);
					flex: 1;
					min-width: 0;

					.textCon {
						margin-bottom: 6px;
						display: flex;
						align-items: center;

						.name {
							font-size: 18px;
						}

						.phone {
							color: #999;
						}
					}

					.text-wrap {
						flex: 1;
						min-width: 0;
					}

					.name-wrap {
						display: inline-flex;
						align-items: center;
						max-width: 100%;
					}

					.user-msg {}

					.balance {
						margin-right: 12px;

						.num {
							font-weight: 600;
							color: #303133;
							font-size 17px;
							line-height: 17px;
							margin-left: 4px;
						}
					}

					.recharge {
						color: #1890FF;
						padding: 2px 4px;
						cursor: pointer;
						border-radius: 3px;
					}

					.recharge:hover {
						background-color: #1890FF;
						color: #fff;
					}

					.name {
						flex: 1;
						min-width: 0;
						overflow: hidden;
						text-overflow: ellipsis;
						color: rgba(0, 0, 0, 0.85);
						font-size: 14px;
						font-weight: 600;
						margin-right: 6px;
					}
				}
			}

			.listCon {
				overflow-x: hidden;
				// height: calc(100% - 168px);
				flex: 1;

				.promotions {
					border-bottom: 1px dashed #EEEEEE;

					.promotions-msg {
						display: flex;
						justify-content: space-between;
						padding: 10px 0;
						color: #333333;
						font-size: 14px;
						border-bottom: 1px solid #f2f2f2;

						.card {
							color: #FF7700;
							padding: 1px 6px;
							margin-right: 8px;
							border-radius: 3px;
							background-color: #Fcf0e2;
							font-size: 12px;
							white-space: nowrap;
						}

						.flex-1 {
							flex: 1;
							display: flex;
							align-items: center;
						}

						.collect {
							cursor: pointer;
							width: 70px;
							display: flex;
							align-items: center;
							flex-basis: max-content;

							.iconjinru {
								font-size: 12px;
							}
						}
					}

					.is_give {
						height: 60px;

						.picture {
							width: 40px;
							height: 40px;

							img {
								width: 100%;
								height: 100%;
								border-radius: 5px;
							}
						}

						.give-name {
							font-size: 12px;
							color: #333;
							max-width: 200px;
						}

						.give-info {
							font-size: 12px;
							color: #ccc;
						}
					}
				}
			}

			.list::-webkit-scrollbar {
				width: 0 !important;
			}

			.list {
				-ms-overflow-style: none;
			}

			.list {
				overflow: -moz-scrollbars-none;
			}

			.list {
				overflow: hidden;
				overflow-y: scroll;

				.item {
					padding: 20px 25px;
					position: relative;
					display: flex;
					flex-wrap: nowrap;
					height: 100%;
					border-radius: 10px;

					&:hover {
						background: rgba(24, 144, 255, 0.05);
					}

					/deep/ .ivu-input-number-input {
						text-align: center;
					}

					/deep/ .ivu-input-number-controls-outside {
						width: 112px !important;
					}

					.picture {
						width: 74px;
						height: 74px;

						img {
							width: 100%;
							height: 100%;
							border-radius: 5px;
						}
					}

					.del {
						position: absolute;
						font-size: 15px;
						color: #1890FF;
						right: 25px;
						top: 20px;
						cursor: pointer;
						padding: 2px 7px;
					}

					.cartBnt {
						position: absolute;
						right: 25px;
						height: 24px;
						bottom: 20px;

						.iconfont {
							width: 24px;
							height: 24px;
							background-color: #F2F3F5;
							text-align: center;
							line-height: 24px;
							color: rgba(0, 0, 0, 0.85);
							border-radius: 50%;
						}

						.iconjia {
							color: #fff;
							background-color: #1890FF;
							font-size: 12px;
						}

						.ivu-input-number {
							outline: unset;
							width: 60px;
							margin: 0 2px;
							text-align: center;
							font-size: 16px;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							color: rgba(0, 0, 0, 0.85);
							border: none;
							background-color: rgba(255, 255, 255, 0);

							/deep/ .ivu-input-number-handler-wrap {
								display: none;
							}
						}
					}

					.text {
						flex: 1;
						color: #000;
						font-size: 18px;
						margin-left: 10px;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						height: 100%;
						overflow: hidden;

						.end {
							color: #999;
							font-size: 13px;
						}

						.name {
							font-size: 15px;
							margin-top: 5px;
							width: 82%;
						}

						.info {
							color: #999;
							font-size: 12px;
							cursor: pointer;
							padding: 4px 0 7px 0;
							display: flex;
							align-items: center;

							.iconfont {
								font-size: 12px;
								margin-left: 5px;
							}

							.suk {
								max-width: 50%;
							}
						}

						.sum_price {
							font-size: 16px;
							font-weight: 500;
							color: rgba(0, 0, 0, 0.85);
						}

						&.invalid {
							.info {
								cursor: unset;
								display: flex;
								align-items: center;
							}

							.suk {
								max-width: 50%;
							}

							.name {
								color: #999;
							}
						}
					}
				}
			}

			.left {
				width: 100%;
				height: 70px;
				display: flex;
				align-items: center;
				background-color: #fff;
				padding: 0 30px 0 24px;
			}

			.conInfo {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				color: #000;

				.storeBnt-wrap {
					flex: 1;
				}


				.right {
					flex: 1;
					display: flex;
					width: max-content;
					align-items: baseline;
					font-size: 14px;
					flex-wrap: nowrap;
					white-space: nowrap;

					div {
						white-space: nowrap;
					}

					.rmb {
						font-weight: 600;
						font-size: 16px;
						color: rgba(245, 34, 45, 1);
					}

					.discount {
						font-size: 14px;
						padding: 0 9px
					}

					.detailed {
						color: #1890FF;
						padding: 0 9px 0 3px;
						cursor: pointer;
					}

					.num {
						color: rgba(245, 34, 45, 1);
						font-size: 24px;
						line-height: 22px;
						font-weight: 600;
						white-space: nowrap;
					}
				}

				.num {
					font-size: 24px;
				}
			}

			.footer {
				box-shadow: 0 -1px 11px 0 rgba(0, 0, 0, 0.06);

				.footer-bottom {
					display: flex;
					align-items: center;
					height: 88px;
					padding: 0 24px;
					border-top: 1px solid #EEEEEE;

					.ivu-btn {
						flex: 1;
						height: 50px;
						border-color: #1890FF;
						border-radius: 25px;
						background-color: #1890FF;
						font-weight: 500;
						font-size: 18px !important;
						color: #FFFFFF;
					}
				}
			}
		}

		.title {
			color: rgba(0, 0, 0, 0.85);

			.text {
				font-size: 16px;
				font-weight: 500;
			}

			.picture {
				width: 32px;
				height: 32px;
				border-radius: 50%;
				cursor: pointer;

				img {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.info {
				font-size: 14px;
				margin-left: 8px;
				cursor: pointer;

				.iconfont {
					font-size: 12px;
					margin-left: 5px;
				}

				&:hover {
					color: #2d8cf0;
				}
			}
		}
	}

	/deep/ .ivu-page {
		font-size: 15px;
	}

	.search_user_info {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.picture {
			width: 110px;
			height: 110px;
			margin: 20px 0 20px;

			img {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.user_name {
			font-size: 18px;
			font-weight: 600;
			color: rgba(0, 0, 0, 0.85);
			margin-bottom: 14px;
		}

		.user_id {
			font-size: 12px;
			font-weight: 400;
			color: #999999;
		}

		.user_phone {
			font-size: 14px;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.85);
			margin: 14px 0 40px;
		}

		.sure_btn {
			width: 176px;
			height: 46px;
			line-height: 46px;
			text-align: center;
			color: #fff;
			font-size: 16px;
			background: #1890FF;
			border-radius: 6px;
			margin-bottom: 30px;
		}
	}

	/deep/.user-modal {
		.ivu-modal-content {
			border-radius: 10px;
		}
	}
</style>