carrent-front/pages/reservation/index.vue

<template>
	<view>
		<u-sticky bgColor="#ffffff">
			<u-tabs :list="navList" :current="current" lineColor="#669A32" :activeStyle="{
				color: '#669A32',
				transform: 'scale(1.05)'
			}" :scrollable="true" itemStyle="padding-left: 20rpx; padding-right: 20rpx;font-size:22rpx; height: 80rpx;"
				@click="tabClick"></u-tabs>
		</u-sticky>
		<view class="se-p-40">
			<view v-if="list.length>0">
				<view class="se-px-40 se-mb-30 se-py-30 se-bgc-white se-br-40 se-bs-b" v-for="(items,indexs) in list"
					:key="indexs">
					<view class="se-flex se-flex-h-sb se-fw-6 se-fs-32 se-pb-20">
						<view class="se-flex">
							<text>{{items.carrentGoods.goodsName}}</text>
						</view>
						<view class="se-c-green se-fw-4">
							已预约
						</view>
					</view>
					<view class="se-flex">
						<view class="se-w-160 se-h-160">
							<image class="se-w-160 se-h-160 se-bgc-f5 se-br-10" :src="items.carrentGoods.images[0]" mode=""></image>
						</view>
						<view class="se-ml-20 se-flex se-flex-v-sa se-flex-ai-fs">
							<view class="se-fw-6 se-c-black se-fs-30 se-display-ib">客户名称：{{items.name}}</view>
							<view class="se-fs-24 se-c-text-third se-display-ib">电话：{{items.phone}}</view>
							<view class="se-fs-24 se-c-text-third se-display-ib">地址：{{items.area}}</view>
						</view>
					</view>
					<view class="se-flex se-flex-h-sb se-w-p-100 se-pt-20">
						<view class="se-fs-24 se-display-ib"></view>
						<view @click="onCustomerService(items.phone)"
							class="se-display-ib se-px-20 se-br-40 se-flex-h-c se-h-50 se-lh-50 se-bgc-green se-ta-c se-fs-24 se-fs-24 se-c-white se-b">
							<text>电话联系</text>
						</view>
					</view>
				</view>
			</view>
			<view v-else>
				<u-empty mode="list" ></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import { queryOrderList,queryCategoryList } from "@/common/api.js"
	export default{
		data(){
			return{
				navList:[],
				current:0,
				typeId:null,
				pageNo:1,
				pageSize:10,
				list:[]
			}
		},
		onLoad(options) {
			this.onPageList()
			this.onQueryTypeList()
		},
		onPullDownRefresh() {
			let that = this
			that.pageNo =  1
			that.list = []
			that.onPageList()
		},
		onReachBottom() {
			let that = this
			that.pageNo = that.pageNo + 1
			that.onPageList()
		},
		methods:{
			onQueryTypeList(){
				queryCategoryList({}).then(response=>{
					console.info("queryCategoryList",response)
					let arr=[
						{
							name:"全部",
							id:null,
						}
					];
					this.navList = arr.concat(response.result)
				}).catch(error=>{
					
				})
			},
			tabClick(event){
				let that = this
				that.pageNo =  1
				that.typeId = event.id;
				that.list = []
				that.onPageList()
			},
			onPageList(){
				let that = this
				let params={
					typeId:that.typeId,
					pageNo:that.pageNo,
					pageSize:that.pageSize
				}
				queryOrderList(params).then(response=>{
					console.info("queryOrderList",response)
					response.result.records.forEach((items,indexs)=>{
						if(items.carrentGoods){
							if(items.carrentGoods.image){
								items.carrentGoods.images = items.carrentGoods.image.split(',')
							}else{
								items.carrentGoods.images = []
							}
						}
					})
					that.list = that.list.concat(response.result.records)
				}).catch(error=>{
					
				})
			},
			onCustomerService(phone){
				let that = this
				if (uni.canIUse('makePhoneCall')) {
					uni.makePhoneCall({
					  phoneNumber: String(phone),
					  success: function () {
						console.log('拨打电话成功');
					  },
					  fail: function () {
						console.log('拨打电话失败');
					  }
					});
				} else {
					console.log('你的设备不支持拨打电话功能');
				}
				
			}
		}
	}
</script>

<style>
</style>