装备详情页面完善
This commit is contained in:
parent
959220a068
commit
bb3d8531de
|
|
@ -0,0 +1,202 @@
|
|||
<template>
|
||||
<!-- 装备检测记录 -->
|
||||
<view class="goods-details">
|
||||
<!-- <h4 class="h4-title">出租记录</h4> -->
|
||||
<van-cell-group inset v-for="(item, index) in deviceInfo.qcList" :key="index">
|
||||
<van-cell title="检测日期" :value="item.qcTime" />
|
||||
<van-cell title="有效期" :value="item.maintenanceAlarmDay" />
|
||||
<van-cell title="检测证明">
|
||||
<template #right-icon>
|
||||
<text @click="onPreviewImg(item)"> 查看 </text>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell title="检测单位" :value="item.comName" />
|
||||
</van-cell-group>
|
||||
|
||||
<van-empty description="暂无记录" v-if="deviceInfo.qcList?.length == 0" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { useMemberStore } from '@/stores/index.js'
|
||||
import { getDeviceDetailsAPI } from '@/services/goods/index.js'
|
||||
import { addBookCarAPI, getBookCarDetailsAPI } from '@/services/cart/index.js'
|
||||
import { showImagePreview } from 'vant'
|
||||
const memberStore = useMemberStore()
|
||||
const userCompanyId = ref()
|
||||
const userCompanyName = ref()
|
||||
const images = ref([])
|
||||
const activeIndex = ref(1)
|
||||
const deviceInfo = ref({})
|
||||
const cartCount = ref(0)
|
||||
const props = defineProps({
|
||||
maId: {
|
||||
type: [String, Number],
|
||||
default: () => '',
|
||||
},
|
||||
})
|
||||
const goodsLabel = ref([
|
||||
{ goods_label: '装备编号:', label_content: 'code' },
|
||||
{ goods_label: '装备类目:', label_content: 'groupName' },
|
||||
{ goods_label: '装备型号:', label_content: 'typeName' },
|
||||
{ goods_label: '规格:', label_content: '' },
|
||||
{ goods_label: '品牌:', label_content: 'brand' },
|
||||
{ goods_label: '出厂日期:', label_content: 'productionDate' },
|
||||
{ goods_label: '功能特点:', label_content: '' },
|
||||
])
|
||||
const goodsPicCount = computed(() => {
|
||||
return images.value.length
|
||||
})
|
||||
const onSwiperChange = (e) => {
|
||||
activeIndex.value = e + 1
|
||||
}
|
||||
const getDeviceDetailsData = async () => {
|
||||
const { data: res } = await getDeviceDetailsAPI(props.maId)
|
||||
deviceInfo.value = res
|
||||
// images.value = res.mainFileList
|
||||
}
|
||||
// 获取预约车数量
|
||||
const getBookCarDetailsData = async () => {
|
||||
cartCount.value = 0
|
||||
const { data: res } = await getBookCarDetailsAPI()
|
||||
if (res.length > 0) {
|
||||
res.forEach((e) => {
|
||||
cartCount.value = e.devInfoVoList.length + cartCount.value
|
||||
})
|
||||
} else {
|
||||
cartCount.value = 0
|
||||
}
|
||||
}
|
||||
// 加入预约车
|
||||
const onAddCart = () => {
|
||||
showConfirmDialog({
|
||||
title: '温馨提示',
|
||||
message: '是否确认加入预约车',
|
||||
})
|
||||
.then(async () => {
|
||||
console.log(deviceInfo.value, 'deviceInfo')
|
||||
const { companyId, maId } = deviceInfo.value
|
||||
const res = await addBookCarAPI({
|
||||
maId,
|
||||
orderCompany: companyId,
|
||||
})
|
||||
if (res.code === 200) {
|
||||
showSuccessToast('加入成功')
|
||||
getDeviceDetailsData()
|
||||
getBookCarDetailsData()
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
// 立即承租
|
||||
const onRentNow = () => {
|
||||
uni.navigateTo({ url: `/pages/order/index?id=${deviceInfo.value.maId}` })
|
||||
}
|
||||
|
||||
// 跳转预约车
|
||||
const onCartBarPage = () => {
|
||||
uni.switchTab({ url: '/pages/cart/index' })
|
||||
}
|
||||
|
||||
// 在线聊
|
||||
const onLineMessage = () => {
|
||||
const { companyId, companyName, ownId } = deviceInfo.value
|
||||
uni.navigateTo({
|
||||
url: `/pages/message-pages/index?id=${companyId}&name=${companyName}&ownId=${ownId}&formName=${userCompanyName.value}`,
|
||||
})
|
||||
}
|
||||
|
||||
// 查看图片
|
||||
const onPreviewImg = (item) => {
|
||||
showImagePreview([item.fileInfo.fileUrl])
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
userCompanyId.value = memberStore.userInfo.companyId
|
||||
userCompanyName.value = memberStore.userCompanyName
|
||||
getDeviceDetailsData()
|
||||
getBookCarDetailsData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.swiper-container {
|
||||
position: relative !important;
|
||||
.count-tip {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 2px;
|
||||
background-color: #bcbcbc;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.van-swipe {
|
||||
width: 100%;
|
||||
height: 40vh;
|
||||
|
||||
// .van-image {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// }
|
||||
}
|
||||
|
||||
.card-style {
|
||||
width: 97%;
|
||||
margin: 5px auto 0;
|
||||
border-radius: 6px;
|
||||
padding: 8px 12px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.goods-name {
|
||||
color: #fff;
|
||||
background: linear-gradient(to right, #e8f4f3, #93dad1, #5fb0a5);
|
||||
.box_1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 2px;
|
||||
|
||||
.no-bold {
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.text-right {
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-company text,
|
||||
.goods-details text {
|
||||
margin-right: 16px;
|
||||
font-size: 13px;
|
||||
color: #5c5b5b;
|
||||
}
|
||||
|
||||
.goods-company view,
|
||||
.goods-details view,
|
||||
.goods-company h4 {
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.h4-title {
|
||||
padding: 12px 0;
|
||||
margin: 5px 0;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.prove-container {
|
||||
font-size: 14px;
|
||||
color: #00a288;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -16,7 +16,8 @@
|
|||
<DetailsModel v-if="activeTabs === 0" :maId="maId" />
|
||||
<DetailsAppearance v-if="activeTabs === 1" :maId="maId" />
|
||||
<DetailsProve v-if="activeTabs === 2" :maId="maId" />
|
||||
<DetailsRecord v-if="activeTabs === 3" :maId="maId" />
|
||||
<DetailsDetection v-if="activeTabs === 3" :maId="maId" />
|
||||
<DetailsRecord v-if="activeTabs === 4" :maId="maId" />
|
||||
<!-- <view v-else>
|
||||
{{ tabList[activeTabs].tab_name }}
|
||||
</view> -->
|
||||
|
|
@ -29,6 +30,7 @@ import { nextTick, ref } from 'vue'
|
|||
import DetailsModel from './components/details-model.vue'
|
||||
import DetailsAppearance from './components/details-appearance.vue'
|
||||
import DetailsProve from './components/details-prove.vue'
|
||||
import DetailsDetection from './components/details-detection.vue'
|
||||
import DetailsRecord from './components/details-record.vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
const activeTabs = ref(0)
|
||||
|
|
@ -38,6 +40,7 @@ const tabList = ref([
|
|||
{ tab_name: '装备详情' },
|
||||
{ tab_name: '装备外观' },
|
||||
{ tab_name: '证书展示' },
|
||||
{ tab_name: '检测记录' },
|
||||
{ tab_name: '出租记录' },
|
||||
])
|
||||
const onHandleBack = () => {
|
||||
|
|
|
|||
|
|
@ -276,6 +276,11 @@ onShow(async () => {
|
|||
index: 2,
|
||||
visible: true,
|
||||
})
|
||||
} else {
|
||||
uni.setTabBarItem({
|
||||
index: 2,
|
||||
visible: false,
|
||||
})
|
||||
}
|
||||
getEquipmentTypeData()
|
||||
getOrderStatusCountData()
|
||||
|
|
|
|||
|
|
@ -36,11 +36,9 @@ const onLogOut = () => {
|
|||
message: '是否确定退出当前登录',
|
||||
})
|
||||
.then(async () => {
|
||||
// 清除缓存
|
||||
uni.clearStorageSync()
|
||||
uni.clearStorage()
|
||||
// memberStore.clearUserInfo()
|
||||
uni.reLaunch({ url: '/pages/login/index' })
|
||||
// 清除缓存
|
||||
memberStore.clearUserInfo()
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue