<template>
	<view class="mine">
		<uni-nav-bar left-text=" " color="#fff" backgroundColor="transparent" :border="false" :statusBar="true"
			:fixed="false"></uni-nav-bar>

		<view class="user-card">
			<view class="user-info" @click="toChange">
				<view class="avatar">
					<image :src="userinfo.headimg" mode="scaleToFill" />
				</view>

				<view class="info">
					<view v-if="userinfo.nickname" class="nick hang1">
						{{ userinfo.nickname }}
					</view>

					<view v-else class="nick">未登录</view>

					<view v-if="userinfo" class="user-day">
						已经陪你走过了{{ userinfo.day }}天
					</view>
				</view>
			</view>

			<view v-if="userinfo" class="lv-box align-center justify-between"
				@click="$c.to({ url: '/package/mine/equity' })">
				<text class="lv-box-dengji">LV.{{ userinfo.quan_yi_level.level }}</text>
				<view class="lv-box-ouqi column">
					<text>
						<template v-if="userinfo.quan_yi_level.cha > 0">还差{{ userinfo.quan_yi_level.cha
						}}欧气值升级</template>
						<template v-if="userinfo.quan_yi_level.cha == -1">已满级</template>
					</text>
					<view class="mt10 relative">
						<!-- <text class="lv-box-num">{{userinfo.quan_yi_level.jindu+'%'}}</text> -->
						<cmd-progress :percent="userinfo.quan_yi_level.jindu" :show-info="false" stroke-color="#FF862D"
							:strokeWidth="3"></cmd-progress>
					</view>
				</view>
				<text class="lv-box-detail center" @click="$c.to({ url: '/package/mine/equity' })">查看详情</text>
				<image style="width: 206rpx; height: 206rpx; position: absolute; top: -40rpx; right: 8rpx;"
					:src="$img1('my/ou.png')">
				</image>
			</view>

			<!-- <view class="rbtn btn1 flex" @click="$c.to({ url: '/package/index/sign' })">
				<image class="img100" :src="$img1('my/sign.png')"></image>
			</view> -->

		</view>

		<view class="money-card">
			<view class="other-num">
				<view class="other-item" @click="$c.to({ url: '/pages/user/yetx' })">
					<view class="title">{{ $config.getAppSetting('balance_name') }}</view>

					<view class="flex row">
						<view class="num" style="">{{ formatNumber(userinfo.money) }}</view>
						<!-- <image :src="$img1('my/ic_recharge.png')" style="width: 83rpx; height: 48rpx; margin-left: 10rpx;" mode=""></image> -->
					</view>


				</view>
				<view class="other-item" @click="$c.to({ url: '/pages/user/bi_jl' })">
					<view class="title">{{ $config.getAppSetting('currency1_name') }}</view>
					<view class="num" style="color: #333333;">{{ formatNumber(userinfo.integral) }}
					</view>
				</view>

				<view class="other-item" @click="$c.to({ url: '/pages/user/jf_jl' })">
					<view class="title">{{ $config.getAppSetting('currency2_name') }}</view>
					<view class="num" style="color: #333333;">{{ formatNumber(userinfo.money2) }}
					</view>
				</view>
			</view>
		</view>

		<view v-if="taskList.length > 0" class="task">
			<view class="task-title">主要任务</view>
			<view
				style="width: 622rpx; height: 2rpx; background-color: #F3F3F3; margin-left: 32rpx; margin-top: 34rpx;">
			</view>
			<view class="task-list">
				<view class="task-item" v-for="(item, i) in taskList" :key="i">
					<view class="task-l">
						<view class="title">{{ item.title }} ({{ item.ywc_count }}/{{ item.number }})</view>

						<view class="num">欧气值+{{ item.z_number }}</view>

						<!-- 	<view class="progress">
							<view class="progress-inner">
								<cmd-progress :percent="item.percentage" :show-info="false"
									stroke-color="linear-gradient(90deg, #7836FF 0%, #A465F2 100%)"
									:strokeWidth="8"></cmd-progress>
							</view>
						</view> -->

					</view>

					<view class="task-r">
						<view v-if="item.is_complete == 0" class="btn" @click="toPage(item.id)">
							<text>去完成</text>

						</view>

						<view v-if="item.is_complete == 1" class="btn act" @click="completeTask(item)">
							<text>待领取</text>
						</view>

						<view v-if="item.is_complete == 2" class="btn dis">
							<text>已领取</text>
						</view>
					</view>
				</view>
			</view>

		</view>


		<view class="qita mt30">
			<view class="qita-title">其他服务</view>
			<view class="menu-card">
				<template v-for="(item, i) in menuList">
					<view v-if="item.show" class="menu-item" :key="i" @click="menuTo(item)">
						<view class="icon">
							<image :src="$img1(item.icon)" mode=""></image>
						</view>
						<view class="title">
							{{ item.title }}
						</view>
					</view>
				</template>
				<view class="menu-item relative" :key="-1">
					<view class="icon">
						<image :src="$img1('my/s9.png')" mode=""></image>
					</view>
					<view class="title">
						客服
					</view>
					<button class="hide" open-type="contact"></button>
				</view>
			</view>
		</view>
		<!-- #ifdef MP -->
		<!-- <view class="copyright"></view> -->
		<!-- #endif -->
		<!-- 群聊弹窗 -->
		<uni-popup ref="qunliao_show" type="center" maskBackgroundColor="rgba(0,0,0,0.8)">
			<view class="pop-ball">
				<image show-menu-by-longpress
					src="https://image.zfunbox.cn/topic/20250418/0b40de65d2fc4801517569193bfd4cac.png" mode="aspectFit"
					style="width:80vw;height:468px;position:relative;top:-14%;left:0;">
				</image>
			</view>
			<view class="pop-ball-close flex" @click="$refs.qunliao_show.close()">
				<view style="width: 48rpx;height: 48rpx;border-radius: 50%;opacity: 0.5;">
					<image show-menu-by-longpress :src="$img1('common/close.png')" class="img100" />
				</view>
			</view>
		</uni-popup>

		<!-- 星钻充值弹窗 -->
		<uni-popup ref="chongzhi_show" type="bottom">
			<view class="order animated fadeInUp">
				<view class="order_title">
					<view class="title">星钻充值</view>
					<view class="ca" @click="$refs.chongzhi_show.close()">
						<image :src="$img('/static/icon/close1.png')"
							style="width: 30rpx; height: 30rpx; margin-top: 14rpx">
						</image>
					</view>
				</view>
				<view class="pop_coucent">
					<view>选择充值金额</view>
					<view class="pop_box">
						<view class="common_bg" @click="money_1 = v" v-for="(v, i) in moneyArr" :key="i" :style="{
							'background-image': `url(${$img(
								money_1 == v
									? '/static/img/mine_chong_tab_bg_act.png'
									: '/static/img/mine_chong_tab_bg.png'
							)})`
						}">
							￥
							<text style="font-size: 32rpx">{{ v }}</text>
						</view>
					</view>
				</view>
				<view class="pop_coucent">
					<view>输入充值金额</view>
					<input type="text" placeholder="请输入金额，最低1元" v-model="money_1" placeholder-style="color:#999999" />
				</view>

				<view class="chong-bt">
					<view class="money">需支付:{{ money_1 || 0 }}元</view>

					<view @click="chongzhi_click" class="pay-btn common_bg" :style="{
						'background-image': `url(${$img('/static/img/mine_qrcz.png')})`
					}"></view>
				</view>

				<!-- <view
          class="pop_chongzhi"
          @click="chongzhi_click"
          :style="
            'background: url(' +
            z_imgPath +
            'mine/allBtn_bg.png' +
            ') no-repeat 0 0 / 100% 100%;'
          "
        >
          确认充值
        </view> -->
			</view>
		</uni-popup>
		<!-- 星钻提现 -->
		<view class="mengban animated fadeIn" v-if="tixian_show">
			<view class="order animated fadeInUp">
				<view class="order_title">
					<image :src="z_imgPath + 'mine/tx_tips.png'" style="width: 162rpx; height: 47rpx"></image>
					<view class="ca" @click="tixian_show = false">
						<image :src="z_imgPath + 'mine/qu_close.png?11'"
							style="width: 48rpx; height: 48rpx; margin-top: 14rpx">
						</image>
					</view>
				</view>
				<view class="pop_head">
					<view @click="tixian_index = 1">
						<text :class="tixian_index == 1 ? 'xzs' : 'wzs'">微信零钱</text>
						<view class="qiehuan_line" v-if="tixian_index == 1"></view>
					</view>
					<view @click="tixian_index = 2">
						<text :class="tixian_index == 2 ? 'xzs' : 'wzs'">支付宝</text>
						<view class="qiehuan_line" v-if="tixian_index == 2">
							<!-- <image src="../../static/shouye/top.png"></image> -->
						</view>
					</view>
				</view>
				<view class="pop_coucent" v-if="tixian_index == 1">
					<view>输入提现金额</view>
					<view class="flex_center pop_tixian_input">
						<input type="number" placeholder="￥请输入金额，最低1元" placeholder-style="font-size:24rpx"
							:value="money_2" @input="getmoney_2" />
						<view style="color: #1ff7f0" @click="money_2 = userinfo.money">
							全部提现
						</view>
					</view>
					<view class="flex_center" style="justify-content: space-between">
						<view>到账账户</view>
						<view style="color: #999999">微信零钱</view>
					</view>
				</view>
				<view class="pop_coucent" style="padding: 0 30rpx" v-if="tixian_index == 2">
					<view class="flex_center name_phone">
						<view>姓名</view>
						<input type="text" placeholder="请输入姓名" @input="getname" />
					</view>
					<view class="flex_center name_phone">
						<view>账户</view>
						<input type="text" placeholder="请输入支付宝账号" @input="getnumber" />
					</view>
					<view style="margin-top: 30rpx">输入提现金额</view>
					<view class="flex_center pop_tixian_input" style="border: none">
						<input type="number" placeholder="￥请输入金额，最低1元" placeholder-style="font-size:24rpx"
							:value="money_2" @input="getmoney_2" />
						<view style="color: #1ff7f0" @click="money_2 = userinfo.money">
							全部提现
						</view>
					</view>
				</view>
				<view class="pop_chongzhi" @click="tixian_click" :style="'background: url(' +
					z_imgPath +
					'mine/allBtn_bg.png' +
					') no-repeat 0 0 / 100% 100%;'
					">
					确认提现
				</view>
				<!-- <image :src="z_imgPath+'mine/qrtx.png'" class="pop_chongzhi" @click="tixian_click()"></image> -->
			</view>
		</view>
		<!-- <tab-bar :index="4"></tab-bar> -->
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				z_imgPath: this.$z_img2,
				userinfo: '',
				moneyArr: [100, 200, 500, 1000, 3000],
				menuList: [{
						id: 1,
						show: true,
						title: '消费记录',
						icon: 'my/s1.png',
						path: '/pages/other/order_list'
					},
					{
						id: 2,
						show: true,
						title: '兑换记录',
						icon: 'my/s2.png',
						path: '/pages/user/hsjl'
					},
					{
						id: 3,
						show: true,
						title: '我的收藏',
						icon: 'my/s3.png',
						path: '/package/mine/collect'
					},
					{
						id: 4,
						show: true,
						title: '优惠券',
						icon: 'my/s4.png',
						path: '/pages/user/coupon'
					},
					{
						id: 5,
						show: true,
						title: '邀请好友',
						icon: 'my/s5.png',
						path: '/pages/user/tui-guang'
					},
					{
						id: 6,
						show: true,
						title: '加入福利群',
						icon: 'my/s6.png',
						path: ''
					},
					{
						id: 7,
						show: true,
						title: '用户协议',
						icon: 'my/s7.png',
						path: '/pages/guize/guize?type=4'
					},
					// {
					// 	id: 8,
					// 	show: true,
					// 	title: '道具卡',
					// 	icon: 'my/s8.png',
					// 	path: '/package/mine/skill-card'
					// },
					// {
					//   id: 9,
					//   show:true,
					//   title: '挂售记录',
					//   icon: '/static/img/2_gsjl.png',
					//   path: ''
					// },
					// {
					//   id: 10,
					//   show:true,
					//   title: '晋升排行榜',
					//   icon: '/static/img/2_jsphb.png',
					//   path: '/pages/shouye/bangdan'
					// },
				],
				// 星钻充值金额
				money_1: '',
				// 二维码
				ewm: '',
				// 1:微信提现 2:支付宝提现
				tixian_index: 1,
				// 星钻提现金额
				money_2: '',
				// 提现姓名
				name: '',
				// 提现账户
				number: '',
				// 收藏数组
				mycollectArr: [],

				list: [{
						// img: 'mine/img01.png?1',
						// sel: 'mine/sel01.png?1',
						name: '一番赏收藏'
					},
					{
						// img: 'mine/img02.png?1',
						// sel: 'mine/sel02.png?1'
						name: '无限池收藏'
					}
				],
				show: 1,
				tixian_show: false,
				taskList: []
			}
		},
		onLoad(e) {
			if (e.ou_coupon_id) {
				uni.setStorageSync('_ou_coupon_id', e.ou_coupon_id)
			}
			if (e.pid) {
				uni.setStorageSync('pid', e.pid)
			}
		},
		onHide() {
			uni.setStorageSync('page', this.$mp.page.route)
		},
		onShareAppMessage() {
			return {
				title: "友达赏，正版潮玩手办一番赏",
				// imageUrl: '',
				path: '/pages/user/index?pid=' + uni.getStorageSync('userinfo').ID
			}
		},
		onShow() {
			this.getdata()
			// this.getmycollect()
			let that = this
			const curPages = getCurrentPages()[0]; // 获取当前页面实例
			if (typeof curPages.getTabBar === 'function' && curPages.getTabBar()) {
				this.$mp.page.getTabBar().setData({
					selected: 4
				});
			}
		},
		methods: {
			toChange() {
				var user = uni.getStorageSync('userinfo');
				if (user == null || user == "" || this.userinfo == '') {
					this.$c.nav("/pages/user/login")
					return;
				}

				this.$c.to({
					url: '/pages/user/change'
				})
			},
			receiveCoupon() {
				const coupon_id = uni.getStorageSync('_ou_coupon_id')

				this.req({
					url: 'coupon_ling',
					data: {
						coupon_id
					},
					success: res => {
						uni.removeStorageSync('_ou_coupon_id')

						if (res.status == 1) {
							this.$c.toast({
								title: res.msg,
								duration: 500,
								success: () => {
									this.$c.to({
										url: '/package/mine/coupon-detail',
										query: {
											id: coupon_id
										}
									})
								}
							})
						} else if (res.status == 2222) {
							this.$c.to({
								url: '/package/mine/coupon-detail',
								query: {
									id: coupon_id
								}
							})
						}
					}
				})
			},

			completeTask(item) {
				this.req({
					url: 'ling_task',
					data: {
						task_list_id: item.id
					},
					success: res => {
						if (res.status == 1) {
							this.$c.toast({
								title: res.msg,
								duration: 500,
								success: () => {
									this.getdata()
								}
							})
						}
					}
				})
			},

			menuTo(item) {
				switch (item.id) {
					case 6:
						this.$refs.qunliao_show.open()
						break
					default:
						this.$c.to({
							url: item.path
						})
						break
				}
			},

			copy(e) {
				uni.setClipboardData({
					data: `${e}`,
					success: result => {},
					fail: error => {}
				})
			},

			tokefu() {
				// #ifdef  MP-WEIXIN
				wx.openCustomerServiceChat({
					extInfo: {
						url: uni.getStorageSync('wx_link') //客服地址链接
					},
					corpId: uni.getStorageSync('corpid'), //必须和你小程序上的一致
					success(res) {
						console.log(res, 1)
					},
					fail(res) {
						console.log(res, 2)
					}
				})
				// #endif
			},
			getPhoneNumber(e) {
				// console.log(e)
				let that = this
				uni.login({
					success(res) {
						// console.log(res)
						uni.checkSession({
							success() {
								that.req({
									url: 'login_bind_mobile',
									data: {
										code: e.detail.code,
										encryptedData: e.detail.encryptedData,
										iv: e.detail.iv
									},
									success(res) {
										console.log(res);

										if (res.status == 1) {
											if (res.data != null && res.data.token != null) {
												uni.setStorageSync('token', res.data.token);

											}
											uni.showToast({
												title: '绑定成功~',
												success() {
													that.getdata()
												}
											})
										}
									}
								})
							}
						})
					}
				})
			},

			getlist(index) {
				this.show = index
				this.mycollectArr = []
				this.getmycollect()
			},
			todetail(a) {
				if (a.type == 2) {
					this.$customRouter.navigateTo('/pages/shouye/detail_wuxian', {
						goods_id: a.goods_id
					});
				} else {
					this.$customRouter.navigateTo('/pages/shouye/detail', {
						goods_id: a.goods_id,
						goods_num: a.num
					});
				}
			},

			del_soucang(a) {
				let that = this
				that.req({
					url: 'delCollect',
					data: {
						id: a
					},
					success(res) {
						if (res.status == 1) {
							that.getmycollect()
						}
					}
				})
			},

			chongzhi_click() {
				let that = this
				that.req({
					url: 'recharge',
					data: {
						money: that.money_1
					},
					success(res) {
						if (res.status == 1) {
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.data.timeStamp,
								nonceStr: res.data.nonceStr,
								package: res.data.package,
								signType: 'MD5',
								paySign: res.data.paySign,
								complete(res) {
									if (res.errMsg == 'requestPayment:fail cancel') {
										uni.showToast({
											title: '取消支付',
											icon: 'loading',
											duration: 1000
										})
									}
									if (res.errMsg == 'requestPayment:ok') {
										that.$refs.chongzhi_show.close()
										that.getdata()
									}
								}
							})
						}
					}
				})
			},

			getdata() {
				let that = this
				that.req({
					url: 'user',
					success(res) {
						if (res.status == 1) {
							that.ewm = res.data.other.erweima
							that.moneyArr = res.data.other.recharge
							that.userinfo = res.data.userinfo
							that.taskList = res.data.task_list
							console.log(that.userinfo.mobile_is);
							uni.setStorageSync('userinfo', that.userinfo)
							uni.setStorageSync('jump_appid', res.data.other.jump_appid)
							uni.setStorageSync('wx_link', res.data.other.wx_link)
							uni.setStorageSync('corpid', res.data.other.corpid)
							console.log(res.data.userinfo.js_is_open)
							if (
								uni.getStorageSync('_ou_coupon_id') &&
								uni.getStorageSync('token')
							) {
								setTimeout(() => {
									that.receiveCoupon()
								}, 100)
							}
							that.menuList.map(item => {
								/* 判断集市是否展示 */
								if (
									item.id == 11 &&
									res.data.userinfo.js_is_open == 1 &&
									res.data.userinfo.is_show_js == 1
								) {
									item.show = true
								} else {
									if (item.id == 11) {
										item.show = false
									}
								}
							})
						}
					}
				})
			},
			getmycollect() {
				let that = this
				that.req({
					url: 'listCollect',
					Loading: true,
					data: {
						type: that.show
					},
					success(res) {
						if (res.status == 1) {
							that.mycollectArr = res.data.data
						}
					}
				})
			},
			tixian_click() {
				let that = this
				console.log(that.money_2)
				that.req({
					url: 'withdraw',
					data: {
						type: that.tixian_index,
						money: that.money_2,
						name: that.name,
						number: that.number
					},
					success(res) {
						that.money_2 = ''
						if (res.status == 0) {
							that.tixian_show = false
						}
					}
				})
			},
			//跳转页面
			toPage(id) {
				if (id == 1) {
					this.$c.to({
						url: '/pages/user/tui-guang'
					})
				} else {
					this.$c.to({
						type: 3,
						url: '/pages/shouye/index'
					})
				}
			},
			/**
			 * 格式化数字，如果小数部分是.00则只显示整数部分
			 * @param {Number|String} num - 要格式化的数字
			 * @param {String} defaultVal - 默认值，当num为空时返回
			 * @return {String} - 格式化后的数字字符串
			 */
			formatNumber(num, defaultVal = '0') {
				if (num === undefined || num === null || num === '' || num === 0) {
					return defaultVal;
				}

				const numStr = num.toString();
				if (numStr.endsWith('.00')) {
					return parseFloat(num).toFixed(0);
				}

				return numStr;
			}
		}
	}
