290 lines
6.2 KiB
Vue
Raw Normal View History

2023-08-22 16:01:58 +08:00
<template>
<view>
<u-sticky bgColor="#0122C7" style="width: 100vw">
<u-tabs :list="tabLists" @change="sectionChange" lineColor="#fff" :scrollable="false" lineWidth="40"
inactiveStyle="color:#fff" activeStyle="color:#fff"></u-tabs>
</u-sticky>
<view class="serch">
2023-08-23 11:35:09 +08:00
<u-search placeholder="输入车牌号进行搜索" :show-action="true" bg-color="white" v-model="keywords"></u-search>
2023-08-22 16:01:58 +08:00
</view>
<view v-if="curNow==0" class="personnel_list">
2023-08-23 11:35:09 +08:00
<view v-if="dataList.length">
<view class="cards" v-for="item,index in dataList" :key="index">
<view class="cards_head">
<text>XSDSDSD</text>
</view>
<view class="cards_content">
<view class="right">
<view class="li">
<text>车牌号: </text>
<text> { item.name }</text>
</view>
<view class="li">
<text>行驶总里程: </text>
<text>{ item.phone }</text>
<view style="float: right;">
<u-checkbox-group v-model="checked">
<u-checkbox active-color="#0122C7" :label="item" :name="item" shape="square"
label=""></u-checkbox>
</u-checkbox-group>
2023-08-22 16:01:58 +08:00
2023-08-23 11:35:09 +08:00
</view>
</view>
<view class="li">
<text>本公司签约时间: </text>
<text> 所属片区 </text>
2023-08-22 16:01:58 +08:00
</view>
</view>
2023-08-23 11:35:09 +08:00
</view>
</view>
</view>
2023-08-24 18:32:34 +08:00
<view v-if="dataList.length==0&&!isNewCheck">
2023-08-23 11:35:09 +08:00
<view class="empty">
<view>
当前没有可以签约的的车辆,快去签约新车吧!
</view>
2023-08-24 18:32:34 +08:00
<u-button @click="showPop=true" type="primary" style="background-color: #0122C7;border: none;"
class="btn">
签约新车</u-button>
2023-08-22 16:01:58 +08:00
</view>
</view>
2023-08-24 18:32:34 +08:00
<view style="padding: 0 60rpx;" v-if="isNewCheck">
你已发起租赁{{newCarNum}}两新车的申请,后台正在为您加急处理中,请稍后~~
</view>
2023-08-22 16:01:58 +08:00
</view>
<view v-else>
2023-08-24 18:32:34 +08:00
<view class="personnel_list" @click="toDetail('/subpkg/property/vehicle_a')">
2023-08-22 16:01:58 +08:00
<view class="cards">
<view class="cards_head">
<text>车牌号</text>
</view>
<view class="cards_content">
<view class="right">
<view class="li">
<text>行驶总里程: </text>
<text> { item.name }</text>
</view>
<view class="li">
<text>本公司签约时间: </text>
<text>{ item.phone }</text>
</view>
<view class="li">
<text>承租公司: </text>
<text> 所属片区 </text>
</view>
<view class="li">
<text>负责人: </text>
<text> 所属片区 </text>
</view>
<view class="li">
<text>联系方式: </text>
<text> 所属片区 </text>
</view>
<view class="li">
<text>所属区域: </text>
<text> 所属片区 </text>
</view>
<view class="li">
<text>承租时间: </text>
<text> 所属片区 </text>
</view>
</view>
</view>
</view>
</view>
</view>
2023-08-24 18:32:34 +08:00
<u-modal :show="showPop" @close="showPop=false" @confirm="confirm" :closeOnClickOverlay="true"
:title="newcarTit">
<view class="slot-content">
<u--input placeholder="请输入内容" type="number" v-model="newCarNum"></u--input>
</view>
</u-modal>
<view class="" v-if='!curNow && dataList.length>0'>
<view class="add" @click="showPop=true">
<u-icon name="plus-circle" color="#0122C7" size="60"></u-icon>
签约新车
</view>
<mybtn position="position" text="签约" @click="signFn">
<u-icon name="edit-pen-fill" color="white" size="20"></u-icon>
</mybtn>
</view>
2023-08-22 16:01:58 +08:00
</view>
</template>
<script>
import mybtn from "@/components/mybtn/mybtn.vue"
2023-08-23 11:35:09 +08:00
import {
Toast
} from "../../libs/uniApi";
// Toast("请至少选择一辆车")
2023-08-22 16:01:58 +08:00
export default {
components: {
mybtn
},
name: "vehicle",
data() {
return {
2023-08-24 18:32:34 +08:00
isNewCheck: false,
showPop: false,
dataList: [1, 2, 3],
2023-08-22 16:01:58 +08:00
tabLists: [{
name: '未出租',
}, {
name: '已出租'
}, ],
curNow: 0,
checked: 0,
keywords: "",
2023-08-24 18:32:34 +08:00
newCarNum: "",
newcarTit: "请输入你想要的车辆数量"
2023-08-22 16:01:58 +08:00
};
},
methods: {
signFn() {
2023-08-23 11:35:09 +08:00
console.log(this.checked)
if (!this.checked.length) Toast("请至少选择一辆车")
else {
this.toDetail("/subpkg/property/chosseCompany")
}
2023-08-22 16:01:58 +08:00
},
2023-08-24 18:32:34 +08:00
confirm() {
if (!this.newCarNum) return
console.log(this.newCarNum)
this.showPop = false
this.isNewCheck = true
// this.newCarNum = ""
2023-08-22 16:01:58 +08:00
2023-08-24 18:32:34 +08:00
},
2023-08-22 16:01:58 +08:00
toDetail(url) {
uni.navigateTo({
url
})
},
sectionChange(index) {
this.curNow = index.index;
console.log(this.curNow)
// this.getOrderList()
},
}
}
</script>
<style lang="scss">
.serch {
margin: 28rpx 28rpx 0 28rpx;
}
2023-08-24 18:32:34 +08:00
.add {
position: fixed;
bottom: 100rpx;
right: 0;
}
2023-08-22 16:01:58 +08:00
.personnel_list {
padding: 28rpx 0;
margin-bottom: 130rpx;
2023-08-24 18:32:34 +08:00
2023-08-23 11:35:09 +08:00
.empty {
2023-08-24 18:32:34 +08:00
padding-top: 200rpx;
2023-08-23 11:35:09 +08:00
text-align: center;
.btn {
width: 30vw;
margin-top: 10rpx;
2023-08-24 18:32:34 +08:00
margin: 10rpx auto;
2023-08-23 11:35:09 +08:00
}
2023-08-24 18:32:34 +08:00
2023-08-23 11:35:09 +08:00
// height: 80vh;
// background-color: red;
}
2023-08-22 16:01:58 +08:00
.cards {
margin: 0 auto;
margin-bottom: 28rpx;
width: 694rpx;
background: #ffffff;
border-radius: 30rpx;
opacity: 1;
overflow: hidden;
// box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
.cards_head {
padding: 28rpx;
background-color: $theme-oa-color;
color: white;
height: 100rpx;
display: flex;
justify-content: space-between;
}
.cards_content {
padding: 10rpx 28rpx;
display: flex;
justify-content: space-between;
.left {
text-align: center;
// padding: 15rpx 25rpx;
padding-top: 20rpx;
width: 160rpx;
background-color: $theme-oa-color;
color: white;
border-radius: 40rpx;
.cir {
width: 120rpx;
height: 120rpx;
background-color: #ffffff;
margin-left: 25rpx;
border-radius: 120rpx;
position: relative;
}
}
.right {
display: flex;
flex-direction: column;
justify-content: space-between;
.li {
margin: 10rpx 0;
width: 85vw;
.check_box {
// background-color: #ff0000;
// color: red;
}
// background-color: red;
text:nth-child(1) {
margin-right: 20rpx;
}
}
}
}
}
}
</style>