猫妈狗爸伴宠师小程序前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

94 lines
2.2 KiB

<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="https://image.hhlm1688.com/2025/03/287ecbed1d50a141759103f1d776ca063eGroup 213084@2x.png" shape="circle"></up-image>
<text class="ml20">{{ item.nickname }}</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 >
注册时间
</view>
<view >
{{ item.createTime }}
</view>
</view>
<view class="have-order-time flex-b size-26 color-999" v-show="item.isShow">
<view >
最近一次下单
</view>
<view >
{{ item.createTime }}
</view>
</view>
<view class="have-order-time flex-b size-26 color-999" v-show="item.isShow">
<view >
累计消费金额
</view>
<view >
¥ {{ item.orderAmount.toFixed(2) }}
</view>
</view>
<view class="have-order-time flex-b size-26 color-999" v-show="item.isShow">
<view >
累计消报酬
</view>
<view >
¥ {{ item.accumulate_money }}
</view>
</view>
</view>
</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>