dev/dcp-app-gate/pages/profile/personIntegrate/integrateConversion.vue

<template>
	<!-- 积分兑换 -->
	<view>
		<!-- 导航栏 -->
		<view style="background-color: $color-white !important;" v-show="getIntegrate">
			<u-navbar :back-text="i18n('Back')" :back-text-style="backStyle" back-icon-color="#fff" title-color="#fff"
				:background="background" title-width="300" :title="i18n('getIntegrateConversion')"></u-navbar>
		</view>
		<view style="background-color: $color-white !important;" v-show="toGetIntegrate">
			<u-navbar :back-text="i18n('Back')" :back-text-style="backStyle" back-icon-color="#fff" title-color="#fff"
				:background="background" title-width="300" :title="i18n('MyIntetral')"></u-navbar>
		</view>
		<!-- 用户信息 -->
		<view class="title">
			<view class="user-info">
				<view class="user-pic">
					<image class="ui-pic-detail" :src="websiteUrl+picDetail.userPic" mode=""></image>
				</view>
				<view class="user-grade-now">
					{{userInfos.levelName}}
				</view>
				<view class="integrate-now"><text
						class="big-num">{{userInfos.point}}<br /></text>{{$i18n.locale=='zh'?'可用积分':'Available integral'}}
				</view>
				<u-button class=" get-integrate" type="custom" shape="circle" @tap="toGetInfo" v-show="getIntegrate">
					<text class="get-integrate-info">{{$i18n.locale=='zh'?'赚积分':'Earn Points'}}</text>
				</u-button>
				<u-button class=" get-integrate" type="custom" shape="circle" @tap="toConversion"
					v-show="toGetIntegrate"><text
						class="get-integrate-info">{{$i18n.locale=='zh'?'花积分':'Take Integral'}}</text>
				</u-button>
			</view>
		</view>
		<!-- 花积分 -->
		<view class="user-pay-integrate" style="background-color: #ebebeb;" v-show="getIntegrate">
			<uni-list class="my-list">
				<uni-list-item showArrow :title="i18n('MyOrderList')" clickable @tap="toMyList" />
			</uni-list>
			<view class="container">
				<view class="container-title">{{$i18n.locale=='zh'?'热门期刊':'Popular journals'}}</view>
				<view class="container-content" v-for="(InfoList,index) in ShopInfo" :key="index">
					<view class="content-left">
						<image :src="websiteUrl + InfoList.picture" class="left-pic">
						</image>
						<view class="littlt-pic">
							<image src="/static/fill-little.png" class="fire-pic" />TOP<text
								class="little-num">{{index}}</text>
						</view>
					</view>
					<view class="content-right">
						<view class="content-right-title">
							{{$i18n.locale=='zh'? InfoList.commodityName:InfoList.commodityNameEn}}
						</view>
						<view class="content-right-need">{{$i18n.locale=='zh'?'所需分值:':'The score:'}}<text
								class="need-num">{{InfoList.point}}</text>
						</view>
						<view class="content-right-lost">
							<view class="lost-num">
								{{$i18n.locale=='zh'?'累计兑换量：':'Accumulated exchange:'}}{{InfoList.exchangeQuantity}}个
							</view>
							<view class="lost-info">
								{{$i18n.locale=='zh'?`${InfoList.inventoryQuantity>=100?'库存充足':InfoList.inventoryQuantity}`:
								`${InfoList.inventoryQuantity>=100?"sufficientstock":InfoList.inventoryQuantity}`}}
							</view>
						</view>

						<button v-if="InfoList.commodityStatus==2" class="button-popup-success2"
							@tap="toShopInfo(InfoList.id,userInfos.level)">
							<text class="button-text-success">{{$i18n.locale=='zh'?'立即兑换':'Immediately change'}}</text>
						</button>
						<button v-else class="button-popup-success" @tap="toShopInfo(InfoList.id,userInfos.level)">
							<text class="button-text-success">{{$i18n.locale=='zh'?'立即兑换':'Immediately change'}}</text>
						</button>
					</view>

				</view>
			</view>
		</view>
		<!-- 赚积分 -->
		<view class="user-get-integrate" style="background-color: #f3f3f3;" v-show="toGetIntegrate">
			<!-- 账号积分 -->
			<view class="to-text">{{$i18n.locale=='zh'?'新手任务':'New task'}}</view>
			<uni-section>
				<view class="ui-btn" v-if="$i18n.locale=='zh'">
					<uni-segmented-control :current="current1" :values="items" :style-type="styleType"
						:active-color="activeColor" @clickItem="onClickItem" class="ui-get-btn" />
				</view>
				<view class="ui-btn" v-if="$i18n.locale!='zh'">
					<uni-segmented-control :current="current1" :values="itemsEn" :style-type="styleType"
						:active-color="activeColor" @clickItem="onClickItem" class="ui-get-btn" />
				</view>
			</uni-section>
			<view class="ui-content">
				<!-- 账号积分任务 -->
				<view v-if="current1 === 0">
					<uni-list class="to-my-list" v-for="(userTask,index) in userIntegrate" :key="index"
						v-show="!taskText[userTask.taskDict]">
						<view class="to-list-item">
							<view class="list-item-pic">
								<image v-if="userTask.count===userTask.number" :src="newDownTask[userTask.taskDict]"
									class="un-pic" />
								<image v-else :src="newUnDownTask[userTask.taskDict]" class="un-pic" />
							</view>
							<view class="list-item-text">
								<view class="item-text-title">
									<view class="item-text-pic">
										{{$i18n.locale=='zh'?userTask.taskName:userTask.taskNameEn}}
									</view>
									<view class="item-text-change">
										{{$i18n.locale=='zh'?'已完成':'off the stocks'}}{{userTask.count}}/{{userTask.number}}
									</view>
								</view>
								<view class="item-text-integrate">
									<view class="item-get-grow">{{$i18n.locale=='zh'?'积分':'Integrate'}}<text
											class="item-text-integrate-text">+{{userTask.taskPoint.day1}}</text>
									</view>
								</view>
							</view>
							<view class="list-item-btn">
								<button class="list-item-btn-get" @tap="getUserIntegrate(userTask.taskDict)"
									v-if="userTask.count!==userTask.number">{{$i18n.locale=='zh'?'去完成':'Complete'}}</button>
								<button class="list-item-btn-get-end"
									v-else>{{$i18n.locale=='zh'?'已完成':'Completed'}}</button>
							</view>
						</view>
					</uni-list>
				</view>
				<!-- 账号成长值任务 -->
				<view v-if="current1 === 1">
					<uni-list class="to-my-list" v-for="(newTask,index) in TaskNewbie" :key="index"
						v-show="!taskText[newTask.taskDict]">
						<!--v-for uni-list-->
						<view class="to-list-item">
							<view class="list-item-pic">
								<image v-if="newTask.count===newTask.number" :src="newDownTask[newTask.taskDict]"
									class="un-pic" />
								<image v-else :src="newUnDownTask[newTask.taskDict]" class="un-pic" />
							</view>
							<view class="list-item-text">
								<view class="item-text-title">
									<view class="item-text-pic">
										{{$i18n.locale=='zh'?newTask.taskName:newTask.taskNameEn}}
									</view>
									<view class="item-text-change">
										{{$i18n.locale=='zh'?'已完成':'off the stocks'}}{{newTask.count}}/{{newTask.number}}
									</view>
								</view>
								<view class="item-text-integrate">
									<view class="item-get-grow">{{$i18n.locale=='zh'?'成长值':'Growth Value'}}<text
											class="item-text-integrate-text">+{{newTask.growth}}</text>
									</view>
								</view>
							</view>
							<view class="list-item-btn">
								<button class="list-item-btn-get" @tap="getUserIntegrate(newTask.taskDict)"
									v-if="newTask.count!==newTask.number">{{$i18n.locale=='zh'?'去完成':'Complete'}}</button>
								<button class="list-item-btn-get-end"
									v-else>{{$i18n.locale=='zh'?'已完成':'Completed'}}</button>
							</view>
						</view>
					</uni-list>
				</view>
			</view>
			<!-- 每日任务 -->
			<view class="to-text">{{$i18n.locale=='zh'?'日常任务':'Daily Task'}}</view>
			<uni-section>
				<view class="ui-btn" v-if="$i18n.locale=='zh'">
					<uni-segmented-control :current="current2" :values="items" :style-type="styleType"
						:active-color="activeColor" @clickItem="getClickItem" class="ui-get-btn" />
				</view>
				<view class="ui-btn" v-if="$i18n.locale!='zh'">
					<uni-segmented-control :current="current2" :values="itemsEn" :style-type="styleType"
						:active-color="activeColor" @clickItem="getClickItem" class="ui-get-btn" />
				</view>
			</uni-section>
			<view class="ui-content">
				<!-- 每日积分任务 -->
				<view v-if="current2 === 0">
					<uni-list class="to-my-list" v-for="(getDailyInfos,index) in dailyIntegrate" :key="index"
						v-show="!taskText[getDailyInfos.taskDict]">
						<!--v-for uni-list-->
						<view class="to-list-item">
							<view class="list-item-pic">
								<image v-if="getDailyInfos.count===getDailyInfos.number"
									:src="newDownTask[getDailyInfos.taskDict]" class="un-pic" />
								<image v-else :src="newUnDownTask[getDailyInfos.taskDict]" class="un-pic" />
							</view>
							<view class="list-item-text">
								<view class="item-text-title">
									<view class="item-text-pic">
										{{$i18n.locale=='zh'?getDailyInfos.taskName:getDailyInfos.taskNameEn}}
									</view>
									<view class="item-text-change">
										{{$i18n.locale=='zh'?'已完成':'off the stocks'}}{{getDailyInfos.count}}/{{getDailyInfos.number}}
									</view>

								</view>
								<view class="item-text-integrate">
									<view class="item-get-grow">{{$i18n.locale=='zh'?'积分':'Integrate'}}<text
											class="item-text-integrate-text">+{{getDailyInfos.taskPoint.day1}}</text>
									</view>
								</view>
							</view>
							<view class="list-item-btn">
								<button class="list-item-btn-get-green" @tap="getUserIntegrate(getDailyInfos.taskDict)"
									v-if="getDailyInfos.count!==getDailyInfos.number">
									{{$i18n.locale=='zh'?'去完成':'Complete'}}</button>

								<button class="list-item-btn-get-end"
									v-else>{{$i18n.locale=='zh'?'已完成':'Completed'}}</button>
							</view>
						</view>
					</uni-list>
				</view>
				<!-- 每日成长值任务 -->
				<view v-if="current2 === 1">
					<uni-list class="to-my-list" v-for="(dailyInfo,index) in GetDaily" :key="index"
						v-show="!taskText[dailyInfo.taskDict]">
						<!--v-for uni-list-->
						<view class="to-list-item">
							<view class="list-item-pic">
								<image v-if="dailyInfo.count===dailyInfo.number" :src="newDownTask[dailyInfo.taskDict]"
									class="un-pic" />
								<image v-else :src="newUnDownTask[dailyInfo.taskDict]" class="un-pic" />
							</view>
							<view class="list-item-text">
								<view class="item-text-title">
									<view class="item-text-pic">
										{{$i18n.locale=='zh'?dailyInfo.taskName:dailyInfo.taskNameEn}}
									</view>
									<view class="item-text-change">
										{{$i18n.locale=='zh'?'已完成':'off the stocks'}}{{dailyInfo.count}}/{{dailyInfo.number}}
									</view>
								</view>
								<view class="item-text-integrate">

									<view class="item-get-grow">{{$i18n.locale=='zh'?'成长值':'Growth Value'}}<text
											class="item-text-integrate-text">+{{dailyInfo.growth}}</text>
									</view>
								</view>
							</view>
							<view class="list-item-btn">
								<button class="list-item-btn-get-green" @tap="getUserIntegrate(dailyInfo.taskDict)"
									v-if="dailyInfo.count!=dailyInfo.number">{{$i18n.locale=='zh'?'去完成':'Complete'}}</button>
								<button class="list-item-btn-get-end"
									v-else>{{$i18n.locale=='zh'?'已完成':'Completed'}}</button>
							</view>
						</view>
					</uni-list>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	const newUnDownTask = {
		point_task_upload_head_portrait: '/static/gray/user-title.png',
		point_task_complete_info: '/static/gray/user-own.png',
		point_task_verified_name: '/static/gray/user-achve.png',
		point_task_bind_email: '/static/gray/user-email.png',
		point_task_set_nickname: '/static/gray/user-name.png',
		point_task_bind_phone: '/static/gray/user-phone.png',
		platform_problem_feedback: '/static/gray2/user-ques.png',
		point_task_upload_resources_project: '/static/gray2/user-guo.png',
		project_recommended: '/static/gray2/user-ping.png',
		aubmit_a_message_once: '/static/gray2/user-guo.png',
		point_task_upload_journal: '/static/gray2/user-guo.png',
		point_task_upload_resources_result: '/static/gray2/user-guo.png',
		activity_registration_successful: '/static/gray2/user-huo.png',
		point_task_share_project: '/static/gray2/user-fen.png',
		meeting_registration_successful: '/static/gray2/user-hui.png',
		the_message_was_liked: '/static/gray2/user-liu.png',
		point_task_share_information: '/static/gray2/user-fen.png',
		point_task_sign: '/static/gray2/user-log.png',
		message_is_saved: '/static/gray2/user-yan.png',
		point_task_upload_information: '/static/gray2/user-shen.png',
		point_read_information: '/static/gray2/user-yue.png',
		point_task_development_cooperation_message: '/static/gray2/user-fa.png',
		point_task_project_ask: '/static/gray2/user-xiang.png',
		point_task_project_message: '/static/gray2/user-last.png',
		point_task_attention: '/static/gray2/user-guan.png',
		point_task_view_resources_project: '/static/gray/2.png'
	};
	const newDownTask = {
		point_task_upload_head_portrait: '/static/blue/user-title.png',
		point_task_complete_info: '/static/blue/user-1.png',
		point_task_verified_name: '/static/blue/user-2.png',
		point_task_bind_email: '/static/blue/user-3.png',
		point_task_set_nickname: '/static/blue/user-4.png',
		point_task_bind_phone: '/static/blue/user-5.png',
		platform_problem_feedback: '/static/green/user-1.png',
		point_task_upload_resources_project: '/static/green/user-2.png',
		point_task_upload_research_resources: '/static/green/user-2.png',
		project_recommended: '/static/green/user-3.png',
		aubmit_a_message_once: '/static/green/user-2.png',
		point_task_upload_journal: '/static/green/user-2.png',
		point_task_upload_resources_result: '/static/green/user-2.png',
		activity_registration_successful: '/static/green/user-4.png',
		point_task_share_project: '/static/green/user-5.png',
		meeting_registration_successful: '/static/green/user-6.png',
		the_message_was_liked: '/static/green/user-7.png',
		point_task_share_information: '/static/green/user-6.png',
		point_task_sign: '/static/green/user-8.png',
		message_is_saved: '/static/green/user-9.png',
		point_task_upload_information: '/static/green/user-11.png',
		point_task_development_cooperation_message: '/static/green/user-12.png',
		point_task_project_message: '/static/green/user-13.png',
		point_task_project_ask: '/static/green/user-14.png',
		point_read_information: '/static/green/user-15.png',
		point_task_attention: '/static/green/user-16.png',
		point_task_view_resources_project: '/static/green/user-17.png'
	}
	const taskText = {
		point_task_upload_research_resources: 'point_task_upload_research_resources',
		point_task_verified_name: 'point_task_verified_name:',
		point_task_development_cooperation_message: 'point_task_development_cooperation_message',
		point_task_upload_resources_result: 'point_task_upload_resources_result',
		point_task_upload_resources_project: 'point_task_upload_resources_project',
		point_task_upload_information: 'point_task_upload_information',
		point_task_upload_journal: 'point_task_upload_journal',
		point_task_project_message: 'point_task_project_message',
		platform_problem_feedback: 'platform_problem_feedback',
		project_recommended: 'project_recommended',
		aubmit_a_message_once: 'aubmit_a_message_once ',
		message_is_saved: 'message_is_saved',
		the_message_was_liked: 'the_message_was_liked',
		point_task_complete_info: 'point_task_complete_info',
		// point_task_project_ask: 'point_task_project_ask',
		// point_task_view_resources_project: 'point_task_view_resources_project',
	}
	// import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	// import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	// import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		// components: {
		// 	uniPopupDialog,
		// 	uniPopupMessage,
		// 	uniPopup
		// },
		data() {
			return {

				background: {
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle: {
					color: '#FFFFFF',
				},
				ShopInfo: {},
				picDetail: {},
				TaskNewbie: {},
				GetDaily: {},
				newUnDownTask: newUnDownTask,
				newDownTask: newDownTask,
				taskText: taskText,
				userIntegrate: {},
				dailyIntegrate: {},
				userInfos: {},
				getIntegrate: true,
				toGetIntegrate: false,
				isAchieve: true,

				items: ['积分任务', '成长值任务'],
				itemsEn: ['Integral task', 'Growing value task'],
				styles: [{
						value: 'button',
						text: '按钮',
						checked: true
					},
					{
						value: 'text',
						text: '文字'
					}
				],
				colors: ['#007aff', '#4cd964', '#dd524d'],
				current1: 0,
				current2: 0,
				activeColor: '#007aff',
				styleType: 'button',

			};

		},

		onShow() {
			this.getShoppingDetail()
			// this.GetInfoDetails()
			this.getUserInfo()
			this.getTaskComplete()
			this.getIntegrateTask()
		},
		methods: {
			i18n(data) {
				return this.$t('common.' + data);
			},

			// 分段器函数
			onClickItem(e) {
				if (this.current1 !== e.currentIndex) {
					this.current1 = e.currentIndex
				}
			},
			getClickItem(e) {
				if (this.current2 !== e.currentIndex) {
					this.current2 = e.currentIndex
				}
			},
			//跳转详情
			toShopInfo(id, grade) {
				// console.log(id);
				// console.log(grade);
				uni.navigateTo({
					url: './userShopDetails?id=' + id + '&grade=' + grade
				})
			},

			//赚积分按钮
			toGetInfo() {
				this.getIntegrate = false;
				this.toGetIntegrate = true
			},
			// 花积分按钮
			toConversion() {
				this.getIntegrate = true;
				this.toGetIntegrate = false
			},
			// 新手积分任务跳转
			getUserIntegrate(e) {
				console.log(e, '=============');
				if (e == 'point_task_complete_info') {
					console.log('完善个人信息');
					uni.navigateTo({
						url: '/pages/profile/profileSetUp/basicInformation'
					})
				} else if (e == 'point_task_verified_name') {
					console.log('完成实名认证');
				} else if (e == 'point_task_bind_email') {
					console.log('绑定邮箱');
					uni.navigateTo({
						url: '/pages/profile/profileSetUp/changeMailbox'
					})
				} else if (e == 'point_task_upload_head_portrait') {
					console.log('上传头像');
					uni.switchTab({
						url: '/pages/profile/profile'
					})
				} else if (e == 'point_task_bind_phone') {
					console.log('绑定手机号');
					uni.navigateTo({
						url: '/pages/profile/profileSetUp/accountSecurity'
					})
				} else if (e == 'point_read_information') {
					console.log('阅读资讯');
					// console.log(getCurrentPages());
					uni.setStorageSync("currentIndex", e); //赋值
					uni.switchTab({
						url: '/pages/information/index'
					})
				} else if (e == 'point_task_development_cooperation_message') {
					console.log('发展合作留言');
					uni.navigateTo({
						url: ''
					})
				} else if (e == 'point_task_project_ask') {
					console.log('项目问询');
					uni.navigateTo({
						url: '/pages/country/projectPresentation/projectPresentation'
					})
				} else if (e == 'point_task_upload_resources_result') {
					console.log('上传研究成果并审核通过');
					uni.navigateTo({
						url: ''
					})
				} else if (e == 'point_task_upload_resources_project') {
					console.log('上传项目资源并审核通过');
					uni.navigateTo({
						url: ''
					})
				} else if (e == 'point_task_upload_information') {
					console.log('上传资讯信息并审核通过');
					uni.navigateTo({
						url: ''
					})
				} else if (e == 'point_task_upload_journal') {
					console.log('上传期刊信息并审核通过');
					uni.navigateTo({
						url: ''
					})
				} else if (e == 'point_task_view_resources_project') {
					console.log('查看项目资源');
					uni.navigateTo({
						url: '/pages/country/projectPresentation/projectPresentation'
					})
				} else if (e == 'point_task_attention') {
					console.log('关注项目、国别、企业');
					uni.navigateTo({
						url: '/pages/country/projectPresentation/projectPresentation'
					})
				} else if (e == 'activity_registration_successful') {
					console.log('参与合作交流活动报名成功');
					uni.navigateTo({
						url: '/pages/cooperationExchange/cooperationExchange'
					})
				} else if (e == 'meeting_registration_successful') {
					console.log('参与会议活动报名成功');
					uni.navigateTo({
						url: '/pages/conference/meetingIndexCh/meetingIndex'
					})
				} else if (e == 'point_task_project_message') {
					console.log('项目留言');
					uni.navigateTo({
						url: ''
					})
				} else if (e == 'platform_problem_feedback') {
					console.log('平台问题反馈');
					uni.navigateTo({
						url: ''
					})
				} else if (e == 'project_recommended') {
					console.log('项目被平台推荐');
					uni.navigateTo({
						url: ''
					})
				} else if (e == 'aubmit_a_message_once') {
					console.log('项目提交留言一次');
					uni.navigateTo({
						url: ''
					})
				} else if (e == 'the_message_was_liked') {
					console.log('发展合作留言被点赞');
					uni.navigateTo({
						url: ''
					})
				} else if (e == 'point_task_sign') {
					console.log('登录打卡');
					uni.navigateTo({
						url: ''
					})
				} else if (e == 'message_is_saved') {
					console.log('发展合作留言被收藏');
					uni.navigateTo({
						url: ''
					})
				}
			},
			toMyList() {
				uni.navigateTo({
					url: './myPayList'
				})
			},
			//礼品列表接口
			async getShoppingDetail() {
				const res = await this.$myRequest({
					url: '/uc/umsPointCommoditys/commodityList',
					data: {}
				});
				// console.log(res);
				this.ShopInfo = res.data.pointCommoditys
			},
			// 获取用户头像接口
			async getUserInfo() {
				const res = await this.$myRequest({
					url: '/uc/userCenter/findBasicInfo',
					data: {},
				});

				this.picDetail = res.data
				await this.getUserDetail()
			},
			// 用户信息接口
			async getUserDetail() {
				const res = await this.$myRequest({
					url: '/uc/umsUserPoints/getUserPoint',
					data: {
						// "userUid": this.picDetail.id
					}
				});
				// console.log(res);
				this.userInfos = res.data.umsUserPoints[0]
				if (this.userInfos.levelName == '白银用户') {
					if (this.$i18n.locale == 'zh') {
						this.userInfos.levelName = '白银用户'
					} else {
						this.userInfos.levelName = 'Silver User'
					}
				} else if (this.userInfos.levelName == '黄金用户') {
					if (this.$i18n.locale == 'zh') {
						this.userInfos.levelName = '黄金用户'
					} else {
						this.userInfos.levelName = 'Gold User'
					}
				} else if (this.userInfos.levelName == '铂金用户') {
					if (this.$i18n.locale == 'zh') {
						this.userInfos.levelName = '铂金用户'
					} else {
						this.userInfos.levelName = 'Platinum User'
					}
				} else {
					if (this.$i18n.locale == 'zh') {
						this.userInfos.levelName = '星钻用户'
					} else {
						this.userInfos.levelName = 'Star User'
					}
				}
			},
			// 成长值任务接口
			async getTaskComplete() {
				const res = await this.$myRequest({
					url: '/uc/umsUserGrowthTasks/getUserGrowthTaskComplete',
					data: {},
				});
				this.TaskNewbie = res.data.piont_newbie_task
				this.GetDaily = res.data.point_daily_task
			},
			// 积分任务接口
			async getIntegrateTask() {
				const res = await this.$myRequest({
					url: '/uc/umsUserTasks/getUserTaskComplete',
					data: {}
				});
				this.userIntegrate = res.data.other.piont_newbie_task
				this.dailyIntegrate = res.data.other.point_daily_task
			},

		}
	}
