IHG/pages/my/my.vue

<template>

	<view class="my">
		<MyNav title="我的" bgColor="" :backIcon="false"></MyNav>
		<!-- <view class="topCard" :style="{backgroundImage:'url('+imgurl+')'}"> -->
		<view class="topCard">
			<image class="topCard-img" style="width: 560rpx; height: 584rpx; " :src="imgurl" mode=""></image>
			<!-- 用户名 -->
			<view class="user">
				<view v-if="admin.avatar">
					<button class="avatar" open-type="chooseAvatar" @click="handleGetWechatUserInfo">
						<image class="user-avatar" style="height: 176rpx;width: 176rpx;border-radius: 50%;"
							:src="admin.avatar? admin.avatar : '/static/icon/avatar.png'" />
					</button>
					<view class="userinfo" @click="goPersonData">
						<text class="unlogin">{{admin.nickname}}</text>
					</view>
				</view>
				<view v-else>
					<image class="user-avatar" src="/static/icon/avatar.png" style="height: 176rpx;width: 176rpx;">
					</image>
					<view class="userinfo">
						<text class="unlogin" v-if="!islogin" @click="login">请点击登录</text>
					</view>
				</view>
				<image src="/static/icon/setting.png" @click="goSetting"
					style="width: 44rpx;height: 44rpx; position: absolute;top:0rpx;right: 24rpx;"></image>
			</view>

			<!-- 会员 -->
			<view class="membership" @click="goJoin">
				<view class="flex">
					<view style="display: flex;align-items: center;">
						<image style="width: 52rpx ;height: 52rpx;border-radius: 50%;" :src="indexVipImg"></image>
						<text class="join">加入会员</text>
					</view>

					<view style="display: flex;align-items: center;">
						<text class="gojoin">去加入</text>
						<image style="width: 12rpx ;height: 20rpx;" src="../../static/icon/right05.png"></image>
					</view>
				</view>
			</view>

			<!-- 订单 -->
			<view class="orders">
				<view class="nav">
					<view class="myorder">我的订单</view>
					<view class="more">
						<text style="margin-right: 8rpx;" @click="goMyorders(0)">查看更多</text>
						<image style="width: 12rpx ;height: 20rpx;" src="../../static/icon/right05.png"></image>
					</view>
				</view>

				<view class="content">
					<view class="flexbox" @click="goMyorders(1)">
						<view
							style="width: 56rpx; height: 56rpx; display: flex;align-items: center;justify-content: center; ">
							<image style="width: 56rpx ;height: 42rpx;" src="../../static/icon/exchange.png"></image>
						</view>
						<view class="flexbox-number" v-if="exchange != 0 ">
							<text>{{exchange}}</text>
						</view>
						<text class="flexbox-number-text">待兑换</text>
					</view>
					<view class="flexbox" @click="goMyorders(2)">
						<view
							style="width: 56rpx; height: 56rpx;display: flex;align-items: center;justify-content: center; ">
							<image style="width: 54rpx ;height: 52rpx;" src="../../static/icon/shipments.png"></image>

						</view>
						<view class="flexbox-number" v-if="shipped != 0 ">
							<text>{{shipped}}</text>
						</view>
						<text class="flexbox-number-text">待发货</text>
					</view>
					<view class="flexbox" @click="goMyorders(3)">
						<view
							style="width: 56rpx; height: 56rpx;display: flex;align-items: center;justify-content: center; ">
							<image style="width: 56rpx ;height: 56rpx;" src="../../static/icon/Receipt.png"></image>
						</view>
						<view class="flexbox-number" v-if="receive != 0 ">
							<text>{{receive}}</text>
						</view>
						<text class="flexbox-number-text">待收货</text>
					</view>
					<view class="flexbox" @click="goMyorders(4)">
						<view
							style="width: 56rpx; height: 56rpx;display: flex;align-items: center;justify-content: center; ">
							<image style="width: 54rpx ;height: 54rpx;" src="../../static/icon/finish.png"></image>
						</view>
						<text class="flexbox-number-text">已完成</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 列表 -->
		<view style="padding:0 30rpx;">
			<view class="list" v-for="(item,index) in list" :key="index" @click="goDetail(index)">
				<view class="title">{{item.title}}</view>
				<view class="container">{{item.content}}</view>
				<image src="../../static/icon/right.png"></image>
			</view>

		</view>
		<u-modal @close="closeMask" closeOnClickOverlay="true" :show="modal.show" :title="modal.title"
			:show-confirm-button="false">
			<view>
				<button class="avatar" open-type="chooseAvatar" @chooseavatar="handleChooseAvatar">
					<image class="user-avatar" style="height: 176rpx;width: 176rpx;border-radius: 50%;"
						:src="modal.avatar?modal.avatar:'/static/icon/avatar.png'" />
				</button>
				<input class="avatar" type="nickname" :value="modal.nickname" placeholder="填写昵称"
					@change="handleChangeNickname">
				<button class="confirm" @click="handleConfirmWechatUserInfo">提交</button>
			</view>
		</u-modal>
		<!-- 底部导航栏 -->
		<view style="height: 140rpx; width: 100%;"></view>
		<tab-bar checked="my"></tab-bar>
	</view>
