|
|
@@ -1,487 +1,556 @@
|
|
|
-<template>
|
|
|
- <view class="container club clearfix">
|
|
|
- <view class="club-search clearfix">
|
|
|
- <view class="search-from name">
|
|
|
- <text class="iconfont icon-iconfonticonfontsousuo1"></text>
|
|
|
- <input
|
|
|
- class="input"
|
|
|
- type="text"
|
|
|
- confirm-type="search"
|
|
|
- v-model="listQuery.name"
|
|
|
- @input="onShowClose"
|
|
|
- @confirm="GetSellerClubList()"
|
|
|
- placeholder="机构名称/联系人"
|
|
|
- maxlength="12"
|
|
|
- />
|
|
|
- <text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText()"></text>
|
|
|
- </view>
|
|
|
- <view class="search-btn">
|
|
|
- <button class="search-btn" type="default" @click.stop="searchClubList">搜索</button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="club-main">
|
|
|
- <view v-if="isEmpty" class="empty-container">
|
|
|
- <image
|
|
|
- class="club-empty-image"
|
|
|
- src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AY2ZjAABpmnBICH4247.png"
|
|
|
- mode="aspectFit"
|
|
|
- ></image>
|
|
|
- <view class="txt">暂无机构数据</view>
|
|
|
- </view>
|
|
|
- <view v-else class="club-list">
|
|
|
- <scroll-view scroll-y="true">
|
|
|
- <view class="list" v-for="(club, index) in clubList" :key="index">
|
|
|
- <view class="club-list-top">
|
|
|
- <view class="list-left">
|
|
|
- <view class="list-head"
|
|
|
- ><image
|
|
|
- :src="
|
|
|
- club.headpic
|
|
|
- ? club.headpic
|
|
|
- : 'https://static.caimei365.com/app/img/icon/icon-club@3x.png'
|
|
|
- "
|
|
|
- mode=""
|
|
|
- ></image
|
|
|
- ></view>
|
|
|
- </view>
|
|
|
- <view class="list-item">
|
|
|
- <view class="list-title">
|
|
|
- <text class="list-name">
|
|
|
- {{ club.name }}
|
|
|
- </text>
|
|
|
- <text class="tags" v-if="club.vipFlag == 0 && club.userIdentity === 2">VIP</text>
|
|
|
- <text class="tags sv" v-if="club.vipFlag == 1">SVIP</text>
|
|
|
- <text class="list-hist" @click.stop="_goOperation(5, club)"
|
|
|
- ><text class="iconfont icon-dingdanliebiao"></text>订单列表</text
|
|
|
- >
|
|
|
- </view>
|
|
|
- <view class="list-opea">
|
|
|
- <text
|
|
|
- class="tags sm"
|
|
|
- @click.stop="
|
|
|
- this.$api.navigateTo('/pages/service/service?id=1041&title=标签说明')
|
|
|
- "
|
|
|
- >{{ club.activeState }} <text class="iconfont icon-xiayibu"></text
|
|
|
- ></text>
|
|
|
- <text
|
|
|
- class="tags sm"
|
|
|
- @click.stop="
|
|
|
- this.$api.navigateTo('/pages/service/service?id=1041&title=标签说明')
|
|
|
- "
|
|
|
- >{{ club.customerValue }} <text class="iconfont icon-xiayibu"></text
|
|
|
- ></text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="club-list-bot">
|
|
|
- <view class="list-opea">
|
|
|
- <view class="btn org" @click.stop="_goOperation(1, club)"> <text>立即下单</text> </view>
|
|
|
- <view class="btn gre" @click.stop="_goOperation(2, club)"> <text>二手下单</text> </view>
|
|
|
- <view class="btn yel" @click.stop="_goOperation(3, club)"> <text>再次购买</text> </view>
|
|
|
- <view class="btn yeo" @click.stop="_goOperation(4, club)">
|
|
|
- <text>充值/下订金</text>
|
|
|
- </view>
|
|
|
- <view class="btn yel" @click.stop="_goOperation(6, club)">
|
|
|
- <text>购买优惠券</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!--加载loadding-->
|
|
|
- <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
|
|
|
- <tui-nomore :visible="!pullUpOn" :backgroundColor="'#ffffff'" :text="nomoreText"></tui-nomore>
|
|
|
- <!--加载loadding-->
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import authorize from '@/common/config/authorize.js'
|
|
|
-import tuiLoadmore from '@/components/tui-components/loadmore/loadmore'
|
|
|
-import tuiNomore from '@/components/tui-components/nomore/nomore'
|
|
|
-const defaultListQuery = {
|
|
|
- userIdentity: '',
|
|
|
- name: '',
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 10,
|
|
|
- spId: 0,
|
|
|
- status: 66,
|
|
|
- type: 1,
|
|
|
- groupServiceId: 0
|
|
|
-}
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- tuiLoadmore,
|
|
|
- tuiNomore
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- isShowClose: false,
|
|
|
- isEmpty: false,
|
|
|
- nomoreText: '上拉显示更多',
|
|
|
- hasNextPage: false,
|
|
|
- loadding: false,
|
|
|
- pullUpOn: true,
|
|
|
- pullFlag: true,
|
|
|
- scrollHeight: '',
|
|
|
- currPage: '', //当前页面
|
|
|
- prevPage: '', //上一个页面
|
|
|
- clubList: [],
|
|
|
- listQuery: Object.assign({}, defaultListQuery)
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad() {},
|
|
|
- methods: {
|
|
|
- async initGetStotage() {
|
|
|
- // 初始化
|
|
|
- const userInfo = await this.$api.getStorage()
|
|
|
- this.listQuery.spId = userInfo.serviceProviderId ? userInfo.serviceProviderId : 0
|
|
|
- this.GetSellerClubList()
|
|
|
- },
|
|
|
- searchClubList() {
|
|
|
- // 搜索
|
|
|
- this.GetSellerClubList()
|
|
|
- },
|
|
|
- GetSellerClubList() {
|
|
|
- this.listQuery.pageNum = 1
|
|
|
- this.SellerService.GetSellerClubList(this.listQuery)
|
|
|
- .then(response => {
|
|
|
- let data = response.data
|
|
|
- if (data.list && data.list.length > 0) {
|
|
|
- this.isEmpty = false
|
|
|
- this.hasNextPage = response.data.hasNextPage
|
|
|
- this.clubList = data.list
|
|
|
- this.pullFlag = false
|
|
|
- setTimeout(() => {
|
|
|
- this.pullFlag = true
|
|
|
- }, 500)
|
|
|
- if (this.hasNextPage) {
|
|
|
- this.pullUpOn = false
|
|
|
- this.nomoreText = '上拉显示更多'
|
|
|
- } else {
|
|
|
- this.pullUpOn = true
|
|
|
- this.loadding = false
|
|
|
- this.nomoreText = '已至底部'
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.isEmpty = true
|
|
|
- }
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- this.$util.msg(error.msg, 2000)
|
|
|
- })
|
|
|
- },
|
|
|
- getOnReachBottomData() {
|
|
|
- this.listQuery.pageNum += 1
|
|
|
- this.SellerService.GetSellerClubList(this.listQuery)
|
|
|
- .then(response => {
|
|
|
- let data = response.data
|
|
|
- if (data.list && data.list.length > 0) {
|
|
|
- this.hasNextPage = response.data.hasNextPage
|
|
|
- this.clubList = this.clubList.concat(data.list)
|
|
|
- this.pullFlag = false // 防上拉暴滑
|
|
|
- setTimeout(() => {
|
|
|
- this.pullFlag = true
|
|
|
- }, 500)
|
|
|
- if (this.hasNextPage) {
|
|
|
- this.pullUpOn = false
|
|
|
- this.nomoreText = '上拉显示更多'
|
|
|
- } else {
|
|
|
- this.pullUpOn = false
|
|
|
- this.loadding = false
|
|
|
- this.nomoreText = '已至底部'
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- this.$util.msg(error.msg, 2000)
|
|
|
- })
|
|
|
- },
|
|
|
- onShowClose() {
|
|
|
- //输入框失去焦点时触发
|
|
|
- if (this.listQuery.name != '') {
|
|
|
- this.isShowClose = true
|
|
|
- } else {
|
|
|
- this.isShowClose = false
|
|
|
- }
|
|
|
- },
|
|
|
- delInputText() {
|
|
|
- //清除输入框内容
|
|
|
- this.listQuery.name = ''
|
|
|
- this.isShowClose = false
|
|
|
- },
|
|
|
- _goOperation(type, club) {
|
|
|
- const pathMap = {
|
|
|
- 1: '/pages/seller/cart/immediately',
|
|
|
- 2: '/pages/seller/cart/second',
|
|
|
- 3: '/pages/seller/cart/buyagain',
|
|
|
- 4: '/pages/seller/order/create-recharge-order',
|
|
|
- 5: '/pages/seller/order/order-historylist?listType=0',
|
|
|
- 6: '/pages/seller/cart/coupon',
|
|
|
- }
|
|
|
- this.$api.setStorage('orderUserInfo', club)
|
|
|
- this.$api.navigateTo(pathMap[type])
|
|
|
- }
|
|
|
- },
|
|
|
- onReachBottom() {
|
|
|
- if (this.hasNextPage) {
|
|
|
- this.loadding = true
|
|
|
- this.pullUpOn = true
|
|
|
- this.getOnReachBottomData()
|
|
|
- }
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- this.initGetStotage()
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
-page {
|
|
|
- height: auto;
|
|
|
-}
|
|
|
-page,
|
|
|
-.container {
|
|
|
- /* padding-bottom: 120upx; */
|
|
|
- background: #f7f7f7;
|
|
|
-}
|
|
|
-.container {
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-.club-search {
|
|
|
- height: 64rpx;
|
|
|
- width: 702rpx;
|
|
|
- padding: 24rpx;
|
|
|
- background: #ffffff;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 999;
|
|
|
- .search-from {
|
|
|
- width: 582rpx;
|
|
|
- height: 64rpx;
|
|
|
- background: #f7f7f7;
|
|
|
- border-radius: 32rpx;
|
|
|
- float: left;
|
|
|
- position: relative;
|
|
|
- .icon-iconfonticonfontsousuo1 {
|
|
|
- width: 64rpx;
|
|
|
- height: 64rpx;
|
|
|
- line-height: 64rpx;
|
|
|
- text-align: center;
|
|
|
- display: block;
|
|
|
- font-size: $font-size-38;
|
|
|
- float: left;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- .icon-shanchu1 {
|
|
|
- font-size: $font-size-32;
|
|
|
- color: #999999;
|
|
|
- position: absolute;
|
|
|
- width: 64rpx;
|
|
|
- height: 64rpx;
|
|
|
- line-height: 64rpx;
|
|
|
- text-align: center;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- z-index: 10;
|
|
|
- }
|
|
|
- .input {
|
|
|
- width: 500rpx;
|
|
|
- height: 64rpx;
|
|
|
- float: left;
|
|
|
- line-height: 64rpx;
|
|
|
- color: $text-color;
|
|
|
- font-size: $font-size-24;
|
|
|
- }
|
|
|
- }
|
|
|
- .search-btn {
|
|
|
- width: 120rpx;
|
|
|
- line-height: 64rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: $color-system;
|
|
|
- float: left;
|
|
|
- background: #ffffff;
|
|
|
- }
|
|
|
-}
|
|
|
-.club-main {
|
|
|
- padding-top: 122rpx;
|
|
|
- .list {
|
|
|
- align-items: center;
|
|
|
- width: 702rpx;
|
|
|
- height: auto;
|
|
|
- padding: 24rpx;
|
|
|
- background: #ffffff;
|
|
|
- position: relative;
|
|
|
- border-bottom: 1px solid #ebebeb;
|
|
|
- float: left;
|
|
|
- .club-list-top {
|
|
|
- width: 100%;
|
|
|
- height: 140rpx;
|
|
|
- float: left;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .list-left {
|
|
|
- height: 140rpx;
|
|
|
- flex: 2;
|
|
|
- margin-right: 10rpx;
|
|
|
- .list-head {
|
|
|
- width: 140rpx;
|
|
|
- height: 140rpx;
|
|
|
- border-radius: 14rpx;
|
|
|
- image {
|
|
|
- width: 140rpx;
|
|
|
- height: 140rpx;
|
|
|
- border-radius: 14rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .list-item {
|
|
|
- height: 140rpx;
|
|
|
- flex: 8;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- .list-title {
|
|
|
- flex: 2;
|
|
|
- line-height: 80rpx;
|
|
|
- width: 100%;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: $text-color;
|
|
|
- padding-left: 11rpx;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: flex-start;
|
|
|
- .list-name {
|
|
|
- min-width: 100rpx;
|
|
|
- display: block;
|
|
|
- float: left;
|
|
|
- text-align: left;
|
|
|
- -o-text-overflow: ellipsis;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- word-break: break-all;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 1;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .tags {
|
|
|
- display: inline-block;
|
|
|
- height: 36rpx;
|
|
|
- padding: 0 15rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
- background: #f0cb72;
|
|
|
- font-size: $font-size-22;
|
|
|
- color: #4e4539;
|
|
|
- text-align: center;
|
|
|
- line-height: 36rpx;
|
|
|
- margin-left: 10rpx;
|
|
|
- margin-right: 10rpx;
|
|
|
- &.sv {
|
|
|
- background: #333333;
|
|
|
- color: #f0cb72;
|
|
|
- }
|
|
|
- }
|
|
|
- .list-hist {
|
|
|
- display: block;
|
|
|
- float: right;
|
|
|
- color: #1890F9;
|
|
|
- font-size: $font-size-24;
|
|
|
- text-align: right;
|
|
|
- padding-right: 30rpx;
|
|
|
- .icon-dingdanxuanzhong {
|
|
|
- font-size: $font-size-34;
|
|
|
- color: #1890F9;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .list-opea {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- flex: 4;
|
|
|
- color: #166ce1;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- .tags {
|
|
|
- display: inline-block;
|
|
|
- height: 36rpx;
|
|
|
- padding: 0 15rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
- background: #f0cb72;
|
|
|
- font-size: $font-size-22;
|
|
|
- color: #4e4539;
|
|
|
- text-align: center;
|
|
|
- line-height: 36rpx;
|
|
|
- margin-left: 10rpx;
|
|
|
- margin-right: 10rpx;
|
|
|
- &.sv {
|
|
|
- background: #333333;
|
|
|
- color: #f0cb72;
|
|
|
- }
|
|
|
- &.sm {
|
|
|
- display: inline-block;
|
|
|
- height: 36rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 8rpx 0 15rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
- background: #faede5;
|
|
|
- font-size: $font-size-22;
|
|
|
- color: $color-system;
|
|
|
- text-align: center;
|
|
|
- line-height: 36rpx;
|
|
|
- margin-right: 10rpx;
|
|
|
- .icon-xiayibu {
|
|
|
- font-size: 20rpx;
|
|
|
- margin-left: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .club-list-bot {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- float: left;
|
|
|
- margin-top: 20rpx;
|
|
|
- .list-opea {
|
|
|
- width: 100%;
|
|
|
- flex: 1;
|
|
|
- color: #166ce1;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- .btn {
|
|
|
- width: 160rpx;
|
|
|
- height: 60rpx;
|
|
|
- line-height: 60rpx;
|
|
|
- border-radius: 30rpx;
|
|
|
- font-size: $font-size-24;
|
|
|
- color: $text-color;
|
|
|
- text-align: center;
|
|
|
- margin: 7rpx;
|
|
|
- float: left;
|
|
|
- &.org {
|
|
|
- background: rgba(22, 225, 77, 0.1);
|
|
|
- color: #16e14d;
|
|
|
- }
|
|
|
- &.gre {
|
|
|
- background: rgba(22, 123, 225, 0.1);
|
|
|
- color: #167be1;
|
|
|
- }
|
|
|
- &.yel {
|
|
|
- background: rgba(225, 86, 22, 0.1);
|
|
|
- color: #e15616;
|
|
|
- }
|
|
|
- &.yeo {
|
|
|
- background: #fff5cf;
|
|
|
- color: #ffaa01;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
+<template>
|
|
|
+ <view class="container club clearfix">
|
|
|
+ <view class="club-search clearfix">
|
|
|
+ <view class="search-from name">
|
|
|
+ <text class="iconfont icon-iconfonticonfontsousuo1"></text>
|
|
|
+ <input
|
|
|
+ class="input"
|
|
|
+ type="text"
|
|
|
+ confirm-type="search"
|
|
|
+ v-model="listQuery.name"
|
|
|
+ @input="onShowClose"
|
|
|
+ @confirm="GetSellerClubList()"
|
|
|
+ placeholder="机构名称/联系人"
|
|
|
+ maxlength="12"
|
|
|
+ />
|
|
|
+ <text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText()"></text>
|
|
|
+ </view>
|
|
|
+ <view class="search-btn">
|
|
|
+ <button class="search-btn" type="default" @click.stop="searchClubList">搜索</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="club-main">
|
|
|
+ <view v-if="isEmpty" class="empty-container">
|
|
|
+ <image
|
|
|
+ class="club-empty-image"
|
|
|
+ src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AY2ZjAABpmnBICH4247.png"
|
|
|
+ mode="aspectFit"
|
|
|
+ ></image>
|
|
|
+ <view class="txt">暂无机构数据</view>
|
|
|
+ </view>
|
|
|
+ <view v-else class="club-list">
|
|
|
+ <scroll-view scroll-y="true">
|
|
|
+ <view class="list" v-for="(club, index) in clubList" :key="index">
|
|
|
+ <view class="club-list-top">
|
|
|
+ <view class="list-left">
|
|
|
+ <view class="list-head"
|
|
|
+ ><image
|
|
|
+ :src="
|
|
|
+ club.headpic
|
|
|
+ ? club.headpic
|
|
|
+ : 'https://static.caimei365.com/app/img/icon/icon-club@3x.png'
|
|
|
+ "
|
|
|
+ mode=""
|
|
|
+ ></image
|
|
|
+ ></view>
|
|
|
+ </view>
|
|
|
+ <view class="list-item">
|
|
|
+ <view class="list-title">
|
|
|
+ <text class="list-name">
|
|
|
+ {{ club.name }}
|
|
|
+ </text>
|
|
|
+ <text class="tags" v-if="club.vipFlag == 0 && club.userIdentity === 2">VIP</text>
|
|
|
+ <text class="tags sv" v-if="club.vipFlag == 1">SVIP</text>
|
|
|
+ <text class="list-hist" @click.stop="handleClickOper(5, club)"
|
|
|
+ ><text class="iconfont icon-dingdanliebiao"></text>订单列表</text
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ <view class="list-opea">
|
|
|
+ <text
|
|
|
+ class="tags sm"
|
|
|
+ @click.stop="
|
|
|
+ this.$api.navigateTo('/pages/service/service?id=1041&title=标签说明')
|
|
|
+ "
|
|
|
+ >{{ club.activeState }} <text class="iconfont icon-xiayibu"></text
|
|
|
+ ></text>
|
|
|
+ <text
|
|
|
+ class="tags sm"
|
|
|
+ @click.stop="
|
|
|
+ this.$api.navigateTo('/pages/service/service?id=1041&title=标签说明')
|
|
|
+ "
|
|
|
+ >{{ club.customerValue }} <text class="iconfont icon-xiayibu"></text
|
|
|
+ ></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="club-list-bot">
|
|
|
+ <view class="btn" @click.stop="handleClickOper(1, club)"> <text class="iconfont icon-lijixiadan"></text> 立即下单</view>
|
|
|
+ <view class="btn" @click.stop="handleClickOper(2, club)"> <text class="iconfont icon-ershouxiadan"></text> 二手下单</view>
|
|
|
+ <view class="btn" @click.stop="handleClickOper(4, club)"> <text class="iconfont icon-chongzhixiadingjin"></text> 充值/下订金</view>
|
|
|
+ <view class="btn" @click.stop="handleShowBubble(club,index)">
|
|
|
+ <text class="iconfont icon-gengduo2"></text>
|
|
|
+ <view class="btn-bubble" v-if="currentIndex === index && club.bubble">
|
|
|
+ <view class="btn-view border" @click.stop="handleClickOper(3, club)">
|
|
|
+ <text class="iconfont icon-zaicigoumai1"></text> 再次购买
|
|
|
+ </view>
|
|
|
+ <view class="btn-view" @click.stop="handleClickOper(6, club)">
|
|
|
+ <text class="iconfont icon-youhuiquan"></text> 购买优惠券
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!--加载loadding-->
|
|
|
+ <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
|
|
|
+ <tui-nomore :visible="!pullUpOn" :backgroundColor="'#ffffff'" :text="nomoreText"></tui-nomore>
|
|
|
+ <!--加载loadding-->
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import authorize from '@/common/config/authorize.js'
|
|
|
+import tuiLoadmore from '@/components/tui-components/loadmore/loadmore'
|
|
|
+import tuiNomore from '@/components/tui-components/nomore/nomore'
|
|
|
+const defaultListQuery = {
|
|
|
+ userIdentity: '',
|
|
|
+ name: '',
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ spId: 0,
|
|
|
+ status: 66,
|
|
|
+ type: 1,
|
|
|
+ groupServiceId: 0
|
|
|
+}
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ tuiLoadmore,
|
|
|
+ tuiNomore
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isShowClose: false,
|
|
|
+ isEmpty: false,
|
|
|
+ nomoreText: '上拉显示更多',
|
|
|
+ hasNextPage: false,
|
|
|
+ loadding: false,
|
|
|
+ pullUpOn: true,
|
|
|
+ pullFlag: true,
|
|
|
+ scrollHeight: '',
|
|
|
+ currPage: '', //当前页面
|
|
|
+ prevPage: '', //上一个页面
|
|
|
+ clubList: [],
|
|
|
+ listQuery: Object.assign({}, defaultListQuery),
|
|
|
+ currentIndex:0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {},
|
|
|
+ methods: {
|
|
|
+ async initGetStotage() {
|
|
|
+ // 初始化
|
|
|
+ const userInfo = await this.$api.getStorage()
|
|
|
+ this.listQuery.spId = userInfo.serviceProviderId ? userInfo.serviceProviderId : 0
|
|
|
+ this.GetSellerClubList()
|
|
|
+ },
|
|
|
+ searchClubList() {
|
|
|
+ // 搜索
|
|
|
+ this.GetSellerClubList()
|
|
|
+ },
|
|
|
+ GetSellerClubList() {
|
|
|
+ this.listQuery.pageNum = 1
|
|
|
+ this.SellerService.GetSellerClubList(this.listQuery)
|
|
|
+ .then(response => {
|
|
|
+ let data = response.data
|
|
|
+ if (data.list && data.list.length > 0) {
|
|
|
+ this.isEmpty = false
|
|
|
+ this.hasNextPage = response.data.hasNextPage
|
|
|
+ this.clubList = data.list.map((el,index)=>{
|
|
|
+ el.bubble = false
|
|
|
+ return el
|
|
|
+ })
|
|
|
+ this.pullFlag = false
|
|
|
+ setTimeout(() => {
|
|
|
+ this.pullFlag = true
|
|
|
+ }, 500)
|
|
|
+ if (this.hasNextPage) {
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.nomoreText = '上拉显示更多'
|
|
|
+ } else {
|
|
|
+ this.pullUpOn = true
|
|
|
+ this.loadding = false
|
|
|
+ this.nomoreText = '已至底部'
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.isEmpty = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getOnReachBottomData() {
|
|
|
+ this.listQuery.pageNum += 1
|
|
|
+ this.SellerService.GetSellerClubList(this.listQuery)
|
|
|
+ .then(response => {
|
|
|
+ let data = response.data
|
|
|
+ if (data.list && data.list.length > 0) {
|
|
|
+ this.hasNextPage = response.data.hasNextPage
|
|
|
+ this.clubList = this.clubList.concat(data.list)
|
|
|
+ this.clubList = this.clubList.map((el,index)=>{
|
|
|
+ el.bubble = false
|
|
|
+ return el
|
|
|
+ })
|
|
|
+ this.pullFlag = false // 防上拉暴滑
|
|
|
+ setTimeout(() => {
|
|
|
+ this.pullFlag = true
|
|
|
+ }, 500)
|
|
|
+ if (this.hasNextPage) {
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.nomoreText = '上拉显示更多'
|
|
|
+ } else {
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.loadding = false
|
|
|
+ this.nomoreText = '已至底部'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onShowClose() {
|
|
|
+ //输入框失去焦点时触发
|
|
|
+ if (this.listQuery.name != '') {
|
|
|
+ this.isShowClose = true
|
|
|
+ } else {
|
|
|
+ this.isShowClose = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ delInputText() {
|
|
|
+ //清除输入框内容
|
|
|
+ this.listQuery.name = ''
|
|
|
+ this.isShowClose = false
|
|
|
+ },
|
|
|
+ handleClickOper(type, club) {
|
|
|
+ const pathMap = {
|
|
|
+ 1: '/pages/seller/cart/immediately',
|
|
|
+ 2: '/pages/seller/cart/second',
|
|
|
+ 3: '/pages/seller/cart/buyagain',
|
|
|
+ 4: '/pages/seller/order/create-recharge-order',
|
|
|
+ 5: '/pages/seller/order/order-historylist?listType=0',
|
|
|
+ 6: '/pages/seller/cart/coupon',
|
|
|
+ }
|
|
|
+ this.$api.setStorage('orderUserInfo', club)
|
|
|
+ this.$api.navigateTo(pathMap[type])
|
|
|
+ },
|
|
|
+ handleShowBubble(club,index){
|
|
|
+ this.currentIndex = index
|
|
|
+ club.bubble = !club.bubble
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ if (this.hasNextPage) {
|
|
|
+ this.loadding = true
|
|
|
+ this.pullUpOn = true
|
|
|
+ this.getOnReachBottomData()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.initGetStotage()
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+page {
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
+page,
|
|
|
+.container {
|
|
|
+ /* padding-bottom: 120upx; */
|
|
|
+ background: #f7f7f7;
|
|
|
+}
|
|
|
+.container {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.club-search {
|
|
|
+ height: 64rpx;
|
|
|
+ width: 702rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 999;
|
|
|
+ .search-from {
|
|
|
+ width: 582rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ background: #f7f7f7;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ float: left;
|
|
|
+ position: relative;
|
|
|
+ .icon-iconfonticonfontsousuo1 {
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ line-height: 64rpx;
|
|
|
+ text-align: center;
|
|
|
+ display: block;
|
|
|
+ font-size: $font-size-38;
|
|
|
+ float: left;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .icon-shanchu1 {
|
|
|
+ font-size: $font-size-32;
|
|
|
+ color: #999999;
|
|
|
+ position: absolute;
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ line-height: 64rpx;
|
|
|
+ text-align: center;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+ .input {
|
|
|
+ width: 500rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ float: left;
|
|
|
+ line-height: 64rpx;
|
|
|
+ color: $text-color;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .search-btn {
|
|
|
+ width: 120rpx;
|
|
|
+ line-height: 64rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $color-system;
|
|
|
+ float: left;
|
|
|
+ background: #ffffff;
|
|
|
+ }
|
|
|
+}
|
|
|
+.club-main {
|
|
|
+ padding-top: 122rpx;
|
|
|
+ .list {
|
|
|
+ align-items: center;
|
|
|
+ width: 702rpx;
|
|
|
+ height: auto;
|
|
|
+ padding: 24rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ position: relative;
|
|
|
+ border-bottom: 1px solid #ebebeb;
|
|
|
+ float: left;
|
|
|
+ .club-list-top {
|
|
|
+ width: 100%;
|
|
|
+ height: 140rpx;
|
|
|
+ float: left;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .list-left {
|
|
|
+ height: 140rpx;
|
|
|
+ flex: 2;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ .list-head {
|
|
|
+ width: 140rpx;
|
|
|
+ height: 140rpx;
|
|
|
+ border-radius: 14rpx;
|
|
|
+ image {
|
|
|
+ width: 140rpx;
|
|
|
+ height: 140rpx;
|
|
|
+ border-radius: 14rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-item {
|
|
|
+ height: 140rpx;
|
|
|
+ flex: 8;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .list-title {
|
|
|
+ flex: 2;
|
|
|
+ line-height: 80rpx;
|
|
|
+ width: 100%;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
+ padding-left: 11rpx;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-start;
|
|
|
+ .list-name {
|
|
|
+ min-width: 100rpx;
|
|
|
+ display: block;
|
|
|
+ float: left;
|
|
|
+ text-align: left;
|
|
|
+ -o-text-overflow: ellipsis;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ word-break: break-all;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .tags {
|
|
|
+ display: inline-block;
|
|
|
+ height: 36rpx;
|
|
|
+ padding: 0 15rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ background: #f0cb72;
|
|
|
+ font-size: $font-size-22;
|
|
|
+ color: #4e4539;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 36rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ &.sv {
|
|
|
+ background: #333333;
|
|
|
+ color: #f0cb72;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-hist {
|
|
|
+ display: block;
|
|
|
+ float: right;
|
|
|
+ color: #1890F9;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ text-align: right;
|
|
|
+ padding-right: 30rpx;
|
|
|
+ .icon-dingdanxuanzhong {
|
|
|
+ font-size: $font-size-34;
|
|
|
+ color: #1890F9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-opea {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex: 4;
|
|
|
+ color: #166ce1;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ .tags {
|
|
|
+ display: inline-block;
|
|
|
+ height: 36rpx;
|
|
|
+ padding: 0 15rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ background: #f0cb72;
|
|
|
+ font-size: $font-size-22;
|
|
|
+ color: #4e4539;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 36rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ &.sv {
|
|
|
+ background: #333333;
|
|
|
+ color: #f0cb72;
|
|
|
+ }
|
|
|
+ &.sm {
|
|
|
+ display: inline-block;
|
|
|
+ height: 36rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 8rpx 0 15rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ background: #faede5;
|
|
|
+ font-size: $font-size-22;
|
|
|
+ color: $color-system;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 36rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ .icon-xiayibu {
|
|
|
+ font-size: 20rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .club-list-bot {
|
|
|
+ width: 100%;
|
|
|
+ height: 80rpx;
|
|
|
+ float: left;
|
|
|
+ background-color: #F7F7F7;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ .btn {
|
|
|
+ height: 80rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ line-height: 80rpx;
|
|
|
+ padding: 0 28rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #333333;
|
|
|
+ text-align: center;
|
|
|
+ float: left;
|
|
|
+ position: relative;
|
|
|
+ &:nth-child(1){
|
|
|
+ &:before{
|
|
|
+ content: '';
|
|
|
+ width: 1px;
|
|
|
+ height: 20rpx;
|
|
|
+ background-color: #B2B2B2;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:nth-child(2){
|
|
|
+ &:before{
|
|
|
+ content: '';
|
|
|
+ width: 1px;
|
|
|
+ height: 20rpx;
|
|
|
+ background-color: #B2B2B2;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:nth-child(3){
|
|
|
+ &:before{
|
|
|
+ content: '';
|
|
|
+ width: 1px;
|
|
|
+ height: 20rpx;
|
|
|
+ background-color: #B2B2B2;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:last-child{
|
|
|
+ padding: 0 36rpx;
|
|
|
+ .iconfont{
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .btn-bubble{
|
|
|
+ width: 200rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ background: rgba(51, 51, 51, 0.8);
|
|
|
+ position: absolute;
|
|
|
+ top: -154rpx;
|
|
|
+ right: 0;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ &:before{
|
|
|
+ content: '';
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border: 15rpx solid transparent;
|
|
|
+ border-top: 15rpx solid rgba(51, 51, 51, 0.8);
|
|
|
+ position: absolute;
|
|
|
+ bottom: -28rpx;
|
|
|
+ right: 42rpx;
|
|
|
+ }
|
|
|
+ .btn-view{
|
|
|
+ width: 100%;
|
|
|
+ height: 80rpx;
box-sizing: border-box;
line-height: 80rpx;
font-size: $font-size-24;
color: #FFFFFF;
text-align: center;
float: left;
|
|
|
+ .iconfont{
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-right: 5rpx;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+ &.border{
|
|
|
+ border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
|
|
+ }
}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .iconfont{
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #333333;
|
|
|
+ margin-right: 5rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
