demo-library/library-activity/src/views/index.vue

<template>
	<div class="main">
		<!-- <div class="index-header">当前活动</div> -->
		<div class="active-main">
			<div class="active-list">
				<div class="active-item" @click="toActiveDetail">
					<div class="active-img">
						<img src="@assets/images/bookimg.png" alt="" />
						<span>限选3册</span>
					</div>
					<div class="active-info">
						<div class="active-info-top">
							<h4>你选书，我买单</h4>
							<span></span>
						</div>
					</div>
					<div class="active-time">
						活动时间：2023/10/1 - 2023/12/31
					</div>
					<div class="active-bottom">
						<p class="active-slogn">新书 · 选书· 下单· 借阅</p>
						<span class="active-btn" @click.stop="toBookList"></span>
					</div>
				</div>
				<div class="active-item">
					<div class="active-img">
						<img src="@assets/images/bookimg.png" alt="" />
						<span>限选3册</span>
					</div>
					<div class="active-info">
						<div class="active-info-top">
							<h4>你选书，我买单</h4>
							<span>活动仅剩最后3天</span>
						</div>
					</div>
					<div class="active-time">
						活动时间：2023/10/1 - 2023/12/31
					</div>
					<div class="active-bottom">
						<p class="active-slogn">新书 · 选书· 下单· 借阅</p>
						<span class="active-btn"></span>
					</div>
				</div>
				<div class="active-item">
					<div class="active-img">
						<img src="@assets/images/bookimg.png" alt="" />
						<span>限选3册</span>
					</div>
					<div class="active-info">
						<div class="active-info-top">
							<h4>你选书，我买单</h4>
							<span>12.13 09:00开始</span>
						</div>
					</div>
					<div class="active-time">
						活动时间：2023/10/1 - 2023/12/31
					</div>
					<div class="active-bottom">
						<p class="active-slogn">新书 · 选书· 下单· 借阅</p>
						<span class="active-btn wait-btn"></span>
					</div>
				</div>
			</div>
			<div class="active-nodata">
				<img src="@assets/images/nodata.png" alt="" />
			</div>
		</div>
		<TabBar :tabCur.sync="data.tabCur" />
	</div>
</template>

<script>
import { reactive, computed, onMounted, getCurrentInstance } from 'vue'
import TabBar from '@/components/tabBar/index.vue'
import { useStore, mapGetters } from 'vuex'
import { useRoute } from 'vue-router'
import { isWeiXin } from '@/utils/tool.js'
import { Toast } from 'vant'

