<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="num">{{ formatNumber(userinfo.money) }}</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) {
				uni.navigateTo({
					url: '/pages/shouye/detail_wuxian?goods_id=' + a.goods_id
				})
			} else {
				uni.navigateTo({
					url: '/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: 40rpx;
					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>