zhibo/pages/home/index.vue

<template>
	<view class="home column">
		<view class="justify-start align-center">
			<image src="../../static/images/shipin.png" class="wh50 p20"></image>
			<view class="fs32 bold">道中</view>
		</view>
		<image :src="livedata.liveImgUrl" mode="widthFix" class="w100"></image>
		<view class="p20">
			<view class="column">
				<text class="fs32">{{livedata.liveName}}</text>
				<text class="color9 fs24 mt20">
					直播时间 {{livedata.startTime}} —— {{livedata.finishTime}}</text>
			</view>
		</view>
		<view class="p20 detail">
			<view class="jianjie mb20">简介</view>
			<view class="fs24 lh36" v-html="livedata.liveDesc"></view>
		</view>
		<view class="p12 bgf bot-box">
			<view class="center" @click="comelive">进入直播间</view>
		</view>
		<u-popup :show="iskefu" @close="close" @open="open" round='20rpx' bgColor='#fffee1'>
			<view class="addchat p20">
				<view class="u-flex-row-reverse u-flex">
					<u-icon name="close" size="18" @click="showadd=!showadd"></u-icon>
				</view>
				<view class="column align-center">
					<view class="fs36" style="color: #ff5c03;">扫码添加助教老师</view>
					<view class="fs28 color6">扫码添加助教老师</view>
					<view class="p10 mt40" style="border: #ff5c03 solid 2rpx;">
						<image :src="codeimg" class="wh180" @touchstart="longPress" @touchend="cancelLongPress">
						</image>
					</view>
					<view class="color6 mt20">长按识别二维码</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		loginByMp,
		testlogin,
		getlive
	} from '@/api/home'
	// // 判断是否在微信环境
	const isWechat = () => {
		return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
	}
	export default {
		data() {
			return {
				isLogin:false,
				code: '',
				livedata: {},
				path: 'http://live.ylrzcloud.com/prod-api',
				iskefu: false,
				isLongPress: false, // 是否长按
				timeout: null, // 计时器
				liveId: 2
			}
		},
		onLoad(option) {
			this.a()
			// if (this.code) {
			// 	this.loginByMp()
			// } else {
			// 	this.getWechatCode()
			// }
		},
		onShow() {
			if (uni.getStorageSync('AppToken')) {
				this.getliving()
			}
		},
		methods: {
			a() {
			uni.login({
				provider: "weixin",
				success: async loginRes => {
					let code = loginRes.code
					console.log("that.code",code)
				}
			})},
			open() {

			},
			close() {
				this.iskefu = !this.iskefu
			},
			longPress() {
				this.timeout = setTimeout(() => {
					this.isLongPress = true;
					// 执行保存图片的操作
					uni.saveImageToPhotosAlbum({
						filePath: this.livedata.qwQrCode, // 图片的本地路径或网络路径
						success: () => {
							uni.showToast({
								title: '保存成功'
							});
						},
						fail: () => {
							uni.showToast({
								title: '保存失败',
								icon: 'none'
							});
						}
					});
				}, 500); // 设置长按的阈值时间，这里是500毫秒
			},
			cancelLongPress() {
				clearTimeout(this.timeout);
				this.isLongPress = false;
			},
			getliving() {
				const param = {
					id: this.liveId
				}
				getlive(param).then(res => {
					if (res.code == 200) {
						this.livedata = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			getWechatCode() {
				// 没有code
				if (isWechat) {
					let appid = "wx93ce67750e3cfba3"; //微信APPid
					let code = this.getUrlCode().code; //是否存在code
					// 换成本地就不行
					// let local = window.location.href; //这个是获取浏览器当前地址 有参数都会一起获取
					let local = window.location.href.split('#')[0];
					if (code == null || code === "") {
						window.location.href =
							"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
							appid +
							"&redirect_uri=" +
							encodeURIComponent(local) +
							"&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
					} else {
						this.code = code;
						this.loginByMp()
					}
				}
			},
			loginByMp() {
				if (this.code == null) {
					return;
				}
				uni.showLoading({
					title: "处理中..."
				});
				let that = this;
				var data = {
					code: this.code
				}
				loginByMp(data).then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							// 登录后存token和用户信息
							console.log(res)
							uni.setStorageSync('AppToken', res.token);
							uni.setStorageSync('userInfo', JSON.stringify(res.user));
							let beforLoginUrl = uni.getStorageSync('beforLoginPage');
							// console.log(`登录成功后跳转${beforLoginUrl}`);
							//登录之后跳转的页面
							uni.reLaunch({
								url: beforLoginUrl
							});
							uni.showToast({
								title: '登录成功',
								icon: 'none'
							});
							this.getliving()
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					},
					err => {}
				);
			},
			getUrlCode() {
				// 截取url中的code方法
				var url = location.search;
				var theRequest = new Object();
				if (url.indexOf("?") != -1) {
					var str = url.substr(1);
					var strs = str.split("&");
					for (var i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
					}
				}
				return theRequest;
			},
			comelive() {
				uni.setStorageSync('AppToken', null);
				if(uni.getStorageSync('AppToken')){
				uni.navigateTo({
					url: "/pages/home/living"
				})
				}else{
					uni.showToast({
						title: '请登录授权！',
						icon: 'none'
					});
					uni.navigateTo({
						url: "/pages/auth/login"
					})
				}
				
				// let nowtoken =
				// 	"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJzdWIiOiI2NjYiLCJpYXQiOjE3NTE4NzQ0NzEsImV4cCI6MTc4MzQxMDQ3MX0.3uxTTb0qXygmaY9ItovMclxJCNhNEi6kFEqmfLGg4lP2PYzCPODsVjW4PjXNu6EYsl5eYyESltHWcwBnaNkilQ&signature=ff21bfb41ddd5f2e31d6f5bf32ec565aab9c518614d139fa26727468ce701237"
				// uni.setStorageSync('AppToken', nowtoken);
				// if (this.isLogin) {
				// 	uni.navigateTo({
				// 		url: "/pages/home/living"
				// 	})
				// } else {
					
				// 	uni.navigateTo({
				// 		url: "/pages/login/login"
				// 	})
				// }

				// uni.navigateTo({
				// 	url: "/pages/home/live"
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.jianjie {
		font-size: 32rpx;
		width: fit-content;
		border-bottom: $--base-color solid 4rpx;
	}

	.detail {
		border-top: solid #f5f5f5 12rpx;
	}

	.bot-box {
		border-top: #f5f5f5 solid 2rpx;
		position: fixed;
		bottom: 0;
		width: 100%;

		view {
			width: 80%;
			margin: 0 auto;
			height: 80rpx;
			display: flex;
			align-items: center;
			background-color: $--base-bg;
			color: #fff;
			border-radius: 100rpx;
		}
	}

	.addchat {
		height: 450rpx;
	}
</style>