Skip to content

polysoft-nafmii / polysoft-h5

Go to a project
Commit 170f49ef by fanx
Options

init

1 parent a2dc1009
Inline Side-by-side
Showing 27 changed files with 614 additions and 83 deletions
README.md
# polysoft-h5
## Project setup
## 安装依赖
```
yarn install
```
### Compiles and hot-reloads for development
### 本地启动
```
yarn serve
开发环境
yarn dev or npm dev
测试环境
yarn test or npm run test
正式或者生产环境
yarn pro or npm run pro
```
### Compiles and minifies for production
### 打包编译
```
yarn build
开发环境
yarn build:dev
测试环境
yarn build:test
正式或者生产环境
yarn build:pro
```
### Lints and fixes files
......
package.json
......@@ -17,8 +17,10 @@
"core-js": "^3.6.5",
"js-cookie": "^2.2.1",
"lib-flexible": "^0.3.2",
"vant": "2.5.7",
"vconsole": "^3.4.1",
"vue": "^2.6.11",
"vue-i18n": "^8.24.3",
"vue-router": "^3.2.0",
"vuex": "^3.4.0",
"vuex-persist": "^3.1.3"
......
public/index.html
......@@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,index-scalable=no,user-scalable=0,viewport-fit=cover" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1209422_r18qamg15s.css">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
......
src/assets/css/sprite.less
.icon-sprite { display: inline-block; background-image: url(../images/sprite.png); background-size: 200px 200px; }
.icon-sprite { display: inline-block; background-image: url(../images/sprite.png); background-size: 252px 200px; }
.icon-logo { width: 200px; height: 200px; background-position: 0px 0px; }
.icon-user-question { width: 32px; height: 36px; background-position: -220px 0px; }
\ No newline at end of file
src/assets/images/sprite.png
src/assets/images/sprite.png

7.1 KB | W: | H:

src/assets/images/sprite.png

8.65 KB | W: | H:

src/assets/images/sprite.png
src/assets/images/sprite.png
src/assets/images/sprite.png
src/assets/images/sprite.png
  • 2-up
  • Swipe
  • Onion skin
