jxg/jinxiangguo-home-master/components/popup-trace/popup-trace.vue

<template>
	<view>
		<touch-popup ref="popup" @close="close" background="linear-gradient(180deg, #C2FF8F 0%, #08FFB9 100%)">
			<view class="top-icon">
				<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/touch-close-white.png" mode="heightFix"></image>
			</view>
			<scroll-view scroll-y class="list">
				<view class="title">
					<view>
						<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/icon-踪迹.png" mode="widthFix"></image>
						<text>踪迹</text>
					</view>
					<view>
						硬币编号：{{coinInfo.id}}
					</view>
				</view>
				<view v-for="(item,index) in traceList" key="trace" class="pd-15">
					<view class="item">
						<view class="top">
							<view class="left">
								<view class="left-top">
									<text v-if="coinInfo.type !== 1">{{item.type == 1 ? '文字' : '图片'}}{{item.name}}：</text>
									<text v-else>{{item.name}}</text>
								</view>
								<view class="left-bottom">
									<text @click="showImg(item)"
										:class="{'img-show' : item.is_unlock === 1 && item.type === 2}">{{item.is_unlock === 1 ? (item.type === 1 ? item.content : '点击查看图片') : '解锁踪迹后查看'}}</text>
								</view>
							</view>
							<view class="right">
								<image v-if="item.is_unlock === 1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/tmp/done.png"
									mode="widthFix"></image>
							</view>
						</view>
						<view v-if="item.is_unlock === 0" class="bottom">
							<button @click="unlock(index)" class="btn-done">
								<text>{{item.amount}}橡果解锁踪迹</text>
							</button>
						</view>
					</view>
				</view>
				<view v-if="coinInfo.type === 1" class="pd-15">
					<view class="item">
						<view class="top">
							<view class="left">
								<view class="left-top">
									缩小宝藏范围：
								</view>
								<view class="left-bottom">
									<text>随机消除不存在宝藏的格子</text>
								</view>
							</view>
						</view>
						<view class="bottom">
							<button @click="goUnlockGold()" class="btn-done">
								<text>328橡果消除金币</text>
							</button>
						</view>
					</view>
				</view>
			</scroll-view>
		</touch-popup>
		<uni-popup ref="popupSafe" style="z-index: 9999;" type="center">
			<view style="width: 750rpx;">
				<view class="unlock-group">
					<view class="unlock-bck">
						<view class="unlock-content">
							<view class="unlock-logo">
								<image style="height: 130px;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/safe-icon.png"
									mode="heightFix"></image>
							</view>
							<view class="unlock-title">
								<view class="">
									安全需知
								</view>
								<view class="">
									
								</view>
							</view>
							<view class="safe-center">
								<view class="htext">
									1.硬币不会藏在禁止通行或需要特殊凭证才能进入的区域
								</view>
								<view class="htext">
									2.硬币不会藏在需要您做任何危险动作才能找到的区域。
								</view>
								<view class="htext">
									3.您并不需要破坏或拆除任何物品来寻找到硬币。
								</view>
								<view class="htext">
									4.硬币不会藏在水中或水底。
								</view>
								<view class="htext">
									5.硬币不会被埋在土中或草丛中，无需践踏草坪或破坏植被。
								</view>
								<view class="htext">
									6.硬币不会藏在停车场或者马路上等车辆通行区域
								</view>
								<view class="htext">
									7. 在寻找硬币的过程中，您应当遵守法律法规与公共规则。参与活动过程中的意外与事故责任应当由参与者自行承担。
								</view>
							</view>
		
							<view class="unlock-btn">
								<view class="btn-item center">
									<view @click="safeBtn" class="btn2">
										<text>我同意</text>
									</view>
								</view>
							</view>
							<view class="terms">
								<view class="" @click="isTermsCheck = !isTermsCheck">
									<image style="width: 10px;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/radio-icon.png" mode="widthFix"></image>
									<image v-if="isTermsCheck" class="terms-check" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/check-black.png" mode="widthFix"></image>
								</view>
								<view>
									<text style="margin-left: 5px;">
										选择即表明同意上述<text class="terms-color">安全信息</text>和<text class="terms-color">须知</text>，当日不再提醒
									</text>
								</view>
								
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupUnlock" style="z-index: 9999;" type="center">
			<view style="width: 750rpx;">
				<view class="unlock-group">
					<view class="unlock-bck">
						<view class="unlock-content">
							<view class="unlock-logo">
								<image style="height: 130px;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/松鼠ip.png"
									mode="heightFix"></image>
							</view>
							<view class="unlock-title">
								<view class="">
									解锁踪迹
								</view>
								<view class="">
									硬币名称：{{coinInfo.name}}
								</view>
								<view class="">
									硬币编号：{{coinInfo.id}}
								</view>
							</view>
							<view class="unlock-center">
								<view class="unlock-img">
									<image class="left-star1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/left-star1.png"
										mode="widthFix"></image>
									<image class="left-star2" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/left-star2.png"
										mode="widthFix"></image>
								</view>
								<view class="unlock-img"
									style="display: flex;align-items: center;justify-content: center;flex: none;">
									<image class="center-bck" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/center-bck.png"
										mode="widthFix"></image>
									<image class="rectagle1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/rectagle1.png"
										mode="widthFix"></image>
									<image class="rectagle2" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/rectagle2.png"
										mode="heightFix"></image>
									<image class="rectagle3" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/rectagle3.png"
										mode="heightFix"></image>
									<image class="center-star" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/center-star.png"
										mode="widthFix"></image>
									<image class="center-icon" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/center-icon.png"
										mode="widthFix"></image>
								</view>
								<view class="unlock-img">
									<image class="right-star1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/right-star1.png"
										mode="widthFix"></image>
									<image class="right-star2" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/right-star2.png"
										mode="widthFix"></image>
								</view>
							</view>

							<view class="unlock-price">
								<view class="price-item">
									<view class="hint-bck">
										{{curTrace.amount}}橡果解锁踪迹提示
									</view>
								</view>
								<view class="price-item">
									<view class="price-bck">
										<view class="logo-bck">
											<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/logo-balance.png" mode="widthFix">
											</image>
										</view>
										{{userInfo.amount}}
									</view>
								</view>
							</view>

							<view class="unlock-btn">
								<view class="btn-item" style="justify-content: flex-end;">
									<view @click="cancelUnlock" class="btn1">
										再想想
									</view>
								</view>
								<view class="btn-item">
									<view @click="doUnlock" class="btn2">
										<text>确认解锁</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupUnlockSuccess" style="z-index: 9999;" type="center">
			<view style="width: 750rpx;">
				<view class="unlock-group">
					<view class="unlock-bck">
						<view class="unlock-content">
							<view class="unlock-logo">
								<image style="height: 130px;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/松鼠ip.png"
									mode="heightFix"></image>
							</view>
							<view class="unlock-close">
								<image @click="closeUnlock" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/close.png" mode="widthFix">
								</image>
							</view>
							<view class="unlock-title">
								<view class="unlock-title">
									<view class="">
										解锁踪迹成功
									</view>
									<view class="">
									</view>
									<view class="">
									</view>
								</view>
							</view>
							<view class="unlock-center" style="justify-content: center;">
								<image v-if="curTrace.type === 2" style="width: 100%;height: 200px;border-radius: 10px;"
									:src="curTrace.content" mode="aspectFill"></image>
								<text v-else>{{curTrace.content}}</text>
							</view>
							<view v-if="curTrace.type === 2" style="display: flex;justify-content: center;">
								<view class="unlock-down">
									<view>
										长按保存图片
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 弹窗：解锁金币 -->
		<popup-unlockgold ref="pUnlockGold"></popup-unlockgold>
	</view>
