项目初始化
This commit is contained in:
jerry
212
pages/clerk/fans/components/orderList.vue
Normal file
212
pages/clerk/fans/components/orderList.vue
Normal file
@@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<view :id="`zp-id-${item.zp_index}`" :key="item.zp_index" v-for="(item,index) in orderList" class="order-card">
|
||||
|
||||
<view class="main-box" :class="index == orderList.length-1 ? '':'bt'">
|
||||
<view @click="detail(item)">
|
||||
<u-avatar mode="square" size="170" :src="item.avatar"></u-avatar>
|
||||
</view>
|
||||
<view class="right-box">
|
||||
<view class="nickname-box">
|
||||
<view class="nickname">{{item.nickname}}</view>
|
||||
<view class="oline" v-if="item.onlineStatus">
|
||||
<tui-badge :scaleRatio="0.8" type="green" dot></tui-badge>
|
||||
<text class="text">在线</text>
|
||||
</view>
|
||||
<view class="oline un" v-else>
|
||||
<tui-badge :scaleRatio="0.8" type="gray" dot></tui-badge>
|
||||
<text class="text">休息中</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="city">{{item.city}}</view>
|
||||
<view class="sex-box">
|
||||
<view class="sex-tag">
|
||||
<text class="tag" v-if="item.sex == 1">女</text>
|
||||
<text class="tag" v-if="item.sex == 0">男</text>
|
||||
<text class="tag">{{item.age}}岁</text>
|
||||
</view>
|
||||
<view class="fans-box" @click="fans(item)">
|
||||
<view class="fans">{{item.fansNum}}人收藏</view>
|
||||
<u-icon v-if="item.fans" name="star-fill" size="36" color="var(--ui-BG-Main)"></u-icon>
|
||||
<u-icon v-else name="star" size="36" color="#ddd"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info">{{item.intro}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TuiBadge from "@/components/thorui/tui-badge/tui-badge.vue";
|
||||
import TrendApi from '@/sheep/api/worker/trend';
|
||||
import sheep from '@/sheep';
|
||||
export default {
|
||||
components: {
|
||||
TuiBadge,
|
||||
},
|
||||
props: {
|
||||
virtualList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
orderList() {
|
||||
return this.virtualList;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
fans(e) {
|
||||
TrendApi.createClerkFans({
|
||||
workerClerkId: e.workerClerkId,
|
||||
}).then((res) => {
|
||||
if(res){
|
||||
if(e.fans){
|
||||
sheep.$helper.toast('取消收藏');
|
||||
e.fans = false;
|
||||
}else{
|
||||
sheep.$helper.toast('收藏成功');
|
||||
e.fans = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
detail(e) {
|
||||
this.$u.route({
|
||||
url: 'pages/clerk/detail/index',
|
||||
params: {
|
||||
id: e.workerClerkId,
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.order-card {
|
||||
padding: 0 10px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
||||
.main-box {
|
||||
display: flex;
|
||||
padding: 10px 0;
|
||||
|
||||
.right-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
margin-left: 10px;
|
||||
flex-direction: column;
|
||||
|
||||
.nickname-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.nickname {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.oline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.text {
|
||||
font-size: 24rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.un {
|
||||
color: rgb(100, 101, 102);
|
||||
}
|
||||
}
|
||||
|
||||
.city {
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.sex-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 18rpx;
|
||||
|
||||
.sex-tag {
|
||||
font-size: 24rpx;
|
||||
|
||||
.tag {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fans-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.fans {
|
||||
font-size: 22rpx;
|
||||
color: rgb(100, 101, 102);
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
font-size: 24rpx;
|
||||
color: rgb(100, 101, 102);
|
||||
line-height: 22rpx;
|
||||
margin-bottom: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.bt {
|
||||
border-bottom: 1px solid #fbf0f0;
|
||||
}
|
||||
|
||||
.bottom-box {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.btn-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background-color: #ddd;
|
||||
color: rgb(100, 101, 102);
|
||||
font-size: 22rpx;
|
||||
border-radius: 40px;
|
||||
padding: 5px 10px;
|
||||
margin-left: 10px;
|
||||
min-width: 140rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: var(--ui-BG-Main);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user