</script>

<style lang="scss" scoped>
	.title {
		width: 100%;
		height: 100%;

		.user-info {
			display: flex;
			justify-content: space-around;
			background-image: url('/static/bgc-user.png');
			background-size: 100%;
			height: 200rpx;
			position: relative;

			.user-pic {
				width: 20%;
				height: 73%;
				margin-top: 4%;
				margin-left: 4%;
				border-radius: 50%;
				background-color: #e9e9e9;
				overflow: hidden;

				.ui-pic-detail {
					width: 100%;
					height: 100%;
				}
			}

			.user-grade-now {
				font-size: 20rpx;
				width: 25%;
				text-align: center;
				transform: translateY(410%);
				border-radius: 50rpx;
				background-color: #DFAC74FF;
				position: absolute;
				left: 2%;
				top: 30rpx;
			}

			.integrate-now {
				width: 30%;
				text-align: center;
				margin-left: 11%;

				.big-num {
					display: block;
					font-size: 60rpx;
					font-weight: 700;
					margin-bottom: -8%;
					margin-top: 18%;
				}
			}

			.get-integrate {
				width: 30%;
				height: 26%;
				transform: translateX(22%) translateY(145%);
				background-color: #368CFFFF;
				border: none;

				.get-integrate-info {
					font-size: 30rpx;
					color: #fff;
					transform: translateX(-15%);
				}
			}
		}
	}

	.user-pay-integrate {

		.container {
			width: 100%;
			background-color: #fff;
			margin-top: 4%;

			.container-title {
				font-size: 36rpx;
				font-weight: 700;
				padding-bottom: 12px;
				margin-left: 4%;
				transform: translateY(20%);
				margin-bottom: 4%;
			}

			.container-content {
				width: 92%;
				margin-left: 4%;
				margin-bottom: 4%;
				display: flex;
				justify-content: space-between;

				.content-left {
					width: 34%;
					height: 300rpx;
					background-color: antiquewhite;

					.left-pic {
						width: 100%;
						height: 100%;
					}

					.littlt-pic {
						width: 120rpx;
						height: 30rpx;
						border-radius: 0 0 60rpx 0;
						background-color: #F29D43FF;
						transform: translateY(-1052%);
						font-size: 8rpx;
						color: #fff;
						line-height: 31rpx;

						.fire-pic {
							width: 20rpx;
							height: 20rpx;
							margin: 0 6rpx;
						}

						.little-num {
							margin-left: 4rpx;
							font-size: 26rpx;
							font-weight: 700;
						}
					}
				}

				.content-right {
					width: 65%;

					.content-right-title {
						font-size: 30rpx;
						font-weight: 700;
						color: #0B0B11FF;
					}

					.content-right-need {
						color: #0B0B11FF;
						margin-top: 16rpx;
						margin-bottom: 16rpx;
						margin-left: 4%;
						font-size: 24rpx;

						.need-num {
							color: #E02020FF;
						}
					}

					.content-right-lost {
						color: #0B0B11FF;
						display: flex;
						justify-content: space-between;
						margin-bottom: 18rpx;

						.lost-num {
							margin-left: 3%;
							font-size: 22rpx;
						}

						.lost-info {
							margin-right: 5%;
							font-size: 22rpx;
						}
					}

					.button-popup-success2 {
						color: deepskyblue;
						width: 40%;
						height: 48rpx;
						line-height: 48rpx;
						margin-left: 4%;
						font-size: 18rpx;
						border-radius: 50rpx;
						border: 1rpx solid #a6a9ad;
						background-color: #a6a9ad;

						.button-text-success {
							color: black;
						}
					}

					.button-popup-success {
						color: deepskyblue;
						width: 40%;
						height: 48rpx;
						line-height: 48rpx;
						margin-left: 4%;
						font-size: 18rpx;
						border-radius: 50rpx;
						border: 1rpx solid wheat;


						.button-text-success {
							color: black;
						}
					}

					.get-container {
						color: deepskyblue;
						width: 30%;
						height: 42rpx;
						margin-left: 4%;
						font-size: 18rpx;
					}
				}
			}
		}
	}

	.user-get-integrate {
		.to-text {
			height: 80rpx;
			line-height: 80rpx;
			margin-left: 3%;
			font-weight: 700;
			margin-bottom: -3%;
		}

		.ui-btn {
			width: 100%;

			.ui-get-btn {
				width: 100%;
				height: 60rpx;
			}
		}

		.ui-content {

			.to-my-list {
				// margin-bottom: 1%;

				.to-list-item {
					width: 94%;
					height: 160rpx;
					margin-left: 3%;
					display: flex;
					justify-content: space-evenly;

					.list-item-pic {
						width: 15%;

						.un-pic {
							width: 90%;
							margin-top: 30rpx;
							height: 100rpx;
						}
					}

					.list-item-text {
						width: 65%;

						.item-text-title {
							display: flex;
							justify-content: space-around;
							margin-top: 20rpx;

							.item-text-pic {
								width: 50%;
								height: 40rpx;
								line-height: 40rpx;
								font-size: 26rpx;
								font-weight: 700;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							.item-text-change {
								height: 40rpx;
								line-height: 40rpx;
								font-size: 20rpx;
								margin-top: 2%;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}

						.item-text-integrate {
							display: flex;
							margin-top: 20rpx;

							.item-get-grow {
								font-size: 22rpx;
								color: #333333FF;
								margin-left: 15%;
							}

							.item-text-integrate-text {
								color: red;
								margin-left: 5rpx;
								font-weight: 700;
							}
						}
					}

					.list-item-btn {
						width: 20%;

						.list-item-btn-get {
							height: 50rpx;
							line-height: 50rpx;
							background-color: #368CFFFF;
							margin-top: 60rpx;
							color: #fff;
							font-size: 20rpx;
						}

						.list-item-btn-get-green {
							height: 50rpx;
							line-height: 50rpx;
							background-color: #5BB200FF;
							margin-top: 60rpx;
							color: #fff;
							font-size: 20rpx;
						}

						.list-item-btn-get-end {
							height: 50rpx;
							line-height: 50rpx;
							margin-top: 60rpx;
							background-color: #999999FF;
							color: #fff;
							font-size: 20rpx;
						}
					}
				}
			}
		}
	}
</style>