dl_uniapp/pages/mine/mine-index.vue

<template>
	<view class="mine-container">
		<!-- 切换身份 -->
		<view :class="['dl-title',ifHasCard?'has-member-card':''] ">
			<view class="left-search" @click="changeUserType('01'==localUserType?'02':'01')">
				<image v-if="!ifHasCard" class="dl-image" src="@/static/mine/qiehuan.png" mode="aspectFit"></image>
				<image v-else class="dl-image" src="@/static/mine/change_member.png" mode="aspectFit"></image>
				<text class="dl-text">切换至{{'02'==localUserType?'通告主':'博主'}}</text>
			</view>
		</view>
		<!-- 头像信息 -->
		<view :class="['dl-person-box',ifHasCard?'has-member-card':''] ">
			<view class="user-image-box">
				<view class="dl-image-box">
					<image v-if="!userInfo.avatar" class="touxiang" src="@/static/images/profile.jpg"
						mode="scaleToFill">
					</image>
					<image v-else class="touxiang" :src="userInfo.avatar" mode="scaleToFill"></image>
				</view>
				<view class="name-box">
					<view class="title-box">
						{{userInfo.nickName || ''}}
						<image v-if="ifHasCard" src="@/static/mine/huang.png" mode="aspectFit"></image>
						<view style="font-size: 20rpx;">{{userInfo.cardName||''}}</view>
					</view>
					<view class="bottom-box">
						<view class="fans-box">
							<image src="@/static/mine/fans.png" mode="aspectFit"></image>
							<view class="fans-num">{{userInfo.tfansNum||'0'}}</view>
						</view>
					</view>

				</view>
				<view class="edit-box" @click="goEdit()">
					<text style="margin-right: 10rpx;">编辑</text>
					<uni-icons v-if="ifHasCard" type="right" color="#623109" size="12"></uni-icons>
					<uni-icons v-else type="right" color="#929292" size="12"></uni-icons>
				</view>
			</view>
			<!-- 会员开通 -->
			<view v-if="!ifHasCard && '02'==localUserType" class="dl-member-box" @click="goMemberCard()">
				<view class="dl-left">
					<image class="dl-icon" src="@/static/index/zuanshi.png" mode="aspectFit"></image>
					<text>开通会员 解锁更多权益</text>
				</view>
				<view class="dl-right">
					<view class="dl-go-view">立即开通</view>
				</view>
			</view>
			<!-- 会员开通--通告主 -->
			<view v-if="!ifHasCard && '01'==localUserType" class="dl-member-box" @click="goMemberCard()">
				<view class="dl-left">
					<image class="dl-icon" src="@/static/index/zuanshi.png" mode="aspectFit"></image>
					<text>获取通告主卡 体验高级特权</text>
				</view>
				<view class="dl-right">
					<view class="dl-go-view">立即开通</view>
				</view>
			</view>
			<!-- 积分 -->
			<view class="points-box" v-if="'02'==localUserType">
				<view class="item-box" @click="dialogToggle()">
					<view class="item-text-box">
						<view>积分<text class="red-text">{{userInfo.pointsBalance||'0'}}</text></view>
						<view class="dl-little">赚积分<uni-icons type="right" size="10">{{item.unicode}}</uni-icons></view>
					</view>
					<image src="@/static/mine/baoming.png" mode="aspectFit"></image>
				</view>
				<view class="item-box" @click="goMemberCard()">
					<view class="item-text-box">
						<view>可用报名<text class="red-text">{{userInfo.report||'0'}}</text>次</view>
						<view class="dl-little">去提额<uni-icons type="right" size="10">{{item.unicode}}</uni-icons></view>
					</view>
					<image src="@/static/mine/jifen.png" mode="aspectFit"></image>
				</view>
			</view>
			<!-- 会员到期时间 -->
			<view v-if="ifHasCard" class="dl-member-end-date-box" @click="goMemberCard()">
				<view class="dl-left">
					<image class="dl-icon" src="@/static/index/zuanshi.png" mode="aspectFit"></image>
					会员<text>{{memberEndDate}}</text>日到期
				</view>
				<view class="dl-right">
					<view class="dl-go-view">查看会员</view>
				</view>
			</view>
			<!-- 发布通告 -->
			<view class="public-notice-box" v-if="'01'==localUserType">
				<view class="left-box">
					<view>发布通告额度剩余{{userInfo.addNotice||0}}条</view>
					<!--					<progress style="width: 90%;" border-radius="5" percent="40" activeColor="#FC1F3E"-->
					<!--						backgroundColor="#DEDEDE" stroke-width="8" />-->
				</view>
				<view class="right-box" @click="goMemberCard">
					获取更多
					<uni-icons type="right" color="#623109" size="12"></uni-icons>
				</view>
			</view>
		</view>
		<view class="dl-max-box">
			<!-- 个人信息和其他信息 -->
			<view class="other-box">
				<view class="box-room">
					<view class="detail-title">个人信息</view>
					<view class="menu-box top-column">
						<view class="menu-item" v-if="'01'==localUserType" @click="goAuth()">
							<!-- <image src="@/static/mine/zuji.png" mode="aspectFit"></image> -->
							<image src="@/static/mine/caise/renzheng.png" mode="aspectFit"></image>
							<view class="text-dom">通告主认证</view>
							<uni-icons type="right" color="#623109" size="12"></uni-icons>
						</view>
						<view class="menu-item" v-if="'01'==localUserType" @click="goCoupon()">
							<!-- <image src="@/static/mine/zuji.png" mode="aspectFit"></image> -->
							<image src="@/static/mine/caise/tonggaoquan.png" mode="aspectFit"></image>
							<view class="text-dom">急招券</view>
							<uni-icons type="right" color="#623109" size="12"></uni-icons>
						</view>
						<view class="menu-item" @click="goHistory()">
							<!-- <image src="@/static/mine/zuji.png" mode="aspectFit"></image> -->
							<image src="@/static/mine/caise/zuji.png" mode="aspectFit"></image>
							<view class="text-dom">足迹</view>
							<uni-icons type="right" color="#623109" size="12"></uni-icons>
						</view>
						<view class="menu-item" v-if="'02'==localUserType" @click="goMyAddr()">
							<!-- <image src="@/static/mine/dizhi.png" mode="aspectFit"></image> -->
							<image src="@/static/mine/caise/dizhi.png" mode="aspectFit"></image>
							<view class="text-dom">地址</view>
							<uni-icons type="right" color="#623109" size="12"></uni-icons>
						</view>
						<view class="menu-item" v-if="'02'==localUserType" @click="goMyCard()">
							<!-- <image src="@/static/mine/mingpian.png" mode="aspectFit"></image> -->
							<image src="@/static/mine/caise/mingpian.png" mode="aspectFit"></image>
							<view class="text-dom">名片</view>
							<uni-icons type="right" color="#623109" size="12"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			<view class="other-box">
				<view class="box-room">
					<view class="detail-title">其他信息</view>
					<view class="menu-box">
						 <view class="menu-item" @click="viewNewPeople()">
						<image src="@/static/mine/caise/shouce.png" mode="aspectFit"></image>
						<view>新人手册</view>
					</view>
						<view class="menu-item" style="position: relative;">
							<!-- <image src="@/static/mine/kefu.png" mode="aspectFit"></image> -->
							<image src="@/static/mine/caise/kefu.png" mode="aspectFit"></image>
							<button class="share-button" open-type="contact"></button>
							<view>联系客服</view>
						</view>
						<view class="menu-item" @click="toggle('center',wechat_img)">
							<!-- <image src="@/static/mine/gognzhonghao.png" mode="aspectFit"></image> -->
							<image src="@/static/mine/caise/weixin.png" mode="aspectFit"></image>
							<view>公众号</view>
						</view>
						<view class="menu-item" @click="toggle('center',customer_service)">
							<!-- <image src="@/static/mine/jairushequ.png" mode="aspectFit"></image> -->
							<image src="@/static/mine/caise/shequ.png" mode="aspectFit"></image>
							<view>加入社区</view>
						</view>
						<view class="menu-item" @click="goSuggest()">
							<!-- <image src="@/static/mine/yijianfankui.png" mode="aspectFit"></image> -->
							<image src="@/static/mine/caise/yijian.png" mode="aspectFit"></image>
							<view>意见反馈</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<image :src="imageUrl+popupImgUrl" mode="aspectFit"></image>
			</view>
		</uni-popup>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="warn" cancelText="关闭" confirmText="我知道了" title="温馨提示"
				:content="'随手转发上传通告,每条轻松赚'+point+'积分'" @confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import tabBarVue from '@/components/tabbar/tabBar.vue'
	import storage from '@/utils/storage'
	import constant from '@/utils/constant';
	import {
		getCatgByCode,
		getByCodeInfo
	} from '@/api/system/config.js'
	import {
		changeUserType
	} from '@/utils/common.js'
	import config from '@/config'
	import {
		getJSONData,
		getStrData
	} from '@/utils/auth.js'
	import {
		queryDetail
	} from '@/api/business/member.js'
	import {
		getToken
	} from '@/utils/auth'
	import {
		getCodeUrl
	} from '@/api/wxApi'
	export default {
		props: {
			nowUserType: {
				type: String,
				default: null
			}
		},
		components: {
			tabBarVue,
		},
		data() {
			return {
				localUserType: this.nowUserType,
				globalConfig: getApp().globalData.config,
				//是否已开通会员
				ifHasCard: false,
				userInfo: {
					coupon: 0
				},
				imageUrl: '',
				//公众号二维码
				wechat_img: constant.wechat_img,
				//客服二维码
				customer_service: constant.customer_service,
				//弹窗照片
				popupImgUrl: "",
				//会员到期日期
				memberEndDate: "",
				//每条赚多少积分
				point: 10,
			}
		},
		mounted() {
			this.getByCodeInfo()
			if (null != getJSONData(constant.userInfo)) {
				this.userInfo = getJSONData(constant.userInfo)
				this.getDetail()
			}
		},
		onShow() {
			if (null != getJSONData(constant.userInfo)) {
				this.userInfo = getJSONData(constant.userInfo)
				this.getDetail()
			}
		},
		onLoad() {

		},
		computed: {
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50
			}
		},
		methods: {
			/**
			 * 查询发布通告送多少积分
			 */
			getByCodeInfo() {
				getByCodeInfo({
					code: constant.fbgg
				}).then(res => {
					if (res.code == 200 && null != res.data) {
						this.point = res.data.content
					}
				}).catch((e) => {
					uni.showToast({
						icon: 'error',
						duration: 2000,
						title: e
					});
				})
			},
			dialogToggle() {
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				this.goPoints()
			},
			toggle(type, key) {
				this.type = type
				if (type == 'center') {
					//公众号跳转
					wx.openOfficialAccountProfile({
						username: 'tonggaokuaijie', // 此处填写公众号的微信号
						success: res => {},
						fail: res => {}
					})
				}
			},
			getDetail() {
				let param = {
					userId: this.userInfo.userId,
					userType: this.localUserType
				}
				console.log(param, 'param')
				queryDetail({
					userId: this.userInfo.userId,
					userType: this.localUserType
				}).then(res => {
					this.userInfo.nickName = res.data.nickName.toString()
					this.userInfo.tfansNum = res.data.tfansNum.toString()
					this.userInfo.pointsBalance = res.data.pointsBalance.toString()
					this.userInfo.report = res.data.report.toString()
					this.userInfo.coupon = res.data.coupon.toString()
					this.userInfo.addNotice = res.data.addNotice.toString()
					this.userInfo.avatar = this.imageUrl + res.data.avatar
					this.userInfo.cardName = res.data.cardName
					if (res.data.memberEndDate && null != res.data.memberEndDate) {
						this.ifHasCard = true
						this.memberEndDate = res.data.memberEndDate
					} else {
						this.ifHasCard = false
					}
					console.log(this.userInfo, 'THIS.USERINFO')
					this.$forceUpdate()
				})
			},
			/**
			 * 切换用户身份
			 */
			changeUserType(type) {
				changeUserType(type)
				this.localUserType = type
				this.$emit("refreshUserType")
				this.getDetail()
				this.$forceUpdate()
			},
			handleToInfo() {
				this.$tab.navigateTo('/pages/mine/info/index')
			},
			/**
			 * 跳转名片列表
			 */
			goMyCard() {
				this.$tab.navigateTo('/pages/mine/card/my-card')
			},
			/**
			 * 跳转建议列表
			 */
			goSuggest() {
				this.$tab.navigateTo('/pages/mine/set/suggest?userType=' + this.localUserType)
			},
			/**
			 * 跳转地址列表
			 */
			goMyAddr() {
				this.$tab.navigateTo('/pages/mine/addr/addr-list')
			},
			goAuth() {
				this.$tab.navigateTo('/pages/mine/auth/auth-choose')
			},
			goCoupon() {
				this.$tab.navigateTo('/pages/mine/coupon/my-coupon?userId=' + this.userInfo.userId + '&coupon=' + this
					.userInfo.coupon)
			},
			goHistory() {
				this.$tab.navigateTo('/pages/mine/history/history')
			},
			goMemberCard() {
				this.$tab.navigateTo('/pages/mine/member/member-card?userType=' + this.localUserType)
			},
			/**
			 * 去积分列表
			 */
			goPoints() {
				this.$tab.navigateTo('/pages/mine/points/points?userId=' + this.userInfo.userId + '&pointsBalance=' + this
					.userInfo.pointsBalance)
			},
			/**
			 * 跳转编辑页
			 */
			goEdit() {
				this.$tab.navigateTo('/pages/mine/set/my-info?userType=' + this.localUserType + '&userId=' + this.userInfo
					.userId)
			},
			viewNewPeople() {
			  if (this.localUserType == '02'){
          uni.downloadFile({
            url: 'https://www.ddtg.site/bz.docx',
            success: function(res) {
              var filePath = res.tempFilePath;
              uni.openDocument({
                filePath: filePath,
                showMenu: true,
                success: function(res) {}
              });
            }
          });
        } else {
          uni.downloadFile({
            url: 'https://www.ddtg.site/tgz.docx',
            success: function(res) {
              var filePath = res.tempFilePath;
              uni.openDocument({
                filePath: filePath,
                showMenu: true,
                success: function(res) {}
              });
            }
          });
        }

        // this.$tab.navigateTo(
				// 	`/pages/common/richview/index?title=${this.globalConfig.appInfo.agreements[3].title}&code=${this.globalConfig.appInfo.agreements[3].code}`
				// )
			}
		}
	}
