uni-app 61完善几个小问题

Posted 2021-10-27 2019ab

apply-list.vue

<template> 
	<view class="page">
		<!-- 导航栏 -->
		<free-nav-bar title="好友申请列表" showBack :showRight="false">
		</free-nav-bar>
		
		<free-list-item v-for="(item,index) in applyList" :key="index" :title="item.user.nickname ? item.user.nickname : item.user.username" :cover="item.user.avatar ? item.user.avatar : '/static/images/userpic.png'" :showRight="true" :showRightIcon="false">
			<free-main-button slot="right" v-if="item.status==='pending'" name="同意" @click='handle(item)'></free-main-button>
			<text slot="right" v-else class="text-muted font-sm">{{item|formatTitle}}</text>
		</free-list-item>
		<!-- 上拉加载 -->
		<view class="flex align-center justify-center py-4 bg-light" v-if="applyList.length >= 10">
			<text class="text-muted font">{{loadmore}}</text>
		</view>
	</view>
</template>

<script>
	import freeMainButton from '@/components/free-ui/free-main-button.vue';
	import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
	import freeListItem from '@/components/free-ui/free-list-item.vue';
	import freeDivider from '@/components/free-ui/free-divider.vue';
	import $H from '@/common/free-lib/request.js';
	import auth from '@/common/mixin/auth.js';
	import { mapState } from 'vuex';
	export default {
		mixins:[auth],
		components: {
			freeNavBar,
			freeMainButton,
			freeListItem,
			freeDivider
		},
		filters:{
			formatTitle(value){
				let obj = {
					agree:'已通过',
					refuse:'已拒绝',
					ignore:'已忽略'
				}
				return obj[value.status];
			}
		},
		computed:{
			...mapState({
				applyList:state=>state.user.apply.rows
			})
		},
		data() {
			return {
				form:{
					friend_id:0,
					nickname:"",
					lookme:1,
					lookhim:1
				},
				id:0,
				page:1,
				loadmore:'上拉加载更多',// 没有更多了，加载中...
			}
		},
		// 监听下拉刷新
		onPullDownRefresh() {
			this.page = 1;
			this.$store.dispatch('getApply',this.page).then(res=>{
				uni.showToast({
					title:'刷新成功',
					icon:'none'
				})
				uni.stopPullDownRefresh()
			})
		},
		onLoad(e) {
			
		},
		// 监听触底事件
		onReachBottom() {
			if(this.loadmore !== '上拉加载更多'){
				return;
			}
			this.loadmore = '加载中...';
			this.page = this.page+1;
			this.$store.dispatch('getApply',this.page).then(res=>{
				console.log(res)
				
				this.loadmore = this.applyList.length == this.page*10 ? '上拉加载更多' : '没有更多了';
			}).catch(err=>{
				this.page = this.page-1;
				this.loadmore = '上拉加载更多';
			})
		},
		onShow() {
			if(this.loadmore !== '上拉加载更多'){
				return;
			}
			this.loadmore = '加载中...';
			this.page = this.page+1;
			this.$store.dispatch('getApply',this.page).then(res=>{
				console.log(res)
				
				this.loadmore = this.applyList.length == this.page*10 ? '上拉加载更多' : '没有更多了';
			}).catch(err=>{
				this.page = this.page-1;
				this.loadmore = '上拉加载更多';
			})
		},
		methods: {
			handle(item){
				uni.navigateTo({
					url:'../add-friend/add-friend?id='+item.id,
				})
			}
		}
	}
</script>

<style>

</style>

add-friend.vue

<template>
	<view class="page">
		<!-- 导航栏 -->
		<free-nav-bar title="添加好友" showBack :showRight="false">
		</free-nav-bar>
		<view class="flex flex-column">
			<text class="font-sm text-secondary px-3 py-2">备注名</text>
			<input type="text" class="font-md border bg-white px-3" placeholder="请填写备注名" style="height: 100rpx;" v-model="form.nickname"/>
		</view>
		<free-divider></free-divider>
		<free-list-item title="不让他看我" :showLeftIcon="false"
		showRight :showRightIcon="false">
			<switch slot="right" :checked="!!form.lookme" color="#08C060" @change="form.lookme = form.lookme ? 0 : 1"/>
		</free-list-item>
		<free-list-item title="不看他" :showLeftIcon="false"
		showRight :showRightIcon="false">
			<switch slot="right" :checked="!!form.lookhim" color="#08C060" @change="form.lookhim = form.lookhim ? 0 : 1"/>
		</free-list-item>
		<free-divider></free-divider>
		<view class="py-3 flex align-center justify-center bg-white"
		hover-class="bg-light" @click="submit">
			<text class="font-md text-primary">{{ id > 0 ? '同意' : '点击添加' }}</text>
		</view>
	</view>
</template>

<script>
	import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
	import freeListItem from '@/components/free-ui/free-list-item.vue';
	import freeDivider from '@/components/free-ui/free-divider.vue';
	import $H from '@/common/free-lib/request.js';
	import auth from '@/common/mixin/auth.js';
	export default {
		mixins:[auth],
		components: {
			freeNavBar,
			freeListItem,
			freeDivider
		},
		data() {
			return {
				form:{
					friend_id:0,
					nickname:"",
					lookme:1,
					lookhim:1
				},
				id:0
			}
		},
		onLoad(e) {
			if(e.params){
				this.form = JSON.parse(e.params)
			}
			if(e.id){
				this.id = e.id
			}
		},
		methods: {
			submit(){
				// 添加好友
				if(this.id == 0){
					return $H.post('/apply/addfriend',this.form).then(res=>{
						uni.showToast({
							title: '申请成功',
							icon: 'none'
						});
						uni.navigateBack({
							delta: 1
						});
					})
				}
				// 处理好友申请
				$H.post('/apply/handle/'+this.id,{
					...this.form,
					status:"agree"
				}).then(res=>{
					uni.showToast({ title: '处理成功', icon: 'none' });
					uni.navigateBack({ delta: 1 });
					this.$store.dispatch('getMailList')
				})
			}
		}
	}
</script>

<style>

</style>

感谢观看，我们下次见