mirror of
https://github.com/sunniejs/vue-h5-template.git
synced 2025-04-06 03:57:50 +08:00
徒步大会提交1
This commit is contained in:
zhaochuanxin
parent
c2109f0e78
commit
04c3c92dec
@ -5,9 +5,9 @@ module.exports = {
|
||||
overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
|
||||
},
|
||||
'postcss-pxtorem': {
|
||||
rootValue: 37.5,
|
||||
rootValue: 75,
|
||||
propList: ['*'],
|
||||
//selectorBlackList: ['van-']
|
||||
selectorBlackList: ['van-toast']
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
76
package-lock.json
generated
76
package-lock.json
generated
@ -1906,9 +1906,9 @@
|
||||
}
|
||||
},
|
||||
"chalk": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
|
||||
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.1.tgz?cache=0&sync_timestamp=1618995297666&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.1.tgz",
|
||||
"integrity": "sha1-yAs/qyi/Y3HmhjMl7uZ+YYt35q0=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
@ -1965,8 +1965,8 @@
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
|
||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||
"resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz",
|
||||
"integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
@ -1978,8 +1978,8 @@
|
||||
},
|
||||
"loader-utils": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
|
||||
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
|
||||
"resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
|
||||
"integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
@ -2083,8 +2083,8 @@
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
||||
"resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1618561027869&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
|
||||
"integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
@ -2109,9 +2109,9 @@
|
||||
}
|
||||
},
|
||||
"vue-loader-v16": {
|
||||
"version": "npm:vue-loader@16.0.0-beta.8",
|
||||
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.8.tgz",
|
||||
"integrity": "sha512-oouKUQWWHbSihqSD7mhymGPX1OQ4hedzAHyvm8RdyHh6m3oIvoRF+NM45i/bhNOlo8jCnuJhaSUf/6oDjv978g==",
|
||||
"version": "npm:vue-loader@16.2.0",
|
||||
"resolved": "https://registry.nlark.com/vue-loader/download/vue-loader-16.2.0.tgz",
|
||||
"integrity": "sha1-BGpTMI3Ufljv4g3ewe3sAnzjtG4=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
@ -4517,58 +4517,6 @@
|
||||
"sha.js": "^2.4.8"
|
||||
}
|
||||
},
|
||||
"cross-env": {
|
||||
"version": "7.0.2",
|
||||
"resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.2.tgz",
|
||||
"integrity": "sha512-KZP/bMEOJEDCkDQAyRhu3RL2ZO/SUVrxQVI0G3YEQ+OLbRA3c6zgixe8Mq8a/z7+HKlNEjo8oiLUs8iRijY2Rw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"cross-spawn": "^7.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"cross-spawn": {
|
||||
"version": "7.0.3",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
|
||||
"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"path-key": "^3.1.0",
|
||||
"shebang-command": "^2.0.0",
|
||||
"which": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"path-key": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
|
||||
"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
|
||||
"dev": true
|
||||
},
|
||||
"shebang-command": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
|
||||
"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"shebang-regex": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"shebang-regex": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
|
||||
"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
|
||||
"dev": true
|
||||
},
|
||||
"which": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
||||
"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"isexe": "^2.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"cross-spawn": {
|
||||
"version": "6.0.5",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 66 KiB |
@ -1,5 +1,10 @@
|
||||
// import qs from 'qs'
|
||||
// axios
|
||||
// import request from '@/utils/request'
|
||||
// home api
|
||||
// home homeApi
|
||||
|
||||
const homeApi = {
|
||||
registerForWalkingFestival: '/ebapi/public_api/register_for_walking_festival'
|
||||
}
|
||||
|
||||
export default homeApi
|
||||
|
||||
@ -1,32 +1,14 @@
|
||||
import api from './index'
|
||||
import homeApi from './home'
|
||||
// axios
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 登录
|
||||
export function login(data) {
|
||||
// 用户提交图片 & 手机号
|
||||
export function registerForWalkingFestival(data) {
|
||||
return request({
|
||||
url: api.Login,
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
url: homeApi.registerForWalkingFestival,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 用户信息 post 方法
|
||||
export function getUserInfo(data) {
|
||||
return request({
|
||||
url: api.UserInfo,
|
||||
method: 'post',
|
||||
data,
|
||||
hideloading: true
|
||||
})
|
||||
}
|
||||
|
||||
// 用户名称 get 方法
|
||||
export function getUserName(params) {
|
||||
return request({
|
||||
url: api.UserName,
|
||||
method: 'get',
|
||||
params,
|
||||
hideloading: true
|
||||
// hideloading: true
|
||||
})
|
||||
}
|
||||
|
||||
@ -8,6 +8,13 @@ body .app {
|
||||
background-color: $background-color;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
padding-bottom: 50px;
|
||||
// .app-container {
|
||||
// padding-bottom: 50px;
|
||||
// }
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
BIN
src/assets/images/home/guize.png
Normal file
BIN
src/assets/images/home/guize.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/images/home/guize_bg.png
Normal file
BIN
src/assets/images/home/guize_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
src/assets/images/home/img.png
Normal file
BIN
src/assets/images/home/img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
BIN
src/assets/images/home/img_tianjia.png
Normal file
BIN
src/assets/images/home/img_tianjia.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1010 B |
BIN
src/assets/images/home/shangchuan_bukedian.png
Normal file
BIN
src/assets/images/home/shangchuan_bukedian.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
src/assets/images/home/shumu.png
Normal file
BIN
src/assets/images/home/shumu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
BIN
src/assets/images/home/title_bg(1).png
Normal file
BIN
src/assets/images/home/title_bg(1).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 538 B |
BIN
src/assets/images/home/title_bg.png
Normal file
BIN
src/assets/images/home/title_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 538 B |
BIN
src/assets/images/home/title_bg_01.png
Normal file
BIN
src/assets/images/home/title_bg_01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 536 B |
BIN
src/assets/images/home/xiazai.png
Normal file
BIN
src/assets/images/home/xiazai.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
src/assets/images/home/xiazai_button.png
Normal file
BIN
src/assets/images/home/xiazai_button.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
src/assets/images/home/zhutu.png
Normal file
BIN
src/assets/images/home/zhutu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 324 KiB |
@ -1,9 +1,9 @@
|
||||
// 本地环境配置
|
||||
module.exports = {
|
||||
title: 'vue-h5-template',
|
||||
baseUrl: 'http://localhost:9018', // 项目地址
|
||||
baseApi: 'https://test.xxx.com/api', // 本地api请求地址,注意：如果你使用了代理，请设置成'/'
|
||||
APPID: 'xxx',
|
||||
APPSECRET: 'xxx',
|
||||
$cdn: 'https://www.sunniejs.cn/static'
|
||||
}
|
||||
// 本地环境配置
|
||||
module.exports = {
|
||||
title: '徒步大会活动',
|
||||
baseUrl: 'http://localhost:9018', // 项目地址
|
||||
baseApi: '/api', // 本地api请求地址,注意：如果你使用了代理，请设置成'/'
|
||||
APPID: 'xxx',
|
||||
APPSECRET: 'xxx',
|
||||
$cdn: 'https://www.sunniejs.cn/static'
|
||||
}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
// 正式
|
||||
module.exports = {
|
||||
title: 'vue-h5-template',
|
||||
baseUrl: 'https://www.xxx.com/', // 正式项目地址
|
||||
baseApi: 'https://www.xxx.com/api', // 正式api请求地址
|
||||
APPID: 'xxx',
|
||||
APPSECRET: 'xxx',
|
||||
$cdn: 'https://www.sunniejs.cn/static'
|
||||
}
|
||||
// 正式
|
||||
module.exports = {
|
||||
title: '徒步大会活动',
|
||||
baseUrl: 'https://mall.xiangleba.com.cn', // 正式项目地址
|
||||
baseApi: 'https://mall.xiangleba.com.cn', // 正式api请求地址
|
||||
APPID: 'xxx',
|
||||
APPSECRET: 'xxx',
|
||||
$cdn: 'https://www.sunniejs.cn/static'
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
module.exports = {
|
||||
title: 'vue-h5-template',
|
||||
baseUrl: 'https://test.xxx.com', // 测试项目地址
|
||||
baseApi: 'https://test.xxx.com/api', // 测试api请求地址
|
||||
APPID: 'xxx',
|
||||
APPSECRET: 'xxx',
|
||||
$cdn: 'https://www.sunniejs.cn/static'
|
||||
}
|
||||
module.exports = {
|
||||
title: '徒步大会活动',
|
||||
baseUrl: 'https://test.xxx.com', // 测试项目地址
|
||||
baseApi: 'https://test.xxx.com/api', // 测试api请求地址
|
||||
APPID: 'xxx',
|
||||
APPSECRET: 'xxx',
|
||||
$cdn: 'https://www.sunniejs.cn/static'
|
||||
}
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
// 按需全局引入 vant组件
|
||||
import Vue from 'vue'
|
||||
import { Button, List, Cell, Tabbar, TabbarItem } from 'vant'
|
||||
import { Button, List, Cell, ImagePreview, Toast, Tabbar, TabbarItem } from 'vant'
|
||||
Vue.use(Button)
|
||||
Vue.use(Cell)
|
||||
Vue.use(List)
|
||||
Vue.use(ImagePreview)
|
||||
Vue.use(Toast)
|
||||
Vue.use(Tabbar).use(TabbarItem)
|
||||
|
||||
@ -17,12 +17,6 @@ export const constantRouterMap = [
|
||||
name: 'Home',
|
||||
component: () => import('@/views/home/index'),
|
||||
meta: { title: '首页', keepAlive: false }
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'About',
|
||||
component: () => import('@/views/home/about'),
|
||||
meta: { title: '关于我', keepAlive: false }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,113 +0,0 @@
|
||||
<!-- home -->
|
||||
<template>
|
||||
<div class="about-container">
|
||||
<div class="warpper">
|
||||
<div class="list">
|
||||
<div class="logo"></div>
|
||||
<div class="demo-home__title">VUE H5开发模板</div>
|
||||
<div class="item">
|
||||
项目地址:
|
||||
<a href="https://github.com/sunniejs/vue-h5-template">https://github.com/sunniejs/vue-h5-template</a>
|
||||
</div>
|
||||
<div class="item">项目作者: sunnie</div>
|
||||
<div class="item"></div>
|
||||
<div class="wechat">
|
||||
<img :src="this.wechat" alt="" />
|
||||
</div>
|
||||
<div class="item">关注公众号：回复“加群”即可加 前端仙女群</div>
|
||||
<div class="item">
|
||||
{{ userName }}
|
||||
<van-button v-if="userName == ''" type="warning" size="small" @click="doDispatch">快点我~</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 请求接口
|
||||
import { getUserInfo } from '@/api/user.js'
|
||||
import { mapGetters } from 'vuex'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
wechat: `${this.$cdn}/wx/640.gif`
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['userName'])
|
||||
},
|
||||
mounted() {
|
||||
this.initData()
|
||||
},
|
||||
methods: {
|
||||
// 请求数据案例
|
||||
initData() {
|
||||
// 请求接口数据，仅作为展示，需要配置src->config下环境文件
|
||||
const params = { user: 'sunnie' }
|
||||
getUserInfo(params)
|
||||
.then(() => { })
|
||||
.catch(() => { })
|
||||
},
|
||||
// Action 通过 store.dispatch 方法触发
|
||||
doDispatch() {
|
||||
this.$store.dispatch('setUserName', '真乖，赶紧关注公众号，组织都在等你~')
|
||||
},
|
||||
goGithub(index) {
|
||||
window.location.href = 'https://github.com/sunniejs/vue-h5-template'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.about-container {
|
||||
/* 你的命名空间 */
|
||||
background: #fff;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
.warpper {
|
||||
padding: 50px 12px 12px 12px;
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
.demo-home__title {
|
||||
margin: 0 0 6px;
|
||||
font-size: 32px;
|
||||
.demo-home__title img,
|
||||
.demo-home__title span {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.item {
|
||||
font-size: 14px;
|
||||
line-height: 34px;
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.van-button {
|
||||
/* vant-ui 元素*/
|
||||
background: #ff5500;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: url($cdn+'/weapp/logo.png') center / contain no-repeat;
|
||||
}
|
||||
.wechat {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -2,74 +2,361 @@
|
||||
<template>
|
||||
<div class="index-container">
|
||||
<div class="warpper">
|
||||
<h1 class="demo-home__title"><img src="https://www.sunniejs.cn/static/weapp/logo.png" /><span> VUE H5开发模板</span></h1>
|
||||
<h2 class="demo-home__desc">
|
||||
A vue h5 template with Vant UI
|
||||
</h2>
|
||||
<img class="warpper-bg" src="@/assets/images/home/zhutu.png" alt="" />
|
||||
<div class="warpper-form" v-if="!isFinished">
|
||||
<input type="text" name="phone" v-model="submitInfo.phone" placeholder="请输入手机号" />
|
||||
<div class="warpper-form__file" v-if="!submitInfo.image">
|
||||
<img class="warpper-form__emptyImage" src="@/assets/images/home/img_tianjia.png" alt="" />
|
||||
<input type="file" name="image" accept="image/jpeg,image/jpg,image/png" @change="fileChange($event)" />
|
||||
<div class="warpper-form__note">请上传徒步报名凭证</div>
|
||||
</div>
|
||||
<div class="warpper-form__upLoadImage" v-else>
|
||||
<img :src="upLoadImage" alt="上传图片" />
|
||||
</div>
|
||||
<button class="warpper-form__submit" :disabled="!isVerification" @click="submit">立即上传</button>
|
||||
</div>
|
||||
<div class="warpper-finished" v-else>
|
||||
<div class="warpper-finished__note--1">徒步大会报名费已返还</div>
|
||||
<div class="warpper-finished__note--2">请下载享乐吧APP，<br />到“购物商城 - 我的余额”中查看</div>
|
||||
<a href="https://h5.game8808.cn/themes/simplebootx/Appapi/Video/txjunp.php" class="warpper-finished__download">
|
||||
<img src="@/assets/images/home/xiazai_button.png" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="warpper-rules">
|
||||
<div class="title">活动规则</div>
|
||||
<div class="warpper-rules__item">
|
||||
<div class="item-title"><span>活动对象</span></div>
|
||||
<div class="item-text">活动期间注册并登录享乐吧APP的新用户，老用户</div>
|
||||
</div>
|
||||
<div class="warpper-rules__item">
|
||||
<div class="item-title"><span>活动时间</span></div>
|
||||
<div class="item-text">5月4日 - 5月14日</div>
|
||||
</div>
|
||||
<div class="warpper-rules__item">
|
||||
<div class="item-title"><span>活动流程及规则</span></div>
|
||||
<div class="item-text">
|
||||
<span class="count">1.</span>
|
||||
<span class="content">上传徒步大会有效报名证明图片；</span>
|
||||
</div>
|
||||
<div class="item-text">
|
||||
<span class="content">报名证明： </span>
|
||||
</div>
|
||||
<div class="item-text">
|
||||
<span class="content">（1）公众号报名成功订单 </span>
|
||||
</div>
|
||||
<div class="item-text">
|
||||
<span class="content">
|
||||
<img :src="ActiveImage" alt="" @click="showImge" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="item-text">
|
||||
<span class="content">（2）线下报名凭证 </span>
|
||||
</div>
|
||||
<div class="item-text">
|
||||
<span class="count">2.</span>
|
||||
<span class="content">平台审核通过后，享乐吧APP发放10元商城余额，请到“购物商城-我的余额”中查看;</span>
|
||||
</div>
|
||||
<div class="item-text">
|
||||
<span class="count">3.</span>
|
||||
<span class="content">活动注意事项：</span>
|
||||
</div>
|
||||
<div class="item-text">
|
||||
<span class="content">· 若发现用户违规行为，享乐吧APP有权立即终止其活动； </span>
|
||||
</div>
|
||||
<div class="item-text">
|
||||
<span class="content">· 本活动最终解释权归享乐吧APP平台所有。</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="warpper-download">
|
||||
<a href="https://h5.game8808.cn/themes/simplebootx/Appapi/Video/txjunp.php">
|
||||
<img src="@/assets/images/home/xiazai.png" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<van-cell icon="success" v-for="item in list" :key="item" :title="item" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ImagePreview, Toast } from 'vant'
|
||||
import { registerForWalkingFestival } from '@/api/user'
|
||||
import ActiveImage from '@/assets/images/home/img.png'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
'Vue-cli4',
|
||||
'配置多环境变量',
|
||||
'VantUI 组件按需加载',
|
||||
'Sass 全局样式',
|
||||
'Webpack 4',
|
||||
'Vuex 状态管理',
|
||||
'Axios 封装及接口管理',
|
||||
'Vue-router',
|
||||
'Webpack 4 vue.config.js 基础配置',
|
||||
'配置 proxy 跨域',
|
||||
'配置 alias 别名',
|
||||
'配置 打包分析',
|
||||
'配置 externals 引入 cdn 资源',
|
||||
'去掉 console.log',
|
||||
'splitChunks 单独打包第三方模块',
|
||||
'添加 IE 兼容',
|
||||
'Eslint+Pettier 统一开发规范'
|
||||
]
|
||||
submitInfo: {
|
||||
phone: '',
|
||||
image: ''
|
||||
}, // 要上传的字段
|
||||
upLoadImage: '', // 是否已经上传了图片
|
||||
isFinished: false, // 是否完成提交
|
||||
ActiveImage // 点击可浏览的
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isVerification() {
|
||||
const emptyEnum = Object.values(this.submitInfo).filter(v => !v)
|
||||
// 如果存在空值不可提交
|
||||
if (emptyEnum.length > 0) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
// 上传图片响应
|
||||
fileChange(event) {
|
||||
const files = event.target.files
|
||||
if (files.length) {
|
||||
this.submitInfo.image = files[0]
|
||||
const reader = new FileReader()
|
||||
reader.readAsDataURL(files[0])
|
||||
reader.onload = data => {
|
||||
const result = data.target.result
|
||||
this.upLoadImage = result
|
||||
}
|
||||
}
|
||||
},
|
||||
// 点击图片浏览
|
||||
showImge() {
|
||||
ImagePreview([ActiveImage])
|
||||
},
|
||||
// 提交信息
|
||||
submit() {
|
||||
const { phone, image } = this.submitInfo
|
||||
if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(phone)) {
|
||||
return Toast('手机号码格式有误!')
|
||||
}
|
||||
if (!image) {
|
||||
return Toast('没有上传图片嗷!')
|
||||
}
|
||||
|
||||
computed: {},
|
||||
|
||||
mounted() { },
|
||||
|
||||
methods: {}
|
||||
var formData = new FormData()
|
||||
formData.append('phone', phone)
|
||||
formData.append('image', image)
|
||||
registerForWalkingFestival(formData)
|
||||
.then(res => {
|
||||
Toast('提交成功!')
|
||||
this.isFinished = true
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('registerForWalkingFestival-error', error)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.index-container {
|
||||
.warpper {
|
||||
padding: 12px;
|
||||
background: #fff;
|
||||
.demo-home__title {
|
||||
margin: 0 0 6px;
|
||||
background-color: #008a78;
|
||||
background-image: url('../../assets/images/home/shumu.png');
|
||||
background-position: bottom center;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
padding-bottom: 56px;
|
||||
min-height: 100vh;
|
||||
.warpper-bg {
|
||||
width: 100%;
|
||||
}
|
||||
.warpper-form {
|
||||
position: relative;
|
||||
width: 710px;
|
||||
margin: 0 auto;
|
||||
margin-top: -147px;
|
||||
border-radius: 10px;
|
||||
padding: 64px;
|
||||
background-color: #fff;
|
||||
border: 3px solid #3ea699;
|
||||
margin-bottom: 66px;
|
||||
.warpper-form__file {
|
||||
position: relative;
|
||||
}
|
||||
input[type='text'] {
|
||||
width: 582px;
|
||||
height: 90px;
|
||||
font-size: 32px;
|
||||
.demo-home__title img,
|
||||
.demo-home__title span {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-family: 'PingFang-SC-Bold';
|
||||
font-weight: bold;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
box-shadow: 0 0 0 3px #4fada2;
|
||||
-webkit-box-shadow: 0 0 0 3px #4fada2;
|
||||
border-radius: 10px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 40px;
|
||||
padding: 0 22px;
|
||||
color: #167264;
|
||||
&::placeholder {
|
||||
color: #167264;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
input[type='file'] {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
.warpper-form__emptyImage {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.warpper-form__upLoadImage {
|
||||
margin-bottom: 40px;
|
||||
img {
|
||||
width: 32px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.warpper-form__note {
|
||||
line-height: 1;
|
||||
margin-bottom: 40px;
|
||||
font-size: 36px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #008a78;
|
||||
text-align: center;
|
||||
}
|
||||
.warpper-form__submit {
|
||||
width: 582px;
|
||||
height: 86px;
|
||||
line-height: 86px;
|
||||
margin: 0 auto;
|
||||
border-radius: 43px;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 2px;
|
||||
background: linear-gradient(to bottom, #2ec2af, #3ea79a);
|
||||
box-shadow: 0 3px 0px 3px #2c9386;
|
||||
text-align: center;
|
||||
&:disabled {
|
||||
background: linear-gradient(to bottom, #e5e5e5, #cccdcc);
|
||||
box-shadow: 0 3px 0px 3px #b3b3b3;
|
||||
}
|
||||
}
|
||||
}
|
||||
.warpper-finished {
|
||||
position: relative;
|
||||
width: 710px;
|
||||
margin: 0 auto;
|
||||
margin-top: -147px;
|
||||
border-radius: 10px;
|
||||
padding: 64px;
|
||||
background-color: #fff;
|
||||
border: 3px solid #3ea699;
|
||||
margin-bottom: 66px;
|
||||
}
|
||||
.warpper-finished__note--1 {
|
||||
width: 582px;
|
||||
height: 156px;
|
||||
line-height: 156px;
|
||||
font-size: 44px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #008a78;
|
||||
text-align: center;
|
||||
background-color: #e1fffb;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.warpper-finished__note--2 {
|
||||
height: 69px;
|
||||
font-size: 30px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #008a78;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.warpper-finished__download {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 582px;
|
||||
}
|
||||
.warpper-rules {
|
||||
width: 710px;
|
||||
margin: 0 auto;
|
||||
border-radius: 10px;
|
||||
padding: 64px 34px;
|
||||
padding-top: 0;
|
||||
background-color: #fff;
|
||||
border: 3px solid #3ea699;
|
||||
margin-bottom: 24px;
|
||||
.title {
|
||||
text-align: center;
|
||||
width: 320px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
margin: 0 auto;
|
||||
margin-top: -41px;
|
||||
border-radius: 43px;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 2px;
|
||||
background: linear-gradient(to bottom, #2ec2af, #3ea79a);
|
||||
box-shadow: 0 3px 0px 3px #2c9386;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
.warpper-rules__item {
|
||||
padding-bottom: 30px;
|
||||
font-size: 30px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #008a78;
|
||||
line-height: 1.8;
|
||||
.item-title {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
margin-bottom: 24px;
|
||||
span {
|
||||
margin-left: 16px;
|
||||
font-weight: 500;
|
||||
padding-left: 16px;
|
||||
padding-right: 34px;
|
||||
background-color: #008a78;
|
||||
border-top-right-radius: 26px;
|
||||
border-bottom-right-radius: 26px;
|
||||
}
|
||||
}
|
||||
.demo-home__desc {
|
||||
margin: 0 0 20px;
|
||||
color: rgba(69, 90, 100, 0.6);
|
||||
font-size: 14px;
|
||||
.item-text {
|
||||
display: flex;
|
||||
.count {
|
||||
position: absolute;
|
||||
}
|
||||
.content {
|
||||
padding-left: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes moves {
|
||||
form {
|
||||
transform: translateY(-5%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(5%);
|
||||
}
|
||||
}
|
||||
.warpper-download {
|
||||
// position: fixed;
|
||||
// bottom: 56px;
|
||||
// left: 50%;
|
||||
// margin-left: -340px;
|
||||
margin: 0 auto;
|
||||
width: 680px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
animation: moves 1s infinite alternate;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -6,14 +6,14 @@
|
||||
</keep-alive>
|
||||
<router-view v-else></router-view>
|
||||
</div>
|
||||
<div class="layout-footer">
|
||||
<!-- <div class="layout-footer">
|
||||
<TabBar :data="tabbars" @change="handleChange" />
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TabBar from '@/components/TabBar'
|
||||
// import TabBar from '@/components/TabBar'
|
||||
export default {
|
||||
name: 'AppLayout',
|
||||
data() {
|
||||
@ -37,7 +37,7 @@ export default {
|
||||
}
|
||||
},
|
||||
components: {
|
||||
TabBar
|
||||
// TabBar
|
||||
},
|
||||
methods: {
|
||||
handleChange(v) {
|
||||
|
||||
BIN
vue-h5-template.zip
Normal file
BIN
vue-h5-template.zip
Normal file
Binary file not shown.
@ -44,24 +44,25 @@ module.exports = {
|
||||
lintOnSave: !IS_PROD,
|
||||
productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
|
||||
devServer: {
|
||||
public: '0.0.0.0',
|
||||
port: 9020, // 端口
|
||||
open: false, // 启动后打开浏览器
|
||||
overlay: {
|
||||
// 当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
|
||||
warnings: false,
|
||||
errors: true
|
||||
},
|
||||
proxy: {
|
||||
// 配置跨域
|
||||
'/api': {
|
||||
target: 'https://vall.xiangleba.com.cn',
|
||||
// ws:true,
|
||||
changOrigin: true,
|
||||
pathRewrite: {
|
||||
'^/api': '/'
|
||||
}
|
||||
}
|
||||
}
|
||||
// proxy: {
|
||||
// //配置跨域
|
||||
// '/api': {
|
||||
// target: "https://test.xxx.com",
|
||||
// // ws:true,
|
||||
// changOrigin:true,
|
||||
// pathRewrite:{
|
||||
// '^/api':'/'
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
},
|
||||
css: {
|
||||
extract: IS_PROD, // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user