hwnc/pagesD/pages/set/set.vue

<template>
	<view :class="[AppTheme]" class="container">
		<view class="top">
			<view class="list-cell b-b m-t" @click="upload" hover-class="cell-hover" :hover-stay-time="50">
				<text class="cell-tit">头像:</text>
				<view class="upload-img left" v-if="!touPic">
					<image class="portrait" :src="siteinfo.root_img+'/static/app/imgs/mine/upload.png'" mode=""></image>
				</view>
				<view class="icon" v-if="touPic">
					<image class="portrait" :src="touPic" mode=""></image>
				</view>
				<text class="cell-more yticon icon-you"></text>
			</view>
			<view class="list-cell m-t b-b" @click="goCname" hover-class="cell-hover" :hover-stay-time="50">
				<text class="cell-tit">昵称:</text>
				<text class="left">{{ userInfo.nickname ? userInfo.nickname : name }}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="list-cell m-t b-b" @click="gorenzheng" hover-class="cell-hover" :hover-stay-time="50">
				<text class="cell-tit">实名认证:</text>
				<text class="left">{{ auth }}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>

		<view class="bottom">
			<!-- 	<view class="list-cell b-b" @click="goZfb" hover-class="cell-hover" :hover-stay-time="50">
				<text class="cell-tit">绑定支付宝：</text>
				<text class="left">{{zfb}}</text>
				<text class="cell-more yticon icon-you"></text>
			</view> -->
			<!-- #ifdef APP-PLUS -->
			<view @click="bindwexin(3)" class="list-cell b-b" hover-class="cell-hover" :hover-stay-time="50">
				<text class="cell-tit">绑定微信：</text>
				<text
					class="left">{{ userInfo.openid == '' ? '未授权' : '已授权' || wxUserInfo.openid ? '已授权' : '未授权' }}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view @click="getCode()" class="list-cell b-b" hover-class="cell-hover" :hover-stay-time="50">
				<text class="cell-tit">绑定微信：</text>
				<text
					class="left">{{ userInfo.openid == '' ? '未授权' : '已授权' || wxUserInfo.openid ? '已授权' : '未授权' }}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<!-- #endif -->
			<view class="list-cell b-b" @click="goChangemima" hover-class="cell-hover" :hover-stay-time="50">
				<text class="cell-tit">支付密码：</text>
				<text class="left">{{ mima }}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="list-cell b-b" @click="navTo" hover-class="cell-hover" :hover-stay-time="50">
				<text class="cell-tit">收货地址：</text>
				<text class="left">{{ dizhi }}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<!-- #ifdef APP-PLUS -->
			<view class="list-cell b-b" hover-class="cell-hover" :hover-stay-time="50" @click="checknew">
				<text class="cell-tit">系统版本：</text>
				<text class="left">{{ version }}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<!-- #endif -->
			<view class="list-cell log-out-btn " @click="toLogout"><text class="cell-tit bg-linear-gradient">退出登录</text>
			</view>
		</view>
		<!-- #ifdef APP-PLUS -->
		<updatepage class='updatepage' ref="vupdate" :isUpdate="isUpdate"></updatepage>
		<!-- #endif -->
	</view>
</template>

