Leadfyy.co
/
ec.uniapp-master
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'master' of http://8.134.10.79:3000/Leadfyy.co/ec.uniapp-master

master
Enzo 4 years ago
parent
ef78d1fc9c a927ecd347
commit
006077c35a
2 changed files with 338 additions and 13 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 290
      components/lf-swipeAction/lf-swipeAction.vue
  2. 39
      pages/store/cart/cart.vue

290
components/lf-swipeAction/lf-swipeAction.vue
View File

@ -0,0 +1,290 @@
<template>
<view class="swipe_action_box" @touchstart="onTouchstart" @touchmove="onTouchmove" @touchcancel="onTouchcancel" @touchend="onTouchend">
<view class="swipe_action_item" :style="{ width: (screenWidth + maxWidth) + 'px', transform: 'translateX(' + translateX + 'px)', transition: 'transform ' + animationTime + 'ms cubic-bezier(.165, .84, .44, 1)' }">
<view class="swipe_action_content"><slot></slot></view>
<view class="swipe_action_btn_box" ref="swipeActionBtnBox" :class="{'mune-show': mune_show}">
<view v-for="(item,index) of options" :key="index" class="swipe_action_btn" :style="{
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD'
}" @click.stop="onBtn(index,item)">
<text :style="{
fontSize: item.style && item.style.fontSize ? item.style.fontSize : '14px',
color: item.style && item.style.color ? item.style.color : '#FFFFFF'
}">{{ item.text }}</text>
</view>
</view>
</view>
</view>
</template>
<script>
// #ifdef APP-NVUE
const dom = weex.requireModule('dom');
// #endif
export default {
props: {
/**
* 按钮内容
*/
options: {
type: Array,
default () {
return []
}
},
/**
* 禁用
*/
disabled: {
type: Boolean,
default: false
},
/**
* 变量控制开关
*/
show: {
type: Boolean,
default: false
},
/**
* 是否自动关闭
*/
autoClose: {
type: Boolean,
default: true
},
/**
* swipe-action 的索引值
*/
index: {
type: Number,
default: 0
}
},
data() {
return {
//开始触摸时间
startTime: 0,
//开始触摸距离
touchStartX: 0,
//最大距离
maxWidth: 58,
//滑动距离
translateX: 0,
animationTime: 0,
//上次的位置
currentX: 0,
screenWidth: 0,
mune_show: false
};
},
watch:{
show(val){
if(val){
this.animationTime = 350;
this.translateX = -this.maxWidth;
}else {
this.animationTime = 350;
this.translateX = 0;
}
},
translateX(val){
if(val == 0){
this.mune_show = false;
}else{
this.mune_show = true;
}
}
},
created() {
let systemInfo = uni.getSystemInfoSync();
this.screenWidth = systemInfo.screenWidth;
},
mounted() {
const _this = this;
setTimeout(() => {
// #ifdef APP-NVUE
dom.getComponentRect(this.$refs['swipeActionBtnBox'], (data) => {
_this.maxWidth = data.size.width;
if(_this.show){
_this.animationTime = 350;
_this.translateX = -data.size.width;
}
});
// #endif
// #ifndef APP-NVUE
uni.createSelectorQuery().in(this).selectAll('.swipe_action_btn_box')
.boundingClientRect(data => {
_this.maxWidth = data[0].width;
if(_this.show){
_this.animationTime = 350;
_this.translateX = -data[0].width;
}
}).exec()
// #endif
},500);
},
//方法
methods: {
onBtn(index, item) {
this.$emit('button', {
content: item,
index: this.index,
buttonIndex: index
});
if(this.autoClose){
this.animationTime = 350;
this.translateX = 0;
}
},
// 手指触摸动作开始
onTouchstart(e) {
if(this.disabled){
return;
}
//储存手指触摸坐标，当前时间戳，当前坐标
// #ifdef APP-NVUE
this.touchStartX = e.changedTouches[0].screenX;
// #endif
// #ifndef APP-NVUE
this.touchStartX = e.changedTouches[0].clientX;
// #endif
this.startTime = new Date().getTime();
this.currentX = this.translateX;
},
// 手指触摸后移动
onTouchmove(e) {
if(this.disabled){
return;
}
//手指当前坐标
// #ifdef APP-NVUE
const clientX = e.changedTouches[0].screenX;
// #endif
// #ifndef APP-NVUE
const clientX = e.changedTouches[0].clientX;
// #endif
//计算滑动距离
const difference = this.touchStartX - clientX;
//判断左滑还是右滑
if (difference > 0) {
//计算当前已滑动距离
const leftDifference = this.currentX - Math.abs(difference);
//判断是否大于滑动的最大宽度
if (this.maxWidth < Math.abs(leftDifference)) {
this.animationTime = 0;
this.translateX = -this.maxWidth;
} else {
this.animationTime = 0;
this.translateX = leftDifference;
}
} else {
const rightDifference = this.currentX + Math.abs(difference);
if (0 < rightDifference) {
this.animationTime = 0;
this.translateX = 0;
} else {
this.animationTime = 0;
this.translateX = rightDifference;
}
}
},
// 手指触摸动作被打断，如来电提醒，弹窗
onTouchcancel(e) {
if(this.disabled){
return;
}
// #ifdef APP-NVUE
this.finallySlide(e.changedTouches[0].screenX);
// #endif
// #ifndef APP-NVUE
this.finallySlide(e.changedTouches[0].clientX);
// #endif
},
// 手指触摸动作结束
onTouchend(e) {
if(this.disabled){
return;
}
// #ifdef APP-NVUE
this.finallySlide(e.changedTouches[0].screenX);
// #endif
// #ifndef APP-NVUE
this.finallySlide(e.changedTouches[0].clientX);
// #endif
},
//最终判断滑动
finallySlide(finallyX) {
//手指离开的时间
const endTime = new Date().getTime();
//手机滑动屏幕的总花费时间
const timeDifference = endTime - this.startTime;
//手指触摸总滑动距离
const distanceDifference = this.touchStartX - finallyX;
//判断最终滑动方向
if (distanceDifference > 0) {
//判断是否滑动到左边 滑动距离超过3分之一 或者 滑动时间在300毫秒并且距离在4分之一
if (Math.abs(this.translateX) > this.maxWidth / 2 || (timeDifference < 300 && distanceDifference > this.maxWidth / 4)) {
this.animationTime = 350;
this.translateX = -this.maxWidth;
} else {
this.animationTime = 350;
this.translateX = 0;
}
} else if (distanceDifference < 0) {
//判断是否滑动到右边 滑动距离超过3分之一 或者 滑动时间在300毫秒并且距离在4分之一
if (Math.abs(this.translateX) < this.maxWidth / 2 || (timeDifference < 300 && Math.abs(distanceDifference) > this.maxWidth / 4)) {
this.animationTime = 350;
this.translateX = 0;
} else {
this.animationTime = 350;
this.translateX = -this.maxWidth;
}
}
}
}
};
</script>
<style scoped>
.swipe_action_box {
overflow: hidden;
width: 750rpx;
}
.swipe_action_item {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
}
.swipe_action_content {
/* width: 750rpx; */
width: max-content;
/* #ifndef APP-NVUE */
flex-shrink: 0;
/* #endif */
}
.swipe_action_btn_box {
/* #ifndef APP-NVUE */
display: flex;
flex-shrink: 0;
/* #endif */
flex-direction: row;
visibility: hidden;
}
.mune-show{
visibility: initial;
}
.swipe_action_btn {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0 30rpx;
}
.swipe_action_btn:nth-child(1){
margin-left: 20rpx;
}
</style>

