yd_qycpfb/jp-mobile/pages/test/mobile/TestMobileList.vue

<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content"> 测试移动表单</block>
		</cu-custom>
		<view  :style="[{top:CustomBar + 'px'}]">
		<view class="cu-bar search">
			<view class="search-form bg-white round">
				<text class="cuIcon-search"></text>
				<input type="text"  placeholder="搜索" v-model="curWord" confirm-type="search" @input="inputWord"></input>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(row, index) in dataList" :key="index"
				 @touchstart="ListTouchStart" @touchmove="ListTouchMove"  @touchend="ListTouchEnd" :data-target="'move-box-' + index">
			 		<view class="cu-bar bg-white solid-bottom">
            			<view class="action">
            				<text class="cuIcon-titles text-orange "></text># {{index + 1}}
            			</view>
            			<view class="action">
            					<button class="uni-button" size="mini"  @click="edit(row.id)" type="primary">修改</button>
            					<button class="uni-button" size="mini"  @click="del(row.id)" type="warn">删除</button>
            			</view>
            		</view>
	                <view class="cu-card dynamic no-card">
			        <view class="cu-item shadow">
				    <view class="cu-list menu-avatar comment solids-top">
					<view class="cu-item">
					<view class="content">
						<view class=" margin-top-sm  text-sm">
								<view class="flex">
								<view>	姓名:</view>
								<view class="flex-sub">
						        {{row.name}}
						  	    </view>
						  	    </view>
						</view>
						<view class=" margin-top-sm  text-sm">
								<view class="flex">
								<view>	年龄:</view>
								<view class="flex-sub">
						        {{row.age}}
						  	    </view>
						  	    </view>
						</view>
						<view class=" margin-top-sm  text-sm">
								<view class="flex">
								<view>	地区:</view>
								<view class="flex-sub">
					    	     {{ row.area && row.area.name }}
						  	    </view>
						  	    </view>
						</view>
						<view class=" margin-top-sm  text-sm">
								<view class="flex">
								<view>	公司:</view>
								<view class="flex-sub">
					    	     {{ row.company && row.company.name }}
						  	    </view>
						  	    </view>
						</view>
						<view class=" margin-top-sm  text-sm">
								<view class="flex">
								<view>	部门:</view>
								<view class="flex-sub">
					    	     {{ row.office && row.office.name }}
						  	    </view>
						  	    </view>
						</view>
						<view class=" margin-top-sm  text-sm">
								<view class="flex">
								<view>	性别:</view>
								<view class="flex-sub">
					            {{ $dictUtils.getDictLabel("sex", row.sex, '-') }}
						  	    </view>
						  	    </view>
						</view>
						<view class=" margin-top-sm  text-sm">
								<view class="flex">
								<view>	头像:</view>
								<view class="flex-sub">
                                <image  :src="row.teImage"></image>
						  	    </view>
						  	    </view>
						</view>
						<view class=" margin-top-sm  text-sm">
								<view class="flex">
								<view>	单选框:</view>
								<view class="flex-sub">
						        {{ $dictUtils.getDictLabel("yes_no", row.isSingle, '-') }}
						  	    </view>
						  	    </view>
						</view>
						<view class=" margin-top-sm  text-sm">
								<view class="flex">
								<view>	多选框:</view>
								<view class="flex-sub">
						        {{row.cks.split(",").map( (item)=> { return $dictUtils.getDictLabel("form_style", item, '-')}).join(",")  }}
						  	    </view>
						  	    </view>
						</view>
						<view class=" margin-top-sm  text-sm">
								<view class="flex">
								<view>	多行文本框:</view>
								<view class="flex-sub">
						        {{row.textArea}}
						  	    </view>
						  	    </view>
						</view>
						<view class=" margin-top-sm  text-sm">
								<view class="flex">
								<view>	数字输入框:</view>
								<view class="flex-sub">
						        {{row.textNumber}}
						  	    </view>
						  	    </view>
						</view>
						<view class=" margin-top-sm  text-sm">
								<view class="flex">
								<view>	日期选择框:</view>
								<view class="flex-sub">
						        {{row.teDate}}
						  	    </view>
						  	    </view>
						</view>
						<view class=" margin-top-sm  text-sm">
								<view class="flex">
								<view>	邮箱:</view>
								<view class="flex-sub">
						        {{row.email}}
						  	    </view>
						  	    </view>
						</view>
						<view class=" margin-top-sm  text-sm">
								<view class="flex">
								<view>	手机号:</view>
								<view class="flex-sub">
						        {{row.phone}}
						  	    </view>
						  	    </view>
						</view>
						<view class=" margin-top-sm  text-sm">
								<view class="flex">
								<view>	电话:</view>
								<view class="flex-sub">
						        {{row.tel}}
						  	    </view>
						  	    </view>
						</view>
				    </view>
				  	</view>
				  	</view>
				  	</view>
				  	</view>
				</view>
		</mescroll-body>
			<uni-fab
				:pattern=" {
							color: '#7A7E83',
							backgroundColor: '#fff',
							selectedColor: '#007AFF',
							buttonColor: '#007AFF'
						}"
				horizontal="right"
				vertical="bottom"
				@fabClick="add"
			></uni-fab>
		</view>
		</view>
