<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>