liveShop/pages/user/user.vue

<template>
	<view class="content">
		<view class="top-box">
			<view class="main-box">
				<view class="main-left">
					<view class="avatar">
						<image class="avatarimg" :src="userInfo.avatar || '/static/error/missing-face.png'" mode=""></image>
						<image v-if="userInfo.is_real == 1" class="real" src="../../static/img/real.png" mode=""></image>
					</view>
					<view class="info">
						<view class="userBox">
							<view class="username">{{ userInfo.nickname || '游客' }}</view>
						</view>
						<view class="phone">
							{{ userInfo.level_info ? userInfo.level_info.name : '普通用户' }}
							<view class="text" v-if="userInfo.company == 1">企业认证</view>
						</view>
					</view>
				</view>
				<view class="main-right" @click="navTo('/pages/set/set')"><image src="https://37shop.liuniu946.com/front/img/set.png" mode=""></image></view>
			</view>
		</view>
		<!-- 我的订单 -->
		<view class="my-order">
			<view class="tit">我的订单</view>
			<view class="order-list">
				<view class="list-item" @click="navTo('/pages/order/order?state=0')">
					<view class="item-top position-relative">
						<!-- <image src="https://37shop.liuniu946.com/front/img/img017.png" mode="" style="width: 42rpx;height: 38rpx;"></image> -->
						<image src="../../static/img/1.png" style="width: 42rpx;height: 38rpx;"></image>
						<view class="corner" v-if="orderInfo.unpaid_count > 0">
							<text>{{ orderInfo.unpaid_count }}</text>
						</view>
					</view>
					<view class="item-foot">待付款</view>
				</view>
				<view class="list-item" @click="navTo('/pages/order/order?state=1')">
					<view class="item-top position-relative">
						<image src="../../static/img/2.png" style="width: 42rpx;height: 38rpx;"></image>
						<view class="corner" v-if="orderInfo.unshipped_count > 0">
							<text>{{ orderInfo.unshipped_count }}</text>
						</view>
					</view>
					<view class="item-foot">待发货</view>
				</view>
				<view class="list-item" @click="navTo('/pages/order/order?state=2')">
					<view class="item-top position-relative">
						<image src="../../static/img/3.png" style="width: 42rpx;height: 38rpx;"></image>
						<view class="corner" v-if="orderInfo.received_count > 0">
							<text>{{ orderInfo.received_count }}</text>
						</view>
					</view>
					<view class="item-foot">待收货</view>
				</view>
				<view class="list-item" @click="navTo('/pages/order/order?state=3')">
					<view class="item-top position-relative">
						<image src="../../static/img/4.png" style="width: 42rpx;height: 38rpx;"></image>
						<view class="corner" v-if="orderInfo.evaluated_count > 0">
							<text>{{ orderInfo.evaluated_count }}</text>
						</view>
					</view>
					<view class="item-foot">待评价</view>
				</view>
				<view class="list-item" @click="navTo('/pages/order/order?state=5')">
					<view class="item-top position-relative">
						<image src="../../static/img/5.png" style="width: 42rpx;height: 38rpx;"></image>
						<view class="corner" v-if="orderInfo.evaluated_count > 0">
							<text>{{ orderInfo.evaluated_count }}</text>
						</view>
					</view>
					<view class="item-foot">退款售后</view>
				</view>
			</view>
		</view>
		<!-- 有奖说明 -->
		<view class="award-box"><image src="https://zhibo.liuniu946.com/img/user002.png" mode=""></image></view>
		<!-- 我的工具 -->
		<view class="my-gongju">
			<view class="title">我的工具</view>
			<view class="gonglu-box">
				<view class="box-top">
					<view class="list-item" @click="navTo('/pages/wallet/wallet')">
						<view class="item-top position-relative">
							<image src="https://zhibo.liuniu946.com/img/user016.png" mode="" style="width: 34rpx;height: 32rpx;"></image>
						</view>
						<view class="item-foot">我的余额</view>
					</view>
					<view class="list-item" @click="navTo('/pages/wallet/withdrawal')">
						<view class="item-top"><image src="https://zhibo.liuniu946.com/img/user014.png" mode="" style="width: 40rpx;height: 42rpx;"></image></view>
						<view class="item-foot">我的佣金</view>
					</view>

					<view class="list-item" @click="navTo('/pages/favorites/favorites')">
						<view class="item-top position-relative">
							<image src="https://zhibo.liuniu946.com/img/user013.png" mode="" style="width: 42rpx;height: 38rpx;"></image>
							<view class="corner" v-if="shouchang > 0">
								<text>{{ shouchang }}</text>
							</view>
						</view>
						<view class="item-foot">我的收藏</view>
					</view>
					<view class="list-item" @click="navTo('/pages/address/address')">
						<view class="item-top"><image src="https://zhibo.liuniu946.com/img/user015.png" mode="" style="width: 42rpx;height: 41rpx;"></image></view>
						<view class="item-foot">收货地址</view>
					</view>
				</view>
				<view class="box-top">
					<view class="list-item" @click="navTo('/pages/extension/extension')">
						<view class="item-top"><image src="https://zhibo.liuniu946.com/img/user011.png" mode="" style="width: 42rpx;height: 34rpx;"></image></view>
						<view class="item-foot">我的推广</view>
					</view>
					<view class="list-item" @click="navTo('/pages/user/share')">
						<view class="item-top"><image src="https://zhibo.liuniu946.com/img/user012.png" mode="" style="width: 42rpx;height: 38rpx;"></image></view>
						<view class="item-foot">推广海报</view>
					</view>
					<view class="list-item" @click="navTo('/pages/user/approve')" v-if="showBox">
						<view class="item-top"><image src="https://zhibo.liuniu946.com/img/realName.png" mode="" style="width: 42rpx;height: 38rpx;"></image></view>
						<view class="item-foot">实名认证</view>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<button class="list-item" open-type="contact" style="border:none;width: 25%;margin-left: 0;height: 46px;">
						<view class="item-top"><image src="https://zhibo.liuniu946.com/img/img29.png" mode="" style="width: 42rpx;height: 44rpx;"></image></view>
						<view class="item-foot">联系客服</view>
					</button>
					<!-- #endif -->
					<view class="list-item" @click="smsh()" v-if="userInfo.adminid">
						<view class="item-top"><image src="https://zhibo.liuniu946.com/img/sao.png" mode="" style="width: 42rpx;height: 38rpx;"></image></view>
						<view class="item-foot">扫码核销</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="showBox && userInfo.is_wholesaler == 1" class="chain-box" @click="navTo('/pages/chainGoods/chainGoods')">
			<image src="https://zhibo.liuniu946.com/img/user001.png" mode=""></image>
		</view>
		<!-- 小店管理 -->
		<view class="management" v-if="showBox && showShop">
			<view class="title">小店管理</view>
			<view class="gonglu-box">
				<view class="box-top">
					<view class="list-item" @click="navTo('/pages/product/productGuanli')">
						<view class="item-top"><image src="https://zhibo.liuniu946.com/img/user003.png" mode="" style="width: 42rpx;height: 42rpx;"></image></view>
						<view class="item-foot">商品管理</view>
					</view>
					<view class="list-item" @click="navTo('/pages/order/order1')">
						<view class="item-top"><image src="https://zhibo.liuniu946.com/img/user004.png" mode="" style="width: 36rpx;height: 44rpx;"></image></view>
						<view class="item-foot">订单信息</view>
					</view>

					<view class="list-item" @click="navTo('/pages/shop/earnings')">
						<view class="item-top"><image src="https://zhibo.liuniu946.com/img/user005.png" mode="" style="width: 42rpx;height: 42rpx;"></image></view>
						<view class="item-foot">店铺收益</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 我要申请 -->
		<view class="management" v-if="showBox">
			<view class="title">我要申请</view>
			<view class="gonglu-box">
				<view class="box-top">
					<view class="list-item" @click="navTo('/pages/anchor/commonVip')">
						<view class="item-top"><image src="https://zhibo.liuniu946.com/img/vip.png" mode="" style="width: 45rpx;height: 42rpx;"></image></view>
						<view class="item-foot">付费会员</view>
					</view>
					<view class="list-item" @click="navTo('/pages/anchor/dredge')">
						<view class="item-top"><image src="https://zhibo.liuniu946.com/img/user006.png" mode="" style="width: 45rpx;height: 42rpx;"></image></view>
						<view class="item-foot">创业播主</view>
					</view>
					<view class="list-item" @click="navTo('/pages/anchor/anchorSelection')">
						<view class="item-top"><image src="https://zhibo.liuniu946.com/img/user007.png" mode="" style="width: 44rpx;height: 44rpx;"></image></view>
						<view class="item-foot">主播选品</view>
					</view>
					<view class="list-item" @click="navTo('/pages/freeShop/enterprise')">
						<view class="item-top position-relative">
							<image src="https://zhibo.liuniu946.com/img/qyrz.png" mode="" style="width: 46rpx;height: 40rpx;"></image>
							<view class="type" v-if="userInfo.company == 0" style="background: #ffaa00;"><text>审核中</text></view>
							<view class="type" v-if="userInfo.company == 1" style="background: #f7d2ca;"><text>通过</text></view>
							<view class="type" v-if="userInfo.company == 2" style="background: #5cb900;"><text>失败</text></view>
						</view>
						<view class="item-foot">企业认证</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 申请小店 -->
		<view class="management" v-if="showBox">
			<view class="title">我要开通</view>
			<view class="gonglu-box">
				<view class="box-top">
					<view class="list-item" @click="navTo('/pages/freeShop/business')">
						<view class="item-top"><image src="https://zhibo.liuniu946.com/img/user009.png" mode="" style="width: 44rpx;height: 42rpx;"></image></view>
						<view class="item-foot">创业网店</view>
					</view>
					<view class="list-item" @click="navTo('/pages/freeShop/businessAnchor')">
						<view class="item-top"><image src="https://zhibo.liuniu946.com/img/user010.png" mode="" style="width: 46rpx;height: 40rpx;"></image></view>
						<view class="item-foot">创业播主网店</view>
					</view>
					<view class="list-item" @click="navTo('/pages/freeShop/anchor')">
						<view class="item-top"><image src="https://zhibo.liuniu946.com/img/zhubo.png" mode="" style="width: 46rpx;height: 40rpx;"></image></view>
						<view class="item-foot">播主网店</view>
					</view>
					<view class="list-item" @click="navTo('/pages/freeShop/apply')">
						<view class="item-top"><image src="https://zhibo.liuniu946.com/img/user008.png" mode="" style="width: 42rpx;height: 42rpx;"></image></view>
						<view class="item-foot">免费网店</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popup-box">
				<view class="img"><image src="https://37shop.liuniu946.com/front/img/img009.png" mode=""></image></view>
				<view class="mian">
					<view class="delivery">
						<view class="title">已经为您定制专属客服</view>
						<image src="https://37shop.liuniu946.com/front/img/img010.png" mode=""></image>
					</view>
					<view class="nocancel">客服VX:{{ text }}</view>
					<view class="comfirm-box">
						<view class="cancel" @click="cancel">取消</view>
						<view class="comfirm" @click="comfirm(text)">复制微信</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popuphx" class="agree-wrapper">
			<view class="hx-wrapper">
				<view class="hx-img"><image src="../../static/img/hxbg.png" mode=""></image></view>
				<view class="hx-body">
					<view class="hx-title">输入核销码核销</view>
					<input type="text" v-model="code" placeholder="请输入核销码" placeholder-class="hx-placeholder" />
					<view class="hx-btn" @click="qhx">立即核销</view>
				</view>
				<view class="hx-close" @click="close"><image src="../../static/img/close.png" mode=""></image></view>
			</view>
		</uni-popup>
		<view v-if="showTab">
			<u-tabbar v-if="mystore" v-model="current" :list="tabbar" active-color="#FF0000" inactive-color="#f19c99"></u-tabbar>
			<u-tabbar v-else v-model="current" :list="tabbar1" active-color="#FF0000" inactive-color="#f19c99"></u-tabbar>
		</view>
	</view>
