298 lines
6.7 KiB
Vue
298 lines
6.7 KiB
Vue
<template>
|
|
<view class="pages-user-login " v-if="isLoad">
|
|
<view class="page-height flex-center flex-column" v-if="launchFlag">
|
|
<image mode="aspectFill" lazy-load class="logo-img mb-md" :src="base_info.app_logo"></image>
|
|
<view class="f-caption c-caption">{{base_info.app_text}}</view>
|
|
<view @tap="$refs.show_rule_item.open()" class="wechat-login flex-center f-title c-base"><i
|
|
class="iconfont icon-weixin mr-sm"></i>微信登录
|
|
</view>
|
|
</view>
|
|
<view v-else>
|
|
<view class="swiper">
|
|
<swiper class="swiper-list" interval="3000" :show-indicators="false" :autoplay="autoPlay"
|
|
@change="sliderChange" :infinite="false" :forbid-slide-animation="false">
|
|
<swiper-item class="swiper-item" v-for="(item, index) in base_info.app_banner" :key="index">
|
|
<view @click="launchAppIndex" class="swiper-item-img">
|
|
<image mode="aspectFill" lazy-load class="banner-img" :src="item" />
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
<!-- @click="launchApp" -->
|
|
<view class="swiper-to-home flex-center f-caption c-base radius abs" v-if="time>0">
|
|
跳过 {{time}}s
|
|
</view>
|
|
<view class="dots" v-if="base_info.app_banner.length>1">
|
|
<view class="dot"
|
|
:style="{background:aindex==currIndex?primaryColor:'',width:aindex==currIndex?'30rpx':''}"
|
|
v-for="(aitem,aindex) in base_info.app_banner" :key="aindex"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<uni-popup ref="show_rule_item" type="center" :maskClick="false">
|
|
<view class="common-popup-content fill-base pd-lg radius-34">
|
|
<view class="title">温馨提示</view>
|
|
<view class="f-desc c-title mt-lg">
|
|
登录即表示您已详细阅读并同意<span @tap.stop="goDetail(1)" :style="{color:primaryColor}">
|
|
《用户隐私协议》
|
|
</span>与<span @tap.stop="goDetail(2)" :style="{color:primaryColor}">
|
|
《个人信息保护指引》
|
|
</span>
|
|
</view>
|
|
<view class="button">
|
|
<view @tap.stop="$refs.show_rule_item.close()" class="item-child">取消</view>
|
|
<view @tap.stop="wxLogin" class="item-child c-base"
|
|
:style="{background: primaryColor,color:'#fff'}">确定</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState,
|
|
mapActions,
|
|
mapMutations
|
|
} from 'vuex';
|
|
import siteInfo from '@/siteinfo.js';
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
isLoad: false,
|
|
base_info: {},
|
|
launchFlag: false,
|
|
autoPlay: false,
|
|
currIndex: 0,
|
|
time: 5,
|
|
timer: null
|
|
}
|
|
},
|
|
async onLoad() {
|
|
this.base_info = await this.$api.base.getConfig()
|
|
this.isLoad = true
|
|
let time = 5
|
|
this.timer = setInterval(() => {
|
|
if (time == 1) {
|
|
this.launchApp()
|
|
}
|
|
if (time === 0) {
|
|
clearTimeout(this.timer)
|
|
return
|
|
}
|
|
time--
|
|
this.time = time
|
|
}, 1000)
|
|
},
|
|
computed: mapState({
|
|
primaryColor: state => state.config.configInfo.primaryColor,
|
|
subColor: state => state.config.configInfo.subColor,
|
|
autograph: state => state.user.autograph,
|
|
appLogin: state => state.user.appLogin,
|
|
push_id: state => state.user.push_id,
|
|
userInfo: state => state.user.userInfo,
|
|
}),
|
|
methods: {
|
|
...mapActions(['getConfigInfo', 'getUserInfo']),
|
|
...mapMutations(['updateUserItem']),
|
|
sliderChange(e) {
|
|
this.currIndex = e.detail.current;
|
|
},
|
|
launchAppIndex() {
|
|
if (this.base_info.app_banner.length == this.currIndex * 1 + 1) {
|
|
// this.launchApp();
|
|
} else {
|
|
return;
|
|
}
|
|
},
|
|
launchApp() {
|
|
this.timer && clearTimeout(this.timer)
|
|
let {
|
|
autograph = '',
|
|
appLogin = ''
|
|
} = this
|
|
if (autograph && appLogin) {
|
|
this.toLogin(appLogin)
|
|
return
|
|
}
|
|
this.launchFlag = true
|
|
},
|
|
//微信登录
|
|
async wxLogin() {
|
|
this.$refs.show_rule_item.close()
|
|
try {
|
|
let [providerErr, providerData] = await uni.getProvider({
|
|
service: 'oauth',
|
|
});
|
|
let [loginErr, loginData] = await uni.login({
|
|
provider: 'weixin'
|
|
});
|
|
let [infoErr, infoData] = await uni.getUserInfo({
|
|
provider: 'weixin'
|
|
})
|
|
let {
|
|
userInfo = {}
|
|
} = infoData
|
|
let {
|
|
openId = ''
|
|
} = userInfo
|
|
if (!openId) return
|
|
this.$util.showLoading({
|
|
title: "登录中..."
|
|
})
|
|
userInfo.push_id = this.push_id
|
|
try {
|
|
console.log(userInfo, "=======userInfo")
|
|
this.toLogin(userInfo)
|
|
} catch (e) {
|
|
this.$util.hideAll()
|
|
}
|
|
} catch (e) {
|
|
this.$util.showToast({
|
|
title: '请先安装微信或升级版本'
|
|
});
|
|
}
|
|
},
|
|
async toLogin(userInfo) {
|
|
let user_info = await this.$api.base.logappLoginin({
|
|
data: userInfo
|
|
})
|
|
this.updateUserItem({
|
|
key: 'appLogin',
|
|
val: userInfo
|
|
})
|
|
let {
|
|
autograph,
|
|
data
|
|
} = user_info
|
|
this.$util.hideAll()
|
|
this.updateUserItem({
|
|
key: 'userInfo',
|
|
val: data
|
|
})
|
|
this.updateUserItem({
|
|
key: 'autograph',
|
|
val: autograph
|
|
})
|
|
let {
|
|
phone = ''
|
|
} = data
|
|
this.$util.goUrl({
|
|
url: phone ? `/pages/home` : `/mine/pages/phone`,
|
|
openType: `reLaunch`
|
|
})
|
|
},
|
|
goDetail(type) {
|
|
let {
|
|
siteroot
|
|
} = siteInfo
|
|
let href = siteroot.split('index.php')[0]
|
|
let page = type == 1 ? 'protocol' : 'information'
|
|
let url = `${href}${page}.html`
|
|
this.$util.goUrl({
|
|
url,
|
|
openType: 'web'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: #fff;
|
|
}
|
|
|
|
.pages-user-login {
|
|
|
|
.page-height {
|
|
height: 100vh;
|
|
}
|
|
|
|
.logo-img {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
}
|
|
|
|
.wechat-login {
|
|
width: 522rpx;
|
|
height: 98rpx;
|
|
background: linear-gradient(90deg, #177541 0%, #00BF56 99%);
|
|
box-shadow: 0 18rpx 9rpx 0 rgba(0, 188, 82, 0.07);
|
|
border-radius: 49rpx;
|
|
margin: 200rpx 0;
|
|
}
|
|
|
|
.swiper {
|
|
width: 100%;
|
|
height: 100vh;
|
|
flex-direction: column;
|
|
padding: 0;
|
|
background-size: 100% auto;
|
|
|
|
.swiper-list {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.swiper-item {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
|
|
.swiper-item-img {
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0 auto;
|
|
|
|
.banner-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.swiper-to-home {
|
|
width: 122rpx;
|
|
height: 47rpx;
|
|
z-index: 999;
|
|
right: 40rpx;
|
|
top: 80rpx;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.dots {
|
|
position: absolute;
|
|
z-index: 20rpx;
|
|
text-align: right;
|
|
width: 100%;
|
|
transform: translateY(-68rpx);
|
|
padding: 0 20rpx;
|
|
text-align: center;
|
|
|
|
.dot {
|
|
display: inline-block;
|
|
height: 12rpx;
|
|
width: 12rpx;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 12rpx;
|
|
margin: 0 8rpx;
|
|
}
|
|
|
|
.cur {
|
|
width: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|