</template>

<script>
	// 引入组件
	import TabBar from '../../components/TabBar/tabbar.vue'
	import MyNav from "@/components/my-nav/my-nav.vue"
	export default {
		// 注册组件
		components: {
			TabBar,
			MyNav
		},
		data() {
			return {
				
				//vip图标
				indexVipImg:'',
				//待兑换
				exchange: '',
				//待发货
				shipped: '',
				//待收货
				receive: '',
				//已完成
				finish: '',
				//跳转h5,小程序,其他页面
				jump_type: '',
				jump_config: {},
				//加入会员广告配置
				advise: '',
				modal: {
					show: false,
					title: '用户信息获取',
					nickname: '',
					avatar: ''
				},
				admin: '',
				// 顶部背景图
				imgurl: 'http://t9.9026.com/imgs/bg@2x.png',
				// 是否登录
				islogin: false,
				// 列表内容
				list: [{
					title: '积分',
					content: '积分兑换奖品'
				}, {
					title: '奖品',
					content: '查看所有奖品'
				}, {
					title: '点赞',
					content: '查看所有点赞'
				}]
			};
		},

		async onLoad() {
			this.admin = this.$store.getters.userInfo
			if (this.$store.getters.allset) {
				this.advise = this.$store.getters.allset.add_member
				//vip图标
				this.indexVipImg = this.advise.value.me
				console.log(this.indexVipImg,'------------>index');
				this.jump_type = this.advise.value.me_jump_type
				if (this.jump_type == 1) {
					this.jump_config = this.advise.value.me_h5_url
				} else if (this.jump_type == 2) {
					this.jump_config.appid = this.advise.value.me_appid
					this.jump_config.path = this.advise.value.me_path
				} else if (this.jump_type == 3) {
					this.jump_config = this.advise.value.me_other_path
				}
			}
			if (this.admin) {
					await this.init()
			}
			
			uni.$on('refreshOrderNum',()=>{
				this.init()
			})
			uni.$on('refreshAdminName',(res)=>{
				this.admin.nickname = res
			})
			

		},


		methods: {
			
			init(){
			 this.getMyOrder(1)
				this.getMyOrder(2)
				this.getMyOrder(3)
				this.getMyOrder(4)
			},
			
			//关闭遮罩层
			closeMask() {
				this.modal.show = false
			},
			// 微信获取头像
			handleGetWechatUserInfo() {
				console.log(1111);
				this.modal.show = true
				this.modal.nickname = this.admin.nickname
				this.modal.avatar = this.admin.avatar
			},
			//提交微信名称和头像
			handleConfirmWechatUserInfo() {
				if (!this.modal.avatar) {
					this.$u.toast('请上传头像')
					return
				}
				if (!this.modal.nickname) {
					this.$u.toast('请填写昵称')
					return
				}
				this.$loading('数据提交中...')
				this.$api.my.update({
					avatar: this.modal.avatar,
					nickname: this.modal.nickname
				}).then(res => {
					this.$hideLoading()
					this.$store.dispatch('user/info', res.data)
					this.admin = this.$store.getters.userInfo
					this.modal.show = false
				})
			},
			// 微信获取头像
			handleChooseAvatar({
				detail
			}) {
				// console.log(e.detail);
				// this.modal.avatar = e.detail.avatarUrl
				let _this = this
				uni.getFileSystemManager().readFile({
					filePath: detail.avatarUrl, // 选择图片返回的相对路径
					encoding: 'base64', // 编码格式
					success: res => { // 成功的回调
						uni.uploadFile({
							url: _this.$setting.BASE_URL + '/v1/user/uploadFile',
							// filePath: 'data:image/png;base64,' + res.data,
							filePath: detail.avatarUrl,
							name: 'file',
							success({
								data
							}) {
								const res = JSON.parse(data)
								const {
									url
								} = res.data
								_this.modal.avatar = url
								console.log('-->data', _this.modal.avatar)
							}
						})
						// this.modal.avatar = detail.avatarUrl
						// console.log('data:image/png;base64,' + res.data)
					}
				})


			},
			handleChangeNickname(res) {
				this.modal.nickname = res.detail.value
			},

			// 跳转登录页
			login() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			// 跳转个人信息
			goPersonData() {
				uni.navigateTo({
					url: '/pages/my/PersonalData/personalData'
				})
			},
			// 跳转设置页面
			goSetting() {
				if (this.admin == undefined) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				} else {
					uni.navigateTo({
						url: '/pages/my/setting/setting'
					})
				}
			},
			// 跳转积分页
			goDetail(index) {
				if (this.admin == undefined) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				} else {
					if (index == 0) {
						uni.navigateTo({
							url: '/pages/my/integral/integral'
						})
					} else if (index == 1) {
						uni.navigateTo({
							url: '/pages/my/prize/prize'
						})
					} else {
						uni.navigateTo({
							url: '/pages/my/Kudos/Kudos'
						})
					}
				}

			},

			// 获取订单列表
			getMyOrder(type) {
				this.$api.orders.getOrderList({
					page: 0,
					status: type || ''
				}).then(res => {
					if (res.code == 0) {
						if (type == 1) {
							this.exchange = res.data.total
							console.log(this.exchange);
						} else if (type == 2) {
							this.shipped = res.data.total
							console.log(this.shipped);
						} else if (type == 3) {
							this.receive = res.data.total
							console.log(this.receive);
						} else if (type == 4) {
							this.finish = res.data.total
							console.log(this.finish);
						}
					}
				})
			},


			// 跳转订单页
			goMyorders(index) {
				if (this.admin == undefined) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				} else {
					switch (index) {
						case 0:
							uni.navigateTo({
								url: '/pages/my/myorders/orders'
							})
							break;
						case 1:
							uni.navigateTo({
								url: '/pages/my/myorders/orders?isActive=' + 1
							})
							break;
						case 2:
							uni.navigateTo({
								url: '/pages/my/myorders/orders?isActive=' + 2
							})
							break;
						case 3:
							uni.navigateTo({
								url: '/pages/my/myorders/orders?isActive=' + 3
							})
							break;
						case 4:
							uni.navigateTo({
								url: '/pages/my/myorders/orders?isActive=' + 4
							})
							break;
					}
				}
			},
			//获取当前页面路径
			getPageUrl() {
				const pages = getCurrentPages();
				console.log(pages, '--------->pages')
				if (pages.length == 1) {
					const currentPage = pages[0];
					let pageUrl = `/${currentPage.route}`;
					return pageUrl
					console.log('当前页面url：', pageUrl);
				} else {
					const currentPage = pages[pages.length - 1];
					let pageUrl = `/${currentPage.route}`;
					return pageUrl
					console.log('当前页面url：', pageUrl);
				}
			},

			// 跳转其他小程序
			jumpHAppID(id, urls) {
				if (id == 1) {
					const url = urls; // 跳转的外链
					const navtitle = 'H5'; // 这个标题是你自己可以设置的
					uni.navigateTo({
						// 跳转到webview页面
						url: `/pages/webview/webview?url=${url}&nav=${navtitle}`,
						success: () => {
							console.log('成功')
						},
						fail: (e) => {
							console.log(e, "失败")
						}
					});
				} else if (id == 2) {
					let _this = this
					let obj = urls;
					console.log(obj, '----->obj');
					wx.navigateToMiniProgram({
						appId: `${obj.appid}`, //appid
						path: `${obj.path}`, //path
						extraData: { //参数
							foo: 'bar'
						},
						// envVersion: 'develop', //开发版develop 开发版 trial   体验版 release 正式版 
						success(res) {
							let page = _this.getPageUrl()
							let user_id = ''
							if (_this.admin != null) {
								user_id = _this.admin.id
							} else {
								user_id = 0
							}
							_this.$api.my.userMemberAdd({
								user_id,
								page,
							}).then(res => {
								console.log(res.data);
							})
							// 打开成功
						},
						fail(e) {
							console.log(e, '失败')
						}
					})
				} else if (id == 3) {
					uni.redirectTo({
						url: urls,
						fail: (err) => {
							uni.reLaunch({
								url: urls
							})
						}
					})
				}
			},

			// 跳转其他小程序
			goJoin() {
				let _this = this
				this.jumpHAppID(this.jump_type, this.jump_config)
			},
			// 上传头像
			uploadAvatar() {
				// let img = []
				// uni.chooseImage({
				// 	count: 1, //默认9
				// 	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				// 	sourceType: ['album'], //从相册选择
				// 	success: function (res) {
				// 		console.log(JSON.stringify(res.tempFilePaths));
				// 		img = res.tempFilePaths[0]
				// 		uni.uploadFile({
				// 			//后端接口地址
				// 			url: `${baseUrl}` + '/api/attachment/upload',
				// 			//图片临时地址
				// 			filePath: img,
				// 			// 上传文件类型
				// 			formData: {
				// 				tag: 'avatar'
				// 			},
				// 			success: (res) => {
				// 				//后端返回的图片名称
				// 				let data = JSON.parse(res.data)
				// 				// _this.formData.avatar = data.data.file
				// 			},
				// 		})
				// 	},
				// });
			}
		}
	}
