xiangqin/pages/profile/zixunList.vue

<template>
	<view>
		<view class="" style="width: 690rpx;
background: #FFFFFF;
border-radius: 28rpx;margin: 0 auto 20rpx;padding: 24rpx 20rpx;box-sizing: border-box;margin-bottom: 20rpx;" @click="toinfo(item)" v-for="(item,index) in list" :key="index">
		<view class="content" style="">
			{{item.problem}}
		</view>
		<view class="u-flex u-row-between" style="margin-top: 20rpx;">
			<text style="font-size: 24rpx;color: #888888;">{{item.create_time}}</text>
			<view class="" style="width: 144rpx;
height: 52rpx;
border-radius: 26rpx;
border: 1px solid #979797;line-height: 52rpx;text-align: center;" @click.stop="delectItem(item)">
				删除
			</view>
		</view>
		</view>
		<u-empty
		v-if="list.length==0"
		        mode="list"
		        icon="http://cdn.uviewui.com/uview/empty/list.png"
		>
		</u-empty>
	</view>
</template>

<script>
	export default {
		onLoad() {
		this.getList()	
		},
		data() {
			return {
				list:[]
			}
		},
		methods: {
			toinfo(item){
				uni.navigateTo({
					url:'./zixunInfo?id='+item.id
				})
			},
			getList(){
					uni.$u.http.post('/api/index/emotion_list').then(res => {
							if(res.code==1){
								this.list=res.data
							}
					})
			},
			delectItem(item){
				var that=this
				uni.showModal({
					title: '提示',
					content: '确定要删除吗',
					success: function (res) {
						if (res.confirm) {
							uni.$u.http.post('/api/index/delete_emotion',{e_id:item.id}).then(res => {
								if(res.code==1){
									that.getList()	
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			}
		}
	}
</script>

<style>
page{
	padding-top: 30rpx;
background: #F3F3F3;
}
.content{
	                 /* height: 100px; 如果设置了高度，且高度超过文本显示行数，在第三行会正常出现省略号，但是三行之后的仍然正常显示*/
	                 /* 设置高度是行高的倍数，防止文本露出一半 */
	                 /* 旧版弹性盒 */
	                 display: -webkit-box;
	                 /* 弹性盒子元素垂直排列 */
	                 -webkit-box-orient: vertical;
	                 /* 控制要显示的行数 */
	                 -webkit-line-clamp: 3;
	                 overflow: hidden;

}

</style>