MeetMateApp/pages/index/peopleHome.vue

<template>
	<view class="page">
		<view class="topUser">
			<image :src="home_image" class="home_image" mode="aspectFill"></image>
			<view class="list">
				<view class="img" :class="selImg==index?'active':''" v-for="(item,index) in image_list" :key="index"
					@click="selPhoto(item,index)">
					<image :src="item" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="body">
			<view class="item">
				<view class="nickname">
					<text class="name">{{myinfo.nickname}}</text>
					<view class="sex1" v-if="myinfo.sex == 1">
						<image class="icon" mode="widthFix" src="../../static/home/icon_sex1.png"></image>
						<text>{{myinfo.age}}</text>
					</view>
					<view class="sex2" v-else>
						<image class="icon" mode="widthFix" src="../../static/home/icon_sex2.png"></image>
						<text>{{myinfo.age}}</text>
					</view>
					<image src="../../static/me/icon_vip.png" mode="widthFix" v-if="myinfo.is_vip > 0" />
				</view>
			</view>
			<view class="item">
				<view class="desc">{{myinfo.qianmin}}</view>
			</view>
			<view class="item">
				<view class="tag_list">
					<view class="tag2" v-for="(item,index) in tag_list" :key="index">
						<text>{{item}}</text>
					</view>

				</view>
			</view>
			<view class="item2">
				<view class="left">
					<image class="icon" src="../../static/me/ta_article_title.png" mode="widthFix">
					</image>
				</view>
				<view class="more" v-if="false">
					更多
					<image class="icon" src="../../static/me/arrow_right_gray.png" mode="widthFix">
					</image>
				</view>
			</view>

			<view class="list_info">
				<block v-for="(item,index) in myinfo.article_list" :key="index">
					<view class="item">
						<view class="avator">
							<image class="icon" :src="item.avator" mode="aspectFill">
							</image>
						</view>
						<view class="tit">
							<view class="list1">
								<view class="name">
									{{item.nickname}}
								</view>
								<view class="sex2" v-if="item.sex == 2">
									<image class="icon" src="../../static/icon/woman.png" mode="widthFix">
									</image>
									{{item.age}}
								</view>
								<view class="sex1" v-else>
									<image class="icon" src="../../static/icon/man.png" mode="widthFix">
									</image>
									{{item.age}}
								</view>
								<view class="xinzuo" v-if="item.xinzuo != ''">{{item.xinzuo}}</view>
							</view>
							<view class="time">{{item.dtime}}</view>
						</view>
						<view class="state">

						</view>
					</view>
					<view class="content">
						{{item.content}}
					</view>
					<view class="photo_list">
						<view class="img" v-for="(item2,index2) in toArr(item.images)" :key="index2"
							@click="previewOpen(item.images,index2)" v-if="item2 != ''">
							<image class="icon" :src="item2" mode="aspectFill"></image>
						</view>
					</view>
					<view class="desc">
						<view class="addr">{{item.city}}</view>
						<view class="img" @click="ZhanTA(item,index)" v-if="item.is_like < 1">
							<image class="icon" src="../../static/icon/zan.png" mode="widthFix"></image>
							{{item.num_like}}
						</view>
						<view class="img" v-else>
							<image class="icon" src="../../static/icon/like.png" mode="widthFix"></image>
							{{item.num_like}}
						</view>
						<view class="img" v-if="false">
							<image class="icon" src="../../static/icon/reply.png" mode="widthFix"></image>
							{{item.num_comment}}
						</view>

					</view>
				</block>

				<view class="blankHeight"></view>
			</view>

			<view class="item2" style="margin-top: 20rpx;">
				<view class="left">
					<image class="icon" src="../../static/me/ta_wish_title.png" mode="widthFix">
					</image>
				</view>
				<view class="more">
					更多
					<image class="icon" src="../../static/me/arrow_right_gray.png" mode="widthFix">
					</image>
				</view>
			</view>
			<view class="list_wish">
				<view class="item" v-for="(item,index) in list_wish">
					<view class="avator">
						<image class="icon" :src="item.image" mode="widthFix" />
					</view>
					<view class="left">
						<view class="name">{{item.name}}</view>
						<view class="jindu">
							<view class="bord">
								<view class="active" :style="'width:' + item.num_bfb + '%;'"></view>
							</view>
							<text class="tips">{{item.num_bfb}}%</text>
						</view>
					</view>
					<text class="right">
						<block v-if="item.status == 1">
							<view class="btn_submit" @click="onLinqu(item)">邀请助力</view>
						</block>
						<block v-if="item.status == 2">
							<view class="state">待发货</view>
						</block>
						<block v-if="item.status == 9">
							<view class="state">已发货</view>
						</block>

					</text>
				</view>
				<view class="blankHeight"></view>
			</view>
		</view>


		<view class="btn_submit" @click="chatTA()">
			<image class="icon" src="../../static/icon/icon_chat_white.png" mode="widthFix"></image>
			私聊
		</view>
		<view class="thread2"></view>
		<view class="thread2"></view>

		<previewImage ref="previewImage" :opacity="0.8" :circular="true" :imgs="imgs" :descs="descs"></previewImage>
	</view>
</template>

<script>
	import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue'; //引用插件
	export default {
		components: {
			previewImage
		},
		data() {
			return {
				title: '',
				userID: 0,
				selImg: 0,
				home_image: '',
				myinfo: {},
				tag_list: [],
				image_list: [],
				imgs: [],
				descs: [],
				list_wish: []
			}
		},
		onLoad(parms) {
			let self = this;
			this.userID = parms.uid || 1069;
		},
		onShow() {
			uni.$emit('check_update');
			this.loadData();
			this.loadWishData();
		},
		methods: {
			onLinqu(item) {
				uni.navigateTo({
					url: '/pages/my/wishHelp?id=' + item.myid,
				})
			},
			selPhoto(item, sel) {
				this.selImg = sel;
				this.home_image = this.image_list[sel];
			},
			chatTA() {
				// uni.navigateTo({
				// 	url: '/pages/chat/detail?userID=1&nickName=' + encodeURIComponent("昵称") +
				// 		"&conversationType=C2C"
				// });
				let conversationID = "";
				let conversationType = "C2C";
				let userID = "" + this.myinfo.userID;
				let nickName = this.myinfo.nickname;

				var jsonConversationID = encodeURIComponent(JSON.stringify(conversationID));
				var jsonConversationType = encodeURIComponent(JSON.stringify(conversationType));

				var jsonUserID = encodeURIComponent(JSON.stringify(userID));
				var jsonNickName = encodeURIComponent(JSON.stringify(nickName));

				uni.navigateTo({
					url: "/pages/chat/detail?userID=" + jsonUserID + "&nickName=" + jsonNickName +
						"&conversationID=" + jsonConversationID + "&conversationType=" + jsonConversationType
				})
			},
			toArr(imgs) {
				let arr = imgs.split("|");
				return arr;
			},
			previewOpen(imgs1, index) {
				this.imgs = imgs1.split("|");
				setTimeout(() => this.$refs.previewImage.open(index), 0)
				// 传入当前选中的图片地址或序号
				return; //如需测试和uni原生预览差别可注释这两行
			},
			loadWishData() {
				uni.request({
					url: this.$apiHost + '/Wish/getMyList',
					data: {
						uuid: getApp().globalData.uuid,
						userID: this.userID
					},
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						console.log("res", res.data)
						this.list_wish = res.data.list;
					}
				});
			},
			loadData() {
				// console.log({
				// 	uuid: getApp().globalData.uuid,
				// 	skey: getApp().globalData.skey
				// });
				uni.request({
					url: this.$apiHost + '/Member/getHomeInfo',
					data: {
						uuid: getApp().globalData.uuid,
						userID: this.userID
					},
					header: {
						"content-type": "application/json",
						'sign': getApp().globalData.headerSign
					},
					success: (res) => {
						console.log("----:", res.data);
						this.myinfo = res.data;
						if (res.data.tags != "") {
							this.tag_list = res.data.tags.split(",");
						}
						if (res.data.images != "") {
							this.image_list = res.data.images.split(",");
							this.home_image = this.image_list[0];
						} else {
							this.home_image = "../../static/home/avator.png";
						}
					},
					complete: (com) => {
						// uni.hideLoading();
					},
					fail: (e) => {
						console.log("----e:", e);
					}
				});
			},

			ZhanTA(item, index) {
				// this.list[index].is_like = 1;
				// this.list[index].num_like++;
				// return;
				let that = this;
				uni.request({
					url: this.$apiHost + '/Article/zanTA',
					data: {
						uuid: getApp().globalData.uuid,
						id: item.id
					},
					header: {
						"content-type": "application/json",
						'sign': getApp().globalData.headerSign
					},
					success: (res) => {
						console.log("----:", res.data);
						if (res.data.success == "yes") {
							that.myinfo.article_list[index].is_like = 1;
							that.myinfo.article_list[index].num_like++;
						}
					},
					complete: (com) => {
						// uni.hideLoading();
					},
					fail: (e) => {
						console.log("----e:", e);
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'peopleHome.scss';
</style>