<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="staffInfo" class="title acea-row row-middle">
										<div class="picture">
											<img :src="staffInfo.avatar" v-if="staffInfo.avatar" />
											<img src="../../assets/images/yonghu.png" alt="" v-else />
										</div>`
										<div class="text">
											<div class="textCon line1">
												<div class="text-wrap">
													<div class="name-wrap">
														<span class="name">{{ staffInfo.name || '请选择员工'}}</span>
														<!-- <span v-if="userInfo.phone" class="phone mr10">手机号：{{ userInfo.phone }}</span> -->
													</div>
												</div>
												<div class="switchs" trigger="click" @click="changeStaff(1)">
													<a href="javascript:void(0)">
														选择员工
														<Icon type="ios-arrow-down"></Icon>
													</a>
												</div>
											</div>
										</div>
									</div>
									<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="title acea-row row-middle">
										<div style="padding-right: 20px;">
											预约时间：
										</div>
										<DatePicker type="date" placeholder="请选择预约日期" style="width: 150px"
											v-model="chooseDay" />
										<TimePicker format="HH:mm" placeholder="请选择预约时间" style="width: 100px"
											v-model="chooseTime" />
									</div>
									<div class="count">
										<div class="cart-sel">
											已选购<span class="num">{{ cartSum }}</span>件
										</div>
										<div class="count-r">
											<span class="clear" @click="delAll">
												<img alt="" src="../../assets/images/clear.png" />
												清空</span>
										</div>
									</div>
									<div class="listCon">
										<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.product && item.product.image"
														:src="item.product.image" />
												</div>
												<div class="text invalid">
													<div class="name line1">
														{{ item.store_name }}
													</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">
														优惠:
														¥{{( payInfo.total_price - (cartSum && payInfo.pay_price ? payInfo.pay_price : 0) || 0).toFixed(2) || 0}}
													</div>
													<div v-if="payInfo.list && payInfo.list.length > 0" class="detailed"
														@click="discountCon">
														明细
													</div>
													<span class="discount">实付: </span>
													<span class="rmb">¥</span>
													<span class="num">{{
                            cartSum && payInfo.pay_price ? payInfo.pay_price : 0
                          }}</span>
												</div>
											</div>
										</div>
										<div class="footer-bottom">
											<Button :disabled="!invalidList.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 " :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.product.stock }" class="item" @click="attrTap(item)">
										<div :style="{ height: goodsHeight + 'px' }" class="picture">
											<img :src="item.slider_image" alt="商品图" style="width: 100%;" />
										</div>
										<div class="name line2">
											{{ item.store_name || item.title }}
										</div>
										<div>ID：{{item.product.id}}</div>
										<div class="text">
											<div class="text-left">
												<div class="money">
													<span class="rmb">¥</span>{{ item.product.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>
									</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>
		<Modal v-model="modalStaff" :mask-closable="false" :scrollable="true" closable footer-hide title="员工列表"
			width="950" class-name="user-modal">
			<staffList v-if="modalStaff" ref="users" :uid="staffInfo.uid || 0" @getUserId="getStaffId"></staffList>
		</Modal>
		<settleDrawer v-model="settleVisible" :list="payList" :type="payType" :money="settleMoney"
			:collection="collection" :verify="yueVerify" :z-index="zIndex" @payPrice="payPrice" @numTap="numTap"
			@delNum="delNum" @cashBnt="cashBnt" @close='defaultcalc=false'></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>￥{{ payInfo.total_price || 0 }}</div>
				</div>
				<div class="item acea-row row-between-wrapper">
					<div>会员优惠金额：</div>
					<div>￥{{ payInfo.level_price || 0 }}</div>
				</div>
				<!-- <div class="item acea-row row-between-wrapper">
					<div>手动优惠：</div>
					<div>￥{{ formItem.prices || 0 }}</div>
				</div> -->
				<div class="item acea-row row-between-wrapper">
					<div>服务卡优惠：</div>
					<div>
						￥{{serverpre_ferential}}
					</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 staffList from "@/components/staffList";
	import storeList from "@/components/storeList";
	import recharge from "@/components/recharge";
	import userDetails from "@/components/userDetail/userDetails";
	import settleDrawer from "@/components/settleDrawer";
	import buuug7SimpleDatetimePicker from '@/components/buuug7-simple-datetime-picker_0.7.0/components/buuug7-simple-datetime-picker/buuug7-simple-datetime-picker.vue'
	import "../../assets/js/core.js";
	import {
		cashierCate,
		cashierUser,
		cashierCode,
		cashierCartList,
		postCashierSwitch,
		swithUser,
		computedServe,
		createServeItem
	} from "@/api/order";
	import {
		checkOrderApi,
		getUserInfo,
		userSaveApi
	} from "@/api/user";
	import {
		getServeItem
	} from "@/api/product";
	import Setting from '@/setting';
	import {
		array
	} from "js-md5";

	export default {
		name: "index",
		components: {
			buuug7SimpleDatetimePicker,
			userList,
			staffList,
			storeList,
			recharge,
			userDetails,
			settleDrawer,
		},
		data() {
			return {
				chooseTime: '',
				chooseDay: '',
				selectDay: '',
				pptype: 1,
				payInfo: {}, //订单计算结果
				checkType: 1,
				formItem: {
					price: 0,
				},
				discountPrice: 100,
				loading: false,
				cashBntLoading: false,
				checkOut: 0,
				modalUser: false,
				modalStaff: false,
				flag: true,
				goodFrom: {
					store_name: "",
					field_key: "all",
					cate_id: "",
					page: 1,
					limit: 1000,
					uid: 0,
					staff_id: 0,
				},
				activityFrom: {
					page: 1,
					limit: 20,
					type: 0,
					uid: 0,
					promotions_id: 0,
				},
				total: 0,
				goodData: [],
				payNum: "",
				userInfo: {},
				staffInfo: {
					avatar: ''
				},
				saleInfo: {
					avatar: ''
				},
				storeInfos: {}, //门店店员信息
				storeList: [], //门店列表
				attr: {
					productAttr: [],
					productSelect: {},
				},
				storeInfo: {}, //商品信息
				productValue: [],
				attrValue: "", //已选属性
				productId: 0, //产品id
				seckillId: 0, //秒杀商品id
				cartList: [],
				isCart: 0,
				cartInfo: {
					//更改属性所需参数
					cart_id: 0,
					product_id: 0,
					unique: "",
				},
				fapi: {},
				rule: [{
					type: "input",
					field: "remarks",
					title: "备注",
					props: {
						type: "textarea",
						maxlength: 100,
						"show-word-limit": true,
					},
				}, ],
				rule2: [{
					type: "InputNumber",
					field: "change_price",
					title: "实付款",
					value: 0,
					props: {
						min: 0,
					},
				}, ],
				integral: false, //是否使用积分
				coupon: false, //是否使用优惠券
				couponId: 0, //优惠券id
				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
				seckillOrderId: "", //秒杀订单id
				clientHeight: 0,
				cartHeight: 0,
				goodsHeight: 0,
				invalidList: [],
				promotionsList: [],
				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,
					},
				],
				shadow: 0,
				rechargeVisible: false,
				settleMoney: 0,
				yueVerify: false,
				activityTypeArr: [],
				swiper: null,
				swiperClickedIndex: 0,
				swiperOption: {
					slidesPerView: 'auto',
					spaceBetween: 14,
					setWrapperSize: true,
				},
				rechargeData: {},
				zIndex: 9999,
			};
		},
		computed:{
			serverpre_ferential(){
				const total_price = this.payInfo.total_price || 0;
				const cartSum = this.cartSum && this.payInfo.pay_price ? this.payInfo.pay_price : 0;
				const  level_price =this.payInfo.level_price || 0;
				const num1 = this.$computes.Sub(total_price,cartSum);
				return  this.$computes.Sub(num1,level_price)
			}
		},
		watch: {
			goodData(value) {
				this.$nextTick(() => {
					if (value.length) {
						this.goodsHeight = this.$refs.listWrap.querySelector('.picture').clientWidth;
					}
				});
			}
		},
		created() {
			this.chooseDay = new Date()
			// this.chooseTime = new Date()
			let time = new Date(this.chooseDay.getTime() + 30*60*1000)
			this.chooseTime = this.showAll(time.getHours()) +':' + this.showAll(time.getMinutes())
			console.log(this.chooseTime,'this.chooseTime')
			// this.morenDay = date.getFullYear() + date.getMonth()+ data.getDate()
			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.activityFrom.limit = pageLimt;
			this.userInfo = JSON.parse(window.localStorage.getItem("cashierUser")) || {};
			if (!this.userInfo.uid) {
				this.setUp();
			}
			// this.cateList();
			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.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: {
			showAll(num) {
				return num > 9 ? num + '' : '0' + num
			},
			datetimePickerErr() {},
			reloadList() {
				this.reloading = true;
				this.limitTemp = this.goodFrom.limit;
				this.goodFrom.limit *= this.goodFrom.page;
				this.goodFrom.page = 1;
				if (this.activityFrom.type) {
					this.limitTemp = this.activityFrom.limit;
					this.activityFrom.limit *= this.activityFrom.page;
					this.activityFrom.page = 1;
				}
			},
			getSwithUser(data) {
				swithUser(data).then(res => {}).catch(err => {
					this.$Message.error(err.msg);
				})
			},
			ceshi() {
				this.$router.push({
					path: `${Setting.roterPre}/auxScreen/login`
				})
			},
			jsToJava() {
				try {
					window.Jsbridge.invoke('openCacheBox', JSON.stringify({
						'p1-key': 'p1-value'
					}), this.myFunction());
				} catch (e) {

				}
			},
			myFunction() {
				console.log('myFunction called222');
			},
			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() {
				console.log("kk6")
				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.promotionsList = [];
				this.cartSum = 0;
				this.collection = 0;
				this.collectionArray = [];
				this.createOrder.change_price = 0;
				this.createOrder.remarks = "";
				this.createOrder.is_price = 0;
				this.activityFrom.type = 0;
				this.goodFrom.cate_id = "";
				this.invalidList = [];
				this.computedServe()
				this.formItem.prices = 0
				this.payInfo = {}
			},
			cancel() {
				this.collection = 0;
				this.collectionArray = [];
			},
			// 充值
			rechargeBnt() {
				this.pptype = 1
				this.rechargeVisible = true;
			},
			//点击出现优惠明细
			discountCon() {
				this.discount = true;
			},
			//现金收款创建订单并支付
			cashBnt(payNum) {
				if (this.pptype == 1) {
					if (this.cashBntLoading) {
						return;
					}
					this.cashBntLoading = true;
					if (this.rechargeVisible) {
						this.rechargeBalance(payNum);
						return
					}
					return
				}
				if (this.pptype == 2) {
					let that = this
					let arr = that.invalidList.map(item => {
						return item.product.id
					})
					let qdata = {
						uid: that.userInfo.uid,
						work_member_id: that.staffInfo.id,
						sale_uid: that.payInfo.pay_price == 0 ? '' : that.saleInfo.id,
						products: arr.join(','),
						pay_type: that.payType,
						userCode: payNum,
						reservation_time: that.selectDay
					}
					this.cashBntLoading = true;
					createServeItem(qdata).then(res => {
						that.pptype = 1;
						let storage = window.localStorage;
						if (that.payType == "yue") {
							that.settleVisible = false;
							that.payNum = "";
							that.createOrder.userCode = "";
							if (res.data.status == "ORDER_CREATE") {
								this.orderId = res.data.order_id;
								this.$Message.success(res.data.message);
							} else if (res.data.status == "SUCCESS") {
								this.$Message.success("支付成功");
								let money = that.$computes.Sub(
									that.userInfo.now_money,
									that.priceInfo.payPrice
								);
								that.userInfo.now_money = money;
								storage.setItem("cashierUser", JSON.stringify(this.userInfo));
								this.clear();
							} else {
								that.orderId = res.data.order_id;
								that.$Message.error(res.data.message);
							}
						}
						if (that.payType == "cash") {
							if (res.data.status == "SUCCESS") {
								that.$Message.success("支付成功");
								storage.setItem("cashierUser", JSON.stringify(that.userInfo));
								that.settleVisible = false;
								that.clear();
								that.jsToJava();
							}
							return
						}
						if (that.payType == "") {
							that.payNum = "";
							that.createOrder.auth_code = "";
							if (res.data.status == "ORDER_CREATE") {
								that.isOrderCreate = 1;
								that.orderId = res.data.order_id;
								that.$Message.success(res.data.message);
							} else if (res.data.status == "PAY_ING") {
								let msg = this.$Message.loading({
									content: "等待支付中...",
									duration: 0,
								});
								that.orderId = res.data.order_id;
								that.checkOrderTime(msg);
							} else if (res.data.status == "SUCCESS") {
								that.$Message.success("支付成功");
								storage.setItem("cashierUser", JSON.stringify(this.userInfo));
								that.settleVisible = false;
								that.clear();
							} else {
								that.orderId = res.data.order_id;
								that.$Message.error(res.data.message);
							}
						}
					}).catch(err => {
						that.$Message.success(err.msg);
					})
					setTimeout(() => {
						that.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) {
				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) {
				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();
			},
			// 删除
			del(ids, type, index, num, name) {
				let that = this
				this.$Modal.confirm({
					title: "删除该服务项目",
					content: "<p>确定要删除该服务项目吗？",
					onOk: () => {
						that.invalidList.splice(index, 1)
						that.computedServe()

					},
					onCancel: () => {},
				});
			},
			delAll() {
				let that = this
				this.$Modal.confirm({
					title: "删除该服务项目",
					content: "<p>确定要删除该服务项目吗？",
					onOk: () => {
						that.invalidList = []
						that.computedServe()
						that.formItem.prices = 0
						that.payInfo = {}
					},
					onCancel: () => {},
				});
			},
			delCart(item, index, num, type) {
				console.log(item, 'ddddddddddddd')
				let ids = [];
				ids.push(item.id);
				this.del({
						ids: ids,
					},
					0,
					index,
					num,
					type
				);
			},
			// 获取用户详情
			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;
							// this.promotionsList = res.data.promotions;
							// this.cartSum = res.data.valid.length;
							if (res.data.valid.length) {} else {
								this.clear();
							}
						})
						.catch((err) => {
							this.$Message.error(err.msg);
						})
						.finally((e) => {
							this.cumping = false;
						});
				} else {
					this.$Message.error("请添加或选择用户");
				}
			},
			// 选择属性
			attrTap(item) {
				console.log(item)
				let that = this
				this.disabled = false;
				if (this.userInfo && this.userInfo.uid >= 0) {
					let slot = this.invalidList.find(itemx => {
						return itemx.id == item.id
					})
					if (!slot) {
						this.invalidList.push(item)
						// 计算价格
						that.computedServe()
					}

				} else {
					this.$Message.error("请添加或选择用户");
				}
			},
			computedServe() {
				let that = this
				that.cartSum = that.invalidList.length;
				if (that.cartSum > 0) {
					let arr = that.invalidList.map(item => {
						return item.product.id
					})
					computedServe({
						uid: that.userInfo.uid,
						products: arr.join(','),
						preferential_price: that.formItem.prices
					}).then(res => {
						that.payInfo = res.data
					})
				} else {
					that.payInfo = {}
				}

			},
			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();
				}
				this.formItem.prices = 0
			},
			changeStaff(type) {
				this.checkType = type
				this.modalStaff = true;
				// if (name == 1) {
				// 	this.modalStaff = true;
				// } 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
				});
			},
			getStaffId(e) {
				// this.clear();
				this.modalStaff = false;
				if (this.checkType == 1) {
					this.staffInfo = e
				} else {
					this.saleInfo = e
				}
			},
			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();
					})
					.catch((err) => {
						this.$Message.error(err.msg);
					});
			},
			// 用户详情操作
			operation(type) {
				this.$refs.userDetails.modals = false;
				if (type === 1) {
					this.rechargeBnt();
				} else {
					this.setUser();
				}
			},
			//商品列表
			goodList(type) {
				this.activityFrom.uid = this.userInfo ? this.userInfo.uid : 0;
				this.activityFrom.type = type;
				this.activityFrom.staff_id = this.storeInfos.id;
				if (!this.userInfo.uid)
					this.activityFrom.tourist_uid = this.userInfo.touristId;
				getServeItem({
					page: 1,
					limit: 1000
				}).then((res) => {
					let data = res.data;
					this.total = data.count;
					this.goodData = data.list;
					this.reloading = false;

				});
			},
			//搜索
			orderSearch() {
				this.goodFrom.page = 1;
				this.goodData = [];
				if (this.activityFrom.type) {
					this.activityFrom.page = 1;
					this.activityFrom.store_name = this.goodFrom.store_name;
					this.goodList(this.activityFrom.type);
				} else {
					this.goodFrom.page = 1;
					this.goodList();
				}
			},
			pageChange(event) {
				if (Math.abs(event.target.scrollHeight - event.target.clientHeight - event.target.scrollTop) < 1) {
					if (this.activityFrom.type) {
						this.activityFrom.page++;
					} else {
						this.goodFrom.page++;
					}
					this.goodList(this.activityFrom.type);
				}
			},
			// 监听键盘函数
			keyboard() {
				console.log("key11")
				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;
					}
				};
			},
			// 转换时间
			changeDate(date) {
				var year = date.getFullYear();
				var month = (date.getMonth() + 1).toString();
				var day = (date.getDate()).toString();
				if (month.length == 1) {
					month = "0" + month;
				}
				if (day.length == 1) {
					day = "0" + day;
				}
				var dateTime = year + "-" + month + "-" + day;
				return dateTime;
			},
			// 打开结算抽屉
			openSettle() {
				this.pptype = 2
				if (!this.staffInfo.id) {
					return this.$Message.error('请选择服务员工');
				}
				if (!this.chooseDay) {
					return this.$Message.error('请选择预约日期');
				}
				if (!this.chooseTime) {
					return this.$Message.error('请选择预约时间');
				}
				this.selectDay = this.changeDate(this.chooseDay) + ' ' + this.chooseTime
				console.log(this.selectDay, 'this.selectDay ')
				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 = true
				this.settleMoney = this.payInfo.pay_price;
				this.collection = this.payInfo.pay_price;
				this.collectionArray = [];
				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;
			},
			readySwiper(swiper) {
				this.swiper = swiper;
			},
			clickSwiper() {
				if (this.swiper.clickedIndex === undefined || this.swiper.clickedIndex === this.swiperClickedIndex) {
					return false;
				}
				this.swiperClickedIndex = this.swiper.clickedIndex;
				this.activityFrom.page = 1;
				this.activityFrom.promotions_id = this.activityTypeArr[this.swiperClickedIndex].id;
				this.goodData = [];
				this.goodList(this.activityFrom.type);
			},
			// 充值余额
			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;
		/* 对垂直流动条有效 */
	}

	/deep/.change-price-modal {
		.ivu-modal-content {
			border-radius: 10px;
		}

		.ivu-modal-body {
			padding: 30px 25px 50px;
		}

		.ivu-form-item:last-child {
			margin-bottom: 0;
		}

		.ivu-form-item-content {
			font-size: 14px !important;
			color: #303133;
		}

		.input-suffix {
			color: #909399;
		}

		.ivu-modal-footer {
			padding: 17px 25px;
			border-top: none;
		}

		.ivu-btn {
			height: 46px;
			border-radius: 23px;
			background: #1890FF;
			font-weight: 500;
			font-size: 16px !important;
		}
	}

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


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

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

		.smCode {
			padding: 0 16px;

			/deep/ .ivu-input-large {
				height: 350px !important;
				text-align: center;
				font-size: 20px !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;
				.name{
					height: 2em;
					margin-bottom: 0 !important;
				}
			}

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


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

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

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

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

	}

	.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;
			.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;
					padding-top: 27px;
				}

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

			.right {
				width: 90px;

				.navTabs {
					position: absolute;
					top: 15px;
					cursor: pointer;

					img {
						display: block;
						width: 40px;
						height: 85px;
					}

					.label01 {
						z-index: 5;
						position: relative;
					}

					.label02 {
						margin-top: -16px;
					}
				}

				.item {
					width: 72px;
					background: #F2F3F5;
					margin: 0 auto 13px auto;
					text-align: center;
					padding: 9px 0;
					cursor: pointer;
					position: relative;

					.iconfont {
						position: absolute;
						font-size: 20px;
						top: -9px;
						right: -7px;
						color: #bbb;
					}

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

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

			.title {
				padding: 0 18px;
				border: 2px solid #FF7700;
				flex-shrink: 0;
				height: 90px;
				background: rgba(255, 119, 0, 0.05);
				border-radius: 10px;
				margin: 0px 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;
				}
			}

			.list::-webkit-scrollbar {
				width: 0 !important;
			}
			.list {
				-ms-overflow-style: none;
				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;
				}
			}
		}
	}

	.header {
		color: #fff;

		.title {
			font-size: 18px;
			font-weight: 500;
		}

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

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

			.storeBnt {
				width: 80px;
				height: 32px;
				background: #FFFFFF;
				border-radius: 1px;
				color: #1890FF;
				font-size: 14px;
				text-align: center;
				line-height: 32px;
				margin-left: 10px;
				cursor: pointer;

				&:hover {
					background-color: rgba(255, 255, 255, 0.9);
				}
			}

			.info {
				font-size: 14px;
				font-weight: 400;
				color: #fff;

				span {
					padding: 0 8px;

					&~span {
						border-left: 1px solid #DDDDDD;
					}
				}
			}

			.bnt {
				margin-left: 20px;
			}
		}
	}
	/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;
		}
	}
	.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%;
			}
		}
	}
</style>