ParkApp/pages/management/product/product.vue

<template>
	<view>
		<view class="bg-white text-gray " style="padding: 20rpx 20rpx;position: fixed;top:0;width: 100%;z-index: 99999;">
			<view class="flex justify-between">
				<view class=" padding-top-10" style="font-size: 28rpx;">
					<u-icon style="margin-left: 20rpx" name="bell-fill"></u-icon>
					<text class="margin-left-10">左滑管理项目</text>
				</view>
				<view @click="add" class="sm cu-btn round base-bg-color" style="font-size: 24rpx;">
					<text class="cuIcon-add"></text>
					<text style="margin-left: 10rpx;">添加</text>
				</view>
			</view>
		</view>
		<view class="" style="height: 80rpx;"></view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<u-swipe-action :show="item.show" :vibrate-short="true" btn-width="180" style="margin: 10rpx;"   :index="index"
				v-for="(item, index) in list" :key="item.id" 
				@click="click"
				@content-click="goDetail"
				@open="open"
				:options="options">
				<view class="item">
					<view class="tag" :class="item.tagColor">
						<text>{{item.name.substr(0,1)}}</text>
					</view>
					<view class="padding-left-30 flex flex-direction">
						<text class="text-xl">{{item.name}}</text>
						<text class="text-df text-gray padding-top-20">{{item.createTime}}</text>
					</view>
				</view>
			</u-swipe-action>
		</mescroll-body>
	</view>
</template>

<script>
	import wmListAdd from '@/components/wm-list-add/wm-list-add';
	import MescrollMixin from "@/components/mescroll-body/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], 
		data() {
			return {
				options: [
					{
						text: '编辑',
						style: {
							backgroundColor: '#5064eb'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
				enterpriseId:'',
			};
		},
		 onLoad() {
			 this.enterpriseId=this.$cache.get('enterpriseId')
		 },
		 onShow() {
		 	this.$util.reload(this.mescroll)
		 },
		methods: {
			click(index, index1) {
				if(index1 == 1) {
					let id= this.list[index].id
					this.$dialog.showModal('确定要删除此项吗？').then(res=>{
						this.$api.enterpriseproject.remove(id).then(res=>{
							if (res.success==true) {
								this.$u.toast('操作成功')
								this.reload()
							}else{
								this.$u.toast(res.msg)
							}
						})
					})
				} else {
					let item=this.list[index]
					let params={
						employmentNumber:item.employmentNumber,
						enterpriseId:item.enterpriseId,
						id:item.id,
						investmentAmount:item.investmentAmount,
						investmentCompleted:item.investmentCompleted,
						investmentReturn:item.investmentReturn,
						investmentScale:item.investmentScale,
						name:item.name,
						researchCost:item.researchCost,
						researchNumber:item.researchNumber,
						taward:item.taward,
						tawardCompleted:item.tawardCompleted,
						taxes:item.taxes,
						opera:2 //编辑
					}
					uni.navigateTo({
						url:"/pages/management/product/add"+this.$u.queryParams(params)
					})
				}
			},
			goDetail(index){
				let params=this.list[index]
				//详情
				params.opera='3'
				uni.navigateTo({
					url:"/pages/management/product/add"+this.$u.queryParams(params)
				})
			},
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if(index != idx) this.list[idx].show = false;
				})
			},
			add(){
				uni.navigateTo({
					url:"/pages/management/product/add"
				})
			},
			upCallback(mescroll){
				let params={
					current:mescroll.num,
					size:mescroll.size,
					enterpriseId:this.enterpriseId
				}
				try{
					this.$api.enterpriseproject.page(params).then(res=>{
						let data=res.data.records
						data.forEach(item=>{
							item.show=false
							item.tagColor='bg-'+this.ColorList[Math.floor(Math.random()*this.ColorList.length)]
						})
						let total=res.data.total
						mescroll.endBySize(data.length,total);
						if(mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
						this.list=this.list.concat(data); //追加新数据
					})
				}catch(e){
					this.mescroll.endErr()
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.item {
		display: flex;
		padding: 30rpx;
		box-sizing: border-box;
		
		.tag{
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80rpx;
			width: 80rpx;
			font-size: 32rpx;
		}
	}
</style>