123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336 |
- <template>
- <view class="myFollwEdit">
- <u-navbar :is-back="true" back-icon-color="#2af" :border-bottom="true" back-text="返回"
- :back-text-style="{color:'#2af'}" :title="title">
- <!-- <view slot="right" class="edit" ><icon type="search" size="16"/>编辑</view> -->
- </u-navbar>
- <view class="menus">
- <view class="item" v-for="(item,index) in menus" :key="index" @click="showDifferentItem(item,index)"
- :class="{active:menuIndex==index}">{{item.modelName}}</view>
- </view>
- <scroll-view class="followList" :scroll-y="true" @scrolltolower="scrollToBottom" :show-scrollbar="true">
- <view class="item" v-for="(item,index) in followList" :key="index">
- <view class="select">
- <u-checkbox v-model="item.checked" shape="circle" @change="showCheccked(item)"></u-checkbox>
- </view>
- <view class="thumb">
- <image class="img" :src="item.thumb" mode="widthFix"></image>
- </view>
- <view class="info">
- <view class="label">
- <view class="labeltext">{{item.followName}}</view>
- <view class="follow" v-if="item.followed">已关注</view>
- </view>
- </view>
- </view>
- </scroll-view>
- <view class="nomore" v-if="flag">已全部加载完成</view>
- <view class="opt">
- <view class="clearList" @click="deleteListData('0')">一键清空</view>
- <view class="removeListItem" @click="deleteListData('1')">删除</view>
- </view>
- <u-toast ref="uToast" />
- </view>
- </template>
- <script>
- import {
- getFollowModelNumByUser,
- saveFollowModels
- } from '@/api/operation/basePortalModelFollowInfo'
- import {
- getPortalMyFollowMode
- } from '@/api/userCenter/myFollow'
- import UNavbar from '@/components/uni-nav-bar/uni-nav-bar.vue'
- export default {
- name: 'MyFollwEdit',
- components: {
- UNavbar
- },
- data() {
- return {
- title: '',
- menuIndex: 0,
- checkedList: [],
- idStrs: '',
- modelType: '',
- menus: [],
- count: 7,
- flag: false,
- followList: []
- }
- },
- onLoad() {
- uni.showLoading({
- title: this.$i18n.locale == 'zh' ? '加载中...' : 'Loading...'
- });
- this.title = this.$i18n.locale == 'zh' ? '我的关注' : 'My Follow';
- setTimeout(() => {
- uni.hideLoading();
- }, 100)
- },
- created() {
- this.getFollowModelNumByUser(this.$i18n.locale, this.token);
- },
- computed: {
- token() {
- return 'Bearer ' + uni.getStorageSync('Auth-Token');
- },
- userId() {
- return JSON.parse(uni.getStorageSync('user')).id;
- }
- },
- methods: {
- //模拟滚动加载更多
- scrollToBottom(e) {
- // if(this.count<30){
- // this.followList.push({
- // id:this.count++,
- // thumb:'../../../static/img/cooperationNetwork/equipments.png',
- // label:'日本大型海上风电项目',
- // follow:true,
- // country:'日本 东京',
- // stage:'招标阶段',
- // tags:['基础建设','清洁能源']
- // })
- // uni.showLoading({title: this.$i18n.locale == 'zh'? '加载中...': 'Loading...'});
- // setTimeout(()=>{uni.hideLoading();},300)
- // }else{
- // this.flag=true;
- // uni.hideLoading()
- // }
- },
- //展示不同的项目
- showDifferentItem(item, index) {
- if (this.menuIndex != index) {
- this.menuIndex = index;
- this.modelType = item.modelType;
- this.getPortalMyFollowModel()
- }
- },
- // 获取选项卡标题
- async getFollowModelNumByUser(lang, token) {
- let res = await getFollowModelNumByUser(lang, token);
- this.menus = res.data.modelTypeMap;
- if (res.data.modelTypeMap.length > 0) {
- this.modelType = res['data']['modelTypeMap'][0]['modelType'];
- this.getPortalMyFollowModel();
- }
- },
- // 获取不同项目的数据
- async getPortalMyFollowModel() {
- let params = {
- pageNo: this.pageNo,
- pageSize: this.pageSize,
- modelType: this.modelType,
- language: this.$i18n.locale
- }
- let res = await getPortalMyFollowMode(params);
- if (res.data.models) {
- this.followList = res.data.models;
- for (let i = 0; i < this.followList.length; i++) {
- this.$set(this.followList[i], 'thumb', 'https://m.geidcp.com/api/file/pub/' + this.followList[
- i]['bannerImg'][0]);
- this.$set(this.followList[i], 'followed', true)
- }
- } else this.followList = [];
- },
- // 批量取消关注
- async saveFollowModels() {
- let res = await saveFollowModels(this.idStrs, this.modelType, this.userId, 'unfollow', this.token);
- if (res.status == '200' && res.msg == 'ok') this.$refs.uToast.show({
- title: '已取消关注',
- type: 'success'
- })
- else this.$refs.uToast.show({
- title: '取消关注失败',
- type: 'error'
- })
- },
- // 获取已经选中的数据
- showCheccked(item) {
- if (this.checkedList.indexOf(item.id) == -1) {
- this.checkedList.push(item.id);
- } else {
- for (let i = 0; i < this.checkedList.length; i++) {
- if (this.checkedList[i] == item.id) this.checkedList.splice(i, 1);
- }
- }
- this.idStrs = this.checkedList.join(',');
- },
- //批量取消关注
- deleteListData(type) {
- if (type == '0') {
- this.$refs.uToast.show({
- title: '功能正在开发中',
- type: 'success'
- })
- return
- }
- if (this.idStrs) {
- this.saveFollowModels()
- } else {
- this.$refs.uToast.show({
- title: '请选择',
- type: 'error'
- })
- }
- },
- // 一键取消当前账户的所有关注
- }
- }
- </script>
- <style lang="scss" scoped>
- .myFollwEdit {
- background-color: #fefefe;
- width: 100%;
- height: 100%;
- position: absolute;
- .edit {
- margin-right: 30upx;
- color: #333;
- display: flex;
- align-items: center;
- position: relative;
- overflow: hidden;
- }
- .line-h {
- height: 1px;
- background-color: #eee;
- margin: 10upx 0;
- }
- .nomore {
- position: flex;
- bottom: 0;
- text-align: center;
- height: 50upx;
- line-height: 50upx;
- font-size: 24upx;
- color: #666;
- margin-top: 1%;
- }
- .menus {
- width: 100%;
- padding: 0 3%;
- height: 50upx;
- display: flex;
- justify-content: space-between;
- border-bottom: 1px solid #f0f0f0;
- margin: 30upx auto 0;
- .item {
- line-height: 50upx;
- &.active {
- border-bottom: 2px solid #007AFF;
- }
- }
- }
- .followList {
- display: flex;
- flex-direction: column;
- padding: 2% 3%;
- height: 82%;
- border-bottom: 1px solid #eee;
- .item {
- display: flex;
- margin: 20upx 0 0 0;
- .select {
- width: 36upx;
- height: 36upx;
- margin-right: 10upx;
- align-self: center;
- }
- .thumb {
- width: 200upx;
- height: 140upx;
- position: relative;
- overflow: hidden;
- margin-right: 3%;
- .img {
- width: 100%;
- display: block;
- margin: auto auto;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- }
- }
- .info {
- flex: 1;
- .label {
- font-size: 24upx;
- display: flex;
- .labeltext {
- flex: 1;
- }
- .follow {
- text-align: center;
- width: 100upx;
- height: 50upx;
- line-height: 50upx;
- background-color: #ff4422;
- color: #fff;
- border-radius: 50upx;
- margin-left: 10upx;
- }
- }
- .tags {
- .textitem {
- margin-right: 20upx;
- background-color: #0081FF;
- color: #fff;
- font-size: 12px;
- }
- }
- }
- }
- }
- .opt {
- width: 100%;
- padding: 0 10%;
- position: fixed;
- left: 0;
- right: 0;
- bottom: 20upx;
- height: 100upx;
- margin: 0 auto;
- background: #fefefe;
- display: flex;
- align-items: center;
- justify-content: space-between;
- .clearList,
- .removeListItem {
- margin-top: 52upx;
- width: 50%;
- line-height: 70upx;
- border: 1px solid #eee;
- padding: 0 40upx;
- border-radius: 0 0 80upx 80upx;
- text-align: center;
- }
- }
- }
- </style>
|