</template>

<script>
import { getSign } from '@/api/contract.js';
import { mapState, mapMutations } from 'vuex';
import uniCopy from '../../components/js_sdk/xb-copy/uni-copy.js';
import { saveUrl, interceptor } from '@/utils/loginUtils.js';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import { orderData, userinfo, commission, orderVerific } from '@/api/user.js';
import { extractBank } from '@/api/wallet.js';
import { spread_people } from '@/api/team.js';
import { tabbar, tabbar1 } from '@/utils/tabbar.js';
import { getcollectList } from '@/api/favorite.js';
export default {
	components: {
		uniPopup
	},
	data() {
		return {
			code: '', //核销码
			mystore: '',
			tabbar: tabbar,
			tabbar1: tabbar1,
			showBox: false,
			showShop: false,
			current: 0,
			levelList: [], // 等级
			withdrawal: '',
			spreadPeople: '',
			orderInfo: {
				complete_count: 0,
				received_count: 0,
				unshipped_count: 0,
				order_count: 0
			},
			shouchang: 0, //收藏数量
			text: 'ch1 25221',
			levelData: [],
			showTab: false, //判断刷新
			istrue: false,
			qiye: false
		};
	},
	computed: {
		...mapState(['hasLogin', 'userInfo', 'baseURL', 'urlFile'])
	},
	onLoad() {
		const obj = this;
		console.log('是否是登陆状态?', this.hasLogin);
		getSign({}, 2, this.userInfo.uid)
			.then(src => {
				console.log('1111111', src);
				if ('sign' in src.data.user_info) {
					obj.istrue = true;
				}
				if (this.userInfo.level == 3 && !this.istrue) {
					uni.showModal({
						title: '友情提示',
						content: '您申请的主播选品审核已通过，是否前往签合同',
						success: e => {
							if (e.confirm) {
								uni.navigateTo({
									url: '/pages/contract/contract?type=2'
								});
							} else if (e.cancel) {
							}
						},
						fail: e => {
							console.log(e);
						}
					});
				}
			})
			.catch(err => {
				console.log(err);
			});
	},
	onHide() {
		this.showTab = false;
	},
	onShow() {
		const value = uni.getStorageSync('mystore');
		// if (value) {
		this.mystore = value;
		// }
		this.showTab = true;
		console.log('是否是登陆状态?', this.hasLogin);
		this.loadBaseData();

		// if (!this.hasLogin) {
		// uni.showModal({
		// 	title: '登录',
		// 	content: '您未登录，是否马上登陆?',
		// 	success: e => {
		// 		if (e.confirm) {
		// 			interceptor();
		// 		}
		// 	},
		// 	fail: e => {
		// 		console.log(e);
		// 	}
		// });
		// return;
		// }
	},
	methods: {
		...mapMutations(['setUserInfo']),
		// 扫描支付
		smsh() {
			// #ifdef H5
			let wx = require('jweixin-module');
			wx.scanQRCode({
				needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
				scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
				success: function(res) {
					var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
					orderVerific({
						verify_code: this.code,
						is_confirm: 1
					})
						.then(res => {
							console.log(res, '++++++++++++++++++++++++++++++');
							this.$refs.popuphx.close();
							this.code = '';
							uni.showToast({
								title: '核销成功',
								duration: 2000
							});
						})
						.catch(err => {
							console.log('dddd');
						});
				}
			});
			// #endif
			// #ifndef H5
			uni.scanCode({
				success: res => {
					this.code = res.result;
					this.srhx();
				}
			});
			// #endif
		},
		qhx() {
			if (this.code == '') {
				return this.$api.msg('请输入核销码');
			}
			uni.showLoading({
				title: '核销中...',
				mask: true
			});
			orderVerific({
				verify_code: this.code,
				is_confirm: 1
			})
				.then(res => {
					uni.hideLoading();
					// this.$api.msg(res.msg)

					console.log(res, '++++++++++++++++++++++++++++++');
					this.$refs.popuphx.close();
					this.code = '';
					this.page = 1;
					this.loadingType = 'more';
					this.goodList = [];
					uni.showToast({
						title: '核销成功',
						duration: 2000
					});
					this.loadData();
				})
				.catch(err => {
					console.log('dddd');
				});
		},
		srhx() {
			this.$refs.popuphx.open();
		},
		close() {
			this.$refs.popuphx.close();
		},
		loadBaseData() {
			const obj = this;
			userinfo({})
				.then(({ data }) => {
					if (data.store_switch == '1') {
						this.showBox = true;
					}
					console.log(data);
					if ('store_info' in data) {
						this.showShop = true;
					}
					this.setUserInfo(data);
					orderData({})
						.then(({ data }) => {
							this.orderInfo = data;
						})
						.catch(e => {
							this.orderinfo = {};
						});
					//收藏数量
					getcollectList({
						page: '1',
						limit: '100000'
					})
						.then(function(e) {
							obj.shouchang = e.data.length;
							console.log(obj.shouchang);
						})
						.catch(function(e) {
							console.log(e);
						});
					// 提现金额
					extractBank({}).then(({ data }) => {
						console.log('data.broken_commission', data.broken_commission);
						this.withdrawal = data.brokerage_price;
					});

					//  推广人数
					spread_people({
						page: 1,
						limit: 10,
						keyword: '',
						sort: 'uid desc',
						grade: 1
					}).then(({ data }) => {
						let total = data.total;
						let totalLevel = data.totalLevel;
						console.log('data.broken_commission', data.broken_commission);
						this.withdrawal = data.brokerage_price;
					});
				})
				.catch(e => {
					console.log(e);
				});
		},
		/**
		 * 统一跳转接口,拦截未登录路由
		 * navigator标签现在默认没有转场动画，所以用view
		 */
		navTo(url) {
			console.log('当前hasLogin状态', this.hasLogin);
			console.log(url);
			if (!this.hasLogin) {
				uni.showModal({
					title: '登录',
					content: '您未登录，是否马上登陆?',
					success: e => {
						if (e.confirm) {
							interceptor();
						}
					},
					fail: e => {
						console.log(e);
					}
				});
				return;
			}
			if (url == '/pages/user/approve') {
				if (this.userInfo.is_real == 1) {
					this.$api.msg('已完成实名认证');
				} else {
					uni.navigateTo({
						url
					});
				}
			} else {
				uni.navigateTo({
					url
				});
			}
		}
	}
};
</script>

