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.
113 lines
2.8 KiB
113 lines
2.8 KiB
<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>
|