Commit 34aac71b authored by June's avatar June

feat:vuex,css,common

parent e5fe1bf9
<script>
export default {
import { mapActions } from 'vuex'
export default {
onLaunch: function() {
console.log('App Launch')
this.checkUpdate()
this.setSystemInfo()
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
},
methods: {
...mapActions('systemInfo', ['setSystemInfo']),
// 检查更新
checkUpdate() {
const updateManager = uni.getUpdateManager()
// 请求完新版本信息的回调
// updateManager.onCheckForUpdate(res => {
// console.log(res.hasUpdate)
// })
updateManager.onUpdateReady(() => {
uni.showModal({
title: '是否更新',
content: '新版本已经准备好,是否重启应用?',
success: res => {
if(res.confirm) updateManager.applyUpdate()
}
})
})
// updateManager.applyUpdate()
updateManager.onUpdateFailed(() => {
this.$toast({title: "更新失败,请检查您的网络是否正常"})
})
}
}
</script>
<style>
/*每个页面公共css */
</style>
}
</script>
import Vue from 'vue'
import App from './App'
import store from './store'
import "@/utils/vue_prototype.js"
Vue.config.productionTip = false
......@@ -7,6 +8,7 @@ Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
store,
...App
})
app.$mount()
{
"pages": [
{
"path": "pages/index/index",
"path": "pages/home/index",
"style": {
"navigationBarTitleText": "uni-app"
}
},
{
"path": "pages/mine/index",
"style": {
"navigationBarTitleText": "uni-app"
}
......@@ -12,5 +18,25 @@
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar":{
"color": "#707070",
"selectedColor": "#8745FF",
"backgroundColor": "#FFFFFF",
"borderStyle": "black",
"list":[
{
"iconPath": "static/images/tabbar/find.png",
"selectedIconPath": "static/images/tabbar/find-selected.png",
"pagePath": "pages/home/index",
"text":"首页"
},
{
"iconPath": "static/images/tabbar/my.png",
"selectedIconPath": "static/images/tabbar/my-selected.png",
"text": "我的",
"pagePath": "pages/mine/index"
}
]
}
}
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<view class="test">1</view>
</view>
</template>
<script>
import { mapState } from 'vuex'
import { test } from '@/apis/test.js'
export default {
data() {
return {
title: 'Hello'
}
},
computed: {
...mapState(['systemInfo'])
},
async onLoad() {
console.log(this.systemInfo.systemInfo)
const a = await test()
console.log(a)
},
......@@ -27,31 +29,6 @@
</script>
<style lang="scss">
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
.test {
width: 300rpx;
height: 300rpx;
......
<template>
<view>login</view>
</template>
<script>
</script>
<style>
</style>
<template>
<view>mine</view>
</template>
<script>
</script>
<style>
</style>
......@@ -19,4 +19,6 @@
getStorage("str1") === getStorage("str2") // true
```
#### 未完成
+ 请求状态码
+ 分页封装未处理页数
\ No newline at end of file
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import user from './modules/user'
import systemInfo from './modules/systemInfo'
export default new Vuex.Store({
modules: {
user,
systemInfo
}
})
const state = {
systemInfo: null
}
const mutations = {
SETSYSTEMINFO(state, params){
state.systemInfo = params
}
}
const actions = {
setSystemInfo: ({commit}) => {
commit('SETSYSTEMINFO', uni.getSystemInfoSync())
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
\ No newline at end of file
import { getStorage, setStorage, removeStorage } from '@/lib/storage'
const state = {
token: '',
userInfo: ''
}
const mutations = {
SETTOKEN(state, token){
state.token = token
},
SETUSERINFO(state, userInfo){
state.userInfo = userInfo
},
LOGOUT(state){
state.token = ''
state.userInfo = ''
}
}
const actions = {
setToken: ({commit}, token) => {
commit('SETTOKEN', token)
setStorage('token',token)
},
setUserInfo: ({commit}, userInfo) => {
commit('SETUSERINFO', userInfo)
setStorage('userInfo',userInfo)
},
logout: ({commit})=>{
commit('LOGOUT')
removeStorage('token')
removeStorage('userInfo')
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
\ No newline at end of file
.w-100 { width: 100%; }
/* flex 布局 */
.flex { display:flex!important; }
.flex-row{ flex-direction:row!important; }
.flex-column{ flex-direction:column!important; }
.flex-row-reverse{ flex-direction:row-reverse!important; }
.flex-column-reverse{ flex-direction:column-reverse!important; }
.flex-wrap{ flex-wrap:wrap; }
.flex-nowrap{ flex-wrap:nowrap; }
.j-start{ justify-content:flex-start; }
.j-end{ justify-content:flex-end; }
.j-between{ justify-content:space-between; }
.j-center{ justify-content:center; }
.j-around{ justify-content: space-around; }
.a-center{ align-items: center; }
.a-stretch{ align-items: stretch; }
.a-start{ align-items: flex-start; }
.a-end{ align-items: flex-end; }
.flex-1{ flex: 1; }
.flex-2{ flex: 2; }
.flex-3{ flex: 3; }
.flex-4{ flex: 4; }
.flex-5{ flex: 5; }
/* -- 内外边距 -- */
.m-0 { margin: 0; }
.m-1 { margin: 10rpx; }
.m-2 { margin: 20rpx; }
.m-3 { margin: 30rpx; }
.m-4 { margin: 40rpx; }
.m-5 { margin: 50rpx; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 10rpx; }
.mt-2 { margin-top: 20rpx; }
.mt-3 { margin-top: 30rpx; }
.mt-4 { margin-top: 40rpx; }
.mt-5 { margin-top: 50rpx; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 10rpx; }
.mb-2 { margin-bottom: 20rpx; }
.mb-3 { margin-bottom: 30rpx; }
.mb-4 { margin-bottom: 40rpx; }
.mb-5 { margin-bottom: 50rpx; }
.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 10rpx; }
.ml-2 { margin-left: 20rpx; }
.ml-3 { margin-left: 30rpx; }
.ml-4 { margin-left: 40rpx; }
.ml-5 { margin-left: 50rpx; }
.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 10rpx; }
.mr-2 { margin-right: 20rpx; }
.mr-3 { margin-right: 30rpx; }
.mr-4 { margin-right: 40rpx; }
.mr-5 { margin-right: 50rpx; }
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: 10rpx; margin-bottom: 10rpx; }
.my-2 { margin-top: 20rpx; margin-bottom: 20rpx; }
.my-3 { margin-top: 30rpx; margin-bottom: 30rpx; }
.my-4 { margin-top: 40rpx; margin-bottom: 40rpx; }
.my-5 { margin-top: 50rpx; margin-bottom: 50rpx; }
.mx-0 { margin-left: 0; margin-right: 0; }
.mx-1 { margin-left: 10rpx; margin-right: 10rpx; }
.mx-2 { margin-left: 20rpx; margin-right: 20rpx; }
.mx-3 { margin-left: 30rpx; margin-right: 30rpx; }
.mx-4 { margin-left: 40rpx; margin-right: 40rpx; }
.mx-5 { margin-left: 50rpx; margin-right: 50rpx; }
.p-1 { padding: 10rpx; }
.p-2 { padding: 20rpx; }
.p-3 { padding: 30rpx; }
.p-4 { padding: 40rpx; }
.p-5 { padding: 50rpx; }
.pt-1 { padding-top: 10rpx; }
.pt-2 { padding-top: 20rpx; }
.pt-3 { padding-top: 30rpx; }
.pt-4 { padding-top: 40rpx; }
.pt-5 { padding-top: 50rpx; }
.pb-1 { padding-bottom: 10rpx; }
.pb-2 { padding-bottom: 20rpx; }
.pb-3 { padding-bottom: 30rpx; }
.pb-4 { padding-bottom: 40rpx; }
.pb-5 { padding-bottom: 50rpx; }
.pl-1 { padding-left: 10rpx; }
.pl-2 { padding-left: 20rpx; }
.pl-3 { padding-left: 30rpx; }
.pl-4 { padding-left: 40rpx; }
.pl-5 { padding-left: 50rpx; }
.pr-1 { padding-right: 10rpx; }
.pr-2 { padding-right: 20rpx; }
.pr-3 { padding-right: 30rpx; }
.pr-4 { padding-right: 40rpx; }
.pr-5 { padding-right: 50rpx; }
.py-1 { padding-top: 10rpx; padding-bottom: 10rpx; }
.py-2 { padding-top: 20rpx; padding-bottom: 20rpx; }
.py-3 { padding-top: 30rpx; padding-bottom: 30rpx; }
.py-4 { padding-top: 40rpx; padding-bottom: 40rpx; }
.py-5 { padding-top: 50rpx; padding-bottom: 50rpx; }
.px-1 { padding-left: 10rpx; padding-right: 10rpx; }
.px-2 { padding-left: 20rpx; padding-right: 20rpx; }
.px-3 { padding-left: 30rpx; padding-right: 30rpx; }
.px-4 { padding-left: 40rpx; padding-right: 40rpx; }
.px-5 { padding-left: 50rpx; padding-right: 50rpx; }
/* 文字对齐 */
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
/* 常规字体大小 */
.font-24 { font-size: 24rpx; }
.font-28 { font-size: 28rpx; }
.font-32 { font-size: 32rpx; }
.font-36 { font-size: 36rpx; }
.font-48 { font-size: 48rpx; }
/* 字粗 */
.font-bold { font-weight: bold; }
.font-bolder { font-weight: bolder; }
/* 内容溢出 */
.overflow-hidden { overflow: hidden; }
.overtext-1 {
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
/* 阴影 */
.shadow { box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.3); }
.shadow-lg { box-shadow: 0rpx 40rpx 100rpx 0rpx rgba(0, 0, 0, 0.5); }
.borderBox {
box-sizing: border-box;
}
/* 文本溢出 */
@mixin text-ellipsis ($row) {
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: $row;
-webkit-box-orient: vertical;
}
/* 背景渐变 */
@mixin linear-gradient_bg($deg, $beginColor, $endColor){
background: linear-gradient($deg, $beginColor 0%, $endColor 100%);
}
/* 字体渐变 */
@mixin linear-gradient_text($deg, $beginColor, $endColor){
background: linear-gradient($deg, $beginColor, $endColor);
-webkit-background-clip: text;
color: transparent;
}
/* borderBox */
@mixin borderBox($row, $vertical){
box-sizing: border-box;
padding: $row $vertical;
}
\ No newline at end of file
@import '@/styles/global.scss'
\ No newline at end of file
@import '@/styles/global.scss';
@import '@/styles/mixins.scss';
\ No newline at end of file
import Vue from "vue"
import { getStorage, setStorage } from "@/lib/storage/index.js"
import Toast from "@/lib/toast/index.js"
Vue.prototype.$getStorage = getStorage
Vue.prototype.$setStorage = setStorage
Vue.prototype.$toast = Toast
\ No newline at end of file
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