<style lang="scss">
.top-box {
	width: 100%;
	height: 360rpx;
	padding-top: var(--status-bar-height);
	background-color: #ff0000;
	.main-box {
		background-color: #ff0000;
		width: 100%;
		height: 360rpx;
		display: flex;
		color: #ffffff;
		padding: 80rpx 35rpx 44rpx;
		justify-content: space-between;
	}
	.main-left {
		height: 120rpx;
		display: flex;
		.avatar {
			position: relative;
			width: 120rpx;
			height: 120rpx;
			.avatarimg {
				border-radius: 60rpx;
				width: 120rpx;
				height: 120rpx;
			}
			.real {
				position: absolute;
				bottom: 0;
				left: 10rpx;
				width: 100rpx;
				height: 30rpx;
			}
		}
		.info {
			margin-left: 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.userBox {
				display: flex;
				align-items: center;
				.username {
					font-size: 44rpx;
				}
				.levelBox {
					margin-left: 22rpx;
					margin-top: 12rpx;
					display: flex;
					align-items: center;
					image {
						width: 34rpx;
						height: 34rpx;
						margin-right: 6rpx;
					}
				}
			}
			.phone {
				margin-top: 12rpx;
				.text {
					display: inline-block;
					height: 40rpx;
					padding: 0 10rpx;
					background: linear-gradient(-35deg, #f8dd4f, #fbeb77);
					border-radius: 24rpx;
					display: inline-block;
					margin-left: 20rpx;
				}
			}
		}
	}
	.main-right {
		height: 120rpx;
		image {
			margin-top: 24rpx;
			width: 44rpx;
			height: 40rpx;
		}
	}
}
.center-box {
	width: 710rpx;
	height: 300rpx;
	margin: -100rpx auto 0;
	position: relative;
	image {
		width: 710rpx;
		height: 300rpx;
	}
	.center {
		position: absolute;
		left: 0;
		top: 0;
		width: 710rpx;
		height: 300rpx;
		.withdraw-box {
			display: flex;
			justify-content: space-between;
			padding: 34rpx 34rpx 44rpx;
			.withdraw-left {
				color: #ffffff;
				font-size: 26rpx;
				.num {
					font-size: 36rpx;
				}
			}
			.withdraw-right {
				width: 160rpx;
				height: 54rpx;
				background-color: #f7d2ca;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 27rpx;
			}
		}
		.per-info {
			width: 100%;
			display: flex;
			color: #ffffff;
			justify-content: space-around;
			.per-item {
				padding: 4rpx 0;
				width: 33.33%;
				display: flex;
				justify-content: center;
				align-items: center;
				display: flex;
				flex-direction: column;
				align-items: center;
				.num {
					margin-top: 20rpx;
					font-size: 36rpx;
				}
			}
		}
	}
}
.updates {
	margin-top: 18rpx;
	width: 100%;
	display: flex;
	justify-content: center;
	image {
		width: 710rpx;
		height: 90rpx;
	}
}
.my-order {
	width: 710rpx;
	height: 238rpx;
	background: #ffffff;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 20rpx;
	// margin: 20rpx auto 0;
	margin: -64rpx auto 0;
	.tit {
		padding-left: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #666666;
		line-height: 80rpx;
		border-bottom: 1px solid #f5f5f5;
	}

	.order-list {
		display: flex;
		text-align: center;
		padding-top: 35rpx;

		.list-item {
			flex: 1;
			.item-top {
				width: 100%;
				height: 43rpx;
				margin-bottom: 20rpx;
			}

			.item-foot {
				font-size: 24rpx;
				font-weight: 500;
				color: #333333;
				line-height: 1;
			}
		}
	}
}
.award-box {
	width: 100%;
	padding: 24rpx 24rpx 0;
	image {
		width: 100%;
		height: 170rpx;
	}
}
.chain-box {
	width: 100%;
	padding: 12rpx 24rpx 0;
	image {
		width: 100%;
		height: 170rpx;
	}
}
.my-gongju {
	width: 710rpx;
	height: 382rpx;
	background: #ffffff;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 20rpx;
	margin: 12rpx auto;

	.title {
		padding-left: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #666666;
		line-height: 80rpx;
		border-bottom: 1px solid #f5f5f5;
	}

	.gonglu-box {
		.box-top {
			display: flex;
			text-align: center;

			.list-item {
				// flex: 1;
				margin-top: 45rpx;
				display: flex;
				flex-direction: column;
				padding: 0;
				width: 25%;
				background: none;
				&::after {
					border: none;
				}
				.item-top {
					width: 100%;
					height: 43rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 20rpx;
				}

				.item-foot {
					font-size: 24rpx;
					font-weight: 500;
					color: #333333;
					line-height: 1;
				}
			}
		}
	}
}
.management {
	width: 710rpx;
	height: 254rpx;
	background: #ffffff;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 20rpx;
	margin: 12rpx auto;

	.title {
		padding-left: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #666666;
		line-height: 80rpx;
		border-bottom: 1px solid #f5f5f5;
	}
	.gonglu-box {
		.box-top {
			display: flex;
			text-align: center;

			.list-item {
				// flex: 1;
				margin-top: 45rpx;
				display: flex;
				flex-direction: column;
				padding: 0;
				width: 25%;
				background: none;
				&::after {
					border: none;
				}
				.item-top {
					width: 100%;
					height: 43rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 26rpx;
					image {
						position: relative;
						z-index: 10;
					}
					.type {
						position: absolute;
						top: -15rpx;
						right: 20rpx;
						font-size: 20rpx;
						// background: #ff0000;
						color: #ffffff;
						padding: 0 6rpx;
						border-radius: 12rpx;
					}
				}

				.item-foot {
					font-size: 24rpx;
					font-weight: 500;
					color: #333333;
					line-height: 1;
				}
			}
		}
	}
}
.popup-box {
	width: 522rpx;
	height: 605rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	position: relative;
	.img {
		position: relative;
		top: -56rpx;
		left: 0;
		width: 522rpx;
		height: 132rpx;
		display: flex;
		justify-content: center;
		image {
			border-radius: 20rpx 20rpx 0 0;
			width: 450rpx;
			height: 132rpx;
		}
	}

	.mian {
		margin-top: -44rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		// padding: 32rpx 32rpx;
		background-color: #ffffff;
		border-radius: 0 0 20rpx 20rpx;
		text-align: center;

		.delivery {
			font-size: 40rpx;
			color: #333333;
			display: flex;
			align-items: center;
			flex-direction: column;
			.title {
			}
			image {
				margin-top: 48rpx;
				width: 172rpx;
				height: 160rpx;
			}
		}

		.nocancel {
			font-size: 32rpx;
			color: #333333;
			margin-top: 14rpx;
		}

		.comfirm-box {
			margin-top: 52rpx;
			display: flex;
			// margin-bottom: 32rpx;

			// justify-content: space-around;
			.cancel {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 197rpx;
				height: 74rpx;
				border: 1px solid #dcc786;
				border-radius: 38rpx;

				font-size: 32rpx;
				color: #605128;
			}

			.comfirm {
				margin-left: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 197rpx;
				height: 74rpx;
				background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%);
				border-radius: 38px;
				font-size: 32rpx;
				color: #605128;
			}
		}
	}
}
.hx-wrapper {
	width: 536rpx;
	height: 630rpx;
	position: relative;

	// background-color: #fff;
	.hx-img {
		width: 536rpx;
		height: 281rpx;

		image {
			width: 536rpx;
			height: 281rpx;
		}
	}

	.hx-close {
		position: absolute;
		left: 243rpx;
		bottom: -80rpx;
		width: 52rpx;
		height: 52rpx;

		image {
			width: 52rpx;
			height: 52rpx;
		}
	}

	.hx-body {
		width: 536rpx;
		height: 349rpx;
		background-color: #fff;
		border-radius: 0 0 10rpx 10rpx;

		.hx-title {
			width: 536rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #333333;
			line-height: 1;
			padding-top: 42rpx;
			text-align: center;
		}

		input {
			width: 439rpx;
			height: 68rpx;
			background: #eeddde;
			border-radius: 10rpx;
			margin: 39rpx auto 0;
			padding-left: 26rpx;

			.hx-placeholder {
				font-size: 26rpx;
				font-weight: 500;
				color: #901b21;
			}
		}

		.hx-btn {
			margin: 44rpx auto 0;
			width: 353rpx;
			height: 71rpx;
			background: #901b21;
			border-radius: 34rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #f8f9f9;
			line-height: 71rpx;
			text-align: center;
		}
	}
}
</style>