uniapp 微信小程序需要实现长按删除,记录一下
代码
<template>
<view class="listitem" @click="goadd(item)" @longpress="deleteInfoConfirm(item)">
<div class="listiteml">
<image src="https://images.wanjunshijie.com/mini/buildingMaterialsCloud/driver/icon_car.png" mode="">
</image>
<text>{{item.FleetName}}</text>
</div>
<div class="listitemr">
<image src="https://images.wanjunshijie.com/mini/buildingMaterialsCloud/static/icon_right.png"
mode="widthFix"></image>
</div>
</view>
</template>
<script>
import {
CarMainerReMoveFleet
} from '@/config/api.js'
export default {
components: {},
data() {
return {
CompanyId: 0,
style: {
// 字符串的形式
p: 'font-size:28rpx;',
span: 'font-size: 28rpx;',
},
show: false
}
},
props: {
item: {
type: Object,
default () {
return {};
}
}
},
computed: {
},
mounted() {
this.AccountId = JSON.parse(uni.getStorageSync('userData')).Id
},
methods: {
goadd(item) {
uni.setStorageSync('fleetManagementData', item)
uni.navigateTo({
url: '/pages/owner/fleetManagement/add/add'
})
},
deleteInfo(item) {
var that = this;
CarMainerGetFleetCars({
params: {
FleetId: item.Id,
},
custom: {
auth: true
}
}).then(res => {
if (res.Code == 200) {
that.$emit('getdata', 0)
}
}).catch(err => {
})
},
deleteInfoConfirm(item) {
var that = this;
uni.showModal({
title: '提示',
confirmText: '删除',
cancelText: '取消',
content: '确定要删除吗?',
success: function(res) {
if (res.confirm) {
console.log('用户点击确定');
that.deleteInfo(item)
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
}
}
}
</script>
<style scoped lang="scss">
.listitem {
width: 694rpx;
height: 128rpx;
background: #FFFFFF;
border-radius: 24rpx;
margin: 0 auto;
margin-bottom: 24rpx;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
.listiteml {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
text {
font-size: 30rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #151852;
}
image {
width: 56rpx;
height: 56rpx;
margin-left: 32rpx;
margin-right: 22rpx;
}
}
.listitemr {
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
margin-right: 32rpx;
align-content: flex-start;
image {
width: 32rpx;
height: 32rpx;
}
}
}
</style>