fanyunAi/pages/user/user.vue

<template>
	<view>
		<view class="user" v-if="appInfo.page_template == 2 || appInfo.page_template == 1">

			<!-- 头部 -->
			<view class="pos" style="height: 190rpx;">
			</view>
			<view class="topBox">
				<view class="topCard" style="position: relative;">
					<!-- 	<view class="user-wrap userBox" style=""
						:style="{ backgroundImage: `url(${appInfo.user_bg_path ? appInfo.user_bg_path : ''})` }"> -->
					<view class="user-wrap userBox" style="" :style="">
						<view class="setting iconfont icon31shezhi"></view>
						<view v-if="isLogin" class="info">
							<image @click="modify" class="avatar" mode="aspectFill"
								:src="userInfo.avatar ? userInfo.avatar : '/static/images/head.jpg'"></image>
							<view class="nickname">
								<text @click="copyText(userInfo.id_number)"
									class="nick">{{ userInfo.nickname ? userInfo.nickname : '默认用户'}}</text>
								<u-icon name="edit-pen" color="#18b566" size="20" @click="modify"></u-icon>
							</view>

						</view>
						<view v-else class="info" @click="getlogin">
							<image class="avatar" mode="aspectFill" src="/static/images/head.jpg"></image>
							<view class="nickname">点击立即登录/注册</view>
						</view>
					</view>
					<view class="order-status" style="width: 100%;">
						<view class="status-wrap" style="">
							<view class="cell cell_charge" style="">
								<view class="cell-left">
									<u-icon name="integral" color="#ffd465" size="24"></u-icon>
									<block v-if="appInfo.number_member">
										<block v-if="appInfo.number_member == 1">
											<view class="cell-text"
												style="color: #ffd465;font-size: 30rpx;font-weight: bold;margin-left:5rpx;">
												{{appInfo.number_alias?appInfo.number_alias+':&nbsp;':'点数：'}}{{ userData.coin ? userData.coin : 0 }}
											</view>
										</block>
									</block>
									<block v-else>
										<view class="cell-text"
											style="color: #ffd465;font-size: 30rpx;font-weight: bold;margin-left:5rpx;">
											{{appInfo.number_alias?appInfo.number_alias+':&nbsp;':'点数：'}}{{ userData.coin ? userData.coin : 0 }}
										</view>
									</block>
									<block v-if="appInfo.number_member">
										<view
											v-if="appInfo.time_member&&appInfo.number_member == 1&&appInfo.time_member == 1"
											class="cell-text"
											style="color: #ffd465;font-size: 30rpx;font-weight: bold;margin-left:5rpx;">
											|
										</view>
									</block>
									<block v-else>
										<view v-if="appInfo.time_member&&appInfo.time_member == 1" class="cell-text"
											style="color: #ffd465;font-size: 30rpx;font-weight: bold;margin-left:5rpx;">
											|</view>
									</block>
									<block v-if="appInfo.time_member && appInfo.time_member == 1">
										<view style="flex-direction: column;display: flex;">
											<view class="cell-text"
												style="color: #ffd465;font-size: 30rpx;font-weight: bold;margin-left:5rpx;">
												会员套餐:&nbsp;{{ userData.is_validity == 1 ? (userData.vip_time == 9999?'永久':userData.countdown+'天') : '0天' }}
											</view>
										</view>
									</block>
								</view>
								<!-- #ifdef MP-WEIXIN -->
								<navigator v-if="device != 'ios'" class="b-btn"
									:url="isLogin ? '/pages/user/member/member' : '/pages/user/signin'"
									@click="getroute">
									立即充值
								</navigator>
								<navigator v-else-if="device == 'ios'&&show_ios_pay" class="b-btn"
									:url="isLogin ? '/pages/user/member/member' : '/pages/user/signin'"
									@click="getroute">
									立即充值
								</navigator>
								<!-- #endif -->
								<!-- #ifdef H5 -->
								<navigator class="b-btn"
									:url="isLogin ? '/pages/user/member/member' : '/pages/user/signin'"
									@click="getroute">立即充值</navigator>
								<!-- #endif -->
							</view>
						</view>
					</view>
				</view>
				<view class="com-item">
					<view class="com-wrap">
						<!-- #ifdef MP-WEIXIN -->
						<view v-if="appInfo.wxad_user && appInfo.wxad_user >= 1">
							<wike-flow-main :flowtype="appInfo.wxad_user" :banner_id="appInfo.banner_id"
								:video_banner_id="appInfo.video_banner_id"
								:native_id="appInfo.native_id"></wike-flow-main>
						</view>
						<!-- #endif -->
					</view>
				</view>

			</view>
			<view v-if="userData.vip_info&&userData.is_validity>0" class="com-item" style="margin-top: 0;">
				<view class="com-wrap">
					<view class="cell" @click="packagedetails = true">
						<view class="cell-left">
							<u-icon name="bookmark-fill" color="" size="22"></u-icon>
							<view class="cell-text">我的会员套餐详情</view>
						</view>
						<u-icon name="arrow-right" color="#9e9e9e" size="18"></u-icon>
					</view>
				</view>
			</view>

			<!-- 用户功能 -->
			<view class="com-item">
				<view class="com-wrap">
					<view class="cell" @click="showcarmi = true">
						<view class="cell-left">
							<u-icon :isJianBian="true" name="coupon-fill" color="#e83a30" size="22"></u-icon>
							<view class="cell-text">卡密兑换</view>
						</view>
						<u-icon name="arrow-right" color="#9e9e9e" size="18"></u-icon>
					</view>
					<view class="cell" @click="toRenwu">
						<view class="cell-left">
							<u-icon :isJianBian="true" name="coupon-fill" color="#e83a30" size="22"></u-icon>
							<view class="cell-text">任务中心</view>
						</view>
						<u-icon name="arrow-right" color="#9e9e9e" size="18"></u-icon>
					</view>

					<navigator v-for="(item, index) in userList" :key="index"
						:url="isLogin ? item.url : item.url=='custom'?'': '/pages/user/signin'" @click="getroute">

						<!-- 免费课程 -->
						<view v-if="item.url=='custom'" class="cell" @click="getFreeScore">
							<view class="cell-left">
								<u-icon :isJianBian="true" :name="item.icon" :color="item.color" size="22"></u-icon>
								<view class="cell-text">免费课程</view>
							</view>
							<u-icon name="arrow-right" color="#9e9e9e" size="18"></u-icon>
						</view>
						<view v-else class="cell">
							<view class="cell-left" :style="{marginLeft:item.title=='订单记录'? '-14rpx':''}">
								<!-- <image class="cell-icon" :src="item.icon" mode="aspectFill"></image> -->
								<u-icon :isJianBian="true" :name="item.icon" :color="item.color"
									:size="item.title=='订单记录'?28:item.title=='问答记录'?20:22"></u-icon>
								<view class="cell-text">{{ item.title }}</view>
							</view>
							<!-- <view class="iconfont iconmore1"></view> -->
							<u-icon name="arrow-right" color="#9e9e9e" size="18"></u-icon>
						</view>
					</navigator>


					<navigator class="cell" :url="isLogin ? '/pages/user/member/record' : '/pages/user/signin'"
						@click="getroute">
						<view class="cell-left">
							<!-- <image class="cell-icon" :src="item.icon" mode="aspectFill"></image> -->
							<u-icon :isJianBian="true" name="bookmark-fill" color="#892fe8" size="22"></u-icon>
							<view class="cell-text">{{appInfo.number_alias?appInfo.number_alias:'点数'}}/会员套餐记录</view>
						</view>
						<!-- <view class="iconfont iconmore1"></view> -->
						<u-icon name="arrow-right" color="#9e9e9e" size="18"></u-icon>
					</navigator>
				</view>
			</view>

			<!-- 用户服务 -->
			<view class="com-item">
				<view class="com-wrap">
					<view v-if="qrcode" class="cell" @click="getqrcode">
						<view class="cell-left">
							<u-icon :isJianBian="true" name="scan" color="#007aff" size="22"></u-icon>
							<view class="cell-text">关注公众号</view>
						</view>
						<u-icon name="arrow-right" color="#9e9e9e" size="18"></u-icon>
						<!-- <button openType="contact" style="width: 85%;  background-color: red; position: absolute; opacity: 0;height: 10%;"></button> -->
					</view>
					<!-- <view class="cell">
                     	<view class="cell-left">
                     		<u-icon name="minus-circle-fill" color="#26B3A0" size="22"></u-icon>
                     		<view class="cell-text">使用教程</view>
                     	</view>
                     	<u-icon name="arrow-right" color="#9e9e9e" size="18"></u-icon>
                     	<button openType="contact" style="width: 85%;  background-color: red; position: absolute; opacity: 0;height: 10%;"></button>
                     </view> -->
					<navigator class="cell" v-for="(item, index) in serverList" :key="index" :url="item.path">
						<view class="cell-left">
							<!-- <image class="cell-icon" :src="item.icon" mode="aspectFill"></image> -->
							<u-icon :isJianBian="true" :name="item.icon" :color="item.color" size="22"></u-icon>
							<view class="cell-text">{{ item.title }}</view>
						</view>
						<view v-if="item.text" class="iconmore1">{{item.text}}</view>
						<u-icon v-else name="arrow-right" color="#9e9e9e" size="18"></u-icon>
					</navigator>
				</view>
			</view>
			<view class="com-item"><wike-ad></wike-ad></view>
		</view>

		<block v-if="appInfo.page_template == 3">
			<view class="top-backgroup">
				<image src='https://tnuiimage.tnkjapp.com/my/my-bg4.png' mode='widthFix' class='backgroud-image'>
				</image>
			</view>
			<view class="about__wrap" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
				<!-- 图标logo/头像 -->
				<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom"
					style="margin-top: -450rpx;">
					<view class="justify-content-item">
						<view class="tn-flex tn-flex-col-center tn-flex-row-left">
							<view class="logo-pic tn-shadow">
								<view class="logo-image">
									<image class="avatar" mode="aspectFill"
										:src="userInfo.avatar ? userInfo.avatar : '/static/images/head.jpg'"></image>
								</view>
							</view>
							<view class="tn-padding-right">
								<view class="tn-padding-right tn-padding-left-sm">
									<text
										class="tn-color-cat tn-text-xl tn-text-bold">{{ userInfo.nickname ? userInfo.nickname : '默认用户'}}</text>
									<!-- <text class=" tn-round tn-text-xs tn-bg-red tn-color-white tn-margin-left-sm" style="padding: 10rpx 20rpx;" @click="tn('/minePages/realname')">
			              未实名
			            </text> -->
								</view>
								<view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis">
									<text class="tn-color-gray tn-padding-left-sm tn-text-sm">id编号
										{{userInfo.id_number}}</text>
								</view>
							</view>

						</view>
					</view>
				</view>
				<view class="tn-margin-top-xl">
					<view class="button-vip tn-flex tn-flex-row-between tn-flex-col-center tn-shadow-blur"
						style="background: linear-gradient(-120deg, #3E445A, #31374A, #2B3042, #262B3C);">

						<view class="tn-margin-left">
							<view class='title u-flex' style="color: #F1C68E;">
								<!-- <text class="tn-text-bold tn-text-xl">{{appInfo.number_alias?appInfo.number_alias+'：':'点数：'}}{{ userData.coin ? userData.coin : 0 }}</text> -->
								<block v-if="appInfo.number_member">
									<block v-if="appInfo.number_member == 1">
										<view class="tn-text-bold tn-text-xl">
											{{appInfo.number_alias?appInfo.number_alias+'：':'点数：'}}{{ userData.coin ? userData.coin : 0 }}
										</view>
									</block>
								</block>
								<block v-else>
									<view class="tn-text-bold tn-text-xl">
										{{appInfo.number_alias?appInfo.number_alias+'：':'点数：'}}{{ userData.coin ? userData.coin : 0 }}
									</view>
								</block>
								<block v-if="appInfo.number_member">
									<view
										v-if="appInfo.time_member&&appInfo.number_member == 1&&appInfo.time_member == 1"
										class="tn-text-bold tn-text-xl">|</view>
								</block>
								<block v-else>
									<view v-if="appInfo.time_member&&appInfo.time_member == 1"
										class="tn-text-bold tn-text-xl">|</view>
								</block>
								<block v-if="appInfo.time_member && appInfo.time_member == 1">

									<view class="tn-text-bold tn-text-xl">
										会员套餐：{{ userData.is_validity == 1 ? (userData.vip_time == 9999?'永久':userData.countdown+'天') : '0天' }}
									</view>
								</block>
								<!-- <text class="tn-icon-vip-text tn-text-center" style="position: absolute;margin: -22rpx 0 0 0;font-size: 92rpx;"></text> -->
							</view>
							<view class='tn-color-white tn-text-sm tn-padding-top-sm'>邀请好友赚取更多积分</view>
						</view>
						<view class="tn-margin-right">
							<tn-button shape="round" backgroundColor="#F1C68E" fontColor="#634738" padding="10rpx 0"
								width="160rpx" shadow
								@click="jump(isLogin ? '/pages/user/member/member' : '/pages/user/signin')">
								<!-- <text class="tn-icon-vip tn-padding-right-sm tn-text-lg"></text> -->
								<text class="tn-text-bold">充值</text>
							</tn-button>
						</view>

					</view>
				</view>
				<!-- 方式12 start-->
				<view class="about-shadow tn-margin-top-lg tn-padding-top-sm tn-padding-bottom-sm tn-bg-white">
					<view class="tn-flex tn-flex-row-center tn-radius tn-padding-top">
						<view class="tn-padding-sm tn-margin-xs tn-radius" @click="showcarmi = true">
							<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
								<view
									class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-grey--light">
									<view class="tn-icon-cube tn-color-cat"></view>
								</view>
								<view class="tn-text-center">
									<text class="tn-text-ellipsis">卡密兑换</text>
								</view>
							</view>
						</view>
						<view class="tn-padding-sm tn-margin-xs tn-radius" @click="jump('/pages/user/commission/index')"
							v-if="is_commission==1">
							<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
								<view
									class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-grey--light">
									<view class="tn-icon-signpost tn-color-cat"></view>
								</view>
								<view class="tn-text-center">
									<text class="tn-text-ellipsis">我的团队</text>
								</view>
							</view>
						</view>
						<view class="tn-padding-sm tn-margin-xs tn-radius" @click="jump('/pages/user/draw/draw')"
							v-if="appInfo.is_aipainting&&appInfo.is_aipainting == 1">
							<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
								<view
									class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-grey--light">
									<view class="tn-icon-refund tn-color-cat"></view>
								</view>
								<view class="tn-text-center">
									<text class="tn-text-ellipsis">绘画记录</text>
								</view>
							</view>
						</view>
						<view class="tn-padding-sm tn-margin-xs tn-radius"
							@click="jump('/pages/user/takenotes/takenotes')">
							<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
								<view
									class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-grey--light">
									<view class="tn-icon-constellation tn-color-cat"></view>
								</view>
								<view class="tn-text-center">
									<text class="tn-text-ellipsis">问答记录</text>
								</view>
							</view>
						</view>
					</view>
					<view class="tn-flex tn-flex-row-center tn-radius tn-padding-top">
						<view class="tn-padding-sm tn-margin-xs tn-radius" @click="jump('/pages/user/userinfo')">
							<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
								<view
									class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-grey--light">
									<view class="tn-icon-order tn-color-cat"></view>
								</view>
								<view class="tn-text-center">
									<text class="tn-text-ellipsis">修改用户信息</text>
								</view>
							</view>
						</view>
						<view class="tn-padding-sm tn-margin-xs tn-radius" @click="jump('/pages/user/member/record')">
							<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
								<view
									class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-grey--light">
									<view class="tn-icon-calendar tn-color-cat"></view>
								</view>
								<view class="tn-text-center">
									<text
										class="tn-text-ellipsis">{{appInfo.number_alias?appInfo.number_alias:'点数'}}/会员套餐记录</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="tn-margin-top-lg tn-padding-top-sm tn-padding-bottom-sm" style="padding:30rpx">
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="getqrcode">
					<view class="tn-flex tn-flex-col-center">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
							style="color: #7C8191;">
							<view class="tn-icon-qr-code"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">关注公众号</view>
						<view class="tn-color-gray tn-icon-right"></view>
					</view>
				</tn-list-cell>
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30"
					@click="jump('/pages/user/orderrecord/orderrecord')">
					<view class="tn-flex tn-flex-col-center">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
							style="color: #7C8191;">
							<view class="tn-icon-shopbag-fill"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">订单记录</view>
						<view class="tn-color-gray tn-icon-right"></view>
					</view>
				</tn-list-cell>
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30"
					@click="jump('/pages/user/public/kefu')">
					<view class="tn-flex tn-flex-col-center">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
							style="color: #7C8191;">
							<view class="tn-icon-science-fill"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">客服中心</view>
						<view class="tn-color-gray tn-icon-right"></view>
					</view>
				</tn-list-cell>
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30"
					@click="jump('/pages/user/public/agreement?type=aboutus')">
					<view class="tn-flex tn-flex-col-center">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
							style="color: #7C8191;">
							<view class="tn-icon-light-fill"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">关于我们</view>
						<view class="tn-color-gray tn-icon-right"></view>
					</view>
				</tn-list-cell>
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
					<view class="tn-flex tn-flex-col-center">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
							style="color: #7C8191;">
							<view class="tn-icon-expand"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">版本</view>
						<view>4.6.2</view>
					</view>
				</tn-list-cell>
			</view>

		</block>

		<u-popup :show="showcarmi" mode="center" :round="10" @close="showcarmi = false">
			<view class="carmimodal">
				<view class="carmiclose" @click="showcarmi = false"><u-icon name="close-circle-fill" color="#fff"
						size="22"></u-icon></view>

				<view class="carmititle">输入卡密兑换</view>
				<view class="carmiinput"><u--input placeholder="请输入卡密" border="surround" clearable
						v-model="carmi"></u--input></view>
				<view @click="exchange" class="carmiexchange">立即兑换</view>
				<view v-if="appInfo.kf_qrcode_path" class="kf_qrcode tn-flex justify-center">
					<u--image :showLoading="true" :src="appInfo.kf_qrcode_path" width="100px" height="100px"
						@click="clickuimage(appInfo.kf_qrcode_path)"></u--image>
				</view>
				<view v-if="appInfo.kf_qrcode_path" class="u-text-center">
					<!-- #ifdef MP-WEIXIN -->
					长按上方二维码，添加客服购买卡密
					<!-- #endif -->
					<!-- #ifdef H5 -->
					保存上方二维码，添加客服购买卡密
					<!-- #endif -->
				</view>
			</view>
		</u-popup>
		<u-popup :show="packagedetails" @close="packagedetails = false" :round="15" closeable>
			<view class="select u-flex justify-center"><text>我的会员套餐详情</text></view>
			<u-notice-bar speed="60" bgColor='#C6D6E4' color='#3F5465'
				:text="'当会员套餐内限量次数为0后再次使用会扣除当前已经拥有的'+(appInfo.number_alias ? appInfo.number_alias : '点数')"></u-notice-bar>
			<view class="expand u-flex flex-wrap">
				<view
					v-if="userData.vip_info&&userData.vip_info.gpt35_times == -1 || userData.vip_info&&userData.vip_info.gpt35_times > 0"
					class="surplus u-flex align-center">
					<view class="item">{{appInfo.gpt35_alias ? appInfo.gpt35_alias : 'ChatGPT 3.5'}} -
						{{userData.vip_info.gpt35_type == 'time'?'每日':'总'}}限量：{{userData.vip_info.gpt35_times == -1?'无限量':userData.vip_info.gpt35_times+'次'}}({{userData.vip_info.gpt35_type == 'time'?'今日已用量：':'总用量：'}}{{userData.vip_info.gpt35_used}}次)
					</view>

				</view>
				<view
					v-if="userData.vip_info&&userData.vip_info.gpt4_times == -1 || userData.vip_info&&userData.vip_info.gpt4_times > 0"
					class="surplus u-flex align-center" style="background: #f9ae3d;">
					<view class="item">{{appInfo.gpt4_alias ? appInfo.gpt4_alias : 'ChatGPT 4.0'}} -
						{{userData.vip_info.gpt4_type == 'time'?'每日':'总'}}限量：{{userData.vip_info.gpt4_times == -1?'无限量':userData.vip_info.gpt4_times+'次'}}({{userData.vip_info.gpt4_type == 'time'?'今日已用量：':'总用量：'}}{{userData.vip_info.gpt4_used}}次)
					</view>
				</view>
				<view
					v-if="userData.vip_info&&userData.vip_info.sd_times == -1 || userData.vip_info&&userData.vip_info.sd_times > 0"
					class="surplus u-flex align-center" style="background: #3c9cff;">
					<view class="item">StableDiffusion绘图 -
						{{userData.vip_info.sd_type == 'time'?'每日':'总'}}限量：{{userData.vip_info.sd_times == -1?'无限量':userData.vip_info.sd_times+'次'}}({{userData.vip_info.sd_type == 'time'?'今日已用量：':'总用量：'}}{{userData.vip_info.sd_used}}次)
					</view>
				</view>
				<view
					v-if="userData.vip_info&&userData.vip_info.mj_times == -1 || userData.vip_info&&userData.vip_info.mj_times > 0"
					class="surplus u-flex align-center" style="background: #26b3a0;">
					<view class="item">MidJourney绘图 -
						{{userData.vip_info.mj_type == 'time'?'每日':'总'}}限量：{{userData.vip_info.mj_times == -1?'无限量':userData.vip_info.mj_times+'次'}}({{userData.vip_info.mj_type == 'time'?'今日已用量：':'总用量：'}}{{userData.vip_info.mj_used}}次)
					</view>
				</view>
			</view>
		</u-popup>
		<block v-if="is_aipainting">
			<wike-tabbar2 :currTabIndex='4' v-if="appInfo.page_template == 3" :is_aipainting="is_aipainting"
				:onTabbar="true" :isShowAnimate="true" :appInfos="appInfo.page_template"></wike-tabbar2>
			<wike-tabbar :currTabIndex='4' v-else :onTabbar="true" :is_aipainting="is_aipainting" :isShowAnimate="true"
				:appInfos="appInfo.page_template"></wike-tabbar>
		</block>
		<wike-modal-qrcode :qrcode="qrcode" :showconcern="showconcern&&!showFixInfo"
			@concernclose="concernclose"></wike-modal-qrcode>

		<u-modal @cancel="handleCancel" @confirm="handleConfirm" cancelText='退出登录' showCancelButton :show="showFixInfo"
			confirmColor="#26b3a0" confirmText="完善信息" title="请完善个人手机号信息后使用本应用"
			content='您已充值,但未绑定手机号,请完善信息以方便为您提供进一步的服务'></u-modal>

	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import {
		API_ROOT
	} from '@/common/request/request';
	let interstitialAd = null,
		timer,
		time2;
	export default {
		components: {},
		data() {
			return {
				showFixInfo: false,
				// API_ROOT: API_ROOT,
				perfectResume: false, //简历是否完善
				tobheight: 45,
				platform: this.$platform.get(),
				showrealname: false,
				showworkermy: false,
				avatar: '',
				isLoading: true,
				// userInfo: {
				// 	headPicUrl: '/static/images/user/avatar.jpg',
				// 	nickName: '史蒂芬.林'
				// },
				orderStatusList: [{
						name: '待付款',
						icon: 'iconfont icon31daifukuan',
						status: 10
					},
					{
						name: '待发货',
						icon: 'iconfont icon31daifahuo',
						status: 30
					},
					{
						name: '待收货',
						icon: 'iconfont icon31daishouhuo',
						status: 40
					},
					{
						name: '待评价',
						icon: 'iconfont icon31daipingjia',
						status: 50
					},
					{
						name: '已完成',
						icon: 'iconfont icon31yiguanzhudianpu',
						status: 55
					}
				],
				currentIndex: 0,
				list: [{
						icon: '/static/images/user/class-01.png',
						text: '我的电子券'
					},
					{
						icon: '/static/images/user/class-02.png',
						text: '退换/售后'
					},
					{
						icon: '/static/images/user/class-03.png',
						text: '我的积分'
					},
					{
						icon: '/static/images/user/class-04.png',
						text: '送礼提醒'
					}
				],
				userList: [{
						title: '订单记录',
						icon: 'shopping-cart-fill',
						path: 'coupon-fill',
						url: '/pages/user/orderrecord/orderrecord',
						color: '#26b3a0'
					},

					{
						title: '问答记录',
						icon: 'question-circle-fill',
						path: 'collect-list',
						url: '/pages/user/takenotes/takenotes',
						color: '#31c9e8'
					},
					{
						title: '免费课程',
						icon: 'bookmark-fill',
						path: 'coupon-fill',
						// url: '/pages/user/freeScore/index',
						url: 'custom',
						color: '#26b3a0'
					},
					{
						title: '修改用户信息',
						icon: 'setting-fill',
						path: 'collect-list',
						url: '/pages/user/userinfo',
						color: '#5ac725'
					},
					// {
					// 	title: '次数/时长记录',
					// 	icon: 'bookmark-fill',
					// 	url: '/pages/user/member/record'
					// }
				],
				serverList: [{
						title: '客服中心',
						icon: 'server-fill',
						path: '/pages/user/public/kefu',
						color: '#e83a30'
					},
					{
						title: '关于我们',
						icon: 'account-fill',
						path: '/pages/user/public/agreement?type=aboutus',
						color: '#ffa726'
					},
					{
						title: '版本',
						icon: 'pushpin-fill',
						text: '4.6.2',
						color: '#24f083'
					}
				],
				commission_setting: {},
				showcarmi: false,
				carmi: '',
				qrcode: '',
				is_aipainting: '',
				showconcern: false,
				gzhqrcode: '',
				packagedetails: false,
				plan: {},
				show_ios_pay: false,
				device: this.$platform.device(),
				// commission_alias:'分销中心'
			};
		},
		computed: {
			...mapGetters(['appInfo', 'homeTemplate', 'isLogin', 'userInfo', 'userData'])
		},

		onShow: function() {
			if (this.isLogin) {
				this.getUserData();
				if (this.$ws.socketStatus()) {
					this.$ws.completeClose();
				}
			}
			this.systemwechat()

			this.$http('user.info').then(res => {
				if (res.code == 0) {
					console.log('用户是否是首次支付成功，但未填写手机号', res.data.is_new);
					this.showFixInfo = res.data.is_new;
					// this.showFixInfo = true;
				}
			})
			// this.$store.dispatch('tabbarInit')
		},

		onLoad() {


			if (!this.isLogin) {
				uni.navigateTo({
					url: '/pages/user/signin'
				});
				uni.setStorageSync('route', '/pages/user/user');
			}
			this.getCommissionSetting();
			this.getPlan();
			// this.systemwechat()
			// console.log(API_ROOT);
		},
		onReady() {
			let that = this;
			// #ifdef MP-WEIXIN
			clearTimeout(timer);
			// 在适合的场景显示插屏广告
			timer = setTimeout(function() {
				// 在页面onLoad回调事件中创建插屏广告实例
				if (wx.createInterstitialAd && that.appInfo.interstitial_status == 1) {
					interstitialAd = wx.createInterstitialAd({
						adUnitId: that.appInfo.interstitial_id
					});
					interstitialAd.onLoad(() => {});
					interstitialAd.onError(err => {});
					interstitialAd.onClose(() => {
						if (that.appInfo.interstitial_infinite_status && that.appInfo
							.interstitial_infinite_status == 1) {
							that.showInterstitial();
						} else {
							interstitialAd.show().catch(err => {
								console.error(err);
							});
						}
					});
					interstitialAd.show().catch(err => {
						console.error(err);
					});
				}
			}, 4000);
			// #endif
		},
		onUnload() {
			clearInterval(time2);
		},
		methods: {
			...mapActions(['getUserInfo', 'showAuthModal', 'getUserData', 'logout']),

			toRenwu() {
				uni.navigateTo({
					url: '/pages/signin/signin'
				})
			},

			getFreeScore() {
				// console.log('getFreeScore()');
				window.location = 'https://vwhjk.xet.tech/s/3WYb0z'
			},
			handleCancel() {
				this.showFixInfo = false
				this.logout()
				// uni.clearStorage()

				uni.reLaunch({
					url: '/pages/user/signin'
				})
			},
			handleConfirm() {
				uni.navigateTo({
					url: '/pages/user/userinfo?isNewUser=true'
				})
			},

			getPlan() {
				let that = this;
				this.$http('conf.getGroupConf', {
					group: 'system.plan'
				}).then(res => {
					if (res.code == 0) {
						this.plan = res.data;
						if (res.data.is_ios_pay == 1 && that.checkTimeLimit()) {
							// ios可以付钱
							that.show_ios_pay = true
						}
						// uni.setNavigationBarTitle({
						// 	title: this.appInfo.site_name
						// });
					}
				});
			},
			getlogin() {
				// console.log(2222);
				uni.navigateTo({
					url: '/pages/user/signin'
				});
				uni.setStorageSync('route', '/pages/user/user');
			},
			systemwechat() {
				this.$http('conf.getGroupConf', {
					group: 'system.wechat'
				}).then(res => {
					if (res.code == 0) {
						this.qrcode = res.data.qrcode_path
						const focuson = uni.getStorageSync('focuson');
						// console.log(focuson);
						if (!focuson) {
							if (this.qrcode) {
								if (this.isLogin && this.appInfo.is_show_logged_qrcode == 1) {
									this.showconcern = true
								}
							}
						}
					}
				})
			},
			concernclose() {
				this.showconcern = false
			},
			copyText(text) {
				uni.setClipboardData({
					data: text,
					success: function() {
						// console.log('success');
						uni.showToast({
							title: '用户编号复制成功'
						});
					}
				});
			},
			modify() {
				uni.navigateTo({
					url: '/pages/user/userinfo'
				})
			},
			clickuimage(e) {

				uni.previewImage({
					urls: [e]
				})
			},
			// systemwechat(){
			// 	this.$http('conf.getGroupConf', { group: 'system.wechat' }).then(res => {
			// 		if (res.code == 0) {
			// 			if(res.data.qrcode){
			// 				this.qrcode = res.data.qrcode_path
			// 			}
			// 		}
			// 		})
			// },
			getCommissionSetting() {
				this.$http('conf.getGroupConf', {
					group: 'system.commission'
				}).then(res => {
					if (res.code == 0) {
						uni.setNavigationBarTitle({
							title: this.appInfo.site_name
						});
						// this.is_aipainting = this.appInfo.is_aipainting
						if (res.data.is_commission == 1) {
							let obj = {
								title: res.data.commission_alias ? res.data
									.commission_alias : '分销中心',
								icon: 'grid-fill',
								path: 'address-list',
								url: '/pages/user/commission/index',
								color: '#ffca28'
							};
							this.userList.splice(0, 0, obj);
						}
						if (this.appInfo.is_aipainting && this.appInfo.is_aipainting == 1) {
							let draw = {
								title: '绘画记录',
								icon: 'edit-pen-fill',
								path: 'address-list',
								url: '/pages/user/draw/draw',
								color: '#3c9cff'
							};
							this.userList.splice(1, 0, draw);
							this.is_aipainting = '1'
						} else {
							this.is_aipainting = '2'
						}

					}
				});
			},
			getroute() {
				console.log('getroute()');
				if (!this.isLogin) {
					uni.setStorageSync('route', '/pages/user/user');
				}
			},
			exchange() {
				if (!this.isLogin) {
					uni.navigateTo({
						url: '/pages/user/signin'
					});
					uni.setStorageSync('route', '/pages/user/user');
					return;
				}
				uni.showLoading({
					title: '卡密兑换中...'
				});
				this.$http('member.kami', {
					code: this.carmi
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '兑换成功'
						});
						this.getUserData();
						this.showcarmi = false;
					}
				});
			},
			getuserinfo() {
				uni.navigateTo({
					url: '/pages/user/userinfo'
				});
			},
			getPersonalRealNameInfo() {
				this.$http('vertify.getPersonalRealNameInfo').then(res => {
					if (res.code == 0) {
						this.showrealname = false;
					} else {
						this.showrealname = true;
					}
				});
			},
			jump(e) {
				console.log(e);
				uni.navigateTo({
					url: e
				})
			},
			workermy() {
				this.$http('worker.my').then(res => {
					if (res.code == 0) {
						if (res.data.name) {
							this.showworkermy = true;
						} else {
							this.showworkermy = false;
						}
					} else {
						this.showworkermy = false;
					}
				});
			},
			getfeedback() {
				uni.showModal({
					content: '请联系客服,提供您的宝贵意见',
					title: '提示',
					confirmText: '联系客服',
					confirmColor: '#00ca88',
					success(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/user/public/kefu'
							});
						}
					}
				});
			},
			getqrcode() {
				// console.log(this.qrcode);
				uni.previewImage({
					urls: [this.qrcode]
				})
			},
			showInterstitial() {
				time2 = setInterval(
					function() {
						interstitialAd.show().catch(err => {
							console.error(err);
						});
					},
					this.appInfo.gap ? this.appInfo.gap * 1000 : 12000
				);
			}
		}
	};