</template>

<script setup>
	const app = getApp()
	import {
		ref,
		defineExpose,
		getCurrentInstance
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()
	const popup = ref() // ref组件
	const pUnlockGold = ref() // 解锁金币弹窗
	const popupUnlock = ref()
	const popupUnlockSuccess = ref()
	const popupSafe = ref()
	
	const isTermsCheck = ref(false);
	const _trace_d = new Date();
	const _trace_timestamp = new Date((_trace_d.getFullYear() + '/' + (_trace_d.getMonth()+1) + '/' + _trace_d.getDate())).getTime(); // 今日时间戳

	const traceList = ref([]) // 踪迹列表
	const curTrace = ref({}) // 当前要解锁的踪迹
	const coinInfo = ref({}) // 硬币详情
	const userInfo = ref({}) // 用户详情
	
	const safeModalShow = () => {
		let safeTime = uni.getStorageSync('jinxiangguo_safe_modal');
		if (safeTime) {
			// 判断是否是今天
			if (safeTime != _trace_timestamp) {
				popupSafe.value.open();
			}
		} else {
			// 如果没有
			popupSafe.value.open();
		}
	}
	const safeBtn = () => {
		if (!isTermsCheck.value) {
			uni.showToast({
				title: '请同意安全须知',
				icon: 'none'
			});
			return;
		}
		uni.setStorageSync('jinxiangguo_safe_modal', _trace_timestamp);
		popupSafe.value.close();
	}
	const goUnlockGold = () => {
		pUnlockGold.value.open(coinInfo.value)
	}
	const showImg = (item) => {
		if (item.type === 1) return
		curTrace.value = item
		popupUnlockSuccess.value.open()
	}
	// 加载页面数据
	const loadData = () => {
		uni.showLoading()
		uni.request({
			url: app.globalData.requestUrl + '/api/coin/clue/list',
			data: {
				id: coinInfo.value.id
			},
			header: {
				'Authorization': 'Bearer ' + app.globalData.token
			},
			success: (res) => {
				if (res.data.code === 200) {
					traceList.value = res.data.data
					userInfo.value = app.globalData.userinfo
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
				safeModalShow();
			},
			complete() {
				uni.hideLoading()
			}
		})
	}
	// 关闭解锁踪迹弹窗
	const closeUnlock = () => {
		popupUnlockSuccess.value.close()
	}
	// 执行解锁踪迹
	const doUnlock = () => {
		if (userInfo.value.amount < curTrace.value.amount) {
			uni.showToast({
				title: '当前橡果余额不足',
				icon: 'none'
			})
			return
		}
		uni.showModal({
			title: '确认花费' + curTrace.value.amount + '橡果解锁此踪迹吗？',
			success: function(res) {
				if (res.confirm) {
					uni.showToast({
						title: '解锁踪迹成功',
						icon: 'none'
					})
					uni.showLoading({
						title: '正在解锁踪迹'
					})
					uni.request({
						url: app.globalData.requestUrl + '/api/user/coin/clue/save',
						data: {
							id: curTrace.value.id
						},
						header: {
							'Authorization': 'Bearer ' + app.globalData.token
						},
						method: 'POST',
						success: (res) => {
							if (res.data.code === 200) {
								// 更改本地余额
								uni.request({
									url: app.globalData.requestUrl + '/api/user',
									header: {
										'Authorization': 'Bearer ' + app.globalData
											.token
									},
									success: (res) => {
										app.globalData.userinfo = res.data.data
										app.globalData.isReloadMarkers = true
										loadData()
										cancelUnlock()
										popupUnlockSuccess.value.open()
									},
									complete() {
										uni.hideLoading()
									}
								})

							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
							}
						}
					})
				}
			}
		})
	}
	// 关闭解锁踪迹弹窗
	const cancelUnlock = () => {
		popupUnlock.value.close()
	}
	// 打开解锁踪迹弹窗
	const unlock = (e) => {
		if ((e - 1) >= 0 && traceList.value[(e - 1)].is_unlock === 0) {
			uni.showToast({
				title: '请逐级解锁',
				icon: 'none'
			})
			return
		}
		curTrace.value = traceList.value[e]
		uni.showLoading()
		uni.request({
			url: app.globalData.requestUrl + '/api/coin/info',
			data: {
				id: coinInfo.value.id
			},
			header: {
				'Authorization': 'Bearer ' + app.globalData.token
			},
			success: (res) => {
				if (res.data.code === 200) {
					popupUnlock.value.open()
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			},
			complete() {
				uni.hideLoading()
			}
		})

	}

	const open = (coin) => {
		if (JSON.stringify(coinInfo.value) !== JSON.stringify(coin)) {
			coinInfo.value = coin;
			loadData();
		}
		popup.value.open()
	}
	const close = () => {
		// 统计当前总线索数
		proxy.$emit('close', coinInfo.value.type)
	}
	defineExpose({
		open
	}) // 暴露方法
</script>

<style scoped>
	.terms-check {
		width: 10px;
		position: absolute;
		height: auto;
	}
	.terms {
		color: #4A4A4A;
		font-size: 8px;
		font-weight: 400;
		padding-top: 15px;
		font-family: Noto Sans S Chinese;
		display: flex;
		justify-content: center;
	}
	.terms view:first-child {
		display: flex;
		position: relative;
	}
	.terms-color {
		color: #6D24E3;
	}
	.safe-center .htext {
		font-family: Noto Sans S Chinese;
		font-size: 10px;
		font-weight: 400;
		line-height: 15px;
		text-align: left;
		padding: 5px;
	}
	.img-show {
		color: #01F0FD;
		text-decoration: underline;
	}

	.unlock-close image {
		width: 20px;
	}

	.unlock-close {
		display: flex;
		float: right;
		right: 0;
	}

	.unlock-down image {
		width: 18px;
	}

	.unlock-down view {
		display: flex;
		align-items: center;
	}

	.unlock-down {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 12px;
		padding-top: 10px;
	}

	.unlock-logo {
		display: flex;
		position: absolute;
		top: -101px;
		left: 0;
		width: 100%;
		justify-content: center;
	}

	.btn-item view {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px 0;
		border-radius: 30px;
		width: 100px;
	}

	.btn-item .btn1 {
		background: rgba(255, 255, 255, .8);
	}

	.btn-item .btn2 {
		background: #000000;
		font-size: 12px;
		font-weight: 700;
		line-height: 18px;
	}

	.btn-item .btn2 text {
		background: linear-gradient(90deg, #BFFF90 0%, #26FFB3 100%);
		color: transparent;
		-webkit-background-clip: text;
	}

	.btn-item {
		display: flex;
		align-items: center;
		font-size: 14px;
		font-weight: bold;
		flex: 1;
		padding: 10px 10px 0 10px;
	}

	.unlock-btn {
		display: flex;
	}

	.hint-bck {
		background: rgba(255, 255, 255, .8);
		border-radius: 15px;
		padding: 4px 15px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		font-weight: 400;
	}

	.price-bck image {
		width: 18px;
	}

	.logo-bck {
		height: 26px;
		width: 26px;
		background: #FFCC18;
		border-radius: 13px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 8px;
	}

	.price-bck {
		height: 26px;
		background: rgba(255, 255, 255, .8);
		border-radius: 13px;
		display: flex;
		align-items: center;
		padding-right: 12px;
		font-size: 12px;
		font-weight: 700;
	}

	.price-item {
		flex: 1;
		display: flex;
		padding-top: 5px;
		justify-content: center;
	}

	.unlock-price {
		display: flex;
		flex-direction: column;
		padding: 5px 25px;

	}

	.left-star1 {
		width: 22px;
		float: right;
		right: 0;
		top: -10px;
	}

	.left-star2 {
		float: right;
		width: 10px;
		top: 70px;
	}

	.center-bck {
		width: 100px;
		z-index: 2;
	}

	.rectagle1 {
		width: 47px;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}

	.rectagle2 {
		height: 50px;
		position: absolute;
		left: 49px;
		top: 0;
		z-index: 1;
	}

	.rectagle3 {
		height: 30px;
		position: absolute;
		top: 20px;
		right: 0;
		z-index: 1;
	}

	.center-star {
		width: 125px;
		position: absolute;
		z-index: 2;
	}

	.center-icon {
		width: 90px;
		position: absolute;
		z-index: 3;
	}

	.right-star1 {
		width: 36px;
		position: absolute;
		left: 0px;
		top: -18px;
	}

	.right-star2 {
		width: 12px;
		left: 30px;
		top: 35px;
	}

	.unlock-img {
		flex: 1;
		position: relative;
	}
	.safe-center {
		display: flex;
		flex-direction: column;
		padding: 0 15px 5px 15px;
	}
	.unlock-center {
		display: flex;
		padding: 0 15px 5px 15px;
	}

	.unlock-title view:first-child {
		text-decoration: underline;
		font-size: 18px;
		padding-bottom: 5px;
	}

	.unlock-title view:last-child {
		font-size: 10px;
		font-weight: 400;
	}

	.unlock-title {
		padding: 0 15px 10px 15px;
		display: flex;
		font-size: 12px;
		font-weight: 700;
		flex-direction: column;
		align-items: center;
	}

	.unlock-bck {
		padding: 3px;
		border-radius: 15px;
		background: rgba(232, 232, 232, 0.5);
		border: 2px solid rgba(169, 169, 169, 0.5);
	}

	.unlock-content {
		border-radius: 15px;
		padding: 25px;
		background: linear-gradient(180deg, #C2FF8F 0%, #08FFB9 100%);
	}

	.unlock-group {
		padding: 25px;
	}

	.left-top {
		font-family: Noto Sans S Chinese;
		font-size: 16px;
		font-weight: 700;
		line-height: 24px;
		text-align: left;
	}

	.left-bottom {
		font-family: Noto Sans S Chinese;
		font-size: 14px;
		font-weight: 350;
		line-height: 21px;
		text-align: left;
	}

	.left view {
		padding: 4px 0;
	}

	.left {
		flex: 1;
	}

	.right {
		width: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.right image {
		width: 22px;
		height: auto;
	}

	.item .top {
		display: flex;
	}

	.item {
		padding: 15px;
		display: flex;
		background: #F5F5F5CC;
		border-radius: 15px;
		flex-direction: column;
	}
	
	.btn-done text {
		background: linear-gradient(180deg, #01F0FD 0%, #17FFA7 100%);
		color: transparent;
		-webkit-background-clip: text;
		font-family: Noto Sans S Chinese;
		font-size: 14px;
		font-weight: 700;
	}
	.btn-done {
		background-color: #000;
		border-radius: 20px;
		height: 43px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 211px;
	}

	.bottom {
		padding-top: 15px;
	}

	.title text {
		margin-left: 5px;
	}

	.title view:last-child {
		font-family: Noto Sans S Chinese;
		font-size: 8px;
		font-weight: 400;
		line-height: 12px;
		text-align: center;
	}

	.title image {
		width: 23px;
	}

	.title view:first-child {
		font-family: Noto Sans S Chinese;
		font-size: 18px;
		font-weight: 500;
		line-height: 27px;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.title {
		padding: 15px;
	}

	.list {
		height: calc(100% - 15px);
		padding-top: 15px;
	}

	.top-icon {
		display: flex;
		justify-content: center;
		position: absolute;
		width: 100%;
		padding: 10px 0;
	}

	.top-icon image {
		height: 6px;
	}

	.pd-15 {
		padding: 0 15px 15px 15px;
	}
</style>