first commit
This commit is contained in:
121
pages/guide/list.vue
Normal file
121
pages/guide/list.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<view class="waper">
|
||||
<u-navbar :autoBack="true" bgColor="#fff">
|
||||
<view slot='center' class="navbar_title">导游列表</view>
|
||||
</u-navbar>
|
||||
<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" :top="paddingTop + 'px'">
|
||||
<view class="list_waper">
|
||||
<navigator hover-class="none" class="list" v-for="(item, index) in list" :url="'/pages/guide/detail?detail=' + JSON.stringify(item)" :key="index">
|
||||
<view class="top-box">
|
||||
<view class="img">
|
||||
<image :src="$utils.setImgUrl(item.image.split(',')[0])" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="title">
|
||||
<view class="name">{{item.name}}</view>
|
||||
<view class="gender gender1" v-if="item.gender == 1">
|
||||
<u-icon name="woman" color="#FF607D" size="28rpx"></u-icon>
|
||||
</view>
|
||||
<view class="gender gender2" v-if="item.gender == 0">
|
||||
<u-icon name="man" color="#5599FA" size="28rpx"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tags">
|
||||
<view v-if="item.label" class="tag" v-for="(m, i) in getLabelList(item.label)" :key="i">{{m}}</view>
|
||||
</view>
|
||||
<!-- <view class="code">导游证号:{{item.tourGuideIdNumber}}</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom-box">
|
||||
<view class="synopsis">导游简介:{{item.introduction}}</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
|
||||
export default {
|
||||
mixins: [MescrollMixin],
|
||||
data() {
|
||||
return {
|
||||
paddingTop: 0,
|
||||
list: [],
|
||||
}
|
||||
},
|
||||
async onLoad () {
|
||||
this.paddingTop = this.$paddingTop;
|
||||
},
|
||||
methods: {
|
||||
async upCallback (page) {
|
||||
let obj = { pageNum: page.num, pageSize: page.size };
|
||||
let info = await this.$http.guideList(obj);
|
||||
if (page.num == 1) this.list = [];
|
||||
this.list = this.list.concat(info.rows)
|
||||
this.mescroll.endBySize(info.rows.length, info.total);
|
||||
},
|
||||
getLabelList(m) {
|
||||
let arr = []
|
||||
if (m) {
|
||||
arr = m.split(',').slice(0, 3);
|
||||
}
|
||||
return arr;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.list_waper{
|
||||
width: 100%; box-sizing: border-box; padding: 32rpx;
|
||||
.list{
|
||||
width: 100%; box-sizing: border-box; margin-bottom: 20rpx; padding: 32rpx; border-radius: 10rpx; background: #fff;
|
||||
&:last-child{ margin-bottom: 0; }
|
||||
.top-box {
|
||||
display: flex; align-items: center; border-bottom: 1rpx solid rgba(0,0,0,0.05); padding-bottom: 24rpx;
|
||||
.img{
|
||||
width: 140rpx; height: 140rpx; margin-right: 24px; display: flex; align-items: center; border-radius: 50%; overflow: hidden;
|
||||
image{ width: 100%; }
|
||||
}
|
||||
.info{
|
||||
flex: 1;
|
||||
.title{
|
||||
display: flex; align-items: center;
|
||||
.name {
|
||||
font-weight: bold; font-size: 32rpx; color: #333333; margin-right: 12rpx;
|
||||
}
|
||||
.gender {
|
||||
width: 36rpx; height: 36rpx; border-radius: 18rpx; position: relative;
|
||||
/deep/.u-icon {
|
||||
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
.gender1 { background-color: rgba(255,96,125,0.2); }
|
||||
.gender2 { background-color: rgba(85,153,250,0.2); }
|
||||
}
|
||||
.tags {
|
||||
height: 38rpx; margin-top: 11rpx; display: flex; align-items: center;
|
||||
.tag {
|
||||
border-radius: 2rpx; font-weight: 500; font-size: 22rpx; line-height: 26rpx; padding: 4rpx 8rpx; margin-right: 12rpx;
|
||||
&:nth-child(1) { background: rgba(255,169,27,0.1); color: #FFA91B; }
|
||||
&:nth-child(2) { background: rgba(5,175,129,0.1); color: #05AF81; }
|
||||
&:nth-child(3) { background: rgba(85,153,250,0.1); color: #5599FA; }
|
||||
}
|
||||
}
|
||||
.code {
|
||||
font-size: 24rpx; color: #999999; line-height: 33rpx; margin-top: 14rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom-box {
|
||||
margin-top: 24rpx;
|
||||
.synopsis {
|
||||
font-size: 24rpx; color: #666666; line-height: 34rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
Reference in New Issue
Block a user