Skip to content

严立 / mini-shimao

Go to a project
Commit 5a51e80b by 严立
Options

LL - 增加自定义组件，页面调整。4

parent af169284
Inline Side-by-side
Showing with 1173 additions and 258 deletions
app.js
import mui from './component/m-init.js'
import iBase64 from './npm/base64.js' import iBase64 from './npm/base64.js'
import iMiment from './npm/miment.js' import iMiment from './npm/miment.js'
import iUtils from './utils/utils.js' import iUtils from './utils/utils.js'
...@@ -33,6 +35,7 @@ App({ ...@@ -33,6 +35,7 @@ App({
}, },
onLaunch: function () { onLaunch: function () {
mui(this)
this.setUnitProportion() this.setUnitProportion()
this.login() this.login()
...@@ -412,4 +415,16 @@ App({ ...@@ -412,4 +415,16 @@ App({
return funcInfo return funcInfo
}, },
// s3 新增函数
pageScroll: function (funcEvent, funcPage) {
// 优化滚动事件触发频率
let funcNow = new Date().getTime()
if (funcNow - this.scrollTimestamp < 40) return
this.scrollTimestamp = funcNow
funcPage.setData({
navScroll: funcEvent.scrollTop
})
},
}) })
\ No newline at end of file
app.json
...@@ -57,6 +57,12 @@ ...@@ -57,6 +57,12 @@
"pages/login/login" "pages/login/login"
], ],
"usingComponents": { "usingComponents": {
"m-nav": "./component/m-nav/m-nav",
"m-toast": "./component/m-toast/m-toast",
"m-dialog": "./component/m-dialog/m-dialog",
"navigation": "./component/navigation/navigation", "navigation": "./component/navigation/navigation",
"swiper-point": "./component/swiper-point/swiper-point", "swiper-point": "./component/swiper-point/swiper-point",
"strategy-item": "./component/strategy-item/strategy-item", "strategy-item": "./component/strategy-item/strategy-item",
......
app.wxss
@import '/wxss/samcss-reset.wxss'; @import '/wxss/samcss-reset.wxss';
@import '/wxss/samcss-layout.wxss'; @import '/wxss/samcss-layout.wxss';
@import '/wxss/samcss-theme.wxss'; @import '/wxss/samcss-theme.wxss';
\ No newline at end of file
/* s3组件样式 */
@import './component/theme/reset.wxss';
@import './component/theme/layout.wxss';
@import './component/theme/theme.wxss';
\ No newline at end of file
component/Tips/Tips.js deleted 100644 → 0
// components/Tips/Tips.js
Component({
properties: {
text: {
type: String,
value: ''
}
},
})
component/Tips/Tips.wxml deleted 100644 → 0
<view class="tips">
<view class="tips-img"><image src="/image/fail-glod.png" mode="widthFix"></image></view>
<view class="tips-text">{{text}}</view>
</view>
component/Tips/Tips.wxss deleted 100644 → 0
.tips {
height: 72rpx;
display: flex;
align-items: center;
padding: 0 36rpx;
background-color: #F5EEDF;
}
.tips-img {
width: 32rpx;
height: 32rpx;
}
.tips-text {
margin-left: 12rpx;
font-size: 22rpx;
color: #837048;
}
\ No newline at end of file
component/m-dialog/m-dialog.js 0 → 100644
let App = getApp()
Component({
options: {
styleIsolation: 'apply-shared'
},
properties: {
},
data: {
// tip - 提示框，alert - 提示框，confirm - 对话框
type: 'alert',
title: '提示',
content: '这里是提示信息',
cancel: '取消',
confirm: '确定',
success: function () {},
fail: function () {},
winDialog: false,
},
// 生命周期
lifetimes: {
attached: function () {
App.ui.dialog = this
},
},
methods: {
onCancel: function () {
this.data.fail()
App.ui.hideDialog()
},
onConfirm: function () {
this.data.success()
App.ui.hideDialog()
},
}
})
component/Tips/Tips.json → component/m-dialog/m-dialog.json
{ {
"component": true, "component": true,
"usingComponents": {} "usingComponents": {}
} }
\ No newline at end of file
component/m-dialog/m-dialog.wxml 0 → 100644
<view class="m-dialog row cc ac" hidden="{{!winDialog}}">
<!-- 提示框 - 仅标题，确定按钮 -->
<block wx:if="{{type === 'tip'}}">
<view class="container-dialog column cb dialog-tip">
<view class="dialog-title row cc ac">
<text class="regular">{{title}}</text>
</view>
<view class="dialog-operation row cb ac">
<button class="row cb ac-confirm" bindtap="onConfirm">
<text class="secondary">{{confirm}}</text>
</button>
</view>
</view>
</block>
<!-- 提示框 - 标题和内容，确定按钮 -->
<block wx:if="{{type === 'alert'}}">
<view class="container-dialog column cb">
<view class="dialog-title row cc ac">
<text class="regular">{{title}}</text>
</view>
<view class="dialog-content row cc">
<text class="secondary">{{content}}</text>
</view>
<view class="dialog-operation row cb ac">
<button class="row cb ac-confirm secondary" bindtap="onConfirm">{{confirm}}</button>
</view>
</view>
</block>
<!-- 对话框 - 标题和内容，取消确定按钮 -->
<block wx:if="{{type === 'confirm'}}">
<view class="container-dialog column cb">
<view class="dialog-title row cc ac">
<text class="regular">{{title}}</text>
</view>
<view class="dialog-content row cc">
<text class="secondary">{{content}}</text>
</view>
<view class="dialog-operation row cb ac border-base">
<button class="dialog-operation-cancel row cc ac secondary" bindtap="onCancel">{{cancel}}</button>
<view class="dialog-operation-line row cc ac border-base"></view>
<button class="dialog-operation-confirm row cc ac primary" bindtap="onConfirm">{{confirm}}</button>
</view>
</view>
</block>
</view>
\ No newline at end of file
component/m-dialog/m-dialog.wxss 0 → 100644
.m-dialog {
z-index: 7;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .75);
}
.container-dialog {
width: 590rpx;
height: 308rpx;
padding-top: 48rpx;
border-radius: 4px;
background: #FFFFFF;
overflow: hidden;
}
/* 特定弹窗类型样式 */
.dialog-tip .dialog-title {
flex-grow: 1;
padding-bottom: 48rpx;
}
.dialog-title {
height: 48rpx;
font-size: 34rpx;
font-weight: 800;
line-height: 48rpx;
}
.dialog-content {
height: 92rpx;
margin-top: 24rpx;
}
/* 操作按钮 */
.dialog-operation {
border-style: solid none none none;
border-width: 1px;
}
.dialog-operation-line {
width: 1px;
height: 32rpx;
border-style: none solid none solid;
border-width: .5px;
}
.dialog-operation-cancel {
width: 295rpx;
height: 94rpx;
background: #FFFFFF;
font-size: 30rpx;
font-weight: 400;
line-height: 42rpx;
}
.dialog-operation-confirm {
width: 295rpx;
height: 94rpx;
background: #FFFFFF;
font-size: 30rpx;
font-weight: 400;
line-height: 42rpx;
}
\ No newline at end of file
component/m-init.js 0 → 100644
let App
/**
* toast 组件显示函数
* @function
* @param {object} - funcOption，显示配置
* @returns
*/
function showToast (funcOption) {
if (JSON.stringify(funcOption) === '{}') {
console.log('[m-ui] function "showToast" param is invalid')
return
}
// 如果传参包含 duration 数值，使用该数值。
// 删除该属性是为了不污染 toast 组件中的默认值。
let funcToastDuration = App.ui.toast.data.duration
if (funcOption.duration) {
funcToastDuration = funcOption.duration
delete funcOption.duration
}
funcOption = Object.assign(App.ui.toast.data, funcOption)
funcOption.winToast = true
console.log('showToast', funcOption)
App.ui.toast.setData(funcOption)
// 设置 toast 关闭时间
App.ui.toastTimer = setTimeout(() => {
App.ui.hideToast()
}, funcToastDuration)
}
/**
* toast 组件隐藏函数
* @function
* @param
* @returns
*/
function hideToast () {
App.ui.toast.setData({
iconUrl: '',
iconType: '',
title: '',
background: 'rgba(0, 0, 0, 0)',
winIcon: true,
winTitle: true,
winToast: false,
})
clearTimeout(App.ui.toastTimer)
}
/**
* dialog 组件显示函数
* @function
* @param {object} - funcOption，显示配置
* @returns
*/
function showDialog (funcOption) {
if (JSON.stringify(funcOption) === '{}') {
console.log('[m-ui] function "showDialog" param is invalid')
return
}
funcOption = Object.assign(App.ui.dialog.data, funcOption)
funcOption.winDialog = true
App.ui.dialog.setData(funcOption)
}
/**
* dialog 组件隐藏函数
* @function
* @param
* @returns
*/
function hideDialog () {
App.ui.dialog.setData({
type: 'alert',
title: '提示',
content: '这里是提示信息',
cancel: '取消',
confirm: '确定',
success: function () {},
fail: function () {},
winDialog: false,
})
}
let output = function (funcApp) {
App = funcApp
App.ui = {
// 暴露全局函数
showToast: showToast,
hideToast: hideToast,
showDialog: showDialog,
hideDialog: hideDialog,
// 内部属性
toast: {}, // toast 组件实例
toastTimer: 0, // toast 隐藏计时器
dialog: {}, // dialog 组件实例
}
}
export default output
\ No newline at end of file
component/m-input/m-input.js 0 → 100644
Component({
options: {
styleIsolation: 'apply-shared'
},
properties: {
value: {
type: String,
value: ''
}
},
data: {
inputFocus: false,
winText: true,
winInput: false,
},
methods: {
onInput: function (event) {
console.log(event.detail.value)
this.setData({
value: event.detail.value
})
},
onInputFocus: function() {
console.log('onInputFocus')
},
onInputBlur: function() {
console.log('onInputBlur')
this.setInputHidden()
},
onInputConfirm: function() {
console.log('onInputConfirm')
this.setInputHidden()
},
setInputShow: function() {
this.setData({
winText: false,
winInput: true,
})
let funcTimer = setTimeout(() => {
this.setData({
inputFocus: true,
})
}, 20)
},
setInputHidden: function() {
console.log('setInputHidden')
this.setData({
inputFocus: false,
winText: true,
winInput: false,
})
},
}
})
\ No newline at end of file
component/m-input/m-input.json 0 → 100644
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
component/m-input/m-input.wxml 0 → 100644
<view class="z-input">
<view class="container-text row ac" hidden="{{!winText}}" bindtap="setInputShow">
<text>{{value}}</text>
</view>
<view class="container-input row ac" hidden="{{!winInput}}">
<input
value="{{value}}"
focus="{{inputFocus}}"
bindinput="onInput"
bindfocus="onInputFocus"
bindblur="onInputBlur"
bindconfirm="onInputConfirm"
></input>
</view>
</view>
\ No newline at end of file
component/m-input/m-input.wxss 0 → 100644
.z-input {
position: relative;
}
.container-text {
width: 400rpx;
height: 80rpx;
border: 1px green solid;
}
.container-input {
width: 400rpx;
height: 80rpx;
border: 1px red solid;
}
\ No newline at end of file
component/m-nav/m-nav.js 0 → 100644
Component({
options: {
styleIsolation: 'apply-shared'
},
// 组件外部属性
properties: {
// 导航栏是否固定在视图顶部
isFixed: {
type: Boolean,
value: true,
},
// 导航栏是否占用空间，仅在 isFixed 为 true 时有效。
isOccupy: {
type: Boolean,
value: true,
},
// 导航栏标题
titleText: {
type: String,
value: ''
},
// 常规样式。
// 如果需要配置新标题样式，请在数组后面追加，避免影响其他页面。
normalStyle: {
type: Array,
value: [{
// 黑字 - 透明背景 转换 黑字 - 白色背景
titleColor: '#000000;',
bgColor: 'rgba(0, 0, 0, 0);',
logo: '',
logoSize: { width: '', height: '' },
}, {
// 黑字 - 白色背景 固定
titleColor: '#000000;',
bgColor: '#FFFFFF;',
logo: '',
logoSize: { width: '', height: '' },
}, {
// 白字 - 透明背景 转换 黑字 - 白色背景
titleColor: '#FFFFFF;',
bgColor: 'rgba(0, 0, 0, 0);',
logo: '',
logoSize: { width: '', height: '' },
}, {
// 白字 - 透明背景 固定
titleColor: '#FFFFFF;',
bgColor: 'rgba(0, 0, 0, 0);',
logo: '',
logoSize: { width: '', height: '' },
}, {
// pages/home/home/home
titleColor: '#000000;',
bgColor: 'rgba(0, 0, 0, 0);',
logo: './image/1-1.png',
logoSize: { width: '200rpx', height: '60rpx' },
}, {
// pages/play/home/home
titleColor: '#000000;',
bgColor: '#FFFFFF;',
logo: './image/2-1.png',
logoSize: { width: '130rpx', height: '126rpx' },
}]
},
// 滚动样式
scrollStyle: {
type: Array,
value: [{
titleColor: '#000000;',
bgColor: '#FFFFFF;',
logo: '',
logoSize: { width: '', height: '' },
}, {
titleColor: '#000000;',
bgColor: '#FFFFFF;',
logo: '',
logoSize: { width: '', height: '' },
}, {
titleColor: '#000000;',
bgColor: '#FFFFFF;',
logo: '',
logoSize: { width: '', height: '' },
}, {
titleColor: '#FFFFFF;',
bgColor: 'rgba(0, 0, 0, 0);',
logo: '',
logoSize: { width: '', height: '' },
}, {
titleColor: 'blue;',
bgColor: '#FFFFFF;',
logo: './image/1-2.png',
logoSize: { width: '200rpx', height: '60rpx' },
}, {
titleColor: '#000000;',
bgColor: '#FFFFFF;',
logo: './image/2-1.png',
logoSize: { width: '130rpx', height: '126rpx' },
}]
},
// 样式索引，如果不想使用变换效果，传值 -1 即可。
styleIndex: {
type: Number,
value: 0
},
// 当前页面滚动高度，配合动态变换颜色属性使用。
// 如果不使用变换属性不传此参数即可。
scrollHeight: {
type: Number,
value: 0
},
// 滚动达到多少时进行样式替换。
changeHeight: {
type: String,
value: '20rpx'
},
iconBack: {
type: String,
value: './image/back.png'
},
iconHome: {
type: String,
value: ''
// value: './image/home.png'
},
},
// 组件内部属性
data: {
// 当前样式
currentStyle: {
statusHeight: 0,
titleHeight: 0,
titleColor: '',
bgColor: '',
logo: '',
logoSize: { width: '0px', height: '0px' },
},
navOccupyCss: '', // 导航栏占位样式
statusCss: '', // 状态栏样式
statusHeight: 0, // 状态栏高度
logoCss: '', // 自定义图标容器样式
logoImageCss: '', // 自定义图标样式
winLogo: false, // 是否设置了自定义图标
logoFillCss: '', //
winLogoFill: false, // 自定义图标超出导航栏补充背景
titleCss: '', // 标题样式
isScrollChange: false,
},
// 生命周期
lifetimes: {
attached: function () {
this.setNavHeight()
this.setNavStyle()
},
},
// 属性监听
observers: {
'scrollHeight': function (funcValue) {
if (this.data.styleIndex === -1) return
this.eventScroll(funcValue)
},
},
// 自定方法
methods: {
/**
* 设置状态栏，标题栏高度。
* 此函数每个组件只会执行一次。
* @function
* @param
* @returns
*/
setNavHeight: function () {
let funcIsIOS = wx.getSystemInfoSync().system.indexOf('iOS') > -1
let funcStatusHeight = wx.getSystemInfoSync().statusBarHeight
let funcTitleHeight = 0
// 胶囊高度固定 32 px，上下外边距 iOS 为 6px，Android 为 8px，并且各机型一致。
// 2020-10-04，测试发现 Android 上下外边距也为 6px，等待更多机型验证。
funcIsIOS ? funcTitleHeight = 44 : funcTitleHeight = 44
let funcCurrentStyle = this.data.currentStyle
funcCurrentStyle.statusHeight = funcStatusHeight
funcCurrentStyle.titleHeight = funcTitleHeight
this.setData({
currentStyle: funcCurrentStyle
})
// 缓存标题栏高度信息
wx.setStorageSync('navStatusHeight', funcStatusHeight)
wx.setStorageSync('navTitleHeight', funcTitleHeight)
},
/**
* 设置导航栏样式
* @function
* @param
* @returns
*/
setNavStyle: function () {
let funcUnitProportion = wx.getSystemInfoSync().windowWidth / 750
wx.setStorageSync('unitProportion', funcUnitProportion)
let funcCurrentStyle = this.data.currentStyle
let funcNavOccupyCss = ''
if (!this.data.isScrollChange) {
Object.assign(funcCurrentStyle, {
'titleColor': this.data.normalStyle[this.data.styleIndex].titleColor,
'bgColor': this.data.normalStyle[this.data.styleIndex].bgColor,
'logo': this.data.normalStyle[this.data.styleIndex].logo,
'logoSize': this.data.normalStyle[this.data.styleIndex].logoSize
})
} else {
Object.assign(funcCurrentStyle, {
'titleColor': this.data.scrollStyle[this.data.styleIndex].titleColor,
'bgColor': this.data.scrollStyle[this.data.styleIndex].bgColor,
'logo': this.data.scrollStyle[this.data.styleIndex].logo,
'logoSize': this.data.scrollStyle[this.data.styleIndex].logoSize
})
}
// 设置占用元素高度。
if (this.data.isOccupy) {
funcNavOccupyCss = {
'height': (funcCurrentStyle.statusHeight + funcCurrentStyle.titleHeight) + 'px;'
}
}
let funcStatusCss = {
'height': funcCurrentStyle.statusHeight + 'px;',
'background': funcCurrentStyle.bgColor,
}
let funcTitleCss = {
'height': funcCurrentStyle.titleHeight + 'px;',
'background': funcCurrentStyle.bgColor,
'color': funcCurrentStyle.titleColor,
}
this.setData({
currentStyle: funcCurrentStyle,
navOccupyCss: this.toCssString(funcNavOccupyCss),
statusCss: this.toCssString(funcStatusCss),
titleCss: this.toCssString(funcTitleCss),
})
// 如果存在 logo 路径，显示 logo 视图。
if (funcCurrentStyle.logo) {
this.setLogo()
} else {
this.setData({
winLogo: false,
winLogoFill: false
})
}
},
/**
* 设置 logo 自定义图片
* @function
* @param
* @returns
*/
setLogo: function () {
this.setData({ winLogo: true })
// 设置 logo 图片尺寸样式
let funcUnitProportion = wx.getStorageSync('unitProportion')
let funcCurrentStyle = this.data.currentStyle
let funcLogoUnit = funcCurrentStyle.logoSize.width.indexOf('rpx') >= 0 ? 'rpx' : 'px'
let funcIconWidth = Number(funcCurrentStyle.logoSize.width.replace(funcLogoUnit, ''))
let funcIconHeight = Number(funcCurrentStyle.logoSize.height.replace(funcLogoUnit, ''))
if (funcLogoUnit === 'rpx') {
funcIconWidth = funcIconWidth * funcUnitProportion
funcIconHeight = funcIconHeight * funcUnitProportion
funcLogoUnit = 'px'
}
// 计算 logo 垂直居中对齐时的顶部距离，如果 logo 高度超出了当前导航栏高度，则会显示背景补充元素。
let funcPositionTop = (funcCurrentStyle.titleHeight - funcIconHeight) / 2
let funcLogoCss = {
'top': funcPositionTop + 'px;',
'width': funcIconWidth + funcLogoUnit + ';',
'height': funcIconHeight + funcLogoUnit + ';'
}
let funcLogoImageCss = {
'width': funcIconWidth + funcLogoUnit + ';',
'height': funcIconHeight + funcLogoUnit + ';',
}
let funcLogoFillCss = {
'height': (Number(Math.abs(funcPositionTop)) + 2) + 'px;',
'background': funcCurrentStyle.bgColor
}
if (this.data.isFixed) {
Object.assign(funcLogoFillCss, {
'position': 'fixed;',
'top': (Number(funcCurrentStyle.statusHeight + funcCurrentStyle.titleHeight)) + funcLogoUnit + ';',
'left': '0;'
})
}
// 设置占用元素高度。
if (this.data.isOccupy) {
this.setData({
navOccupyCss: this.toCssString({ 'height': (funcCurrentStyle.statusHeight + funcCurrentStyle.titleHeight + Number(Math.abs(funcPositionTop)) + 2) + 'px;' }),
})
}
if (funcPositionTop < 0) {
this.setData({
winLogoFill: true,
logoFillCss: this.toCssString(funcLogoFillCss)
})
}
this.setData({
logoCss: this.toCssString(funcLogoCss),
logoImageCss: this.toCssString(funcLogoImageCss),
winLogo: true
})
},
/**
* 返回按钮事件
* @function
* @param
* @returns
*/
onBack: function () {
// 页面层级小于一级时不触发返回
let funcPageLength = getCurrentPages().length
if (funcPageLength > 1) wx.navigateBack({ delta: 1 })
this.triggerEvent('navBack', { back: 1 })
},
/**
* 主页按钮事件
* @function
* @param
* @returns
*/
onHome: function () {
this.triggerEvent('navHome', {});
},
toCssString: function (funcCssObject) {
let funcCssString = ''
let funcCssKey = Object.keys(funcCssObject)
for (let i = 0, l = funcCssKey.length; i < l; i++) {
funcCssString = funcCssString + funcCssKey[i] + ': ' + funcCssObject[funcCssKey[i]] + ' '
}
return funcCssString
},
/**
* 滚动事件
* @function
* @param
* @returns
*/
eventScroll: function (funcScrollHeight) {
let funcChangeHeight = this.data.changeHeight
if (funcChangeHeight.indexOf('rpx') >= 0) {
funcChangeHeight = Number(funcChangeHeight.replace('rpx', '')) * wx.getStorageSync('unitProportion')
} else {
funcChangeHeight = Number(funcChangeHeight.replace('px', '')) * wx.getStorageSync('unitProportion')
}
if (funcScrollHeight <= funcChangeHeight && this.data.isScrollChange) {
this.setData({
isScrollChange: false
})
this.setNavStyle()
}
if (funcChangeHeight < funcScrollHeight && !this.data.isScrollChange) {
this.setData({
isScrollChange: true
})
this.setNavStyle()
}
},
}
})
\ No newline at end of file
component/m-nav/m-nav.json 0 → 100644
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
component/m-nav/m-nav.wxml 0 → 100644
<view class="m-nav {{isFixed ? 'm-nav-fixed' : ''}}">
<!-- 状态栏 -->
<view class="m-status" style="{{statusCss}}"></view>
<!-- 标题栏 -->
<view class="m-title row cc ac" style="{{titleCss}}">
<view class="m-title-logo" wx:if="{{winLogo}}" style="{{logoCss}}">
<image class="m-title-logo-image" src="{{currentStyle.logo}}" style="{{logoImageCss}}"></image>
</view>
<!-- 返回，主页按钮 -->
<view class="m-title-operation row ac" style="{{titleCss}}" wx:if="{{!winLogo}}">
<image class="m-title-operation-back" wx:if="{{iconBack}}" src="{{iconBack}}" bindtap='onBack'></image>
<image class="m-title-operation-home" wx:if="{{iconHome}}" src="{{iconHome}}" bindtap='onHome'></image>
</view>
<view class="row cc ac" wx:if="{{titleText && !titleImg}}">
<text class="m-title-text">{{titleText}}</text>
</view>
</view>
</view>
<!-- logo 超出导航栏时的补充背景元素 -->
<view class="m-nav-logo-fill" wx:if="{{winLogoFill}}" style="{{logoFillCss}}"></view>
<!-- 导航栏占位元素 -->
<view wx:if="{{isOccupy && isFixed}}" class="m-nav-occupy" style="{{navOccupyCss}}"></view>
\ No newline at end of file
component/m-nav/m-nav.wxss 0 → 100644
.m-nav {
z-index: 6;
width: 750rpx;
}
.m-nav-fixed {
position: fixed;
top: 0;
left: 0;
}
.m-status,
.m-title {
width: 750rpx;
}
.m-nav-occupy {
z-index: 5;
width: 750rpx;
}
.m-title {
position: relative;
}
.m-title-operation {
position: absolute;
top: 0;
left: 30rpx;
}
.m-title-operation-back,
.m-title-operation-home {
display: block;
width: 40rpx;
height: 40rpx;
margin-right: 10rpx;
}
.m-title-logo {
position: absolute;
top: 0;
left: 30rpx;
}
.m-title-text {
white-space: nowrap;
font-size: 34rpx;
font-weight: 500;
}
/* logo 填充元素 */
.m-nav-logo-fill {
z-index: 5;
width: 750rpx;
}
\ No newline at end of file
component/m-toast/m-toast.js 0 → 100644
let App = getApp()
Component({
options: {
styleIsolation: 'apply-shared'
},
properties: {
},
data: {
iconUrl: '', // 自定义图标路径，最高优先级，会覆盖 iconType 的值。
iconType: '', // 预定义图标样式。success，warning，error，loading。
title: '', // 提示文本
duration: 3000, // 提示的延迟时间
background: 'rgba(0, 0, 0, 0)',
winIcon: true,
winTitle: true,
winToast: false,
},
// 生命周期
lifetimes: {
attached: function () {
App.ui.toast = this
},
},
// 自定方法
methods: {
}
})
component/m-toast/m-toast.json 0 → 100644
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
component/m-toast/m-toast.wxml 0 → 100644
<view class="toast row cc ac" hidden="{{!winToast}}" style="{{'background: ' + background + ';'}}">
<!-- 图标 toast -->
<view class="toast-container column cc ac" wx:if="{{winIcon && !winTitle}}">
<image class="toast-icon" wx:if="{{iconUrl}}" src="{{iconUrl}}"></image>
<image class="toast-icon" wx:if="{{iconType === 'error'}}" src="./image/error.png"></image>
<image class="toast-icon" wx:if="{{iconType === 'success'}}" src="./image/success.png"></image>
<image class="toast-icon" wx:if="{{iconType === 'warning'}}" src="./image/warning.png"></image>
<image class="toast-icon" wx:if="{{iconType === 'loading'}}" src="./image/loading.gif"></image>
</view>
<!-- 文本 toast -->
<view class="toast-container column cc ac" wx:if="{{!winIcon && winTitle}}">
<text class="toast-content">{{title}}</text>
</view>
<!-- 混合 toast -->
<view class="toast-container column cb ac" wx:if="{{winIcon && winTitle}}">
<image class="toast-icon" wx:if="{{iconUrl}}" src="{{iconUrl}}"></image>
<image class="toast-icon" wx:if="{{iconType === 'error'}}" src="./image/error.png"></image>
<image class="toast-icon" wx:if="{{iconType === 'success'}}" src="./image/success.png"></image>
<image class="toast-icon" wx:if="{{iconType === 'warning'}}" src="./image/warning.png"></image>
<image class="toast-icon" wx:if="{{iconType === 'loading'}}" src="./image/loading.gif"></image>
<text class="toast-content">{{title}}</text>
</view>
</view>
\ No newline at end of file
component/m-toast/m-toast.wxss 0 → 100644
.toast {
z-index: 7;
position: fixed;
top: 0;
left: 0;
width: 750rpx;
height: 100%;
}
.toast-container {
width: 262rpx;
height: 262rpx;
padding: 54rpx 0 40rpx 0;
box-shadow: 0 0 68rpx 0 rgba(0, 0, 0, .16);
border-radius: 4px;
background: #1F252E;
}
.toast-icon {
width: 88rpx;
height: 88rpx;
}
.toast-content {
height: 36rpx;
font-size: 26rpx;
font-weight: 400;
line-height: 36rpx;
color: #FFFFFF;
}
\ No newline at end of file
component/theme/layout.wxss 0 → 100644
/* 层级说明
0 - 背景
1 - 视图
2 - 视图
3 - 视图
4 - 视图
5 - 导航栏，占位元素
6 - 导航栏
7 - 遮罩，弹窗，提示，
8 - 遮罩
9 - 遮罩
*/
.row {
display: flex;
flex-direction: row;
}
.column {
display: flex;
flex-direction: column;
}
.cs {
justify-content: flex-start;
}
.cc {
justify-content: center;
}
.ce {
justify-content: flex-end;
}
.cb {
justify-content: space-between;
}
.ca {
justify-content: space-around;
}
.as {
align-items: flex-start;
}
.ac {
align-items: center;
}
.ae {
align-items: flex-end;
}
\ No newline at end of file
component/theme/reset.wxss 0 → 100644
view,
text,
input,
image,
canvas,
button,
picker,
picker-view,
scroll-view,
textarea {
margin: 0;
padding: 0;
box-sizing: border-box;
}
button::after {
border: none;
}
\ No newline at end of file
component/theme/theme.wxss 0 → 100644
/* 主题 */
.primary {
color: #5DB5DD;
}
/* 成功 */
.success {
color: #67C23A;
}
/* 警告 */
.warning {
color: #E6A23C;
}
/* 危险 */
.danger {
color: #F56C6C;
}
/* 提示 */
.info {
color: #909399;
}
/* 常规文本，用于标题，正文 */
.regular {
color: #15191F;
}
/* 次要文本，用于说明，补充，提示 */
.secondary {
color: #959DA9;
}
/* 输入提示 */
.placeholder {
color: #C2C7CF;
}
/* 基础边框 */
.border-base {
border-color: #E2E7EF;
}
/* 明亮边框 */
.border-light {
border-color: #E4E7ED;
}
/* 最亮边框 */
.border-lighter {
border-color: #EBEEF5;
}
\ No newline at end of file
pages/commodity/shopping-cart/shopping-cart.json
{ {
"usingComponents": { "usingComponents": {}
"Tips": "../../../component/Tips/Tips"
}
} }
\ No newline at end of file
pages/home/dynamic-detail/dynamic-detail.wxml
<!-- 首页 - 通知 - 通知详情 --> <m-nav titleText="动态详情"></m-nav>
<navigation class="navigation" titleText="动态详情" background="#ffffff" backIcon="/image/back.png"></navigation>
<view class="container"> <view class="container">
<view class="title row con-s"> <view class="title row con-s">
...@@ -8,9 +7,6 @@ ...@@ -8,9 +7,6 @@
<view class="date row con-s"> <view class="date row con-s">
<text>{{notice.date}}</text> <text>{{notice.date}}</text>
</view> </view>
<!-- <view class="cover" wx:if="{{notice.cover !== ''}}">
<image src="{{notice.cover}}" mode="widthFix"></image>
</view> -->
<view class="describe"> <view class="describe">
<parser html="{{notice.describe}}"/> <parser html="{{notice.describe}}"/>
</view> </view>
......
pages/home/dynamic-detail/dynamic-detail.wxss
.navigation {
position: fixed;
top: 0;
left: 0;
}
.container {
margin-top: 120rpx;
}
.title { .title {
width: 670rpx; width: 670rpx;
margin-top: 60rpx; margin-top: 60rpx;
......
pages/home/dynamic/dynamic.wxml
<navigation class="navigation" titleText="最新动态" background="#ffffff" backIcon="/image/back.png"></navigation> <m-nav titleText="最新动态"></m-nav>
<view class="container"> <view class="container">
<view class="title row con-b align-e"> <view class="title row con-b align-e">
......
pages/home/dynamic/dynamic.wxss
.navigation {
position: fixed;
top: 0;
left: 0;
}
.container {
margin-top: 120rpx;
}
.title { .title {
width: 750rpx; width: 750rpx;
height: 150rpx; height: 150rpx;
......
pages/home/guide/guide.js
...@@ -21,7 +21,6 @@ Page({ ...@@ -21,7 +21,6 @@ Page({
isSave: false, isSave: false,
winDialog: false,
}, },
onLoad: function (options) { onLoad: function (options) {
...@@ -272,30 +271,33 @@ Page({ ...@@ -272,30 +271,33 @@ Page({
onSaveMap: function () { onSaveMap: function () {
if (this.data.isSave) { if (this.data.isSave) {
wx.lin.showToast({ App.ui.showToast({
icon: 'success', iconType: 'success',
title: '地图已保存至相册', title: '地图已保存至相册',
show: true,
mask: true
}) })
return return
} }
this.setData({ App.ui.showDialog({
winDialog: true type: 'confirm',
title: '是否保存完整地图？',
content: '保存后可在手机相册中查看',
cancel: '取消',
confirm: '保存',
success: () => {
console.log('success')
this.onSaveMapConfirm()
},
fail: () => {
console.log('fail')
},
}) })
}, },
onSaveMapConfirm: function () { onSaveMapConfirm: function () {
this.setData({ App.ui.showToast({
winDialog: false iconType: 'loading',
})
wx.lin.showToast({
icon: 'loading',
title: '正在下载...', title: '正在下载...',
show: true,
mask: true,
duration: 20000, duration: 20000,
}) })
...@@ -306,40 +308,28 @@ Page({ ...@@ -306,40 +308,28 @@ Page({
wx.saveImageToPhotosAlbum({ wx.saveImageToPhotosAlbum({
filePath: result.tempFilePath, filePath: result.tempFilePath,
success: (result) => { success: (result) => {
wx.lin.showToast({ App.ui.showToast({
icon: 'success', iconType: 'success',
title: '地图已保存至相册', title: '地图已保存至相册',
show: true,
mask: true
}) })
this.setData({ this.setData({
isSave: true isSave: true
}) })
}, },
fail: (error) => { fail: (error) => {
wx.lin.showToast({ App.ui.showToast({
icon: 'error', iconType: 'error',
title: '地图已保存失败', title: '地图已保存失败',
show: true,
mask: true
}) })
} }
}) })
}, },
fail: (error) => { fail: (error) => {
wx.lin.showToast({ App.ui.showToast({
icon: 'error', iconType: 'error',
title: '地图下载失败', title: '地图下载失败',
show: true,
mask: true
}) })
} }
}) })
}, },
onSaveMapCancel: function () {
this.setData({
winDialog: false
})
},
}) })
\ No newline at end of file
pages/home/guide/guide.wxml
<l-toast l-bg-class="dialog-bg"></l-toast> <m-toast></m-toast>
<m-dialog></m-dialog>
<l-dialog <m-nav titleText="智慧导览" isOccupy="{{false}}"></m-nav>
l-bg-class="dialog-bg"
show="{{winDialog}}"
type="confirm"
title="是否保存完整地图？"
title-color="#000000"
content="保存后可在手机相册中查看"
confirm-text="保存"
confirm-color="#5DB5DD"
cancel-text="取消"
cancel-color="#656E7B"
bind:linconfirm="onSaveMapConfirm"
bind:lincancel="onSaveMapCancel"
>
</l-dialog>
<!-- 畅玩 - 活动列表 --> <!-- 畅玩 - 活动列表 -->
<navigation class="navigation" titleText="智慧导览" backIcon="/image/back.png"></navigation> <!-- <navigation class="navigation" titleText="智慧导览" backIcon="/image/back.png"></navigation> -->
<scroll-view class="guide" scroll-x scroll-left="{{selectionPoint}}"> <scroll-view class="guide" scroll-x scroll-left="{{selectionPoint}}">
<image id="guide-map" src="{{resourcesBase + 'guide/guide.png'}}" style="{{mapCss}}"></image> <image id="guide-map" src="{{resourcesBase + 'guide/guide.png'}}" style="{{mapCss}}"></image>
......
pages/home/guide/guide.wxss
.navigation {
z-index: 1100;
position: fixed;
top: 0;
left: 0;
width: 750rpx;
}
/* 景点地图 */ /* 景点地图 */
.guide { .guide {
position: fixed; position: fixed;
......
pages/home/history/history.js
let App = getApp() let App = getApp()
let logicData = {
pageScrollLock: false,
pageScrollTimer: 0,
}
Page({ Page({
data: { data: {
// 导航栏相关属性 navScroll: 0,
navigationStyle: {
normal: {
backIcon: '/image/back.png',
color: '#000000',
background: 'rgba(255, 255, 255, 0)'
},
change: {
backIcon: '/image/back.png',
color: '#000000',
background: 'rgba(255, 255, 255, 1)'
},
scroll: '100rpx',
},
navigationScroll: 0,
sideBarTopMargin: 0,
history: {} history: {}
}, },
onLoad: function (options) { onLoad: function (options) {
let { index } = options let { index } = options
this.setSideBarStyle()
this.getBrands(index) this.getBrands(index)
}, },
onPageScroll: function (funcEvent) {
// console.log(funcEvent)
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
this.setData({
navigationScroll: funcEvent.scrollTop
})
// 恢复滚动事件 /**
logicData.pageScrollTimer = setTimeout(function () { * 页面滚动事件
logicData.pageScrollLock = false * @function
clearTimeout(logicData.pageScrollTimer) * @param {object} - funcEvent
}, 10) * @returns
}, */
// 获取导航栏高度 onPageScroll: function (funcEvent) {
setSideBarStyle: function () { App.pageScroll(funcEvent, this)
this.setData({
sideBarTopMargin: wx.getStorageSync('navigationStatusHeight') + wx.getStorageSync('navigationCapsuleHeight') + 16
})
}, },
getBrands: function (index) { getBrands: function (index) {
App.wxRequest({ App.wxRequest({
url: '/api/v1/common/getBrands', url: '/api/v1/common/getBrands',
......
pages/home/history/history.wxml
<navigation class="navigation" titleText="{{history.name}}" backIcon="/image/back.png" scrollStyle="{{navigationStyle}}" scrollHeight="{{navigationScroll}}"></navigation> <m-nav titleText="{{history.name}}" scrollHeight="{{navScroll}}" styleIndex="{{1}}"></m-nav>
<view class="container" style="{{'margin-top: ' + sideBarTopMargin + 'px;'}}"> <view class="container">
<block wx:for="{{history.content}}" wx:key="index"> <block wx:for="{{history.content}}" wx:key="index">
<image mode="widthFix" src="{{item}}"></image> <image mode="widthFix" src="{{item}}"></image>
</block> </block>
......
pages/home/home/home.js
const App = getApp() const App = getApp()
let logicData = {
pageScrollLock: false,
pageScrollTimer: 0,
}
Page({ Page({
data: { data: {
imageBase: App.globalData.appImageBase, imageBase: App.globalData.appImageBase,
...@@ -24,9 +19,7 @@ Page({ ...@@ -24,9 +19,7 @@ Page({
}, },
scroll: '600rpx', scroll: '600rpx',
}, },
navigationScroll: 0, navScroll: 0,
navigationLogoTop: 0,
isNavigationLogoWhite: true,
// banner 列表数据 // banner 列表数据
banner: [], banner: [],
...@@ -59,7 +52,6 @@ Page({ ...@@ -59,7 +52,6 @@ Page({
}, },
onLoad: function (options) { onLoad: function (options) {
this.setNavigationLogo()
this.setLogin() this.setLogin()
}, },
onShow: function() { onShow: function() {
...@@ -91,12 +83,6 @@ Page({ ...@@ -91,12 +83,6 @@ Page({
} }
}, },
setNavigationLogo: function () {
this.setData({
navigationLogoTop: App.modular.utils.navigationElementCenterMarginTop(60)
})
},
onGuide: function () { onGuide: function () {
wx.navigateTo({ wx.navigateTo({
url: '/pages/home/guide/guide' url: '/pages/home/guide/guide'
...@@ -156,35 +142,8 @@ Page({ ...@@ -156,35 +142,8 @@ Page({
* @param {object} - funcEvent * @param {object} - funcEvent
* @returns * @returns
*/ */
onPageScroll: function(funcEvent) { onPageScroll: function (funcEvent) {
// 优化滚动事件触发频率 App.pageScroll(funcEvent, this)
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
this.setData({
navigationScroll: funcEvent.scrollTop
})
if (funcEvent.scrollTop >= this.data.bannerHeight) {
if (this.data.isNavigationLogoWhite) {
this.setData({
isNavigationLogoWhite: false,
})
}
}
if (funcEvent.scrollTop < this.data.bannerHeight && !this.data.isNavigationLogoWhite) {
this.setData({
isNavigationLogoWhite: true,
navigationScroll: funcEvent.scrollTop
})
}
// 恢复滚动事件
logicData.pageScrollTimer = setTimeout(function () {
logicData.pageScrollLock = false
clearTimeout(logicData.pageScrollTimer)
}, 40)
}, },
bannerClick(e) { bannerClick(e) {
......
pages/home/home/home.wxml
<navigation class="navigation" scrollStyle="{{navigationStyle}}" scrollHeight="{{navigationScroll}}"></navigation> <m-nav scrollHeight="{{navScroll}}" changeHeight="650rpx" styleIndex="{{4}}" isOccupy="{{false}}"></m-nav>
<view class="container"> <view class="container">
<image class="logo" src="/image/logo-w.png" hidden="{{!isNavigationLogoWhite}}" style="{{'top: ' + navigationLogoTop + 'px'}}"></image>
<image class="logo" src="/image/logo-b.png" hidden="{{isNavigationLogoWhite}}" style="{{'top: ' + navigationLogoTop + 'px'}}"></image>
<view id="banner" class="banner"> <view id="banner" class="banner">
<swiper autoplay circular class="banner-swiper" indicator-dots="{{false}}" interval="5000" duration="500" bindchange="onSwiperChange"> <swiper autoplay circular class="banner-swiper" indicator-dots="{{false}}" interval="5000" duration="500" bindchange="onSwiperChange">
<block wx:for="{{banner}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <block wx:for="{{banner}}" wx:for-index="index" wx:for-item="item" wx:key="index">
......
pages/home/home/home.wxss
.navigation {
z-index: 1100;
position: fixed;
top: 0;
left: 0;
width: 750rpx;
}
.logo { .logo {
z-index: 1100; z-index: 1100;
position: fixed; position: fixed;
...@@ -22,7 +14,7 @@ ...@@ -22,7 +14,7 @@
.banner { .banner {
z-index: 9; z-index: 1;
position: relative; position: relative;
width: 750rpx; width: 750rpx;
height: 870rpx; height: 870rpx;
...@@ -46,7 +38,7 @@ ...@@ -46,7 +38,7 @@
} }
.banner-wave { .banner-wave {
z-index: 1100; z-index: 2;
position: relative; position: relative;
top: 712rpx; top: 712rpx;
left: 0; left: 0;
...@@ -60,7 +52,7 @@ ...@@ -60,7 +52,7 @@
} }
.banner-notice { .banner-notice {
z-index: 1100; z-index: 3;
position: relative; position: relative;
top: 620rpx; top: 620rpx;
left: 40rpx; left: 40rpx;
......
pages/play/home/home.wxml
<navigation class="navigation" background="#FFFFFF"></navigation> <m-nav scrollHeight="{{navScroll}}" changeHeight="650rpx" styleIndex="{{5}}"></m-nav>
<view class="container"> <view class="container">
<image class="logo" src="./image/title.png" style="{{'top: ' + navigationLogoTop + 'px'}}"></image>
<view class="logo-minor row align-c" style="{{'top: ' + (navigationLogoMarginTop - 2) + 'px; background: #FFFFFF'}}">
<image src="./image/title-minor.png"></image>
</view>
<!-- 畅玩分类 --> <!-- 畅玩分类 -->
<block wx:if="{{appStatus}}"> <block wx:if="{{appStatus}}">
<view class="banner" style="{{'margin-top: ' + (navigationLogoTop + navigationLogoMarginTop + 40) + 'rpx;'}}"> <view class="banner" style="{{'margin-top: ' + (navigationLogoTop + navigationLogoMarginTop + 40) + 'rpx;'}}">
......
pages/play/home/home.wxss
...@@ -13,31 +13,6 @@ ...@@ -13,31 +13,6 @@
font-size: 26rpx; font-size: 26rpx;
} }
/* 顶部标题 */
.logo {
z-index: 1900;
position: fixed;
top: 60rpx;
left: 50rpx;
width: 130rpx;
height: 50rpx;
}
.logo-minor {
z-index: 1900;
position: fixed;
top: 60rpx;
left: 0;
width: 750rpx;
height: 24rpx;
padding: 0 50rpx;
}
.logo-minor image {
width: 130rpx;
height: 20rpx;
}
/* 畅玩分类 */ /* 畅玩分类 */
.banner-occupy { .banner-occupy {
position: relative; position: relative;
......
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 sign in to comment