|
@@ -1,55 +1,136 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- <u-navbar back-text="" title="交易" title-size='36' back-icon-name='search' :title-bold='true'
|
|
|
- :border-bottom='false' back-icon-color='#333333' title-color='#000000'>
|
|
|
- <view class="slot-wrap" slot="right">
|
|
|
- 我的关注
|
|
|
+ <view v-if="!isShowSearch">
|
|
|
+ <view class="top-warp">
|
|
|
+ <view class="search">
|
|
|
+ <view class="place">
|
|
|
+ <selectAddress @selectAddress='selectAddress'></selectAddress>
|
|
|
+ <!-- <picker @change="bindPickerChange" :value="multiIndex" :range="multiArray" range-key='label'
|
|
|
+ mode="multiSelector" @columnchange='columnchange'>
|
|
|
+ <view class="text">{{searchPlace}}</view>
|
|
|
+ </picker> -->
|
|
|
+ <u-icon name="arrow-down" color="#333333" size="17" bold style='margin-left: 6rpx;'></u-icon>
|
|
|
+ </view>
|
|
|
+ <u-search placeholder="请输入作物名称或用户名称" v-model="keyword" :input-style='inputStyle'
|
|
|
+ :show-action="false" disabled @click='toSearch'>
|
|
|
+ </u-search>
|
|
|
+ </view>
|
|
|
+ <me-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></me-tabs>
|
|
|
</view>
|
|
|
- </u-navbar>
|
|
|
- <view class="top-warp">
|
|
|
- <me-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></me-tabs>
|
|
|
- </view>
|
|
|
- <mescroll-body ref="mescrollRef" @init="mescrollInit" top="80" @down="downCallback" :up="upOption"
|
|
|
- @up="upCallback" @emptyclick="emptyClick">
|
|
|
- <!-- 数据列表 -->
|
|
|
- <view class="list" v-if="goods.length!=0">
|
|
|
- <view class="list-item" v-for="(item,index) in goods">
|
|
|
- <view class="row1 flex jcsb alc">
|
|
|
- <view class="left flex alc">
|
|
|
- <image src="../../static/img/face/27.png" mode="widthFix" class="head-img"></image>
|
|
|
- <view class="">
|
|
|
- <view class="title">
|
|
|
- 中天昊元粮库
|
|
|
- </view>
|
|
|
- <view class="bottom">
|
|
|
- <text class="color1">采购</text>
|
|
|
- <text class="color2">销售</text>
|
|
|
- <text class="color3">5分钟前</text>
|
|
|
+ <mescroll-body ref="mescrollRef" @init="mescrollInit" top="180" @down="downCallback" :up="upOption"
|
|
|
+ @up="upCallback" @emptyclick="emptyClick">
|
|
|
+ <!-- 数据列表 -->
|
|
|
+ <view class="list" v-if="goods.length!=0">
|
|
|
+ <view class="list-item" v-for="(item,index) in goods">
|
|
|
+ <view class="row1 flex jcsb alc">
|
|
|
+ <view class="left flex alc">
|
|
|
+ <image
|
|
|
+ :src="item.commonUser.avatarUrl?item.commonUser.avatarUrl:'../../static/img/face/27.png'"
|
|
|
+ mode="widthFix" class="head-img"></image>
|
|
|
+ <view class="">
|
|
|
+ <view class="title">
|
|
|
+ {{item.publisher}}
|
|
|
+ </view>
|
|
|
+ <view class="bottom" style="margin-top: 6rpx;">
|
|
|
+ <text class="color1" v-if="item.tranType=='采购'">采购</text>
|
|
|
+ <text class="color2" v-if="item.tranType=='销售'">销售</text>
|
|
|
+ <text class="color3">{{$helper.changeTime(item.updateDate)}}</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view class="right" v-if="item.followed==1" @click="follow(item,1)">
|
|
|
+ <text class="case" style="color:#878C9C;">已关注</text>
|
|
|
+ </view>
|
|
|
+ <view class="right" v-else @click="follow(item,2)">
|
|
|
+ <u-icon name="plus" color="#333333" size="17" bold></u-icon><text class="case">关注</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="row2">
|
|
|
+ <mote-lines-divide :dt="item.publishingContent" :line="3" expandText="展开" foldHint="收起" />
|
|
|
+ </view>
|
|
|
+ <view class="row3">
|
|
|
+ <image :src="item1" mode="aspectFill" v-for="(item1,index) in item.imgList" class="img">
|
|
|
+ </image>
|
|
|
+ <!-- <u-row justify="space-between" gutter="10">
|
|
|
+ <u-col span="4">
|
|
|
+ <view class="demo-layout bg-purple">
|
|
|
+ <image src="../../static/img/liangmai/bg.png" mode="aspectFill"
|
|
|
+ style="width: 100%;height: 100%;"></image>
|
|
|
+ </view>
|
|
|
+ </u-col>
|
|
|
+ <u-col span="4">
|
|
|
+ <view class="demo-layout bg-purple-light">
|
|
|
+ <image src="../../static/img/liangmai/bg.png" mode="aspectFill"
|
|
|
+ style="width: 100%;height: 100%;"></image>
|
|
|
+ </view>
|
|
|
+ </u-col>
|
|
|
+ <u-col span="4">
|
|
|
+ <view class="demo-layout bg-purple">
|
|
|
+ <image src="../../static/img/liangmai/bg.png" mode="aspectFill"
|
|
|
+ style="width: 100%;height: 100%;"></image>
|
|
|
+ </view>
|
|
|
+ </u-col>
|
|
|
+ </u-row> -->
|
|
|
</view>
|
|
|
- <view class="right">
|
|
|
- <u-icon name="plus" color="#333333" size="17"></u-icon><text class="case">关注</text>
|
|
|
+ <view class="row4">
|
|
|
+ <u-icon name="map-fill" color="#AFB3BF" size="28" bold></u-icon>
|
|
|
+ <text class="text">{{item.placeDelivery}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
|
|
|
- <!-- <good-list :list="goods"></good-list> -->
|
|
|
- </mescroll-body>
|
|
|
+ <!-- <good-list :list="goods"></good-list> -->
|
|
|
+ </mescroll-body>
|
|
|
+ <view class="add" @click="release">
|
|
|
+ <u-icon name="plus" color="#fff" size="34" bold></u-icon>
|
|
|
+ </view>
|
|
|
+ <u-modal v-model="show" content="确定不在关注?" :show-title='false' :show-cancel-button='true'
|
|
|
+ :content-style="contentStyle" showCancelButton='true'></u-modal>
|
|
|
+ </view>
|
|
|
+ <search v-if="isShowSearch" @searchVal='searchVal'></search>
|
|
|
+ <u-modal v-model="isShowAlert" :title-style="{fontSize: '18px',fontWeight:'500'}"
|
|
|
+ :content-style="{fontSize: '14px',fontWeight:'400'}" confirm-color='#22C572' confirm-text='确定' title='提示'
|
|
|
+ showCancelButton='false' content="尚未登录,是否立即登录" @confirm="alertBtn" @cancel="cancelClick"></u-modal>
|
|
|
+ <u-toast ref="uToast" />
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
|
|
+ import MoteLinesDivide from "@/components/text-over-flow"
|
|
|
+ import selectAddress from "@/components/selectAddress.vue"
|
|
|
+ import search from "@/components/search.vue"
|
|
|
import {
|
|
|
apiGoods
|
|
|
} from "@/api/mock.js"
|
|
|
-
|
|
|
+ import {
|
|
|
+ mapState
|
|
|
+ } from 'vuex';
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ MoteLinesDivide,
|
|
|
+ selectAddress,
|
|
|
+ search
|
|
|
+ },
|
|
|
mixins: [MescrollMixin], // 使用mixin
|
|
|
data() {
|
|
|
return {
|
|
|
+ canReset: false,
|
|
|
+ selectPlace: '',
|
|
|
+ mescroll: null,
|
|
|
+ isShowAlert: false,
|
|
|
+ contentStyle: {
|
|
|
+ "font-weight": 700
|
|
|
+ },
|
|
|
+ isShowSearch: false,
|
|
|
+ selectItem: {},
|
|
|
+ show: false,
|
|
|
+ keyword: '',
|
|
|
+ inputStyle: {
|
|
|
+ // "padding-left": '30rpx'
|
|
|
+ },
|
|
|
+ content: '上半年,普陀区开展“绿剑”系列执法行动二次,共计出动执法人员120余人次,检有关经营主体87余家次,发放宣传资料等200余份;加强农产品和农业…上半年,普陀区开展“绿剑”系列执法行动二次,共计出动执法人员120余人次,检有关经营主体87余家次,发放宣传资料等200余份;加强农产品和农业…',
|
|
|
upOption: {
|
|
|
// page: {
|
|
|
// num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
|
|
@@ -78,7 +159,9 @@
|
|
|
tabIndex: 0 // tab下标
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
+ computed: {
|
|
|
+ ...mapState(['hasLogin', 'userInfo', 'clientId']),
|
|
|
+ },
|
|
|
|
|
|
onShow() {
|
|
|
uni.showTabBar()
|
|
@@ -118,27 +201,131 @@
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
- },
|
|
|
- onLoad(options) {
|
|
|
+ this.$nextTick(function() {
|
|
|
+ this.canReset && this.mescroll.resetUpScroll() // 重置列表数据为第一页
|
|
|
+ this.canReset && this.mescroll.scrollTo(0, 0) // 重置列表数据为第一页时,建议把滚动条也重置到顶部,避免无法再次翻页的问题
|
|
|
+ this.canReset = true // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
|
|
|
+ });
|
|
|
|
|
|
},
|
|
|
-
|
|
|
+ onLoad(options) {},
|
|
|
+ onNavigationBarButtonTap(e) {
|
|
|
+ console.log(e)
|
|
|
+ uni.navigateTo({
|
|
|
+ url: 'myAttention'
|
|
|
+ })
|
|
|
+ },
|
|
|
|
|
|
methods: {
|
|
|
- /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
|
|
|
+ mescrollInit(mescroll) {
|
|
|
+ console.log("mescroll", mescroll)
|
|
|
+ this.mescroll = mescroll;
|
|
|
+ },
|
|
|
+ cancelClick() {
|
|
|
+ this.isShowAlert = false
|
|
|
+ },
|
|
|
+ alertBtn() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/public/login'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ searchVal(e) {
|
|
|
+ console.log(e)
|
|
|
+ this.isShowSearch = false
|
|
|
+ this.keyword = e
|
|
|
+ },
|
|
|
+ toSearch() {
|
|
|
+ this.isShowSearch = true
|
|
|
+ },
|
|
|
+ follow(val, type) {
|
|
|
+ // 2关注
|
|
|
+ this.selectItem = val
|
|
|
+ if (type == 1) {
|
|
|
+ this.show = true
|
|
|
+ } else {
|
|
|
+ let _obj = {
|
|
|
+ userId: this.userInfo.id,
|
|
|
+ followedId: val.userId
|
|
|
+ }
|
|
|
+ uni.showLoading({
|
|
|
+ title: '数据加载中',
|
|
|
+ mask: true
|
|
|
+ })
|
|
|
+ this.$api.doRequest('post', '/followInformation/api/addInfo', _obj).then(res => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ title: '关注成功',
|
|
|
+ type: 'success',
|
|
|
+ })
|
|
|
+ this.mescroll.resetUpScroll()
|
|
|
+ }
|
|
|
+ uni.hideLoading()
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ selectAddress(val) {
|
|
|
+ this.selectPlace = val
|
|
|
+ this.mescroll.resetUpScroll() // 再刷新列表数据
|
|
|
+ console.log(val)
|
|
|
+ },
|
|
|
+ release() {
|
|
|
+ if (!this.hasLogin) {
|
|
|
+ this.isShowAlert = true;
|
|
|
+
|
|
|
+ } else {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: 'release'
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ downCallback() {
|
|
|
+ this.mescroll.resetUpScroll();
|
|
|
+ },
|
|
|
upCallback(page) {
|
|
|
- //联网加载数据
|
|
|
- let curTab = this.tabs[this.tabIndex]
|
|
|
- let keyword = curTab.name // 具体项目中,您可能取的是tab中的type,status等字段
|
|
|
- apiGoods(page.num, page.size, keyword).then(res => {
|
|
|
- //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
|
|
|
- this.mescroll.endSuccess(res.list.length);
|
|
|
- //设置列表数据
|
|
|
- if (page.num == 1) this.goods = []; //如果是第一页需手动制空列表
|
|
|
- this.goods = this.goods.concat(res.list); //追加新数据
|
|
|
- }).catch(() => {
|
|
|
- //联网失败, 结束加载
|
|
|
- this.mescroll.endErr();
|
|
|
+ uni.showLoading({
|
|
|
+ title: '数据加载中',
|
|
|
+ mask: true
|
|
|
+ })
|
|
|
+ console.log("this.selectPlace", this.selectPlace)
|
|
|
+ console.log("this.selectType", this.selectType)
|
|
|
+ let _obj = {
|
|
|
+
|
|
|
+ }
|
|
|
+ if (this.selectType == '关注') {
|
|
|
+ _obj = {
|
|
|
+ pageSize: page.size,
|
|
|
+ currentPage: page.num,
|
|
|
+ placeDelivery: this.selectPlace,
|
|
|
+ tranType: this.selectType,
|
|
|
+ userIdFollow: this.userInfo.id,
|
|
|
+ nowUserId: this.userInfo.id
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ _obj = {
|
|
|
+ pageSize: page.size,
|
|
|
+ currentPage: page.num,
|
|
|
+ placeDelivery: this.selectPlace,
|
|
|
+ tranType: this.selectType,
|
|
|
+ nowUserId: this.userInfo.id
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$api.doRequest('get', '/transactionExchangeInfo/selectTransactionExchangeInfo', _obj).then(res => {
|
|
|
+ console.log(res.data.data.records)
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ let curPageData = res.data.data.records;
|
|
|
+ let curPageLen = curPageData.length;
|
|
|
+ let totalPage = res.data.data.total;
|
|
|
+ if (page.num == 1) this.goods = [];
|
|
|
+ this.goods = this.goods.concat(curPageData);
|
|
|
+ console.log(curPageLen, totalPage)
|
|
|
+ this.mescroll.endByPage(curPageLen, totalPage);
|
|
|
+ for (let i = 0; i < this.goods.length; i++) {
|
|
|
+ this.goods[i].imgList = this.goods[i].urlImg.split(',')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ uni.hideLoading()
|
|
|
})
|
|
|
},
|
|
|
//点击空布局按钮的回调
|
|
@@ -149,8 +336,16 @@
|
|
|
},
|
|
|
|
|
|
// 切换菜单
|
|
|
- tabChange() {
|
|
|
+ tabChange(e) {
|
|
|
this.goods = [] // 先置空列表,显示加载进度
|
|
|
+
|
|
|
+
|
|
|
+ if (this.tabs[e].name == '全部') {
|
|
|
+ this.selectType = ''
|
|
|
+ } else {
|
|
|
+ this.selectType = this.tabs[e].name
|
|
|
+ }
|
|
|
+ console.log(this.selectType)
|
|
|
this.mescroll.resetUpScroll() // 再刷新列表数据
|
|
|
}
|
|
|
|
|
@@ -181,7 +376,7 @@
|
|
|
}
|
|
|
|
|
|
.top-warp {
|
|
|
- z-index: 9990;
|
|
|
+ z-index: 998;
|
|
|
position: fixed;
|
|
|
top: --window-top;
|
|
|
/* css变量 */
|
|
@@ -217,7 +412,6 @@
|
|
|
|
|
|
.head-img {
|
|
|
width: 72rpx;
|
|
|
- background-color: red;
|
|
|
border-radius: 8rpx;
|
|
|
margin-right: 22rpx;
|
|
|
}
|
|
@@ -257,10 +451,107 @@
|
|
|
}
|
|
|
|
|
|
.right {
|
|
|
-
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
border: 1px solid #CDCDCD;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .row2 {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ /* overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ width: 100%;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 3;
|
|
|
+ word-break: break-all; */
|
|
|
+ }
|
|
|
+
|
|
|
+ .row3 {
|
|
|
+ /* padding: 30rpx 30rpx 0 30rpx; */
|
|
|
+ margin-top: 18rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ /* justify-content: space-between; */
|
|
|
+ flex-wrap: wrap;
|
|
|
+ /* background: #bbb; */
|
|
|
+
|
|
|
+
|
|
|
+ .img {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 214rpx;
|
|
|
+ height: 214rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ background: lightblue;
|
|
|
+ list-style: none;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img:nth-of-type(3),
|
|
|
+ .img:nth-of-type(6),
|
|
|
+ .img:nth-of-type(9) {
|
|
|
+ margin-right: 0;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .row4 {
|
|
|
+ margin-top: 4rpx;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ color: #878C9C;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .case {
|
|
|
+ font-weight: 700;
|
|
|
+ margin-left: 6rpx;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .add {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 250rpx;
|
|
|
+ right: 32rpx;
|
|
|
+ background: #22C572;
|
|
|
+ z-index: 999;
|
|
|
+ width: 84rpx;
|
|
|
+ height: 84rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ margin: 20rpx 28rpx 20rpx 28rpx;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ width: 90rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.u-content {
|
|
|
+ padding-left: 170rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .place {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ left: 28rpx;
|
|
|
+ position: absolute;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
</style>
|