</script>

<style lang="scss">
	.pop_title {
		font-size: 48rpx;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		color: #ffffff;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.mineInfo {
		width: 720rpx;
		/* height: 323rpx; */
		/* background: url(https://xiongmaomh.languoyun.cn/newindex/mineTop.png) no-repeat; */
		background-size: 100% 100%;
		box-sizing: border-box;
		margin: 0 auto;
		box-sizing: border-box;
		padding: 35rpx 36rpx 0;
	}

	page {
		/* background: #000000; */
	}

	.selTitle {
		font-size: 36rpx;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		color: #ffffff;
		text-shadow: 0px 3px 8px rgba(48, 251, 253, 0.32);
	}

	.noTitle {
		font-size: 36rpx;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		color: #666666;
	}

	.qiehuan {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 750rpx;
	}

	.qiehuan_line {
		margin: -10rpx auto;
		width: 30rpx;
		height: 20rpx;
		border-bottom: 4rpx solid #1ff7f0;
		border-radius: 4rpx;
	}

	.qiehuan image {
		width: 169rpx;
		height: 38rpx;
	}

	.qiehuan>view {
		flex: 1;
		text-align: center;
	}

	.wzs {
		font-size: 28rpx;
		color: rgb(255, 255, 255);
	}

	.xzs {
		font-size: 32rpx;
		color: #ffffff;
		text-shadow: 0px 0px 12rpx rgba(150, 255, 254, 0.7);
	}

	button::after {
		border: none;
	}

	button {
		background-color: transparent;
		padding-left: 0;
		padding-right: 0;
		line-height: inherit;
		border-radius: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 54rpx;
		height: 54rpx;
	}

	.name_phone>input {
		font-size: 28rpx;
		margin-left: 40rpx;
	}

	.name_phone {
		padding: 20rpx 0;
		box-sizing: border-box;
		border-bottom: 1px solid #eeeeee;
	}

	.pop_tixian_input {
		margin: 20rpx 0;
		padding-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		border-bottom: 1px solid #eeeeee;
	}

	.pop_head>view {
		flex: 1;
		text-align: center;
		font-size: 28rpx;
		margin-top: 20rpx;
	}

	.pop_head {
		display: flex;
		justify-content: space-between;
	}

	.pop_box>view {
		width: 180rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
		margin-right: 35rpx;

		font-size: 28rpx;
		font-family: zihun152hao-jijiachaojihei;
		font-weight: 400;
		color: #ffffff;
	}

	.pop_box>view:nth-child(3n + 3) {
		margin-right: 0;
	}

	.pop_box {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.pop_coucent>input {
		width: 630rpx;
		height: 88rpx;
		background: #222222;
		border: none;
		border-radius: 10rpx;
		padding-left: 40rpx;
		font-size: 24rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
	}

	.pop_coucent {
		width: 690rpx;
		// border: 1rpx solid #fff;
		// box-shadow: 0px 0px 10rpx 0px #1ff7f0;
		padding: 30rpx;
		background: rgba(34, 34, 34, 0.5);
		box-sizing: border-box;
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #ffffff;
	}

	.pop_chongzhi {
		width: 692rpx;
		height: 88rpx;
		margin: 48rpx auto 0;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		color: #ffffff;
	}

	.ca {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.order_title {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		color: #ffffff;
		position: relative;
		font-weight: normal;
		padding: 10rpx 0;

		.title {
			text-align: center;

			font-size: 36rpx;
			font-family: zihun152hao-jijiachaojihei;
			font-weight: 400;
			color: #ffffff;
		}
	}

	.order {
		width: 750rpx;
		background: #0d0d0d;
		border-radius: 30rpx 30rpx 0px 0px;
		padding: 10rpx 30rpx 48rpx;
		box-sizing: border-box;
		position: absolute;
		bottom: var(--window-bottom);

		border-top: 2px solid transparent;
		background-clip: padding-box, border-box;
		background-origin: padding-box, border-box;
		background-image: linear-gradient(to right, #000, #000),
			linear-gradient(20deg, #ffffff, #a11aff, #85dfff, #ba39ff);

		.chong-bt {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 40rpx 0 0;

			.money {
				font-size: 28rpx;
				font-family: zihun152hao-jijiachaojihei;
				font-weight: 400;
				color: #ffffff;
			}

			.pay-btn {
				width: 206rpx;
				height: 84rpx;
			}
		}
	}

	.pop {
		width: 506rpx;
		height: 380px;
		position: relative;
		background: #B198E2;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(137, 77, 211, 0.33);
		border-radius: 44rpx;

		>view:nth-child(1) {
			padding-top: 40rpx;

			>image {
				width: 430rpx;
				height: 430rpx;
				margin: 0 auto 0;
				background: #FFFFFF;
			}
		}

		&-view {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 506rpx;
			height: 276rpx;
			box-sizing: border-box;
			padding: 68rpx 0 0 40rpx;
			background: url($imgurl+'index/hudu.png') no-repeat 0 0 / 100% 100%;

			>text:nth-child(1) {
				font-weight: 400;
				font-size: 52rpx;
				color: #894DD3;
				text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
			}

			>text:nth-child(2) {
				font-weight: 400;
				font-size: 24rpx;
				color: #894DD3;
				margin-top: 10rpx;
			}
		}

		&-liwu {
			position: absolute;
			right: -160rpx;
			width: 380rpx;
			height: 260rpx;
			bottom: -60rpx;
			z-index: 10;
		}

		&-close {
			width: 94rpx;
			height: 94rpx;
			position: absolute;
			bottom: -140rpx;
			left: 50%;
			transform: translateX(-50%);
			opacity: 0.6;
		}
	}

	.mengban {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background: rgba(0, 0, 0, 0.45);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.p_t_r {
		position: absolute;
		top: -20rpx;
		right: -10rpx;
		width: 32rpx !important;
		height: 32rpx !important;
	}

	.shop_item>image {
		width: 216rpx;
		height: 216rpx;
		border-radius: 8rpx 8rpx 0 0;
		margin: 13rpx auto;
		display: block;
	}

	.shop_text>.hang1 {
		margin-bottom: 10rpx;
	}

	.shop_text {
		padding: 2rpx 23rpx;
		box-sizing: border-box;
	}

	.shop_item {
		width: 242rpx;
		height: 343rpx;
		/* border-radius: 10rpx; */
		margin-top: 10rpx;
		position: relative;
		color: #ffffff;
		font-size: 24rpx;
	}

	.shop_coucent>view:nth-child(3n-1) {
		margin: 10rpx 0rpx 0;
	}

	.shop_coucent {
		display: flex;
		flex-wrap: wrap;
		font-size: 24rpx;
	}

	.sc_title {
		width: 686rpx;
		height: 22rpx;
		margin: 0 auto;
	}

	.tuijian {
		width: 750rpx;
		padding: 0 13rpx 100rpx 13rpx;
		box-sizing: border-box;
		margin: 30rpx auto;
		/* background-color: #222; */
	}

	.list>view>view>image {
		margin-right: 20rpx;
	}

	.list image {
		width: 12rpx;
		height: 22rpx;
	}

	.list>view>view>image:nth-of-type(1) {
		width: 32rpx;
		height: 32rpx;
	}

	.list>view>view {
		display: flex;
		align-items: center;
	}

	.list>view {
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* border-bottom: 1px solid #EEEEEE; */
		padding: 24rpx 0;
	}

	.list {
		width: 710rpx;
		/* height: 700rpx; */
		margin: 0 auto;
		padding: 0rpx 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #ffffff;

		/* background: linear-gradient(135deg, transparent 10px, #F07D17 0); */
		/* 	background: url(https://hdyfs.languowangluo.cn/zcq/mine/cz_bg.png) no-repeat; */
		/* background-size: 100% 100%; */
	}

	.hegui image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 20rpx;
	}

	.hegui>image {
		width: 40rpx;
		height: 40rpx;
		margin: 0;
	}

	.hegui>view {
		display: flex;
		align-items: center;
		color: #ffffff;
		font-size: 28rpx;
	}

	.hegui {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 690rpx;
		height: 99rpx;
		background: rgba(15, 31, 67, 0.43);
		border: 1px solid;
		border-image: linear-gradient(269deg, #1ed3f9, #a31f9e, #2ad3f3, #c41fc1) 1 1;
		border-radius: 10rpx;
		margin: 30rpx auto;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.tixian_r>image {
		width: 143rpx;
		height: 59rpx;
	}

	.tixian_r {
		text-align: right;
	}

	.tixian_r>view:nth-child(2) {
		width: 132rpx;
		height: 48rpx;
		background: #1ac762;
		border-radius: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #ffffff;
		margin-top: 20rpx;
	}

	.tixian_r>view:nth-child(1) {
		width: 132rpx;
		height: 48rpx;
		border: 1px solid #1ac762;
		color: #1ac762;
		border-radius: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		/* text-shadow: 0px 0px 14rpx rgba(237, 87, 255, 0.7);
		font-family: 'zcq'; */
	}

	.tixian_l image {
		width: 12rpx;
		height: 22rpx;
		margin-left: 10rpx;
	}

	.tixian_l {
		font-size: 28rpx;
		font-family: zihun152hao-jijiachaojihei;
		font-weight: 400;
		color: #ffffff;
	}

	.tixian {
		width: 720rpx;
		height: 210rpx;
		margin: 30rpx auto 0;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 46rpx;
		box-sizing: border-box;
		color: #ffffff;
	}

	.youhui text {
		margin-right: 10rpx;
		font-size: 32rpx;
		/* font-family: 'zcq'; */
	}

	.youhui>view>view:nth-of-type(2) {
		font-size: 24rpx;
		margin-top: 28rpx;
	}

	.youhui>view:nth-of-type(1)::after,
	.youhui>view:nth-of-type(2)::after {
		content: '';
		width: 2rpx;
		height: 40rpx;
		/* background: #FFFFFF; */
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}

	.youhuiTitle {
		font-size: 28rpx;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
	}

	.youhui>view {
		font-size: 24rpx;
		text-align: center;
		position: relative;
		flex: 1;
	}

	.youhui {
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* width: 690rpx; */
		height: 193rpx;
		margin: 0rpx auto 0;
		color: #ffffff;
		padding-bottom: 30rpx;
	}

	.id_z>image {
		width: 84rpx;
		height: 20rpx;
		margin-left: 20rpx;
	}

	.id_z {
		font-size: 24rpx;
		margin-top: 10rpx;
		color: #999999;
	}

	.phone_z {
		font-size: 32rpx;
		/* font-weight: bold; */
	}

	.headimg {
		width: 105rpx;
		height: 105rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.jp_headimg>image {
		width: 132rpx;
		height: 132rpx;
		/* border: 1px solid #FE0032; */
		border-radius: 50%;
		/* 	clip-path: polygon(50% 10%, 85% 30%, 85% 70%, 50% 92%, 17% 71%, 16% 30%); */
		/* polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0) */
	}

	.jp_headimg {
		width: 132rpx;
		height: 132rpx;
		margin: 25rpx 0 0 12rpx;
	}

	.head_name {
		display: flex;
		justify-content: space-between;
		position: relative;
		/* text-shadow: rgba(150, 255, 254, 0.7) 0px 0px 10rpx; */
	}

	.header_title {
		font-size: 40rpx;
		font-family: iFontszhounianti;
		font-weight: bold;
		font-style: oblique;
		color: #ffffff;
	}

	.header {
		width: 100%;
		color: #ffffff;
		position: relative;
		box-sizing: border-box;

		padding-top: calc(var(--status-bar-height) + 80rpx);
	}

	.mine {
		width: 750rpx;
		position: relative;
		padding-bottom: 100px;
		min-height: 100vh;
		box-sizing: border-box;
		background-color: #F7F7F7;
		// background: #1C1B20 url($imgurl+'my/myBg.png') no-repeat 0 0 / 750rpx 500rpx;

		.user-card {
			position: relative;
			padding: 20rpx 30rpx;

			.user-info {
				display: flex;
				align-items: center;

				.avatar {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					overflow: hidden;
					background: #D8D8D8;

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

				.info {
					width: calc(100% - 100rpx);
					box-sizing: border-box;
					padding-left: 30rpx;

					.nick {
						max-width: 200rpx;

						font-size: 32rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
					}

					.user-day {
						margin-top: 10rpx;

						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #8A8A8A;
					}
				}
			}

			.lv-box {
				height: 216rpx;
				margin-top: 80rpx;
				box-sizing: border-box;
				position: relative;
				// background-color: #FFFFFF;
				background: url($imgurl+'my/userVip.png') no-repeat 0 0 / 100% 100%;
				padding-left: 136rpx;

				&-dengji {
					position: absolute;
					left: 32rpx;
					top: 16rpx;
					font-weight: 500;
					font-size: 48rpx;
					color: #333333;
					width: 100rpx;
					// text-shadow: #121212 1rpx 0 0, #121212 0 1rpx 0, #121212 -1rpx 0 0, #121212 0 -1rpx 0;
				}

				&-ouqi {

					position: absolute;
					bottom: 24rpx;
					left: 32rpx;

					>text {
						font-weight: 400;
						font-size: 16rpx;
						color: #4C4C4C;
					}

					>view {
						width: 618rpx;
						height: 6rpx;
						border-radius: 6rpx;
						// border: 1px solid #111111;

						/deep/.cmd-progress-inner {
							background: #CCCCCC;
						}

						>text {
							font-weight: 400;
							font-size: 20rpx;
							color: #D2DBFF;
							position: absolute;
							left: 50%;
							top: 0;
							line-height: 6rpx;
							transform: translateX(-50%);
							z-index: 10;
						}
					}
				}

				&-detail {
					width: 96rpx;
					height: 36rpx;
					position: absolute;
					left: 34rpx;
					top: 86rpx;
					font-weight: 400;
					font-size: 16rpx;
					color: #4C4C4C;
					border-radius: 6rpx;
					background-color: #E6F791;
					// text-shadow: #121212 1rpx 0 0, #121212 0 1rpx 0, #121212 -1rpx 0 0, #121212 0 -1rpx 0;
				}
			}

			.rbtn {
				position: absolute;
				z-index: 10;
				right: 10rpx;
				top: 10rpx;
				width: 110rpx;
				height: 50rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #ffffff;

				&.btn1 {
					top: 80rpx;
				}
			}
		}

		.money-card {
			width: 690rpx;
			margin: 20rpx auto 0;

			.other-num {
				display: flex;
				padding: 0 36rpx;
				flex-direction: column;
				background-color: #FFFFFF;
				border-radius: 16rpx;

				.other-item {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					height: 110rpx;

					.title {
						font-size: 28rpx;
						font-weight: 540;
						color: #333333;
					}

					.num {
						font-size: 32rpx;
						font-weight: 500;
						color: #333333;
					}
				}
			}

			.moneyTitle {
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
			}

			.money {
				display: flex;
				align-items: flex-end;
				padding: 0 10rpx;
				font-size: 60rpx;
				font-weight: 500;
				margin-top: 40rpx;
				color: #FFFFFF;
				height: 120rpx;
				background: #FFFFFF;

				>view:nth-child(1) {
					>image {
						width: 100rpx;
						height: 80rpx;
					}
				}

				.money-detail {
					display: flex;
					align-items: center;
					padding-left: 16rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #333333;
				}
			}
		}

		.task {
			margin: 30rpx auto 0;
			width: 690rpx;
			box-sizing: border-box;
			padding: 0 0 20rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;

			.task-title {
				position: relative;
				z-index: 1;
				margin-left: 32rpx;
				padding-top: 34rpx;
				margin-bottom: 30rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: task
			}

			.task-list {
				border-radius: 20rpx;
				padding: 30rpx;
			}

			.task-item {
				padding: 20rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.task-l {
					.title {
						font-size: 32rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
					}

					.num {
						margin: 20rpx 0;

						font-size: 26rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #8A8A8A;
					}

					.progress {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #cccccc;

						.progress-inner {
							width: 300rpx;
							margin-right: 6rpx;

							/deep/.cmd-progress-inner {
								background: #5B5B5D;
							}
						}
					}
				}

				.task-r {
					flex: 1;
					display: flex;
					justify-content: flex-end;
					padding-left: 30rpx;

					.btn {
						width: 142rpx;
						height: 60.35rpx;
						border-radius: 16rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #E6F791;

						text {
							font-weight: 400;
							font-size: 24rpx;
							color: #333333;
						}

						&.act {
							background: #333333;

							text {
								font-weight: 400;
								font-size: 24rpx;
								color: #D8FD24;
							}
						}

						&.dis {
							background: #F5F5F5;
							border-radius: 16rpx;

							text {
								color: #999999;
							}
						}
					}
				}
			}
		}

		.qita {
			margin: 30rpx auto 0;
			width: 690rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;

			&-title {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				padding-top: 36rpx;
				padding-left: 32rpx;
			}

			.menu-card {
				margin: 30rpx auto 0;
				width: 690rpx;
				padding: 1rpx 0 40rpx;
				display: flex;
				flex-flow: row wrap;

				.menu-item {
					margin-top: 40rpx;
					display: flex;
					flex-flow: column nowrap;
					align-items: center;
					width: 25%;

					.icon {
						width: 60rpx;
						height: 60rpx;
					}

					.title {
						margin-top: 10rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: #4C4C4C;
					}
				}
			}
		}
	}

	.copyright {
		padding: 30rpx;
		text-align: center;
		font-size: 24rpx;
		color: #888;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		font-size: 40rpx;
		font-family: iFontszhounianti;
		font-weight: bold;
		font-style: oblique;
		color: #ffffff;
		margin-bottom: 10rpx;
	}


	.pop-ball {
		width: 85vw;
		position: relative;
		border-radius: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pop-ball-close {
		margin-top: 20rpx;
		width: 100%;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>