cberpapp/pages/snap/cloudSnaplist.vue

<template>
	<view>
		<view class="">
			 
			
			<scroll-view scroll-x class="bg-white nav text-center solid-bottom">
				<view class="cu-item" :class="index==TabCur?'text-orange cur':''" 
				v-for="(item,index) in topTab" :key="index" @tap="tabSelect" :data-id="index">
					{{ item }}
				</view>
			</scroll-view>
			<view class="cu-bar search bg-white ">
				<view class="action" @tap="showModal" data-target="RadioModal">
					<text class="padding-r">{{ selectman }}</text>
					<text class="cuIcon-triangledownfill"></text>
				</view>
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input @focus="InputFocus" @blur="InputBlur" @input='inputSerach' 
					@confirm = 'Inputconfirm'
					:adjust-position="false" type="text" 
					placeholder="按客户搜索" confirm-type="search"></input>
				</view>
			</view>
			
			<view class="cu-modal" :class="modalName=='RadioModal'?'show':''" @tap="hideModal">
				<view class="cu-dialog" @tap.stop="">
					<radio-group class="block" @change="RadioChange">
						<view class="cu-list menu text-left">
							<view class="cu-item" v-for="(item,index) in salesman" :key="index">
								<label class="flex justify-between align-center flex-sub">
									<view class="flex-sub">{{ item.username }}</view>
									<radio class="round" :class="radio=='radio' + index?'checked':''" 
									:checked="radio=='radio' + index?true:false"
									 :value="'' + index"></radio>
								</label>
							</view>
						</view>
					</radio-group>
				</view>
			</view>
			
		</view>
	
		<view class="middle-line-x"></view>
		
		
		
		<view class="cu-bar bg-white  solid-bottom">
			<view class="action">
				<text class="cuIcon-title text-orange"></text> 拍照列表
			</view>
		</view>
		
		<view class="cu-list menu text-left ">
			<view class="cu-item text-grey"  v-for="(item,index) in list" :key="index">
				<view class="content text-cut " @click="ViewImage(item.url)">
					<!-- <text class="cuIcon-title text-grey"></text> -->
					<text class="text-sm text-black text-bold">{{  item.author  }}</text>
					<text class="text-grey padding-l text-sm">{{  item.custname  }}</text>
				</view>
				<view class="action">
					<text class="cu-tag sm padding-l">{{  item.photoclass  }}</text>
					<text class="cu-tag sm padding-l">{{  item.photolabels  }}</text>
					<text class="cu-tag sm padding-l">{{  item.update  }}</text>
				</view>
			</view>
		</view>
		
		
	<!-- 	<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog">@tap="showModal(item.id)" data-target="Modal"
				<view class="cu-bar bg-white justify-end">
					<view class="content">Modal标题</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					Modal 内容。
				</view>
			</view>
		</view> -->
		
		
		
	<!-- 	<unicloud-db v-slot:default="{data, loading, error, options}" 
		collection="cb-markImages" field="author,custname,update" :getone="false" 
		where="">
		  <view>
		    {{ data}}
		  </view>
		</unicloud-db> -->
		
		
	</view>
</template>

<script>
	import moment from 'moment'
	export default {
		data() {
			return {
				user:'',
				salesman:'',
				selectman:'业务员',
				topTab:['本周','本月','今年','所有'],
				
				TabCur: 0,
				list:'',
				imgList:[],
				
				modalName: null,
				radio: '0',
				
				searchParam:{},
			}
		},
		onLoad() {
			this.getlist()
			this.getUser()
			this.GetSalesmanlist()
		},
		onPullDownRefresh() {
			this.getlist()
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			getUser(){
				try{
					this.user = uni.getStorageSync('userinfo')
					console.log(this.user);
				}catch(e){
					//TODO handle the exception
				}
			},
			getlist(search={ }){
				// promise方式  联表查询
				uniCloud.callFunction({
				    name: 'cbImages',
				    data: { type: 2,...search }
				  })
				  .then(res => {
					  this.list = res.result.data
					  // console.log(res.result.data)
					  console.log('联表查询',this.list)
					  this.imgList = res.result.data.map(item=>{
						  return item.url
					  })
					  
				  });
			},
			// 获取业务员
			GetSalesmanlist(){
				var param = {
					interface: "PhotoRecord/GetSalesmanlist",
					work:this.user.work,
				}
				console.log('业务员请求',this.reparam(param));
				this.$webSockRe(this.reparam(param),3000).then(res=>{
					this.salesman = res.data.data
					console.log('业务员列表',res.data.data);
				})
			},
			ViewImage(e) {
				console.log('图片路径',e);
				uni.previewImage({
					urls: this.imgList,
					current: e
				});
			},
			
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				console.log(this.TabCur);
				var key = ''
				switch (this.TabCur) {
					case 0:
					key = 'week';
					break;
					case 1:
					key = 'month';
					break;
					case 2:
					key = 'year';
					break;
					case 3:
					key = 'year';
					break;
				}
				var value = moment().startOf(key).format('YYYY-MM-DD HH:mm:ss');
				console.log( value );
				this.searchParam.type = 5
				this.searchParam.time = value
				this.getlist(this.searchParam)
			},
			
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
				console.log(this.modalName)
			},
			hideModal(e) {
				this.modalName = null
			},
			RadioChange(e) {
				this.modalName = null
				this.radio = e.detail.value
				this.selectman = this.salesman[this.radio].username
				console.log('选择的RADIO',this.radio,this.selectman);
				
				// 执行搜索
				this.searchParam.type = 3
				this.searchParam.key = 'author'
				this.searchParam.val = this.selectman
				this.getlist(this.searchParam)
				
			},
			InputFocus(e){ //聚焦
				console.log(e);
			},
			InputBlur(e){//失焦
				console.log(e);
			},
			inputSerach(e){
				// console.log(e.detail.value);
			},
			Inputconfirm(e){
				this.searchParam.type = 4
				this.searchParam.key = 'author'
				this.searchParam.val = e.detail.value
				console.log(e.detail.value);
			}
		}
	}
</script>

<style>
.cu-item{
	min-height: 82rpx !important;
}
</style>