Browse Source

add style

voice
刘嘉炜 5 years ago
parent
commit
a0234d492f
  1. 50
      src/App.vue
  2. 23
      src/pages.json
  3. 166
      src/pages/employee/manage/manage.vue
  4. 137
      src/pages/index/index.vue
  5. 69
      src/pages/merchant_info/merchant_info.vue
  6. 49
      src/pages/merchant_login/merchant_login.vue
  7. BIN
      src/static/images/icon/author_modal.png
  8. BIN
      src/static/images/icon/round_add.png
  9. BIN
      src/static/images/icon/round_close.png
  10. 347
      src/utils/util.js

50
src/App.vue

@ -1,13 +1,25 @@
<script>
import Vue from 'vue'
import util from './utils/util';
export default {
onLaunch: function() {
console.log('App Launch')
this.updateManager();
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
methods: {
updateManager(){
const updateManager = uni.getUpdateManager();
updateManager.onCheckForUpdate(res=>console.log('请求完新版本信息的回调-->',res.hasUpdate));
updateManager.onUpdateReady(function () {
util.showModal({
title: '更新提示',
content: '新版本已经准备好,请重启应用!',
showCancel:false,
confirmText:'重启',
success:res=>updateManager.applyUpdate(),
})
});
updateManager.onUpdateFailed(err=>console.log('版本更新失败——>',err));
},
}
}
</script>
@ -20,4 +32,30 @@
view,scroll-view,text,picker{
box-sizing: border-box;
}
.ox-dark-mask{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .5);
}
/* btn hover-class */
.hover-active{
position: relative;
overflow: hidden;
}
.hover-active::after{
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
background-color: rgba(0,0,0,.1);
}
/* btn hover-class */
</style>

23
src/pages.json