src/components/HelloWorld.vue deleted 100644 → 0
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
src/components/NafmHeader.vue 0 → 100644
<template>
<section>
<div class="nav_bar" :style="navObj.barStyle">
<!-- 左侧 自定义 -->
<div class="nav_left" v-if="$slots.left" slot="left">
<slot name="left" />
</div>
<!-- 左侧 默认 箭头以及文字描述 -->
<div class="nav_left" v-else @click="onBack">
<i v-if="navObj.barLeftArrow" class="iconfont iconpreviewleft"></i>
{{navObj.barLeftText}}
</div>
<!-- 标题栏 默认 自定义 -->
<div class="nav_title" v-if="$slots.default">
<slot />
</div>
<!-- 标题栏 -->
<div class="nav_title" v-else>{{navObj.barTitle}}</div>
<!-- 右侧插槽 -->
<div class="nav_right" v-if="$slots.right" slot="right">
<slot name="right" />
</div>
</div>
</section>
</template>
<script>
export default {
name: 'NafmHeader',
props: {
bgColor: {
type: String,
},
color: {
type: String
},
leftText: {
type: String
},
leftArrow: {
type: Boolean,
default: undefined
},
title: {
type: String
},
onBack: {
type: Function,
default: () => false
}
},
computed: {
navObj() {
const meta = this.$route.meta
let leftArrowStatus = true
if (this.leftArrow != undefined) {
leftArrowStatus = this.leftArrow
} else if (meta.leftArrow != undefined) {
leftArrowStatus = meta.leftArrow
}
// console.log('meta',meta)
return {
barStyle: {
background: this.bgColor || meta.bgColor || '#729ae0',
color: this.color || meta.color || '#fff'
},
barLeftText: this.leftText || meta.leftText || '',
barTitle: this.title || meta.title || '',
barLeftArrow: leftArrowStatus
}
},
},
}
</script>
<style lang="less" scoped>
@NavHeight: 90px;
section {
height: @NavHeight;
width: 100%;
position: relative;
z-index: 10;
.nav_bar {
height: @NavHeight;
position: fixed;
left: 0;
top: 0;
width: 100%;
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 0 20px;
}
.nav_left {
display: flex;
align-items: center;
:active {
opacity: 0.5;
}
.iconpreviewleft{
font-size: 50px;
}
img {
width: 51px;
height: 51px;
}
.iconfanhui {
font-size: 50px;
}
span {
font-size: 32px;
padding-left: 10px;
}
}
.nav_title {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 34px;
z-index: -1;
}
.nav_right {
min-width: 100px;
display: flex;
align-items: center;
justify-content: flex-end;
}
}
</style>
\ No newline at end of file
src/components/UserLayout.vue 0 → 100644
<template>
<div class="user_container">
<NafmHeader></NafmHeader>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'UserLayout',
data() {
return {}
}
}
</script>
\ No newline at end of file
src/i18n/index.js 0 → 100644
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from './lang/index'
import { getLocalStorage } from '@/utils/LocalStorage'
Vue.use(VueI18n)
const lang = getLocalStorage('lang') || 'zh'
// 通过选项创建 VueI18n 实例
export default new VueI18n({
locale: lang, // 设置地区
messages, // 设置地区信息
})
src/i18n/lang/en.js 0 → 100644
export default {
lang: "English",
message: {
hello: 'hello world'
},
setting: {
newMsgTip: "newMessageTip"
}
}
\ No newline at end of file
src/i18n/lang/index.js 0 → 100644
import zh from './zh'
import en from './en'
const messages = {
zh,
en,
}
export default messages
\ No newline at end of file
src/i18n/lang/zh.js 0 → 100644
export default {
lang: "中文",
message: {
hello: '你好'
},
setting: {
newMsgTip: "新消息提醒"
}
}
\ No newline at end of file
src/main.js
......@@ -4,18 +4,31 @@ import 'lib-flexible/flexible' // 根据窗口不同，给html设置不同的fon
import App from './App.vue'
import router from './router'
import store from './store'
import Axios from '@/utils/Axios'
import '@/utils/vant-ui.js'
import i18n from '@/i18n'
import '@/assets/css/index.less'
const APP_ENV = process.env.VUE_APP_NODE_ENV
Vue.config.productionTip = false
if (process.env.APP_ENV != 'production') {
if (APP_ENV != 'production') {
const vConsole = new Vconsole()
Vue.use(vConsole)
}
Vue.use({
install(vue) {
Object.assign(vue.prototype, {
$axios: Axios,
$store: store
})
}
})
new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount('#app')
src/router/index.js
......@@ -9,6 +9,9 @@ const routes = [
{
path: '/',
name: 'Home',
meta: {
title: '首页'
},
component: Home
},
].concat(userRouter)
......@@ -17,4 +20,9 @@ const router = new VueRouter({
routes
})
router.beforeEach((to, from, next) => {
next()
})
export default router
src/router/modules/user.js
import UserLayout from '@/components/UserLayout'
const userRouter = [
{
path: '/login',
path: '/user',
component: UserLayout,
children: [{
path: 'login',
name: 'Login',
component: () => import(/* webpackChunkName: "login" */ '@/views/user/login.vue') // 登录
meta: {
title: '登录'
},
{
path: '/register',
component: () => import(/* webpackChunkName: "login" */ '@/views/user/login.vue') // 登录
}, {
path: 'register',
name: 'Register',
meta: {
title: '注册'
},
component: () => import(/* webpackChunkName: "register" */ '@/views/user/register.vue') // 注册
}
}],
},
{
path: '/user/center',
name: 'Center',
meta: {
title: '个人中心'
},
component: () => import(/* webpackChunkName: "center" */ '@/views/user/center.vue') // 个人中心
},
{
path: '/user/message',
name: 'Message',
meta: {
title: '我的消息'
},
component: () => import(/* webpackChunkName: "message" */ '@/views/user/message/list.vue') // 消息
},
{
path: '/user/study',
name: 'Study',
meta: {
title: '我的学习'
},
component: () => import(/* webpackChunkName: "study" */ '@/views/user/message/list.vue') // 消息
},
{
path: '/user/about',
name: 'About',
meta: {
title: '关于协会'
},
component: () => import(/* webpackChunkName: "about" */ '@/views/user/about.vue') // 关于协会
},
{
path: '/user/setting',
name: 'Setting',
meta: {
title: '设置'
},
component: () => import(/* webpackChunkName: "setting" */ '@/views/setting/index.vue') // 设置
},
]
export default userRouter
\ No newline at end of file
src/utils/LocalStorage.js 0 → 100644
export function getLocalStorage(key) {
return localStorage.getItem(key)
}
export function setLocalStorage(key, value) {
return localStorage.setItem(key, value)
}
export function removeLocalStorage(key) {
return localStorage.removeItem(key)
}
\ No newline at end of file
src/utils/loading.js 0 → 100644
export const showLoading = duration => {
return Toast.loading({
duration,
message: '加载中...',
forbidClick: true,
loadingType: 'spinner'
})
}
\ No newline at end of file
src/utils/vant-ui.js
import Vue from 'vue'
import { Loading, Lazyload, Tab, Tabs, Toast, Dialog, Icon, Field } from 'vant'
import { Loading, Lazyload, Tab, Tabs, Toast, Dialog, Icon, Field, Switch, Overlay } from 'vant'
import NafmHeader from '@/components/NafmHeader'
// 公共组建
[NafmHeader].forEach(item => Vue.component(item.name, item));
// 默认vant组件
[Loading, Lazyload, Tab, Tabs, Toast, Dialog, Icon, Field].forEach(item => Vue.use(item))
[Loading, Lazyload, Tab, Tabs, Toast, Dialog, Icon, Field, Switch, Overlay].forEach(item => Vue.use(item))
// 先预制，后期做统一调整
Object.assign(window, {
......
src/views/home/index.vue
<template>
<div>
home
<span @click="jumpLogin">跳转登录页面</span>
</div>
</template>
<script>
......@@ -13,7 +13,11 @@ export default {
return {}
},
methods: {
jumpLogin() {
this.$router.push({
name: 'Login'
})
}
}
}
</script>
\ No newline at end of file
src/views/setting/index.vue 0 → 100644
<template>
<div class="setting_container">
<NafmHeader />
<div class="setting_list">
<div class="li">
<div class="menu_left">{{$t("setting.newMsgTip")}}</div>
<van-switch v-model="msgChecked" @click="changeMsgStatus" />
</div>
<div class="li">
<div class="menu_left">多语言</div>
<div class="menu_right" @click="popZhEn">
<div class="text">{{$t("lang")}}</div>
<div class="iconfont iconright"></div>
</div>
</div>
</div>
<van-overlay :show="showZhEn" z-index="10" @click="showZhEn = false">
<div class="footer">
<!-- <div class="btn"> -->
<div class="btn_zh item" @click="changeLang('zh')">中文</div>
<div class="btn_en item" @click="changeLang('en')">英文</div>
<div class="cancel item">取消</div>
<!-- </div> -->
</div>
</van-overlay>
</div>
</template>
<script>
import { setLocalStorage } from '@/utils/LocalStorage'
export default {
name: 'Setting',
data() {
return {
msgChecked: false,
showZhEn: false
}
},
mounted() {
this.msgChecked = true
},
methods: {
// 切换消息操作
changeMsgStatus() {
this.msgChecked = !this.msgChecked
},
// 弹出 设置中英文框
popZhEn() {
this.showZhEn = true
},
changeLang(val) {
console.log('val', val)
setLocalStorage('lang', val)
this.$i18n.locale = val
}
}
}
</script>
<style lang="less" scoped>
.setting_container {
background-color: #efefef;
height: 100vh;
}
.setting_list {
.li {
padding: 0 25px;
background-color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ccc;
height: 95px;
.menu_left {
color: #333;
display: flex;
justify-content: space-between;
align-items: center;
}
.menu_right {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
.text {
color: #333;
}
.iconfont {
color: #ccc;
}
}
}
}
.footer {
position: fixed;
bottom: 20px;
display: flex;
width: 100%;
justify-content: center;
flex-direction: column;
align-items: center;
.item {
background-color: #fff;
height: 80px;
line-height: 80px;
width: 90%;
text-align: center;
}
.btn_zh {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom: 1px solid #efefef;
}
.btn_en {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
margin-bottom: 10px;
}
.cancel {
border-radius: 10px;
}
}
</style>
\ No newline at end of file
src/views/user/about.vue 0 → 100644
<template>
<div>
关于协会
</div>
</template>
\ No newline at end of file
src/views/user/center.vue 0 → 100644
<template>
<div class="user_center">
<div class="header">
<div class="header_left"></div>
<div class="header_right">
<div class="right_txt">
<div class="nick">凝视你的目光</div>
<div class="phone">183****8924</div>
</div>
<div class="iconfont iconright"></div>
</div>
</div>
<div class="center_menu_list">
<router-link :to="item.url" class="li" v-for="(item,key) in menuList" :key="key">
<div class="menu_left">
<img :src="item.icon" alt="" />
<span>{{item.title}}</span>
</div>
<div class="menu_right iconfont iconright"></div>
</router-link>
</div>
</div>
</template>
<script>
export default {
name: 'Center',
data() {
return {
menuList: [
{
icon: require('@/assets/icon/user_question.png'),
title: '我的消息',
url: '/user/message'
},
{
icon: require('@/assets/icon/user_question.png'),
title: '我的收藏',
url: '/user/collect'
},
{
icon: require('@/assets/icon/user_question.png'),
title: '我的学习',
url: '/user/message'
},
{
icon: require('@/assets/icon/user_question.png'),
title: '我的浏览',
url: '/message'
},
{
icon: require('@/assets/icon/user_question.png'),
title: '常见问题',
url: '/collect'
},
{
icon: require('@/assets/icon/user_question.png'),
title: '关于协会',
url: '/user/about'
},
{
icon: require('@/assets/icon/user_question.png'),
title: '设置',
url: '/user/setting'
},
]
}
}
}
</script>
<style lang="less">
@import "~@/assets/css/variable.less";
.header {
background: @theme;
padding: 60px 25px;
display: flex;
justify-content: space-between;
align-items: center;
.header_left {
background: red;
width: 120px;
height: 120px;
border-radius: 50%;
margin-right: 30px;
}
.header_right {
display: flex;
justify-content: space-between;
align-items: center;
flex: 1;
color: @colorfff;
.phone {
margin-top: 10px;
}
}
}
.center_menu_list {
padding: 0 25px;
.li {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ccc;
height: 95px;
.menu_left {
color: #333;
display: flex;
justify-content: space-between;
align-items: center;
img {
margin-right: 20px;
width: 35px;
height: 35px;
}
}
.menu_right {
color: #ccc;
}
}
}
</style>
\ No newline at end of file
src/views/user/login.vue
<template>
<div class="login-container">
Login
login
</div>
</template>
<script>
export default {
name: 'Login',
components: {
},
data() {
return {}
},
methods: {
handleBack(){
this.$router.back()
}
}
}
</script>
......
src/views/user/message/detail.vue 0 → 100644
<template>
<div class="message_detail">
消息详情
</div>
</template>
\ No newline at end of file
src/views/user/message/list.vue 0 → 100644
<template>
<div class="message_list">
消息列表
</div>
</template>
\ No newline at end of file
yarn.lock
......@@ -827,7 +827,7 @@
"@babel/types" "^7.4.4"
esutils "^2.0.2"
"@babel/runtime@^7.0.0", "@babel/runtime@^7.11.0", "@babel/runtime@^7.8.4":
"@babel/runtime@7.x", "@babel/runtime@^7.0.0", "@babel/runtime@^7.11.0", "@babel/runtime@^7.8.4":
version "7.13.17"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.17.tgz#8966d1fc9593bf848602f0662d6b4d0069e3a7ec"
integrity sha512-NCdgJEelPTSh+FEFylhnP1ylq848l1z9t9N0j1Lfbcw0+KXGjsTvUmkxy+voLLXB5SOKMbLLx4jxYliGrYQseA==
......@@ -1103,7 +1103,12 @@
"@types/webpack-sources" "*"
source-map "^0.6.0"
"@vue/babel-helper-vue-jsx-merge-props@^1.2.1":
"@vant/icons@1.2.1":
version "1.2.1"
resolved "https://registry.yarnpkg.com/@vant/icons/-/icons-1.2.1.tgz#309fecb97a4989866f045ce676b545c454701c8f"
integrity sha512-5ivsKQR4ySbdBW5UPoQDVqO6rdc1um3rvq/0VL+ZSA7Y3MdBQ3E4/NL0hoAY5/sZZeYfIDKEP21gpjUzdeEDQQ==
"@vue/babel-helper-vue-jsx-merge-props@^1.0.0", "@vue/babel-helper-vue-jsx-merge-props@^1.2.1":
version "1.2.1"
resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz#31624a7a505fb14da1d58023725a4c5f270e6a81"
integrity sha512-QOi5OW45e2R20VygMSNhyQHvpdUwQZqGPc748JLGCYEy+yp8fNFNdbNIGAgZmi9e+2JHPd6i6idRuqivyicIkA==
......@@ -8814,6 +8819,16 @@ validate-npm-package-license@^3.0.1:
spdx-correct "^3.0.0"
spdx-expression-parse "^3.0.0"
vant@2.5.7:
version "2.5.7"
resolved "https://registry.yarnpkg.com/vant/-/vant-2.5.7.tgz#b8cdbd77366c6e32d149c7bbd67b9ec4ea1b908d"
integrity sha512-JD5SxrSI1K0cKTDx0d+UNd/we576WznGNv19ZrhEK943aP8NxyDZ9oI4ZpnR4VmMjTxdANB4JW0CqqeXHMMZ1w==
dependencies:
"@babel/runtime" "7.x"
"@vant/icons" "1.2.1"
"@vue/babel-helper-vue-jsx-merge-props" "^1.0.0"
vue-lazyload "1.2.3"
vary@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
......@@ -8882,6 +8897,16 @@ vue-hot-reload-api@^2.3.0:
resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
vue-i18n@^8.24.3:
version "8.24.3"
resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.24.3.tgz#2233ae11ec59e8204df58a28fc41afe9754e3b41"
integrity sha512-uKAYzGbwGIJndY7JwhQwIGi1uyvErWkBfFwooOtjcNnIfMbAR49ad5dT/MiykrJ9pCcgvnocFjFsNLtTzyW+rg==
vue-lazyload@1.2.3:
version "1.2.3"
resolved "https://registry.yarnpkg.com/vue-lazyload/-/vue-lazyload-1.2.3.tgz#901f9ec15c7e6ca78781a2bae4a343686bdedb2c"
integrity sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g==
"vue-loader-v16@npm:vue-loader@^16.1.0":
version "16.2.0"
resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-16.2.0.tgz#046a53308dd47e58efe20ddec1edec027ce3b46e"
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!