Skip to content

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

官网首页

parent 9bf61628
Showing with 559 additions and 392 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/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/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