Skip to content

dev / lilejia-f2mb-pro

Go to a project
Toggle navigation
Toggle navigation pinning
c581f236 by joe
Options

备份

1 parent a5fe4200
Expand all
Inline Side-by-side
Showing 46 changed files with 1585 additions and 133 deletions
......@@ -1942,6 +1942,13 @@
"integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
"dev": true
},
"asap": {
"version": "2.0.6",
"resolved": "https://registry.npm.taobao.org/asap/download/asap-2.0.6.tgz",
"integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
"dev": true,
"optional": true
},
"asn1": {
"version": "0.2.4",
"resolved": "http://registry.npm.taobao.org/asn1/download/asn1-0.2.4.tgz",
......@@ -5412,7 +5419,8 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"aproba": {
"version": "1.2.0",
......@@ -5433,12 +5441,14 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
......@@ -5453,17 +5463,20 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"core-util-is": {
"version": "1.0.2",
......@@ -5580,7 +5593,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"ini": {
"version": "1.3.5",
......@@ -5592,6 +5606,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
......@@ -5606,6 +5621,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
......@@ -5613,12 +5629,14 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
......@@ -5637,6 +5655,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
......@@ -5717,7 +5736,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
......@@ -5729,6 +5749,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
......@@ -5814,7 +5835,8 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
......@@ -5850,6 +5872,7 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
......@@ -5869,6 +5892,7 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
......@@ -5912,12 +5936,14 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
}
}
},
......@@ -6673,6 +6699,13 @@
"integrity": "sha1-Cpf7h2mG6AgcYxFg+PnziRV/AEM=",
"dev": true
},
"image-size": {
"version": "0.5.5",
"resolved": "https://registry.npm.taobao.org/image-size/download/image-size-0.5.5.tgz",
"integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
"dev": true,
"optional": true
},
"import-cwd": {
"version": "2.1.0",
"resolved": "https://registry.npm.taobao.org/import-cwd/download/import-cwd-2.1.0.tgz",
......@@ -7385,6 +7418,64 @@
"invert-kv": "^2.0.0"
}
},
"less": {
"version": "3.9.0",
"resolved": "https://registry.npm.taobao.org/less/download/less-3.9.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fless%2Fdownload%2Fless-3.9.0.tgz",
"integrity": "sha1-t1EcQ/N89X3Iff/ZiD7BISibFHQ=",
"dev": true,
"requires": {
"clone": "^2.1.2",
"errno": "^0.1.1",
"graceful-fs": "^4.1.2",
"image-size": "~0.5.0",
"mime": "^1.4.1",
"mkdirp": "^0.5.0",
"promise": "^7.1.1",
"request": "^2.83.0",
"source-map": "~0.6.0"
},
"dependencies": {
"clone": {
"version": "2.1.2",
"resolved": "https://registry.npm.taobao.org/clone/download/clone-2.1.2.tgz",
"integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
"dev": true
},
"mime": {
"version": "1.6.0",
"resolved": "https://registry.npm.taobao.org/mime/download/mime-1.6.0.tgz?cache=0&sync_timestamp=1560034758817&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmime%2Fdownload%2Fmime-1.6.0.tgz",
"integrity": "sha1-Ms2eXGRVO9WNGaVor0Uqz/BJgbE=",
"dev": true,
"optional": true
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
"integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
"dev": true,
"optional": true
}
}
},
"less-loader": {
"version": "5.0.0",
"resolved": "https://registry.npm.taobao.org/less-loader/download/less-loader-5.0.0.tgz",
"integrity": "sha1-SY3eOmxsT4h0WO6e0/CGoSrRtGY=",
"dev": true,
"requires": {
"clone": "^2.1.1",
"loader-utils": "^1.1.0",
"pify": "^4.0.1"
},
"dependencies": {
"clone": {
"version": "2.1.2",
"resolved": "https://registry.npm.taobao.org/clone/download/clone-2.1.2.tgz",
"integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
"dev": true
}
}
},
"levn": {
"version": "0.3.0",
"resolved": "https://registry.npm.taobao.org/levn/download/levn-0.3.0.tgz",
......@@ -9733,6 +9824,16 @@
"integrity": "sha1-foz42PW48jnBvGi+tOt4Vn1XLvg=",
"dev": true
},
"promise": {
"version": "7.3.1",
"resolved": "https://registry.npm.taobao.org/promise/download/promise-7.3.1.tgz",
"integrity": "sha1-BktyYCsY+Q8pGSuLG8QY/9Hr078=",
"dev": true,
"optional": true,
"requires": {
"asap": "~2.0.3"
}
},
"promise-inflight": {
"version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/promise-inflight/download/promise-inflight-1.0.1.tgz",
......@@ -10520,7 +10621,8 @@
"version": "4.0.8",
"resolved": "https://registry.npm.taobao.org/rx-lite/download/rx-lite-4.0.8.tgz",
"integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=",
"dev": true
"dev": true,
"optional": true
},
"rx-lite-aggregates": {
"version": "4.0.8",
......
......@@ -34,6 +34,8 @@
"babel-plugin-import": "^1.12.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"less": "^3.9.0",
"less-loader": "^5.0.0",
"node-sass": "^4.12.0",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.6.10"
......
......@@ -8,7 +8,7 @@
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>vue-cli3-framework</title>
<title></title>
</head>
<body>
......
......@@ -4,12 +4,13 @@
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>-->
<router-view/>
<router-view />
</div>
</template>
<style lang="scss">
@import './styles/support.scss';
@import "./styles/support.scss";
#app {
/* font-family: 'Avenir', Helvetica, Arial, sans-serif;
......@@ -30,6 +31,10 @@ div {
padding: 0;
}
body {
background-color: #74cb35;
}
.app__width {
width: 750px;
}
......@@ -83,5 +88,51 @@ div {
position: relative;
}
.sys-btn {
width: 430px;
height: 128px;
background: url(./assets/imgs/btn.png) no-repeat;
background-size: 100%;
text-align: center;
line-height: 118px;
color: #fff;
font-size: 50px;
font-weight: 600;
margin: auto;
}
.sys-btn-02 {
width: 342px;
height: 110px;
background: url(./assets/imgs/btn2.png) no-repeat;
background-size: 100%;
text-align: center;
line-height: 100px;
color: #fff;
font-size: 40px;
font-weight: 600;
margin: auto;
}
.sys-container-panel {
margin: auto;
width: 692px;
background-color: #fff;
border-radius: 50px;
box-shadow: 5px 5px 15px #8bc263;
position: relative;
.container-title {
width: 505px;
height: 84px;
line-height: 104px;
background: url(./assets/imgs/title-bg.png) no-repeat;
background-size: 100%;
position: absolute;
left: 93.5px;
top: -42px;
font-size: 38px;
font-weight: 600;
color: #e8e8e8;
}
}
</style>
......
import axios from 'axios';
import Vue from 'vue';
import Router from '../router'
// import {
// Toast
// } from 'vant';
......@@ -12,23 +15,33 @@ function Toast(msg) {
// 服务器地址
let base = "https://ow.go.qudone.com";
let baseWxAppid = "wx9fc8816188c0ef2a";
let wxOauthUrl = "http://clubwxuat.hm.liby.com.cn/api/getOpenId.htm";
if (location.href.indexOf("//k.wxpai.cn") > 0) {
base = "https://api.k.wxpai.cn/bizproxy"
baseWxAppid = "wx9fc8816188c0ef2a";
wxOauthUrl = "http://clubwxuat.hm.liby.com.cn/api/getOpenId.htm";
}
let whileList = [
"https://api.k.wxpai.cn/bizproxy/kdapi/file/upload"
]
// let base = COM.baseUrl;
// 请求拦截器
// axios.interceptors.request.use(
// config => {
// // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
// // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
// const token = "token"; //这里写入token
// token && (config.headers.Authorization = token);
// return config;
// },
// error => {
// return Promise.error(error);
// })
axios.interceptors.request.use(
config => {
// 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
// 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
const token = store.getSession();
if (token && whileList.indexOf(config.url) < 0) {
config.headers["sessionId"] = token;
}
return config;
},
error => {
return Promise.error(error);
})
// 响应拦截器
axios.interceptors.response.use(
......@@ -37,7 +50,11 @@ axios.interceptors.response.use(
if (response.data.code === 200) {
return Promise.resolve(response);
} else {
Toast(response.data.bizMsg);
if (response.data.code == 404) {
store.removeSession();
store.saveRedirectUrl();
Router.push("/");
}
return Promise.reject(response);
}
} else {
......@@ -46,43 +63,9 @@ axios.interceptors.response.use(
},
// 服务器状态码不是200的情况
error => {
console.log("Router.path === ", Router.history.current);
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面，并携带当前页面的路径
// 在登录成功后返回当前页面，这一步需要在登录页操作。
case 401:
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
break;
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
Toast({
message: '登录过期，请重新登录',
duration: 1000,
forbidClick: true
});
// 清除token
localStorage.removeItem('token');
store.commit('loginSuccess', null);
// 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
setTimeout(() => {
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}, 1000);
break;
// 404请求不存在
case 404:
Toast({
message: '网络请求不存在',
......@@ -90,7 +73,7 @@ axios.interceptors.response.use(
forbidClick: true
});
break;
// 其他错误，直接抛出错误提示
// 其他错误，直接抛出错误提示
default:
Toast({
message: error.response.data.message,
......@@ -119,7 +102,9 @@ export const httpGet = params => {
url,
data
} = params;
return axios.get(`${base}${url}`, {
data = !data ? {} : data;
let requestUrl = url.indexOf("http:") >= 0 || url.indexOf("https:") >= 0 ? url : `${base}${url}`;
return axios.get(requestUrl, {
params: data
}).then(res => res.data.content);
}
......@@ -133,9 +118,57 @@ export const httpPost = params => {
url,
data
} = params;
return axios.post(`${base}${url}`, data).then(res => res.data.content);
let requestUrl = url.indexOf("http:") >= 0 || url.indexOf("https:") >= 0 ? url : `${base}${url}`;
return axios.post(requestUrl, data).then(res => res.data.content);
}
export const store = {
putSession: function (sessionId) {
localStorage.setItem("_jiajia_childrenhost_sesson", sessionId);
},
getSession: function () {
return localStorage.getItem("_jiajia_childrenhost_sesson");
},
removeSession: function () {
localStorage.removeItem("_jiajia_childrenhost_sesson");
},
saveRedirectUrl() {
let current = Router.history.current || {};
let data = {
route: current.path,
params: current.query
}
localStorage.setItem("_jiajia_childrenhost_redirect", JSON.stringify(data));
},
getRedirectUrl() {
let dataStr = localStorage.getItem("_jiajia_childrenhost_redirect");
if (dataStr) {
let data = JSON.parse(dataStr);
let path = data.route;
let sep = "?";
if (data.params) {
for (let key in data.params) {
path += sep + key + "=" + data.params[key];
sep = "&";
}
}
return path;
}
return null;
},
delRedirectUrl() {
localStorage.removeItem("_jiajia_childrenhost_redirect");
},
getWxAppId() {
return `${baseWxAppid}`;
},
toWxLogin() {
let baseUrl = location.origin + location.pathname;
let returnUrl = encodeURIComponent(`${wxOauthUrl}` + "?returnUrl=" + baseUrl + "?openId=OPENID&p=p");
let oauthUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + `${baseWxAppid}` + "&redirect_uri=" + returnUrl + "&response_type=code&scope=snsapi_userinfo&stats=" + new Date().getTime() + "#wechat_redirect";
location.href = oauthUrl;
}
}
/**
* 封装post方法
......@@ -152,5 +185,38 @@ export const formdata = params => {
url,
data
} = params;
return axios.post(`${base}${url}`, data, formDataHeaders).then(res => res.data);
}
\ No newline at end of file
let requestUrl = url.indexOf("http:") >= 0 || url.indexOf("https:") >= 0 ? url : `${base}${url}`;
return axios.post(requestUrl, data, formDataHeaders).then(res => res.data);
}
export const request = {
post(url, data) {
return axios.post(`${requestDomain}${url}`, data);
},
get(url, data) {
return axios.get(`${requestDomain}${url}`, { params: data });
},
form(url, params) {
let formData = new FormData(); //使用formData对象
for (let key in params) {
formData.append(key, params[key]);
}
let requestUrl = url.indexOf("://") >= 0 ? `${url}` : `${requestDomain}${url}`;
return axios.post(requestUrl, formData, formDataHeaders)
},
build(url, params){
let fullUrl = `${requestDomain}${url}`;
let split = "";
for(let key in params){
if(split){
split = "&";
} else {
split = "?"
}
fullUrl += split + key +"="+params[key];
}
return fullUrl;
},
/*test*/
};
\ No newline at end of file
......
<template>
<van-overlay :show="show" >
</van-overlay>
</template>
<script>
import Vue from "vue";
import { Overlay } from "vant";
Vue.use(Overlay);
export default {
props: ["value"],
data() {
return {
model: this.value,
show: false
};
},
methods: {},
created() {}
};
</script>
<style lang="less" scoped>
</style>
<template>
<div class="bottom-panel">
<div class="bottom-tool-container">
<div class="item" v-bind:class="{activity : activityIndex == 1}" @click="itemSelect(1)">
<div class="white-bg">
<div class="icon icon-01"></div>
</div>
<div class="name">大赛介绍</div>
</div>
<div class="item" v-bind:class="{activity : activityIndex == 2}" @click="itemSelect(2)">
<div class="white-bg">
<div class="icon icon-02"></div>
</div>
<div class="name">我要报名</div>
</div>
<div class="item" v-bind:class="{activity : activityIndex == 3}" @click="itemSelect(3)">
<div class="white-bg">
<div class="icon icon-03"></div>
</div>
<div class="name">人气评选</div>
</div>
<div class="item" v-bind:class="{activity : activityIndex == 4}" @click="itemSelect(4)">
<div class="white-bg">
<div class="icon icon-04"></div>
</div>
<div class="name">更多福利</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ["value"],
data() {
return {
activityIndex: this.value
};
},
methods: {
itemSelect(index) {
if (this.activityIndex == index) {
return;
}
this.activityIndex = index;
switch (this.activityIndex) {
case 1:
this.$router.push("/");
break;
case 2:
this.$router.push("/sign");
break;
case 3:
this.$router.push("/list");
break;
case 4:
this.$router.push("/welfare");
break;
}
this.$emit("selectChange", this.activityIndex);
}
},
created() {
if (!this.activityIndex) {
this.activityIndex = 1;
}
}
};
</script>
<style lang="less" scoped>
.bottom-panel {
z-index: 999;
position: fixed;
bottom: 0;
height: 165px;
width: 750px;
background: url(../../assets/imgs/bottom-grassland.png) no-repeat;
background-size: 100% auto;
background-position: bottom;
}
.bottom-tool-container {
margin: auto;
width: 680px;
display: flex;
justify-content: space-between;
}
.item {
width: 140px;
.icon {
margin: auto;
width: 86px;
height: 86px;
}
.icon-01 {
background: url(../../assets/imgs/icon-01.png);
background-size: 100%;
}
.icon-02 {
background: url(../../assets/imgs/icon-02.png);
background-size: 100%;
}
.icon-03 {
background: url(../../assets/imgs/icon-03.png);
background-size: 100%;
}
.icon-04 {
background: url(../../assets/imgs/icon-04.png);
background-size: 100%;
}
.name {
width: 100%;
text-align: center;
color: #fff;
font-size: 24px;
}
.white-bg {
margin: auto;
padding-top: 7px;
background-color: transparent;
width: 110px;
height: 103px;
border-radius: 55px;
}
}
.activity {
.white-bg {
background-color: #fff !important;
}
}
</style>
<template>
<div class="home">home</div>
<div class="home">
<!-- <div class="title"></div>
<div class="sys-btn btn-margin">我要报名</div>
<div class="rule"></div>
<div class="prize"></div>
<div class="leap-01"></div>
<div class="leap-02"></div>
<div class="leap-03"></div>
<div class="remain"></div>
<bottom-tool v-model="activityIndex"></bottom-tool>-->
</div>
</template>
<script>
let urls = {
login: "/jiajiaCHApi/app/login"
};
import { store, httpPost } from "@/api/fetch-api.js";
export default {
name: 'home'
}
name: "home",
data() {
return {
activityIndex: 1,
loginParam: {
openid: "",
accessToken: ""
}
};
},
methods: {
init() {
if (store.getSession()) {
this.$router.push("/index");
} else {
let params = this.analysisParams();
if (params["openId"]) {
this.loginParam.openid = params["openId"];
this.loginParam.accessToken = params["access_token"];
this.login();
} else {
store.toWxLogin();
}
}
},
analysisParams() {
let params = {};
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
params[pair[0]] = pair[1];
}
return params;
},
login() {
httpPost({ url: urls.login, data: this.loginParam }).then(res => {
store.putSession(res.sessionId);
let path = store.getRedirectUrl();
path = !path ? "/index" : path;
store.delRedirectUrl();
this.$router.push(path);
});
}
},
created() {
this.init();
}
};
</script>
<style lang="scss" scoped>
.home {
position: relative;
text-align: center;
background-color: #74cb35;
}
</style>
......
import api from '../../api/api'
import {
httpGet,
httpPost
} from '../../api/fetch-api.js'
export default {
data() {
return {
key: 'value'
}
},
components: {},
methods: {
initData() {}
},
mounted() {},
created() {
console.log("demo created");
}
}
\ No newline at end of file
@import './../../styles/support';
<template>
<div class="page">
<div class="app__bgc bgc"></div>
<div class="app__bg bg"></div>
<div class="app__content main">
<div class="top-space"></div>
<div class="content">
<span class="iconfont iconclose">demo</span>
</div>
</div>
</div>
</template>
<script src="./index.js"></script>
<style lang="scss" scoped>
// @import './index.scss';
</style>
\ No newline at end of file
File mode changed
<template>
<div class="home">
<div class="title"></div>
<div class="sys-btn btn-margin" @click="toSign">立即报名</div>
<div class="rule"></div>
<div class="prize"></div>
<div class="leap-01"></div>
<div class="leap-02"></div>
<div class="leap-03"></div>
<div class="remain"></div>
<bottom-tool v-model="activityIndex"></bottom-tool>
</div>
</template>
<script>
import BottomTool from "@/components/bottom-tools/bottom-tools";
export default {
name: "home",
data() {
return {
activityIndex: 1
};
},
methods : {
toSign(){
this.$router.push("/sign")
}
},
components: {
BottomTool
}
};
</script>
<style lang="scss" scoped>
.home {
position: relative;
text-align: center;
background-color: #74cb35;
}
.title {
width: 750px;
height: 955px;
background: url(../../assets/imgs/idx-head.jpg);
background-size: 100%;
}
.rule {
width: 689px;
height: 672px;
background: url(../../assets/imgs/rule.png);
background-size: 100%;
margin: auto;
margin-top: 26px;
}
.prize {
width: 684px;
height: 1570px;
background: url(../../assets/imgs/prize.png);
background-size: 100%;
margin: auto;
margin-top: 40px;
}
.btn-margin {
margin-top: 10px;
}
.leap-01 {
width: 87px;
height: 216px;
background: url(../../assets/imgs/leap-01.png);
background-size: 100%;
position: absolute;
right: 0;
top: 990px;
}
.leap-02 {
width: 138px;
height: 290px;
background: url(../../assets/imgs/leap-02.png);
background-size: 100%;
position: absolute;
right: 0;
top: 1665px;
}
.leap-03 {
width: 750px;
height: 355px;
background: url(../../assets/imgs/leap-03.png);
background-size: 100%;
position: absolute;
bottom: 0px;
}
.remain{
height: 0px;
}
</style>
File mode changed
<template>
<div class="editClass">
<div class="sys-container-panel content">
<div class="container-title">我要报名</div>
<div class="head-line"></div>
<div class="text-container space">
<div class="label">选手姓名：</div>
<div class="form-item">
<input v-model="formData.name" placeholder="请填写参赛者姓名" />
</div>
</div>
<div class="text-container space">
<div class="label">所属地区：</div>
<div class="inline-group inline-group-width">
<div class="form-item inline-group inline-02" @click="selectCityHandler">
<div class="label">{{formData.province ? formData.province : "请选择"}}</div>
<div class="icon-draw-down"></div>
</div>
<div class="form-item inline-group inline-02" @click="selectCityHandler">
<div class="label">{{formData.city ? formData.city : "请选择"}}</div>
<div class="icon-draw-down"></div>
</div>
</div>
</div>
<div class="text-container space">
<div class="label">个人简介：</div>
<div class="form-item">
<input v-model="formData.profile" placeholder="可填写参赛者获取过荣誉、特殊才艺技能等" />
</div>
</div>
<div class="text-container space">
<div class="label">竞赛宣言：</div>
<div class="form-item">
<input v-model="formData.slogan" placeholder="参赛口号，不超过8个字" />
</div>
</div>
<div class="text-container space">
<div class="label">家长姓名：</div>
<div class="form-item">
<input v-model="formData.parentName" placeholder="请填写父亲/母亲称呼" />
</div>
</div>
<div class="text-container space">
<div class="label">联系方式：</div>
<div class="form-item">
<input v-model="formData.parentMobile" placeholder="请填写正确手机号码" />
</div>
</div>
<div class="text-container space">
<div class="label">照片/视频：</div>
<div class="item-group top">
<div>
<upload-item v-model="formData.worksList"></upload-item>
</div>
<div class="tips">可上传1-3张照片，首张默认为海报图</div>
</div>
</div>
</div>
<div class="sys-btn-02" :class="{disabled : !autoRegister}" @click="submitFormHandler">确认提交</div>
<div class="center base-margin auto-register-tips" @click="acceptRegisterHandler">
<div class="icon-register" :class="{activity : autoRegister}"></div>
<div class="tips">自动注册为立白集团会员，立享会员权益，详见“更多福利”</div>
</div>
<van-popup position="bottom" :style="{ height: '40%' }" v-model="area.show">
<van-area
:area-list="areaList"
:columns-num="2"
title="选择城市"
:value="formData.cityCode"
@cancel="area.show = false"
@confirm="confirmSelectCityHandler"
/>
</van-popup>
</div>
</template>
<script>
let urls = {
area: "https://api.k.wxpai.cn/bizproxy/kdapi/area",
submit: "/jiajiaCHApi/app/works/submit"
};
import UploadItem from "./UploadItem";
import { httpGet, httpPost } from "@/api/fetch-api";
import AreaList from "@/api/area";
import Vue from "vue";
import { Toast } from "vant";
import { Area } from "vant";
import { Popup } from "vant";
Vue.use(Popup);
Vue.use(Area);
Vue.use(Toast);
export default {
props: ["value"],
data() {
return {
autoRegister: true,
successModelVisiable: true,
area: {
show: false
},
formData: this.value
};
},
methods: {
selectCityHandler() {
if (!this.formData.cityCode) {
this.formData.cityCode = "110100";
}
this.area.show = true;
},
confirmSelectCityHandler(res) {
let province = res[0];
let city = res[1];
if (!city) {
return;
}
this.formData.province = province.name;
this.formData.provinceCode = province.code;
this.formData.city = city.name;
this.formData.cityCode = city.code;
this.area.show = false;
},
acceptRegisterHandler() {
this.autoRegister = !this.autoRegister;
if (!this.autoRegister) {
}
},
submitFormHandler() {
if (!this.autoRegister) {
return;
}
if (!this.formData.name) {
Toast("请填写“参数者姓名”");
return;
}
if (!this.formData.province) {
Toast("请选择“所属地区”");
return;
}
if (!this.formData.profile) {
Toast("请填写“个人简介”");
return;
}
if (!this.formData.slogan) {
Toast("请填写“竞赛宣言”");
return;
}
if (this.formData.slogan.length > 8) {
Toast("“竞赛宣言”不要超过8个字");
return;
}
if (!this.formData.parentName) {
Toast("请填写“家长姓名”");
return;
}
if (!this.formData.parentMobile) {
Toast("请填写“联系方式”");
return;
}
if (
this.formData.parentMobile.indexOf("1") != 0 ||
this.formData.parentMobile.length != 11
) {
Toast("请填写正确的“联系方式”");
return;
}
if (!this.formData.worksList || this.formData.worksList.length == 0) {
Toast("请上传作品");
return;
}
Toast.loading({
mask: true,
message: "数据提交中..."
});
httpPost({ url: urls.submit, data: this.formData }).then(res => {
Toast.clear();
this.$emit("submit", res);
});
}
},
computed: {
areaList() {
return AreaList;
}
},
components: {
UploadItem
},
created() {}
};
</script>
<style lang="scss" scoped>
.content {
margin: 85px auto 60px auto;
padding-bottom: 60px;
.head-line {
height: 60px;
}
.edit {
width: 630px;
text-align: right;
u {
font-size: 24px;
color: #5db288;
position: relative;
z-index: 1000;
}
}
.swipe {
width: 630px;
height: 320px;
margin: auto;
border: 2px solid #82acae;
border-radius: 30px;
}
.space {
margin-top: 20px !important;
}
.top {
display: flex;
align-items: flex-start !important;
}
.inline-group-width {
width: 500px;
}
.inline-group {
display: flex;
justify-content: space-between;
align-items: center;
}
.text-container {
display: flex;
align-items: center;
width: 620px;
margin: auto;
.inline {
width: 315px !important;
}
.inline-02 {
width: 180px !important;
padding: 0 30px;
.label {
font-size: 20px;
}
}
.right {
justify-content: flex-end !important;
}
.label {
min-width: 128px;
font-size: 20px;
text-align: left;
}
.msg {
color: #303531;
font-size: 24px;
text-align: left;
}
.primay {
font-size: 32px !important;
font-weight: 600;
color: #ff9e30;
}
.form-item {
width: 500px;
height: 52px;
border: 1px solid #82acae;
background-color: #addfe1;
border-radius: 26px;
line-height: 52px;
display: flex;
align-items: center;
input {
margin-left: 25px;
line-height: 52px;
height: 52px;
border: none;
width: 90%;
height: 100%;
background-color: transparent;
position: relative;
z-index: 1000;
font-size: 22px;
}
}
}
input::-webkit-input-placeholder {
color: #4f9984;
font-size: 18px;
}
}
.view-btn-group {
display: flex;
width: 730px;
margin: auto;
justify-content: space-between;
margin-bottom: 200px;
.sys-btn-02 {
width: 300px;
line-height: 90px;
}
}
.auto-register-tips {
width: 700px;
margin: auto;
}
.icon-draw-down {
width: 30px;
height: 18px;
background: url(../../../assets/imgs/draw-down.png) no-repeat;
background-size: 100%;
}
.base-margin {
margin-top: 40px;
}
.icon-register {
width: 30px;
height: 30px;
background: url(../../../assets/imgs/checkbox-uncheck.png) no-repeat;
background-size: 100%;
}
.icon-register.activity {
width: 30px;
height: 30px;
background: url(../../../assets/imgs/checkbox-checked.png) no-repeat;
background-size: 100%;
}
.center {
display: flex;
justify-content: center;
align-items: center;
}
.disabled {
filter: grayscale(100%);
}
.tips {
font-size: 20px;
color: #064e39;
padding-left: 10px;
text-align: left;
}
</style>
<template>
<div>
<div class="img-container" v-for="(item,index) in fileList" :key="index">
<img :src="item.worksUrl" />
<i class="van-icon van-icon-delete" @click="deleteImageHandler(index)"></i>
</div>
<van-uploader
ref="vanUploader"
class="uploader"
:after-read="uploadSumit"
v-if="!fileList || fileList.length < 3"
>+</van-uploader>
</div>
</template>
<script>
import { request } from "@/api/fetch-api.js";
import Vue from "vue";
import { Uploader } from "vant";
Vue.use(Uploader);
/**
* 外层插件可通过监听：v-on:before-upload；v-on:after-upload两个事件监听上传结果
* after-upload(success, src)
*/
export default {
props: ["value"],
data() {
return {
fileList: this.value,
uploadUrl: "https://api.k.wxpai.cn/bizproxy/kdapi/file/upload",
};
},
methods: {
uploadSumit(params) {
console.log(params);
let data = {
path: "/pro/jiajiaChildrenHost",
file: params.file
};
request
.form(this.uploadUrl, data)
.then(result => {
let uploadResult = {
worksUrl: result.data.content,
worksType: params.file.type.indexOf("image") >= 0 ? "pic" : "video"
};
if (!this.fileList) {
this.fileList = [];
}
this.fileList.push(uploadResult);
this.$emit("input", this.fileList);
})
.catch(res => {});
},
deleteImageHandler(index) {
this.fileList.splice(index, 1);
}
},
computed: {
currentValue: function() {
return this.value;
}
}
};
</script>
<style lang="scss" scoped>
.uploader {
border: 1px solid #82acae;
border-radius: 6px;
position: relative;
overflow: hidden;
padding: 10px;
background-color: #addfe1;
width: 120px;
min-height: 120px;
font-size: 40px;
line-height: 120px;
text-align: center;
font-weight: bold;
}
.img-container {
border: 1px solid #82acae;
border-radius: 6px;
position: relative;
overflow: hidden;
padding: 10px;
background-color: #addfe1;
width: 120px;
text-align: center;
font-weight: bold;
margin-bottom: 10px;
img {
width: 100%;
}
.van-icon {
background-color: rgba($color: #000000, $alpha: 0.3);
position: absolute;
right: 10px;
bottom: 5px;
font-size: 40px;
}
}
.avatar {
max-width: 120px;
max-height: 120px;
display: block;
}
</style>
<template>
<div class="viewClass">
<div class="sys-container-panel content">
<div class="container-title">我要报名</div>
<div class="head-line"></div>
<div class="edit">
<u @click="formEditHandler">信息编辑</u>
</div>
<div class="swipe">
<van-swipe :autoplay="5000">
<van-swipe-item v-for="(works, index) in formData.worksList" :key="index">
<img :src="works.worksUrl" />
</van-swipe-item>
</van-swipe>
</div>
<div class="text-container space">
<div class="text-container inline">
<div class="label">参数编号：</div>
<div class="msg">{{formData.worksNo}}</div>
</div>
<div class="text-container inline right">
<div class="label">目前人气值：</div>
<div class="msg primay">{{formData.praiseNumber}}</div>
</div>
</div>
<div class="text-container space">
<div class="label">来自城市：</div>
<div class="msg">{{formData.province}} {{formData.city}}</div>
</div>
<div class="text-container space top">
<div class="label">我的简介：</div>
<div class="msg">{{formData.profile}}</div>
</div>
<div class="text-container space top">
<div class="label">竞赛宣言：</div>
<div class="msg">{{formData.slogan}}</div>
</div>
<div class="privacy">
<hr />
<div class="text-container space top">
<div class="label">家长称呼：</div>
<div class="msg">{{formData.parentName}}</div>
</div>
</div>
</div>
<div class="view-btn-group">
<div class="sys-btn-02" @click="selfPraiseHandler">投自己一票</div>
<div class="sys-btn-02" @click="showShareHandler">呼叫亲友团</div>
</div>
</div>
</template>
<script>
let urls = {};
import { httpGet, httpPost } from "@/api/fetch-api";
import Vue from "vue";
import { Toast } from "vant";
import { Popup } from "vant";
Vue.use(Popup);
Vue.use(Toast);
export default {
props: ["value"],
data() {
return {
formData: this.value
};
},
methods: {
formEditHandler() {
this.$emit("edit");
},
selfPraiseHandler() {
// 自己点赞
},
showShareHandler() {
// 出现分享层
}
},
created() {
console.log("view model === ", this.formData);
}
};
</script>
<style lang="scss" scoped>
.content {
margin: 85px auto 60px auto;
padding-bottom: 60px;
.head-line {
height: 60px;
}
.edit {
width: 630px;
text-align: right;
u {
font-size: 24px;
color: #5db288;
position: relative;
z-index: 1000;
}
}
.swipe {
width: 630px;
height: 320px;
margin: auto;
border: 2px solid #82acae;
border-radius: 30px;
img {
max-height: 300px;
max-width: 600px;
}
}
.space {
margin-top: 20px !important;
}
.top {
display: flex;
align-items: flex-start !important;
}
.inline-group-width {
width: 500px;
}
.inline-group {
display: flex;
justify-content: space-between;
align-items: center;
}
.text-container {
display: flex;
align-items: center;
width: 620px;
margin: auto;
.inline {
width: 315px !important;
}
.inline-02 {
width: 180px !important;
padding: 0 30px;
.label {
font-size: 20px;
}
}
.right {
justify-content: flex-end !important;
}
.label {
min-width: 128px;
font-size: 20px;
text-align: left;
}
.msg {
color: #303531;
font-size: 24px;
text-align: left;
}
.primay {
font-size: 32px !important;
font-weight: 600;
color: #ff9e30;
}
}
.privacy {
width: 630px;
margin: auto;
hr {
border-top: 3px dashed #d4d1c5;
margin: 60px auto;
}
}
}
.view-btn-group {
display: flex;
width: 730px;
margin: auto;
justify-content: space-between;
margin-bottom: 200px;
.sys-btn-02 {
width: 300px;
line-height: 90px;
}
}
.auto-register-tips {
width: 700px;
margin: auto;
}
.icon-draw-down {
width: 30px;
height: 18px;
background: url(../../../assets/imgs/draw-down.png) no-repeat;
background-size: 100%;
}
</style>
<template>
<div class="home">
<div class="head-leap"></div>
<ViewModel v-model="formData" v-if="init && !formEdit" v-on:edit="formEdit=true"></ViewModel>
<EditModel v-model="formData" v-if="init && formEdit" v-on:submit="initActivity"></EditModel>
<div class="bottom-line"></div>
<bottom-tool v-model="activityIndex"></bottom-tool>
<!-- <van-popup class="messagePopue" v-model="successModelVisiable" :close-on-click-overlay="false">
<div></div>
</van-popup>-->
</div>
</template>
<script>
let urls = {
myWork: "/jiajiaCHApi/app/works",
area: "https://api.k.wxpai.cn/bizproxy/kdapi/area"
};
import BottomTool from "@/components/bottom-tools/bottom-tools";
import EditModel from "./components/EditModel";
import ViewModel from "./components/ViewModel";
import { httpGet, httpPost } from "@/api/fetch-api";
import AreaList from "@/api/area";
import Vue from "vue";
import { Toast } from "vant";
import { Area } from "vant";
import { Popup } from "vant";
import { Swipe, SwipeItem } from "vant";
Vue.use(Popup);
Vue.use(Area);
Vue.use(Toast);
Vue.use(Swipe).use(SwipeItem);
export default {
name: "home",
data() {
return {
activityIndex: 2,
formEdit: false,
init: false,
isMy: 1,
successModelVisiable: true,
formData: {
name: "",
province: "",
provinceCode: "",
city: "",
cityCode: "",
profile: "",
slogan: "",
parentName: "",
parentMobile: "",
worksList: []
}
};
},
methods: {
initActivity() {
Toast.loading({
mask: true,
message: "加载中..."
});
httpGet({ url: urls.myWork }).then(res => {
this.init = true;
Toast.clear();
this.formData = res.data || {};
if (!res.data) {
this.formEdit = true;
} else {
this.formEdit = false;
}
});
}
},
components: {
BottomTool,
EditModel,
ViewModel
},
created() {
this.initActivity();
}
};
</script>
<style lang="scss" scoped>
.home {
position: relative;
text-align: center;
}
.head-leap {
width: 750px;
height: 231px;
background: url(../../assets/imgs/head-leap.png);
background-size: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 999;
}
.bottom-line {
height: 250px;
background-color: transparent;
}
</style>
<template>
<div class="home">
<div class="header"></div>
<div class="qy">
<div class="qrcode">
<img src="../../assets/imgs/walfare-qrcode.png" />
</div>
</div>
<div class="cj">
<div class="sys-btn-02 btn-position" @click="toDraw">马上抽奖</div>
</div>
<div class="remain"></div>
<bottom-tool v-model="activityIndex"></bottom-tool>
</div>
</template>
<script>
import BottomTool from "@/components/bottom-tools/bottom-tools";
export default {
name: "home",
data() {
return {
activityIndex: 4
};
},
methods: {
toDraw() {
this.$router.push("/draw");
}
},
components: {
BottomTool
}
};
</script>
<style lang="scss" scoped>
.home {
position: relative;
text-align: center;
background: url(../../assets/imgs/welfare-bg.jpg);
background-size: 100% auto;
}
.header {
width: 750px;
height: 247px;
background: url(../../assets/imgs/welfare-top.jpg);
background-size: 100%;
}
.qy {
width: 708px;
height: 1136px;
background: url(../../assets/imgs/welfare-qy.png);
background-size: 100%;
margin: auto;
margin-top: -100px;
position: relative;
.qrcode {
position: absolute;
width: 171px;
height: 171px;
left: 270px;
bottom: 140px;
img {
width: 100%;
}
}
}
.cj {
width: 718px;
height: 968px;
background: url(../../assets/imgs/welfare-cj.png);
background-size: 100%;
margin: auto;
margin-top: 50px;
position: relative;
}
.btn-position {
position: absolute;
bottom: 80px;
left: 188px;
}
.remain {
height: 150px;
}
</style>
......@@ -5,29 +5,53 @@ import Home from './pages/Home.vue'
Vue.use(Router)
const routes = [{
path: '/',
name: 'home',
component: Home,
meta: {
title: '首页'
}
},
{
path: '/demo',
name: 'demo',
component: () => import('./pages/demo/index.vue'),
meta: {
title: '模板'
}
},
{
path: '/about',
name: 'about',
component: () => import('./pages/About.vue'),
meta: {
title: '关于'
}
path: '/',
name: 'home',
component: Home,
meta: {
title: '加载中...'
}
},
{
path: '/index',
name: 'index',
component: () => import('./pages/index/index.vue'),
meta: {
title: '大赛介绍'
}
},
{
path: '/sign',
name: 'sign',
component: () => import('./pages/sign/index.vue'),
meta: {
title: '我要报名'
}
},
{
path: '/list',
name: 'list',
component: () => import('./pages/list/index.vue'),
meta: {
title: '人气评选'
}
},
{
path: '/welfare',
name: 'welfare',
component: () => import('./pages/welfare/index.vue'),
meta: {
title: '更多福利'
}
},
{
path: '/draw',
name: 'draw',
component: () => import('./pages/draw/index.vue'),
meta: {
title: '幸运抽奖'
}
}
]
// add route path
......
......@@ -202,3 +202,4 @@
background-color: $colorBlack;
}
}
......
......@@ -38,7 +38,7 @@ module.exports = {
// 它支持webPack-dev-server的所有选项
devServer: {
host: "localhost",
host: "192.168.0.101",
port: 9001, // 端口号
https: false, // https:{type:Boolean}
open: true, //配置自动启动浏览器
......