jiuyiUniapp/jiuyi2/pages/index/orchard.vue

<script setup>
	/**
	 * 榴莲果园
	 */
	import {
		onMounted,
		ref,
		reactive,
		getCurrentInstance,
		watch,
		computed,
		defineExpose,
	} from 'vue';
	import {
		onLoad,
		onReady,
		onHide,
	} from '@dcloudio/uni-app'
	// 顶部
	import apex from '@/components/header/apex.vue'
	// 请求地址
	import api from '@/api/index.js'
	// 
	import util from "@/common/js/util.js"
	import {
		useStore,
	} from 'vuex'
	import durianlApi from '@/api/durian.js';
	const {
		proxy
	} = getCurrentInstance()
	const viewData = ref([])
	// 当前选择的榴莲果树对象
	const selectItem = ref({})
	// 规则文章
	const rule = reactive({})
	const store = useStore()
	const userinfo = computed(() => {
		let result = store.state.userinfo
		return result
	})

	onLoad(() => {
		// 获取可以兑换的榴莲果树
		buyDurianList()
		// 获取榴莲果规则文章
		getArticle()
	})

	onReady(() => {
		// proxy.$refs.ruleRef.open()
	})

	function buyDurianList() {
		durianlApi.durianList({

		}).then(rs => {
			viewData.value = rs.data
		})
	}

	/**
	 * 兑换榴莲果树
	 * @param {Object} type 1流量点 2榴莲果树
	 */
	function exchange(type) {
		util.alert({
			content: `确认消耗${800}种子购买榴莲果`,
		}).then(rs => {
			if (!rs.confirm) return

			durianlApi.exchange({
				query: {
					userId: userinfo.value.userId,
					treeId: selectItem.value.id,
					type: type
				},
			}).then(rs => {
				if (rs.code === 200) {
					util.alert('置换成功')
					proxy.$refs.typeRef.close()
					util.getUserinfo()
					return
				}
				util.alert({
					content: rs.msg,
					value: false,
				})
			})
		})
	}

	// 获取榴莲果规则
	function getArticle() {
		api.getArticle({
			query: {
				id: 2,
			}
		}).then(rs => {
			if (rs.code == 200) {
				// 合并
				Object.assign(rule, rs.data)
				return
			}
			util.alert({
				content: rs.msg,
				value: false,
			})
		})
	}

	function openExchange(item) {
		selectItem.value = item
		proxy.$refs.typeRef.open()
	}

	function openChange() {
		proxy.$refs.ruleRef.open()
	}
</script>

<template>
	<view class="appbw">
		<!--  -->
		<apex title="榴莲果园">
			<template #right>
				<view class="rule fmid mr10 wh80 cfff f20 cir" @click="openChange">规则</view>
			</template>
		</apex>

		<!-- 拥有的 -->
		<view class="has navs mtb40 plr50 c333 f28">
			<view class="item df">
				<image class="wh150" src="/static/sapling.png" mode="aspectFit" />
				<text>×{{userinfo.seed}}</text>
			</view>

			<view class="item df">
				<image class="wh150" src="/static/fruit.png" mode="aspectFit" />
				<text>×{{userinfo.fruit}}</text>
			</view>
		</view>

		<!-- 列表 -->
		<view class="list">
			<view class="item rows mtb30 mlr25 br15" v-for="(item,index) in viewData" :key="index">
				<image class="wh180" src="@/static/tree.png" mode="aspectFit" />
				<view class="content f1 mlr30 c333 f28">
					<text>需要{{item.seed}}种子或{{item.gains}}榴莲果</text>
					<text>置换1颗{{item.name}}</text>
				</view>

				<view class="button fmid mlr40 wh110 c333 f20 bfff cir" @click="openExchange(item)">置换</view>
			</view>
		</view>

		<!-- 填充 -->
		<view class="fill" style="height: 60rpx;"></view>
	</view>

	<!-- 请选择对换方式 -->
	<uni-popup ref="typeRef" type="center">
		<view class="typeAlt popMid ver bfff">
			<image class="wh350" src="/static/tree.png" mode="aspectFit" />
			<view class="title c333 f48">请选择置换方式</view>
			<view class="btns fmid mtb40">
				<view class="btn lg black w200" @click="exchange('1')">种子置换</view>
				<view class="btn lg black w200" @click="exchange('2')">果子置换</view>
			</view>
		</view>
	</uni-popup>

	<!-- 规则说明 -->
	<uni-popup ref="ruleRef" type="center">
		<view class="ruleAlt popMid bfff">
			<view class="title tac ptb15 c333 f36 b">规则说明</view>

			<view class="content mtb20 mlr25">
				<scroll-view scroll-y="true" class="scroll">
					<rich-text :nodes="rule.context"></rich-text>
				</scroll-view>
			</view>
		</view>
	</uni-popup>
</template>

<style lang="scss">
	// 规则
	.rule {
		background-color: #1f1f1f;
	}

	// 拥有
	.has {

		.item {
			align-items: flex-end;
		}
	}

	// 列表
	.list {

		.item:nth-child(9n-8) {
			background-color: #F2F2F2;
		}

		.item:nth-child(9n-7) {
			background-color: #FBC5C5;
		}

		.item:nth-child(9n-6) {
			background-color: #FFF0B1;
		}

		.item:nth-child(9n-5) {
			background-color: #CAF0F3;
		}

		.item:nth-child(9n-4) {
			background-color: #C3EBBD;
		}

		.item:nth-child(9n-3) {
			background-color: #F2EDE3;
		}

		.item:nth-child(9n-2) {
			background-color: #EBEBFF;
		}

		.item:nth-child(9n-1) {
			background-color: #9EDEFF;
		}

		.item:nth-child(9n) {
			background-color: #E8E7EE;
		}
	}

	// 规则弹窗
	.ruleAlt {
		.scroll {
			height: 50vh;
		}
	}
</style>