snapshot-wx/pages/CareTabBar/Mine.vue

<template>
	<view class="container">
		<view class="userInfoBox">
			<view class="userHeader">
				<image class="userImg" :src="userImg || '../../static/img/mine/userImg.png'"></image>
				<view class="userNameBox">
					<view class="userName">{{userName || '点击登录'}}</view>
					<button v-if="!openID" class="loginBtn" open-type="getPhoneNumber" @getphonenumber="login">手机号快捷登录</button>
				</view>
			</view>
			<view class="userNumBox">
				<view class="userNumItem">
					<text class="userNum">{{rewardToday == -1 ? '--' : ('￥' + rewardToday)}}</text>
					<text class="userNumTitle">今日已领奖励</text>
				</view>
				<view class="userNumItem">
					<text class="userNum">{{rewardHistory == -1 ? '--' : ('￥' + rewardHistory)}}</text>
					<text class="userNumTitle">历史已领奖励</text>
				</view>
			</view>
		</view>
		<view class="userOrderBox">
			<view class="orderTitle">
				<text class="orderTitleText">我提交的线索</text>
				<text class="orderTitleMore" @tap="orderListTo('1')">查看全部 >></text>
			</view>
			<view class="orderContent">
				<view class="orderContentItem" @tap="orderListTo('2')">
					<view class="orderContentItemNum">{{noResponseNum == -1 ? '--' : noResponseNum}}</view>
					<view class="orderContentItemTitle">未回复</view>
				</view>
				<view class="orderContentItem" @tap="orderListTo('3')">
					<view class="orderContentItemNum">{{responsedNum == -1 ? '--' : responsedNum}}</view>
					<view class="orderContentItemTitle">已回复</view>
				</view>
				<view class="orderContentItem" @tap="orderListTo('4')">
					<view class="orderContentItemNum">{{evaluateNum == -1 ? '--' : evaluateNum}}</view>
					<view class="orderContentItemTitle">已评价</view>
				</view>
			</view>
		</view>
		<view class="moreServiceBox" v-if="openID">
			<view class="moreServiceTitle">更多服务</view>
			<view class="moreServiceContent">
				<view class="serviceContentItem" @tap="onMyRewardTo" v-if="openID">
					<image class="serviceContentItemImg" src="../../static/img/mine/myReward.png"></image>
					<view class="serviceContentItemTitle">我的奖励</view>
					<image class="serviceContentItemIcon" src="../../static/img/mine/right.png"></image>
				</view>
				<view class="serviceContentItem" v-if="userType == '2' && openID" @tap="onGridmanRewardTo">
				<!-- <view class="serviceContentItem" @tap="onGridmanRewardTo" v-if="openID"> -->
					<image class="serviceContentItemImg" src="../../static/img/mine/gridmanReward.png"></image>
					<view class="serviceContentItemTitle">网格员奖励与补领</view>
					<image class="serviceContentItemIcon" src="../../static/img/mine/right.png"></image>
				</view>
				<!-- <view class="serviceContentItem" @tap="onInvitationTo" v-if="openID && userType == '1'">
					<image class="serviceContentItemImg" src="../../static/img/mine/invitation.png"></image>
					<view class="serviceContentItemTitle">邀请码</view>
					<image class="serviceContentItemIcon" src="../../static/img/mine/right.png"></image>
				</view> -->
				<!-- <view class="serviceContentItem" @tap="onGZHTo">
					<image class="serviceContentItemImg" src="../../static/img/mine/weixin.png"></image>
					<view class="serviceContentItemTitle">关注公众号</view>
					<image class="serviceContentItemIcon" src="../../static/img/mine/right.png"></image>
				</view> -->
				<view class="serviceContentItem" @tap="loginOut" v-if="openID">
					<image class="serviceContentItemImg" src="../../static/img/mine/logout.png"></image>
					<view class="serviceContentItemTitle">退出登录</view>
					<image class="serviceContentItemIcon" src="../../static/img/mine/right.png"></image>
				</view>
			</view>
		</view>
		<!-- 关注公众号弹窗 -->
		<view class="popMask" v-if="isPopShow">
			<view class="popContent">
				<view class="popTips">长按扫码关注公众号</view>
				<image class="popImg" src="../../static/img/mine/qrcode_gyyjgl.jpg" show-menu-by-longpress></image>
				<image class="popClose" src="../../static/img/mine/popClose.png" @tap="onGZHCloseTo"></image>
			</view>
		</view>
		<!-- 邀请码弹窗 -->
		<view class="popMask" v-if="isInvitationPopShow">
			<view class="popContent">
				<view class="popTips">邀请码</view>
				<view class="popBody">
					<view class="bindedTips" v-if="YQCode">已绑定邀请码：{{YQCode}}</view>
					<input type="number" class="fway-form-input" v-else placeholder="请填写邀请码" v-model="strYQCode" maxlength="4" />
					<view class="errorTips" v-if="!YQCode && errorTips">{{errorTips}}</view>
				</view>
				<view class="popBtnBox">
					<view class="popBtn" style="color: #777;" @tap="onInvitationCloseTo" v-if="!YQCode">取消</view>
					<view class="popBtn" style="color: #3e6ffd;" :style="{width: YQCode ? '100%' : '50%'}" @tap="onInvitationSubmitTo">确定</view>
				</view>
			</view>
		</view>
		<!-- 扫码登录弹窗 -->
		<view class="popMask" v-if="isLoginPopShow">
			<view class="popContent">
				<view class="popTips">请先登录</view>
				<view class="popBody" style="border-radius: 0 0 30rpx 30rpx;">
					<button v-if="!openID" class="loginPopBtn" open-type="getPhoneNumber" @getphonenumber="login">手机号快捷登录</button>
					<view class="loginPopBtn" style="background-color: #999;" @tap="onLoginCloseTo">取消</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var that,
		qqMap = require('@/static/js/qqmap-wx-jssdk.min.js'),
		qqMapsdk;
	export default {
		options: {
		    styleIsolation: 'isolated'
		},
		data() {
			return {
				openID: '',
				userType: '1',
				userImg: '',
				userName: '',
				YQCode: '',
				isCity: '0',
				rewardToday: -1,
				rewardHistory: -1,
				noResponseNum: -1,
				responsedNum: -1,
				evaluateNum: -1,
				isPopShow: false,
				isInvitationPopShow: false,
				isLoginPopShow: false,
				strYQCode: '',
				strYQCodeID: '', // 扫码进入小程序获得
				errorTips: ''
			}
		},
		methods: {
			getData(option){
				that = this;
				// 实例化API核心类
				qqMapsdk = new qqMap({
					key: 'TE4BZ-ZFEAT-45CX3-VPZ3R-GOLS6-EGF54'
				});
				if (option && option.scene) {
					that.strYQCodeID = decodeURIComponent(option.scene);
				}
			},
			init() {
				let objUser = uni.getStorageSync('userInfo')
				that.openID = objUser.openID;
				that.userType = objUser.userType;
				that.YQCode = objUser.YQCode;
				that.userName = objUser.userTel ? objUser.userTel.slice(0, 3) + '******' + objUser.userTel.slice(-2) : '微信用户';
				if (that.openID) {
					that.onGetData();
					if (that.strYQCodeID){
						that.isInvitationPopShow = true;
					}
				}else {
					if (that.strYQCodeID){
						that.isLoginPopShow = true;
					}
				}
			},
			getAuthorizeInfo(fun) {
				uni.authorize({
					scope: 'scope.userLocation',
					success() { // 允许授权
						that.getLocationInfo(fun);
					},
					fail() { // 拒绝授权
						that.openConfirm(fun);
					}
				})
			},
			// 获取地理位置
			getLocationInfo(fun) {
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						qqMapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success(data) {
								// 地址信息
								let city = data.result.address_component.city;
								if (city == '自贡市') {
									that.isCity = '1';
								} else {
									that.isCity = '0';
								}
								typeof fun === 'function' && fun();
							}
						});
					}
				});
			},
			// 当用户第一次拒绝后再次请求授权
			openConfirm(fun) {
				uni.showModal({
					title: '请求授权当前位置',
					content: '需要获取您当前的所在城市，请确认授权',
					success: (res) => {
						if (res.confirm) {
							uni.openSetting({
								success(res) {
									if (res.authSetting['scope.userLocation']) {
										that.getLocationInfo(fun);
									} else {
										typeof fun === 'function' && fun();
									}
								}
							}); // 打开地图权限设置
						} else if (res.cancel) {
							uni.showToast({
								title: '你拒绝了授权，无法获得你所在城市信息',
								icon: 'none',
								duration: 1000,
								success() {
									typeof fun === 'function' && fun();
								}
							})
						}
					}
				});
			},
			onGetData() {
				that.$admin.req({
					method: 'GET',
					url: '/api/v1/Snapshot/user'
				}).then(res => {
					if (res) {
						that.rewardToday = res.dayAmount;
						that.rewardHistory = res.totalAmount;
						that.noResponseNum = res.noReplyCount;
						that.responsedNum = res.replyCount;
						that.evaluateNum = res.appraiseCount;
					}
				})
			},
			login(e) {
				if (e.detail.code){
					uni.login({
						provider: "weixin",
						onlyAuthorize: true,
						success: (login_res => {
							if (login_res.code) {
								that.$admin.reqDirect({
									method: 'POST',
									url: '/api/v1/Identity/third/token',
									data: {
										loginCode: login_res.code,
										telCode: e.detail.code,
										thirdType: 0
									}
								}).then(res => {
									if (res) {
										that.$admin.saveUserInfo(res, function(){
											that.$util.msg('登录成功！', function() {
												that.init();
												if (that.strYQCodeID) {
													that.isLoginPopShow = false;
													that.isInvitationPopShow = true;
												}
											});
										})
									} else {
										that.$util.msg('登录失败,请稍后重试');
									}
								})
							} else {
								that.$util.msg('登录失败,请重新操作');
							}
						})
					})
				}else {
					that.$util.msg('请授权手机号登录');
				}
			},
			orderListTo(type) {
				if (!that.openID) {
					that.$util.msg("请先登录");
					return;
				}
				uni.navigateTo({
					url: '/pagesCare/Order/List?tabIndex=' + type
				})
			},
			onMyRewardTo() {
				if (!that.openID) {
					that.$util.msg("请先登录");
					return;
				}
				uni.navigateTo({
					// url: '/pagesCare/MyReward/Index'
					url: '/pagesCare/MyReward/Index_Temp'
				})
			},
			onGridmanRewardTo() {
				if (!that.openID) {
					that.$util.msg("请先登录");
					return;
				}
				uni.navigateTo({
					url: '/pagesCare/GridmanReward/Index'
				})
			},
			// onSaveInviteCodeByID() {
			// 	if (that.strYQCodeID && !that.YQCode) {
			// 		that.onInvitationSave();
			// 	}
			// },
			onInvitationTo() {
				if (!that.openID) {
					that.$util.msg("请先登录");
					return;
				}
				that.isInvitationPopShow = true;
			},
			onInvitationSubmitTo() {
				if (that.YQCode) {
					that.isInvitationPopShow = false;
					that.strYQCodeID = '';
				} else {
					if (that.$util.e_checkNumber(that.strYQCode) === false) {
						that.errorTips = '请输入正确的邀请码！';
						return;
					}
					if (that.strYQCode.length != 4) {
						that.errorTips = '请输入4位正确的邀请码！';
						return;
					}
					that.onInvitationSave();
				}
			},
			onInvitationSave() {
				that.$admin.req({
					method: 'PUT',
					url: '/api/v1/Snapshot/third/invitationcode',
					data: {
						invitationCode: that.strYQCode
					}
				}).then(res => {
					that.$util.msg('邀请码绑定成功！', function() {
						that.YQCode = that.strYQCode;
						that.errorTips = '';
						that.strYQCode = '';
						that.strYQCodeID = '';
						let objUser = uni.getStorageSync('userInfo');
						objUser.YQCode = that.YQCode;
						uni.setStorageSync('userInfo', objUser);
					});
				}, err => {
					that.errorTips = err;
				})
			},
			onInvitationCloseTo() {
				that.isInvitationPopShow = false;
				that.strYQCodeID = '';
			},
			onLoginCloseTo() {
				that.isLoginPopShow = false;
				that.strYQCodeID = '';
			},
			onGZHTo() {
				that.isPopShow = true;
			},
			onGZHCloseTo() {
				that.isPopShow = false;
			},
			loginOut() {
				if (that.openID) {
					uni.showModal({
						title: '退出登录',
						content: '确定要退出登录吗？',
						success(res) {
							if (res.confirm) {
								that.openID = '';
								that.userType = '1';
								that.userImg = '';
								that.userName = '';
								that.YQCode = '';
								that.rewardToday = -1;
								that.rewardHistory = -1;
								that.noResponseNum = -1;
								that.responsedNum = -1;
								that.evaluateNum = -1;
								// 清楚缓存
								uni.removeStorageSync('userInfo');
							}
						}
					})
				} else {
					that.$util.msg("请先登录");
				}
			}
		}
	}