</script>

<style lang="scss" scoped>
	$pageColor:#F9F9F9;
	$bgColor:#FFFFFF;

	.my {
		height: 100%;
		background-color: $pageColor;
	}

	.avatar {
		width: 176rpx;
		height: 176rpx;
		border-radius: 50%;
		border: 0;
		background: transparent;
		
		&::after {
			border: none;
		}
	}



	.topCard {
		width: 100%;
		border-radius: 0rpx 0rpx 16rpx 16rpx;
		padding: 40rpx 30rpx 38rpx 30rpx;
		box-sizing: border-box;
		// background-position: center;
		// background-repeat: no-repeat;
		// background-size: cover;
		background-color: #627885;
		position: relative;
		z-index: 99;

		.topCard-img {
			position: absolute;
			right: 0rpx;
			bottom: 0rpx;
		}


		.user {
			width: 690rpx;
			height: 176rpx;
			position: relative;
			margin-bottom: 38rpx;
			position: relative;
			z-index: 99;

			.user-avatar {
				object-fit: cover;
				object-position: center;
			}

			.userinfo {
				position: absolute;
				top: 38rpx;
				left: 200rpx;

				.unlogin {
					width: 360rpx;
					font-size: 44rpx;
					font-family: PingFang-SC-Heavy, PingFang-SC;
					font-weight: 500;
					color: #FFFFFF;
					display: block;
					margin-top: 20rpx;
				}

				.username {
					width: 184rpx;
					height: 44rpx;
					font-size: 44rpx;
					font-family: PingFang-SC-Heavy, PingFang-SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 44rpx;
					display: block;
					margin-bottom: 24rpx;
				}

				.userId {
					font-size: 32rpx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 32rpx;
				}
			}
		}

		.membership {
			width: 690rpx;
			height: 110rpx;
			background: $bgColor;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			padding-left: 28rpx;
			padding-right: 24rpx;
			box-sizing: border-box;
			margin-bottom: 24rpx;
			position: relative;
			z-index: 99;

			.flex {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 68rpx;
				width: 650rpx;

				.join {
					font-size: 36rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: 600;
					color: #627885;
					margin-left: 8rpx;
				}

				.gojoin {
					font-size: 30rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: 600;
					color: #627885;
					margin-right: 8rpx;
				}
			}


		}

		.orders {
			width: 690rpx;
			background: $bgColor;
			border-radius: 8rpx;
			padding: 40rpx 30rpx 36rpx 36rpx;
			box-sizing: border-box;
			position: relative;
			z-index: 99;

			.nav {
				// height: 50rpx;
				width: 633rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.myorder {
					font-size: 28rpx;
					font-family: PingFang-SC-Heavy, PingFang-SC;
					font-weight: 800;
					color: #333333;
				}

				.more {
					font-size: 28rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #627885;

				}
			}

			.content {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20rpx;
				margin-top: 72rpx;

				.flexbox {
					display: flex;
					flex-direction: column;
					align-items: center;
					position: relative;

					.flexbox-number-text {
						margin-top: 16rpx;
						font-size: 28rpx;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: #627885;
					}

					.flexbox-number {
						position: absolute;
						top: -30rpx;
						right: -14rpx;
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						background-color: #ff6c0e;
						font-size: 24rpx;
						color: #fff;
						display: flex;
						justify-content: center;
						align-items: center;
						

					}
				}
			}
		}


	}

	.list {
		width: 100%;
		padding-top: 32rpx;
		padding-bottom: 32rpx;
		border-bottom: 2rpx solid #F0F0F0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;

		&:first-child {
			padding-top: 50rpx;
		}

		.title {
			font-size: 36rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			color: #333333;
			margin-bottom: 16rpx;
		}

		.container {
			font-size: 28rpx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 500;
			color: #333333;
		}

		image {
			width: 12rpx;
			height: 20rpx;
			position: absolute;
			top: 70rpx;
			right: 0rpx;
		}
	}
</style>