export default {
	components: { TabBar },
	setup() {
		const store = useStore()
		const { proxy } = getCurrentInstance()
		const data = reactive({
			tabCur: 0,
			isWeiXin: true,
			weChatUserInfo: {},
			showLoginDialog: false,
			isTryOutLogin: true,
			key: '',
			iv: '',
		})
		onMounted(async () => {
			data.isWeiXin = isWeiXin()
			data.key = CryptoJS.enc.Utf8.parse('0yxk2020aiyx2021')
			data.iv = CryptoJS.enc.Utf8.parse('0yxk2020aiyx2021')
			let option = proxy.$route.query
			if (option.sid) {
				localStorage.setItem('aiyxSid', option.sid)
				// 外部试用
				if (option.sid == 'aiyxlibmultimediaadmin') {
					ToTryLogin()
					data.isTryOutLogin = false
					localStorage.setItem('isTryout', 1)
				}
			}

			/* 登录判断 */
			proxy.isLogin(option)

			const userData = localStorage.getItem('userData') || ''
			if (userData) {
			}
		})
    let toBookList = () => {
      proxy.$router.push({ path: '/BookList' })
    }
    let toActiveDetail = () => {
      proxy.$router.push({ path: '/ActiveDetail' })
    }
		let Encrypt = (o) => {
			if (typeof o === 'string') {
				if (o) {
					var srcs = CryptoJS.enc.Utf8.parse(o)
					return CryptoJS.AES.encrypt(srcs, data.key, {
						keySize: 128 / 8,
						iv: data.iv,
						mode: CryptoJS.mode.CBC,
						padding: CryptoJS.pad.Pkcs7,
					}).toString()
				}
			} else if (typeof o === 'object') {
				for (var _o in o) {
					if (o[_o]) {
						var srcs = CryptoJS.enc.Utf8.parse(o[_o])
						o[_o] = CryptoJS.AES.encrypt(srcs, data.key, {
							keySize: 128 / 8,
							iv: data.iv,
							mode: CryptoJS.mode.CBC,
							padding: CryptoJS.pad.Pkcs7,
						}).toString()
					}
				}
			}
			return o
		}
		// 试用直接登录
		let ToTryLogin = () => {
			let param = {
				Phone: 'a0c82379-37c1-d2e3-a2bf-82e0d081787c',
				Pwd: Encrypt('123456'),
			}
			proxy.$http
				.post(proxy.$API.LOGIN, param, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
					},
				})
				.then((res) => {
					if (res.type == 200) {
						localStorage.setItem(
							'userData',
							JSON.stringify(res.data)
						)
						localStorage.setItem(
							'userphone',
							'a0c82379-37c1-d2e3-a2bf-82e0d081787c'
						)
						if (localStorage.getItem('actOnlinePage')) {
							const actionUrl =
								localStorage.getItem('actonlineLink')
							location.href = actionUrl
						} else {
							location.href = '/'
						}
					} else if (res.type == 403) {
						Toast(res.content)
						setTimeout(() => {
							// let url = '/ChangeMineCard?custId=' + res.data.custId
							// proxy.$router.push(url)
						}, 1000)
					} else {
						Toast(res.content)
					}
				})
				.catch((res) => {
					console.log(res)
				})
		}
		/* 登录判断 */
		let isLogin = (option) => {
			/* 如果微信code 存在， 则获取微信用户信息进行微信登录或者注册 */
			if (option.code) {
				localStorage.setItem('aiyxWeChatLoginStatus', 'noLogin')
				proxy.getWeChatUserInfo()
				localStorage.setItem('aiyxWeChatCode', option.code)
			} else {
				const userData = localStorage.getItem('userData') || ''
				if (!userData) {
					data.showLoginDialog = true
				}
			}
		}
		// 微信登录
		let weChatLogin = () => {
			if (!data.isWeiXin) {
				Toast('请使用微信登录')
				return
			}
			let homeUrl = location.protocol + '//' + location.host
			let url =
				'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd2a2989d0fb9cf1c&redirect_uri=' +
				homeUrl +
				'&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
			location.href = url
		}
		/* 获取微信用户信息 */
		let getWeChatUserInfo = () => {
			const that = data
			let option = proxy.$route.query
			let param = {
				Code: option.code || '',
			}
			proxy.$http
				.post(proxy.$API.WECHATLOGIN, param, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
					},
				})
				.then((res) => {
					if (res.type == 200) {
						data.showLoginDialog = false
						if (res.data) {
							localStorage.setItem(
								'userData',
								JSON.stringify(res.data)
							)
							localStorage.setItem('userphone', res.data.phone)
							localStorage.setItem(
								'aiyxWeChatLoginStatus',
								'isLogin'
							)
						}
						console.log('微信登录成功')
					} else if (res.type == 203 && res.data) {
						that.weChatUserInfo = res.data
						localStorage.setItem(
							'weChatUserInfo',
							JSON.stringify(that.weChatUserInfo)
						)
						// proxy.$router.push('/bindMobilePhone')
					} else {
						console.log(res.content)
					}
				})
				.catch((res) => {
					console.log(res)
				})
		}
		/* 获取token 和用户信息 */
		let getTokenAndUserInfo = () => {
			if (!location.search) {
				return
			}
			let code = proxy.$route.query.code
			if (code) {
				proxy.$http
					.get(proxy.$API.GETWECHATTOkEN, {
						params: { Code: code },
					})
					.then((res) => {
						if (res.type == 200) {
							let data = res.data
							let access_token = data.access_token
							let openid = data.openid
							proxy.$http
								.get(proxy.$API.GETWECHATUSERINFO, {
									params: {
										AccessToken: access_token,
										OpenId: openid,
									},
								})
								.then((res) => {
									if (res.type == 200) {
										let datas = res.data
										alert(
											'我的昵称是：' +
												datas.nickname +
												',我的openid是:' +
												datas.openid +
												',我的城市是:' +
												datas.city
										)
									}
								})
								.catch((res) => {
									console.log(res)
								})
						}
					})
					.catch((res) => {
						console.log(res)
					})
			}
		}
		return {
			data,
      toBookList,
      toActiveDetail,
			Encrypt,
			ToTryLogin,
			isLogin,
			getTokenAndUserInfo,
			weChatLogin,
			getWeChatUserInfo,
		}
	},
}
</script>