</script>

<style lang="less">
	.container {
		background-color: #F6F7F8;
		height: calc(100vh - 340rpx);
	}

	.userInfoBox {
		height: 380rpx;
		width: 100%;
		background-color: #3e6ffd;
		position: absolute;
		top: 0;
		left: 0;
	}

	.userHeader {
		padding: 30rpx 30rpx 40rpx;
		font-size: 0;
	}

	.userImg {
		display: inline-block;
		width: 160rpx;
		height: 160rpx;
		vertical-align: middle;
		margin-right: 20rpx;
		border-radius: 10rpx;
	}

	.userNameBox {
		display: inline-block;
		width: calc(100% - 180rpx);
		vertical-align: middle;
		position: relative;
		border-radius: 50rpx;
	}

	.userName {
		width: calc(100%);
		vertical-align: middle;
		font-size: 36rpx;
		color: #fff;
	}

	.loginBtn {
		width: 300rpx;
		text-align: center;
		background-color: #07c160;
		color: #fff;
		font-size: 32rpx;
		border-radius: 50rpx;
		height: 70rpx;
		line-height: 70rpx;
		margin-left: 0;
		margin-top: 40rpx;
	}

	.userNumBox {
		display: flex;
		justify-content: space-around;
	}

	.userNumItem {
		text-align: left;
	}

	.userNum {
		display: block;
		font-size: 40rpx;
		color: #fff;
		margin-bottom: 20rpx;
	}

	.userNumTitle {
		display: block;
		font-size: 34rpx;
		color: #fff;
	}

	.userOrderBox {
		margin: 340rpx 20rpx 30rpx;
		background-color: #fff;
		box-shadow: 0rpx 5rpx 10rpx 0rpx #0587e21c;
		border-radius: 20rpx;
		z-index: 99;
		position: relative;
	}

	.orderTitle {
		padding: 30rpx;
		border-bottom: 2rpx #f2f2f2 solid;
	}

	.orderTitleText {
		display: inline-block;
		vertical-align: middle;
		width: calc(100% - 200rpx);
		color: #000;
		font-size: 38rpx;
		font-weight: 600;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.orderTitleMore {
		display: inline-block;
		vertical-align: middle;
		width: 200rpx;
		color: #777;
		font-size: 32rpx;
		text-align: right;
	}

	.orderContent {
		display: flex;
		justify-content: space-around;
		padding: 30rpx 0;
	}

	.orderContentItem {
		text-align: center;
	}

	.orderContentItemNum {
		display: block;
		font-size: 40rpx;
		font-weight: bold;
		color: #000;
		margin-bottom: 30rpx;
	}

	.orderContentItemTitle {
		display: block;
		font-size: 34rpx;
		color: #000;
	}

	.moreServiceBox {
		margin: 30rpx 20rpx;
		background-color: #fff;
		box-shadow: 0rpx 5rpx 10rpx 0rpx #0587e21c;
		border-radius: 20rpx;
		z-index: 99;
		position: relative;
	}

	.moreServiceTitle {
		padding: 40rpx 20rpx 20rpx;
		vertical-align: middle;
		color: #000;
		font-size: 38rpx;
		font-weight: 600;
	}

	.moreServiceContent {
		padding: 0 20rpx 20rpx;
	}

	.serviceContentItem {
		padding: 20rpx 0;
	}

	.serviceContentItem+.serviceContentItem {
		border-top: 2rpx #f2f2f2 solid;
	}

	.serviceContentItemImg {
		display: inline-block;
		width: 60rpx;
		height: 60rpx;
		vertical-align: middle;
		margin-right: 20rpx;
	}

	.serviceContentItemTitle {
		display: inline-block;
		vertical-align: middle;
		width: calc(100% - 120rpx);
		color: #000;
		font-size: 36rpx;
	}

	.serviceContentItemIcon {
		display: inline-block;
		width: 40rpx;
		height: 40rpx;
		vertical-align: middle;
		text-align: right;
	}

	/* 自定提示弹窗 */
	.popMask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.2);
		line-height: 1 !important;
		z-index: 99;
	}

	.popContent {
		width: 80%;
		line-height: 1 !important;
	}

	.popTips {
		width: 100%;
		font-size: 44rpx;
		color: #333;
		font-weight: bold;
		text-align: center;
		padding: 30rpx 0;
		line-height: 1 !important;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
	}

	.popImg {
		width: 100%;
		height: 600rpx;
		border-radius: 0 0 30rpx 30rpx;
	}

	.popClose {
		margin-top: 30rpx;
		width: 100rpx;
		height: 100rpx;
		margin-left: calc(50% - 50rpx);
	}

	.popBody {
		width: calc(100% - 40rpx);
		padding: 20rpx 20rpx 30rpx;
		font-size: 36rpx;
		color: #333;
		line-height: 1.5 !important;
		background-color: #fff;
	}

	.fway-form-input {
		display: block;
		height: 90rpx;
		line-height: 90rpx;
		width: calc(100% - 20rpx);
		text-align: center;
		padding: 0 10rpx;
		font-size: 36rpx;
		background-color: #f7f7f7;
		white-space: nowrap;
		overflow-y: hidden;
		border-radius: 10rpx;
	}

	.bindedTips {
		width: calc(100%);
		line-height: 40rpx;
		font-size: 36rpx;
		text-align: center;
	}

	.errorTips {
		width: calc(100%);
		line-height: 40rpx;
		padding: 30rpx 0 0;
		font-size: 32rpx;
		color: #d9001bfe;
	}

	.popBtnBox {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 10rpx 0;
		background-color: #fff;
		border-top: 2rpx #ebebeb solid;
		border-radius: 0 0 30rpx 30rpx;
	}

	.popBtn {
		width: 50%;
		padding: 20rpx 0;
		text-align: center;
		font-size: 36rpx;
		letter-spacing: 2rpx;
		line-height: 1 !important;
	}

	.popBtn+.popBtn {
		border-left: 2rpx #ebebeb solid;
	}
	
	.loginPopBtn{
		width: 90%;
		text-align: center;
		background-color: #07c160;
		color: #fff;
		font-size: 32rpx;
		border-radius: 50rpx;
		line-height: 2.5;
		margin-left: 5%;
		margin-bottom: 30rpx;
	}
</style>