crm-uni/pages/index/highseas.vue

<template>
	<view class="conts">
		<z-paging  ref="paging" v-model="datalist" @query="queryList"  :empty-view-text="$t('Nodata')">	
			<template #top>
				<view class="top">
					<uni-nav-bar leftText=" " :fixed="true" :border="false" @clickLeft="leftClick" color="#fff" backgroundColor="#3471ff" :statusBar="true" :title="$t('navbar.highseas')"></uni-nav-bar>
				</view>
			</template>
			<view class="list">
				<view class="contents" v-for="(item, index) in datalist" :key="index">
					<view class="top">
						<view class=""><text :style="{color:(item.magnitude == 0 ?'#F5AB00' : item.magnitude == 1 ?'#8495B8': '#9B7200')}">{{item.magnitude_txt}}</text></view>
						<view class="right">
							<TimeCounter :total-seconds="item.deleted_at" :show-days="true"  @end="onCountdownEnd" />
						</view>
					</view>
					<u-line margin="20rpx 0px"></u-line>
					<view class="cont">
						<view class="left">
							<view class=""><text class="name">{{item.contacts}}</text></view>
							<view class="info"><text class="addr">{{item.country_name}}</text></view>
						</view>
						<view class="right">
							<view class="btnxq" @click="detailsfn(item)">{{$t('details')}}</view>
							<view class="btnld" @click="receiveClick(item)">{{$t('receiveOrder')}}</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
		<u-popup :show="showts"  :closeOnClickOverlay="false"  :round="20" mode="center">
			<view class="popupcontent">
				<view class="title">{{$t('prompt')}}</view>
				<view class="text">
					{{$t('receivemsg')}}
				</view>
			</view>
			<view class="cent">
				<view class="btn1" @click="showts = !showts">{{$t('cancel')}}</view>
				<view class="btn" @click="receivefn()">{{$t('confirm')}}</view>
			</view>
		</u-popup>
		<u-popup :show="showxq"  :round="20" mode="center" @close="showxq=false" bgColor="transparent">
			<view class="popupcontent1">
				<view class="title">{{$t('details')}}</view>
				<view class="text" v-html="html">
					
				</view>
			</view>
			<view class="upopupqx" @click="showxq=false">
				<image src="/static/image/mine/chaprop.png" mode=""></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import TimeCounter from '@/components/Countdown/time-counter.vue';
	import { request,showToast } from '@/api/apiT.js'
	export default {
		components: { TimeCounter },
		data() {
			return {
				current:0,
				options1: [],
				keyword:'',
				follow_last:'',
				follow:'',
				showxq:false,
				showts:false,
				del_id:'',
				columns:[],
				list1: [],
				datalist:[],
				html:''
			}
		},
		onLoad(e) {
			console.log(e)
		},
		onShow() {
			// this.queryList(1, 10)
			uni.setTabBarItem({
				index: 0,
				text: this.$t('tabbar.home')
			})
			uni.setTabBarItem({
				index: 1,
				text: this.$t('tabbar.highseas')
			})
			uni.setTabBarItem({
				index: 2,
				text: this.$t('tabbar.customer')
			})
			uni.setTabBarItem({
				index: 3,
				text: this.$t('tabbar.mine')
			})
		},
		methods: {
			//客户列表数据
			queryList(pageNo, pageSize) {
				var that = this;
				request({
					url:'customer/list',
					method:'get',
					data: {
						seas:'seas',
						page:pageNo,
						per_page:10,
					}
				}).then(res => {
					console.log(res.data)
					if(res.data.code ==0){
						var datas = res.data.data.list;
						this.$refs.paging.complete(datas);
					}else{
						// this.$refs.paging.complete(null);
						// that.listlength=0
					} 
					uni.stopPullDownRefresh();
				})
			},
			detailsfn(item){
				this.html = item.desc_collect
				this.showxq=true
				
			},
			receiveClick(item){
				this.del_id = item.id
				this.showts=true
			},
			receivefn(){
				this.showts=false
				request({
					url:'customer/claim',
					method:'post',
					data: {
						customer_id:this.del_id,
					}
				}).then(res => {
					uni.showToast({
						title: res.data.message,
						icon: 'none'
					});
					if(res.data.code ==0){
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/index/customer',// 替换为你要跳转的页面路径
							});
						}, 1000);
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body {
		background-color: #F6F6F6 !important;
	}
	::v-deep .u-popup__content{
		width: 85% !important;
	}
	.u-swipe-action-item {
	    margin-bottom: 10px;
	    border-radius: 10px;
	}
	.conts{
		background-image: url("/static/image/customer/bg.png");
		background-size: 100%;
		background-repeat: no-repeat;
		height: calc(100vh - 50px);
	}
	.list{
		padding: 15px;
		overflow: auto;
		// height: calc(100vh - 350rpx);
		.contents{
			background-color: #FFFFFF;
			border-radius: 10px;
			margin-bottom: 10px;
			.top{
				padding: 10px 15px 0px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.tag{
					color: white;
					border-radius: 20px 0px 0px 20px;
					padding: 3px 10px;
					margin-right: -15px;
				}
				.right{
					display: flex;
					align-items: center;
				}
			}
			.cont{
				padding: 0px 15px 10px;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.name{
					color: #222222;
					font-size: 32rpx;
					font-weight: bold;
					margin-right: 10px;
				}
				.info{
					color: #78758E;
					line-height: 26px;
				}
				.right{
					display: flex;
					align-items: center;
					.btnxq{
						background: #ECF2FF;
						color: #3471FF;
						border-radius: 20px;
						padding: 6rpx 34rpx;
						text-align: center;
						margin-right: 10px;
					}
					.btnld{
						background: linear-gradient(to right, #3471FF, #6776FF);
						color: white;
						border-radius: 20px;
						padding: 6rpx 34rpx;
						text-align: center;
					}
				}
			}
		}
	}
	.popupcontent{
		text-align: center;
		padding: 10px 40px 20px;
		.title{
			font-size: 18px;
			color: #333333;
			line-height: 60px;
		}
		.text{
			color: #666666;
			font-size: 16px;
		}
	}
	.popupcontent1{
		padding: 10px 20px 20px;
		border-radius: 10px;
		background: linear-gradient(to bottom, #B1C8FF, #ffffff);
		height: 800rpx;
		.title{
			text-align: center;
			font-size: 18px;
			color: #333333;
			line-height: 44px;
			
		}
		.text{
			color: #666666;
			font-size: 16px;
			height: 89%;
			overflow-y: scroll;
		}
	}
	.upopupqx{
		margin-top: 20px;
		text-align: center;
		image{
			width: 80rpx;
			height: 80rpx;
		}
	}
	.cent{
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0px 10px 20px;
		text-align: center;
		.btn1{
			background-color: #F6F6F6;
			border: 1px solid #F6F6F6;
			color: #333333;
			border-radius: 50px;
			width: 46%;
			margin: 10px 0px 20px;
			height: 40px;
			line-height: 40px;
		}
		.btn{
			background-color: #3471FF;
			color: white;
			border-radius: 50px;
			width: 46%;
			margin: 10px 0px 20px;
			height: 40px;
			line-height: 40px;
		}
	}
	
</style>