榆钱落尽槿花稀
448712ece5
本次提交主要包含以下内容： 1. 新增积分申请系统核心功能： - 添加登录页面及API接口 - 实现积分申请记录查看功能 - 集成微信小程序分享功能 - 添加请求管理工具类 2. 引入Tuniao UI组件库： - 添加时间线、折叠面板、表格等UI组件 - 集成头像组、单选框组等交互组件 - 配置全局样式和主题颜色 3. 基础架构搭建： - 配置项目manifest和pages.json路由 - 添加状态管理store - 实现自定义导航栏适配 - 添加工具函数(加解密、数字处理等) 4. 静态资源： - 添加项目logo和背景图片 - 配置uni.scss全局样式变量 本次提交为系统基础功能搭建，后续将进一步完善积分申请流程和审批功能。
230 lines
8.5 KiB
XML
230 lines
8.5 KiB
XML
/**
|
||
* 此为wxs模块，只支持APP-VUE，微信和QQ小程序以及H5平台
|
||
* wxs内部不支持es6语法，变量只能使用var定义，无法使用解构，箭头函数等特性
|
||
*/
|
||
|
||
// 开始触摸
|
||
function touchStart(event, ownerInstance) {
|
||
// 触发事件的组件的ComponentDescriptor实例
|
||
var instance = event.instance
|
||
// wxs内的局部变量快照，此快照是属于整个组件，在touchstart和touchmove事件中都能获取到相同的结果
|
||
var state = instance.getState()
|
||
if (state.disabled) return
|
||
var touches = event.touches
|
||
// 如果进行的是多指触控，不允许操作
|
||
if (touches && touches.length > 1) return
|
||
// 标识当前为滑动中状态
|
||
state.moving = true
|
||
// 记录触摸开始点的坐标点
|
||
state.startX = touches[0].pageX
|
||
state.startY = touches[0].pageY
|
||
// 记录开始触摸的时间
|
||
state.touchStartTime = getDate().getTime()
|
||
|
||
ownerInstance.callMethod('closeOther')
|
||
}
|
||
|
||
// 触摸滑动
|
||
function touchMove(event, ownerInstance) {
|
||
// 触发事件的组件的ComponentDescriptor实例
|
||
var instance = event.instance
|
||
// wxs内的局部变量快照，此快照是属于整个组件，在touchstart和touchmove事件中都能获取到相同的结果
|
||
var state = instance.getState()
|
||
if (state.disabled || !state.moving) return
|
||
var touches = event.touches
|
||
var pageX = touches[0].pageX
|
||
var pageY = touches[0].pageY
|
||
var moveX = pageX - state.startX
|
||
var moveY = pageY - state.startY
|
||
var buttonsWidth = state.buttonsWidth
|
||
|
||
// 移动的X轴距离大于Y轴距离，也即终点与起点位置连线，与X轴夹角小于45度时，禁止页面滚动
|
||
if (Math.abs(moveX) > Math.abs(moveY) || Math.abs(moveX) > state.threshold) {
|
||
// event.preventDefault && event.preventDefault()
|
||
// event.stopPropagation && event.stopPropagation()
|
||
}
|
||
// 移动的Y轴距离大于X轴距离，也即终点与起点位置连线，与Y轴夹角小于45度时，认为页面时上下滑动而不是左右滑动单元格
|
||
if (Math.abs(moveX) < Math.abs(moveY)) return
|
||
|
||
// 限制右滑的距离，不允许内容部分往右偏移，右滑会导致X轴偏移值大于0，以此做判断
|
||
// 此处不能直接return，因为滑动过程中会缺失某些关键点坐标，会导致错乱，所以处理的方法是在超出后设置为0
|
||
if (state.status === 'open') {
|
||
// 在开启状态下，忽略左滑动
|
||
if (moveX < 0) moveX = 0
|
||
// 要收起菜单，最大能移动的距离为按钮的总宽度
|
||
if (moveX > buttonsWidth) moveX = buttonsWidth
|
||
// 如果是已经打开的状态，向左滑动时，移动收起菜单
|
||
moveSwipeAction(-buttonsWidth + moveX, instance, ownerInstance)
|
||
} else {
|
||
// 关闭状态下，忽略右滑
|
||
if (moveX > 0) return
|
||
// 滑动的距离不允许超过所有按钮的总宽度，此时只能左滑
|
||
// 滑动距离设置为按钮的宽度（负数）
|
||
if (Math.abs(moveX) > buttonsWidth) moveX = -buttonsWidth
|
||
// 在滑动过程中不断移动单元格内容，使其不断显示出来
|
||
moveSwipeAction(moveX, instance, ownerInstance)
|
||
}
|
||
}
|
||
|
||
// 触摸结束
|
||
function touchEnd(event, ownerInstance) {
|
||
// 触发事件的组件的ComponentDescriptor实例
|
||
var instance = event.instance
|
||
// wxs内的局部变量快照，此快照是属于整个组件，在touchstart和touchmove事件中都能获取到相同的结果
|
||
var state = instance.getState()
|
||
if (!state.moving || state.disabled) return
|
||
var touches = event.changedTouches ? event.changedTouches[0] : {}
|
||
var pageX = touches.pageX
|
||
var pageY = touches.pageY
|
||
var moveX = pageX - state.startX
|
||
if (state.status === 'open') {
|
||
// 在开启状态下，忽略左滑动
|
||
if (moveX < 0) moveX = 0
|
||
// 在开启状态下，点击一下内容区域，moveX为0，也即没有移动，这是执行收起操作
|
||
if (moveX === 0) {
|
||
return closeSwipeAction(instance, ownerInstance)
|
||
}
|
||
|
||
// 在开启状态下，滑动距离小于阈值，则默认不关闭同时恢复原来的打开状态
|
||
if (Math.abs(moveX) < state.threshold) {
|
||
openSwipeAction(instance, ownerInstance)
|
||
} else {
|
||
// 如果滑动距离大于阈值则执行收起逻辑
|
||
closeSwipeAction(instance, ownerInstance)
|
||
}
|
||
} else {
|
||
|
||
// 获取手指离开的时间
|
||
var touchEndTime = getDate().getTime()
|
||
// 判断是否点击了
|
||
if (Math.abs(pageX - state.startX) < 5 && Math.abs(pageY - state.startY) < 5 && touchEndTime - state.touchStartTime < 100) {
|
||
ownerInstance.callMethod('handlerItemClick')
|
||
}
|
||
|
||
// 在关闭状态下，忽略右滑动
|
||
if (moveX > 0) return
|
||
if (Math.abs(moveX) < state.threshold) {
|
||
closeSwipeAction(instance, ownerInstance)
|
||
} else {
|
||
openSwipeAction(instance, ownerInstance)
|
||
}
|
||
}
|
||
}
|
||
|
||
// 获取过渡时间
|
||
function getDuration(value) {
|
||
if (value.toString().indexOf('s') >= 0) return value
|
||
return value > 30 ? value + 'ms' : value + 's'
|
||
}
|
||
|
||
// 移动滑动选择器内容区域，同时显示出其隐藏的菜单
|
||
function moveSwipeAction(moveX, instance, ownerInstance) {
|
||
var state = instance.getState()
|
||
// 获取所有按钮的实例，需要通过它去设置按钮的位移
|
||
var buttons = ownerInstance.selectAllComponents('.tn-swipe-action-item__right__button')
|
||
|
||
// 设置菜单内容部分的偏移
|
||
instance.requestAnimationFrame(function () {
|
||
instance.setStyle({
|
||
// 设置translateX的值
|
||
'transition': 'none',
|
||
transform: 'translateX('+ moveX +'px)',
|
||
'-webkit-transform': 'translateX('+ moveX +'px)'
|
||
})
|
||
})
|
||
}
|
||
|
||
// 一次性展开滑动菜单
|
||
function openSwipeAction(instance, ownerInstance) {
|
||
var state = instance.getState()
|
||
// 获取所有按钮的实例，需要通过它去设置按钮的位移
|
||
var buttons = ownerInstance.selectAllComponents('.tn-swipe-action-item__right__button')
|
||
// 处理duration单位问题
|
||
var duration = getDuration(state.duration)
|
||
// 展开过程中，是向左移动，所以x的偏移应该是负值
|
||
var buttonsWidth = -state.buttonsWidth
|
||
instance.requestAnimationFrame(function () {
|
||
// 设置菜单主体内容
|
||
instance.setStyle({
|
||
'transition': 'transform ' + duration,
|
||
'transform': 'translateX('+ buttonsWidth +'px)',
|
||
'-webkit-transform': 'translateX('+ buttonsWidth +'px)'
|
||
})
|
||
})
|
||
setStatus('open', instance, ownerInstance)
|
||
}
|
||
|
||
// 一次性收起滑动菜单
|
||
function closeSwipeAction(instance, ownerInstance) {
|
||
var state = instance.getState()
|
||
// 获取所有按钮的实例，需要通过它去设置按钮的位移
|
||
var buttons = ownerInstance.selectAllComponents('.tn-swipe-action-item__right__button')
|
||
var len = buttons.length
|
||
// 处理duration单位问题
|
||
var duration = getDuration(state.duration)
|
||
instance.requestAnimationFrame(function () {
|
||
// 设置菜单主体内容
|
||
instance.setStyle({
|
||
'transition': 'transform ' + duration,
|
||
'transform': 'translateX(0px)',
|
||
'-webkit-transform': 'translateX(0px)'
|
||
})
|
||
// 设置各个隐藏按钮的收起状态
|
||
for (var i = len - 1; i >= 0; i--) {
|
||
buttons[i].setStyle({
|
||
'transition': 'transform ' + duration,
|
||
'transform': 'translateX(0px)',
|
||
'-webkit-transform': 'translateX(0px)'
|
||
})
|
||
}
|
||
})
|
||
setStatus('close', instance, ownerInstance)
|
||
}
|
||
|
||
// 标记菜单的当前状态，open - 打开 close - 关闭
|
||
function setStatus(status, instance, ownerInstance) {
|
||
var state = instance.getState()
|
||
state.status = status
|
||
ownerInstance.callMethod('setStatus', status)
|
||
}
|
||
|
||
// status的状态发生变化
|
||
function statusChange(newValue, oldValue, ownerInstance, instance) {
|
||
var state = instance.getState()
|
||
if (state.disabled) return
|
||
// 打开或关闭单元格
|
||
if (newValue === 'close' && state.status === 'open') {
|
||
closeSwipeAction(instance, ownerInstance)
|
||
} else if (newValue === 'open' && state.status === 'close') {
|
||
openSwipeAction(instance, ownerInstance)
|
||
}
|
||
}
|
||
|
||
// 菜单尺寸发生变化
|
||
function sizeChange(newValue, oldValue, ownerInstance, instance) {
|
||
// wxs内的局部变量快照
|
||
var state = instance.getState()
|
||
state.disabled = newValue.disabled
|
||
state.duration = newValue.duration
|
||
state.show = newValue.show
|
||
state.threshold = newValue.threshold
|
||
state.buttons = newValue.buttons
|
||
|
||
if (state.buttons) {
|
||
var len = state.buttons.length
|
||
var buttonsWidth = 0
|
||
var buttons = newValue.buttons
|
||
for (var i = 0; i < len; i++) {
|
||
buttonsWidth += buttons[i].width
|
||
}
|
||
}
|
||
state.buttonsWidth = buttonsWidth
|
||
}
|
||
|
||
module.exports = {
|
||
touchStart: touchStart,
|
||
touchMove: touchMove,
|
||
touchEnd: touchEnd,
|
||
sizeChange: sizeChange,
|
||
statusChange: statusChange
|
||
} |