</script>

<style lang="scss">
	.uni-popup {
		top: 0 !important;
	}

	.vue-ref {
		top: 0 !important;
	}

	.popup-content {
		height: 100% !important;
	}

	.mine-container {
		width: 100%;
		color: #363636;
		font-size: 38rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		position: relative;
		background-color: #F6F6F6;

		.dl-max-box {
			width: 100%;
			overflow-y: scroll;
			height: calc(100% - var(--status-bar-height) - var(--window-bottom) - 570rpx);
		}

		.dl-title {
			padding-top: calc(var(--status-bar-height) + 73rpx);
			width: 100%;
			background-color: #FC1F3E;
			color: white;
			display: flex;
			position: relative;
			z-index: 10;
			font-size: 30rpx;
			padding-right: 10rpx;
			padding-bottom: 20rpx;
			padding-left: 15rpx;
			border-bottom: 1px solid #F4F4F4;


			.left-search {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: left;
				position: relative;

				.dl-image {
					width: 40rpx;
					height: 40rpx;
				}

				.dl-text {
					padding-left: 10rpx;
				}
			}
		}


		.dl-person-box {
			width: 100%;
			background-color: white;
			padding: 20rpx 25rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;

			.user-image-box {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.dl-image-box {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100rpx;
					position: relative;

					.touxiang {
						border-radius: 50%;
						width: 80rpx;
						height: 80rpx;
					}

					.sex {
						width: 30rpx;
						height: 30rpx;
						position: absolute;
						bottom: 0rpx;
						right: 0rpx;
						border-radius: 50%;
					}
				}

				.name-box {
					display: flex;
					padding-left: 20rpx;
					flex: 1;
					flex-direction: column;
					align-items: self-start;
					justify-content: center;

					.title-box {
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							margin-left: 10rpx;
							width: 50rpx;
							height: 50rpx;
						}
					}

					.bottom-box {
						display: flex;
						align-items: center;
						justify-content: center;

						.fans-box {
							max-width: 200rpx;
							margin-right: 10rpx;
							font-size: 18rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: #FEF4EF;
							padding: 5rpx 10rpx;
							color: #FE9860;
							border-radius: 20rpx;

							image {
								height: 20rpx;
								width: 20rpx;
								margin-right: 8rpx;
							}
						}

						.member-box {
							flex: 1;
							font-size: 18rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: #FC1F3E;
							color: white;
							padding: 5rpx 10rpx;
							border-radius: 20rpx;
						}
					}



					.fans-num {}
				}

				.edit-box {
					color: #929292;
					text-align: right;
					padding-right: 20rpx;
					font-size: 22rpx;
					width: 130rpx;

				}
			}

			.dl-member-box {
				display: flex;
				align-items: center;
				margin-top: 10rpx;
				border-radius: 35rpx;
				justify-content: center;
				height: 100rpx;
				width: 100%;
				background: url('/static/index/member-bg.png');
				background-size: 100% 100%;
				background-position: center;
				/* 图片居中显示 */
				background-repeat: no-repeat;
				/* 不重复背景图片 */

				.dl-left {
					display: flex;
					flex: 1;
					padding-left: 30rpx;
					align-items: center;
					font-size: 30rpx;
					color: #623109;
					justify-content: left;

					.dl-icon {
						width: 60rpx;
						height: 56rpx;

					}
				}

				.dl-right {
					padding-right: 20rpx;

					.dl-go-view {
						font-size: 28rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #F5D8A5;
						color: #623109;
						padding: 10rpx 25rpx;
						float: right;
						border-radius: 30rpx;
					}
				}
			}

			.dl-member-end-date-box {
				display: flex;
				align-items: center;
				margin-top: 15rpx;
				border-radius: 35rpx;
				justify-content: center;
				height: 90rpx;
				width: 100%;
				background-color: white;

				.dl-left {
					display: flex;
					flex: 1;
					padding-left: 30rpx;
					align-items: center;
					font-size: 30rpx;
					color: #623109;
					justify-content: left;

					.dl-icon {
						width: 60rpx;
						height: 56rpx;

					}
				}

				.dl-right {
					padding-right: 20rpx;

					.dl-go-view {
						font-size: 28rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #F5D8A5;
						color: #623109;
						padding: 8rpx 25rpx;
						float: right;
						border-radius: 30rpx;
					}
				}
			}
		}

		.has-member-card {
			background-color: #FBE8CE !important;
			color: #623109 !important;
			border-bottom: 1px solid #F2E7D5 !important;

			.points-box {
				border-top: 1px solid #F2E7D5 !important;
				padding-top: 10rpx;

				.item-box {
					background-color: white !important;
					color: #623109 !important;

					.dl-little {
						background-color: #FED96E !important;
						color: #363636;
					}
				}
			}

			.edit-box {
				color: #623109 !important;
			}
		}

		.points-box {
			margin-top: 10rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.item-box {
				flex: 1;
				border-radius: 20rpx;
				background-color: #FEF4EF;
				margin: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20rpx;

				.item-text-box {
					font-size: 30rpx;
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.dl-little {
						font-size: 22rpx;
						background-color: white;
						border-radius: 20rpx;
						padding: 5rpx 20rpx;
						margin-top: 15rpx;
					}
				}

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

				.red-text {
					color: #FC1F3E;
				}
			}
		}

		.public-notice-box {
			width: 100%;
			padding: 20rpx 30rpx;
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			border-radius: 20rpx;
			background-color: #FEF4EF;
			font-size: 33rpx;
			justify-content: center;

			.left-box {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: center;
			}

			.right-box {
				font-size: 26rpx;
				width: 200rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
		}

		.other-box {
			background-color: #F6F6F6;
			width: 100%;
			flex-direction: column;
			padding: 30rpx 30rpx 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.box-room {
				display: flex;
				background-color: white;
				border-radius: 20rpx;
				width: 100%;
				flex-direction: column;
				padding: 25rpx 30rpx;
				align-items: self-start;
				justify-content: center;

				.detail-title {
					// border-left: 8rpx solid #FC1F3E;
					font-weight: bold;
					font-size: 29rpx;
					// padding-left: 10rpx;
					margin-bottom: 30rpx;

				}

				.menu-box {
					padding-top: 15rpx;
					border-top: 1rpx solid #F7F7F7;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;

					.menu-item {
						flex: 1;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
						margin: 10rpx;


						image {
							width: 60rpx;
							height: 60rpx;
							margin-bottom: 10rpx;

						}

						.share-button {
							border: none !important;
							outline: none !important;
							border-style: none !important;
							position: absolute;
							background-color: transparent;
							width: 100rpx;
							height: 100rpx;
							z-index: 99;
						}

						.share-button::after {
							border: none !important;
						}
					}
				}

				.top-column {
					flex-direction: column;

					.menu-item {
						width: 100%;
						flex-direction: row;
						border-bottom: 1rpx solid #F7F7F7;
						padding-bottom: 10rpx;

						image {
							width: 60rpx;
							height: 60rpx;
							margin-bottom: 0 !important;
						}

						.text-dom {
							display: flex;
							align-items: center;
							padding-left: 20rpx;
							justify-content: flex-start;
							font-size: 26rpx;
							flex: 1;
						}

						.uni-icons {
							width: 70rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}
		}
	}
</style>