jingheng_H5/newOtherPages/myService/myService.vue

<template>
	<view class="my-service">
		<view class="scarch bg-color-white">
			<view class="input_box">
			  <text :style="{color:t('color1')||'#efbd6f'}" class="iconfont icon-search"></text>	
			  <input placeholder="店铺搜索" type="text" style="padding-left: 10rpx;margin-right: 30rpx;"  v-model="searchVlaue" @confirm="search" />
			  <text v-if="searchVlaue" style="color: #fff;font-size: 24rpx;padding: 10rpx;" class="iconfont icon-shanchu1" @click="clear"></text>
			</view>
		</view>
		<view  style="width: 100%;height: 100rpx;"></view>
		<view class="service-content-bx">
			<block v-for="(item, idx) in myServiceList" :key="idx">
				<view class="service-content flex flex-colum j-around bg-color-white border-rius-5">
					<view class="content-t flex flex-colum">
						<view class="content-til font-w">{{item.name}}</view>
						<view class="flex fs12 al-item-center" style="padding-top: 20rpx;">
							<text class="iconfont icon-31shijian" :style="{color:t('color1')||'#efbd6f'}"></text>
							<text class="color-gray" style="padding-left: 10rpx;">服务时间：{{item.date ||'无'}}</text>
						</view>
					</view>
					<button class="service-btn flex al-item-center j-center color-white border-rius-5"  type="" :style="{backgroundColor:t('color1')||'#efbd6f'}" @tap="callUp(item.tel)">
						 <text class="iconfont icon-31dianhua" style="font-size: 40rpx;padding-right: 10rpx;"></text>
						 联系客服：{{item.tel ||'无'}}
					</button>
				</view>
			</block>
		</view>
		<loading v-if="loading"></loading>
		<nomore v-if="!isData"></nomore>
		<nodata v-if="isDisk"></nodata>
		<!-- 悬浮按钮 -->
		<drag-button></drag-button>
	</view>
</template>

<script>
	var app = getApp()
	export default {
		data() {
			
			return {
				myServiceList: [],
				pages: 1,
				searchVlaue: '',
				loading:false,
				isData: true,
				isDisk: false,
				cid: '',
				field: 'juli',
				order: 'asc',
				longitude: '',
				latitude: '',
			}
		},
		onLoad() {
		this.getServiceData()
		},
		onReachBottom() {
			if(this.isData) {
				this.getServiceData()
			}
		},
		methods: {
			// 搜索
			search() {
				this.myServiceList = []
				this.pages = 1
				this.getServiceData()
				setTimeout(() => {
					if(this.myServiceList.length == 0) {
						this.isData = true
						this.isDisk = true
					}else {
						this.isData = true
						this.isDisk = false
					}
				}, 200)
			},
			clear() {
				if(this.myServiceList.length > 0) {
					this.searchVlaue = ''
					this.isDisk = false
				}else {
					this.isDisk = false
					this.myServiceList = []
					this.pages = 1
					this.searchVlaue = ''
					this.getServiceData()
				}

			},
			// 拨打号码
			callUp(phone) {
				if(phone == '') {
					uni.showModal({
						title: '提示',
						content: '拨打的号码不能为空',
						showCancel: false,
					})
					return
				}
				uni.makePhoneCall({
					phoneNumber: phone 
				});
			},

			getServiceData() {
				this.loading = true
				app.post('ApiBusiness/blist',{
					pagenum: this.pages,
					cid: this.cid,
					field: this.field,
					order: this.order,
					longitude: this.longitude,
					latitude: this.latitude,
					keyword: this.searchVlaue
				}, res => {
					this.loading = false
					console.log(res, 'ddhhdhdhdhhd')
					if(res.data.length > 0) {
						this.myServiceList = [...this.myServiceList, ...res.data]
						this.pages++
					}else {
						this.isData = false
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.flex {display: flex;}
	.flex1 {flex: 1;}
	.j-center {justify-content: center;}
	.j-between {justify-content: space-between;}
	.j-around {justify-content: space-around;}
	.j-evenly {justify-content: space-evenly;}
	.flex-colum{flex-direction: column;}
	.flex-w{flex-wrap: wrap;}
	.al-item-center {align-items: center;}
	.font-w {font-weight: bold;}
	.fs12 {font-size: 24rpx;}
	.color-gray {color: #999;}
	.color-white{color: #fff;}
	.bg-color-white {background-color: #fff;}
	.border-rius-r {border-radius: 800rpx;}
	.border-rius-5 {border-radius: 10rpx;}
	.border-rius-10 {border-radius: 20rpx;}
	.overflow-hd {overflow: hidden;}
	.text-overflow-tx {text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
	.text-overflow-line { display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;word-wrap: break-word;word-break: break-all;}
	
	.my-service {
		
		.scarch {
			width: 100%;
			padding: 10rpx 20rpx 30rpx;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 3;
			
			.input_box{
				display: flex;
				height: 60rpx;
				display: flex;
				align-items: center;
				background-color: #eeeeee;
				padding: 0 20rpx;
				border-radius: 60rpx;
				
				.iconfont{
					font-size: 40rpx;
				}
				input{
					flex: 1;
				}
			
			}
		}
		.service-content-bx {
			padding: 0 20rpx 20rpx;
			
			.service-content {
				width: 100%;
				height: 260rpx;
				padding: 0 30rpx;
				margin-top: 30rpx;
				
				.content-t {
					
				}
				.content-til {
					
				}
				
				.service-btn {
					width: 100%;
					height: 66rpx;
					line-height: 66rpx;
				}
			}
		}
	}
</style>