Skip to content

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

官网首页

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