yixiang/pages/mine/index.vue

<template>
	<view class="content">
		<view class="top_bg">
			<image :src="user.backgroud_image || default_bg" mode="aspectFill" class="bg_img" @click="show_bg = true"></image>
			<view class="bg-click" @click="show_bg = true"></view>
			<u-navbar title=" " @rightClick="tosetting" bgColor="rgba(0,0,0,0)" placeholder :fixed="true"
				:autoBack="true">
				<view style="display: none;" slot="left"></view>
				<view class="u-nav-slot" slot="right">
					<image src="../../static/images/setting.png" mode="aspectFill"></image>
				</view>
			</u-navbar>
			<view class="user">
				<view class="user-top hflex acenter jbetween">
					<view class="name vflex">
						<view class="hflex aend" v-if="user.id" @click.stop="touserinfo">
							<text>{{user.username || '用户'}}</text>
							<text>LV{{user.level}}</text>
							<image src="../../static/images/vip.png" mode="aspectFill" v-if="user.is_vip != 0"></image>
						</view>
						<view v-else @click="tologin">
							<view class="intro" style="font-size: 30rpx;font-weight: bold;color: #FFF;">去登陆</view>
						</view>
					</view>
					<image :src="user.avatar || default_avatar" mode="aspectFill" class="user-avatar"
						@click.stop="touserinfo"></image>
				</view>
				<view class="hflex acenter imgs">
					<image :src="user.shoot_badge" mode="aspectFill" v-if="user.shoot_badge" @click="topaihang(0)">
					</image>
					<image :src="user.post_badge" mode="aspectFill" v-if="user.post_badge" @click="topaihang(0)">
					</image>
					<image :src="user.like_badge" mode="aspectFill" v-if="user.like_badge" @click="topaihang(1)">
					</image>
					<image :src="user.boutique_post_badge" mode="aspectFill" v-if="user.boutique_post_badge"
						@click="topaihang(0)"></image>
				</view>
				<view class="intro">{{user.introduction}}</view>
				<view class="hflex acenter jbetween user-bottom">
					<view class="bottom-left hflex acenter">
						<view class="vflex bottom-item" @click="toguanzhu('1')">
							<text>{{user.follow_count || 0}}</text>
							<text>已关注</text>
						</view>
						<view class="vflex bottom-item" @click="toguanzhu('2')">
							<text>{{user.fans_count || 0}}</text>
							<text>被关注</text>
						</view>
						<view class="vflex bottom-item" @click="tocollect">
							<text>{{user.collect_count || 0}}</text>
							<text>收藏</text>
						</view>
					</view>
					<view class="bottom-right hflex acenter" @click="tovip">
						<image src="../../static/images/sign.png" mode="aspectFill" class="sign" v-if="is_sign == 0"></image>
						<text class="text">积分待领取</text>
						<u-icon name="arrow-right" color="#ffffff" size="14"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="vip hflex acenter jbetween" @click="tovip">
				<view class="vflex jbetween left">
					<view class="hflex acenter">
						<image src="../../static/images/vip_bg1.png" mode="aspectFill"></image>
						<text class="vip-text" :style="user.is_vip == 0 ? 'color: #FFEDC1' : ''">忆象会员</text>
						<text class="vip-time" v-if="user.vip_time">{{user.vip_expired_at}}到期</text>
					</view>
					<text>会员福利享不断</text>
				</view>
				<view class="btn" v-if="user.is_vip == 0">立即开通</view>
				<view class="btn" v-else>去升级</view>
			</view>
			<view class="tabs hflex acenter jbetween fwrap">
				<view class="tabs-item vflex acenter jcenter" @click="toyouhui">
					<image src="../../static/images/icon1.png" mode="aspectFill"></image>
					<text>优惠券</text>
				</view>
				<view class="tabs-item vflex acenter jcenter" @click="tojifen">
					<image src="../../static/images/icon2.png" mode="aspectFill"></image>
					<text>积分钱包</text>
				</view>
				<view class="tabs-item vflex acenter jcenter" @click="tozuji">
					<image src="../../static/images/icon3.png" mode="aspectFill"></image>
					<text>我的足迹</text>
				</view>
				<view class="tabs-item vflex acenter jcenter" @click="toqiandao">
					<image src="../../static/images/icon4.png" mode="aspectFill"></image>
					<text>签到奖励</text>
				</view>
				<view class="tabs-item vflex acenter jcenter" @click="toyuyue">
					<image src="../../static/images/icon5.png" mode="aspectFill"></image>
					<text>预约拍摄</text>
				</view>
				<view class="tabs-item vflex acenter jcenter" @click="tozulin">
					<image src="../../static/images/icon6.png" mode="aspectFill"></image>
					<text>设备租赁</text>
				</view>
				<view class="tabs-item vflex acenter jcenter" @click="tovideo">
					<image src="../../static/images/icon7.png" mode="aspectFill"></image>
					<text>视频管理</text>
				</view>
				<view class="tabs-item vflex acenter jcenter" @click="toaddress">
					<image src="../../static/images/icon8.png" mode="aspectFill"></image>
					<text>地址管理</text>
				</view>
				<view class="tabs-item vflex acenter jcenter" @click="toinvite">
					<image src="../../static/images/icon9.png" mode="aspectFill"></image>
					<text>邀请好友</text>
				</view>
				<view class="tabs-item vflex acenter jcenter" @click="toadd">
					<image src="../../static/images/icon10.png" mode="aspectFill"></image>
					<text>加入忆象</text>
				</view>
				<view class="tabs-item vflex acenter jcenter" @click="todrafts">
					<image src="../../static/images/icon11.png" mode="aspectFill"></image>
					<text>草稿箱</text>
				</view>
				<view class="tabs-item vflex acenter jcenter" @click="tochangjian">
					<image src="../../static/images/icon12.png" mode="aspectFill"></image>
					<text>常见问题</text>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="menu hflex acenter">
				<view class="menu-item" :class="active == index ? 'active-item' : ''" v-for="(item,index) in menu"
					:key="index" @click="tochangemenu(index)">
					<text>{{item.name}}</text>
				</view>
			</view>
			<view v-if="list.length>0 && active == 0">
				<list-info :data="item" v-for="(item,index) in list" :key="index" @del="del"></list-info>
			</view>
			<view v-if="list.length>0 && active > 0">
				<list-info :type="menu[active].id" :data="item" v-for="(item,index) in list" :key="index" @del="del"></list-info>
			</view>
			<view v-if="list.length == 0" class="empty">
				<u-empty mode="data"></u-empty>
			</view>
		</view>
		<u-popup :show="show_bg" @close="toclose" mode="bottom" :round="14">
			<view class="popu">
				<view class="top hflex acenter jbetween">
					<text>选择背景图</text>
					<text @click="tochangebg">完成</text>
				</view>
				<view class="bg-list hflex acenter">
					<view class="bg-item" v-for="(item,index) in bg_list" :key="index" @click="selectbg(index)">
						<image :src="item" mode="aspectFill" class="item-img"></image>
						<image src="../../static/images/select.png" mode="aspectFill" class="item-icon"
							v-if="bg_active == index"></image>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	import listInfo from '@/components/list-info/index.vue'
	export default {
		components: {
			listInfo
		},
		data() {
			return {
				default_avatar: require('@/static/logo.png'),
				default_bg: require('../../static/images/vip_bg.png'),
				bg_list: [],
				show_bg: false,
				bg_active: -1,
				user: {},
				active: 0,
				list: [],
				menu: [{
						id: 'all',
						name: '全部'
					},
					{
						id: 'post',
						name: '论坛'
					},
					{
						id: 'video',
						name: '视频'
					},
					{
						id: 'article',
						name: '文章'
					},
					{
						id: 'info',
						name: '资讯'
					},
				],
				page: 1,
				last_page: 1,
				is_sign: 0,
			}
		},
		onLoad() {

		},
		onShow() {
			this.getbg()
			this.page = 1
			this.list = []
			this.getuser()
			this.getsign()
			// this.getlist()
		},
		onReachBottom() {
			if (this.page < this.last_page) {
				this.page++
				this.getlist()
			} else {
				uni.$u.toast('已经到底了')
				return
			}
		},
		methods: {
			getsign() {
				var that = this
				$api.req({
					url: 'sign/is-sign'
				}, function(res) {
					that.is_sign = res.data
				})
			},
			topaihang(index) {
				uni.navigateTo({
					url: '/pageC/paihang'
				})
			},
			toqiandao() {
				uni.navigateTo({
					url: '/pageC/calendar'
				})
			},
			tovip() {
				uni.navigateTo({
					url: '/pageC/vip'
				})
			},
			tologin() {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			},
			todrafts() {
				uni.navigateTo({
					url: '/pageC/drafts'
				})
			},
			toadd() {
				uni.navigateTo({
					url: '/pageC/zhiwei-list'
				})
			},
			tochangjian() {
				uni.navigateTo({
					url: '/pageC/changjian-list'
				})
			},
			tozulin() {
				uni.navigateTo({
					url: '/pageB/zulin'
				})
			},
			toyuyue() {
				uni.navigateTo({
					url: '/pageB/yuyue-capture'
				})
			},
			toaddress() {
				uni.navigateTo({
					url: '/pageC/address-list'
				})
			},
			tovideo() {
				uni.navigateTo({
					url: '/pageC/video-list'
				})
			},
			tozuji() {
				uni.navigateTo({
					url: '/pageC/zuji-list'
				})
			},
			tojifen() {
				uni.navigateTo({
					url: '/pageC/jifen-qianbao'
				})
			},
			toyouhui() {
				uni.navigateTo({
					url: '/pageC/youhuiquan'
				})
			},
			tocollect() {
				uni.navigateTo({
					url: '/pageC/collect-list'
				})
			},
			toguanzhu(type) {
				uni.navigateTo({
					url: '/pageC/guanzhu-list?type=' + type
				})
			},
			touserinfo() {
				uni.navigateTo({
					url: '/pageC/userinfo'
				})
			},
			selectbg(index) {
				this.bg_active = index
			},
			tochangebg() {
				this.mine_bg = this.bg_list[this.bg_active]
				var _this = this
				$api.req({
					url: 'user',
					method: 'PUT',
					data: {
						backgroud_image: this.mine_bg
					}
				}, function(res) {
					$api.info(res.msg)
					_this.toclose()
					setTimeout(() => {
						_this.getuser()
					}, 1000)
				})
			},
			del(e) {
				console.log(e,'---------');
				this.page = 1
				this.list = []
				this.getlist()
			},
			toclose() {
				this.show_bg = false
			},
			getbg() {
				var that = this
				$api.req({
					url: 'config',
					data: {
						module: 'user'
					}
				}, function(res) {
					that.bg_list = res.data.backgroud_images
				})
				
			},
			toinvite() {
				uni.navigateTo({
					url: '/pageC/invite'
				})
			},
			getlist() {
				var that = this
				$api.req({
					url: 'summary',
					data: {
						page: that.page,
						limit: 10,
						is_page: 1,
						type: that.active == 0 ? 'all' : 'single',
						source_type: that.menu[that.active].id,
						author_id: that.user.id
					}
				}, function(res) {
					that.list = that.list.concat(res.data.list)
					that.last_page = res.data.last_page
				})
			},
			tochangemenu(index) {
				this.active = index
				this.page = 1
				this.list = []
				this.getlist()
			},
			tosetting() {
				uni.navigateTo({
					url: '/pageC/setting'
				})
			},
			getuser() {
				var _this = this
				$api.req({
					url: 'user/info',
					method: 'GET'
				}, function(res) {
					if (res.code == 10000) {
						_this.user = res.data
						_this.getlist()
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.content::v-deep {
		background: unset;

		.popu {
			background: #FFFFFF;
			border-radius: 28rpx 28rpx 0rpx 0rpx;
			padding: 38rpx 28rpx;

			.top {
				width: 100%;

				text:first-child {
					font-size: 36rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					color: #333333;
				}

				text:last-child {
					font-size: 32rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}

			.bg-list {
				width: 100%;
				overflow: auto;
				margin: 36rpx 0 0;

				.bg-item {
					width: 248rpx;
					height: 248rpx;
					margin: 0 10rpx 0 0;
					position: relative;

					.item-img {
						width: 248rpx;
						height: 100%;
					}

					.item-icon {
						position: absolute;
						width: 32rpx;
						height: 32rpx;
						top: 12rpx;
						right: 12rpx;
					}
				}
			}
		}

		.list {
			width: 100%;
			background: #F4F4F4;
			padding: 20rpx 0;

			.menu {
				background: #fff;
				box-sizing: border-box;
				padding: 28rpx;

				.menu-item {
					width: 96rpx;
					height: 56rpx;
					background: #E9E9E9;
					border-radius: 36rpx;
					margin: 0 20rpx 0 0;
					text-align: center;

					text {
						font-size: 26rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						color: #444444;
						line-height: 56rpx;

					}
				}

				.active-item {
					background: #00B0B0;

					text {
						color: #FFFFFF !important;
					}
				}
			}

			.empty {
				background: #FFF;
				padding: 40rpx 0;
			}
		}

		.box {
			// margin: 30rpx 0 0;
			box-sizing: border-box;
			padding: 28rpx;
			width: 100%;
			background: #FFFFFF;
			border-radius: 28rpx 28rpx 0rpx 0rpx;

			.vip {
				width: 694rpx;
				height: 148rpx;
				background: url('../../static/images/vip_bg.png') no-repeat;
				background-size: 100%;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 20rpx;

				.left {
					height: 100%;

					image {
						width: 60rpx;
						height: 60rpx;
					}

					.vip-text {
						font-size: 32rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						color: #FFFFFF;
						padding: 0 10rpx 0 16rpx;
					}

					.vip-time {
						font-size: 20rpx;
						font-family: SFPro, SFPro;
						font-weight: 400;
						color: #FFFFFF;
						padding-top: 10rpx;
					}

					text {
						font-size: 22rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}

				.btn {
					width: 144rpx;
					height: 60rpx;
					background: linear-gradient(270deg, #FFE5D0 0%, #C5A899 100%);
					border-radius: 30rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #222222;
					line-height: 60rpx;
				}
			}

			.tabs {
				.tabs-item {
					margin: 48rpx 100rpx 0 0;

					image {
						width: 44rpx;
						height: 44rpx;
						margin: 0 0 12rpx;
					}

					text {
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #222222;
					}
				}

				.tabs-item:nth-child(4n+4) {
					margin: 48rpx 0 0;
				}
			}
		}

		.top_bg {
			width: 100%;
			// height: ;
			background: rgba(0, 0, 0, 0.5);
			position: relative;

			.bg-click {
				position: absolute;
				top: 0;
				left: 0;
				height: 500rpx;
				width: 100%;
				background: rgba(0, 0, 0, 0);
				// z-index: -1;
			}

			.bg_img {
				position: absolute;
				top: 0;
				left: 0;
				height: 596rpx;
				width: 100%;
				z-index: -1;
			}

			.u-navbar {
				height: 88rpx;
				width: 100%;

				image {
					width: 44rpx;
					height: 44rpx;
				}
			}

			.user {

				width: 100%;
				box-sizing: border-box;
				padding: 56rpx 24rpx;

				.user-top {
					.name {
						position: relative;

						text:first-child {
							font-size: 44rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							color: #FFFFFF;
						}

						text:last-child {
							font-size: 20rpx;
							font-family: Silom;
							color: #FFFFFF;
							margin: 0 12rpx 8rpx 18rpx;
							padding: 2rpx 8rpx;
							background: url('../../static/images/level-bg.png') no-repeat;
							background-size: 100% 100%;
						}

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}

					.user-avatar {
						width: 104rpx;
						height: 104rpx;
						border-radius: 50%;
					}
				}

				.imgs {
					image {
						width: 36rpx;
						height: 36rpx;
						padding-right: 10rpx;
					}
				}

				.intro {
					padding: 32rpx 0;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: rgba(255, 255, 255, .7);
				}

				.user-bottom {
					.bottom-left {
						position: relative;

						.bottom-item {
							padding: 0 44rpx 0 0;

							text:first-child {
								font-size: 32rpx;
								font-family: JDZhengHT, JDZhengHT;
								font-weight: 400;
								color: #FFFFFF;
								line-height: 40rpx;
								letter-spacing: 1px;
								padding: 0 0 12rpx;
							}

							text:last-child {
								font-size: 20rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								color: #FFFFFF;
								line-height: 28rpx;
							}
						}
					}

					.bottom-right {
						position: relative;
						padding: 6rpx 20rpx;
						background: rgba(255, 255, 255, 0.1);
						border-radius: 22rpx;
						text-align: center;
						.sign {
							position: absolute;
							top: -44rpx;
							left: 20rpx;
							width: 128rpx;
							height: 48rpx;
						}
						.text {
							font-size: 22rpx;
							font-weight: 400;
							color: #FFFFFF;
						}
					}
				}
			}
		}
	}
</style>