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