<template>
	<scroll-view :scroll-y="true" @scroll="scrollHandler" @scrolltoupper="scrollTopHandler" style="min-height: 100vh;">
		<view class="microshopStyle" v-if="loading==false">
			<view class="headStatus" :style="[headStyle]">
				<view class="arrow" @click="redirectPrev">
					<u-icon name="arrow-left" size="48" color="#000000"></u-icon>
				</view>
				<view class="title" style="color: #000000;">{{pageTitle}}</view>
				<view class="arrow"></view>
			</view>
		</view>
		<view class="microshopStyle" v-if="loading">
			<view class="headStatus" v-if="scrollTop > 50 " :style="[
			    headStyle,
			    {
			      zIndex: scrollTop < 10 ? 'unset' : 2,
			      opacity: scrollTop < 10 ? '100' : scrollTop,
				  background:'#FFF'
			    },
			  ]">
				<view class="arrow" @click="redirectPrev">
					<u-icon name="arrow-left" size="48" color="#000"></u-icon>
				</view>
				<view class="title" style="color: #000000;" v-if="scrollTop > 50">{{pageTitle}}</view>
				<view class="arrow"></view>
			</view>
			<view class="microshopbox" v-if="applyState ==0 || AuditStatus!=2 ">
				<view class="headStatus" :style="[headStyle]">
					<view class="arrow" @click="redirectPrev">
						<u-icon name="arrow-left" size="48" color="#fff"></u-icon>
					</view>
					<view class="title">{{pageTitle}}</view>
					<view class="arrow"></view>
				</view>
				<view class="applyCont" :style="{'margin-top':modelstype+'%'}">
					<view class="applybox">
						<view class="applyitem">
							<image src="../../../static/images/name.png" style="width: 17px;height: 18px;" mode="widthFix"></image>
							<input class="uni-input" style="margin-left: 15px;" v-model="msg.Name" placeholder="请输入店名" />
						</view>
						<view class='applyitem'>
							<u-checkbox-group>
								<u-checkbox v-model="checked" shape="circle" :active-color="mainColor" label-size='28'>我已阅读并同意</u-checkbox>
							</u-checkbox-group>
							<Text style='font-size: 14px;color: #FF4048;' @click='showagreement'>《赞羊协议》</Text>
						</view>
						<view @click="apply" class="apply" v-if="AuditStatus !=1">
							<Text>申请开店</Text>
						</view>
						<view class="apply" style="background:#ababab ;" v-if="AuditStatus ==1">
							<Text>申请开店</Text>
						</view>

					</view>
				</view>
			</view>
			<view style="width: 100%;height: 100%;" v-if="AuditStatus==2">
				<view class="sharebox_top" :style="{ 'background-image': 'url(' + (SmallShops.CustomModel.HeadBackImage ? SmallShops.CustomModel.HeadBackImage : '') + ')', }">
					<view class="headStatus2" :style="[headStyle]">
						<view class="arrow" @click="redirectPrev">
							<u-icon name="arrow-left" size="48" color="#fff"></u-icon>
						</view>
						<view class="title">{{pageTitle}}</view>
						<view class="arrow"></view>
					</view>
					<view class="sharebox_top_t">
						<view class="top_t_l">
							<u-avatar :src="SmallShops.UserInfo.Logo" size="130"></u-avatar>
							<view style="display: flex;flex-direction: column;color: #fff;margin-left: 16px;">
								<view style="display: flex;flex-direction: row;align-items: center">
									<Text style='font-size: 18px;max-width: 150px;overflow: hidden;display: inline-block;white-space: nowrap; text-overflow:ellipsis;'>
										{{SmallShops.UserInfo.UserName}}
									</Text>
									<view class="sj_style" style="" @click="goEdit('/pages/microShop/shopSettings')">
										<image src="../../../static/images/edit_w.png" style="width: 15px;height: 15px;"></image>
									</view>
								</view>
								<Text style='max-width:250px;font-size: 12px;margin-top: 5px;overflow: hidden;display: inline-block;white-space: nowrap; text-overflow:ellipsis;'>
									{{SmallShops.UserInfo.Notice}}
								</Text>
							</view>
						</view>
					</view>
					<view class="sharebox_topc">
						<view class="center_item" style="font-size:  12px;color: #FFFFFF;justify-content: space-between;">
							<Text>{{SmallShops.CustomModel.CommissionWithdrawnName}}</Text>
							<Text>{{SmallShops.UserInfo.TXCommission!=null ?SmallShops.UserInfo.TXCommission:0}}元</Text>
						</view>
						<view style="width: 0.3px;height: 25px;background: #FFFFFF;justify-content: space-between;"></view>
						<view class="center_item" style="font-size:  12px;color: #FFFFFF;">
							<Text>{{SmallShops.CustomModel.OutstandingCommissionName}}</Text>
							<Text>{{SmallShops.UserInfo.WJSCommission!=null ?SmallShops.UserInfo.WJSCommission:0}}元</Text>
						</view>
					</view>
				</view>
				<view class="sharebox_c">
					<view style="display: flex;flex-direction: row;align-items: center;height: 55px;margin-left: -30px;">
						<image src="../../../static/images/yue.png" style="width: 25px;height: auto;" mode='widthFix'></image>
						<view style="display: flex;flex-direction: column;margin-left: 17px;height: 100%;justify-content: space-between;">
							<Text style='font-size: 22px;'>{{SmallShops.UserInfo.CommissionWithdrawal!=null ?SmallShops.UserInfo.CommissionWithdrawal:0}}
								<Text style='font-size: 14px;'>元</Text> </Text>
							<text>{{SmallShops.CustomModel.WithdrawableName}}</text>
						</view>
					</view>
					<view style="width: 60px;height: 30px;border-radius: 15px;color: #fff; margin-right: -30px;background-image: linear-gradient( to right,#FF8585,#ED4353);text-align: center;line-height: 30px;"
					 @click="goUrl('/pages/microShop/wdCase')" v-if="SmallShops.UserInfo.CommissionWithdrawal>0">
						<Text>{{SmallShops.CustomModel.WithdrawalText}}</Text>
					</view>
					<view style="width: 60px;height: 30px;border-radius: 15px;color: #fff; margin-right: -30px;background: #ababab;text-align: center;line-height: 30px;"
					 v-if="SmallShops.UserInfo.CommissionWithdrawal<=0">
						<Text>{{SmallShops.CustomModel.WithdrawalText}}</Text>
					</view>
				</view>
				<view class="sharebox_menus">
					<!-- 店铺订单 -->
					<view class="menus_item" @click="goUrl('/pages/microShop/wdOrder')">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<image :src="SmallShops.CustomModel.SmallShopOrderImage" style="width: 14px;height: auto;" mode='widthFix'></image>
							<text style="font-size: 13px;color:#07090D;margin-left: 15px;">{{SmallShops.CustomModel.SmallShopOrderName}}</text>
						</view>
						<view style="display: flex;flex-direction: row;align-items: center;">
							<text :style="{color:mainColor}">{{SmallShops.UserInfo.OrderCommission!=null ?SmallShops.UserInfo.OrderCommission:0}}</text>
							<text style="color: #A5A3AB;margin-right: 5px;">元</text>
							<u-icon name="arrow" size="24" color="#A5A3AB"></u-icon>
						</view>
					</view>
					<!-- 提现明细 -->
					<view class="menus_item" @click="goUrl('/pages/microShop/wdWithdrawal')">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<image :src="SmallShops.CustomModel.WithdrawalDetailImage" style="width: 14px;height: auto;" mode='widthFix'></image>
							<text style="font-size: 13px;color:#07090D;margin-left: 15px;">{{SmallShops.CustomModel.WithdrawalDetailName}}</text>
						</view>
						<view style="display: flex;flex-direction: row;align-items: center;">
							<text :style="{color:mainColor}">{{SmallShops.UserInfo.RemitMoney!=null ?SmallShops.UserInfo.RemitMoney:0}}</text>
							<text style="color: #A5A3AB;margin-right: 5px;">元</text>
							<u-icon name="arrow" size="24" color="#A5A3AB"></u-icon>
						</view>
					</view>
					<!-- 我的客户 -->
					<view class="menus_item" @click="goUrl('/pages/microShop/myClients/myClients')">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<image :src="SmallShops.CustomModel.MyCustomerImage" style="width: 14px;height: auto;" mode='widthFix'></image>
							<text style="font-size: 13px;color:#07090D;margin-left: 15px;">{{SmallShops.CustomModel.MyCustomerName}}</text>
						</view>
						<view style="display: flex;flex-direction: row;align-items: center;">
							<text :style="{color:mainColor}">{{SmallShops.UserInfo.ReferralsNum!=null ?SmallShops.UserInfo.ReferralsNum:0}}</text>
							<text style="color: #A5A3AB;margin-right: 5px;">人</text>
							<u-icon name="arrow" size="24" color="#A5A3AB"></u-icon>
						</view>
					</view>
					<!-- 店铺二维码 -->
					<view class="menus_item" @click="goQRcode">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<image :src="SmallShops.CustomModel.SmallShopQRCodeImage" style="width: 14px;height: auto;" mode='widthFix'></image>
							<text style="font-size: 13px;color:#07090D;margin-left: 15px;">{{SmallShops.CustomModel.SmallShopQRCodeName}}</text>
						</view>
						<view style="display: flex;flex-direction: row;align-items: center;">
							<u-icon name="arrow" size="24" color="#A5A3AB"></u-icon>
						</view>
					</view>
				</view>
				<!-- 店铺设置 -->
				<view class="sharebox_menus">
					<view class="menus_item" @click="goUrl('/pages/microShop/storeManagement/index')">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<image :src="SmallShops.CustomModel.SmallShopSetUpImage" style="width: 14px;height: auto;" mode='widthFix'></image>
							<text style="font-size: 13px;color:#07090D;margin-left: 15px;">{{SmallShops.CustomModel.SmallShopSetUpName}}</text>
						</view>
						<view style="display: flex;flex-direction: row;align-items: center;">
							<u-icon name="arrow" size="24" color="#A5A3AB"></u-icon>
						</view>
					</view>
				</view>
				<!-- 底部预留空间 -->
				<view style="width: 100%;height: 30px;background: #f3f4f6;"></view>
			</view>
			<view class="agreementbox" v-if='isshowagreement==true || isshowagreement_t == true'></view>
			<view class="agreementbox_t" v-if='isshowagreement==true'>
				<view class="agreement_b">
					<Text style='height: 40px;line-height: 40px;'>开店申请协议</Text>
					<!-- <view>TODO内容</view> -->
					<view style="width: 100%;height: 760rpx;padding: 20rpx;">
						<Text>{{shopBasics.model.ApplyAgreement}}</Text>
					</view>
					<view class="agreement_bottom" :style="{background:mainColor}" @click="read">
						<Text style='color: #fff;'>我已阅读</Text>
					</view>
				</view>
			</view>
			<view class="agreementbox_t" v-if='isshowagreement_t==true'>
				<view class="tips_state">
					<view style="color: #111111;font-size: 13px;margin-top: 306rpx;">{{AuditStatus ==1?'已提交，审核中':'已拒绝，重新申请'}} </view>
					<view @click="isshowagreement_t = false" class="apply" style="width: 80%;margin-top: 30px;">
						<Text>知道了</Text>
					</view>
				</view>
			</view>
		</view>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth='goback'></auth>
		<u-popup v-model="QRcodeShow" mode="center" length="88%">
			<view class="wdpopup">
				<view class="wdP_top">
					<u-avatar :src="SmallShops.UserInfo.Logo" size="130"></u-avatar>
					<view style="display: flex;flex-direction: column;margin-left: 16px;">

						<Text style='font-size: 18px;max-width: 150px;overflow: hidden;display: inline-block;white-space: nowrap; text-overflow:ellipsis;'>
							{{SmallShops.UserInfo.UserName}}
						</Text>
						<Text style='max-width:250px;font-size: 12px;margin-top: 5px;overflow: hidden;display: inline-block;white-space: nowrap; text-overflow:ellipsis;'>
							{{SmallShops.UserInfo.Notice}}
						</Text>
					</view>
				</view>
				<view style="width: 90%;height: 1px;background: #E2E2E2;"></view>
				<image :src="fenxqrcode" style="width: 212px;height: 212px;margin: 15px 0;"></image>
				<view style="width: 90%;height: 45px;border-radius: 22.5px;display: flex;align-items: center;justify-content: center;background: #FF4048;margin: 15px 0;"
				 @click="preservation">
					<text style="font-size: 16px;color: #FFF;">保存图片分享赚钱</text>
				</view>
				<view style="position: absolute;right: 0;top: 0;width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;"
				 @click="QRcodeShow= false">
					<u-icon name="cross" size="24" color="#000"></u-icon>
				</view>
			</view>
		</u-popup>
		<u-top-tips ref="uTips"></u-top-tips>
	</scroll-view>
</template>

<script>
	import auth from "../../../components/auth/index.vue";
	export default {
		components: {
			auth,
		},
		data() {
			return {
				loading: false,
				pageTitle: '开店申请',
				showAuth: false,
				nav: 0,
				headStyle: {},
				msg: {
					Name: '',
				},
				contentHeight: 0,
				checked: false,
				isshowagreement: false,
				isshowagreement_t: false,
				mainColor: '',
				showAuth: false,
				u: {},
				applyState: 0, //id==0  ，
				AuditStatus: 0, //审核状态  1审核中  2通过  3拒绝
				ApplyInfo: {},
				shopBasics: {},
				SmallShops: {},
				scrollTop: 0,
				QRcodeShow: false,
				fenxqrcode: '',
				modelstype: 60,
			}
		},
		created() {
			this.nav = uni.getMenuButtonBoundingClientRect().top;
			this.mainColor = this.$uiConfig.mainColor;
			this.headStyle.paddingTop = this.nav + 'px';
			let c = this.$uiConfig.is_bang ? 80 : 52;
			this.contentHeight = this.$utils.calcContentHeight(c);
			console.log(this.contentHeight)
			if (this.contentHeight > 670) {
				this.modelstype = 80
			}
		},
		onLoad() {
			this.u = uni.getStorageSync("mall_UserInfo");
			if (!this.u) {
				this.u = {
					nickName: "未登录",
					avatarUrl: ""
				};
				this.showAuth = true;
			} else {
				this.init()
			}
		},
		methods: {
			reloadUserinfo() {
				this.u = uni.getStorageSync("mall_UserInfo");
				this.init()
			},
			goback() {
				uni.navigateBack()
			},
			scrollHandler(e) {
				this.scrollTop = e.detail.scrollTop;
			},
			scrollTopHandler() {
				this.scrollTop = 0;
			},
			showagreement() {
				this.isshowagreement = true
			},
			read() {
				this.checked = true;
				this.isshowagreement = false
			},
			init() {
				uni.showLoading({
					title: '加载中...'
				});
				uni.showNavigationBarLoading();
				this.request2({
						url: '/api/AppletUser/GetSmallShopsApplyInfo',
						data: {}
					},
					(res) => {

						this.getMicroShopBasics()
						this.applyState = res.data.Id;
						if (res.data.Id != 0 && res.data.AuditStatus == 2) {
							let UserInfo = uni.getStorageSync('mall_UserInfo') ? uni.getStorageSync('mall_UserInfo') : {};
							if (UserInfo.SmallShopId == 0) {
								UserInfo.SmallShopId = res.data.Id
								uni.setStorageSync("mall_UserInfo", UserInfo);
							}
						}
						this.AuditStatus = res.data.AuditStatus;
						this.ApplyInfo = res.data;
						if (this.AuditStatus == 1 || this.AuditStatus == 3) {
							this.isshowagreement_t = true
						}
					}
				);
			},
			getMicroShopBasics() { //获取基础设置数据
				this.request2({
						url: '/api/AppletUser/GetMicroShopBasics',
						data: {}
					},
					(res) => {
						uni.hideNavigationBarLoading()
						uni.hideLoading();
						this.loading = true, //接口掉用完之后才显示页面
							this.shopBasics = res.data;
						if (this.AuditStatus == 2) {
							this.getSmallShopsCenter() //获取微店信息
							this.pageTitle = '微店中心'
						}
					}
				);
			},
			getSmallShopsCenter() {
				this.request2({
						url: '/api/AppletUser/GetSmallShopsCenter',
						data: {}
					},
					(res) => {
						this.SmallShops = res.data
					}
				);
			},
			apply() {
				let that = this
				uni.requestSubscribeMessage({
					tmplIds: that.shopBasics.template_message_list,
					complete(res) {
						if (that.checked == false) {
							uni.showToast({
								title: "请先查看协议并同意",
								icon: "none"
							});
							return false
						}
						if (that.msg.Name == '') {
							uni.showToast({
								title: "请输入店名",
								icon: "none"
							});
							return false
						}
						uni.showLoading({
							title: '申请中...'
						});
						that.request2({
								url: '/api/AppletUser/ApplySmallShopsInfo',
								data: that.msg
							},
							(res) => {
								uni.hideLoading();
								that.init()
								if (this.shopBasics.IsExamine == 1) {
									this.getSmallShopsCenter() //获取微店信息
									this.pageTitle = '微店中心'
								}
							}
						);
					}
				})
			},
			goUrl(url) {
				console.log(url)
				uni.navigateTo({
					url: url
				});
			},
			goEdit(url) {
				let data = encodeURIComponent(JSON.stringify(this.SmallShops.UserInfo))
				uni.navigateTo({
					url: url + '?data=' + data
				});
			},
			redirectPrev() {
				if (this.prevPage != "") {
					uni.navigateBack({
						delta: 1,
					});
				}
			},
			goQRcode() {
				this.QRcodeShow = true;
				let that = this
				let UserInfo = uni.getStorageSync('mall_UserInfo') ? uni.getStorageSync('mall_UserInfo') : {};
				let SmallShopId = this.applyState
				uni.showNavigationBarLoading();
				let Up = uni.getStorageSync("mall_UserInfo") ? uni.getStorageSync("mall_UserInfo").UserPageType : 0;
				that.request2({
						url: '/api/AppletUser/GetWeiXinQRCodeForAppletSmallShops',
						data: {
							Path: 'pages/index/index?user_id=' + UserInfo.UserId + '&SmallShopId=' + SmallShopId + "&Up=" + Up,
							With: 212,
						}
					},
					(res) => {
						uni.hideNavigationBarLoading()
						that.fenxqrcode = that.host2 + res.data;
						console.log(that.fenxqrcode)
					}
				);
			},
			preservation() {
				let that = this;
				uni.getImageInfo({
					src: that.fenxqrcode,
					success: function(image) {
						uni.showLoading({
							title: "正在保存",
						});
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success: function() {
								uni.showToast({
									title: "保存成功",
								});
							},
							fail: function(err) {
								console.log(err)
								if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
									uni.authorize({
										scope: 'scope.writePhotosAlbum',
										success: (res) => {
											console.log('11111');
										},
										fail: (res) => {
											uni.showModal({
												content: '检测到您没打开保存到相册权限，是否去设置打开？',
												confirmText: "确认",
												cancelText: '取消',
												success: (res) => {
													if (res.confirm) {
														uni.openSetting({
															success: (res) => {
																console.log(res);
																if (res.authSetting['scope.writePhotosAlbum']) {
																	that.preservation()
																}
															}
														})
													} else {
														console.log('取消');
													}
												}
											})
										}
									})
								} else {
									that.$refs.uTips.show({
										title: "保存失败，请稍后重试",
										type: "error",
										duration: "2300",
									});
								}
							},
							complete: function() {
								uni.hideLoading();
							},
						});
					}
				});
			}
		}
	}
