200 lines
4.5 KiB
Vue
200 lines
4.5 KiB
Vue
<template>
|
||
<view class="page">
|
||
<!-- <view class="search white">
|
||
<u-search placeholder="请输入文章标题" @input="handleSearch" v-model="keyword" :show-action="false"></u-search>
|
||
</view> -->
|
||
<view class="box p-row-2 m-t-2">
|
||
<view class="flex-col b-r-8 white p-32 m-t-2 p-t-0" >
|
||
<view class="flex-row m-t-32 flex-ali-center" v-for="(item,index) in list" :key="index"
|
||
@click="changeSelect(index)">
|
||
<view style="width: 40rpx;height: 40rpx;" v-if="item.select">
|
||
<u-icon name="checkmark-circle-fill" color="#6ACDBB" size="40"></u-icon>
|
||
</view>
|
||
<view class="select" v-else></view>
|
||
<!-- <view class="m-l-32">
|
||
<u-image width="80rpx" height="80rpx" :src="item.cover">
|
||
<u-loading slot="loading"></u-loading>
|
||
</u-image>
|
||
</view> -->
|
||
<view class="flex-col m-l-2 flex-ali-center">
|
||
<view class="flex-row">
|
||
<d-text :text="item.title" className="content-c fs-32"></d-text>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="flex-row flex-ali-center" v-if="item.tags&&item.tags.length>0">
|
||
<view class="m-r08" v-for="(it,idx) in item.tags" :key="idx">
|
||
<u-tag :text="it" size="mini" border-color="rgba(41,121,255,0.08)"
|
||
bg-color="rgba(41,121,255,0.08)" color="#6ACDBB" />
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="button">
|
||
<u-button :throttle-time="0" shape="circle" @click="submit" :ripple="true"
|
||
:disabled="getSelect==0">{{`确定（${getSelect}）`}}</u-button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { doctorArticleList } from "@/api/all.js";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
male: this.$male,
|
||
girl: this.$girl,
|
||
keyword: '',
|
||
navbarHeight: this.$navbarHeight,
|
||
statusBarHeight: this.$statusBarHeight,
|
||
list: [],
|
||
page: 1,
|
||
loading: true,
|
||
loading2: false,
|
||
status: "loading",
|
||
loadText: {
|
||
loadmore: "轻轻上拉",
|
||
loading: "努力加载中",
|
||
nomore: "已加载全部",
|
||
},
|
||
noMore: false,
|
||
};
|
||
},
|
||
computed: {
|
||
getSelect() {
|
||
return this.list.reduce((co, item) => {
|
||
if (item['select']) co++
|
||
return co
|
||
}, 0)
|
||
}
|
||
},
|
||
onShow() {
|
||
this.init();
|
||
},
|
||
onReachBottom() {
|
||
if (this.noMore) {
|
||
this.$toast("数据已全部加载");
|
||
return;
|
||
}
|
||
this.page++;
|
||
this.getList();
|
||
},
|
||
methods: {
|
||
handleSearch() {
|
||
this.page = 1
|
||
this.getList()
|
||
},
|
||
init() {
|
||
this.list = [];
|
||
this.page = 1;
|
||
this.keyword = '';
|
||
this.loading = true;
|
||
this.getList(true);
|
||
},
|
||
getList(is_stop = false) {
|
||
if (this.loading2) {
|
||
return;
|
||
}
|
||
this.loading2 = true;
|
||
doctorArticleList({
|
||
page: this.page,
|
||
keyword: this.keyword
|
||
})
|
||
.then((res) => {
|
||
if (res.errcode == 0) {
|
||
this.list = this.page === 1 ? res.data : [...this.list, ...res.data];
|
||
this.noMore = res.data.length < 20;
|
||
if (this.page >= this.totalPage) {
|
||
this.status = "nomore";
|
||
} else {
|
||
this.status = "loadmore";
|
||
}
|
||
this.$nextTick(() => {
|
||
this.loading = false;
|
||
is_stop && uni.stopPullDownRefresh();
|
||
});
|
||
} else {
|
||
this.$toast(res.msg);
|
||
is_stop && uni.stopPullDownRefresh();
|
||
this.loading = false;
|
||
}
|
||
})
|
||
.finally(() => {
|
||
this.loading2 = false;
|
||
});
|
||
},
|
||
changeSelect(index) {
|
||
const current = this.list[index]
|
||
current.select = !current.select
|
||
this.list.splice(index, 1, current)
|
||
},
|
||
submit() {
|
||
uni.navigateBack({ delta: 1 })
|
||
const list = this.list.filter(item => item.select)
|
||
if (list.length < 0) {
|
||
uni.showToast({
|
||
title: '请选择发送的文章',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
return
|
||
}
|
||
if (list.length > 1) {
|
||
uni.showToast({
|
||
title: '只能选择一篇文章',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
return
|
||
}
|
||
uni.setStorageSync('articleList', list)
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background-color: #eeeeef;
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
.select {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
border: 2rpx solid #E8E9EB;
|
||
border-radius: 44rpx;
|
||
}
|
||
|
||
.search {
|
||
position: relative;
|
||
z-index: 982;
|
||
padding: 16rpx 32rpx;
|
||
}
|
||
|
||
.box {
|
||
position: relative;
|
||
z-index: 982;
|
||
}
|
||
|
||
.button {
|
||
position: fixed;
|
||
bottom: env(safe-area-inset-bottom);
|
||
left: 0;
|
||
width: 750rpx;
|
||
height: 110rpx;
|
||
background: #FFFFFF;
|
||
border-top: 2rpx solid #F2F3F5;
|
||
padding: 12rpx 32rpx;
|
||
box-sizing: border-box;
|
||
z-index: 999;
|
||
|
||
::v-deep button {
|
||
z-index: 999;
|
||
background: #6ACDBB;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
</style>
|