<style lang="scss" scoped>
.index-header {
	padding: 0 0.32rem;
	height: 1.125rem;
	line-height: 1.125rem;
	font-size: 0.5rem;
	color: #fff;
	background-color: #5a86f4;
}
.active-main{
  padding-bottom: 1.2rem;
}
.active-list {
	padding: 0 .16rem;
	font-size: 0.24rem;
	color: #191a1a;
	.active-item {
		background-color: #fff;
		margin-top: 0.2rem;
		box-shadow: 0px 0.0375rem 0.75rem 1px rgba(0, 0, 0, 0.08);
		border-radius: 0.1rem;
		.active-img {
			position: relative;
			img {
				display: block;
				width: 100%;
			}
			span {
				position: absolute;
				top: 0;
				left: 0;
				display: block;
				padding: 0 0.1rem;
				height: 0.6rem;
				line-height: 0.6rem;
				font-size: 0.24rem;
				text-align: center;
				color: #fff;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 0.08rem 0 0.08rem 0;
			}
		}
		.active-info {
			margin-top: 0.2rem;
			padding: 0 0.2rem;
			.active-info-top {
				display: flex;
				justify-content: flex-start;
				h4 {
					margin-right: 0.125rem;
					font-size: 0.36rem;
					font-weight: 800;
				}
				span {
					margin-top: 0.17rem;
					color: #f3a916;
				}
			}
		}
		.active-time {
			padding: 0 0.2rem 0 0.55rem;
			background: url('@assets/images/time.png') no-repeat 0.2rem center;
			background-size: 0.26rem 0.26rem;
		}
		.active-bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0.12rem 0.2rem 0.2rem 0.2rem;
			.active-slogn {
				position: relative;
				height: 0.44rem;
				line-height: 0.44rem;
				font-size: 0.2rem;
				padding: 0 0.12rem;
				background-color: #f4f6fc;
				border-radius: 0.05rem;
				&::before {
					content: '';
					position: absolute;
					top: -0.08rem;
					left: 0.12rem;
					width: 0.14rem;
					height: 0.14rem;
					background: url('@assets/images/yh1.png') no-repeat;
					background-size: 100% 100%;
				}
				&::after {
					content: '';
					position: absolute;
					bottom: -0.08rem;
					right: 0.12rem;
					width: 0.14rem;
					height: 0.14rem;
					background: url('@assets/images/yh2.png') no-repeat;
					background-size: 100% 100%;
				}
			}
			.active-btn {
				width: 1.83rem;
				height: 0.6rem;
				background: url('@assets/images/btn1.png') no-repeat;
				background-size: 100% 100%;
				&.wait-btn {
					background: url('@assets/images/btn2.png') no-repeat;
					background-size: 100% 100%;
				}
			}
		}
	}
}

.active-nodata {
	img {
		display: block;
		width: 4rem;
		margin: 0 auto;
	}
}
</style>