@ -1,16 +1,35 @@
{
"pages": [ //pageshttps://uniapp.dcloud.io/collocation/pages
{
"path": "pages/store_list/store_list",
"path": "pages/employee/manage/manage",
"style": {
"navigationBarTitleText": "门店信息列表"
"navigationBarTitleText": "员工管理"
}
},
{
"path": "pages/merchant_login/merchant_login",
"style": {
"navigationBarTitleText": "商家登录"
}
},
{
"path": "pages/index/index",
"style": {
}
},
{
"path": "pages/merchant_info/merchant_info",
"style": {
"navigationBarTitleText": "商户号资料"
}
},
{
"path": "pages/store_list/store_list",
"style": {
"navigationBarTitleText": "门店信息列表"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "white",

166
src/pages/employee/manage/manage.vue

@ -0,0 +1,166 @@
<template>
<view class="employ-manage">
<view class="em-content">
<view class="ec-search">
<view>
<input placeholder="请输入" />
<image mode="aspectFit" src="/static/images/icon/round_close.png"></image>
</view>
</view>
<view class="ec-info">
<view class="ei-add">
<image mode="aspectFit" src="/static/images/icon/round_add.png"></image>
<text>添加员工</text>
</view>
<view class="ei-tip">
<text>待审核员工</text>
<view>
<view>222</view>
<image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image>
</view>
</view>
<view class="ei-user">
<view>
<image></image>
<view class="eu-name">胡雪儿</view>
<view class="eu-tag">超级管理员</view>
</view>
<view>更换</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
@import "../../../../style/public.scss";
.em-content{
.ec-search{
margin-bottom: 16upx;
height: 144upx;
background-color: #fff;
@include centerFlex(center);
>view{
padding: 0 28upx;
height: 92upx;
width: 702upx;
border-radius: 10upx;
background-color: #f2f2f7;
@include centerFlex(space-between);
>input{
flex-grow: 1;
height: 100%;
font-size: 32upx;
color: #1a1a1a;
}
>image{
margin-left: 20upx;
flex-shrink: 0;
width: 32upx;
height: 32upx;
}
}
}
.ec-info{
margin-bottom: 24upx;
padding: 0 24upx;
background-color: #fff;
.ei-add{
height: 220upx;
border-bottom: 2upx solid #D8D8D8;
@include centerFlex(center);
>image{
flex-shrink: 0;
margin-right: 38upx;
width: 84upx;
height: 84upx;
}
>text{
font-weight: 500;
font-size: 32upx;
color: $themeColor;
}
}
.ei-tip{
height: 132upx;
border-bottom: 2upx solid #D8D8D8;
@include centerFlex(space-between);
>text{
font-size: 32upx;
color: #333;
}
>view{
@include centerFlex(flex-end);
>view{
flex-shrink: 0;
flex-grow: 0;
margin-right: 30upx;
width: 50upx;
height: 50upx;
border-radius: 50%;
line-height: 50upx;
text-align: center;
font-size: 24upx;
color: #fff;
background-color: #ea5061;
@include textHide(1);
}
>image{
flex-shrink: 0;
width: 28upx;
height: 28upx;
}
}
}
.ei-user{
height: 140upx;
@include centerFlex(space-between);
>view{
&:first-child{
@include centerFlex(flex-start);
>image{
margin-right: 20upx;
width: 80upx;
height: 80upx;
border-radius: 10upx;
background-color: skyblue;
}
.eu-name{
max-width: 40%;
line-height: 44upx;
font-size: 32upx;
color: #333;
@include textHide(1);
}
.eu-tag{
display: inline-block;
margin-left: 24upx;
padding: 0 6upx;
height: 32upx;
line-height: 32upx;
border-radius: 6upx;
font-size: 22upx;
color: $themeColor;
background-color: rgba(0, 152, 116, .2);
}
}
&+view{
flex-shrink: 0;
width: 140upx;
height: 64upx;
line-height: 60upx;
text-align: center;
border-radius: 10upx;
border: 2upx solid $themeColor;
font-size: 32upx;
color: $themeColor;
}
}
}
}
}
</style>

137
src/pages/index/index.vue

@ -1,39 +1,53 @@
<template>
<view class="index-container">
<view class="ic-header">
<view class="ih-address">
<view>广州欧轩智能场馆(共6家)</view>
<image src="/static/images/icon/arrow_ff.png" mode="aspectFit"></image>
</view>
<view class="ih-tip">今日总收入</view>
<view class="ih-price"><text>¥</text>0.00</view>
<view class="ih-amount">
<view>
<view>收款笔数</view>
<view>10</view>
<view class="ic-content">
<view class="ic-header">
<view class="ih-address" v-if="false">
<view>广州欧轩智能场馆(共6家)</view>
<image src="/static/images/icon/arrow_ff.png" mode="aspectFit"></image>
</view>
<view>
<view>收款笔数</view>
<view>10</view>
<view class="ih-btn" hover-class="hover-active">点击登陆</view>
<view class="ih-tip">今日总收入</view>
<view class="ih-price"><text>¥</text>0.00</view>
<view class="ih-amount">
<view>
<view>收款笔数</view>
<view>10</view>
</view>
<view>
<view>收款笔数</view>
<view>10</view>
</view>
</view>
<image class="ih-bg-icon" style="left: 0;" mode="aspectFit" src="/static/images/icon/index/header_bg_a.png"></image>
<image class="ih-bg-icon" mode="aspectFit" src="/static/images/icon/index/header_bg_b.png"></image>
</view>
<image class="ih-bg-icon" style="left: 0;" mode="aspectFit" src="/static/images/icon/index/header_bg_a.png"></image>
<image class="ih-bg-icon" mode="aspectFit" src="/static/images/icon/index/header_bg_b.png"></image>
</view>
<view class="ic-notice">
<view class="in-left">
<image src="/static/images/icon/index/notice.png" mode="aspectFit"></image>
<text>消息中心</text>
<view class="ic-notice">
<view class="in-left">
<image src="/static/images/icon/index/notice.png" mode="aspectFit"></image>
<text>消息中心</text>
</view>
<view class="in-right">
<view>99</view>
<image src="/static/images/icon/arrow_b2.png" mode="aspectFit"></image>
</view>
</view>
<view class="in-right">
<view>99</view>
<image src="/static/images/icon/arrow_b2.png" mode="aspectFit"></image>
<view class="ic-tabs">
<view class="it-item" v-for="e in tabList" :key="e.id">
<image mode="aspectFit" :src="'/static/images/icon/index/tab_'+ e.id + '.png'"></image>
<view>{{e.name}}</view>
</view>
</view>
</view>
<view class="ic-tabs">
<view class="it-item" v-for="e in tabList" :key="e.id">
<image mode="aspectFit" :src="'/static/images/icon/index/tab_'+ e.id + '.png'"></image>
<view>{{e.name}}</view>
<view class="ox-dark-mask" v-if="false">
<view class="ic-author-modal">
<view class="iam-title">微信授权</view>
<view class="iam-tip">您的信息和数据将受到保护</view>
<image class="iam-pic" mode="aspectFit" src="/static/images/icon/author_modal.png"></image>
<view class="iam-btns">
<view hover-class="hover-active">取消</view>
<view hover-class="hover-active">授权并登录</view>
</view>
</view>
</view>
</view>
@ -105,7 +119,10 @@
<style lang="scss" scoped>
@import "../../../style/public.scss";
.index-container{
padding: 24upx 24upx 0;
position: relative;
}
.ic-content{
padding: 24upx;
}
.ic-header{
position: relative;
@ -132,6 +149,17 @@
height: 28upx;
}
}
.ih-btn{
margin: 0 auto 28upx;
width: 160upx;
height: 48upx;
text-align: center;
line-height: 48upx;
font-size: 28upx;
color: $themeColor;
background-color: #fff;
border-radius: 24upx;
}
.ih-tip{
margin-bottom: 8upx;
line-height: 40upx;
@ -257,4 +285,55 @@
}
}
}
.ic-author-modal{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding-top: 60upx;
width: 662upx;
height: 884upx;
border-radius: 10upx;
background-color: #fff;
.iam-title{
margin-bottom: 22upx;
text-align: center;
line-height: 60upx;
font-size: 44upx;
font-weight: 500;
color: #1a1a1a;
}
.iam-tip{
margin-bottom: 52upx;
line-height: 40upx;
text-align: center;
font-size: 28upx;
color: #9c9c9f;
}
.iam-pic{
margin: 0 auto 62upx;
display: block;
width: 488upx;
height: 416upx;
}
.iam-btns{
@include centerFlex(center);
>view{
margin: 0 20upx;
width: 240upx;
height: 92upx;
line-height: 88upx;
text-align: center;
border-radius: 46upx;
border: 2upx solid $themeColor;
font-size: 32upx;
color: $themeColor;
&+view{
background-color: $themeColor;
color: #fff;
}
}
}
}
</style>

69
src/pages/merchant_info/merchant_info.vue

@ -0,0 +1,69 @@
<template>
<view class="merchant-info">
<view class="mi-list">
<view class="ml-item" v-for="e in 20" :key="e">
<view class="mi-title">欧轩智能羽毛球馆永泰店</view>
<view class="ml-line">
<view>微信商户号</view>
<view>17098768441</view>
</view>
<view class="ml-line">
<view>公户名称</view>
<view>广州欧轩网络科技有限公司</view>
</view>
<view class="ml-line">
<view>银行账号</view>
<view>443**********69</view>
</view>
<view class="ml-line">
<view>开户银行</view>
<view>中国建设银行</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
@import "../../../style/public.scss";
.mi-list{
padding: 24upx;
}
.ml-item{
margin-bottom: 24upx;
padding: 32upx 24upx 22upx;
border-radius: 10upx;
background-color: #fff;
.mi-title{
margin-bottom: 30upx;
line-height: 44upx;
font-size: 32upx;
color: #1a1a1a;
@include textHide(1);
}
.ml-line{
margin-bottom: 10upx;
@include centerFlex(space-between);
>view{
font-size: 28upx;
color: #9c9c9f;
&:first-child{
margin-right: 10upx;
flex-shrink: 0;
line-height: 40upx;
}
&+view{
flex-grow: 1;
text-align: right;
@include textHide(1);
}
}
}
}
</style>

49
src/pages/merchant_login/merchant_login.vue

@ -0,0 +1,49 @@
<template>
<view class="merchant-login">
<view class="ml-content">
<view class="mc-title">请联系管理员添加员工账号</view>
<view class="mc-tip">暂无商家</view>
<view class="mc-btn" hover-class="hover-active">成为商家</view>
</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss">
@import "../../../style/public.scss";
page{
background-color: #fff;
}
.ml-content{
padding-top: 184upx;
.mc-title{
margin-bottom: 96upx;
line-height: 50upx;
text-align: center;
font-weight: 500;
font-size: 36upx;
color: #1a1a1a;
}
.mc-tip{
margin-bottom: 308upx;
text-align: center;
line-height: 40upx;
font-size: 28upx;
color: #9c9c9f;
}
.mc-btn{
margin: 0 auto;
width: 280upx;
height: 92upx;
text-align: center;
line-height: 88upx;
font-size: 32upx;
color: $themeColor;
border: 2upx solid $themeColor;
border-radius: 46upx;
}
}
</style>

BIN
src/static/images/icon/author_modal.png

After

Width: 488  |  Height: 416  |  Size: 14 KiB

BIN
src/static/images/icon/round_add.png

After

Width: 84  |  Height: 84  |  Size: 703 B

BIN
src/static/images/icon/round_close.png

After

Width: 32  |  Height: 32  |  Size: 369 B

347
src/utils/util.js

@ -0,0 +1,347 @@
// import {emojiMap,emojiUrl} from './emojiMap';
export const phoneReg = new RegExp(/^1(3|4|5|6|7|8|9)\d{9}$/);
export const mailReg = new RegExp(/^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/);
export const specialReg = new RegExp("[^a-zA-Z0-9\_\u4e00-\u9fa5]","i");
export const formatTime = date => {
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
export const formatDate = ({ date= new Date(), partition= '-' }) => {
let _date;
if(typeof (date) === 'string'&&date.indexOf('-')!=-1){
_date = new Date(date.replace(/\-/g,'/'))
}else{
_date = new Date(date)
}
const year = _date.getFullYear();
const month = _date.getMonth() + 1;
const day = _date.getDate();
if(partition == 'zh')return `${year}${month}${day}`
return [year, month, day].map(formatNumber).join(partition);
}
export const formatNumber = n => {
n = n.toString()
return n[1] ? n : '0' + n
}
// 路由跳转
export const routeTo = (url,type) => {
switch(type){
case 'nT': uni.navigateTo({url});
break
case 'rT': uni.redirectTo({url});
break
case 'rL': uni.reLaunch({url});
break
case 'sT': uni.switchTab({url});
break
default: uni.navigateBack({delta: 1})
break
}
}
function showNone(txt,duration=1500){
uni.hideToast();
uni.hideLoading();
uni.showToast({
mask: true,
title: txt,
icon: 'none',
duration,
})
}
function showLoad(title='加载中', mask=true){
uni.showLoading({
mask,
title,
})
}
function hideLoad(){
uni.hideLoading()
}
function showModal({
title='提示',
content='',
showCancel=false,
cancelText='取消',
confirmText='确定',
confirmColor='#009874',
success,
fail,
complete
}){
uni.showModal({
title,
content,
showCancel,
cancelText,
confirmColor,
confirmText,
success,
fail,
complete
})
}
function debounce(func, wait, immediate) {
let timeout, args, context, timestamp, result;
const later = function() {
// 据上一次触发时间间隔
const last = +new Date() - timestamp;
// 上次被包装函数被调用时间间隔last小于设定时间间隔wait
if (last < wait && last > 0) {
timeout = setTimeout(later, wait - last);
} else {
timeout = null;
// 如果设定为immediate===true,因为开始边界已经调用过了此处无需调用
if (!immediate) {
result = func.apply(context, args);
if (!timeout) context = args = null;
}
}
}
return function(...args) {
context = this;
timestamp = +new Date();
const callNow = immediate && !timeout;
// 如果延时不存在,重新设定延时
if (!timeout) timeout = setTimeout(later, wait);
if (callNow) {
result = func.apply(context, args);
context = args = null;
}
return result;
}
}
function jsonStr(data){
return encodeURIComponent(JSON.stringify(data))
}
function jsonPar(json){
return JSON.parse(decodeURIComponent(json))
}
export let promisify = api => {
return (options, ...params) => {
return new Promise((resolve, reject) => {
api(Object.assign({}, options, { success: resolve, fail: reject }), ...params);
});
}
}
function previousPageFunction({fnName,query}){
return new Promise((rs,rj)=>{
try{
if(getCurrentPages().length>1){
console.log(getCurrentPages())
getCurrentPages()[getCurrentPages().length-2]['$vm'][fnName](query);
rs('success');
}else{
console.error('当前路由栈为一,无法调取上一页数据');
rj('当前路由栈为一,无法调取上一页数据');
}
}catch(err){
console.error('调用上一页面栈方法失败!',err);
rj('调用上一页面栈方法失败!');
}
})
}
// 获取节点信息
function getNodeMes(selector,_this=null){
return new Promise(rs=>{
let query = _this ? uni.createSelectorQuery().in(_this) : uni.createSelectorQuery();
query.select(selector).boundingClientRect(res=>{
rs(res)
// this.height = uni.getSystemInfoSync().windowHeight - res.height;
}).exec()
})
}
export const convertBase64 = function(base64data){
const fsm = uni.getFileSystemManager();
const FILE_BASE_NAME = 'tmp_base64src';//临时文件名
return new Promise((resolve, reject) => {
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || []; //去掉 base64 的头信息:
if (!format) {
reject(new Error('ERROR_BASE64SRC_PARSE'));
}
const filePath = `${uni.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
const buffer = bodyData&&uni.base64ToArrayBuffer(bodyData); //将 base64 数据转换为 ArrayBuffer 数据
// console.log(uni.base64ToArrayBuffer(bodyData))
fsm.writeFile({ //将 ArrayBuffer 写为本地用户路径的二进制图片文件 //图片文件路径在 uni.env.USER_DATA_PATH 中
filePath,
data: buffer,
encoding: 'binary',
success() {
// console.log(buffer)
resolve(filePath);
},
fail() {
reject(new Error('ERROR_BASE64SRC_WRITE'));
},
});
});
}
export function failAuthorizeTosetting(content='调用失败,请打开检查授权状态'){
showModal({
title:'提示',
content,
showCancel:true,
confirmText:'打开',
success:res=>{if(res.confirm)uni.openSetting()}
})
}
// 解析小程序码 scene 参数
export function getSceneQuery(scene){
const queryStr = decodeURIComponent(scene) || null;
let queryObj = queryStr.split('&').reduce((obj,el)=>{
let arr = el.split('=');
obj[`${arr[0]}`] = arr[1];
return obj;
},{}) || null;
return queryObj;
}
// 格式化聊天内容
// export function formatContent(str = ''){
// let reg = /\[[\u4e00-\u9fa5_a-zA-Z0-9]{1,}\]/gi;
// let strArr = str.split(reg) || [];
// let emojiArr = str.match(reg) || [];
// let contentList = [];
// strArr.forEach(ele=>{
// if(ele)contentList.push({
// type:'txt',
// content:ele
// });
// if(!!emojiArr.length){
// let iconKey = emojiArr.splice(0,1)[0];
// if(emojiMap[iconKey]){
// contentList.push({
// type:'icon',
// src:`${emojiUrl}${emojiMap[iconKey]}`
// })
// }else{
// contentList.push({
// type:'txt',
// content:iconKey
// });
// }
// }
// });
// return contentList
// }
//获取地址栏里(URL)传递的参数
function getUrlQuery(key,url){
var _url = decodeURI(url).split('?a=1').join(''); //剪切'?a=1'安卓兼容,再获取参数
if(_url.indexOf(`${key}=`) !=-1){
return _url.split(`${key}=`)[1].split('&')[0]
}
return null
}
//获取地址字段栏信息 腾讯获取授权码时
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return (r[2]); // 编码的字符串进行解码
return null;
}
function getRandom(min, max) {
return Math.round(Math.random() * (max - min)) + min;
}
export function get_zh_day(date){
if(isSameDay(new Date().getTime(),new Date(date).getTime()))return '今天'
const Arr = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
return Arr[new Date(date).getDay()] || '';
}
// 判断是否同一天
export function isSameDay(timeStampA, timeStampB) {
let dateA = new Date(timeStampA);
let dateB = new Date(timeStampB);
return (dateA.setHours(0, 0, 0, 0) == dateB.setHours(0, 0, 0, 0));
}
// 获取中文日期
export function get_zh_date(date = new Date()){
return `${new Date(date).getMonth()+1}${new Date(date).getDate()}`
}
export function substrDate(date){
if(!date)return;
return date.substr(0,10) || '-'
}
// package 貌似为保留字,作为参数时 编译报错
export function requestPayment(query = {}){
showLoad();
uni.requestPayment({
timeStamp: query.timeStamp || '',
nonceStr: query.nonceStr || '',
package: query.package || '',
signType: query.signType || '',
paySign: query.paySign || '',
success: function(res){
query.success&&query.success(res)
},
fail: function(res){
query.fail&&query.fail(res)
},
complete: function(res){
hideLoad();
query.complete&&query.complete(res)
},
})
}
function getQueryStr({url,name}){
let queryArr = (url.split('?')[1] || '').split("&") || [];
// let vars = query.split("&");
for (let i=0;i<queryArr.length;i++) {
let pair = queryArr[i].split("=");
if(pair[0] == name)return pair[1] || '';
}
return '';
}
export default {
formatTime,
formatNumber,
formatDate,
routeTo,
showNone,
showLoad,
hideLoad,
showModal,
debounce,
jsonStr,
jsonPar,
promisify,
previousPageFunction,
getNodeMes,
failAuthorizeTosetting,
getSceneQuery,
getUrlQuery,
getQueryString,
getRandom,
get_zh_day,
isSameDay,
get_zh_date,
substrDate,
requestPayment,
getQueryStr
}
Loading…
Cancel
Save