Commit 85e1b241 authored by 刘文虎's avatar 刘文虎

将组件放置到分包

parent 82f3633f
<template>
<view class="">
<u-tabbar :list="tabbar" :mid-button="true" :before-switch="beforeSwitch"></u-tabbar>
<!-- <mid-popup ref='mid-popup'></mid-popup> -->
<u-popup v-model="show" mode="top">
<view class="">
<view>出淤泥而不染,濯清涟而不妖</view>
<view>出淤泥而不染,濯清涟而不妖</view>
<view>出淤泥而不染,濯清涟而不妖</view>
<view>出淤泥而不染,濯清涟而不妖</view>
<view>出淤泥而不染,濯清涟而不妖</view>
<view>出淤泥而不染,濯清涟而不妖</view>
</view>
</u-popup>
</view>
</template>
<script>
import MidPopup from '../mid-popup/mid-popup.vue';
import { tabbar } from '@/utils/settings.js';
export default {
name: 'lw-tabbar',
components: {
MidPopup
},
data() {
return {
tabbar,
show: false
};
},
methods: {
beforeSwitch(index) {
console.log(index)
if (index === 2) {
// this.$refs["mid-popup"].open()
// this.$emit("midClick")
this.show=true
return false;
}else{
// this.show=false
}
return true;
}
}
};
</script>
<style lang="scss" scoped></style>
This diff is collapsed.
This diff is collapsed.
<template>
<view class="uni-collapse-item">
<!-- onClick(!isOpen) -->
<view @click="onClick(!isOpen)" class="uni-collapse-item__title"
:class="{'is-open':isOpen &&titleBorder === 'auto' ,'uni-collapse-item-border':titleBorder !== 'none'}">
<view class="uni-collapse-item__title-wrap">
<slot name="title">
<view class="uni-collapse-item__title-box" :class="{'is-disabled':disabled}">
<image v-if="thumb" :src="thumb" class="uni-collapse-item__title-img" />
<text class="uni-collapse-item__title-text">{{ title }}</text>
</view>
</slot>
</view>
<view v-if="showArrow"
:class="{ 'uni-collapse-item__title-arrow-active': isOpen, 'uni-collapse-item--animation': showAnimation === true }"
class="uni-collapse-item__title-arrow">
<uni-icons :color="disabled?'#ddd':'#bbb'" size="14" type="bottom" />
</view>
</view>
<view class="uni-collapse-item__wrap" :class="{'is--transition':showAnimation}"
:style="{height: (isOpen?height:0) +'px'}">
<view :id="elId" ref="collapse--hook" class="uni-collapse-item__wrap-content"
:class="{open:isheight,'uni-collapse-item--border':border&&isOpen}">
<slot></slot>
</view>
</view>
</view>
</template>
<script>
// #ifdef APP-NVUE
const dom = weex.requireModule('dom')
// #endif
/**
* CollapseItem 折叠面板子组件
* @description 折叠面板子组件
* @property {String} title 标题文字
* @property {String} thumb 标题左侧缩略图
* @property {String} name 唯一标志符
* @property {Boolean} open = [true|false] 是否展开组件
* @property {Boolean} titleBorder = [true|false] 是否显示标题分隔线
* @property {Boolean} border = [true|false] 是否显示分隔线
* @property {Boolean} disabled = [true|false] 是否展开面板
* @property {Boolean} showAnimation = [true|false] 开启动画
* @property {Boolean} showArrow = [true|false] 是否显示右侧箭头
*/
export default {
name: 'uniCollapseItem',
props: {
// 列表标题
title: {
type: String,
default: ''
},
name: {
type: [Number, String],
default: ''
},
// 是否禁用
disabled: {
type: Boolean,
default: false
},
// #ifdef APP-PLUS
// 是否显示动画,app 端默认不开启动画,卡顿严重
showAnimation: {
type: Boolean,
default: false
},
// #endif
// #ifndef APP-PLUS
// 是否显示动画
showAnimation: {
type: Boolean,
default: true
},
// #endif
// 是否展开
open: {
type: Boolean,
default: false
},
// 缩略图
thumb: {
type: String,
default: ''
},
// 标题分隔线显示类型
titleBorder: {
type: String,
default: 'auto'
},
border: {
type: Boolean,
default: true
},
showArrow: {
type: Boolean,
default: true
}
},
data() {
// TODO 随机生生元素ID,解决百度小程序获取同一个元素位置信息的bug
const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
return {
isOpen: false,
isheight: null,
height: 0,
elId,
nameSync: 0
}
},
watch: {
open(val) {
this.isOpen = val
this.onClick(val, 'init')
}
},
updated(e) {
this.$nextTick(() => {
this.init(true)
})
},
created() {
this.collapse = this.getCollapse()
this.oldHeight = 0
this.onClick(this.open, 'init')
},
// #ifndef VUE3
// TODO vue2
destroyed() {
if (this.__isUnmounted) return
this.uninstall()
},
// #endif
// #ifdef VUE3
// TODO vue3
unmounted() {
this.__isUnmounted = true
this.uninstall()
},
// #endif
mounted() {
if (!this.collapse) return
if (this.name !== '') {
this.nameSync = this.name
} else {
this.nameSync = this.collapse.childrens.length + ''
}
if (this.collapse.names.indexOf(this.nameSync) === -1) {
this.collapse.names.push(this.nameSync)
} else {
console.warn(`name 值 ${this.nameSync} 重复`);
}
if (this.collapse.childrens.indexOf(this) === -1) {
this.collapse.childrens.push(this)
}
this.init()
},
methods: {
init(type) {
// #ifndef APP-NVUE
this.getCollapseHeight(type)
// #endif
// #ifdef APP-NVUE
this.getNvueHwight(type)
// #endif
},
uninstall() {
if (this.collapse) {
this.collapse.childrens.forEach((item, index) => {
if (item === this) {
this.collapse.childrens.splice(index, 1)
}
})
this.collapse.names.forEach((item, index) => {
if (item === this.nameSync) {
this.collapse.names.splice(index, 1)
}
})
}
},
onClick(isOpen, type) {
if (this.disabled) return
this.isOpen = isOpen
if (this.isOpen && this.collapse) {
this.collapse.setAccordion(this)
}
if (type !== 'init') {
this.collapse.onChange(isOpen, this)
}
},
getCollapseHeight(type, index = 0) {
const views = uni.createSelectorQuery().in(this)
views
.select(`#${this.elId}`)
.fields({
size: true
}, data => {
// TODO 百度中可能获取不到节点信息 ,需要循环获取
if (index >= 10) return
if (!data) {
index++
this.getCollapseHeight(false, index)
return
}
// #ifdef APP-NVUE
this.height = data.height + 1
// #endif
// #ifndef APP-NVUE
this.height = data.height
// #endif
this.isheight = true
if (type) return
this.onClick(this.isOpen, 'init')
})
.exec()
},
getNvueHwight(type) {
const result = dom.getComponentRect(this.$refs['collapse--hook'], option => {
if (option && option.result && option.size) {
// #ifdef APP-NVUE
this.height = option.size.height + 1
// #endif
// #ifndef APP-NVUE
this.height = option.size.height
// #endif
this.isheight = true
if (type) return
this.onClick(this.open, 'init')
}
})
},
/**
* 获取父元素实例
*/
getCollapse(name = 'uniCollapse') {
let parent = this.$parent;
let parentName = parent.$options.name;
while (parentName !== name) {
parent = parent.$parent;
if (!parent) return false;
parentName = parent.$options.name;
}
return parent;
}
}
}
</script>
<style lang="scss">
.uni-collapse-item {
/* #ifndef APP-NVUE */
box-sizing: border-box;
/* #endif */
&__title {
/* #ifndef APP-NVUE */
display: flex;
width: 100%;
box-sizing: border-box;
/* #endif */
flex-direction: row;
align-items: center;
transition: border-bottom-color .3s;
// transition-property: border-bottom-color;
// transition-duration: 5s;
&-wrap {
width: 100%;
flex: 1;
}
&-box {
padding: 0 15px;
/* #ifndef APP-NVUE */
display: flex;
width: 100%;
box-sizing: border-box;
/* #endif */
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 48px;
line-height: 48px;
background-color: #fff;
color: #303133;
font-size: 13px;
font-weight: 500;
/* #ifdef H5 */
cursor: pointer;
outline: none;
/* #endif */
&.is-disabled {
.uni-collapse-item__title-text {
color: #999;
}
}
}
&.uni-collapse-item-border {
border-bottom: 1px solid #ebeef5;
}
&.is-open {
border-bottom-color: transparent;
}
&-img {
height: 22px;
width: 22px;
margin-right: 10px;
}
&-text {
flex: 1;
font-size: 14px;
/* #ifndef APP-NVUE */
white-space: nowrap;
color: inherit;
/* #endif */
/* #ifdef APP-NVUE */
lines: 1;
/* #endif */
overflow: hidden;
text-overflow: ellipsis;
}
&-arrow {
/* #ifndef APP-NVUE */
display: flex;
box-sizing: border-box;
/* #endif */
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
margin-right: 10px;
transform: rotate(0deg);
&-active {
transform: rotate(-180deg);
}
}
}
&__wrap {
/* #ifndef APP-NVUE */
will-change: height;
box-sizing: border-box;
/* #endif */
background-color: #fff;
overflow: hidden;
position: relative;
height: 0;
&.is--transition {
// transition: all 0.3s;
transition-property: height, border-bottom-width;
transition-duration: 0.3s;
/* #ifndef APP-NVUE */
will-change: height;
/* #endif */
}
&-content {
position: absolute;
font-size: 13px;
color: #303133;
// transition: height 0.3s;
border-bottom-color: transparent;
border-bottom-style: solid;
border-bottom-width: 0;
&.uni-collapse-item--border {
border-bottom-width: 1px;
border-bottom-color: red;
border-bottom-color: #ebeef5;
}
&.open {
position: relative;
}
}
}
&--animation {
transition-property: transform;
transition-duration: 0.3s;
transition-timing-function: ease;
}
}
</style>
<template>
<view class="uni-collapse">
<slot />
</view>
</template>
<script>
/**
* Collapse 折叠面板
* @description 展示可以折叠 / 展开的内容区域
* @tutorial https://ext.dcloud.net.cn/plugin?id=23
* @property {String|Array} value 当前激活面板改变时触发(如果是手风琴模式,参数类型为string,否则为array)
* @property {Boolean} accordion = [true|false] 是否开启手风琴效果是否开启手风琴效果
* @event {Function} change 切换面板时触发,如果是手风琴模式,返回类型为string,否则为array
*/
export default {
name: 'uniCollapse',
emits:['change','activeItem','input','update:modelValue'],
props: {
value: {
type: [String, Array],
default: ''
},
modelValue: {
type: [String, Array],
default: ''
},
accordion: {
// 是否开启手风琴效果
type: [Boolean, String],
default: false
},
},
data() {
return {}
},
computed: {
// TODO 兼容 vue2 和 vue3
dataValue() {
let value = (typeof this.value === 'string' && this.value === '') ||
(Array.isArray(this.value) && this.value.length === 0)
let modelValue = (typeof this.modelValue === 'string' && this.modelValue === '') ||
(Array.isArray(this.modelValue) && this.modelValue.length === 0)
if (value) {
return this.modelValue
}
if (modelValue) {
return this.value
}
return this.value
}
},
watch: {
dataValue(val) {
this.setOpen(val)
}
},
created() {
this.childrens = []
this.names = []
},
mounted() {
this.$nextTick(()=>{
this.setOpen(this.dataValue)
})
},
methods: {
setOpen(val) {
let str = typeof val === 'string'
let arr = Array.isArray(val)
this.childrens.forEach((vm, index) => {
if (str) {
if (val === vm.nameSync) {
if (!this.accordion) {
console.warn('accordion 属性为 false ,v-model 类型应该为 array')
return
}
vm.isOpen = true
}
}
if (arr) {
val.forEach(v => {
if (v === vm.nameSync) {
if (this.accordion) {
console.warn('accordion 属性为 true ,v-model 类型应该为 string')
return
}
vm.isOpen = true
}
})
}
})
this.emit(val)
},
setAccordion(self) {
if (!this.accordion) return
this.childrens.forEach((vm, index) => {
if (self !== vm) {
vm.isOpen = false
}
})
},
resize() {
this.childrens.forEach((vm, index) => {
// #ifndef APP-NVUE
vm.getCollapseHeight()
// #endif
// #ifdef APP-NVUE
vm.getNvueHwight()
// #endif
})
},
onChange(isOpen, self) {
let activeItem = []
if (this.accordion) {
activeItem = isOpen ? self.nameSync : ''
} else {
this.childrens.forEach((vm, index) => {
if (vm.isOpen) {
activeItem.push(vm.nameSync)
}
})
}
this.$emit('change', activeItem)
this.emit(activeItem)
},
emit(val){
this.$emit('input', val)
this.$emit('update:modelValue', val)
}
}
}
</script>
<style lang="scss" >
.uni-collapse {
/* #ifndef APP-NVUE */
width: 100%;
display: flex;
/* #endif */
/* #ifdef APP-NVUE */
flex: 1;
/* #endif */
flex-direction: column;
background-color: #fff;
}
</style>
const BindingX = uni.requireNativePlugin('bindingx');
const dom = uni.requireNativePlugin('dom');
const animation = uni.requireNativePlugin('animation');
export default {
data() {
return {}
},
watch: {
show(newVal) {
if (this.autoClose) return
if (this.stop) return
this.stop = true
if (newVal) {
this.open(newVal)
} else {
this.close()
}
},
leftOptions() {
this.getSelectorQuery()
this.init()
},
rightOptions(newVal) {
this.init()
}
},
created() {
if (this.swipeaction.children !== undefined) {
this.swipeaction.children.push(this)
}
},
mounted() {
this.box = this.getEl(this.$refs['selector-box--hock'])
this.selector = this.getEl(this.$refs['selector-content--hock']);
this.leftButton = this.getEl(this.$refs['selector-left-button--hock']);
this.rightButton = this.getEl(this.$refs['selector-right-button--hock']);
this.init()
},
beforeDestroy() {
this.swipeaction.children.forEach((item, index) => {
if (item === this) {
this.swipeaction.children.splice(index, 1)
}
})
},
methods: {
init() {
this.$nextTick(() => {
this.x = 0
this.button = {
show: false
}
setTimeout(() => {
this.getSelectorQuery()
}, 200)
})
},
onClick(index, item, position) {
this.$emit('click', {
content: item,
index,
position
})
},
touchstart(e) {
// 每次只触发一次,避免多次监听造成闪烁
if (this.stop) return
this.stop = true
if (this.autoClose) {
this.swipeaction.closeOther(this)
}
const leftWidth = this.button.left.width
const rightWidth = this.button.right.width
let expression = this.range(this.x, -rightWidth, leftWidth)
let leftExpression = this.range(this.x - leftWidth, -leftWidth, 0)
let rightExpression = this.range(this.x + rightWidth, 0, rightWidth)
this.eventpan = BindingX.bind({
anchor: this.box,
eventType: 'pan',
props: [{
element: this.selector,
property: 'transform.translateX',
expression
}, {
element: this.leftButton,
property: 'transform.translateX',
expression: leftExpression
}, {
element: this.rightButton,
property: 'transform.translateX',
expression: rightExpression
}, ]
}, (e) => {
// nope
if (e.state === 'end') {
this.x = e.deltaX + this.x;
this.isclick = true
this.bindTiming(e.deltaX)
}
});
},
touchend(e) {
if (this.isopen !== 'none' && !this.isclick) {
this.open('none')
}
},
bindTiming(x) {
const left = this.x
const leftWidth = this.button.left.width
const rightWidth = this.button.right.width
const threshold = this.threshold
if (!this.isopen || this.isopen === 'none') {
if (left > threshold) {
this.open('left')
} else if (left < -threshold) {
this.open('right')
} else {
this.open('none')
}
} else {
if ((x > -leftWidth && x < 0) || x > rightWidth) {
if ((x > -threshold && x < 0) || (x - rightWidth > threshold)) {
this.open('left')
} else {
this.open('none')
}
} else {
if ((x < threshold && x > 0) || (x + leftWidth < -threshold)) {
this.open('right')
} else {
this.open('none')
}
}
}
},
/**
* 移动范围
* @param {Object} num
* @param {Object} mix
* @param {Object} max
*/
range(num, mix, max) {
return `min(max(x+${num}, ${mix}), ${max})`
},
/**
* 开启swipe
*/
open(type) {
this.animation(type)
},
/**
* 关闭swipe
*/
close() {
this.animation('none')
},
/**
* 开启关闭动画
* @param {Object} type
*/
animation(type) {
const time = 300
const leftWidth = this.button.left.width
const rightWidth = this.button.right.width
if (this.eventpan && this.eventpan.token) {
BindingX.unbind({
token: this.eventpan.token,
eventType: 'pan'
})
}
switch (type) {
case 'left':
Promise.all([
this.move(this.selector, leftWidth),
this.move(this.leftButton, 0),
this.move(this.rightButton, rightWidth * 2)
]).then(() => {
this.setEmit(leftWidth, type)
})
break
case 'right':
Promise.all([
this.move(this.selector, -rightWidth),
this.move(this.leftButton, -leftWidth * 2),
this.move(this.rightButton, 0)
]).then(() => {
this.setEmit(-rightWidth, type)
})
break
default:
Promise.all([
this.move(this.selector, 0),
this.move(this.leftButton, -leftWidth),
this.move(this.rightButton, rightWidth)
]).then(() => {
this.setEmit(0, type)
})
}
},
setEmit(x, type) {
const leftWidth = this.button.left.width
const rightWidth = this.button.right.width
this.isopen = this.isopen || 'none'
this.stop = false
this.isclick = false
// 只有状态不一致才会返回结果
if (this.isopen !== type && this.x !== x) {
if (type === 'left' && leftWidth > 0) {
this.$emit('change', 'left')
}
if (type === 'right' && rightWidth > 0) {
this.$emit('change', 'right')
}
if (type === 'none') {
this.$emit('change', 'none')
}
}
this.x = x
this.isopen = type
},
move(ref, value) {
return new Promise((resolve, reject) => {
animation.transition(ref, {
styles: {
transform: `translateX(${value})`,
},
duration: 150, //ms
timingFunction: 'linear',
needLayout: false,
delay: 0 //ms
}, function(res) {
resolve(res)
})
})
},
/**
* 获取ref
* @param {Object} el
*/
getEl(el) {
return el.ref
},
/**
* 获取节点信息
*/
getSelectorQuery() {
Promise.all([
this.getDom('left'),
this.getDom('right'),
]).then((data) => {
let show = 'none'
if (this.autoClose) {
show = 'none'
} else {
show = this.show
}
if (show === 'none') {
// this.close()
} else {
this.open(show)
}
})
},
getDom(str) {
return new Promise((resolve, reject) => {
dom.getComponentRect(this.$refs[`selector-${str}-button--hock`], (data) => {
if (data) {
this.button[str] = data.size
resolve(data)
} else {
reject()
}
})
})
}
}
}
var MIN_DISTANCE = 10;
/**
* 监听页面内值的变化,主要用于动态开关swipe-action
* @param {Object} newValue
* @param {Object} oldValue
* @param {Object} ownerInstance
* @param {Object} instance
*/
function sizeReady(newValue, oldValue, ownerInstance, instance) {
var state = instance.getState()
var buttonPositions = JSON.parse(newValue)
if (!buttonPositions || !buttonPositions.data || buttonPositions.data.length === 0) return
state.leftWidth = buttonPositions.data[0].width
state.rightWidth = buttonPositions.data[1].width
state.threshold = instance.getDataset().threshold
if (buttonPositions.show && buttonPositions.show !== 'none') {
openState(buttonPositions.show, instance, ownerInstance)
return
}
if (state.left) {
openState('none', instance, ownerInstance)
}
resetTouchStatus(instance)
}
/**
* 开始触摸操作
* @param {Object} e
* @param {Object} ins
*/
function touchstart(e, ins) {
var instance = e.instance;
var disabled = instance.getDataset().disabled
var state = instance.getState();
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
if (disabled) return
// 开始触摸时移除动画类
instance.requestAnimationFrame(function(){
instance.removeClass('ani');
ins.callMethod('closeSwipe');
})
// 记录上次的位置
state.x = state.left || 0
// 计算滑动开始位置
stopTouchStart(e, ins)
}
/**
* 开始滑动操作
* @param {Object} e
* @param {Object} ownerInstance
*/
function touchmove(e, ownerInstance) {
var instance = e.instance;
var disabled = instance.getDataset().disabled
var state = instance.getState()
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
if (disabled) return
// 是否可以滑动页面
stopTouchMove(e);
if (state.direction !== 'horizontal') {
return;
}
if (e.preventDefault) {
// 阻止页面滚动
e.preventDefault()
}
move(state.x + state.deltaX, instance, ownerInstance)
}
/**
* 结束触摸操作
* @param {Object} e
* @param {Object} ownerInstance
*/
function touchend(e, ownerInstance) {
var instance = e.instance;
var disabled = instance.getDataset().disabled
var state = instance.getState()
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
if (disabled) return
// 滑动过程中触摸结束,通过阙值判断是开启还是关闭
// fixed by mehaotian 定时器解决点击按钮,touchend 触发比 click 事件时机早的问题 ,主要是 ios13
moveDirection(state.left, instance, ownerInstance)
}
/**
* 设置移动距离
* @param {Object} value
* @param {Object} instance
* @param {Object} ownerInstance
*/
function move(value, instance, ownerInstance) {
value = value || 0
var state = instance.getState()
var leftWidth = state.leftWidth
var rightWidth = state.rightWidth
// 获取可滑动范围
state.left = range(value, -rightWidth, leftWidth);
instance.requestAnimationFrame(function(){
instance.setStyle({
transform: 'translateX(' + state.left + 'px)',
'-webkit-transform': 'translateX(' + state.left + 'px)'
})
})
}
/**
* 获取范围
* @param {Object} num
* @param {Object} min
* @param {Object} max
*/
function range(num, min, max) {
return Math.min(Math.max(num, min), max);
}
/**
* 移动方向判断
* @param {Object} left
* @param {Object} value
* @param {Object} ownerInstance
* @param {Object} ins
*/
function moveDirection(left, ins, ownerInstance) {
var state = ins.getState()
var threshold = state.threshold
var position = state.position
var isopen = state.isopen || 'none'
var leftWidth = state.leftWidth
var rightWidth = state.rightWidth
if (state.deltaX === 0) {
openState('none', ins, ownerInstance)
return
}
if ((isopen === 'none' && rightWidth > 0 && -left > threshold) || (isopen !== 'none' && rightWidth > 0 && rightWidth +
left < threshold)) {
// right
openState('right', ins, ownerInstance)
} else if ((isopen === 'none' && leftWidth > 0 && left > threshold) || (isopen !== 'none' && leftWidth > 0 &&
leftWidth - left < threshold)) {
// left
openState('left', ins, ownerInstance)
} else {
// default
openState('none', ins, ownerInstance)
}
}
/**
* 开启状态
* @param {Boolean} type
* @param {Object} ins
* @param {Object} ownerInstance
*/
function openState(type, ins, ownerInstance) {
var state = ins.getState()
var position = state.position
var leftWidth = state.leftWidth
var rightWidth = state.rightWidth
var left = ''
state.isopen = state.isopen ? state.isopen : 'none'
switch (type) {
case "left":
left = leftWidth
break
case "right":
left = -rightWidth
break
default:
left = 0
}
// && !state.throttle
if (state.isopen !== type ) {
state.throttle = true
ownerInstance.callMethod('change', {
open: type
})
}
state.isopen = type
// 添加动画类
ins.requestAnimationFrame(function(){
ins.addClass('ani');
move(left, ins, ownerInstance)
})
// 设置最终移动位置,理论上只要进入到这个函数,肯定是要打开的
}
function getDirection(x, y) {
if (x > y && x > MIN_DISTANCE) {
return 'horizontal';
}
if (y > x && y > MIN_DISTANCE) {
return 'vertical';
}
return '';
}
/**
* 重置滑动状态
* @param {Object} event
*/
function resetTouchStatus(instance) {
var state = instance.getState();
state.direction = '';
state.deltaX = 0;
state.deltaY = 0;
state.offsetX = 0;
state.offsetY = 0;
}
/**
* 设置滑动开始位置
* @param {Object} event
*/
function stopTouchStart(event) {
var instance = event.instance;
var state = instance.getState();
resetTouchStatus(instance);
var touch = event.touches[0];
state.startX = touch.clientX;
state.startY = touch.clientY;
}
/**
* 滑动中,是否禁止打开
* @param {Object} event
*/
function stopTouchMove(event) {
var instance = event.instance;
var state = instance.getState();
var touch = event.touches[0];
state.deltaX = touch.clientX - state.startX;
state.deltaY = touch.clientY - state.startY;
state.offsetX = Math.abs(state.deltaX);
state.offsetY = Math.abs(state.deltaY);
state.direction = state.direction || getDirection(state.offsetX, state.offsetY);
}
module.exports = {
sizeReady: sizeReady,
touchstart: touchstart,
touchmove: touchmove,
touchend: touchend
}
export default {
data() {
return {
x: 0,
transition: false,
width: 0,
viewWidth: 0,
swipeShow: 0
}
},
watch: {
show(newVal) {
if (this.autoClose) return
if (newVal && newVal !== 'none' ) {
this.transition = true
this.open(newVal)
} else {
this.close()
}
}
},
created() {
if (this.swipeaction.children !== undefined) {
this.swipeaction.children.push(this)
}
},
beforeDestroy() {
this.swipeaction.children.forEach((item, index) => {
if (item === this) {
this.swipeaction.children.splice(index, 1)
}
})
},
mounted() {
this.isopen = false
setTimeout(() => {
this.getQuerySelect()
}, 50)
},
methods: {
appTouchStart(e) {
const {
clientX
} = e.changedTouches[0]
this.clientX = clientX
this.timestamp = new Date().getTime()
},
appTouchEnd(e, index, item, position) {
const {
clientX
} = e.changedTouches[0]
// fixed by xxxx 模拟点击事件,解决 ios 13 点击区域错位的问题
let diff = Math.abs(this.clientX - clientX)
let time = (new Date().getTime()) - this.timestamp
if (diff < 40 && time < 300) {
this.$emit('click', {
content: item,
index,
position
})
}
},
// onClick(index, item, position) {
// this.$emit('click', {
// content: item,
// index,
// position
// })
// },
/**
* 移动触发
* @param {Object} e
*/
onChange(e) {
this.moveX = e.detail.x
this.isclose = false
},
touchstart(e) {
this.transition = false
this.isclose = true
this.autoClose && this.swipeaction.closeOther(this)
},
touchmove(e) {},
touchend(e) {
// 0的位置什么都不执行
if (this.isclose && this.isopen === 'none') return
if (this.isclose && this.isopen !== 'none') {
this.transition = true
this.close()
} else {
this.move(this.moveX + this.leftWidth)
}
},
/**
* 移动
* @param {Object} moveX
*/
move(moveX) {
// 打开关闭的处理逻辑不太一样
this.transition = true
// 未打开状态
if (!this.isopen || this.isopen === 'none') {
if (moveX > this.threshold) {
this.open('left')
} else if (moveX < -this.threshold) {
this.open('right')
} else {
this.close()
}
} else {
if (moveX < 0 && moveX < this.rightWidth) {
const rightX = this.rightWidth + moveX
if (rightX < this.threshold) {
this.open('right')
} else {
this.close()
}
} else if (moveX > 0 && moveX < this.leftWidth) {
const leftX = this.leftWidth - moveX
if (leftX < this.threshold) {
this.open('left')
} else {
this.close()
}
}
}
},
/**
* 打开
*/
open(type) {
this.x = this.moveX
this.animation(type)
},
/**
* 关闭
*/
close() {
this.x = this.moveX
// TODO 解决 x 值不更新的问题,所以会多触发一次 nextTick ,待优化
this.$nextTick(() => {
this.x = -this.leftWidth
if(this.isopen!=='none'){
this.$emit('change', 'none')
}
this.isopen = 'none'
})
},
/**
* 执行结束动画
* @param {Object} type
*/
animation(type) {
this.$nextTick(() => {
if (type === 'left') {
this.x = 0
} else {
this.x = -this.rightWidth - this.leftWidth
}
if(this.isopen!==type){
this.$emit('change', type)
}
this.isopen = type
})
},
getSlide(x) {},
getQuerySelect() {
const query = uni.createSelectorQuery().in(this);
query.selectAll('.movable-view--hock').boundingClientRect(data => {
this.leftWidth = data[1].width
this.rightWidth = data[2].width
this.width = data[0].width
this.viewWidth = this.width + this.rightWidth + this.leftWidth
if (this.leftWidth === 0) {
// TODO 疑似bug ,初始化的时候如果x 是0,会导致移动位置错误,所以让元素超出一点
this.x = -0.1
} else {
this.x = -this.leftWidth
}
this.moveX = this.x
this.$nextTick(() => {
this.swipeShow = 1
})
if (!this.buttonWidth) {
this.disabledView = true
}
if (this.autoClose) return
if (this.show !== 'none') {
this.transition = true
this.open(this.shows)
}
}).exec();
}
}
}
const MIN_DISTANCE = 10;
export default {
data() {
return {
uniShow: false,
left: 0,
buttonShow: 'none',
ani: false,
moveLeft:''
}
},
watch: {
show(newVal) {
if (this.autoClose) return
this.openState(newVal)
},
left(){
this.moveLeft = `translateX(${this.left}px)`
},
buttonShow(newVal){
if (this.autoClose) return
this.openState(newVal)
},
leftOptions() {
this.init()
},
rightOptions() {
this.init()
}
},
mounted() {
// this.position = {}
if (this.swipeaction.children !== undefined) {
this.swipeaction.children.push(this)
}
this.init()
},
beforeDestoy() {
this.swipeaction.children.forEach((item, index) => {
if (item === this) {
this.swipeaction.children.splice(index, 1)
}
})
},
methods: {
init(){
clearTimeout(this.timer)
this.timer = setTimeout(() => {
this.getSelectorQuery()
}, 100)
// 移动距离
this.left = 0
this.x = 0
},
closeSwipe(e) {
if (!this.autoClose) return
this.swipeaction.closeOther(this)
},
appTouchStart(e) {
const {
clientX
} = e.changedTouches[0]
this.clientX = clientX
this.timestamp = new Date().getTime()
},
appTouchEnd(e, index, item, position) {
const {
clientX
} = e.changedTouches[0]
// fixed by xxxx 模拟点击事件,解决 ios 13 点击区域错位的问题
let diff = Math.abs(this.clientX - clientX)
let time = (new Date().getTime()) - this.timestamp
if (diff < 40 && time < 300) {
this.$emit('click', {
content: item,
index,
position
})
}
},
touchstart(e) {
if (this.disabled) return
this.ani = false
this.x = this.left || 0
this.stopTouchStart(e)
this.autoClose && this.closeSwipe()
},
touchmove(e) {
if (this.disabled) return
// 是否可以滑动页面
this.stopTouchMove(e);
if (this.direction !== 'horizontal') {
return;
}
this.move(this.x + this.deltaX)
},
touchend() {
if (this.disabled) return
this.moveDirection(this.left)
},
/**
* 设置移动距离
* @param {Object} value
*/
move(value) {
value = value || 0
const leftWidth = this.leftWidth
const rightWidth = this.rightWidth
// 获取可滑动范围
this.left = this.range(value, -rightWidth, leftWidth);
},
/**
* 获取范围
* @param {Object} num
* @param {Object} min
* @param {Object} max
*/
range(num, min, max) {
return Math.min(Math.max(num, min), max);
},
/**
* 移动方向判断
* @param {Object} left
* @param {Object} value
*/
moveDirection(left) {
const threshold = this.threshold
const isopen = this.isopen || 'none'
const leftWidth = this.leftWidth
const rightWidth = this.rightWidth
if (this.deltaX === 0) {
this.openState('none')
return
}
if ((isopen === 'none' && rightWidth > 0 && -left > threshold) || (isopen !== 'none' && rightWidth > 0 && rightWidth +
left < threshold)) {
// right
this.openState('right')
} else if ((isopen === 'none' && leftWidth > 0 && left > threshold) || (isopen !== 'none' && leftWidth > 0 &&
leftWidth - left < threshold)) {
// left
this.openState('left')
} else {
// default
this.openState('none')
}
},
/**
* 开启状态
* @param {Boolean} type
*/
openState(type) {
const leftWidth = this.leftWidth
const rightWidth = this.rightWidth
let left = ''
this.isopen = this.isopen ? this.isopen : 'none'
switch (type) {
case "left":
left = leftWidth
break
case "right":
left = -rightWidth
break
default:
left = 0
}
if (this.isopen !== type) {
this.throttle = true
this.$emit('change', type)
}
this.isopen = type
// 添加动画类
this.ani = true
this.$nextTick(() => {
this.move(left)
})
// 设置最终移动位置,理论上只要进入到这个函数,肯定是要打开的
},
close() {
this.openState('none')
},
getDirection(x, y) {
if (x > y && x > MIN_DISTANCE) {
return 'horizontal';
}
if (y > x && y > MIN_DISTANCE) {
return 'vertical';
}
return '';
},
/**
* 重置滑动状态
* @param {Object} event
*/
resetTouchStatus() {
this.direction = '';
this.deltaX = 0;
this.deltaY = 0;
this.offsetX = 0;
this.offsetY = 0;
},
/**
* 设置滑动开始位置
* @param {Object} event
*/
stopTouchStart(event) {
this.resetTouchStatus();
const touch = event.touches[0];
this.startX = touch.clientX;
this.startY = touch.clientY;
},
/**
* 滑动中,是否禁止打开
* @param {Object} event
*/
stopTouchMove(event) {
const touch = event.touches[0];
this.deltaX = touch.clientX - this.startX;
this.deltaY = touch.clientY - this.startY;
this.offsetX = Math.abs(this.deltaX);
this.offsetY = Math.abs(this.deltaY);
this.direction = this.direction || this.getDirection(this.offsetX, this.offsetY);
},
getSelectorQuery() {
const views = uni.createSelectorQuery().in(this)
views
.selectAll('.uni-swipe_button-group')
.boundingClientRect(data => {
let show = 'none'
if (this.autoClose) {
show = 'none'
} else {
show = this.show
}
this.leftWidth = data[0].width || 0
this.rightWidth = data[1].width || 0
this.buttonShow = show
})
.exec()
}
}
}
export default {
data() {
return {
position: [],
button: {},
btn: "[]"
}
},
// computed: {
// pos() {
// return JSON.stringify(this.position)
// },
// btn() {
// return JSON.stringify(this.button)
// }
// },
watch: {
button: {
handler(newVal) {
this.btn = JSON.stringify(newVal)
},
deep: true
},
show(newVal) {
if (this.autoClose) return
if (!this.button) {
this.init()
return
}
this.button.show = newVal
},
leftOptions() {
this.init()
},
rightOptions() {
this.init()
}
},
created() {
if (this.swipeaction.children !== undefined) {
this.swipeaction.children.push(this)
}
},
mounted() {
this.init()
},
beforeDestroy() {
this.swipeaction.children.forEach((item, index) => {
if (item === this) {
this.swipeaction.children.splice(index, 1)
}
})
},
methods: {
init() {
clearTimeout(this.swipetimer)
this.swipetimer = setTimeout(() => {
this.getButtonSize()
}, 50)
},
closeSwipe(e) {
if (!this.autoClose) return
this.swipeaction.closeOther(this)
},
change(e) {
this.$emit('change', e.open)
let show = this.button.show
if (show !== e.open) {
this.button.show = e.open
}
},
appTouchStart(e) {
const {
clientX
} = e.changedTouches[0]
this.clientX = clientX
this.timestamp = new Date().getTime()
},
appTouchEnd(e, index, item, position) {
const {
clientX
} = e.changedTouches[0]
// fixed by xxxx 模拟点击事件,解决 ios 13 点击区域错位的问题
let diff = Math.abs(this.clientX - clientX)
let time = (new Date().getTime()) - this.timestamp
if (diff < 40 && time < 300) {
this.$emit('click', {
content: item,
index,
position
})
}
},
getButtonSize() {
const views = uni.createSelectorQuery().in(this)
views
.selectAll('.uni-swipe_button-group')
.boundingClientRect(data => {
let show = 'none'
if (this.autoClose) {
show = 'none'
} else {
show = this.show
}
this.button = {
data,
show
}
})
.exec()
}
}
}
<template>
<!-- 在微信小程序 app vue端 h5 使用wxs 实现-->
<!-- #ifdef APP-VUE || MP-WEIXIN || H5 -->
<view class="uni-swipe">
<view
class="uni-swipe_box"
:data-threshold="threshold"
:data-disabled="disabled"
:change:prop="swipe.sizeReady"
:prop="btn"
@touchstart="swipe.touchstart"
@touchmove="swipe.touchmove"
@touchend="swipe.touchend"
>
<!-- 在微信小程序 app vue端 h5 使用wxs 实现-->
<view class="uni-swipe_button-group button-group--left">
<slot name="left">
<view
v-for="(item,index) in leftOptions"
:data-button="btn"
:key="index"
:style="{
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
}"
class="uni-swipe_button button-hock"
@touchstart="appTouchStart"
@touchend="appTouchEnd($event,index,item,'left')"
><text
class="uni-swipe_button-text"
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}"
>{{ item.text }}</text></view>
</slot>
</view>
<slot></slot>
<view class="uni-swipe_button-group button-group--right">
<slot name="right">
<view
v-for="(item,index) in rightOptions"
:data-button="btn"
:key="index"
:style="{
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
}"
class="uni-swipe_button button-hock"
@touchstart="appTouchStart"
@touchend="appTouchEnd($event,index,item,'right')"
><text
class="uni-swipe_button-text"
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}"
>{{ item.text }}</text></view>
</slot>
</view>
</view>
</view>
<!-- #endif -->
<!-- app nvue端 使用 bindingx -->
<!-- #ifdef APP-NVUE -->
<view
ref="selector-box--hock"
class="uni-swipe"
@horizontalpan="touchstart"
@touchend="touchend"
>
<view
ref='selector-left-button--hock'
class="uni-swipe_button-group button-group--left"
>
<slot name="left">
<view
v-for="(item,index) in leftOptions"
:data-button="btn"
:key="index"
:style="{
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
}"
class="uni-swipe_button button-hock"
@click.stop="onClick(index,item,'left')"
><text
class="uni-swipe_button-text"
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}"
>{{ item.text }}</text></view>
</slot>
</view>
<view
ref='selector-right-button--hock'
class="uni-swipe_button-group button-group--right"
>
<slot name="right">
<view
v-for="(item,index) in rightOptions"
:data-button="btn"
:key="index"
:style="{
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
}"
class="uni-swipe_button button-hock"
@click.stop="onClick(index,item,'right')"
><text
class="uni-swipe_button-text"
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}"
>{{ item.text }}</text></view>
</slot>
</view>
<view
ref='selector-content--hock'
class="uni-swipe_box"
>
<slot></slot>
</view>
</view>
<!-- #endif -->
<!-- 其他平台使用 js ,长列表性能可能会有影响-->
<!-- #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ -->
<view class="uni-swipe">
<view
class="uni-swipe_box"
@touchstart="touchstart"
@touchmove="touchmove"
@touchend="touchend"
:style="{transform:moveLeft}"
:class="{ani:ani}"
>
<view class="uni-swipe_button-group button-group--left">
<slot name="left">
<view
v-for="(item,index) in leftOptions"
:data-button="btn"
:key="index"
:style="{
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
}"
class="uni-swipe_button button-hock"
@touchstart="appTouchStart"
@touchend="appTouchEnd($event,index,item,'left')"
><text
class="uni-swipe_button-text"
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}"
>{{ item.text }}</text></view>
</slot>
</view>
<slot></slot>
<view class="uni-swipe_button-group button-group--right">
<slot name="right">
<view
v-for="(item,index) in rightOptions"
:data-button="btn"
:key="index"
:style="{
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
}"
@touchstart="appTouchStart"
@touchend="appTouchEnd($event,index,item,'right')"
class="uni-swipe_button button-hock"
><text
class="uni-swipe_button-text"
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}"
>{{ item.text }}</text></view>
</slot>
</view>
</view>
</view>
<!-- #endif -->
</template>
<script
src="./index.wxs"
module="swipe"
lang="wxs"
></script>
<script>
// #ifdef APP-VUE|| MP-WEIXIN || H5
import mpwxs from './mpwxs'
// #endif
// #ifdef APP-NVUE
import bindingx from './bindingx.js'
// #endif
// #ifndef APP-PLUS|| MP-WEIXIN || H5
import mixins from './mpother'
// #endif
/**
* SwipeActionItem 滑动操作子组件
* @description 通过滑动触发选项的容器
* @tutorial https://ext.dcloud.net.cn/plugin?id=181
* @property {Boolean} show = [left|right|none] 开启关闭组件,auto-close = false 时生效
* @property {Boolean} disabled = [true|false] 是否禁止滑动
* @property {Boolean} autoClose = [true|false] 滑动打开当前组件,是否关闭其他组件
* @property {Number} threshold 滑动缺省值
* @property {Array} leftOptions 左侧选项内容及样式
* @property {Array} rgihtOptions 右侧选项内容及样式
* @event {Function} click 点击选项按钮时触发事件,e = {content,index} ,content(点击内容)、index(下标)
* @event {Function} change 组件打开或关闭时触发,left\right\none
*/
export default {
// #ifdef APP-VUE|| MP-WEIXIN||H5
mixins: [mpwxs],
// #endif
// #ifdef APP-NVUE
mixins: [bindingx],
// #endif
// #ifndef APP-PLUS|| MP-WEIXIN || H5
mixins: [mixins],
// #endif
props: {
// 控制开关
show: {
type: String,
default: 'none'
},
// 禁用
disabled: {
type: Boolean,
default: false
},
// 是否自动关闭
autoClose: {
type: Boolean,
default: true
},
// 滑动缺省距离
threshold: {
type: Number,
default: 20
},
// 左侧按钮内容
leftOptions: {
type: Array,
default () {
return []
}
},
// 右侧按钮内容
rightOptions: {
type: Array,
default () {
return []
}
}
},
inject: ['swipeaction']
}
</script>
<style
lang="scss"
scoped
>
.uni-swipe {
position: relative;
/* #ifndef APP-NVUE */
overflow: hidden;
/* #endif */
}
.uni-swipe_box {
/* #ifndef APP-NVUE */
display: flex;
flex-shrink: 0;
/* #endif */
position: relative;
}
.uni-swipe_content {
// border: 1px red solid;
}
.uni-swipe_button-group {
/* #ifndef APP-NVUE */
box-sizing: border-box;
display: flex;
/* #endif */
flex-direction: row;
position: absolute;
top: 0;
bottom: 0;
}
.button-group--left {
left: 0;
transform: translateX(-100%)
}
.button-group--right {
right: 0;
transform: translateX(100%)
}
.uni-swipe_button {
/* #ifdef APP-NVUE */
flex: 1;
/* #endif */
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0 20px;
}
.uni-swipe_button-text {
/* #ifndef APP-NVUE */
flex-shrink: 0;
/* #endif */
font-size: 14px;
}
.ani {
transition-property: transform;
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* #ifdef MP-ALIPAY */
.movable-area {
/* width: 100%; */
height: 45px;
}
.movable-view {
display: flex;
/* justify-content: center; */
position: relative;
flex: 1;
height: 45px;
z-index: 2;
}
.movable-view-button {
display: flex;
flex-shrink: 0;
flex-direction: row;
height: 100%;
background: #C0C0C0;
}
/* .transition {
transition: all 0.3s;
} */
.movable-view-box {
flex-shrink: 0;
height: 100%;
background-color: #fff;
}
/* #endif */
</style>
<template>
<view>
<slot></slot>
</view>
</template>
<script>
/**
* SwipeAction 滑动操作
* @description 通过滑动触发选项的容器
* @tutorial https://ext.dcloud.net.cn/plugin?id=181
*/
export default {
data() {
return {};
},
provide() {
return {
swipeaction: this
};
},
created() {
this.children = [];
},
methods: {
closeOther(vm) {
if (this.openItem && this.openItem !== vm) {
// #ifdef APP-VUE || H5 || MP-WEIXIN
this.openItem.button.show = 'none'
// #endif
// #ifndef APP-VUE || H5 || MP-WEIXIN
this.openItem.close()
// #endif
}
this.openItem = vm
}
}
};
</script>
<style></style>
This diff is collapsed.
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
</template> </template>
<script> <script>
import NumberBox from '@/components/number-box/number-box.vue'; import NumberBox from '@/pages/bill/components/number-box/number-box.vue';
import ShoppingCart from './shopping-cart.vue'; import ShoppingCart from './shopping-cart.vue';
export default { export default {
......
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
<script> <script>
import ZbTooltip from '@/components/zb-tooltip/zb-tooltip.vue'; import ZbTooltip from '@/components/zb-tooltip/zb-tooltip.vue';
import NumberBox from '@/components/number-box/number-box.vue'; import NumberBox from '@/pages/bill/components/number-box/number-box.vue';
import CustomPopup from './custom-popup.vue'; import CustomPopup from './custom-popup.vue';
import PopInput from '@/components/pop-input-view'; import PopInput from '@/components/pop-input-view';
......
...@@ -94,7 +94,7 @@ import ShoppingCart from '../price/components/shopping-cart.vue'; ...@@ -94,7 +94,7 @@ import ShoppingCart from '../price/components/shopping-cart.vue';
import CartPopup from '../price/components/cart-popup.vue'; import CartPopup from '../price/components/cart-popup.vue';
import ZbTooltip from '@/components/zb-tooltip/zb-tooltip.vue'; import ZbTooltip from '@/components/zb-tooltip/zb-tooltip.vue';
import NumberBox from '@/components/number-box/number-box.vue'; import NumberBox from '@/pages/bill/components/number-box/number-box.vue';
import CustomPopup from './components/custom-popup.vue'; import CustomPopup from './components/custom-popup.vue';
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
......
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
</template> </template>
<script> <script>
import NumberBox from '@/components/number-box/number-box.vue'; import NumberBox from '@/pages/bill/components/number-box/number-box.vue';
import ShoppingCart from './shopping-cart.vue'; import ShoppingCart from './shopping-cart.vue';
export default { export default {
......
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
<script> <script>
import ZbTooltip from '@/components/zb-tooltip/zb-tooltip.vue'; import ZbTooltip from '@/components/zb-tooltip/zb-tooltip.vue';
import NumberBox from '@/components/number-box/number-box.vue'; import NumberBox from '@/pages/bill/components/number-box/number-box.vue';
export default { export default {
components: { components: {
ZbTooltip, ZbTooltip,
......
...@@ -53,28 +53,6 @@ ...@@ -53,28 +53,6 @@
</view> </view>
</view> </view>
</view> </view>
<!-- <uni-collapse>
<uni-collapse-item v-for="(item2, index2) in mainData.children" :open="item2.open" :index="item2.index2" :key="item2.classB">
<view class="">
<collapse-body
:detail="item3"
:parentTitle="item2.classB"
@add="addPrice"
v-for="(item3, index3) in item2.children"
:key="item3.classC"
></collapse-body>
</view>
<view class="collapse-title" slot="title">
<view class="collapse-title-left">{{ item2.classB }}</view>
<view class="collapse-title-right">
<text>¥</text>
<text>{{ item2.chargeStandard }}</text>
</view>
</view>
</uni-collapse-item>
</uni-collapse> -->
</view> </view>
</view> </view>
<view class="fill-last" :style="{ height: fillHeight + 'px' }"></view> <view class="fill-last" :style="{ height: fillHeight + 'px' }"></view>
...@@ -90,8 +68,6 @@ ...@@ -90,8 +68,6 @@
<script> <script>
import NoData from '@/components/no-data'; import NoData from '@/components/no-data';
import QuotedPriceCrumbs from '../components/quoted-price-crumbs.vue'; import QuotedPriceCrumbs from '../components/quoted-price-crumbs.vue';
import UniCollapse from '@/components/uni-collapse/uni-collapse.vue';
import UniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue';
import QuotedPriceTips from '../components/quoted-price-tips.vue'; import QuotedPriceTips from '../components/quoted-price-tips.vue';
import CollapseBody from './components/collapse-body.vue'; import CollapseBody from './components/collapse-body.vue';
import ShoppingCart from './components/shopping-cart.vue'; import ShoppingCart from './components/shopping-cart.vue';
...@@ -99,7 +75,7 @@ import CartPopup from './components/cart-popup.vue'; ...@@ -99,7 +75,7 @@ import CartPopup from './components/cart-popup.vue';
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import { getOffer,getOfferV3 } from '@/api/bill/quoted-price.js'; import { getOffer,getOfferV3 } from '@/api/bill/quoted-price.js';
export default { export default {
components: { NoData,QuotedPriceCrumbs, UniCollapse, UniCollapseItem, QuotedPriceTips, CollapseBody, ShoppingCart, CartPopup }, components: { NoData,QuotedPriceCrumbs, QuotedPriceTips, CollapseBody, ShoppingCart, CartPopup },
data() { data() {
return { return {
noDataText: '当前暂无内容', noDataText: '当前暂无内容',
......
...@@ -47,8 +47,8 @@ ...@@ -47,8 +47,8 @@
</template> </template>
<script> <script>
import Card from '@/components/cell-card' import Card from '@/pages/card/components/cell-card'
import CardBack from '@/components/cell-card-back' import CardBack from '@/pages/card/components/cell-card-back'
export default { export default {
components: { components: {
......
...@@ -138,7 +138,7 @@ ...@@ -138,7 +138,7 @@
<script> <script>
import NavbarRight from '@/components/navbar-right' import NavbarRight from '@/components/navbar-right'
import PopImage from '@/components/pop-image' import PopImage from '@/pages/card/components/pop-image'
import { editBusinessCard, getBusinessCardSelf } from '@/api/card/index.js' import { editBusinessCard, getBusinessCardSelf } from '@/api/card/index.js'
export default { export default {
......
...@@ -71,9 +71,9 @@ ...@@ -71,9 +71,9 @@
import AuthPopup from '@/components/auth-popup' import AuthPopup from '@/components/auth-popup'
import NavbarRight from '@/components/navbar-right'; import NavbarRight from '@/components/navbar-right';
import NoData from '@/components/no-data'; import NoData from '@/components/no-data';
import CardSwiper from '@/components/cell-card-swiper'; import CardSwiper from '@/pages/card/components/cell-card-swiper';
import CellRelation from '@/components/cell-relation'; import CellRelation from '@/pages/card/components/cell-relation';
import BottomShare from '@/components/bottom-share/index.vue'; import BottomShare from '@/pages/card/components/bottom-share/index.vue';
import { getBusinessCardSelf, getBusinessCardRecord, operateStatistics } from '@/api/card/index.js'; import { getBusinessCardSelf, getBusinessCardRecord, operateStatistics } from '@/api/card/index.js';
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import { getSetting } from '@/utils/common.js'; import { getSetting } from '@/utils/common.js';
......
...@@ -36,8 +36,8 @@ ...@@ -36,8 +36,8 @@
<script> <script>
import AuthPopup from '@/components/auth-popup' import AuthPopup from '@/components/auth-popup'
import NavbarRight from '@/components/navbar-right' import NavbarRight from '@/components/navbar-right'
import Card from '@/components/cell-card' import Card from '@/pages/card/components/cell-card'
import CardBack from '@/components/cell-card-back' import CardBack from '@/pages/card/components/cell-card-back'
import { import {
getSetting getSetting
} from '@/utils/common.js'; } from '@/utils/common.js';
......
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
</template> </template>
<script> <script>
import CellSeal from '@/components/cell-seal/index'; import CellSeal from '@/pages/mine/components/cell-seal/index';
export default { export default {
props: { props: {
......
...@@ -55,7 +55,7 @@ const log = require('@/utils/log.js'); ...@@ -55,7 +55,7 @@ const log = require('@/utils/log.js');
import { mineBaseUrl } from '@/utils/config.js'; import { mineBaseUrl } from '@/utils/config.js';
import { getList, checkCode, useCode } from '@/api/mine/cd-key.js'; import { getList, checkCode, useCode } from '@/api/mine/cd-key.js';
import PopBindPhone from '@/components/pop-bind-phone/index.vue'; import PopBindPhone from '@/pages/mine/components/pop-bind-phone/index.vue';
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
export default { export default {
......
...@@ -100,8 +100,8 @@ ...@@ -100,8 +100,8 @@
<script> <script>
import log from '@/utils/log.js'; import log from '@/utils/log.js';
import BottomPay from '@/components/bottom-pay/index.vue'; import BottomPay from '@/pages/mine/components/bottom-pay/index.vue';
import PopBindPhone from '@/components/pop-bind-phone/index.vue'; import PopBindPhone from '@/pages/mine/components/pop-bind-phone/index.vue';
import { mineBaseUrl } from '@/utils/config.js'; import { mineBaseUrl } from '@/utils/config.js';
import { introOptions } from '@/utils/options/mine/pay.js'; import { introOptions } from '@/utils/options/mine/pay.js';
import { getGoodsList, getOrderInfo, systemExchange } from '@/api/mine/pay.js'; import { getGoodsList, getOrderInfo, systemExchange } from '@/api/mine/pay.js';
......
...@@ -4,16 +4,8 @@ ...@@ -4,16 +4,8 @@
<view class="zhuti"> <view class="zhuti">
<scroll-view :scroll-y="pageInfo.scrollY" class="product-section"> <scroll-view :scroll-y="pageInfo.scrollY" class="product-section">
<view class="list"> <view class="list">
<!-- <uni-swipe-action ref="swipeAction" > -->
<view class="swipe-action-outside" v-for="(item, index) in optionLists" :key="item.id"> <view class="swipe-action-outside" v-for="(item, index) in optionLists" :key="item.id">
<!-- <uni-swipe-action-item
:right-options="options"
bg-color="#f6f7fa"
:index="item.id"
:auto-close="true"
@click.stop="onClick($event, item, index)"
@change="swipeChange($event, index)"
> -->
<view <view
class="row list-row" class="row list-row"
:data-index="index" :data-index="index"
...@@ -35,9 +27,7 @@ ...@@ -35,9 +27,7 @@
</view> --> </view> -->
</view> </view>
</view> </view>
<!-- </uni-swipe-action-item> -->
</view> </view>
<!-- </uni-swipe-action> -->
</view> </view>
</scroll-view> </scroll-view>
<movable-area class="movable-area" :class="{ 'movable-area-active': pageInfo.beginMove }"> <movable-area class="movable-area" :class="{ 'movable-area-active': pageInfo.beginMove }">
...@@ -63,8 +53,6 @@ ...@@ -63,8 +53,6 @@
</template> </template>
<script> <script>
import UniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue';
import UniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue';
import PopInput from '@/components/pop-input-view'; import PopInput from '@/components/pop-input-view';
import { billBaseUrl } from '@/utils/config.js'; import { billBaseUrl } from '@/utils/config.js';
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
...@@ -72,8 +60,6 @@ export default { ...@@ -72,8 +60,6 @@ export default {
name: 'dragEdit', name: 'dragEdit',
props: ['list'], props: ['list'],
components: { components: {
UniSwipeAction,
UniSwipeActionItem,
PopInput PopInput
}, },
data() { data() {
......
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
<script> <script>
import NavbarNormal from '@/components/navbar-normal'; import NavbarNormal from '@/components/navbar-normal';
import DrapView from './components/drap-view.vue'; import DrapView from './components/drap-view.vue';
import MaskTip from '@/components/mask-tip'; import MaskTip from '@/pages/mine/components/mask-tip';
import AbButton from '@/components/common/ab-button.vue'; import AbButton from '@/components/common/ab-button.vue';
import { billingTypeOptions } from '@/utils/options/bill'; import { billingTypeOptions } from '@/utils/options/bill';
import { cellInfoOptions, menuIconOptions, muckList } from '@/utils/options/mine/payments-setting.js'; import { cellInfoOptions, menuIconOptions, muckList } from '@/utils/options/mine/payments-setting.js';
......
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
<script> <script>
import NavbarNormal from '@/components/navbar-normal'; import NavbarNormal from '@/components/navbar-normal';
import CellSeal from '@/components/cell-seal/index'; import CellSeal from '@/pages/mine/components/cell-seal/index';
import NoData from '@/components/no-data'; import NoData from '@/components/no-data';
import { getSealList } from '@/api/mine/shop.js'; import { getSealList } from '@/api/mine/shop.js';
......
...@@ -2,9 +2,7 @@ ...@@ -2,9 +2,7 @@
<view class="list"> <view class="list">
<NoData v-if="noData" :text="noDataText" customStyle="margin-top: 0rpx;" :imageName="noDataImage" /> <NoData v-if="noData" :text="noDataText" customStyle="margin-top: 0rpx;" :imageName="noDataImage" />
<block v-else> <block v-else>
<!-- <uni-swipe-action> -->
<view class="swipe-action-outside" v-for="(item, index) in list" :key="item.id"> <view class="swipe-action-outside" v-for="(item, index) in list" :key="item.id">
<!-- <uni-swipe-action-item :right-options="options" @click="onClick($event,item)" @change="swipeChange($event, index)"> -->
<view class="list-row" @click.stop="clickCell(item)"> <view class="list-row" @click.stop="clickCell(item)">
<view class="list-row-view list-row-left"> <view class="list-row-view list-row-left">
<view class="list-row-view-top"> <view class="list-row-view-top">
...@@ -40,9 +38,7 @@ ...@@ -40,9 +38,7 @@
</view> </view>
</view> </view>
</view> </view>
<!-- </uni-swipe-action-item> -->
</view> </view>
<!-- </uni-swipe-action> -->
</block> </block>
<PopInput title="删除提醒" type="text" sureText="确定" content="确认删除该定时计划?" :visible.sync="showConfirm" @click="handleConfirm" @cancel="handleCancel" /> <PopInput title="删除提醒" type="text" sureText="确定" content="确认删除该定时计划?" :visible.sync="showConfirm" @click="handleConfirm" @cancel="handleCancel" />
...@@ -51,8 +47,6 @@ ...@@ -51,8 +47,6 @@
</template> </template>
<script> <script>
import UniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue';
import UniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue';
import NoData from '@/components/no-data'; import NoData from '@/components/no-data';
import PopInput from '@/components/pop-input-view'; import PopInput from '@/components/pop-input-view';
import SubmitButton from '@/components/submit-button/index.vue'; import SubmitButton from '@/components/submit-button/index.vue';
...@@ -61,8 +55,6 @@ import { weekOptions } from '@/utils/options/mine/timed.js'; ...@@ -61,8 +55,6 @@ import { weekOptions } from '@/utils/options/mine/timed.js';
import { getList, deleteById, enable, close } from '@/api/mine/timed.js'; import { getList, deleteById, enable, close } from '@/api/mine/timed.js';
export default { export default {
components: { components: {
UniSwipeAction,
UniSwipeActionItem,
NoData, NoData,
PopInput, PopInput,
SubmitButton SubmitButton
......
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
</template> </template>
<script> <script>
import uCircleProgress from '../u-circle-progress/u-circle-progress.vue'; import uCircleProgress from './u-circle-progress.vue';
const recorderManager = uni.getRecorderManager(); const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext(); const innerAudioContext = uni.createInnerAudioContext();
export default { export default {
......
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
import AuthPopup from '@/components/auth-popup' import AuthPopup from '@/components/auth-popup'
import NavbarRight from '@/components/navbar-right'; import NavbarRight from '@/components/navbar-right';
import PopInput from '@/components/pop-input-view'; import PopInput from '@/components/pop-input-view';
import SoundRecording from '@/components/sound-recording/sound-recording.vue'; import SoundRecording from '@/pages/schedule/components/sound-recording.vue';
import AbButton from '@/components/common/ab-button.vue'; import AbButton from '@/components/common/ab-button.vue';
import CheckboxGroups from '@/components/checkbox-groups/checkbox-groups.vue'; import CheckboxGroups from '@/components/checkbox-groups/checkbox-groups.vue';
import CalendarPopup from '@/components/calendar-popup/calendar-popup.vue'; import CalendarPopup from '@/components/calendar-popup/calendar-popup.vue';
......
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1587304858380'); /* IE9 */
src: url('iconfont.eot?t=1587304858380#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKYAAsAAAAABkQAAAJOAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcApQZAE2AiQDCAsGAAQgBYRtBzAbigXIrrApw69IkQJyuEPQxl76g4HoIYL6/dje+w8TiUTRZBoiHqpVEmRaIRRCYrpn8t//uczdiITNQB7LUyNSaIv5v7/lNAN0rMlIMv6eHwo3dzBnwGQPk3M8ZxtLDRi4CKu4hFtT9xqbz3M5vQl0IPMDneNqDtrDFk3qBXQvDqQA98IosjJJvGHsApfwmECtQTWVzdXtPRiWWasCcWu0A8O5tCyzWrVQWXMwixcVqtNTegeew+/Hn04Mk1QUrJaD8xUf5j/ZxeKxhE/IENDxChSYBzJxUlve0ycY16e23G8U7Ksx+FSWfkjs1S/YX2fV14N+qN6T5uq3WktwWxN1AL2jriQ6LvSLqs8PXI9IP2WWb82rj+Ho6f7KTwh8/vG/+MEqQLlFX3EFFQR3W5dz1tTif3VdBh/nNUyWm/WLguq9RIK/ofUcyLphBVNWtVpz0nGWtlq1KAnHW/2N9XSc2hyqR0SrDKQoVBsnMzuPCnUWUKnaCmrNWTtepw3rE7kGs64BQrNXJI3eUGjWIzP7iwqd/lGpOfpQ6yzaLqwzGWZ0g8kR8tE9ReNlqXLCMho17pA+jB3OGiF/QFyaHLYbrWJtjVLiObaUR7ojolBxluAqeI7iOMOcs5A8aQQiebfZVHVvanhZAqM2MOIQxIdcp5DhyaSUP1qMlj6/g2iHYg5u6aspDxBWMtOjtoZWD3LNkfbqu5dXSke0DiEUpLBMAq2CeSQWy6C8fl6IeERDMKKY62raw1RfR2N9V/J1x6CW5U1hzypUnjtpcGgAAA==') format('woff2'),
url('iconfont.woff?t=1587304858380') format('woff'),
url('iconfont.ttf?t=1587304858380') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1587304858380#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-fanhui:before {
content: "\e65c";
}
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<!--
2013-9-30: Created.
-->
<svg>
<metadata>
Created by iconfont
</metadata>
<defs>
<font id="iconfont" horiz-adv-x="1024" >
<font-face
font-family="iconfont"
font-weight="500"
font-stretch="normal"
units-per-em="1024"
ascent="896"
descent="-128"
/>
<missing-glyph />
<glyph glyph-name="fanhui" unicode="&#58972;" d="M349.184 382.976l435.2 432.64c13.824 13.824 13.824 39.424 0 53.76l-13.824 13.824c-13.824 13.824-39.424 13.824-53.76 0L239.616 410.624c-13.824-13.824-13.824-39.424 0-53.76l474.624-472.576c13.824-13.824 39.424-13.824 53.76 0l13.824 13.824c13.824 13.824 13.824 39.424 0 53.76l-432.64 431.104z" horiz-adv-x="1024" />
</font>
</defs></svg>
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