优化购物车滑动组件

master
吃肉的饺子 2022-05-21 13:29:44 +08:00
parent f492b90972
commit 7f3baf2304
5 changed files with 163 additions and 389 deletions

View File

@ -48,7 +48,7 @@
<script>
import imgTools from '@/jsFile/img/yy-img.js';
export default {
name:"img-one",
name:"choose-img-one",
props: {
//
showAmount: {

View File

@ -12,7 +12,7 @@
<!-- 商品标题 -->
<view class="fon28 bold clips1">{{item.title}}{{dataList.length}}</view>
<!-- 商品描述 -->
<view class="fon24 clips2">{{item.content}}</view>
<view class="fon24 clips2 line-h40">{{item.content}}</view>
</view>
<view class="disjbac">
<!-- 商品价格 -->
@ -228,6 +228,10 @@
<style>
.mo-item{
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 30rpx;
height: 30rpx;
border-radius: 100%;
@ -235,10 +239,6 @@
box-sizing: border-box;
}
.active-item{
position: relative;
display: flex;
justify-content: center;
align-items: center;
border: 2rpx solid #FF0000;
}
.active-item::before{
@ -262,6 +262,6 @@
.cart-foot-box{position: fixed;bottom: 0;right: 0;left: 0;background-color: #FFFFFF; padding: 20rpx 40rpx;box-shadow: -6rpx 0rpx 10rpx rgba(0, 0, 0, .3);}
.cart-submit-btn{color: #FFFFFF;background-color: #cccccc;padding: 10rpx 40rpx;border-radius: 40rpx;}
.shopping-manage{position: fixed;right: 20rpx;bottom: 340rpx;width: 80rpx;height: 80rpx; border-radius: 100%;background-color: rgba(0, 0, 0, .6);color: #FFFFFF;font-size: 24rpx;display: flex;justify-content: center;align-items: center;}
.shopping-manage{position: fixed;right: 20rpx;bottom: 320rpx;width: 80rpx;height: 80rpx; border-radius: 100%;background-color: rgba(0, 0, 0, .6);color: #FFFFFF;font-size: 24rpx;display: flex;justify-content: center;align-items: center;}
</style>

View File

@ -1,72 +1,104 @@
<template>
<view>
<view>
<view class="slide-box" v-for="(item, index) in listData" :key="index">
<view class="slide-list"
@touchstart="touchStart($event, index)"
@touchend="touchEnd($event, index)"
@touchmove="touchMove($event, index)"
@tap="recover(index)"
:style="{ transform: 'translate3d(' + item.slide_x + 'px, 0, 0)' }">
<view class="now-message-info" :style="{ width: windowWidth + 'px' }" @click="clickItemMethod(item)">
<view class="mo-item flexs"></view>
<view class="shopp-img imgH mar-zy20">
<image class="shopp-img imgH width100" :src="item.image" mode="aspectFill"></image>
<view class="slide-box mar-x20 animated" v-for="(item, index) in listData" :key="index" :class="item.ifExit ? 'fadeInUp' : 'fadeOutDown'" :style="{display: item.ifShow ? 'flex' : 'none'}">
<view class="slide-list"
@touchstart="touchStart($event, index)"
@touchend="touchEnd($event, index)"
@touchmove="touchMove($event, index)"
@tap="recover(index)"
:style="{ transform: 'translate3d(' + item.slide_x + 'px, 0, 0)' }">
<view class="now-message-info" :style="{ width: windowWidth + 'px' }" @click="clickItemMethod(item)">
<view class="mo-item flexs" @tap.stop="chooseEv(index)" :class="item.ifcheck ? 'active-item' : ''"></view>
<view class="shopp-img imgH mar-zy20" @tap.stop="chooseEv(index)">
<image class="shopp-img imgH width100" :src="item.image" mode="aspectFill"></image>
</view>
<view class="imgH disjb fc fon24 width100">
<view class="">
<view class="fon28 bold clips2">{{item.title}}</view>
<view class="clips2 line-h40">{{item.content}}</view>
</view>
<view class="imgH disjb fc fon24 pad-y20">
<view class="">
<view class="fon36 colb">标题</view>
<view class="clips2">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述</view>
<view class="disjbac">
<!-- 商品价格 -->
<view class="fon24"><span class="fon28 colf8 bold">{{$toolAll.tools.addXiaoShu(item.price)}}</span></view>
<!-- 商品数量 -->
<view class="disac">
<!-- 减数量 -->
<i class="icon icon-cut countBtn disjcac" @tap.stop="addCutEv(index,0)" :style="{backgroundColor: item.num==minNum || item.slide_x!=0 ? '#cccccc' : '#000000'}"></i>
<!-- 实际数量 -->
<input type="digit" @blur="blurEv(index,$event)" @focus="focusEv(item.num)" class="fon24 tcenter countInput" :disabled="item.slide_x!=0" v-model="item.num">
<!-- 加数量 -->
<i class="icon icon-add countBtn disjcac" @tap.stop="addCutEv(index,1)" :style="{backgroundColor: item.num==maxNum || item.slide_x!=0 ? '#cccccc' : '#000000'}"></i>
</view>
<view class="col3">{{ item.rightDetail }}</view>
</view>
</view>
<view class="group-btn">
<view class="btn-div" v-for="(value, key) in button" :key="key"
@click="clickMethod(item, value, index)" :style="{background: value.background}">
{{value.title}}
</view>
</view>
<view style="clear:both"></view>
</view>
<view class="list-item-border" v-if="border"></view>
<view class="group-btn">
<view class="btn-div" v-for="(value, key) in button" :key="key"
@tap.stop="clickMethod(item, value, index,key)" :style="{background: value.background}">
{{value.title}}
</view>
</view>
</view>
</view>
<!-- 底部导航 -->
<view class="disjbac cart-foot-box fon24">
<view>合计<span class="fon38 colf8 bold">{{allPrice}}</span></view>
<view class="fon38 cart-submit-btn" :style="{backgroundColor: !delNum ? '#cccccc' : '#FF0000'}" @tap="submitEv">{{allPrice=='0.00' ? '' : ''}}</view>
</view>
<nothing-page v-if="!ifLoading && !listData.length" content="你的购物车:这也空空,那也空空(*^▽^*)"></nothing-page>
</view>
</template>
<script>
/**
* m-slide-list 滑动操作列表
* @description 滑动操作列表组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=209
* @property {Array} list 数据源格式为[{title: 'xxx', image:'xxx', surname: 'xxx',detail:'xxx', rightDetail: 'xxx', slide_x: 0},{title: 'xxx', image:'xxx', surname: 'xxx',detail:'xxx', rightDetail: 'xxx', slide_x: 0}]
* @property {Array} button 按钮数据源格式为[{title: 'xxx', background:'xxx'},{title: 'xxx', background:'xxx'}]
* @property {Boolean} border 边框
*/
export default {
name: 'mark-slide-list',
props: {
list: { //list
type: Array,
default () {
return [];
return [
{id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
{id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
{id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
{id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
{id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
{id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
];
}
},
button: { //list
type: Array,
default () {
return [];
return [
{title: '分享',background: '#c4c7cd'},
{title: '删除',background: '#ff3b32'}
];
}
},
border: { //
type: Boolean,
default: false
}
},
computed: {
windowWidth() {
return uni.getSystemInfoSync().windowWidth;
return uni.getSystemInfoSync().windowWidth - 20;
},
//
allPrice() {
let allPrice = 0;
this.listData.forEach(item=>{
if(item.ifcheck) {
allPrice += this.$toolAll.tools.operationEv(item.price,item.num,'*',2)*1;
}
})
return this.$toolAll.tools.addXiaoShu(allPrice);
},
//
delNum() {
let delNum = 0;
this.listData.forEach(item=>{
if(item.ifcheck) {
delNum += 1;
}
})
return delNum;
}
},
data() {
@ -77,21 +109,68 @@
startX: 0,
LastX: 0,
startTime: 0,
itemIndex: 0
itemIndex: 0,
ifSelectAll:false,//
originalNum:0,//
maxNum:20,//
minNum:1,//
ifLoading:true
};
},
mounted() {
this.listData = this.clone(this.list)
},
watch: {
list: {
handler: function(val, oldval) {
this.listData = this.clone(this.list)
},
deep: true
}
this.listData = this.list;
this.ifLoading = false;
},
methods: {
//
submitEv(){
if(this.allPrice=='0.00') {
//
console.log('去购物');
} else {
//
console.log('去结算');
}
},
//
chooseEv(index) {
this.listData[index].ifcheck = !this.listData[index].ifcheck;
},
//
goDetail(id){
uni.navigateTo({
url:''
})
},
//
addCutEv(index,num) {
if(this.listData[index].slide_x==0){
if(num) {
//
if(this.listData[index].num != this.maxNum) {
this.listData[index].num++;
}
} else {
//
if(this.listData[index].num > this.minNum) {
this.listData[index].num--;
}
}
console.log(this.allPrice,'总价');
}
},
//
focusEv(num) {
//
this.originalNum = num;
},
//
blurEv(index,e) {
//
let currentNum = e.detail.value*1;
// 0 =
this.listData[index].num = currentNum ? currentNum > this.maxNum ? this.maxNum : currentNum : this.originalNum;
},
clone(data) {
const type = typeof data
let obj;
@ -194,8 +273,23 @@
* @param {Object} buttonItem 按钮数据
* @param {Object} index 列表数据key
*/
clickMethod(item, buttonItem, index) {
this.$emit("change", item, buttonItem, index)
clickMethod(item, buttonItem, index,key) {
// this.$emit("change", item, buttonItem, index);
if(key) {
//
//
this.listData[index].ifExit = false;
//
this.listData[index].ifcheck = false;
setTimeout(()=>{
//
this.listData[index].ifShow = false;
},1000)
setTimeout(()=>{
//
this.listData = this.listData.filter(item=>item.ifExit==true);
},1000)
}
},
/**
* 点击按钮触发事件
@ -212,13 +306,8 @@
.slide-box {
width: 100%;
overflow: hidden;
border-radius: 10rpx;
}
.list-item-border {
width: 100%;
border-bottom: 1px solid #f2f2f2;
}
.slide-list {
transition: all 100ms;
transition-timing-function: ease-out;
@ -264,4 +353,10 @@
.removeM {
background-color: #ff3b32;
}
.countBtn{font-size: 36rpx;width: 40rpx;height: 40rpx;background-color: #000000;color: #FFFFFF; border-radius: 10rpx;}
.countInput{background-color: #F5F5F5;width: 80rpx;border-radius: 10rpx;padding: 10rpx 0;margin: 0 10rpx;}
.cart-foot-box{position: fixed;bottom: 0;right: 0;left: 0;background-color: #FFFFFF; padding: 20rpx 40rpx;box-shadow: -6rpx 0rpx 10rpx rgba(0, 0, 0, .3);}
.cart-submit-btn{color: #FFFFFF;background-color: #cccccc;padding: 10rpx 40rpx;border-radius: 40rpx;}
.shopping-manage{position: fixed;right: 20rpx;bottom: 320rpx;width: 80rpx;height: 80rpx; border-radius: 100%;background-color: rgba(0, 0, 0, .6);color: #FFFFFF;font-size: 24rpx;display: flex;justify-content: center;align-items: center;}
</style>

View File

@ -1,272 +0,0 @@
/**
* 本模块封装了AndroidiOS的应用权限判断打开应用权限设置界面以及位置系统服务是否开启
*/
var isIos
// #ifdef APP-PLUS
isIos = (plus.os.name == "iOS")
// #endif
// 判断推送权限是否开启
function judgeIosPermissionPush() {
var result = false;
var UIApplication = plus.ios.import("UIApplication");
var app = UIApplication.sharedApplication();
var enabledTypes = 0;
if (app.currentUserNotificationSettings) {
var settings = app.currentUserNotificationSettings();
enabledTypes = settings.plusGetAttribute("types");
console.log("enabledTypes1:" + enabledTypes);
if (enabledTypes == 0) {
console.log("推送权限没有开启");
} else {
result = true;
console.log("已经开启推送功能!")
}
plus.ios.deleteObject(settings);
} else {
enabledTypes = app.enabledRemoteNotificationTypes();
if (enabledTypes == 0) {
console.log("推送权限没有开启!");
} else {
result = true;
console.log("已经开启推送功能!")
}
console.log("enabledTypes2:" + enabledTypes);
}
plus.ios.deleteObject(app);
plus.ios.deleteObject(UIApplication);
return result;
}
// 判断定位权限是否开启
function judgeIosPermissionLocation() {
var result = false;
var cllocationManger = plus.ios.import("CLLocationManager");
var status = cllocationManger.authorizationStatus();
result = (status != 2)
console.log("定位权限开启:" + result);
// 以下代码判断了手机设备的定位是否关闭,推荐另行使用方法 checkSystemEnableLocation
/* var enable = cllocationManger.locationServicesEnabled();
var status = cllocationManger.authorizationStatus();
console.log("enable:" + enable);
console.log("status:" + status);
if (enable && status != 2) {
result = true;
console.log("手机定位服务已开启且已授予定位权限");
} else {
console.log("手机系统的定位没有打开或未给予定位权限");
} */
plus.ios.deleteObject(cllocationManger);
return result;
}
// 判断麦克风权限是否开启
function judgeIosPermissionRecord() {
var result = false;
var avaudiosession = plus.ios.import("AVAudioSession");
var avaudio = avaudiosession.sharedInstance();
var permissionStatus = avaudio.recordPermission();
console.log("permissionStatus:" + permissionStatus);
if (permissionStatus == 1684369017 || permissionStatus == 1970168948) {
console.log("麦克风权限没有开启");
} else {
result = true;
console.log("麦克风权限已经开启");
}
plus.ios.deleteObject(avaudiosession);
return result;
}
// 判断相机权限是否开启
function judgeIosPermissionCamera() {
var result = false;
var AVCaptureDevice = plus.ios.import("AVCaptureDevice");
var authStatus = AVCaptureDevice.authorizationStatusForMediaType('vide');
console.log("authStatus:" + authStatus);
if (authStatus == 3) {
result = true;
console.log("相机权限已经开启");
} else {
console.log("相机权限没有开启");
}
plus.ios.deleteObject(AVCaptureDevice);
return result;
}
// 判断相册权限是否开启
function judgeIosPermissionPhotoLibrary() {
var result = false;
var PHPhotoLibrary = plus.ios.import("PHPhotoLibrary");
var authStatus = PHPhotoLibrary.authorizationStatus();
console.log("authStatus:" + authStatus);
if (authStatus == 3) {
result = true;
console.log("相册权限已经开启");
} else {
console.log("相册权限没有开启");
}
plus.ios.deleteObject(PHPhotoLibrary);
return result;
}
// 判断通讯录权限是否开启
function judgeIosPermissionContact() {
var result = false;
var CNContactStore = plus.ios.import("CNContactStore");
var cnAuthStatus = CNContactStore.authorizationStatusForEntityType(0);
if (cnAuthStatus == 3) {
result = true;
console.log("通讯录权限已经开启");
} else {
console.log("通讯录权限没有开启");
}
plus.ios.deleteObject(CNContactStore);
return result;
}
// 判断日历权限是否开启
function judgeIosPermissionCalendar() {
var result = false;
var EKEventStore = plus.ios.import("EKEventStore");
var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(0);
if (ekAuthStatus == 3) {
result = true;
console.log("日历权限已经开启");
} else {
console.log("日历权限没有开启");
}
plus.ios.deleteObject(EKEventStore);
return result;
}
// 判断备忘录权限是否开启
function judgeIosPermissionMemo() {
var result = false;
var EKEventStore = plus.ios.import("EKEventStore");
var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(1);
if (ekAuthStatus == 3) {
result = true;
console.log("备忘录权限已经开启");
} else {
console.log("备忘录权限没有开启");
}
plus.ios.deleteObject(EKEventStore);
return result;
}
// Android权限查询
function requestAndroidPermission(permissionID) {
return new Promise((resolve, reject) => {
plus.android.requestPermissions(
[permissionID], // 理论上支持多个权限同时查询,但实际上本函数封装只处理了一个权限的情况。有需要的可自行扩展封装
function(resultObj) {
var result = 0;
for (var i = 0; i < resultObj.granted.length; i++) {
var grantedPermission = resultObj.granted[i];
console.log('已获取的权限:' + grantedPermission);
result = 1
}
for (var i = 0; i < resultObj.deniedPresent.length; i++) {
var deniedPresentPermission = resultObj.deniedPresent[i];
console.log('拒绝本次申请的权限:' + deniedPresentPermission);
result = 0
}
for (var i = 0; i < resultObj.deniedAlways.length; i++) {
var deniedAlwaysPermission = resultObj.deniedAlways[i];
console.log('永久拒绝申请的权限:' + deniedAlwaysPermission);
result = -1
}
resolve(result);
// 若所需权限被拒绝,则打开APP设置界面,可以在APP设置界面打开相应权限
// if (result != 1) {
// gotoAppPermissionSetting()
// }
},
function(error) {
console.log('申请权限错误:' + error.code + " = " + error.message);
resolve({
code: error.code,
message: error.message
});
}
);
});
}
// 使用一个方法,根据参数判断权限
function judgeIosPermission(permissionID) {
if (permissionID == "location") {
return judgeIosPermissionLocation()
} else if (permissionID == "camera") {
return judgeIosPermissionCamera()
} else if (permissionID == "photoLibrary") {
return judgeIosPermissionPhotoLibrary()
} else if (permissionID == "record") {
return judgeIosPermissionRecord()
} else if (permissionID == "push") {
return judgeIosPermissionPush()
} else if (permissionID == "contact") {
return judgeIosPermissionContact()
} else if (permissionID == "calendar") {
return judgeIosPermissionCalendar()
} else if (permissionID == "memo") {
return judgeIosPermissionMemo()
}
return false;
}
// 跳转到**应用**的权限页面
function gotoAppPermissionSetting() {
if (isIos) {
var UIApplication = plus.ios.import("UIApplication");
var application2 = UIApplication.sharedApplication();
var NSURL2 = plus.ios.import("NSURL");
// var setting2 = NSURL2.URLWithString("prefs:root=LOCATION_SERVICES");
var setting2 = NSURL2.URLWithString("app-settings:");
application2.openURL(setting2);
plus.ios.deleteObject(setting2);
plus.ios.deleteObject(NSURL2);
plus.ios.deleteObject(application2);
} else {
// console.log(plus.device.vendor);
var Intent = plus.android.importClass("android.content.Intent");
var Settings = plus.android.importClass("android.provider.Settings");
var Uri = plus.android.importClass("android.net.Uri");
var mainActivity = plus.android.runtimeMainActivity();
var intent = new Intent();
intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
var uri = Uri.fromParts("package", mainActivity.getPackageName(), null);
intent.setData(uri);
mainActivity.startActivity(intent);
}
}
// 检查系统的设备服务是否开启
// var checkSystemEnableLocation = async function () {
function checkSystemEnableLocation() {
if (isIos) {
var result = false;
var cllocationManger = plus.ios.import("CLLocationManager");
var result = cllocationManger.locationServicesEnabled();
console.log("系统定位开启:" + result);
plus.ios.deleteObject(cllocationManger);
return result;
} else {
var context = plus.android.importClass("android.content.Context");
var locationManager = plus.android.importClass("android.location.LocationManager");
var main = plus.android.runtimeMainActivity();
var mainSvr = main.getSystemService(context.LOCATION_SERVICE);
var result = mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER);
console.log("系统定位开启:" + result);
return result
}
}
module.exports = {
judgeIosPermission: judgeIosPermission,
requestAndroidPermission: requestAndroidPermission,
checkSystemEnableLocation: checkSystemEnableLocation,
gotoAppPermissionSetting: gotoAppPermissionSetting
}

View File

@ -2,7 +2,7 @@
<view>
<status-container titlet="购物车">
<view slot="content">
<cart-slide :list="list" :button="buttonList" :border="true" @click="clickMethod" @change="changeMethod"></cart-slide>
<cart-slide></cart-slide>
</view>
</status-container>
</view>
@ -15,58 +15,9 @@
cartSlide
},
data() {
return {
list : [
{
id: 1,
image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
title: '张三',
rightDetail: '2019-03-18',
detail: 'XXXXXXXXXXXXXXXXXXX公司',
slide_x: 0
},
{
id: 2,
surname: '李',
title: '李二',
rightDetail: '2019-03-17',
detail: 'XXXXXXXXXXXXXXXXXXX公司',
slide_x: 0
},
{
id: 3,
title: '王五',
rightDetail: '2019-03-18',
slide_x: 0
},
{
id: 4,
surname: '李',
detail: 'XXXXXXXXXXXXXXXXXXX公司',
slide_x: 0
}
],
buttonList: [
{
title: '分享',
background: '#c4c7cd'
},
{
title: '删除',
background: '#ff3b32'
}
]
}
return {}
},
methods: {
changeMethod(data, button, index){
console.log('滑动按钮回调', data)
console.log('滑动按钮回调', button)
},
clickMethod(data){
console.log('点击行回调', data)
}
}
methods: {}
}
</script>