</template>

<script>
  import uniFab from '@/components/uni-fab/uni-fab.vue';
  import testMobileService from '@/api/test/mobile/testMobileService'
  import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
  import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
  export default {
  	mixins: [MescrollMixin,MescrollMoreItemMixin], // 使用mixin (在main.js注册全局组件)
	onShow(option) {
		this.$auth.checkLogin()
	},
	components:{
		uniFab
	},
    data () {
      return {
        searchForm: {},
        curWord:"" ,//当前搜索关键词
        dataList: [], // 数据列表
        modalName: null,
        tablePage: {
          total: 0,
          currentPage: 1,
          pageSize: 10,
          orders: []
        },
        loading: false
      }
    },
    methods: {
	  // 新增
	  add (){
	  	uni.navigateTo({
	  	  url: '/pages/test/mobile/TestMobileForm'
	  	})
	  },
	  // 修改
	  edit (id) {
	  	uni.navigateTo({
	  	  url: '/pages/test/mobile/TestMobileForm?id='+id
	  	})
	  },
      // 删除
	  del (id) {
	  	uni.showModal({
	  		title: '提示',
	  		content: '您确认要删除数据吗',
	  		showCancel: true,
	  		success: (res) => {
	  			if (res.confirm) {
	  				testMobileService.delete(id).then(({data})=>{
	  					uni.showToast({
	  						title: data,
	  						icon:"success"
	  					})
	  					this.doSearch()
	  				})
	  			}
	  		}
	  	});
	  },
	  /*获取数据列表 */
	  upCallback(page) {
	    this.loading = true
	    testMobileService.list({
	  	  current: page.num,
	  	  size: page.size,
	  	  ...this.searchForm
	  	}).then(({data}) => {
	    let curPageData = data.records
	    this.mescroll.endBySize(curPageData.length,  data.total);
	    //如果是第一页需手动制空列表
	    if(page.num == 1) 
	  	  this.dataList = [];
	  	  //追加新数据
	  	  this.dataList=this.dataList.concat(curPageData);
	  	}).catch(e=>{
			//联网失败, 结束加载
	  	  this.mescroll.endErr();
		})
	  	
	  },
		// 输入监听
	  inputWord(e){
	    // this.curWord = e.detail.value // 已使用v-model,无需再次赋值
	    // 节流,避免输入过快多次请求
	    this.searchTimer && clearTimeout(this.searchTimer)
	    this.searchTimer = setTimeout(()=>{
	  	  this.doSearch(this.curWord)
	    },300)
	  },
	  // 搜索
	  doSearch(word){
	    this.curWord = word
	    this.dataList = []; // 先清空列表,显示加载进度
	    this.mescroll.resetUpScroll();
	  },
	  // ListTouch触摸开始
	  ListTouchStart(e) {
	    this.listTouchStart = e.touches[0].pageX
	  },
    	
	  // ListTouch计算方向
	  ListTouchMove(e) {
	    this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > -60? 'right' : 'left'
	  },
    	
	  // ListTouch计算滚动
	  ListTouchEnd(e) {
	    if (this.listTouchDirection == 'left') {
	  	  this.modalName = e.currentTarget.dataset.target
	    } else {
	  	  this.modalName = null
	    }
	    this.listTouchDirection = null
	  }
    }
  }
</script>

<style>
	.ellipsis-description {
		  font-size: 12px;
		  line-height: $line-height-base;
		  display: -webkit-box;/*作为弹性伸缩盒子模型显示*/
		  -webkit-line-clamp: 1; /*显示的行数；如果要设置2行加...则设置为2*/
		  overflow: hidden; /*超出的文本隐藏*/
		  text-overflow: ellipsis; /* 溢出用省略号*/
		   -webkit-box-orient: vertical;/*伸缩盒子的子元素排列：从上到下*/
	}
	
	.cu-bar .search-form{
		background-color: white;
	}
</style>