Skip to content

A
antaile-web
Commit 9bf61628 by wangyalan-git
Options

时光纪页面效果/展示预览/协议接口/时光纪接口对接

parent 207bd2ca
Showing with 884 additions and 275 deletions
package-lock.json
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
...@@ -9,13 +9,17 @@ ...@@ -9,13 +9,17 @@
}, },
"dependencies": { "dependencies": {
"animate.css": "^3.5.1", "animate.css": "^3.5.1",
"axios": "^0.21.1",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"element-ui": "^2.15.1", "element-ui": "^2.15.1",
"js-cookie": "^2.2.1",
"lib-flexible": "^0.3.2", "lib-flexible": "^0.3.2",
"locomotive-scroll": "^4.1.1",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-router": "^3.5.1", "vue-router": "^3.5.1",
"vue-seamless-scroll": "^1.1.23", "vue-seamless-scroll": "^1.1.23",
"vue-video-player": "^5.0.2" "vue-video-player": "^5.0.2",
"vuex": "^3.6.2"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-babel": "~4.5.0",
......
src/api/index.js 0 → 100644
import request from '@/utils/request'
// 协议
export function getProtocol(params) {
return request({
url: '/atlProtocol/getProtocol',
method: 'get',
params
})
}
// 获取官网时光纪
export function selectOfficialWebsiteAtlTime(params) {
return request({
url: '/atlTime/selectOfficialWebsiteAtlTime',
method: 'get',
params
})
}
export function selectRandomAtlTime(params) {
return request({
url: '/atlTime/selectRandomAtlTime',
method: 'get',
params
})
}
src/assets/js/script.js 0 → 100644
import LocomotiveScroll from "locomotive-scroll";
class Example {
constructor(options) {
this.root = options.root;
this.init();
setTimeout(this.showImages.bind(this), 1000);
}
init() {
this.scroll = new LocomotiveScroll({
el: this.root,
direction: "horizontal",
smooth: true,
lerp: 0.05,
tablet: {
smooth: true,
},
smartphone: {
smooth: true,
},
});
this.images = this.root.querySelectorAll(".image");
[].forEach.call(this.images, (image) => {
image.addEventListener("click", () => {
image.classList.add("-clicked");
console.log("this.images", image.classList);
this.hideImages();
});
});
}
showImages() {
console.log("show");
[].forEach.call(this.images, (image) => {
image.classList.remove("-clicked");
image.classList.add("-active");
});
}
hideImages() {
console.log("hide");
[].forEach.call(this.images, (image) => {
image.classList.remove("-active");
});
setTimeout(this.showImages.bind(this), 2000);
}
}
export default Example;
src/assets/styles/locomotive-scroll.min.css 0 → 100644
/*! locomotive-scroll v4.0.6 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */html.has-scroll-smooth{overflow:hidden}html.has-scroll-dragging{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.has-scroll-smooth body{overflow:hidden}.has-scroll-smooth [data-scroll-container]{min-height:100vh}[data-scroll-direction=horizontal] [data-scroll-container]{height:100vh;display:inline-block;white-space:nowrap}[data-scroll-direction=horizontal] [data-scroll-section]{display:inline-block;vertical-align:top;white-space:nowrap;height:100%}.c-scrollbar{position:absolute;right:0;top:0;width:11px;height:100%;transform-origin:center right;transition:transform .3s,opacity .3s;opacity:0}.c-scrollbar:hover{transform:scaleX(1.45)}.c-scrollbar:hover,.has-scroll-dragging .c-scrollbar,.has-scroll-scrolling .c-scrollbar{opacity:1}[data-scroll-direction=horizontal] .c-scrollbar{width:100%;height:10px;top:auto;bottom:0;transform:scaleY(1)}[data-scroll-direction=horizontal] .c-scrollbar:hover{transform:scaleY(1.3)}.c-scrollbar_thumb{position:absolute;top:0;right:0;background-color:#000;opacity:.5;width:7px;border-radius:10px;margin:2px;cursor:-webkit-grab;cursor:grab}.has-scroll-dragging .c-scrollbar_thumb{cursor:-webkit-grabbing;cursor:grabbing}[data-scroll-direction=horizontal] .c-scrollbar_thumb{right:auto;bottom:0}
\ No newline at end of file
src/assets/styles/normalize.min.css 0 → 100644
button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0} menu,article,aside,details,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{}button,select{text-transform:none}[type=submit], [type=reset],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}/*# sourceMappingURL=normalize.min.css.map */
\ No newline at end of file
src/assets/styles/style.css 0 → 100644
html,
body {
height: 100%;
background: #eee;
}
body {
overflow: hidden;
}
.scroll-animations-example > .scrollsection {
padding: 10vh 10vh 10vh 10vmax;
min-width: 550vh;
}
.scroll-animations-example > .scrollsection > .item {
display: inline-block;
position: relative;
margin: 0 -30vh 0 3vh;
}
.scroll-animations-example > .scrollsection > .item::before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.scroll-animations-example > .scrollsection > .item.-big {
height: 80vh;
width: 60vh;
}
.scroll-animations-example > .scrollsection > .item.-big.-horizontal {
height: 60vh;
width: 80vh;
}
.scroll-animations-example > .scrollsection > .item.-normal {
height: 60vh;
width: 45vh;
z-index: 1;
}
.scroll-animations-example > .scrollsection > .item.-normal.-horizontal {
height: 45vh;
width: 60vh;
}
.scroll-animations-example > .scrollsection > .item.-normal:nth-of-type(3n) {
bottom: 5vh;
}
.scroll-animations-example > .scrollsection > .item.-normal:nth-of-type(4n) {
bottom: -5vh;
}
.scroll-animations-example > .scrollsection > .item.-small {
height: 40vh;
width: 30vh;
z-index: 2;
}
.scroll-animations-example > .scrollsection > .item.-small.-horizontal {
height: 30vh;
width: 40vh;
}
.scroll-animations-example > .scrollsection > .item.-small:nth-of-type(3n) {
bottom: 13vh;
}
.scroll-animations-example > .scrollsection > .item.-small:nth-of-type(4n) {
bottom: -13vh;
}
.scroll-animations-example > .scrollsection > .item > .image {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
filter: grayscale(1);
opacity: 0;
pointer-events: none;
transform: translateX(0) translateY(0) scale(1);
transition: filter 0.3s ease, opacity 1s ease, transform 1s ease;
}
.scroll-animations-example > .scrollsection > .item:nth-of-type(4n) > .image {
transform: translateX(-30vh) translateY(-30vh) scale(0.8);
transition-delay: 0;
}
.scroll-animations-example > .scrollsection > .item:nth-of-type(4n - 1) > .image {
transform: translateX(30vh) translateY(30vh) scale(0.8);
transition-delay: 0.05s;
}
.scroll-animations-example > .scrollsection > .item:nth-of-type(4n - 2) > .image {
transform: translateX(-30vh) translateY(30vh) scale(0.8);
transition-delay: 0.1s;
}
.scroll-animations-example > .scrollsection > .item:nth-of-type(4n - 3) > .image {
transform: translateX(-30vh) translateY(-30vh) scale(0.8);
transition-delay: 0.15s;
}
.scroll-animations-example > .scrollsection > .item > .image.-active {
transform: translateX(0) translateY(0) scale(1);
opacity: 0.8;
pointer-events: auto;
transition: filter 0.3s ease, opacity 1s ease, transform 1s ease;
}
.scroll-animations-example > .scrollsection > .item > .image.-clicked {
transform: translateX(0) translateY(0) scale(5);
opacity: 0;
pointer-events: auto;
transition: filter 0.3s ease, opacity 1s ease, transform 1s ease;
}
.scroll-animations-example > .scrollsection > .item > .image.-active:hover {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
filter: grayscale(0);
opacity: 1;
cursor: pointer;
}
src/components/Footer.vue → src/components/CustomFooter.vue
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
<script> <script>
export default { export default {
name: "footer", name: "customFooter",
props: {}, props: {},
data() { data() {
return { return {
......
src/components/Header.vue → src/components/CustomHeader.vue
...@@ -5,24 +5,24 @@ ...@@ -5,24 +5,24 @@
><img src="@/assets/images/logo.png" alt="" class="logo" ><img src="@/assets/images/logo.png" alt="" class="logo"
/></router-link> /></router-link>
<ul class="right-ul"> <ul class="right-ul">
<li>纪念馆列表</li> <li><router-link :to="{ name: 'timePeriod' }">纪念馆列表</router-link></li>
<li><router-link :to="{ name: 'appPage' }">APP下载</router-link></li> <li><router-link :to="{ name: 'appPage' }">APP下载</router-link></li>
</ul> </ul>
</div> </div>
<img src="@/assets/images/logo.png" alt="" class="logo" v-else /> <img src="@/assets/images/logo.png" alt="" class="logo" v-else />
<ul class="right-ul"> <ul class="right-ul">
<li> <li>
<img src="@/assets/images/Signin.png" alt="" class="avatar" />登录 <img src="@/assets/images/Signin.png" alt="" class="avatar" /><router-link :to="{name: 'login'}">登录</router-link>
</li> </li>
<li v-if="deviceType == 2">用户协议</li> <li v-if="deviceType == 2"><router-link :to="{ path: '/agreement',query: {type: 3} }">用户协议</router-link></li>
<li v-if="deviceType == 2">隐私协议</li> <li v-if="deviceType == 2"><router-link :to="{ path: '/agreement',query: {type: 1} }">隐私协议</router-link></li>
</ul> </ul>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "header", name: "customHeader",
data() { data() {
return { return {
deviceType: null, deviceType: null,
...@@ -38,6 +38,7 @@ export default { ...@@ -38,6 +38,7 @@ export default {
}, },
methods: {}, methods: {},
}; };
</script> </script>
......
src/components/viwModal.vue 0 → 100644
<template>
<!-- <Drawer
:visible.sync="visible"
:title="isMobilePreview ? '手机预览' : '网页预览'"
width="100%"
position="bottom"
:zIndex="3000"
> -->
<div
class="announcement-mobile"
>
<div v-if="formRef" class="ql-editor">
<h3>{{ formRef.form.name }}</h3>
<div v-html="content"></div>
</div>
</div>
<!-- </Drawer> -->
</template>
<script>
// import Drawer from '@/components/Drawer'
export default {
props: {
formRef: {
type: Object
},
visible: {
type: Boolean,
default: false
},
isMobilePreview: {
type: Boolean,
default: false
}
},
components: {
// Drawer
},
data(){
return {
content:''
}
}
}
</script>
<style lang="scss" scoped>
.announcement-preview {
max-width: 1200px;
margin: 0 auto;
}
.announcement-mobile {
width: 388px;
height: 711px;
// padding: 80px 20px;
background: url('~@/assets/images/Mobilephonebox.png') no-repeat;
background-size: 100%;
}
</style>
src/main.js
...@@ -5,8 +5,8 @@ import ElementUI from "element-ui"; ...@@ -5,8 +5,8 @@ import ElementUI from "element-ui";
import "lib-flexible"; import "lib-flexible";
import "@/assets/styles/element-variables.scss"; import "@/assets/styles/element-variables.scss";
import animated from "animate.css"; // npm install animate.css --save安装，在引入 import animated from "animate.css"; // npm install animate.css --save安装，在引入
import CustomHeader from "@/components/Header"; import CustomHeader from "@/components/CustomHeader";
import CustomFooter from "@/components/Footer"; import CustomFooter from "@/components/CustomFooter";
Vue.use(animated); Vue.use(animated);
Vue.config.productionTip = false; Vue.config.productionTip = false;
Vue.use(ElementUI); Vue.use(ElementUI);
......
src/router/index.js
...@@ -40,6 +40,17 @@ const routes = [ ...@@ -40,6 +40,17 @@ const routes = [
component: () => import('@/views/AppPage/index') component: () => import('@/views/AppPage/index')
}, },
{ {
path: '/timePeriod',
name: 'timePeriod',
component: () => import('@/views/TimePeriod/index')
},
{
path: '/preview',
name: 'preview',
component: () => import('@/views/Preview/index')
},
{
path: '/404', path: '/404',
component: () => import('@/views/ErrorPage/errorPage.vue') component: () => import('@/views/ErrorPage/errorPage.vue')
}, },
......
src/store/index.js 0 → 100644
import Vue from 'vue'
import Vuex from 'vuex'
// import { login, loginPhone, getUserInfo, accountLogin } from '@/api/login'
// import { configData } from '@/api/index'
import { getToken, setToken } from '@/utils/auth'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
token: localStorage.getItem('token') ? localStorage.getItem('token') : getToken(),
username: localStorage.getItem('username') ? localStorage.getItem('username') : '',
usericon: localStorage.getItem('usericon') ? localStorage.getItem('usericon') : '',
userid: localStorage.getItem('userid') ? localStorage.getItem('userid') : '',
shopName: localStorage.getItem('shopName') ? localStorage.getItem('shopName') : '',
email: localStorage.getItem('email') ? localStorage.getItem('email') : '',
cartnum: localStorage.getItem('cartnum') ? localStorage.getItem('cartnum') : '0',
messagenum: localStorage.getItem('messagenum') ? localStorage.getItem('messagenum') : '0',
typeList: localStorage.getItem('typeList') ? localStorage.getItem('typeList') : '',
searchType: localStorage.getItem('searchType') ? localStorage.getItem('searchType') : '0',
productType: localStorage.getItem('productType') ? localStorage.getItem('productType') : '3',
mallLogo: localStorage.getItem('mallLogo') || null,
cheapHomeLogo: localStorage.getItem('cheapHomeLogo') || null,
rentHomeLogo: localStorage.getItem('rentHomeLogo') || null,
mallName: localStorage.getItem('mallName') || null,
mallIcp: localStorage.getItem('mallIcp') || null,
isRegister: localStorage.getItem('isRegister') || null,
companyName: localStorage.getItem('companyName') || null,
mallTitle: localStorage.getItem('mallTitle') || null,
mallDesc: localStorage.getItem('mallDesc') || null,
mallKeywords: localStorage.getItem('mallKeywords') || null
},
mutations: {
SET_TOKEN(state, token) { // 存储token
state.token = token
localStorage.setItem('token', token)
setToken(token)
},
SET_USERICON(state, usericon) { // 存储用户名
state.usericon = usericon
localStorage.setItem('usericon', usericon)
},
SET_NAME(state, username) { // 存储用户名
state.username = username
localStorage.setItem('username', username)
},
SET_USERID(state, userid) { // 存储用户名
state.userid = userid
localStorage.setItem('userid', userid)
},
SET_SEARCH_TYPE(state, searchType) { // 设置搜索条件
state.searchType = searchType
localStorage.setItem('searchType', searchType)
},
SET_PRODUCT_TYPE(state, productType) { //商品类型
state.productType = productType
localStorage.setItem('productType', productType)
},
setshopName(state, shopName) { // 存储店铺名
state.shopName = shopName
localStorage.setItem('shopName', shopName)
},
delshopName(state) { // 删除店铺名
state.shopName = ''
localStorage.removeItem('shopName')
},
setEmail(state, email) { // 存储用户名
state.email = email
localStorage.setItem('email', email)
},
delEmail(state) { // 删除用户名
state.email = ''
localStorage.removeItem('email')
},
SET_CART_NUM(state, num) { // 购物车数量
state.cartnum = num
localStorage.setItem('cartnum', num)
},
DEL_CART_NUM(state) { // 购物车数量
state.cartnum = 0
localStorage.removeItem('cartnum')
},
SET_MESSAGE_NUM(state, num) { // 消息未读数量
state.messagenum = num
localStorage.setItem('messagenum', num)
},
DEL_MESSAGE_NUM(state) { // 消息未读数量
state.messagenum = 0
localStorage.removeItem('messagenum')
},
setGoodsTypeList(state, list) { // 传给确认订单页面的参数
state.typeList = list
localStorage.setItem('typeList', list)
},
SET_MALL_LOGO(state, logo) { // 商城logo
state.mallLogo = logo
localStorage.setItem('mallLogo', logo)
},
SET_RENT_LOGO(state, logo) { // 方便租logo
state.rentHomeLogo = logo
localStorage.setItem('rentHomeLogo', logo)
},
SET_CHEAP_LOGO(state, logo) { // 便宜购logo
state.cheapHomeLogo = logo
localStorage.setItem('cheapHomeLogo', logo)
},
SET_MALL_NAME(state, mallName) { // 商城名称
state.mallName = mallName
localStorage.setItem('mallName', mallName)
},
SET_MALL_REGISTER(state, isRegister) { // 是否注册
state.isRegister = isRegister
localStorage.setItem('isRegister', isRegister)
},
SET_MALL_ICP(state, mallIcp) { // icp名称
state.mallIcp = mallIcp
localStorage.setItem('mallIcp', mallIcp)
},
SET_COMPANYNAME(state, companyName) { // 公司名称
state.companyName = companyName
localStorage.setItem('companyName', companyName)
},
SET_MALL_KEYWORDS(state, mallKeywords) { // 商城关键词
state.mallKeywords = mallKeywords
localStorage.setItem('mallKeywords', mallKeywords)
},
SET_MALL_DESC(state, mallDesc) { // 商城描述
state.mallDesc = mallDesc
localStorage.setItem('mallDesc', mallDesc)
},
SET_MALL_TITLE(state, mallTitle) { // 商城描述
state.mallTitle = mallTitle
localStorage.setItem('mallTitle', mallTitle)
},
},
actions: {
// CheapHomeLogo({ commit }) {
// return new Promise((resolve, reject) => {
// configData({ key: 'L_cheapHomeLogo', tips: 'web便宜购首页Logo' }).then(res => {
// if (res.data && res.data.name) {
// commit('SET_CHEAP_LOGO', res.data.name)
// resolve(res.data.name)
// } else {
// reject(res)
// }
// }).catch(err => {
// reject(err)
// })
// })
// },
// // 账号登录
// Login({ commit }, userInfo) {
// return new Promise((resolve, reject) => {
// login(userInfo).then(response => {
// const data = response.data
// const tokenStr = data.tokenHead + data.token
// commit('SET_TOKEN', tokenStr)
// resolve()
// }).catch(error => {
// reject(error)
// })
// })
// },
// // 手机号登录
// LoginPhone({ commit }, userInfo) {
// return new Promise((resolve, reject) => {
// loginPhone(userInfo).then(response => {
// const data = response.data
// const tokenStr = data.tokenHead + data.token
// commit('SET_TOKEN', tokenStr)
// resolve()
// }).catch(error => {
// reject(error)
// })
// })
// },
// // 账号信息登录
// AccountLogin({ commit }, params) {
// return new Promise((resolve, reject) => {
// accountLogin(params).then(response => {
// const data = response.data
// const tokenStr = data.tokenHead + data.token
// commit('SET_TOKEN', tokenStr)
// resolve()
// }).catch(error => {
// reject(error)
// })
// })
// },
// // 获取用户信息
// GetUserInfo({ commit, state }) {
// console.log(state)
// return new Promise((resolve, reject) => {
// getUserInfo().then(res => {
// const data = res.data
// commit('SET_NAME', data.userName)
// commit('SET_USERID', data.id)
// commit('SET_USERICON', data.headPic)
// // debugger
// resolve(res)
// }).catch(error => {
// reject(error)
// })
// })
// },
// 前端 登出
LogOut({ commit }) {
return new Promise(resolve => {
commit('SET_TOKEN', '')
commit('SET_NAME', '')
commit('SET_USERICON', '')
localStorage.removeItem('token')
resolve()
})
},
}
})
export default store
src/utils/auth.js 0 → 100644
import Cookies from 'js-cookie'
const TokenKey = 'mallToken'
export function getToken() {
return Cookies.get(TokenKey)
}
export function setToken(token) {
return Cookies.set(TokenKey, token)
}
export function removeToken() {
return Cookies.remove(TokenKey)
}
src/utils/request.js
// import axios from 'axios' import axios from 'axios'
// import store from '../store' import store from '../store'
// import router from '../router' import router from '../router'
// import { Message } from 'view-design' import { Message } from 'element-ui'
// // 创建axios实例 // 创建axios实例
// const service = axios.create({ const service = axios.create({
// baseURL: 'https://api.ecrentcn.com/mall-portal/', // baseURL: process.env.NODE_ENV === 'development'?'/api':'http://appapi.antaile.net',
// // baseURL: "http://api.v2.cnxieku.com/mall-portal/", baseURL: 'http://appapi.antaile.net',
// // baseURL: "http://192.168.31.127:8201/mall-portal/", timeout: 60000 // 请求超时时间
// timeout: 60000 // 请求超时时间 })
// })
// // request拦截器 // request拦截器
// service.interceptors.request.use(config => { service.interceptors.request.use(config => {
// config.headers['clientType'] = 5 config.headers['clientType'] = 5
// if (store.state.token) { if (store.state.token) {
// config.headers['Authorization'] = store.state.token config.headers['Authorization'] = store.state.token
// // Loading.service() // 请求开始 开启loading // Loading.service() // 请求开始 开启loading
// } }
// return config return config
// }, error => { }, error => {
// // Do something with request error // Do something with request error
// window.console.log(error) // for debug window.console.log(error) // for debug
// Promise.reject(error) Promise.reject(error)
// }) })
// // respone拦截器 // respone拦截器
// service.interceptors.response.use( service.interceptors.response.use(
// response => { response => {
// /** /**
// * code为非200是抛错 可结合自己业务进行修改 * status为非200是抛错 可结合自己业务进行修改
// */ */
// const res = response.data
// if (res.code !== 200) {
// // 401:未登录;
// if (res.code === 401 || res.code === 403) {
// store.commit('SET_TOKEN', '')
// router.replace({
// name: 'login',
// query: { redirect: router.currentRoute.fullPath } // 登录后再跳回此页面时要做的配置
// })
// } else {
// if (res.message != '支付失败') {
// Message.error(res.message)
// }
// }
// return Promise.reject(res)
// } else {
// return response.data
// }
// },
// error => {
// // 错误信息状态码提示
// if (error.response) {
// switch (error.response.status) {
// case 400:
// Message.error('数据请求错误')
// break
// case 401:
// // Message.error('未授权，请重新登录')
// store.commit('SET_TOKEN', '')
// router.replace({
// name: 'login',
// query: { redirect: router.currentRoute.fullPath } // 登录后再跳回此页面时要做的配置
// })
// break
// case 403:
// Message.error('拒绝访问')
// break
// case 404:
// Message.error('请求错误，未找到该资源')
// break
// case 405:
// Message.error('请求方法未允许')
// break
// case 408:
// Message.error('请求超时')
// break
// case 500:
// Message.error('服务器异常')
// break
// case 501:
// Message.error('网络未实现')
// break
// case 502:
// Message.error('网络错误')
// break
// case 503:
// Message.error('服务不可用')
// break
// case 504:
// Message.error('网络超时')
// break
// case 505:
// Message.error('http版本不支持该请求')
// break
// }
// }
// // window.console.log('err' + error)
// // Message.error('服务器开小差了，请稍后重试')
// return Promise.reject(error)
// }
// )
// export default service const res = response.data
console.log("res",res.status !== 200)
if (res.status != 200) {
console.log("res",res.status)
// 401:未登录;
if (res.status === 401 || res.status === 403) {
store.commit('SET_TOKEN', '')
router.replace({
name: 'login',
query: { redirect: router.currentRoute.fullPath } // 登录后再跳回此页面时要做的配置
})
} else {
if (res.message != '支付失败') {
Message.error(res.message)
}
}
return Promise.reject(res)
} else {
return response.data
}
},
error => {
// 错误信息状态码提示
if (error.response) {
switch (error.response.status) {
case 400:
Message.error('数据请求错误')
break
case 401:
// Message.error('未授权，请重新登录')
store.commit('SET_TOKEN', '')
router.replace({
name: 'login',
query: { redirect: router.currentRoute.fullPath } // 登录后再跳回此页面时要做的配置
})
break
case 403:
Message.error('拒绝访问')
break
case 404:
Message.error('请求错误，未找到该资源')
break
case 405:
Message.error('请求方法未允许')
break
case 408:
Message.error('请求超时')
break
case 500:
Message.error('服务器异常')
break
case 501:
Message.error('网络未实现')
break
case 502:
Message.error('网络错误')
break
case 503:
Message.error('服务不可用')
break
case 504:
Message.error('网络超时')
break
case 505:
Message.error('http版本不支持该请求')
break
}
}
// window.console.log('err' + error)
// Message.error('服务器开小差了，请稍后重试')
return Promise.reject(error)
}
)
export default service
src/views/Login/Register/modules/ValiatePhone.vue
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
<div class="show-choice" > <div class="show-choice" >
<img v-if="isDefault" src="@/assets/images/choice.png" alt="" @click="changeDefault" /> <img v-if="isDefault" src="@/assets/images/choice.png" alt="" @click="changeDefault" />
<img v-else src="@/assets/images/Notselected.png" alt="" @click="changeDefault" /> <img v-else src="@/assets/images/Notselected.png" alt="" @click="changeDefault" />
<p @click="changeDefault">默认同意 <router-link :to="{name: 'agreement'}" class="color-primary">《生命纪念馆协议》</router-link></p> <p @click="changeDefault">默认同意 <router-link :to="{path: '/agreement',query: {type: 1}}" class="color-primary">《生命纪念馆协议》</router-link></p>
</div> </div>
</el-form-item> </el-form-item>
......
src/views/Login/agreement.vue
...@@ -3,17 +3,9 @@ ...@@ -3,17 +3,9 @@
<custom-header></custom-header> <custom-header></custom-header>
<div class="container"> <div class="container">
<div class="my-form"> <div class="my-form">
<div class="show-content"> <div class="show-content" v-html="detail.description"></div>
1.提示条款
各条款标题仅为帮助您理解该条款表达的主旨之用，不影响或限制本协议条款的含义或解释为维护您自身权益，建议您仔细阅读各条款具体表述
您在申请注册流程中点击同意本协议之前，应当认真阅读本协议。请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款、法律适用和争议解决条款。免除或者限制责任的条款将以粗体下划线标识，您应重点阅读。如您对协议有任何疑问，可向安泰乐客服咨询。
当您按照注册页面提示填写信息、阅读并同意本协议且完成全部注册程序后，即表示您已充分阅读、理解并接受本协议的全部内容，并与安泰乐达成一致，成为安泰乐网站“用户阅读本协议的过程中，如果您不同意本协议或其中任何条款约定，您应立即停止注册程序。如果您未申请注册流程，或者在本协议生效前已成为安泰乐的注册用户，则您通过访问和/或使用安泰乐，即视为您表示同意接受本协议的全部内容，否则请您不要访问或使用安泰乐平台网站。
</div>
<div class="small-btn"> <div class="small-btn">
<el-button <el-button type="primary" @click.native.prevent="handleFinishCommit"
:loading="loading"
type="primary"
@click.native.prevent="handleFinishCommit"
>已阅读 >已阅读
</el-button> </el-button>
</div> </div>
...@@ -24,174 +16,47 @@ ...@@ -24,174 +16,47 @@
</template> </template>
<script> <script>
const TIME_COUNT = 60; //更改倒计时时间 import { getProtocol } from "@/api/index";
export default { export default {
name: "login", name: "agreement",
data() { data() {
const validatePassword = (rule, value, callback) => {
if (value.length < 6) {
callback(new Error("管理员密码长度应大于6"));
} else {
callback();
}
};
return { return {
checkedTab: 1, detail: {
vedioCanPlay: false, description: null,
fixStyle: "",
PATH_TO_MP4: "https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/2574.mp4",
PATH_TO_WEBM: "",
loginForm: {
mobile: "admin123",
password: "admin123",
}, },
codeShow: true,
smsCodeDisable: false,
codeCount: TIME_COUNT,
snsMsgWait: null,
timer: null,
loginRules: {
mobile: [
{ required: true, message: "手机号不允许为空", trigger: "blur" },
],
password: [
{ required: true, message: "管理员密码不允许为空", trigger: "blur" },
{ validator: validatePassword, trigger: "blur" },
],
},
passwordType: "password",
loading: false,
}; };
}, },
watch: {
$route: {
handler: function (route) {
this.redirect = route.query && route.query.redirect;
},
immediate: true,
},
},
created() {
window.addEventListener("hashchange", this.afterQRScan);
this.PATH_TO_MP4 = created() {
"https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/2574.mp4"; this.init();
},
destroyed() {
window.removeEventListener("hashchange", this.afterQRScan);
}, },
methods: { methods: {
changeTab(type) { init() {
this.checkedTab = type; if (this.$route.query.type) {
}, this.type = this.$route.query.type;
// 发送验证码 this.getDetail();
sendCode() {
if (!/^1[345789]\d{9}$/.test(this.ruleForm.phone)) {
// Message({
// message: "电话格式不对",
// type: "error",
// duration: 3 * 1000,
// });
return;
} }
this.sendSms(this.ruleForm.phone, 11);
},
//发送验证码
sendSms(phone, type) {
console.log("type", phone, type);
// sendSms(phone, type).then((response) => {
// this.$message.success("发送成功");
// this.codeChange();
// });
}, },
//验证码变化 getDetail() {
codeChange() { getProtocol({ type: this.type }).then((res) => {
if (!this.timer) { console.log(res);
this.codeCount = TIME_COUNT; this.detail = res.data;
this.codeShow = false;
this.timer = setInterval(() => {
if (this.codeCount > 0 && this.codeCount <= TIME_COUNT) {
this.snsMsgWait = this.codeCount + "s后可重发";
this.codeCount--;
this.smsCodeDisable = true;
} else {
this.codeShow = true;
this.smsCodeDisable = false;
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
}
},
canplay() {
this.vedioCanPlay = true;
console.log(this.vedioCanPlay);
},
showPwd() {
if (this.passwordType === "password") {
this.passwordType = "";
} else {
this.passwordType = "password";
}
},
handleNext(formName, type) {
this.value.publishType = type;
this.$refs[formName].validate((valid) => {
if (valid) {
this.$emit("nextStep");
}
}); });
}, },
handleFinishCommit(formName, isTemp) {
this.$refs[formName].validate((valid) => {
if (valid) {
if (isTemp) {
this.value.publishStatus = -1;
}
this.$emit("finishCommit");
} else {
this.$message({
message: "验证失败",
type: "error",
duration: 1000,
});
return false;
}
});
}, },
watch: {
$route: {
handler: function () {
this.init();
},
// 深度观察监听
deep: true,
}, },
mounted: function () {
window.onresize = () => {
const windowWidth = document.body.clientWidth;
const windowHeight = document.body.clientHeight;
const windowAspectRatio = windowHeight / windowWidth;
let videoWidth;
let videoHeight;
if (windowAspectRatio < 0.5625) {
videoWidth = windowWidth;
videoHeight = videoWidth * 0.5625;
this.fixStyle = {
height: windowWidth * 0.5625 + "px",
width: windowWidth + "px",
"margin-bottom": (windowHeight - videoHeight) / 2 + "px",
"margin-left": "initial",
};
} else {
videoHeight = windowHeight;
videoWidth = videoHeight / 0.5625;
this.fixStyle = {
height: windowHeight + "px",
width: windowHeight / 0.5625 + "px",
"margin-left": (windowWidth - videoWidth) / 2 + "px",
"margin-bottom": "initial",
};
}
};
window.onresize();
}, },
}; };
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
width: 1200px; width: 1200px;
margin: 0 auto 30px; margin: 0 auto 30px;
......
src/views/Login/index.vue
...@@ -246,7 +246,7 @@ $light_gray: #eee; ...@@ -246,7 +246,7 @@ $light_gray: #eee;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.title { .title {
font-size: 26px; font-size: 22px;
font-weight: 400; font-weight: 400;
color: #888585; color: #888585;
margin: 0px auto 40px auto; margin: 0px auto 40px auto;
...@@ -295,11 +295,11 @@ $light_gray: #eee; ...@@ -295,11 +295,11 @@ $light_gray: #eee;
button { button {
width: 100%; width: 100%;
height: 66px; height: 52px;
background: $bg; background: $bg;
border-radius: 33px; border-radius: 33px;
color: #26201e; color: #26201e;
font-size: 24px; font-size: 22px;
} }
img{ img{
margin-top: 30px; margin-top: 30px;
......
src/views/Preview/index.vue 0 → 100644
<template>
<div>
<custom-header></custom-header>
<div class="container">
<el-row :gutter="10">
<el-col :span="10">
<div class="show-preview">
<viw-modal></viw-modal>
<div class="show-tab">
<p>上一位</p>
<p>下一位</p>
</div>
</div>
</el-col>
<el-col :span="14">
<div class="show-right">
<div class="show-erwei">
<img src="@/assets/images/appewm.png" alt="" />
手机扫码观看
</div>
<div>
<p class="show-title">少年的梦想</p>
<p class="show-subtitle">
少年的梦想是风的梦想，青春的思念是长长的思念。
</p>
</div>
</div>
<div class="show-recommend">
<p>推荐浏览</p>
<div class="show-list">
<img
src="@/assets/images/1576573658282.png"
alt=""
v-for="(item, index) in list"
:key="index"
/>
</div>
</div>
</el-col>
</el-row>
</div>
<custom-footer></custom-footer>
</div>
</template>
<script>
import viwModal from "@/components/viwModal";
import { selectRandomAtlTime } from "@/api/index";
export default {
name: "login",
components: {
viwModal,
},
data() {
return {
screenHeight: 0, // 屏幕高度
list: [{}],
};
},
created() {
this.screenHeight = document.documentElement.clientHeight;
this.selectRandomAtlTime();
},
methods: {
selectRandomAtlTime() {
selectRandomAtlTime().then((res) => {
console.log(res);
});
},
},
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.container {
width: 100%;
margin: 0 auto;
padding: 10% calc((100% - 1200px) / 2);
background: url("~@/assets/images/Exhibitionbg.png") no-repeat;
background-size: 100% 100%;
box-sizing: border-box;
}
.show-preview {
display: flex;
// justify-content: center;
align-items: center;
.show-tab {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-left: 20px;
p {
writing-mode: tb-rl;
background: #e9e9e9;
font-size: 16px;
color: #999;
padding: 10px 5px;
}
p:first-child {
margin-bottom: 50px;
}
}
}
.show-right {
display: flex;
.show-erwei {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 3%;
color: #666;
font-size: 14px;
img {
width: 214px;
height: 214px;
margin-bottom: 10px;
}
}
.show-title {
color: #5d6063;
font-size: 30px;
font-weight: bold;
margin-bottom: 20px;
}
.show-subtitle {
width: 70%;
color: #666666;
line-height: 36px;
letter-spacing: 2px;
font-size: 24px;
}
}
.show-recommend {
p {
color: #333;
font-size: 20px;
font-weight: bold;
margin: 50px 0 20px;
}
.show-list {
> img {
width: 200px;
height: 240px;
margin: 10px;
}
}
}
</style>
src/views/TimePeriod/index.vue 0 → 100644
<template>
<div>
<custom-header></custom-header>
<div class="scroll-animations-example" data-scroll-container>
<div class="scrollsection" data-scroll-section>
<!-- "item -normal" "item -big" "item -small -horizontal" "item -small" "item -normal -horizontal" "item -big -horizontal" -->
<div
:class="classRandom(1, 6)"
data-scroll
:data-scroll-speed="random(1, 4)"
v-for="(item, index) in list"
:key="index"
>
<a href="https://www.17sucai.com/" class="image"
><img src="@/assets/images/1.jpg"
/></a>
</div>
</div>
</div>
<custom-footer></custom-footer>
</div>
</template>
<script>
import Example from "@/assets/js/script.js";
import { selectOfficialWebsiteAtlTime } from "@/api/index";
export default {
name: "login",
data() {
return {
list: [],
classList: [
"item -normal",
"item -big",
"item -small -horizontal",
"item -small",
"item -normal -horizontal",
"item -big -horizontal",
],
};
},
created() {
this.selectOfficialWebsiteAtlTime();
window.addEventListener("load", () => {
new Example({
root: document.querySelector(".scroll-animations-example"),
});
});
},
mounted() {},
methods: {
random(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
},
classRandom(min, max) {
let random = this.random(min, max);
return this.classList[random];
},
selectOfficialWebsiteAtlTime() {
selectOfficialWebsiteAtlTime().then((res) => {
console.log(res);
this.list = res.data;
});
},
},
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "~@/assets/styles/normalize.min.css";
@import "~@/assets/styles/style.css";
@import "~@/assets/styles/locomotive-scroll.min.css";
</style>
src/vue.config.js
...@@ -12,4 +12,18 @@ module.exports = { ...@@ -12,4 +12,18 @@ module.exports = {
} }
} }
}, },
devServer: {
proxy: { //配置跨域
'/api': {
target: 'http://appapi.antaile.net', //真实的后台接口
changOrigin: true, //允许跨域
pathRewrite: {
/* 重写路径，当我们在浏览器中看到请求的地址为：http://localhost:8080/api/core/getData/userInfo 时
实际上访问的地址是：http://121.121.67.254:8185/core/getData/userInfo,因为重写了 /api
*/
'^/api': ''
}
},
}
},
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment