Skip to content

A
antaile-web
Commit 7f11b133 by wangyalan-git
Options

官网首页

parent 9bf61628
Showing with 1182 additions and 935 deletions
package.json
......@@ -19,7 +19,8 @@
"vue-router": "^3.5.1",
"vue-seamless-scroll": "^1.1.23",
"vue-video-player": "^5.0.2",
"vuex": "^3.6.2"
"vuex": "^3.6.2",
"qrcodejs2": "0.0.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
......@@ -31,6 +32,7 @@
"node-sass": "^4.14.1",
"postcss-pxtorem": "^6.0.0",
"sass-loader": "^8.0.2",
"vue-lazyload": "^1.3.3",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
......
src/api/index.js
import request from '@/utils/request'
import request from "@/utils/request";
// 协议
export function getProtocol(params) {
return request({
url: '/atlProtocol/getProtocol',
method: 'get',
params
})
url: "/atlProtocol/getProtocol",
method: "get",
params,
});
}
// 获取官网时光纪
export function selectOfficialWebsiteAtlTime(params) {
export function selectOfficialWebsiteAtlTime(data) {
return request({
url: '/atlTime/selectOfficialWebsiteAtlTime',
method: 'get',
params
})
url: "/atlTime/selectOfficialWebsiteAtlTime",
method: "post",
data,
});
}
// 随即推荐三个时光纪
export function selectRandomAtlTime(params) {
return request({
url: '/atlTime/selectRandomAtlTime',
method: 'get',
params
})
url: "/atlTime/selectRandomAtlTime",
method: "post",
params,
});
}
// 发送验证码
export function sendSms(params) {
return request({
url: "/sms/send-verify-code",
method: "post",
params,
});
}
//注册
export function register(params) {
return request({
url: "/register/register-mobile",
method: "post",
params,
});
}
// 手机号/密码登录
export function pwdLogin(params) {
return request({
url: "/login/pwdLogin",
method: "post",
params,
});
}
// 手机号验证码登录
export function verifyCodeLogin(data) {
return request({
url: "/login/verifyCodeLogin",
method: "post",
data,
});
}
// 获取用户信息
export function getUserInfo(params) {
return request({
url: "/atlUser/getUserInfo",
method: "post",
params,
});
}
// 退出登录
export function loginOut(params) {
return request({
url: "/login/loginOut",
method: "post",
params,
});
}
// 忘记密码
export function forgetPassword(params) {
return request({
url: "/atlUser/forgetPassword",
method: "post",
params,
});
}
// 获取时光纪详情
export function timeDetails(params) {
return request({
url: "/atlTime/timeDetails",
method: "post",
params,
});
}
// 是否是本人
export function isMyself(params) {
return request({
url: "/atlUser/isMyself",
method: "post",
params,
});
}
// 增加阅读量
export function addReadCount(params) {
return request({
url: "/home/addReadCount",
method: "post",
params,
});
}
src/assets/js/script.js
......@@ -24,11 +24,11 @@ class Example {
});
this.images = this.root.querySelectorAll(".image");
console.log("this.images", this.image);
[].forEach.call(this.images, (image) => {
image.addEventListener("click", () => {
image.classList.add("-clicked");
console.log("this.images", image.classList);
this.hideImages();
});
});
......
src/assets/styles/element-variables.scss
......@@ -195,6 +195,15 @@ dl {
@import "~element-ui/packages/theme-chalk/src/index";
.my-form {
.row{
display: flex;
input{
flex: 1;
}
button{
margin-left: 10px;
}
}
.el-input {
display: inline-block;
height: 50px;
......@@ -218,6 +227,29 @@ dl {
.el-form-item {
margin-bottom: 40px;
}
.el-button {
height: 50px;
}
.small-btn {
text-align: center;
margin-top: 60px;
button {
width: 200px;
height: 60px;
color: #fff;
font-size: 22px;
border-radius: 37px;
}
button + button {
margin-left: 30px;
}
button:first-child {
background: #181f2a;
}
button:last-child {
background: $--color-primary;
}
}
}
.login-container {
.el-input {
......@@ -250,29 +282,7 @@ dl {
color: #454545;
}
}
.el-button {
height: 50px;
}
.small-btn {
text-align: center;
margin-top: 60px;
button {
width: 200px;
height: 60px;
color: #fff;
font-size: 22px;
border-radius: 37px;
}
button + button {
margin-left: 30px;
}
button:first-child {
background: #181f2a;
}
button:last-child {
background: $--color-primary;
}
}
.my-step {
// 步骤条
.el-step__icon {
......
src/components/CustomFooter.vue
......@@ -61,7 +61,7 @@
<div class="show-num">
<img src="@/assets/images/embassy.png" alt="" />
<div>
<p>999,069,35</p>
<p>{{toThousands(totalNum || 0)}}</p>
<p class="show-tip">已建馆人数</p>
</div>
</div>
......@@ -76,6 +76,7 @@ export default {
props: {},
data() {
return {
totalNum:0,
memorials: [
{ name: "天竺生命纪念馆", address: "福建晋江" },
{ name: "南宝生命纪念馆", address: "江西南昌" },
......@@ -86,6 +87,44 @@ export default {
],
};
},
mounted(){
this.$store
.dispatch("selectOfficialWebsiteAtlTime", {
// isCommend: 1,
page: { pageNum: 1, pageSize: 15 },
})
.then((res) => {
this.totalNum = res.data.total + 10000
})
.catch(() => {
});
},
methods:{
toThousands(num) {
num = (num || 0).toString();
let number = 0,
floatNum = '',
intNum = '';
// 判断是否有小数位，有则截取小数点后的数字
if (num.indexOf('.') > 0) {
number = num.indexOf('.'); // 获取小数点出现的位置
floatNum = num.substr(number); // 截取arr.substr(form, length)
intNum = num.substring(0,number); // 截取arr.substring(start, end)
} else {
intNum = num;
}
let result = [],
counter = 0;
intNum = intNum.split('');
// 利用3的倍数，向数组插入','
for (let i = intNum.length - 1; i >= 0; i--) {
counter++;
result.unshift(intNum[i]);
if (!(counter % 3) && i != 0) { result.unshift(','); }
}
return result.join('') + floatNum || '';
}
}
};
</script>
......
src/components/CustomHeader.vue
......@@ -5,17 +5,39 @@
><img src="@/assets/images/logo.png" alt="" class="logo"
/></router-link>
<ul class="right-ul">
<li><router-link :to="{ name: 'timePeriod' }">纪念馆列表</router-link></li>
<li>
<router-link :to="{ name: 'timePeriod' }">纪念馆列表</router-link>
</li>
<li><router-link :to="{ name: 'appPage' }">APP下载</router-link></li>
</ul>
</div>
<img src="@/assets/images/logo.png" alt="" class="logo" v-else />
<ul class="right-ul">
<li>
<img src="@/assets/images/Signin.png" alt="" class="avatar" /><router-link :to="{name: 'login'}">登录</router-link>
<li v-if="$store.state.token" @click="signOut">
<img
:src="common.showPic($store.state.usericon)"
:onerror="common.defaultAvatar()"
alt=""
class="avatar"
/>
{{ $store.state.username }}
</li>
<li v-else>
<img src="@/assets/images/Signin.png" alt="" class="avatar" /><router-link
:to="{ name: 'login' }"
>登录</router-link
>
</li>
<li v-if="deviceType == 2">
<router-link :to="{ path: '/agreement', query: { type: 3 } }"
>用户协议</router-link
>
</li>
<li v-if="deviceType == 2">
<router-link :to="{ path: '/agreement', query: { type: 1 } }"
>隐私协议</router-link
>
</li>
<li v-if="deviceType == 2"><router-link :to="{ path: '/agreement',query: {type: 3} }">用户协议</router-link></li>
<li v-if="deviceType == 2"><router-link :to="{ path: '/agreement',query: {type: 1} }">隐私协议</router-link></li>
</ul>
</div>
</template>
......@@ -37,8 +59,20 @@ export default {
}
},
methods: {},
methods: {
// 退出账号
signOut() {
this.$confirm("您是否要退出登录?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
center: true,
type: "warning",
}).then(() => {
this.$store.dispatch("LogOut");
this.$router.push({ name: "index" });
});
},
},
};
</script>
......@@ -54,7 +88,7 @@ export default {
left: 0;
right: 0;
z-index: 999;
a{
a {
color: #ccc;
}
> .logo {
......
src/components/viwModal.vue
......@@ -9,9 +9,13 @@
<div
class="announcement-mobile"
>
<div v-if="formRef" class="ql-editor">
<h3>{{ formRef.form.name }}</h3>
<div v-html="content"></div>
<div v-if="content" class="ql-editor">
<iframe
style="border:none"
:width="375"
:height="711"
v-bind:src="content"
></iframe>
</div>
</div>
<!-- </Drawer> -->
......@@ -21,6 +25,7 @@
// import Drawer from '@/components/Drawer'
export default {
props: {
content: String,
formRef: {
type: Object
},
......@@ -38,7 +43,6 @@ export default {
},
data(){
return {
content:''
}
}
}
......@@ -49,11 +53,12 @@ export default {
margin: 0 auto;
}
.announcement-mobile {
width: 388px;
height: 711px;
width: 375px;
height: 800px;
// padding: 80px 20px;
background: url('~@/assets/images/Mobilephonebox.png') no-repeat;
background-size: 100%;
padding: 20px;
}
</style>
src/main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from './store';
import ElementUI from "element-ui";
import VueLazyload from 'vue-lazyload'
import "lib-flexible";
import "@/assets/styles/element-variables.scss";
import animated from "animate.css"; // npm install animate.css --save安装，在引入
......@@ -10,6 +12,12 @@ import CustomFooter from "@/components/CustomFooter";
Vue.use(animated);
Vue.config.productionTip = false;
Vue.use(ElementUI);
Vue.use(VueLazyload, {
preLoad: 1.2,
error: require('@/assets/images/antail.png'),
loading: require('@/assets/images/antail.png'),
attempt: 1
})
Vue.component('CustomHeader',CustomHeader)
Vue.component('CustomFooter',CustomFooter)
import common from "@/utils/commonFunctions";
......@@ -17,5 +25,6 @@ import common from "@/utils/commonFunctions";
Vue.prototype.common = common; // 公共函数
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
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'
import {
selectOfficialWebsiteAtlTime,
pwdLogin,
verifyCodeLogin,
getUserInfo,
loginOut
} from "@/api/index";
import { getToken, setToken } from "@/utils/auth";
Vue.use(Vuex)
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
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_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_USERICON(state, usericon) {
// 存储用户名
state.usericon = usericon;
localStorage.setItem("usericon", usericon);
},
SET_NAME(state, username) { // 存储用户名
state.username = username
localStorage.setItem('username', username)
SET_NAME(state, username) {
// 存储用户名
state.username = username;
localStorage.setItem("username", username);
},
SET_USERID(state, userid) { // 存储用户名
state.userid = userid
localStorage.setItem('userid', userid)
SET_USERID(state, userid) {
// 存储用户名
state.userid = userid;
localStorage.setItem("userid", userid);
},
SET_SEARCH_TYPE(state, searchType) { // 设置搜索条件
state.searchType = searchType
localStorage.setItem('searchType', searchType)
SET_SEARCH_TYPE(state, searchType) {
// 设置搜索条件
state.searchType = searchType;
localStorage.setItem("searchType", searchType);
},
SET_PRODUCT_TYPE(state, productType) { //商品类型
state.productType = productType
localStorage.setItem('productType', productType)
SET_PRODUCT_TYPE(state, productType) {
//商品类型
state.productType = productType;
localStorage.setItem("productType", productType);
},
setshopName(state, shopName) { // 存储店铺名
state.shopName = shopName
localStorage.setItem('shopName', shopName)
setshopName(state, shopName) {
// 存储店铺名
state.shopName = shopName;
localStorage.setItem("shopName", shopName);
},
delshopName(state) { // 删除店铺名
state.shopName = ''
localStorage.removeItem('shopName')
delshopName(state) {
// 删除店铺名
state.shopName = "";
localStorage.removeItem("shopName");
},
setEmail(state, email) { // 存储用户名
state.email = email
localStorage.setItem('email', email)
setEmail(state, email) {
// 存储用户名
state.email = email;
localStorage.setItem("email", email);
},
delEmail(state) { // 删除用户名
state.email = ''
localStorage.removeItem('email')
delEmail(state) {
// 删除用户名
state.email = "";
localStorage.removeItem("email");
},
SET_CART_NUM(state, num) { // 购物车数量
state.cartnum = num
localStorage.setItem('cartnum', num)
SET_CART_NUM(state, num) {
// 购物车数量
state.cartnum = num;
localStorage.setItem("cartnum", num);
},
DEL_CART_NUM(state) { // 购物车数量
state.cartnum = 0
localStorage.removeItem('cartnum')
DEL_CART_NUM(state) {
// 购物车数量
state.cartnum = 0;
localStorage.removeItem("cartnum");
},
SET_MESSAGE_NUM(state, num) { // 消息未读数量
state.messagenum = num
localStorage.setItem('messagenum', num)
SET_MESSAGE_NUM(state, num) {
// 消息未读数量
state.messagenum = num;
localStorage.setItem("messagenum", num);
},
DEL_MESSAGE_NUM(state) { // 消息未读数量
state.messagenum = 0
localStorage.removeItem('messagenum')
DEL_MESSAGE_NUM(state) {
// 消息未读数量
state.messagenum = 0;
localStorage.removeItem("messagenum");
},
setGoodsTypeList(state, list) { // 传给确认订单页面的参数
state.typeList = list
localStorage.setItem('typeList', list)
setGoodsTypeList(state, list) {
// 传给确认订单页面的参数
state.typeList = list;
localStorage.setItem("typeList", list);
},
SET_MALL_LOGO(state, logo) { // 商城logo
state.mallLogo = logo
localStorage.setItem('mallLogo', logo)
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_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_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)
actions: {
Login({ commit }, userInfo) {
return new Promise((resolve, reject) => {
pwdLogin(userInfo)
.then((response) => {
const data = response.data;
const tokenStr = data.token;
commit("SET_TOKEN", tokenStr);
resolve();
})
.catch((error) => {
reject(error);
});
});
},
SET_MALL_DESC(state, mallDesc) { // 商城描述
state.mallDesc = mallDesc
localStorage.setItem('mallDesc', mallDesc)
verifyCodeLogin({ commit }, userInfo) {
return new Promise((resolve, reject) => {
verifyCodeLogin(userInfo)
.then((response) => {
const data = response.data;
const tokenStr = data.token;
commit("SET_TOKEN", tokenStr);
resolve();
})
.catch((error) => {
reject(error);
});
});
},
SET_MALL_TITLE(state, mallTitle) { // 商城描述
state.mallTitle = mallTitle
localStorage.setItem('mallTitle', mallTitle)
// 获取用户信息
GetUserInfo({ commit }) {
return new Promise((resolve, reject) => {
getUserInfo()
.then((res) => {
const data = res.data;
commit("SET_NAME", data.nickName);
commit("SET_USERID", data.id);
commit("SET_USERICON", data.avaterImageUrl);
// debugger
resolve(res);
})
.catch((error) => {
reject(error);
});
});
},
selectOfficialWebsiteAtlTime({ commit }, obj) {
console.log("commit", commit);
return new Promise((resolve, reject) => {
selectOfficialWebsiteAtlTime(obj)
.then((res) => {
resolve(res);
})
.catch((err) => {
reject(err);
});
});
},
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) => {
......@@ -205,15 +264,21 @@ const store = new Vuex.Store({
// },
// 前端 登出
LogOut({ commit }) {
return new Promise(resolve => {
commit('SET_TOKEN', '')
commit('SET_NAME', '')
commit('SET_USERICON', '')
localStorage.removeItem('token')
resolve()
return new Promise((resolve,reject) => {
loginOut()
.then(() => {
commit("SET_TOKEN", "");
commit("SET_NAME", "");
commit("SET_USERICON", "");
localStorage.removeItem("token");
resolve();
})
.catch((error) => {
reject(error);
});
});
},
},
}
})
});
export default store
export default store;
src/utils/commonFunctions.js
......@@ -8,15 +8,15 @@ export default {
return flag;
},
// // 设置默认图片
// defaultImg() {
// return 'this.src="' + require('@/assets/images/default.png') + '"'
// },
defaultImg() {
return 'this.src="' + require('@/assets/images/antail.png') + '"'
},
// defaultAd() {
// return 'this.src="' + require('@/assets/images/bannerthree.png') + '"'
// },
// defaultAvatar() {
// return 'this.src="' + require('@/assets/images/portraittxs.png') + '"'
// },
defaultAvatar() {
return 'this.src="' + require('@/assets/images/Signin.png') + '"'
},
// defaultDraw() {
// return 'this.src="' + require('@/assets/draw/banner.png') + '"'
// },
......@@ -115,7 +115,7 @@ export default {
return uuid
},
showPic(url, params) {
if (url && params && url.indexOf('http://xieku.oss-cn-beijing.aliyuncs.com') != -1) {
if (url && params && url.indexOf('https://appsub.oss-cn-hangzhou.aliyuncs.com') != -1) {
return url + params
}
return url
......
src/utils/request.js
......@@ -6,15 +6,17 @@ import { Message } from 'element-ui'
// 创建axios实例
const service = axios.create({
// baseURL: process.env.NODE_ENV === 'development'?'/api':'http://appapi.antaile.net',
baseURL: 'http://appapi.antaile.net',
// baseURL: 'http://appapi.antaile.net',
baseURL: 'http://192.168.31.28:8088',
timeout: 60000 // 请求超时时间
})
// request拦截器
service.interceptors.request.use(config => {
config.headers['clientType'] = 5
if (store.state.token) {
config.headers['Authorization'] = store.state.token
config.headers['token'] = store.state.token
config.headers['content-type'] = "application/json"
// config.headers['content-type'] = "application/x-www-form-urlencoded"
// Loading.service() // 请求开始 开启loading
}
return config
......@@ -42,10 +44,6 @@ service.interceptors.response.use(
name: 'login',
query: { redirect: router.currentRoute.fullPath } // 登录后再跳回此页面时要做的配置
})
} else {
if (res.message != '支付失败') {
Message.error(res.message)
}
}
return Promise.reject(res)
} else {
......@@ -53,6 +51,7 @@ service.interceptors.response.use(
}
},
error => {
console.log("err",error)
// 错误信息状态码提示
if (error.response) {
switch (error.response.status) {
......@@ -80,7 +79,11 @@ service.interceptors.response.use(
Message.error('请求超时')
break
case 500:
if(error.response.data.message){
Message.error(error.response.data.message)
}else {
Message.error('服务器异常')
}
break
case 501:
Message.error('网络未实现')
......@@ -98,6 +101,8 @@ service.interceptors.response.use(
Message.error('http版本不支持该请求')
break
}
}else {
// Message.warning(error)
}
// window.console.log('err' + error)
// Message.error('服务器开小差了，请稍后重试')
......
src/views/Home/index.vue
......@@ -2,7 +2,12 @@
<div class="root">
<custom-header></custom-header>
<!-- 第一屏 -->
<div class="page bg-image" id="page1" @mousewheel="scrollFun" :style="'height:' + screenHeight + 'px'">
<div
class="page bg-image"
id="page1"
@mousewheel="scrollFun"
:style="'height:' + screenHeight + 'px'"
>
<!-- 首屏文字 -->
<transition leave-active-class="titleHidden">
<img
......@@ -100,14 +105,18 @@
</div>
</transition>
</div>
<div class="page" id="page2">
<div class="page" id="page2" :style="'height:' + screenHeight + 'px'">
<div class="show-tab">
<span v-html="videoSource"></span>
<span
v-html="videoSource"
:style="'width: 100%;height:' + screenHeight + 'px'"
></span>
<img
v-if="checkedTab == 3"
src="https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/home/show.png"
alt=""
class="small"
:style="'height:' + screenHeight + 'px'"
/>
<div class="tab-mask"></div>
<div class="my-tab">
......@@ -144,35 +153,41 @@
<div class="scroll-table">
<p class="title">部分纪念馆案例</p>
<vue-seamless-scroll
:data="hallList"
:data="hallList1"
:class-option="optionLeft"
class="seamless-warp2"
>
<ul class="item">
<li v-for="(item, index) in hallList" :key="index">
<img :src="item.icon" alt="" />
<li v-for="(item, index) in hallList1" :key="index">
<router-link :to="{ path: '/preview', query: { id: item.id } }">
<img :src="item.coverUrl" alt="" />
</router-link>
</li>
</ul>
</vue-seamless-scroll>
<vue-seamless-scroll
:data="hallList"
:data="hallList2"
:class-option="optionRight"
class="seamless-warp2"
>
<ul class="item">
<li v-for="(item, index) in hallList" :key="index">
<img :src="item.icon" alt="" />
<li v-for="(item, index) in hallList2" :key="index">
<router-link :to="{ path: '/preview', query: { id: item.id } }">
<img :src="item.coverUrl" alt="" />
</router-link>
</li>
</ul>
</vue-seamless-scroll>
<vue-seamless-scroll
:data="hallList"
:data="hallList3"
:class-option="optionLeft"
class="seamless-warp2"
>
<ul class="item">
<li v-for="(item, index) in hallList" :key="index">
<img :src="item.icon" alt="" />
<li v-for="(item, index) in hallList3" :key="index">
<router-link :to="{ path: '/preview', query: { id: item.id } }">
<img :src="item.coverUrl" alt="" />
</router-link>
</li>
</ul>
</vue-seamless-scroll>
......@@ -243,10 +258,9 @@ export default {
pageNum: 0, // 一共有多少页
main: Object,
obj: Object,
hallList: new Array(60).fill({
icon:
"https://thirdwx.qlogo.cn/mmopen/vi_32/exXiaSqNfYBXic1ibB6Ugfg5OPWBDZibM46VibhlRdSovAIic8uYrgmkQD7HgRrQGuKxhTW56T9NMy28KlwkfkdMvxLg/132",
}),
hallList1: [],
hallList2: [],
hallList3: [],
checkedTab: 1,
tabs: [
{ id: 1, name: "风格多样化" },
......@@ -271,8 +285,41 @@ export default {
// this.obj[i].style.height = this.screenHeight + "px";
// }
// }
this.getData();
},
methods: {
getData() {
this.$store
.dispatch("selectOfficialWebsiteAtlTime", {
// isCommend: 1,
page: { pageNum: 1, pageSize: 15 },
})
.then((res) => {
this.hallList1 = res.data.list;
console.log("hallList", this.hallList);
})
.catch(() => {});
this.$store
.dispatch("selectOfficialWebsiteAtlTime", {
// isCommend: 1,
page: { pageNum: 2, pageSize: 15 },
})
.then((res) => {
this.hallList2 = res.data.list;
console.log("hallList", this.hallList);
})
.catch(() => {});
this.$store
.dispatch("selectOfficialWebsiteAtlTime", {
// isCommend: 1,
page: { pageNum: 3, pageSize: 15 },
})
.then((res) => {
this.hallList3 = res.data.list;
console.log("hallList", this.hallList);
})
.catch(() => {});
},
scrollFun(event) {
this.startTime = new Date().getTime();
// mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
......@@ -328,7 +375,7 @@ export default {
} else if (this.checkedTab == 2) {
url = this.PATH_TO_MP4;
}
return `<video autoplay loop muted width="100%" height="100%"><source src="${url}" type="video/mp4"></video>`;
return `<video autoplay loop muted width="100%" height="100%" style="object-fit: cover"><source src="${url}" type="video/mp4"></video>`;
},
},
};
......@@ -410,7 +457,7 @@ export default {
.show-title {
width: 35%;
padding: 15% 0 140px;
padding: 15% 0 50px;
box-sizing: border-box;
}
.show-mask {
......@@ -499,9 +546,9 @@ export default {
margin-top: 10px;
li {
img {
width: 160px;
width: 140px;
height: 160px;
border-radius: 25px;
// border-radius: 25px;
margin-right: 10px;
}
}
......@@ -542,10 +589,15 @@ export default {
width: 100%;
height: 100%;
position: relative;
span {
width: 100%;
object-fit: cover;
}
// background: no-repeat center bottom / 100% 100%;
video {
width: 100%;
height: 100%;
object-fit: cover;
}
.small {
width: 100%;
......@@ -848,7 +900,7 @@ export default {
p:first-child {
font-size: 50px;
color: #fff;
margin-bottom: 5px;
margin-bottom: 15px;
}
p:last-child {
font-size: 40px;
......
src/views/Login/Register/modules/RegisterDetail.vue
......@@ -3,14 +3,20 @@
<div class="fomm-content">
<!-- 步骤栏 -->
<el-steps :active="active" align-center class="my-step">
<el-step title="手机号验证"><span slot="icon" class="step-img">1</span></el-step>
<el-step title="设置密码"><span slot="icon" class="step-img">2</span></el-step>
<el-step title="完成"><span slot="icon" class="step-img">3</span></el-step>
<el-step title="手机号验证"
><span slot="icon" class="step-img">1</span></el-step
>
<el-step title="设置密码"
><span slot="icon" class="step-img">2</span></el-step
>
<el-step title="完成"
><span slot="icon" class="step-img">3</span></el-step
>
</el-steps>
<!-- 手机验证码 -->
<valiate-phone
v-show="active == 0"
v-model="productParam"
v-model="listQuery"
:is-edit="isEdit"
ref="category"
@nextStep="nextStep"
......@@ -19,20 +25,18 @@
<!-- 设置密码 -->
<set-password
v-show="active == 1"
v-model="productParam"
v-model="listQuery"
:is-edit="isEdit"
ref="relation"
@prevStep="prevStep"
@nextStep="nextStep"
@finishCommit="handleCommit"
></set-password>
<!-- 设置密码 -->
<register-success
v-show="active == 2"
v-model="productParam"
v-model="listQuery"
:is-edit="isEdit"
ref="relation"
@prevStep="prevStep"
@finishCommit="handleCommit"
>
</register-success>
<!-- 弹窗 -->
......@@ -44,13 +48,15 @@ import ValiatePhone from "./ValiatePhone";
import SetPassword from "./SetPassword";
import RegisterSuccess from "./RegisterSuccess";
// import { createProduct, getProduct, updateProduct } from '@/api/product'
import { register } from '@/api/index'
// 默认的商品参数
const defaultProductParam = {
const defaultListQuery = {
mobile: null,
pwd: null,
verifyCode: null,
passwdCheck:null,
isDefault: null,
nickName: null,
};
// 商品详情
......@@ -59,7 +65,7 @@ export default {
components: {
ValiatePhone,
SetPassword,
RegisterSuccess
RegisterSuccess,
},
props: {
isEdit: {
......@@ -71,11 +77,7 @@ export default {
return {
loading: false,
active: 0,
isFinishInfo: false,
isFinishAttribute: false,
isFinishDetail: false,
productParam: Object.assign({}, defaultProductParam),
previewFlag: false,
listQuery: Object.assign({}, defaultListQuery),
};
},
created() {},
......@@ -89,110 +91,39 @@ export default {
nextStep() {
// 下一步
this.active++;
// 基本信息根据商家获取对应品牌
if (this.active === 1) {
this.$refs.info.init();
}
// 获取平台规格参数属性
if (this.active === 1) {
this.$refs.attribute.init();
}
// 获取商品关联商品
if (this.active === 4) {
this.$refs.relation.init();
}
// 友情提示处理，判断是否真的要离开
if (this.active > 0) {
this.$emit("showTip");
}
},
finishInfo(result) {
this.isFinishInfo = result;
if (this.isFinishInfo) {
this.finishCommit();
}
},
finishDetail(result) {
this.isFinishDetail = result;
if (this.isFinishDetail) {
this.finishCommit();
}
},
finishAttribute(result) {
this.isFinishAttribute = result;
if (this.isFinishAttribute) {
this.finishCommit();
}
},
finishCommit() {
// if (!this.isFinishInfo) {
// this.$refs.info.handleNext()
// } else if (!this.isFinishAttribute) {
// this.$refs.attribute.handleNext()
// } else if (!this.isFinishDetail) {
// this.$refs.detail.handleNext()
// }
// if (this.isFinishInfo && this.isFinishAttribute && this.isFinishDetail) {
// if (this.previewFlag) {
// this.$refs.previewModal.show(Object.assign({}, this.productParam))
// } else {
// this.$confirm('是否要提交该产品', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// center: true,
// type: 'warning'
// }).then(() => {
// this.productParam.moveDetailPesc = this.productParam.pcDetailPesc
// if (this.isEdit) {
// this.loading = true
// // 如果是临时库过来编辑的需要把状态改为审核状态
// if (this.$route.query.publishStatus) {
// this.productParam.publishStatus = this.$route.query.publishStatus
// }
// updateProduct(this.productParam).then(res => {
// this.loading = false
// this.$message({
// type: 'success',
// message: '提交成功',
// duration: 1000
// })
// this.$router.back()
// }).catch(err => {
// this.loading = false
// })
// } else {
// this.loading = true
// createProduct(this.productParam).then(res => {
// this.$emit('hideTip')
// this.loading = false
// this.$message({
// type: 'success',
// message: '提交成功',
// duration: 1000
// })
// this.$router.push('productAudit')
// }).catch(err => {
// this.loading = false
// })
// }
// })
// }
// }
console.log("finishCommit")
this.$confirm("是否要注册", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
center: true,
type: "warning",
}).then(() => {
this.loading = true;
console.log("this.listQuery",this.listQuery)
register(this.listQuery)
.then(() => {
this.$emit("hideTip");
this.loading = false;
this.active = 2;
})
.catch(() => {
this.loading = false;
});
});
},
handleCommit() {
this.isFinishInfo = false;
this.isFinishAttribute = false;
this.isFinishDetail = false;
this.previewFlag = false;
this.finishCommit();
},
previewHandle() {
this.isFinishInfo = false;
this.isFinishAttribute = false;
this.isFinishDetail = false;
this.previewFlag = true;
console.log("handleCommit")
this.finishCommit();
},
},
};
</script>
......@@ -201,9 +132,8 @@ export default {
width: 100%;
padding: 100px 0 200px 0;
}
.fomm-content{
.fomm-content {
width: 80%;
margin: 0 auto;
}
</style>
src/views/Login/Register/modules/RegisterSuccess.vue
......@@ -16,6 +16,13 @@ export default {
data() {
return {};
},
methods: {
handleLogin(){
this.$router.push({
path: '/login'
})
}
}
};
</script>
<style lang="scss" scoped>
......
src/views/Login/Register/modules/SetPassword.vue
......@@ -2,41 +2,49 @@
<div>
<div class="my-form">
<el-form
ref="loginForm"
:model="loginForm"
ref="value"
:model="value"
:rules="loginRules"
class="login-form"
auto-complete="on"
auto-complete="new-password"
label-width="80px"
>
<el-form-item prop="mobile" label="密码">
<el-form-item prop="nickName" label="昵称">
<el-input
v-model="loginForm.mobile"
name="mobile"
v-model="value.nickName"
name="nickName"
type="text"
auto-complete="on"
auto-complete="new-password"
maxlength="50"
placeholder="请输入昵称"
/>
</el-form-item>
<el-form-item prop="pwd" label="密码">
<el-input
v-model="value.pwd"
name="pwd"
type="text"
auto-complete="new-password"
placeholder="请输入密码"
/>
</el-form-item>
<el-form-item prop="password" label="确认密码">
<el-form-item prop="passwdCheck" label="确认密码">
<el-input
:type="passwordType"
v-model="loginForm.password"
name="password"
auto-complete="on"
v-model="value.passwdCheck"
name="passwdCheck"
auto-complete="new-password"
placeholder="请输入确认密码"
@keyup.enter.native="handleNext"
@keyup.enter.native="handleLogin"
/>
</el-form-item>
<div class="small-btn">
<el-button
:loading="loading"
type="primary"
@click.native.prevent="handleLogin"
@click.native.prevent="handlePrev"
>上一步
</el-button>
<el-button
:loading="loading"
type="primary"
@click.native.prevent="handleLogin"
>下一步
......@@ -48,44 +56,54 @@
</template>
<script>
const TIME_COUNT = 60; //更改倒计时时间
export default {
name: "login",
name: "SetPassword",
components: {},
props:{
value: Object,
},
data() {
const validatePassword = (rule, value, callback) => {
if (value.length < 6) {
callback(new Error("管理员密码长度应大于6"));
const validatePass = (rule, value, callback) => {
let reg = /^[^\s]{6,10}$/
if (value === '') {
callback(new Error('请输入密码'))
} else if (!reg.test(value)) {
callback(new Error('密码6-10位，不包含空格'))
} else {
callback();
callback()
}
}
const validatePassCheck = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'))
} else if (value !== this.value.pwd) {
callback(new Error('两次输入密码不一致'))
} else {
callback()
}
}
};
return {
checkedTab: 1,
vedioCanPlay: false,
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" },
pwd: [
{
required: true,
message: '密码不能为空',
trigger: 'blur'
},
{
validator: validatePass,
trigger: 'blur'
}
],
passwdCheck: [
{
required: true,
validator: validatePassCheck,
trigger: 'blur'
}
]
},
passwordType: "password",
loading: false,
};
},
watch: {
......@@ -106,52 +124,6 @@ export default {
window.removeEventListener("hashchange", this.afterQRScan);
},
methods: {
changeTab(type) {
this.checkedTab = type;
},
// 发送验证码
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();
// });
},
//验证码变化
codeChange() {
if (!this.timer) {
this.codeCount = TIME_COUNT;
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 = "";
......@@ -162,86 +134,24 @@ export default {
handlePrev() {
this.$emit("prevStep");
},
handleNext(formName, type) {
this.value.publishType = type;
this.$refs[formName].validate((valid) => {
if (valid) {
this.$emit("nextStep");
}
});
},
handleLogin() {
this.$refs.loginForm.validate((valid) => {
if (valid && !this.loading) {
this.loading = true;
this.$store
.dispatch("LoginByUsername", this.loginForm)
.then(() => {
this.loading = false;
this.$router.push({ path: this.redirect || "/" });
})
.catch((response) => {
this.$notify.error({
title: "失败",
message: response.data.errmsg,
});
this.loading = false;
});
this.$refs.value.validate((valid) => {
if (valid) {
console.log("注册")
this.$emit("finishCommit")
} else {
return false;
}
});
},
},
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>
<style lang="scss" scoped>
$bg: #fdb64f;
$dark_gray: #889aa4;
$light_gray: #eee;
.login-form {
width: 70%;
margin: 50px auto;
}
.show-pwd {
position: absolute;
right: 10px;
top: 7px;
font-size: 16px;
color: $dark_gray;
cursor: pointer;
user-select: none;
}
</style>
src/views/Login/Register/modules/ValiatePhone.vue
......@@ -2,52 +2,76 @@
<div>
<div class="my-form">
<el-form
ref="loginForm"
:model="loginForm"
ref="value"
:model="value"
:rules="loginRules"
class="login-form"
auto-complete="on"
auto-complete="new-password"
label-width="80px"
>
<el-form-item prop="mobile" label="手机号">
<el-input
v-model="loginForm.mobile"
v-model="value.mobile"
name="mobile"
type="text"
auto-complete="on"
maxlength="11"
auto-complete="new-password"
placeholder="请输入手机号"
/>
</el-form-item>
<el-form-item prop="password" label="验证码">
<el-form-item prop="verifyCode" label="验证码">
<div class="row">
<el-input
style="width: 73%; margin-right: 10px"
:type="passwordType"
v-model="loginForm.password"
name="password"
auto-complete="on"
placeholder="请输入密码"
v-model="value.verifyCode"
name="verifyCode"
auto-complete="new-password"
placeholder="请输入验证码"
maxlength="6"
@keyup.enter.native="handleNext"
/>
<el-button
:type="codeShow ? 'primary' : 'info'"
@click="sendCode"
:disabled="smsCodeDisable"
:disabled="smsFlag"
:style="{
fontSize: '16px',
backgroundColor: sendColor,
borderColor: sendColor,
color: '#fff',
}"
>
<span v-show="codeShow">获取验证码</span>
<span v-show="!codeShow"> {{ snsMsgWait }}</span>
{{ sendTime }}
</el-button>
<div class="show-choice" >
<img v-if="isDefault" src="@/assets/images/choice.png" alt="" @click="changeDefault" />
<img v-else src="@/assets/images/Notselected.png" alt="" @click="changeDefault" />
<p @click="changeDefault">默认同意 <router-link :to="{path: '/agreement',query: {type: 1}}" class="color-primary">《生命纪念馆协议》</router-link></p>
</div>
</el-form-item>
<el-form-item prop="isDefault" label="">
<div class="show-choice" style="position: absolute; top: -40px">
<img
v-if="value.isDefault"
src="@/assets/images/choice.png"
alt=""
@click="changeDefault"
/>
<img
v-else
src="@/assets/images/Notselected.png"
alt=""
@click="changeDefault"
/>
<p @click="changeDefault">
默认同意
<router-link
:to="{ path: '/agreement', query: { type: 1 } }"
class="color-primary"
>《生命纪念馆协议》</router-link
>
</p>
</div>
</el-form-item>
<div class="small-btn">
<el-button
:loading="loading"
type="primary"
@click.native.prevent="handleFinishCommit"
@click.native.prevent="handleNext('value')"
>下一步
</el-button>
</div>
......@@ -57,203 +81,107 @@
</template>
<script>
const TIME_COUNT = 60; //更改倒计时时间
import { sendSms } from "@/api/index";
export default {
name: "login",
name: "ValidatePhone",
components: {},
props: {
value: Object,
},
data() {
const validatePassword = (rule, value, callback) => {
if (value.length < 6) {
callback(new Error("管理员密码长度应大于6"));
const validatePhone = (rule, value, callback) => {
if (!value) {
return callback(new Error("手机号不能为空"));
} else if (!/^1[0-9]{10}$/.test(value)) {
callback("请填写正确的手机号");
} else {
callback();
}
};
return {
checkedTab: 1,
vedioCanPlay: false,
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,
sendTime: "获取验证码",
sendColor: "#CAA774",
snsMsgWait: 60,
smsFlag: false,
loginRules: {
mobile: [
{ required: true, message: "手机号不允许为空", trigger: "blur" },
{
required: true,
validator: validatePhone,
trigger: "blur",
},
],
password: [
{ required: true, message: "管理员密码不允许为空", trigger: "blur" },
{ validator: validatePassword, trigger: "blur" },
verifyCode: [
{ required: true, message: "验证码不允许为空", trigger: "blur" },
],
isDefault: [{ required: true, message: "请勾选", trigger: "blur" }],
},
passwordType: "password",
loading: false,
isDefault: 0,
};
},
watch: {
$route: {
handler: function (route) {
this.redirect = route.query && route.query.redirect;
},
immediate: true,
},
},
created() {
window.addEventListener("hashchange", this.afterQRScan);
this.PATH_TO_MP4 =
"https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/2574.mp4";
},
destroyed() {
window.removeEventListener("hashchange", this.afterQRScan);
},
methods: {
changeTab(type) {
this.checkedTab = type;
},
changeDefault() {
this.isDefault = this.isDefault ? 0 : 1;
this.value.isDefault = this.value.isDefault ? 0 : 1;
},
// 发送验证码
// 获取验证码
sendCode() {
if (!/^1[345789]\d{9}$/.test(this.ruleForm.phone)) {
// Message({
// message: "电话格式不对",
// type: "error",
// duration: 3 * 1000,
// });
if (!/^1\d{10}$/.test(this.value.mobile)) {
this.$message.info("请填写正确的手机号");
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();
// });
},
//验证码变化
codeChange() {
if (!this.timer) {
this.codeCount = TIME_COUNT;
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);
var params = {
mobile: this.value.mobile,
type: 1,
};
sendSms(params).then(() => {
this.$message.success("短信发送成功");
this.countDown();
});
},
showPwd() {
if (this.passwordType === "password") {
this.passwordType = "";
} else {
this.passwordType = "password";
countDown() {
// 60秒后重新获取验证码
var inter = setInterval(
function () {
this.smsFlag = true;
this.sendColor = "#E0E0E0";
this.sendTime = this.snsMsgWait + "s后可重发";
this.snsMsgWait = this.snsMsgWait - 1;
if (this.snsMsgWait < 0) {
clearInterval(inter);
this.smsFlag = false;
this.sendColor = "#CAA774";
this.sendTime = "获取验证码";
this.snsMsgWait = 60;
}
}.bind(this),
1000
);
},
handleNext(formName, type) {
this.value.publishType = type;
handleNext(formName) {
this.loading = true;
this.$refs[formName].validate((valid) => {
if (valid) {
this.$emit("nextStep");
}
this.loading = false;
});
},
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;
}
});
},
},
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>
<style rel="stylesheet/scss" lang="scss" scoped>
$bg: #fdb64f;
$dark_gray: #889aa4;
$light_gray: #eee;
.login-form {
width: 70%;
margin: 50px auto;
}
.show-pwd {
position: absolute;
right: 10px;
top: 7px;
font-size: 16px;
color: $dark_gray;
cursor: pointer;
user-select: none;
}
.show-choice {
display: flex;
align-items: center;
margin-top: 10px;
p{
color: #C6CED4;
p {
color: #c6ced4;
font-size: 16px;
cursor: pointer;
}
......
src/views/Login/findPassword.vue
......@@ -9,7 +9,7 @@
:model="loginForm"
:rules="loginRules"
class="login-form"
auto-complete="on"
auto-complete="new-password"
label-width="110px"
>
<el-form-item prop="mobile" label="手机号">
......@@ -17,17 +17,18 @@
v-model="loginForm.mobile"
name="mobile"
type="text"
auto-complete="on"
maxlength="11"
auto-complete="new-password"
placeholder="请输入手机号"
/>
</el-form-item>
<el-form-item prop="mobile" label="图形验证码">
<!-- <el-form-item prop="mobile" label="图形验证码">
<el-input
style="width: 76%; margin-right: 10px"
:type="passwordType"
v-model="loginForm.password"
name="password"
auto-complete="on"
auto-complete="new-password"
placeholder="请输入图形验证码"
@keyup.enter.native="handleNext"
/>
......@@ -39,41 +40,45 @@
<span v-show="codeShow">获取验证码</span>
<span v-show="!codeShow"> {{ snsMsgWait }}</span>
</el-button>
</el-form-item>
<el-form-item prop="password" label="验证码">
</el-form-item> -->
<el-form-item prop="verifyCode" label="验证码">
<div class="row">
<el-input
style="width: 76%; margin-right: 10px"
:type="passwordType"
v-model="loginForm.password"
name="password"
auto-complete="on"
placeholder="请输入密码"
@keyup.enter.native="handleNext"
v-model="loginForm.verifyCode"
name="verifyCode"
auto-complete="new-password"
placeholder="请输入验证码"
/>
<el-button
:type="codeShow ? 'primary' : 'info'"
@click="sendCode"
:disabled="smsCodeDisable"
:disabled="smsFlag"
:style="{
fontSize: '16px',
backgroundColor: sendColor,
borderColor: sendColor,
color: '#fff',
}"
>
<span v-show="codeShow">获取验证码</span>
<span v-show="!codeShow"> {{ snsMsgWait }}</span>
{{ sendTime }}
</el-button>
</div>
</el-form-item>
<el-form-item prop="mobile" label="新密码">
<el-form-item prop="newPassword" label="新密码">
<el-input
v-model="loginForm.mobile"
name="mobile"
v-model="loginForm.newPassword"
name="newPassword"
type="text"
auto-complete="on"
auto-complete="new-password"
placeholder="请输入新密码"
/>
</el-form-item>
<el-form-item prop="mobile" label="确认新密码">
<el-form-item prop="passwdCheck" label="确认新密码">
<el-input
v-model="loginForm.mobile"
name="mobile"
v-model="loginForm.passwdCheck"
name="passwdCheck"
type="text"
auto-complete="on"
auto-complete="new-password"
placeholder="请输入确认新密码"
/>
</el-form-item>
......@@ -81,7 +86,7 @@
<el-button
:loading="loading"
type="primary"
@click.native.prevent="handleFinishCommit"
@click.native.prevent="handleSubmit('loginForm')"
>保存
</el-button>
</div>
......@@ -93,108 +98,119 @@
</template>
<script>
const TIME_COUNT = 60; //更改倒计时时间
import { sendSms, forgetPassword } from "@/api/index";
export default {
name: "login",
data() {
const validatePassword = (rule, value, callback) => {
if (value.length < 6) {
callback(new Error("管理员密码长度应大于6"));
const validatePhone = (rule, value, callback) => {
if (!value) {
return callback(new Error("手机号不能为空"));
} else if (!/^1[0-9]{10}$/.test(value)) {
callback("请填写正确的手机号");
} else {
callback();
}
};
const validatePass = (rule, value, callback) => {
let reg = /^[^\s]{6,10}$/;
if (value === "") {
callback(new Error("请输入密码"));
} else if (!reg.test(value)) {
callback(new Error("密码6-10位，不包含空格"));
} else {
callback();
}
};
const validatePassCheck = (rule, value, callback) => {
if (value === "") {
callback(new Error("请再次输入密码"));
} else if (value !== this.loginForm.newPassword) {
callback(new Error("两次输入密码不一致"));
} else {
callback();
}
};
return {
checkedTab: 1,
vedioCanPlay: false,
fixStyle: "",
PATH_TO_MP4: "https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/2574.mp4",
PATH_TO_WEBM: "",
sendTime: "获取验证码",
sendColor: "#CAA774",
snsMsgWait: 60,
smsFlag: false,
loginForm: {
mobile: "admin123",
password: "admin123",
mobile: "",
type: 3,
newPassword: "",
verifyCode: "",
passwdCheck: "",
},
codeShow: true,
smsCodeDisable: false,
codeCount: TIME_COUNT,
snsMsgWait: null,
timer: null,
loginRules: {
mobile: [
{ required: true, message: "手机号不允许为空", trigger: "blur" },
{
required: true,
validator: validatePhone,
trigger: "blur",
},
],
password: [
{ required: true, message: "管理员密码不允许为空", trigger: "blur" },
{ validator: validatePassword, trigger: "blur" },
verifyCode: [
{ required: true, message: "验证码不允许为空", trigger: "blur" },
],
newPassword: [
{
required: true,
message: "密码不能为空",
trigger: "blur",
},
passwordType: "password",
loading: false,
};
{
validator: validatePass,
trigger: "blur",
},
watch: {
$route: {
handler: function (route) {
this.redirect = route.query && route.query.redirect;
],
passwdCheck: [
{
required: true,
validator: validatePassCheck,
trigger: "blur",
},
immediate: true,
],
},
passwordType: "password",
loading: false,
};
},
created() {
window.addEventListener("hashchange", this.afterQRScan);
this.PATH_TO_MP4 =
"https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/2574.mp4";
},
destroyed() {
window.removeEventListener("hashchange", this.afterQRScan);
},
methods: {
changeTab(type) {
this.checkedTab = type;
},
// 发送验证码
// 获取验证码
sendCode() {
if (!/^1[345789]\d{9}$/.test(this.ruleForm.phone)) {
// Message({
// message: "电话格式不对",
// type: "error",
// duration: 3 * 1000,
// });
if (!/^1\d{10}$/.test(this.loginForm.mobile)) {
this.$message.info("请填写正确的手机号");
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();
// });
var params = {
mobile: this.loginForm.mobile,
type: 3,
};
sendSms(params).then(() => {
this.$message.success("短信发送成功");
this.countDown();
});
},
//验证码变化
codeChange() {
if (!this.timer) {
this.codeCount = TIME_COUNT;
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);
countDown() {
// 60秒后重新获取验证码
var inter = setInterval(
function () {
this.smsFlag = true;
this.sendColor = "#E0E0E0";
this.sendTime = this.snsMsgWait + "s后可重发";
this.snsMsgWait = this.snsMsgWait - 1;
if (this.snsMsgWait < 0) {
clearInterval(inter);
this.smsFlag = false;
this.sendColor = "#CAA774";
this.sendTime = "获取验证码";
this.snsMsgWait = 60;
}
},
canplay() {
this.vedioCanPlay = true;
console.log(this.vedioCanPlay);
}.bind(this),
1000
);
},
showPwd() {
if (this.passwordType === "password") {
......@@ -203,61 +219,29 @@ export default {
this.passwordType = "password";
}
},
handleNext(formName, type) {
this.value.publishType = type;
this.$refs[formName].validate((valid) => {
if (valid) {
this.$emit("nextStep");
}
});
},
handleFinishCommit(formName, isTemp) {
handleSubmit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
if (isTemp) {
this.value.publishStatus = -1;
}
this.$emit("finishCommit");
} else {
this.$message({
message: "验证失败",
type: "error",
duration: 1000,
this.loading = true;
forgetPassword(this.loginForm)
.then((res) => {
console.log(res);
this.$message.success({message: '修改成功，请重新登录',duration: 2000})
setTimeout(() =>{
this.$router.push({
name: 'login'
})
},2000)
this.loading = false;
})
.catch(() => {
this.loading = false;
});
return false;
}
});
},
},
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>
<style rel="stylesheet/scss" lang="scss" scoped>
......@@ -277,6 +261,5 @@ export default {
text-align: center;
}
}
</style>
src/views/Login/index.vue
......@@ -7,7 +7,7 @@
:model="loginForm"
:rules="loginRules"
class="login-form"
auto-complete="on"
auto-complete="new-password"
label-position="left"
>
<div class="title-container">
......@@ -26,30 +26,31 @@
验证码登录
</h3>
</div>
<el-form-item prop="username">
<el-form-item prop="mobile">
<div class="form-item">
<div class="svg-container svg-container_login">
<img src="@/assets/images/user.png" alt="" />
</div>
<el-input
v-model="loginForm.username"
name="username"
v-model="loginForm.mobile"
name="mobile"
type="text"
auto-complete="on"
maxlength="11"
auto-complete="new-password"
placeholder="请输入手机号"
/>
</div>
</el-form-item>
<el-form-item prop="password">
<el-form-item prop="pwd" v-if="checkedTab == 1">
<div class="form-item">
<span class="svg-container">
<img src="@/assets/images/Password.png" alt="" />
</span>
<el-input
:type="passwordType"
v-model="loginForm.password"
name="password"
auto-complete="on"
v-model="loginForm.pwd"
name="pwd"
auto-complete="new-password"
placeholder="请输入密码"
@keyup.enter.native="handleLogin"
/>
......@@ -58,9 +59,42 @@
</span> -->
</div>
</el-form-item>
<el-form-item prop="verifyCode" v-else>
<div class="form-item">
<span class="svg-container">
<img src="@/assets/images/Password.png" alt="" />
</span>
<el-input
v-model="loginForm.verifyCode"
name="verifyCode"
auto-complete="new-password"
placeholder="请输入验证码"
@keyup.enter.native="handleLogin"
/>
<!-- <span class="show-pwd" @click="showPwd">
<svg-icon icon-class="eye" />
</span> -->
<el-button
@click="sendCode"
:disabled="smsFlag"
:style="{
fontSize: '16px',
backgroundColor: sendColor,
borderColor: sendColor,
color: '#26201e',
marginRight: '10px',
}"
>
{{ sendTime }}
</el-button>
</div>
</el-form-item>
<div class="forget">
<p>账号注册</p>
<p>忘记密码</p>
<p><router-link :to="{ name: 'register' }">账号注册</router-link></p>
<p>
<router-link :to="{ name: 'findPassword' }">忘记密码</router-link>
</p>
</div>
<div class="my-btn">
<el-button
......@@ -69,7 +103,7 @@
@click.native.prevent="handleLogin"
>登录
</el-button>
<img src="@/assets/images/WeChatr.png" alt="">
<img src="@/assets/images/WeChatr.png" alt="" />
</div>
</el-form>
</div>
......@@ -78,68 +112,86 @@
</template>
<script>
import { sendSms } from "@/api/index";
export default {
name: "login",
components: {
},
components: {},
data() {
const validatePassword = (rule, value, callback) => {
if (value.length < 6) {
callback(new Error("管理员密码长度应大于6"));
const validatePhone = (rule, value, callback) => {
if (!value) {
return callback(new Error("手机号不能为空"));
} else if (!/^1[0-9]{10}$/.test(value)) {
callback("请填写正确的手机号");
} else {
callback();
}
};
const validatePass = (rule, value, callback) => {
let reg = /^[^\s]{6,10}$/;
if (this.checkedTab == 1) {
if (value === "") {
callback(new Error("请输入密码"));
} else if (!reg.test(value)) {
callback(new Error("密码6-10位，不包含空格"));
} else {
callback();
}
} else {
callback();
}
};
const validateCode = (rule, value, callback) => {
if (this.checkedTab == 2) {
if (value === "") {
callback(new Error("请输入验证码"));
} else {
callback();
}
} else {
callback();
}
};
return {
sendTime: "获取验证码",
sendColor: "#fdb64f",
snsMsgWait: 60,
smsFlag: false,
checkedTab: 1,
vedioCanPlay: false,
fixStyle: "",
PATH_TO_MP4: "https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/2574.mp4",
PATH_TO_WEBM: "",
PATH_TO_JPEG: "",
loginForm: {
username: "admin123",
password: "admin123",
mobile: "",
pwd: "",
verifyCode: "",
},
loginRules: {
username: [
{ required: true, message: "管理员账户不允许为空", trigger: "blur" },
mobile: [
{
required: true,
validator: validatePhone,
trigger: "blur",
},
],
password: [
{ required: true, message: "管理员密码不允许为空", trigger: "blur" },
{ validator: validatePassword, trigger: "blur" },
pwd: [
{
required: true,
message: "密码不能为空",
trigger: "blur",
},
{
validator: validatePass,
trigger: "blur",
},
],
verifyCode: [{ validator: validateCode, 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 =
"https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/2574.mp4";
},
destroyed() {
window.removeEventListener("hashchange", this.afterQRScan);
},
methods: {
changeTab(type) {
this.checkedTab = type;
},
canplay() {
this.vedioCanPlay = true;
console.log(this.vedioCanPlay);
},
showPwd() {
if (this.passwordType === "password") {
this.passwordType = "";
......@@ -151,53 +203,102 @@ export default {
this.$refs.loginForm.validate((valid) => {
if (valid && !this.loading) {
this.loading = true;
if (this.checkedTab == 1) {
this.pwdLogin();
} else {
this.verifyCodeLogin();
}
} else {
return false;
}
});
},
pwdLogin() {
this.$store
.dispatch("LoginByUsername", this.loginForm)
.dispatch("Login", this.loginForm)
.then(() => {
this.$store
.dispatch("GetUserInfo", this.loginForm)
.then(() => {
// if (this.$route.query.redirect) {
// this.$router.push({
// path: decodeURIComponent(this.$route.query.redirect),
// }); // 跳转到原页面
// } else {
this.$router.push({ name: "index" }); // 正常登录流程进入的页面
// }
this.loading = false;
this.$router.push({ path: this.redirect || "/" });
})
.catch((response) => {
this.$notify.error({
title: "失败",
message: response.data.errmsg,
});
.catch(() => {
this.loading = false;
});
} else {
return false;
}
})
.catch(() => {
this.loading = false;
});
},
},
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",
verifyCodeLogin() {
let params = {
mobilePhone: this.loginForm.mobile,
verifyCode: this.loginForm.verifyCode,
};
this.$store
.dispatch("verifyCodeLogin", params)
.then(() => {
this.$store
.dispatch("GetUserInfo", params)
.then(() => {
// if (this.$route.query.redirect) {
// this.$router.push({
// path: decodeURIComponent(this.$route.query.redirect),
// }); // 跳转到原页面
// } else {
this.$router.push({ name: "index" }); // 正常登录流程进入的页面
// }
this.loading = false;
})
.catch(() => {
this.loading = false;
});
})
.catch(() => {
this.loading = false;
});
},
// 获取验证码
sendCode() {
if (!/^1\d{10}$/.test(this.loginForm.mobile)) {
this.$message.info("请填写正确的手机号");
return;
}
var params = {
mobile: this.loginForm.mobile,
type: 1,
};
window.onresize();
sendSms(params).then(() => {
this.$message.success("短信发送成功");
this.countDown();
});
},
countDown() {
// 60秒后重新获取验证码
var inter = setInterval(
function () {
this.smsFlag = true;
this.sendColor = "#E0E0E0";
this.sendTime = this.snsMsgWait + "s后可重发";
this.snsMsgWait = this.snsMsgWait - 1;
if (this.snsMsgWait < 0) {
clearInterval(inter);
this.smsFlag = false;
this.sendColor = "#fdb64f";
this.sendTime = "获取验证码";
this.snsMsgWait = 60;
}
}.bind(this),
1000
);
},
},
};
</script>
......@@ -253,6 +354,7 @@ $light_gray: #eee;
text-align: center;
font-weight: bold;
position: relative;
cursor: pointer;
&.checked {
color: $bg;
}
......@@ -281,13 +383,15 @@ $light_gray: #eee;
}
}
.forget {
font-size: 16px;
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
margin-bottom: 15px;
a {
font-size: 16px;
color: #fff;
}
}
.my-btn {
margin: 30px auto;
......@@ -301,7 +405,7 @@ $light_gray: #eee;
color: #26201e;
font-size: 22px;
}
img{
img {
margin-top: 30px;
width: 45px;
height: 45px;
......
src/views/Preview/index.vue
......@@ -5,35 +5,36 @@
<el-row :gutter="10">
<el-col :span="10">
<div class="show-preview">
<viw-modal></viw-modal>
<div class="show-tab">
<viw-modal :content="webUrl"></viw-modal>
<!-- <div class="show-tab">
<p>上一位</p>
<p>下一位</p>
</div>
</div> -->
</div>
</el-col>
<el-col :span="14">
<div class="show-right">
<div class="show-erwei">
<img src="@/assets/images/appewm.png" alt="" />
<div class="qrcode" id="qrcode" ref="qrcode"></div>
手机扫码观看
</div>
<div>
<p class="show-title">少年的梦想</p>
<div style="flex: 1;">
<p class="show-title">{{ detail.aboutName || "" }}</p>
<p class="show-subtitle">
少年的梦想是风的梦想，青春的思念是长长的思念。
{{ detail.name || "" }}
</p>
</div>
</div>
<div class="show-recommend">
<p>推荐浏览</p>
<div class="show-list">
<img
src="@/assets/images/1576573658282.png"
alt=""
<router-link
:to="{ path: '/preview', query: { id: item.id } }"
v-for="(item, index) in list"
:key="index"
/>
>
<img :src="item.coverUrl" alt="" />
</router-link>
</div>
</div>
</el-col>
......@@ -45,7 +46,13 @@
<script>
import viwModal from "@/components/viwModal";
import { selectRandomAtlTime } from "@/api/index";
import QRCode from "qrcodejs2"; // 引入插件
import {
selectRandomAtlTime,
timeDetails,
isMyself,
addReadCount,
} from "@/api/index";
export default {
name: "login",
components: {
......@@ -53,21 +60,85 @@ export default {
},
data() {
return {
screenHeight: 0, // 屏幕高度
list: [{}],
list: [],
detail: {
aboutName: "",
name: "",
},
webUrl: "",
};
},
created() {
this.screenHeight = document.documentElement.clientHeight;
this.selectRandomAtlTime();
this.init(this.$route.query.id);
},
methods: {
init(id) {
console.log("id", id);
if (id) {
this.id = id;
this.timeDetails();
this.addReadCount();
this.getWebUrl();
this.selectRandomAtlTime();
} else {
this.$router.go(-1);
}
},
qrcode() {
new QRCode("qrcode", {
width: 200, // 设置宽度，单位像素
height: 200, // 设置高度，单位像素
colorLight: "#fff",
text: this.webUrl, // 设置二维码内容或跳转地址
});
},
addReadCount() {
addReadCount({ id: this.id, type: 1 }).then(() => {});
},
timeDetails() {
timeDetails({ timeId: this.id }).then((res) => {
this.detail = res.data;
});
},
getWebUrl() {
isMyself({ id: this.id, type: 0 }).then((res) => {
if (res.data == true) {
this.webUrl =
"https://go.yunzhongci.com/?timerid=" +
this.id +
"&token=" +
this.$store.state.token +
"&isMy=true";
} else {
this.webUrl =
"https://go.yunzhongci.com/?timerid=" +
this.id +
"&token=" +
this.$store.state.token;
}
console.log("webUrl", this.webUrl);
if (document.getElementById("qrcode").innerHTML) {
document.getElementById("qrcode").innerHTML = "";
}
this.qrcode();
});
},
selectRandomAtlTime() {
selectRandomAtlTime().then((res) => {
console.log(res);
this.list = res.data;
});
},
},
watch: {
$route: {
handler: function (val) {
this.init(val.query.id);
},
// 深度观察监听
deep: true,
},
},
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
......@@ -110,10 +181,12 @@ export default {
margin-right: 3%;
color: #666;
font-size: 14px;
img {
width: 214px;
height: 214px;
.qrcode {
width: 200px;
height: 200px;
padding: 20px;
background: #fff;
margin-bottom: 10px;
}
}
......@@ -140,10 +213,14 @@ export default {
margin: 50px 0 20px;
}
.show-list {
> img {
display: flex;
> a {
width: 200px;
height: 240px;
margin: 10px;
border-radius: 10px;
img {
width: 100%;
}
}
}
}
......
src/views/TimePeriod/index.vue
<template>
<div>
<div class="show-container">
<custom-header></custom-header>
<div class="scroll-animations-example" data-scroll-container>
<div class="scrollsection" data-scroll-section>
......@@ -11,9 +11,9 @@
v-for="(item, index) in list"
:key="index"
>
<a href="https://www.17sucai.com/" class="image"
><img src="@/assets/images/1.jpg"
/></a>
<router-link :to="{path: '/preview',query: {id: item.id}}" class="image"
><img :src="item.coverUrl"
/></router-link>
</div>
</div>
</div>
......@@ -41,11 +41,6 @@ export default {
},
created() {
this.selectOfficialWebsiteAtlTime();
window.addEventListener("load", () => {
new Example({
root: document.querySelector(".scroll-animations-example"),
});
});
},
mounted() {},
methods: {
......@@ -58,10 +53,17 @@ export default {
},
selectOfficialWebsiteAtlTime() {
selectOfficialWebsiteAtlTime().then((res) => {
selectOfficialWebsiteAtlTime({ page: { pageNum: 1, pageSize: 20 } }).then(
(res) => {
console.log(res);
this.list = res.data;
this.list = res.data.list;
this.$nextTick(() => {
new Example({
root: document.querySelector(".scroll-animations-example"),
});
});
}
);
},
},
};
......@@ -70,5 +72,9 @@ export default {
@import "~@/assets/styles/normalize.min.css";
@import "~@/assets/styles/style.css";
@import "~@/assets/styles/locomotive-scroll.min.css";
.show-container{
background: url("~@/assets/images/Flashscreenbg.png") no-repeat;
background-size: 100% 100%;
}
</style>
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