user-page.vue 9.3 KB
<template>
	<view class="container" v-if="userData.info[0].nickname">
		<view class="pagetopBj">
		</view>
		<view class="goback" @click="goBack">
		</view>
		<view class="topTitle">
			个人主页
		</view>
		<view class="userBox" style="background-color: #F7F8FA;" >
			<image :src="userData.info[0].avatar" mode="" class="userPageHead"></image>
			<view class="" style="display: flex;margin-left: 200rpx;justify-content: space-between;">
				<view class="">
					<view class="num">
						{{userData.info[0].guan_num}}
					</view>
					<view class="text">
						关注
					</view>
				</view>
				<view class="num">
					<view class="">
						{{userData.info[0].fen_num}}
					</view>
					<view class="text">
						粉丝
					</view>
				</view>
				<view class="attenBtn" v-if="attend==1" @click="attendClick">
					+关注
				</view>
				<view class="attenBtn" v-if="attend==0">
					已关注
				</view>
			</view>
			<view class="" style="display: flex;align-items: center;">
				<text class="userPageName">{{userData.info[0].nickname}}</text>
				<view class="dengji">
					<image src="../../static/image/zuanshi_icon_1@2x.png" mode="" style="width: 20rpx;height: 20rpx;margin-right: 10rpx;margin-top: 8rpx;"></image>
					<!-- {{Number(userData.info[0].grade_status)==0?'L0':Number(userData.info[0].grade_status)==1?'L1':Number(userData.info[0].grade_status)==2?'L2':Number(userData.info[0].grade_status)==3?'L3':Number(userData.info[0].grade_status)==4?'L4':'L5'}} -->
					{{userData.info[0].grade_status==0?'L0':userData.info[0].grade_status==1?'L1':userData.info[0].grade_status==2?'L2':userData.info[0].grade_status==3?'L3':userData.info[0].grade_status==4?'L4':'L5'}}
				</view>
			</view>
			<view class="userDesc" v-if="userData.info[0].content!==null">
				{{userData.info[0].content}}
			</view>
		</view>
		<view class="" style="display: flex; justify-content: space-between;padding: 46rpx 0 46rpx;position: relative;
    z-index: 99;background-color: #f7f8fa;
    margin-top: -10rpx;">
			<view class="evaluateBox">
				<view class="evaluateText">
					评价
				</view>
				<view class="evaluateText">
					({{userData.sum}})
				</view>
			</view>
			<view class="allText" style="display: flex;align-items: center;" @click="allMessage">
				全部
				<image src="/static/image/gengduo_icon_3@2x.png" mode=""></image>
			</view>
		</view>
		<view class="evaluateList" v-for="(item,index) in evaluateList" :key="index" v-if="index==0" @click="allMessage">
			<view class="listLift">
				<image :src="item.avatar" mode=""></image>
			</view>
			<view class="rightList">
				<view class="evaluateName">
					{{item.nickname}}
					<text v-if="item.ping_status==1" style="font-size: 28rpx; color: #ff834d;">好评</text>
					<text v-if="item.ping_status==-1" style="font-size: 28rpx; color: #ff834d;">差评</text>
					<text v-if="item.ping_status==0" style="font-size: 28rpx; color: #ff834d;">中评</text>
				</view>
				<view class="evaluateTime">
					{{item.createtime}}
				</view>
				<view class="evaluateName" style="margin-top: 24rpx;" v-if="item.content!==null">
					{{item.content}}
				</view>
			</view>
		</view>
		<view class="" style="padding-top: 42rpx;position: relative;z-index: 99;background-color: #f7f8fa;margin-top: -10rpx;">
			<view class="tabBox" style="background-color: #f7f8fa;">
				<view class="inv-h-w">
					<block v-for="(item,index) in tabList" :key="index">
						<view :class="['inv-h',tabIndex== index?'inv-h-se':'']" @click="tabchange(index)">{{item}}</view>
					</block>
				</view>
				<view class="" v-if="tabIndex == 0" style="display: flex; justify-content: space-between;flex-wrap: wrap;margin-top: 44rpx;">
					<view class="goodsBox" v-for="(item,index) in goodsList" :key="index" style="width: 330rpx; background: #fff; margin-bottom: 24rpx;padding-bottom: 24rpx;justify-content: space-between;position: relative;"
					 @click="goGoodDetail(item.goods_id)">
						<view class="goodsPic">
							<image :src="item.images[0]" mode="" class="goodImg"></image>
						</view>
						<view class="goodsDel">
							{{item.goods_name}}
						</view>
						<view class="goodsPrice">
							<text style="font-size: 24rpx;margin-right: -6rpx;">¥</text>
							{{item.price}}
						</view>
						<view class="userInfo">
							<view class="userLeft">
								<view class="userHead">
									<image :src="item.avatar" mode="" class="userHead"></image>
								</view>
								<view class="userName">
									{{item.nickname}}
								</view>
							</view>
							<view class="userRight">
								<image src="../../static/image/zuanshi_icon_1@2x.png" mode="" style="width: 20rpx;height: 20rpx;margin-right: 10rpx;"></image>
								<text style="margin-top: -4rpx;">{{item.grade_status==0?'L0':item.grade_status==1?'L1':item.grade_status==2?'L2':item.grade_status==3?'L3':item.grade_status==4?'L4':'L5'}}</text>
								
							</view>
						</view>
						<view class="addressMask">
							<image src="/static/image/dingwei_icon_1@2x.png" mode=""></image>
							<view class="maskAddress" style="max-width: 192rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
								{{item.address}}
							</view>
							<view class="maskAddress">
								{{item.dis.toFixed(1)}}km
							</view>
						</view>
					</view>

				</view>
				<view class="" v-if="tabIndex == 1" style="margin-top:21px;display:flex;align-items:center;flex-wrap:wrap;justify-content: space-between;">
					<view class="goodsBox" v-for="(item,index) in buyList" :key="index" style="width: 330rpx; background: #fff; margin-bottom: 24rpx;padding-bottom: 12px;position: relative;"
					 @click="goGoodDetail(item.id)">
						<view class="goodsPic">
							<image :src="item.images[0]" mode="" class="goodImg"></image>
						</view>
						<view class="goodsDel">
							{{item.need_name}}
						</view>
						<view class="goodsPrice">
							<text style="font-size: 24rpx;margin-right: -6rpx;">¥</text>
							{{item.price}}
						</view>
						<view class="userInfo">
							<view class="userLeft">
								<view class="userHead">
									<image :src="item.avatar" mode="" class="userHead"></image>
								</view>
								<view class="userName">
									{{item.nickname}}
								</view>
							</view>
							<view class="userRight">
								<image src="/static/image/zuanshi_icon_1@2x.png" mode="" style="width: 20rpx;height: 20rpx;margin-right: 10rpx;margin-top: 8rpx;"></image>
								{{item.grade_status==0?'L0':item.grade_status==1?'L1':item.grade_status==2?'L2':item.grade_status==3?'L3':item.grade_status==4?'L4':'L5'}}
							</view>
						</view>
						<view class="addressMask">
							<image src="/static/image/dingwei_icon_1@2x.png" mode=""></image>
							<view class="maskAddress" style="max-width: 192rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
								{{item.address}}
							</view>
							<view class="maskAddress">
								{{item.dis.toFixed(1)}}km
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from "../../utils/request.js"
	export default {
		onLoad(options) {
			this.id = options.id
			this.basicInfo()
			this.allPing()
			this.buy()
			this.buyNeed()
		},
		data() {
			return {
				id: '',
				attend: null, //关注
				pageNum: 1,
				userData: {},
				evaluateList: [],
				tabList: ['卖闲置', '求购'],
				tabIndex: 0,
				goodsList: [],
				buyList: [],

			}
		},
		created() {

		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: -1
				})
			},
			//关注
			attendClick() {
				request.get('/api/follow/addGuan', {
					guan_id: this.id
				}).then(res => {
					this.attend = 0
				}).catch(err => {

				})
			},
			//全部评价
			allMessage() {
				uni.navigateTo({
					url: '/pages/index/all-evaluate?id=' + this.id
				})
			},
			allPing() {
				request.get('/api/other/allPing', {
					id: this.id
				}).then(res => {
					this.evaluateList = res.data.info
				}).catch(err => {

				})
			},
			//基本信息
			basicInfo() {
				request.get('/api/other/mation', {
					id: this.id
				}).then(res => {
					this.userData = res.data
					this.attend = res.data.guan
				}).catch(err => {

				})
			},
			//卖闲置
			buy() {
				request.get('/api/other/xian', {
					rows: 10,
					pages: this.pageNum,
					user_id: this.id,
					lat2: uni.getStorageSync('lat'),
					lng2: uni.getStorageSync('lot')
				}).then(res => {
					this.goodsList = res.data.info.data
				}).catch(err => {

				})
			},
			//求购
			buyNeed() {
				request.get('/api/other/buy', {
					rows: 10,
					pages: this.pageNum,
					user_id: this.id,
					lat2: uni.getStorageSync('lat'),
					lng2: uni.getStorageSync('lot')
				}).then(res => {
					this.buyList = res.data.info.data
				}).catch(err => {

				})
			},
			//商品详情
			goGoodDetail(id) {
				if(this.tabIndex==1){
					uni.navigateTo({
						url: '/pages/index/good-details?id=' + id+'&lat='+uni.getStorageSync('lat')+'&lot='+uni.getStorageSync('lot')
					})
				}else{
					uni.navigateTo({
						url: '/pages/index/good-details?goos_id=' + id+'&lat='+uni.getStorageSync('lat')+'&lot='+uni.getStorageSync('lot')
					})
				}
					// uni.navigateTo({
					// 	url: '/pages/index/good-details?goos_id=' + id
					// })
			},
			//
			tabchange(index) {
				this.tabIndex=index
				if (index == 0) {
					this.buy()
				} else {
					this.buyNeed()
				}
			}
		}
	}
</script>

<style>
	@import url("/common/index.css");
	@import url("/common/user-page.css");
</style>