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

<template>
	<view class="have-order">
		<view class="have-order-list mt20" v-for="(item,index) in listData" :key="item.id">
			<view class="have-order-up">
				<view class="have-order-image flex-rowl">
					<up-image width="80rpx" height="80rpx" :src="item.userImage" shape="circle"></up-image>
					<text class="ml20">{{ item.name }}</text>
				</view>
				<view class="have-order-image flex-rowr" @click="()=>arrowClick(index)">
					<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.createTime }}
				</view>
			</view>
			<view class="have-order-time flex-b size-26 color-999" v-show="item.isShow">
				<view class="">
					最近一次下单
				</view>
				<view class="">
					{{ item.recentlyPayTime }}
				</view>
			</view>
			<view class="have-order-time flex-b size-26 color-999" v-show="item.isShow">
				<view class="">
					累计消费金额
				</view>
				<view class="">
					￥ {{ item.reward_money }}
				</view>
			</view>
			<view class="have-order-time flex-b size-26 color-999" v-show="item.isShow">
				<view class="">
					累计消报酬
				</view>
				<view class="">
					￥ {{ item.accumulate_money }}
				</view>
			</view>
		</view>
	</view>
	<!-- <view class="mt60" :style="{color:'#A55822',fontSize:'22rpx',backgroundColor:'#FFF4E6',borderRadius:'16rpx'}">
		*累计报酬:当该用户订单完成时，才会纳入报酬计算
	</view> -->
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				listData: []
			}
		},
		watch: {
			list(val) {
				if (val && val.length > 0) {
					val.forEach(item => {
						item.isShow = false
					})
					this.listData = val
				}
			}
		},
		methods: {
			// 每次只展开一个
			arrowClick(ind) {
				this.listData.forEach((i, index) => {
					if (index === ind) {
						i.isShow = !i.isShow
					} else {
						i.isShow = false
					}
				})
				console.log(this.listData)
				this.listData = [...this.listData]
			}
		}
	}
</script>

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