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 => {
					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)">
				<image class="wh180 fs0" src="/static/tree.png" mode="aspectFit" />

				<view class="col f1 ml30 mtb30 c333 f26">
					<view class="txt mtb10">每日可释放：{{item.release}}</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>

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

<style lang="scss">
	// 
	.list {
		.item {
			background-color: #F4F4F4;
		}

		.item+.item:nth-child(3n+1) {
			background-color: #F4CAFF;
		}

		.item+.item:nth-child(3n+2) {
			background-color: #E4FBFF;
		}

		.item+.item:nth-child(3n+3) {
			background-color: #CACDFF;
		}
	}
</style>