|
@@ -1,224 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="container" :style="{'overflow':(showSkeleton? 'hidden' : 'auto'),'height': (showSkeleton? windowHeight + 'px' : 'auto')}">
|
|
|
- <list-skeleton v-if="showSkeleton" :listType='2'></list-skeleton>
|
|
|
- <scroll-view v-if="membersList.length > 0" class="league-scroll-view league-list-members" :style="{'height': getScrollHeight+'px'}" @scrolltolower="membersToLower" id="scroll-wrap" scroll-y>
|
|
|
- <view class="members-item league-list-item" v-for="(item,index) in membersList" :key="index" @click="memberClicked(item.id)" :thisId="item.id">
|
|
|
- <image class="league-list-img league-members-img" :src="item.logo"></image>
|
|
|
- <image class="mask-pic" src="../../../static/temp/mask.png"></image>
|
|
|
- <view class="league-details-info">
|
|
|
- <view>
|
|
|
- <image src="../../../static/temp/name-icon.png"></image>
|
|
|
- <text class="main-color">{{item.name}}</text>
|
|
|
- </view>
|
|
|
- <view>
|
|
|
- <image src="../../../static/temp/address-icon.png"></image>
|
|
|
- <text class="main-color">{{item.provinceCityDistrict}}</text>
|
|
|
- </view>
|
|
|
- <view>
|
|
|
- <image class="authenticated-icon" src="../../../static/temp/authenticated-icon.png"></image>
|
|
|
- <text class="green-color">{{item.brandCount}}个品牌已认证</text>
|
|
|
- <!-- <image class="arrow-right" src="../../static/temp/arrow-right.png"></image> -->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view v-if="showLoading && membersList.length > 4">
|
|
|
- <view class="loading-wrapper loading-wrapper-now" v-if="loadingNow">{{loadingText}}<text v-if="loadingText === '已至底部'">‧ ‧ ‧</text></view>
|
|
|
- <view class="loading-wrapper loading-wrapper-btm" v-else>———<text class="btm-text">已至底部</text>———</view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- <view class="empty-container" v-if="showEmptyTips">
|
|
|
- <image class="empty-container-image" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AY2ZjAABpmnBICH4247.png"></image>
|
|
|
- <text class="error-text">暂无内容</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import listSkeleton from '@/components/cm-module/listTemplate/listSkeleton'
|
|
|
- import { queryMember } from "@/api/other.js"
|
|
|
- export default {
|
|
|
- name:'MemberList',
|
|
|
- components:{
|
|
|
- listSkeleton
|
|
|
- },
|
|
|
- props:{
|
|
|
-
|
|
|
- },
|
|
|
- data(){
|
|
|
- return {
|
|
|
- windowHeight: '',
|
|
|
- showSkeleton: true,
|
|
|
- userID: '',
|
|
|
- membersList:[],
|
|
|
- showEmptyTips: false,
|
|
|
- getScrollHeight: 'auto',
|
|
|
- showLoading: false,
|
|
|
- loadingNow: true,
|
|
|
- loadingText: '上拉加载更多',
|
|
|
- pageSize: 10,
|
|
|
- pageNum: 1,
|
|
|
- hasNextPage: false,
|
|
|
- totalPage: 1,
|
|
|
- pullFlag: true
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- let self = this;
|
|
|
- const {windowHeight, pixelRatio} = wx.getSystemInfoSync();
|
|
|
- self.windowHeight = windowHeight - 1;
|
|
|
- let obj=wx.createSelectorQuery();
|
|
|
- obj.select('page').boundingClientRect(function (rect) {
|
|
|
-
|
|
|
- })
|
|
|
- },
|
|
|
- methods: {
|
|
|
- setScrollHeight(length) {
|
|
|
- let self = this;
|
|
|
- if(length > 6) {
|
|
|
- self.getScrollHeight = self.windowHeight - 1;
|
|
|
- } else {
|
|
|
- let obj=wx.createSelectorQuery();
|
|
|
- obj.selectAll('.league-list-item').boundingClientRect(function (rect) {
|
|
|
- self.getScrollHeight = rect[0].height * length/2;
|
|
|
- })
|
|
|
- obj.exec() ;
|
|
|
- }
|
|
|
- },
|
|
|
- membersToLower () {
|
|
|
- if(this.hasNextPage && this.pullFlag) {
|
|
|
- this.getListFromServer(true);
|
|
|
- }
|
|
|
- },
|
|
|
- memberClicked (id) {
|
|
|
- wx.navigateTo({ url: `/pages/member_details/main?id=${id}`});
|
|
|
- },
|
|
|
- getListFromServer(loadMore) {
|
|
|
- let self = this;
|
|
|
- self.showLoading = true;
|
|
|
- self.loadingNow = true;
|
|
|
- self.loadingText = '加载中';
|
|
|
- if(loadMore) {
|
|
|
- self.pageNum += 1;
|
|
|
- }
|
|
|
- queryMember({pageNum:this.pageNum,pageSize:this.pageSize}).then(response =>{
|
|
|
- const resData = response.data;
|
|
|
- const resList = resData.results;
|
|
|
- if(resList && resList.length > 0){
|
|
|
- self.hasNextPage = resData.hasNextPage;
|
|
|
- self.totalPage = resData.totalPage;
|
|
|
- if(loadMore) {
|
|
|
- self.membersList = [...self.membersList,...resList];
|
|
|
- } else {
|
|
|
- self.membersList = [...resList];
|
|
|
- self.setScrollHeight(self.membersList.length);
|
|
|
- self.showSkeleton = false;
|
|
|
- }
|
|
|
- // 防上拉暴滑
|
|
|
- self.pullFlag = false;
|
|
|
- setTimeout(()=>{
|
|
|
- self.pullFlag = true;
|
|
|
- },500)
|
|
|
- // 底部提示文案
|
|
|
- if(self.hasNextPage) {
|
|
|
- self.loadingText = '上拉加载更多';
|
|
|
- } else {
|
|
|
- self.showLoading = true;
|
|
|
- self.loadingNow = false;
|
|
|
- }
|
|
|
- } else {
|
|
|
- self.showEmptyTips = true;
|
|
|
- }
|
|
|
- }).catch(response =>{
|
|
|
- this.$util.msg(res.msg,2000);
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
- .league-scroll-view {
|
|
|
- width: 100%;
|
|
|
- background: #fff;
|
|
|
- border-top: 2rpx solid rgba(0,0,0,0.07);
|
|
|
- -webkit-overflow-scrolling: touch;
|
|
|
- .league-list-item:nth-child(1), .league-list-item:nth-child(2) {
|
|
|
- margin-top: 24rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .league-list-item {
|
|
|
- width: 45.2%;
|
|
|
- height: 390rpx;
|
|
|
- float: left;
|
|
|
- margin-left: 2.86%;
|
|
|
- margin-bottom: 24rpx;
|
|
|
- padding-bottom:8rpx;
|
|
|
- background: #fff;
|
|
|
- border: 2rpx solid #EFEFEF;
|
|
|
- border-radius: 14rpx;
|
|
|
- overflow: hidden;
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- .league-list-img {
|
|
|
- width: 100%;
|
|
|
- height: 204rpx;
|
|
|
- border-radius: 14rpx 14rpx 0 0;
|
|
|
- }
|
|
|
- .mask-pic {
|
|
|
- width: 100%;
|
|
|
- height: 204rpx;
|
|
|
- position: absolute;
|
|
|
- }
|
|
|
- .league-details-info {
|
|
|
- width: 96%;
|
|
|
- margin-top: 24rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- image {
|
|
|
- width: 30rpx;
|
|
|
- height: 30rpx;
|
|
|
- padding: 10rpx;
|
|
|
- margin-left:-6rpx;
|
|
|
- }
|
|
|
-
|
|
|
- text {
|
|
|
- width: 83%;
|
|
|
- display: inline-block;
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
- }
|
|
|
- .league-details-info>view {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- .arrow-right {
|
|
|
- width: 14rpx !important;
|
|
|
- height: 22rpx !important;
|
|
|
- margin-top: 2rpx;
|
|
|
- }
|
|
|
- .authenticated-icon {
|
|
|
- margin-left: -1rpx !important;
|
|
|
- }
|
|
|
- .authenticated-icon + text {
|
|
|
- margin-left: 5rpx;
|
|
|
- }
|
|
|
- .top-icon {
|
|
|
- width: 82rpx;
|
|
|
- height: 82rpx;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- }
|
|
|
- .green-color {
|
|
|
- color: $green-color;
|
|
|
- }
|
|
|
- }
|
|
|
- .loading-wrapper {
|
|
|
- background: $sub-bg-color;
|
|
|
- }
|
|
|
-</style>
|