pet-front/otherPages/workbenchManage/myUser/components/haveOrder.vue

<template>
	<view class="have-order">
		<view class="have-order-list mt20" v-for="item in list" :key="item.id">
			<view class="have-order-up">
				<view class="have-order-image flex-rowl">
					<up-image width="80rpx" height="80rpx" :src="item.imageUrl" shape="circle"></up-image>
					<text class="ml20">{{item.name}}</text>
				</view>
				<view class="have-order-image flex-rowr" @click="arrowClick(item)">
					<text class="mr10 size-22 color-999">{{ item.isShow == true ? '收起' : '展开' }}</text>
					<up-icon :name="item.isShow == true?'arrow-up-fill':'arrow-down-fill'" color="#707070"
						size="10"></up-icon>
				</view>
			</view>
			<up-line color="#C7C7C7"></up-line>
			<view class="have-order-time flex-b size-26 color-999">
				<view class="">
					注册时间
				</view>
				<view class="">
					{{item.time}}
				</view>
			</view>
			<view class="have-order-time flex-b size-26 color-999" v-show="item.isShow">
				<view class="">
					最近一次下单
				</view>
				<view class="">
					{{item.time2}}
				</view>
			</view>
			<view class="have-order-time flex-b size-26 color-999" v-show="item.isShow">
				<view class="">
					累计消费金额
				</view>
				<view class="">
					￥ {{item.amount}}
				</view>
			</view>
			<view class="have-order-time flex-b size-26 color-999" v-show="item.isShow">
				<view class="">
					累计消报酬
				</view>
				<view class="">
					￥ {{item.reward}}
				</view>
			</view>
		</view>
	</view>
	<!-- <view class="mt60" :style="{color:'#A55822',fontSize:'22rpx',backgroundColor:'#FFF4E6',borderRadius:'16rpx'}">
		*累计报酬:当该用户订单完成时，才会纳入报酬计算
	</view> -->
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	const list = reactive([{
			id: '001',
			imageUrl: 'https://cdn.uviewui.com/uview/album/1.jpg',
			name: '猫小咪',
			time: '2024-11-01 18:12:16',
			time2: '2024-11-01 18:12:16',
			amount: '168.00',
			reward: '100.00',
			isShow: false
		},
		{
			id: '002',
			imageUrl: 'https://cdn.uviewui.com/uview/album/1.jpg',
			name: '猫小咪',
			time: '2024-11-01 18:12:16',
			time2: '2024-11-01 18:12:16',
			amount: 168.00,
			reward: 100.00,
			isShow: false
		},
		{
			id: '003',
			imageUrl: 'https://cdn.uviewui.com/uview/album/1.jpg',
			name: '猫小咪',
			time: '2024-11-01 18:12:16',
			time2: '2024-11-01 18:12:16',
			amount: 168.00,
			reward: 100.00,
			isShow: false
		},
		{
			id: '004',
			imageUrl: 'https://cdn.uviewui.com/uview/album/1.jpg',
			name: '猫小咪',
			time: '2024-11-01 18:12:16',
			time2: '2024-11-01 18:12:16',
			amount: 168.00,
			reward: 100.00,
			isShow: false
		},
	]);

	// 每次只展开一个
	const arrowClick = (item) => {
		list.forEach(i => {
			if (i.id !== item.id) i.isShow = false
		})
		item.isShow = !item.isShow
	}
</script>

<style scoped lang="scss">
	@import "../index";
</style>