You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
441 lines
10 KiB
441 lines
10 KiB
<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>
|