jiuyiUniapp/jiuyi2/pages/index/durainActivation.vue

<script setup>
	import {
		onMounted,
		ref,
		reactive,
		computed,
		getCurrentInstance,
		watch,
		defineExpose,
	} from 'vue';
	import {
		useStore,
	} from 'vuex'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	// 工具库
	import util from '@/common/js/util';
	// 
	import api from '@/api/index.js';
	const treeData = ref([])
	const store = useStore()
	const userinfo = computed(() => {
		let result = store.state.userinfo
		return result
	})

	onLoad(() => {
		// 获取榴莲果树
		buyDurianList()
	})

	// 我的榴莲果树
	function buyDurianList() {
		api.durian.buyDurianList({}).then(rs => {
			if (rs.code == 200) {
				// 我的榴莲果树
				treeData.value = rs.data.dataList.map(item => {
					// orderType 0赠送 1兑换
					item.style = {
						'0': {
							1: 'scroll1',
							2: 'scroll2',
							3: 'scroll3',
							4: 'scroll4',
						} [item.durianConfigId],
						'1': {
							1: 'buy1',
							2: 'buy2',
							3: 'buy3',
							4: 'buy4',
						} [item.durianConfigId],
					} [item.orderType]
					item.formatHash = formatStr(item.treeHash)
					return item
				})
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false
			})
		})
	}

	/**
	 * 处理字符串
	 * @param {Object} str
	 */
	function formatStr(str) {
		// 如果字符串长度小于等于6，直接返回原字符串
		if (str.length <= 6) return str
		return str.slice(0, 3) + '***' + str.slice(-3); // 拼接结果
	}


	/**
	 * 跳转详情
	 * @param {Object} item
	 */
	function handleDetail(item) {
		uni.navigateTo({
			url: util.setUrl('/pages/index/durianLog', {
				id: item.durianTreeId,
			})
		})
	}

	/**
	 * 复制
	 * @param {Object} ev 需要复制的码
	 */
	function handleCopy(ev) {
		util.copyText(ev)
	}
</script>

<template>
	<view class="appbw">
		<!--  -->
		<view class="list mlr40">
			<view class="item rows mtb25 br15" v-for="(item,index) in treeData" :key="index" @click="handleDetail(item)"
				:class="item.style">
				<image class="wh180 fs0" src="/static/tree.png" mode="aspectFit" />

				<view class="col f1 ml30 mtb30 c333 f26">
					<view class="txt mtb10">每日可释放：{{item.releasableDaily}}</view>
					<view class="txt mtb10">剩余可释放：{{item.remainFruitCount}}</view>
					<view class="txt mtb10">当前级别：{{item.treeName}}</view>
					<view class="txt mtb10" @click.stop="util.copyText(item.treeHash)">
						<text>哈希值： {{item.formatHash}}</text>
						<image class="wh20 ml10" src="/static/copy.png" mode="aspectFit" />
					</view>
				</view>
			</view>
			<view class="tac c999 f40 mt80" v-if="!treeData[0]">当前暂无榴莲果树~</view>
		</view>

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

<style lang="scss">
	// 
	.list {

		// 默认
		.item {
			background-color: #F4F4F4;
		}

		// 卷轴赠送
		.scroll1 {
			background-color: #F4F4F4;
		}

		.scroll2 {
			background-color: #E4FBFF;
		}

		.scroll3 {
			background-color: #CACDFF;
		}

		.scroll4 {
			background-color: #F4CAFF;
		}

		// 普通购买
		.buy1 {
			background-color: rgb(225, 253, 204);
		}

		.buy2 {
			background-color: #FFF0B1;
		}

		.buy3 {
			background-color: #CAF0F3;
		}

		.buy4 {
			background-color: #FBC5C5;
		}
	}
</style>