<script>
	import mineApi from '@/api/mine/index.js';
	import update from "@/api/update/index.js"
	import {
		getSign
	} from '../../../api/appsecret.js';
	import {
		pathToBase64
	} from "@/js/pathto64.js"

	import {
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				primary: this.$theme.primary,
				version: "0.0.0",
				flag: false,
				name: '去设置',
				touPic: '',
				fileList: [],
				userInfo: {},
				zfb: '去绑定',
				mima: '去设置',
				dizhi: '去添加',
				wxUserInfo: {},
				auth: '',
				siteinfo: getApp().globalData.siteinfo,
				headimg: '',
				isUpdate: false,
				appid: ''
			};
		},
		onLoad(options) {
			let that = this;
			let config = that.$init_config(1, function(res) {
				if (res && res.app) {
					that.appid = res.app.wxgzhappid;
				}
			});
			// #ifdef APP
			that.getVersionAndPlatform() //检测当前版本号
			// #endif
			that.wxUserInfo = uni.getStorageSync('wxUserInfo');
			mineApi.vipIndex().then(ret => {
				if (ret.status == 200) {
					that.touPic = ret.data.vip.headimgurl;
					that.userInfo = ret.data.data;
					if (ret.data.data.is_auth == 0) {
						that.renzhengcode = "未认证"
					} else if (ret.data.data.is_auth == 1) {
						that.renzhengcode = "审核中"
					} else if (ret.data.data.is_auth == 2) {
						that.renzhengcode = "已通过"
					} else {
						that.renzhengcode = "已驳回"
					}
					if (ret.data.data.pay_password) {
						that.mima = "已设置"
					}
					if (ret.data.hasaddr == 1) {
						that.dizhi = '已添加';
					}
					if (ret.data.data.is_auth == 0) {
						that.auth = '未认证';
					}
					if (ret.data.data.is_auth == 1) {
						that.auth = '审核中';
					}
					if (ret.data.data.is_auth == 2) {
						that.auth = '已认证';
					}
				}
			});
		},
		methods: {
			checknew() {
				this.$refs.vupdate.upgrade();
			},
			getCode() {
				let redirect = encodeURIComponent(window.location.href); //重定向回来的地址
				let wx_code = this.getUrlParam("code"); // 截取url中的code
				//判断有没有code
				if (!wx_code) {
					//获取code的地址。获取成功重定向后地址栏中将会带有code，判断没有code的话，就跳转到微信官方链接上获取，获取成功后会再重定向回来，注意url是需要使用encodeURIComponent处理一下编码的
					window.location.href =
						`https://open.weixin.qq.com/connect/oauth2/authorizeappid=${this.appid}&redirect_uri=${redirect}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;
				} else {
					// 获取到了code
					this.getOpenId(wx_code); //把code传给后台获取用户信息
				}
			},
			getUrlParam: function(name) {
				let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				let r = window.location.search.substr(1).match(reg);
				if (r != null) return unescape(r[2]);
				return null;
			},
			getOpenId(code) {
				mineApi.bindwx({
					type: 2,
					code: code
				})
			},
			bindwexin(index) { //绑定微信
				let that = this
				if (index == 3) {
					uni.login({
						provider: 'weixin',
						// onlyAuthorize: true,
						success: function(loginRes) {
							uni.getUserInfo({
								provider: 'weixin',
								success: function(userinfoRes) {
									let formdata = {
										type: index,
										openid: userinfoRes.userInfo.openId,
										nickname: userinfoRes.userInfo.nickName,
										sex: userinfoRes.userInfo.gender,
										headimgurl: userinfoRes.userInfo.avatarUrl,
									}
									mineApi.bindwx(formdata)
										.then(res => {
											console.log(res)
											if (res.code === 1) {
												uni.showToast({
													title: res.msg,
													icon: "none"
												})
												that.weixinbind = true
												that.editsuccess()
											} else {
												uni.showToast({
													title: res.msg,
													icon: "none"
												})
												that.weixinbind = false
											}
										})
								},
								fail: function() {
									uni.showToast({
										title: res.msg,
										icon: "none"
									})
								}
							})
						},
						fail: function() {
							uni.showToast({
								icon: 'none',
								title: '登陆失败'
							})
						}
					})
				} else if (index == 2) {}
			},
			image(imgurl) { //imgurl   本地图片路径
				let that = this
				var img = imgurl;

				function getBase64Image(img) {
					var canvas = document.createElement("canvas");
					canvas.width = img.width;
					canvas.height = img.height;
					var ctx = canvas.getContext("2d");
					ctx.drawImage(img, 0, 0, img.width, img.height);
					var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
					var dataURL = canvas.toDataURL("image/" + ext);
					return dataURL;
				}

				var image = new Image();
				image.src = img;
				image.onload = function() {
					var base64 = getBase64Image(image); //转换之后的图片路径
					that.headimg = base64
					console.log(that.headimg, "base640000000")
				}
			},
			upload() {
				let that = this;
				// #ifdef MP-WEIXIN
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						uni.getFileSystemManager().readFile({
							filePath: res.tempFilePaths[0], //选择图片返回的相对路径
							encoding: 'base64', //编码格式
							success: v => {
								//成功的回调
								let base64 = 'data:image/jpeg;base64,' + v.data;
								mineApi.addheadimg({
										pic: base64
									})
									.then(res => {
										if (res.status == 200) {
											that.touPic = res.data;
										}
									});
							}
						});
					}
				});

				// #endif
				// #ifdef H5 || APP-PLUS
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						pathToBase64(res.tempFilePaths[0]).then(base64 => {
							console.log(base64, "base64")
							mineApi.addheadimg({
								pic: base64
							}).then(res => {
								that.touPic = res.data.show;
							})
						})
					}
				})
				// #endif
			},
			goCname() {
				uni.navigateTo({
					url: '/pagesD/pages/set/cname/cname?name=' + this.name
				});
			},
			goChangemima() {
				uni.navigateTo({
					url: '/pagesD/pages/set/changemima/changemima'
				});
			},
			gorenzheng() {
				uni.navigateTo({
					url: '/pagesD/pages/set/renzheng/renzheng'
				});
			},
			...mapMutations(['logout']),
			navTo(url) {
				uni.navigateTo({
					url: '/pagesD/pages/address/address'
				});
			},
			//退出登录
			toLogout() {
				uni.showModal({
					title: '提示',
					content: '确定退出登录吗？',
					success: e => {
						if (e.confirm) {
							this.logout();
							setTimeout(() => {
								uni.clearStorage()
								uni.navigateBack();
							}, 200);
						}
					}
				});
			},
			//switch
			switchChange(e) {
				let statusTip = e.detail.value ? '打开' : '关闭';
				this.$api.msg(`${statusTip}消息推送`);
			},
			getVersionAndPlatform() {
				plus.runtime.getProperty(plus.runtime.appid, (inf) => {
					this.version = inf.version
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}

	.portrait {
		width: 90upx;
		height: 90upx;
		border-radius: 50%;
		display: inline-block;
	}

	.upload-img {
		height: 100%;

		image {
			width: 60rpx;
			height: 60rpx;
			// padding: 10rpx;
			border: 1px solid #ccc;
		}
	}

	.icon {
		position: relative;
		top: 15rpx;
		height: 100%;

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

	.list-cell {
		display: flex;
		align-items: baseline;
		padding: 20upx $page-row-spacing;
		line-height: 60upx;
		position: relative;
		background: #fff;
		justify-content: center;

		&.log-out-btn {
			margin-top: 40upx;
			height: 80rpx;

			.cell-tit {
				color: #fff;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				margin-right: 0;
				border-radius: 10rpx;
				// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
			}
		}

		.left {
			position: absolute;
			right: 70rpx;
			font-size: 28rpx;
			color: #999;
		}

		&.cell-hover {
			background: #fafafa;
		}

		&.b-b:after {
			left: 30upx;
		}

		&.m-t {
			margin-bottom: 16rpx;
		}

		.cell-more {
			align-self: baseline;
			font-size: $font-lg;
			color: $font-color-light;
			margin-left: 10upx;
		}

		.cell-tit {
			flex: 1;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			margin-right: 10upx;
		}

		.cell-tip {
			font-size: $font-base;
			color: $font-color-light;
		}

		switch {
			transform: translateX(16upx) scale(0.84);
		}
	}
</style>