crm-uni/pages/mine/recyclebin.vue

<template>
	<view>
		<z-paging  ref="paging" v-model="datalist" @query="queryList"  :empty-view-text="$t('Nodata')">
			<template #top>
				<uni-nav-bar leftText=" " :fixed="true" :border="false" leftIcon="back" @clickLeft="leftClick" color="#000000"
					backgroundColor="#fff" :statusBar="true" :title="$t('mine.recyclebin')"></uni-nav-bar>
			</template>
			<view class="contents" >
				<view class="colls" v-for="(item, index) in datalist" :key="index" >
					<view class="cont">
						<view class=""><text class="name">{{item.contacts}}</text><text>{{item.phone}}</text></view>
						<view class="btn"  @click="restoreFn(item)"><text> {{$t('mine.restore')}}</text></view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import { request,showToast } from '@/api/apiT.js'
	export default {
		data() {
			return {
				datalist:[]
			}
		},
		methods: {
			leftClick(){
				uni.navigateBack({})
			},
			//客户列表数据
			queryList(pageNo, pageSize) {
				var that = this;
				request({
					url:'customer/list',
					method:'get',
					data: {
						page:pageNo,
						per_page:10,
						recycle:'recycle'
					}
				}).then(res => {
					console.log(res.data)
					if(res.data.code ==0){
						var datas = res.data.data.list;
						this.$refs.paging.complete(datas);
					}else{
					} 
					uni.stopPullDownRefresh();
				})
			},
			restoreFn(item){
				var that=this
				uni.showModal({
					title: this.$t('prompt'),
					content: this.$t('restoremsg'),
					success: function (res) {
						if (res.confirm) {
							request({
								url:'customer/restore',
								method:'post',
								data: {
									id:item.id,
								}
							}).then(res => {
								uni.showToast({
									title: res.data.message,
									icon: 'none'
								});
								if(res.data.code ==0){
									setTimeout(() => {
										that.queryList(1, 10)
									}, 1000);
									
								}
							})
						} else if (res.cancel) {
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.contents{
		background-color: #FFFFFF;
		padding: 15px;
		.colls{
			
			background: #F6F6F6;
			border-radius: 10px;
			margin-bottom: 10px;
		}
		.top{
			padding: 10px 15px 0px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.name{
			font-size: 32rpx;
			font-weight: bold;
			margin-right: 10px;
		}
		.cont{
			padding: 15px 12px;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.btn{
			background: linear-gradient(to right, #3471FF, #6776FF);
			color: white;
			border-radius: 50px;
			text-align: right;
			padding: 5px 15px;
		}
	}
</style>