</script>

<style>
	.microshopStyle {
		width: 100%;
		height: 100vh;
		background: #f3f4f6;
	}

	.microshopStyle .microshopbox {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-image: url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/1597233144000_702.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.microshopStyle .headStatus {
		overflow: hidden;
		position: relative;
		width: 140vw;
		padding-right: 40vw;
		padding-bottom: 10px;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.microshopStyle .headStatus2 {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;
		color: #FFFFFF;
	}

	.microshopStyle .arrow {
		height: 24px;
		margin: 5px 10px;
		width: 24px;
	}

	.microshopStyle .headStatus .title {
		font-size: 16px;
		color: #FFF;
		line-height: 34px;
	}

	.microshopStyle .applyCont {
		width: 100%;
		margin-top: 60%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.microshopStyle .applybox {
		width: 74%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.microshopStyle .applyitem {
		width: 100%;
		height: 40px;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 1px solid #E2E2E2;
		margin-top: 30px;
	}

	.microshopStyle .apply {
		width: 100%;
		height: 45px;
		border-radius: 22.5px;
		background: #FF4048;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		color: #FFFFFF;
		margin-top: 60px;
	}

	.microshopStyle .agreementbox {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: #333333;
		opacity: 0.3;
		z-index: 888;
	}

	.microshopStyle .agreementbox_t {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.microshopStyle .agreementbox_t .agreement_b {
		width: 80%;
		border-radius: 10px;
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: hidden;
	}

	.microshopStyle .agreementbox_t .agreement_bottom {
		width: 100%;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.microshopStyle .tips_state {
		width: 509rpx;
		height: 554rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-image: url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/wdtzbg.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.microshopStyle .sharebox_top {
		width: 100%;
		height: 242px;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.microshopStyle .sharebox_top .sharebox_top_nav {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 44px;
		padding: 0 10px;
	}

	.microshopStyle .sharebox_top .sharebox_top_t {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 20px;
	}

	.microshopStyle .sharebox_top .sharebox_top_t .top_t_l {
		margin-left: 30px;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
	}

	.microshopStyle .sharebox_topc {
		width: 94%;
		height: 40px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		padding: 0 20px;
		margin-top: 18px;
	}

	.microshopStyle .center_item {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.microshopStyle .sharebox_c {
		width: 94%;
		margin-left: 3%;
		height: 99px;
		border-radius: 10rpx;
		background: #fff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		margin-top: -15px;
	}

	.microshopStyle .sharebox_menus {
		width: 94%;
		margin-left: 3%;
		border-radius: 10rpx;
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 10px;
	}

	.microshopStyle .sharebox_menus .menus_item {
		width: 100%;
		height: 45px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
	}

	.microshopStyle .sharebox_menus .menus_item .item_text {
		font-size: 13px;
		margin: 5px 0;
	}

	.microshopStyle .sj_style {
		margin-left: 20px;
	}

	.wdpopup {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #FFF;
		border-radius: 10px;
		position: relative;
	}

	.wdpopup .wdP_top {
		width: 90%;
		height: 65px;
		margin: 10px 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 20px;
	}
</style>
