xiangqin/pages/profile/mydongtai.vue

<template>
	<view>
		<image src="../../static/bg.png" mode="" class="bg"></image>
		<view class="nodongtai u-flex-col u-col-center" v-if="dongtaiList.length==0">
			<image src="../../static/profile/nodongtai.png" mode=""></image>
			<text class="tips">暂无动态，快去发一条吧！</text>
			<view class="publish" @click="tofabu">
				发布动态
			</view>
		</view>
		<view class="content" v-else>
			<view class="item" v-for="(item,index) in dongtaiList" :key="index" @click="itemClick(item)" >
				<view class="top1 u-flex u-row-between">
					<view class="topleft u-flex">
						<image :src="info.headimg" mode=""></image>
						<view class="">
							<view class="name">
								{{item.nickame}}
							</view>
							<view class="area">
								{{item.city?item.city+'·':''}}{{item.age?item.age+'岁':''}}
							</view>
						</view>
					</view>
					<view class="" style="color: #FFB422;font-size: 24rpx;" v-if="item.status==1">
						审核中
					</view>
					<view class="" style="color: #FF7676;font-size: 24rpx;" v-if="item.status==3">
						审核失败
					</view>
					<view class="" style="color: #6BC159;font-size: 24rpx;" v-if="item.status==2">
						已通过
					</view>
				</view>
				<view class="iteminfo">
					{{item.content}}
				</view>
				<view class="imaglist u-flex" v-if="item.suffix=='png'||item.suffix=='jpg'">
					<view class="imgbox" v-for="(ite,ind) in item.show_images" :key="ind" >
						<image :src="ite" mode=""  @click="lookImage(ite)"></image>
					</view>
				</view>
				<video :src="item.show_images[0]" objectFit="fill" class="video" v-if="item.suffix=='mp4'"></video>
				<view class="bottom u-flex u-row-right" v-if="item.status!=2">
					<view class="" @click.stop="edit(item)" style="padding: 4rpx 20rpx;border-radius: 4px;border: 1px solid #979797;font-size: 28rpx;margin-right: 24rpx;">
						编辑
					</view>
					<view class="" @click.stop="delectItem(item,index)"  style="padding: 4rpx 20rpx;border-radius: 4px;border: 1px solid #FF7676;font-size: 28rpx;color: #FF2828;">
						删除
					</view>
					<!-- <view class="u-flex u-row-left">
						<view class="zan">
							<image src="../../static/forum/5@2x.png" mode=""></image>
							<text>{{item.give}}</text>
						</view>
						<view class="talk">
							<image src="../../static/forum/3@2x.png" mode=""></image>
							<text>{{item.comment}}</text>
						</view>
					</view>
					<image src="../../static/forum/more.png" mode="" style="width: 36rpx;height: 36rpx;" @click.stop="delectItem(index)"></image> -->
				</view>
			</view>
		</view>
		<image src="../../static/forum/4@2x.png" mode="" @click="tofabu" class="fa"></image>
		<u-action-sheet :actions="list" cancelText='取消' @close='close' @select='select' round='20'  :show="show"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		onShow() {
				this.getList()
		},
		data() {
			return {
				info:JSON.parse(uni.getStorageSync('userInfo')),
				page:1,
				dongtaiList:[],
				current:null,
				show:false,
				list: [
								{
									name:'删除',
									color:'#FF2F2F',
									fontSize:'20'
								},
								]
			}
		},
		methods: {
			edit(item){
					uni.navigateTo({
						url:'/pages/forum/publish?item='+JSON.stringify(item)
					})
			},
			getList(){
				uni.$u.http.post('/api/user/dynamic',{page:this.page}).then(res => {
					if(this.page==1){
						this.dongtaiList=res.data
					}else{
						this.dongtaiList=[...this.dongtaiList,...res.data]
					}
				})
			},
			delectItem(item,index){
					// this.current=index
					// this.show=true
					var that=this
					uni.showModal({
						title: '提示',
						content: '确定要删除该动态吗',
						success: function (res) {
							if (res.confirm) {
								uni.$u.http.post('/api/user/deldynbamic',{id:item.id}).then(res => {
									if(res.code==1){
										that.dongtaiList.splice(index,1)
									}
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});

					
			},
			close(){
				this.show=false
			},
			select(e){
				// console.log(e)
				this.show=false
			},
			itemClick(item){
					// uni.navigateTo({
					// 	url: '../forum/forumInfo'
					// });
					if(item.status==2){
						uni.navigateTo({
							url: '../forum/forumInfo?id='+item.id
						});
					}
					
			},
			tofabu(){
				uni.navigateTo({
					url:'../forum/publish'
				})
			},
			lookImage(ite) {
				let imgsArray = [];
				imgsArray[0] = ite;
				uni.previewImage({
					current: 0,
					urls: imgsArray,
			
				});
			},
		}
	}
</script>

<style lang="scss">
	.fa{
		width: 100rpx;
		height: 102rpx;
		position: fixed;
		bottom: 100rpx;
		right: 30rpx;
	}
	.bottom{
		color: #999999;
		font-size: 24rpx;
		.zan{
			margin-right: 40rpx;
			// font-weight: 400;
			// background: linear-gradient(180deg, #FFAEAE 0%, #A890FE 100%);
			// -webkit-background-clip: text;
			// -webkit-text-fill-color: transparent;
			image{
				vertical-align: middle;
				width: 36rpx;
				height: 36rpx;
				margin-right: 4rpx;
			}
		}
		.talk{
			image{
				vertical-align: middle;
				width: 36rpx;
				height: 36rpx;
				margin-right: 4rpx;
			}
		}
	}
	.imaglist{
		flex-wrap: wrap;
		.imgbox{
			margin-right: 15rpx;
			max-width: 220rpx;
			max-height: 220rpx;
			margin-bottom: 20rpx;
			image{
				max-width: 220rpx;
				max-height: 220rpx;
				border-radius: 20px;
			}
		}
		.imgbox:nth-child(3n+3) {
			margin-right: 0;
		}
		
		
	}
	.iteminfo{
		margin: 22rpx 0 20rpx;
		font-size: 28rpx;
		color: #222222;
	}
	.content{
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		.item{
			padding: 36rpx 30rpx;
			border-bottom: 2rpx solid #F2F2F2;
			.video{
				margin-bottom: 42rpx;
				width: 690rpx;
				height: 320rpx;
				border-radius: 20rpx;
			}
			.topleft{
				image{
					width: 76rpx;
					height: 76rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}
				.name{
					font-size: 28rpx;
					color: #222222;
					font-weight: 600;
					image{
						margin-left: 8rpx;
						width: 28rpx;
						height: 28rpx;
					}
				}
				.area{
					font-size: 20rpx;
					color: #999999;
				}
			}
			.topright{
				width: 108rpx;
				height: 56rpx;
				text-align: center;
				line-height:  56rpx;
				border-radius: 28rpx;
				border: 3rpx solid #C7A6CE;
				font-weight: 400;
				color: #999999;
				background: linear-gradient(180deg, #FFAEAE 0%, #A890FE 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
	}
	.publish{
		
		margin:0 auto;
		width: 550rpx;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		background: linear-gradient(270deg, #A890FE 0%, #FFAEAE 100%);
		border-radius: 52rpx;
		font-size: 36rpx;
		color: #fff;
		
	}
.nodongtai{
	position: fixed;
	top: 244rpx;
	left: 50%;
	transform: translateX(-50%);
	image{
		width: 370rpx;
		height: 260rpx;
	}
	.tips{
		font-size: 28rpx;
		margin: 148rpx 0 108rpx;
	}
}
</style>