detection-user/pages/detection/my-reservation.vue
2024-09-01 18:16:43 +08:00

467 lines
8.2 KiB
Vue

<template>
<view class="content">
<view class="c-top">
<view class="" @click="getback()">
<uni-icons type="left" size="18"></uni-icons>
</view>
</view>
<view class="dil">
<view class="bjimg" v-if="listarr == ''">
<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
</view>
<view class="d-box" v-for="(item,index) in arrlist" :key="index" @click="goDetails(item.id)">
<view class="box-top">
<view class="top-tile">
<view class="">
<view class="da">{{item.goodsTitle||""}}</view>
<!-- <view class="dda">{{item.siteAddress}}</view> -->
<!-- <view class="huang">{{item.averageScore}} <uni-icons type="star-filled" color= "#FF9600" size="14"></uni-icons></view> -->
</view>
<view class="dix">
<view class="sanyuan">
<view class="xhui">预约时间:</view>
<view class="dda">{{item.appointmentDay||""}}</view>
</view>
<view class="sanyuan">
<view class="xhui">预约人:</view>
<view class="dda">{{item.buyName||""}}</view>
</view>
<view class="sanyuan">
<view class="xhui">预约电话:</view>
<view class="dda">{{item.otherPhone||""}}</view>
</view>
<view class="sanyuan">
<view class="xhui">车主电话:</view>
<view class="dda">{{item.buyPhoneNum||""}}</view>
</view>
<view class="sanyuan">
<view class="xhui">品牌型号:</view>
<view class="dda">{{item.carModel||""}}</view>
</view>
<view class="sanyuan">
<view class="xhui">车辆号码:</view>
<view class="dda">{{item.carNo||""}}</view>
</view>
<view class="sanyuan">
<view class="xhui">车辆性质:</view>
<view class="dda">{{item.carNature||""}}</view>
</view>
<view class="sanyuan">
<view class="xhui">备注:</view>
<view class="dda">{{item.remark||""}}</view>
</view>
</view>
</view>
<!-- <view class="" @click="fang(item.latitude,item.longitude)">
<view class="top-anniu">
<uni-icons type="paperplane-filled" color="#ffffff" size="24"></uni-icons>
</view>
<view v-if="item.distance >=1000" class="ddaa">{{(item.distance/1000).toFixed(2)}} <text
class="xhei">km</text> </view>
</view> -->
</view>
<scroll-view scroll-x="true" class="box-bottom">
<view class="santu" v-for="(items,index) in item.goodsList" :key="index">
<view class="simg">
<image :src=" baseUrl + items.goodsImage" mode=""></image>
</view>
<view class="ming">{{items.goodsTitle}}</view>
<view class="jus">{{items.price / 100}}</view>
</view>
</scroll-view>
</view>
</view>
</view>
</template>
<script>
import request from '../../utils/request'
import config from '@/config'
export default {
data() {
return {
arrlist: []
}
},
onReachBottom() {
// if (this.listarr.length >= this.totalPages) {
// uni.showToast({
// title: '没有下一页数据',
// icon: 'none'
// })
// } else {
// this.pageNum++
// }
},
onShow() {
this.baseUrl = this.$baseUrl
this.getAppointmentOwn()
},
methods: {
async getAppointmentOwn() {
let res = await request({
url: '/inspection/appointment/getAppointmentOwn',
method: 'get',
})
this.arrlist = res.data
console.log(res);
},
goDetails(id) {
uni.navigateTo({
url: '/pages/detection/reser-details?id=' + id
})
},
gomerchant(id) {
uni.navigateTo({
url: '/pages/detection/MerchantDetails?id=' + id
})
},
getback() {
uni.navigateBack()
},
sousuo() {
that.listarr = []
this.getlist()
},
}
}
</script>
<style scoped lang="scss">
.content {
width: 100%;
height: calc(100vh);
background-color: #F6F6F6;
box-sizing: border-box;
// padding-top: 45px;
}
.dil {
box-sizing: border-box;
background-color: #F6F6F6;
padding: 0px 12px;
}
.lan {
color: #0D2E8D;
}
.dis {
display: flex;
align-items: center;
}
.dix {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.d-box {
background: #FFFFFF;
border-radius: 8px;
padding: 10px;
margin-top: 10px;
}
.box-top {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.touxiang {
width: 70px;
height: 70px;
border-radius: 8px;
box-sizing: border-box;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
.bjimg {
width: 255px;
height: 236px;
margin: 0px auto;
margin-top: 100px;
image {
width: 100%;
height: 100%;
}
}
.top-tile {
width: 80%;
margin-left: 15px;
}
.da {
font-size: 20px;
font-weight: bold;
color: #333333;
}
.huang {
margin-left: 20px;
color: #FF9600;
font-size: 14px;
}
.top-anniu {
width: 35px;
height: 35px;
background: #0D2E8D;
border-radius: 50%;
display: flex;
font-size: 14px;
justify-content: center;
align-items: center;
color: white;
margin: 0 auto;
}
.box-cont {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 15px;
}
.sanyuan {
margin-top: 5px;
text-align: center;
display: flex;
align-items: center;
}
.dda {
font-size: 16px;
font-weight: 500;
color: #333333;
margin-right: 10px;
}
.ddaa {
font-size: 12px;
font-weight: 500;
}
.xhui {
font-size: 16px;
font-weight: 400;
color: #999999;
margin-right: 5px;
}
.xbox {
width: 100%;
display: flex;
}
.xhei {
font-size: 14px;
font-weight: 400;
color: #333333;
margin-left: 5px;
}
.box-bottom {
width: 100%;
box-sizing: border-box;
white-space: nowrap;
// display: flex;
// justify-content: space-between;
// align-items: center;
}
.santu {
width: 32%;
display: inline-block;
// width: 100px;
margin-top: 15px;
margin-right: 10px;
}
.simg {
width: 100%;
height: 80px;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
.ming {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 15px;
font-weight: 400;
color: #333333;
margin: 0px auto;
}
.jus {
font-size: 15px;
font-weight: bold;
color: #FF571A;
}
.c-top {
width: 100%;
box-sizing: border-box;
padding: 15px;
padding-top: 22%;
display: flex;
justify-content: space-between;
align-items: center;
background-color: white;
}
.c-t-input {
width: 80%;
background-color: #F0F0F0;
color: #BCBCBC;
height: 40px;
border-radius: 50px;
display: flex;
align-items: center;
padding: 0px 10px;
box-sizing: border-box;
}
.c-title {
font-size: 18px;
font-weight: bold
}
.top-list {
width: 100%;
height: 88rpx;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: space-between;
}
.list-box {
height: 100%;
width: 33%;
display: flex;
align-items: center;
justify-content: center;
}
/* 遮罩 */
.xuanx {
position: fixed;
top: 260rpx;
width: 100%;
height: calc(100vh);
background: rgba(0, 0, 0, 0.2)
}
.nbian {
padding-top: 45px;
}
.x-xiang {
width: 100%;
background: white;
box-sizing: border-box;
padding: 30rpx;
display: flex;
flex-wrap: wrap;
}
.x-ing {
width: 100%;
background: white;
box-sizing: border-box;
padding: 30rpx;
}
.ann {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
background: #F2F6FF;
border-radius: 24rpx;
padding: 10rpx 30rpx;
color: #666666;
font-size: 28rpx;
margin-right: 20rpx;
margin-bottom: 30rpx;
}
.ax {
font-size: 28rpx;
background: #0D2E8D;
color: white !important;
}
.xsanniu {
border-top: 1px solid #EEEEEE;
background: white;
box-sizing: border-box;
padding: 30rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.wc {
width: 436rpx;
height: 80rpx;
background: #0D2E8D;
border-radius: 40rpx;
display: flex;
align-items: center;
color: white;
font-size: 32rpx;
justify-content: center;
}
.fanhu {
width: 224rpx;
height: 80rpx;
background: #FFFFFF;
border-radius: 40rpx 40rpx 40rpx 40rpx;
opacity: 1;
border: 2rpx solid #0D2E8D;
display: flex;
align-items: center;
color: #0D2E8D;
justify-content: center;
}
</style>