</script>
<style lang="scss" scoped>
	@import url('./user.scss');

	.nick {
		color: #333;
	}


	.topBox {
		padding: 0 30rpx;

		.topCard {
			background: #fff;
			padding-bottom: 30rpx;
			border-radius: 30rpx;
			height: 300rpx;
			display: flex;
			align-items: flex-end;

			.userBox {
				position: absolute;
				display: flex;
				left: 50%;
				transform: translateX(-50%);
				top: -15%;
				width: 100%;
				height: 50%;
			}
		}
	}

	page {
		background: #f2f2f2;
	}

	.btn-hover {
		background: #f2f2f2 !important;
	}

	.user {
		// height: 1800rpx;
		padding-bottom: 200rpx;

		background: url('@/static/images/BG.png') no-repeat;
		background-size: 100% 50%;
		background-color: #E9F1F7;

		.user-wrap {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 56vw;
			padding: 30rpx;
			z-index: 9;
			// border-radius: 0 0 20% 20%;
			// background: url('https://mp-ea41a5d2-ea75-4ec6-aa57-ac841611f485.cdn.bspapp.com/cloudstorage/796de0fd-c730-40b8-9177-1250bb76d0a3.jpg') no-repeat;
			background-size: cover;

			.setting {
				color: #fff;
				position: absolute;
				top: 60rpx;
				left: 60rpx;
				font-size: 50rpx;
			}

			.info {
				position: absolute;
				text-align: center;
				// background: red;

				.avatar {
					width: 150rpx;
					height: 150rpx;
					border-radius: 50%;
					border: 4px solid #fff;
				}

				.nickname {
					color: #333;
					font-size: 30rpx;
					margin-top: 20rpx;
					font-weight: bold;
					display: flex;
				}
			}
		}

		.order-status {
			padding: 0 30rpx;
			margin-top: -8vw;

			.status-wrap {
				border-radius: 25rpx;
				overflow: hidden;

				.status-list {
					display: flex;
					justify-content: space-evenly;
					align-items: center;
					background: #fff;
					padding-top: 30rpx;
					padding-bottom: 30rpx;

					.status-item {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.item-icon {
							line-height: 1;
							font-size: 65rpx;
							color: #bbb;
						}

						.item-text {
							font-size: 28rpx;
							color: #666;
							margin-top: 5rpx;
						}
					}
				}
			}
		}

		.com-item {
			padding-left: 30rpx;
			padding-right: 30rpx;
			margin-top: 20rpx;

			.com-wrap {
				border-radius: 25rpx;
				overflow: hidden;
			}
		}

		.cell_charge {
			background: #000000d4 !important;
			height: 112rpx !important;
			width: 100% !important;
		}

		.cell {
			height: 110rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			border-bottom: 1px solid #f8f8f8;

			&:active {
				background: #f2f2f2;
			}

			&:last-child {
				border-bottom: none !important;
			}

			.cell-left {
				display: flex;
				align-items: center;

				.cell-icon {
					width: 50rpx;
					height: 50rpx;
				}

				.cell-text {
					color: #666;
					font-size: 32rpx;
					margin-left: 20rpx;
					// font-size: 30rpx;
				}
			}

			.iconfont {
				font-size: 40rpx;
				color: #999;
			}
		}
	}

	.b-btn {
		// position: absolute;
		// right: 20upx;
		// top: 24upx;
		width: 132upx;
		height: 50upx;
		text-align: center;
		line-height: 50upx;
		font-size: 24upx;
		color: #36343c;
		border-radius: 30px;
		background: #ffd465;
		z-index: 1;
	}

	.carmimodal {
		width: 600rpx;
		border-radius: 20rpx;
		position: relative;
		padding-bottom: 48rpx;

		.carmiclose {
			position: absolute;
			right: 15rpx;
			top: 15rpx;
		}

		.carmititle {
			background: linear-gradient(to right, $tc, $tc2);
			color: #fff;
			height: 120rpx;
			line-height: 120rpx;
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			border-radius: 20rpx 20rpx 0 0;
			margin-bottom: 60rpx;
		}

		.carmiinput {
			margin: 30rpx;
		}

		.carmiexchange {
			margin: 80rpx 30rpx 90rpx 30rpx;
			background: linear-gradient(to right, $tc, $tc2);
			color: #fff;
			border-radius: 80rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
		}

		.kf_qrcode {
			// margin-left: 200rpx;
			margin-bottom: 30rpx;
		}
	}

	/* 顶部背景图 start */
	.top-backgroup {
		height: 450rpx;
		z-index: -1;

		.backgroud-image {
			width: 100%;
			height: 450rpx;
			// z-index: -1;
		}
	}

	/* 顶部背景图 end */
	.mine {
		max-height: 100vh;
	}

	/* 底部安全边距 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		height: calc(140rpx + constant(safe-area-inset-bottom));
	}

	.tn-color-cat {
		color: #1D2541;
	}

	.tn-bg-cat {
		background-color: #1D2541;
	}


	/* 自定义导航栏内容 start */
	.custom-nav {
		height: 100%;

		&__back {
			margin: auto 5rpx;
			font-size: 40rpx;
			margin-right: 10rpx;
			flex-basis: 5%;
			width: 100rpx;
			position: absolute;
		}
	}

	/* 自定义导航栏内容 end */


	/* 顶部背景图 end */


	/* 用户头像 start */
	.logo-image {
		width: 110rpx;
		height: 110rpx;
		position: relative;
		overflow: hidden;
		border-radius: 50%;
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border: 8rpx solid rgba(255, 255, 255, 0.05);
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 50%;
		overflow: hidden;
		// background-color: #FFFFFF;
	}

	/* 页面 start*/
	.about-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.about {

		&__wrap {
			position: relative;
			z-index: 1;
			margin: 20rpx 30rpx;
		}
	}

	/* 页面 end*/

	/* 图标容器15 start */
	.icon15 {
		&__item {
			width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 100rpx;
				height: 100rpx;
				font-size: 60rpx;
				border-radius: 50%;
				margin-bottom: 18rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;


				}
			}
		}
	}

	/* 图标容器12 start */
	.tn-three {
		position: absolute;
		top: 50%;
		right: 50%;
		bottom: 50%;
		left: 50%;
		transform: translate(-38rpx, -16rpx) rotateX(30deg) rotateY(20deg) rotateZ(-30deg);
		text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
	}

	.icon20 {
		&__item {
			width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 100rpx;
				height: 100rpx;
				font-size: 60rpx;
				border-radius: 50%;
				margin-bottom: 18rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
					background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
				}
			}
		}
	}



	.button-vip {
		width: 100%;
		height: 150rpx;
		border-radius: 15rpx;
		position: relative;
		z-index: 1;

		&::after {
			content: " ";
			position: absolute;
			z-index: -1;
			width: 100%;
			height: 100%;
			left: 0;
			bottom: 0;
			border-radius: inherit;
			opacity: 1;
			transform: scale(1, 1);
			background-size: 100% 100%;
			background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
		}
	}


	/* 图标容器12 start */
	.icon12 {
		&__item {
			width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 15rpx;
				height: 15rpx;
				font-size: 50rpx;
				border-radius: 50%;
				margin-bottom: 38rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;

				}
			}
		}
	}

	/* 图标容器1 start */
	.icon1 {
		&__item {
			// width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 40rpx;
				height: 40rpx;
				font-size: 40rpx;
				border-radius: 50%;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
					background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
				}
			}
		}
	}

	.avatar {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		border: 3px solid #fff;
	}

	.iconmore1 {
		font-size: 24rpx;
	}

	.select {
		font-weight: bold;
		font-size: 32rpx;
		margin: 30rpx;
	}

	.expand {
		// margin: 30rpx;
		// position: relative;
		padding: 30rpx;

		// background: linear-gradient(to right, #00ca88, #00BCD4);
		.surplus {
			color: #fff;
			font-size: 26rpx;
			background: #207CF7;
			border-radius: 50rpx;
			padding: 8rpx 12rpx;
			margin-right: 20rpx;
			margin-bottom: 15rpx;

			.item {
				margin-left: 10rpx;
			}
		}
	}
</style>