39
pages/store/cart/cart.vue
View File

@ -16,7 +16,10 @@
</view> </view>
<view class="red-tag" @click="$msg('敬请期待')">去凑单</view> <view class="red-tag" @click="$msg('敬请期待')">去凑单</view>
</view> </view>
<view v-for="(g_item, g_index) in s_item.goods" :key="g_index" class="lf-row-between">
<!-- 单个商品信息，增加滑动删除 -->
<view v-for="(g_item, g_index) in s_item.goods" :key="g_index">
<lf-swipe-action :options="options" :index="g_index" :show="show" @button="onButton($event, s_index)">
<view class="lf-row-between">
<u-checkbox-group> <u-checkbox-group>
<u-checkbox shape="circle" active-color="#15716E" @change="goodsCheckChange($event, s_index, g_index)" v-model="g_item.checked"></u-checkbox> <u-checkbox shape="circle" active-color="#15716E" @change="goodsCheckChange($event, s_index, g_index)" v-model="g_item.checked"></u-checkbox>
</u-checkbox-group> </u-checkbox-group>
@ -31,6 +34,8 @@
</view> </view>
</view> </view>
</view> </view>
</lf-swipe-action>
</view>
</view> </view>
</view> </view>
<view style="height: 60rpx;"></view> <view style="height: 60rpx;"></view>
@ -54,14 +59,30 @@
</template> </template>
<script> <script>
import lfSwipeAction from '@/components/lf-swipeAction/lf-swipeAction.vue';
export default { export default {
components: {
lfSwipeAction
},
data() { data() {
return { return {
token: '', // 用户token token: '', // 用户token
allChecked: false, // 全选 allChecked: false, // 全选
list: [], // 购物车列表 list: [], // 购物车列表
total_price: '', // 总金额 total_price: '', // 总金额
total_count: '' // 总数量
total_count: '', // 总数量
options: [{
text: '删除',
style: {
backgroundColor: '#dd524d'
}
},{
text: '取消',
style: {
backgroundColor: '#15716E'
}
}],
show: false
} }
}, },
watch: { watch: {
@ -156,6 +177,19 @@
}else{ }else{
this.$msg('您未选择需要结算的商品'); this.$msg('您未选择需要结算的商品');
} }
},
// 滑动组件，按钮被点击
onButton(event, parentIndex){
console.log("event", event, parentIndex);
if(event.buttonIndex == 0){
uni.showModal({
title: '温馨提示',
content: '确定移除该商品吗？',
success: result => {
}
})
}
} }
} }
} }
@ -217,6 +251,7 @@
// margin-bottom: 30rpx; // margin-bottom: 30rpx;
padding: 30rpx; padding: 30rpx;
margin: 30rpx auto; margin: 30rpx auto;
overflow: hidden;
&:last-child { &:last-child {
margin-bottom: 150rpx; margin-bottom: 150rpx;
} }

Write Preview
Loading…
Cancel
Save