代码修复
This commit is contained in:
BianLzhaoMin
parent
e60356005b
commit
461d3d7729
|
|
@ -18,22 +18,104 @@
|
|||
</view> -->
|
||||
</scroll-view>
|
||||
<scroll-view scroll-y v-else :style="{ paddingBottom: actionBarHeight + 'px' }">
|
||||
<DetailsModel :maId="maId" />
|
||||
<!-- <DetailsModel :maId="maId" /> -->
|
||||
<view class="swiper-container">
|
||||
<van-swipe
|
||||
:autoplay="5000"
|
||||
lazy-render
|
||||
:show-indicators="false"
|
||||
@change="onSwiperChange"
|
||||
>
|
||||
<van-swipe-item v-for="image in images" :key="image.id">
|
||||
<van-image fit="cover" position="center" :src="image.fileUrl" />
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
<view class="count-tip"> {{ activeIndex }}/{{ goodsPicCount }} </view>
|
||||
</view>
|
||||
|
||||
<view class="goods-name card-style">
|
||||
<view class="box_1">
|
||||
<text style="color: #2cb0a0"> {{ deviceInfo.deviceName }} </text>
|
||||
<view style="color: #fff">
|
||||
<text class="no-bold">￥</text>
|
||||
<text> {{ deviceInfo.dayLeasePrice }}</text>
|
||||
<text class="no-bold">/天 </text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-right">
|
||||
{{ deviceInfo.personPhone }} <van-icon name="phone-o"
|
||||
/></view>
|
||||
<view class="text-right">
|
||||
<text> 发布时间：{{ deviceInfo.createTime?.slice(0, 10) }} </text>
|
||||
<text> 更新时间：{{ deviceInfo.updateTime?.slice(0, 10) }}</text>
|
||||
<text> 浏览次数：{{ deviceInfo.searchNum }} </text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-style goods-company">
|
||||
<h4>安徽送变电公司</h4>
|
||||
<view>
|
||||
<text> 入驻时间：{{ deviceInfo.companyCreateTime }} </text>
|
||||
<text> 上架数量：{{ deviceInfo.devUapNum }} </text>
|
||||
<text> 访问量：{{ deviceInfo.companyVisitNum }} </text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-style goods-details">
|
||||
<h4 class="h4-title">装备详情</h4>
|
||||
<view v-for="item in goodsLabel" :key="item.goods_label">
|
||||
<text> {{ item.goods_label }}{{ deviceInfo[item.label_content] }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<van-action-bar :safe-area-inset-bottom="true">
|
||||
<van-action-bar-icon icon="chat-o" text="在线聊" @click="onLineMessage" />
|
||||
<van-action-bar-icon
|
||||
icon="shop-o"
|
||||
text="预约车"
|
||||
:badge="cartCount"
|
||||
@click="onCartBarPage"
|
||||
/>
|
||||
<van-action-bar-button
|
||||
color="#ffc758"
|
||||
type="warning"
|
||||
text="加入预约车"
|
||||
@click="onAddCart"
|
||||
:disabled="deviceInfo.isBookCar == 0 || userCompanyId == deviceInfo.companyId"
|
||||
/>
|
||||
<van-action-bar-button
|
||||
color="#22ab9b"
|
||||
type="danger"
|
||||
text="立即租用"
|
||||
@click="onRentNow"
|
||||
:disabled="userCompanyId == deviceInfo.companyId"
|
||||
/>
|
||||
</van-action-bar>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { nextTick, ref } from 'vue'
|
||||
import { nextTick, ref, computed } 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 { useMemberStore } from '@/stores/index.js'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { addBookCarAPI, getBookCarDetailsAPI } from '@/services/cart/index.js'
|
||||
import { getDeviceDetailsAPI } from '@/services/goods/index.js'
|
||||
const memberStore = useMemberStore()
|
||||
const userCompanyId = ref()
|
||||
const userCompanyName = ref()
|
||||
const activeTabs = ref(0)
|
||||
const maId = ref('')
|
||||
const actionBarHeight = ref(0)
|
||||
const images = ref([])
|
||||
const activeIndex = ref(1)
|
||||
const deviceInfo = ref({})
|
||||
const cartCount = ref(0)
|
||||
const tabList = ref([
|
||||
{ tab_name: '装备详情' },
|
||||
{ tab_name: '装备外观' },
|
||||
|
|
@ -60,10 +142,84 @@ const getActionBarHeight = () => {
|
|||
|
||||
onLoad((options) => {
|
||||
maId.value = options.id
|
||||
userCompanyId.value = memberStore.userInfo.companyId
|
||||
userCompanyName.value = memberStore.userCompanyName
|
||||
getDeviceDetailsData()
|
||||
getBookCarDetailsData()
|
||||
nextTick(() => {
|
||||
getActionBarHeight()
|
||||
})
|
||||
})
|
||||
|
||||
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(maId.value)
|
||||
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 () => {
|
||||
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=${maId.value}` })
|
||||
}
|
||||
|
||||
// 跳转预约车
|
||||
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}`,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -79,4 +235,80 @@ onLoad((options) => {
|
|||
.tabs-content {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.swiper-container {
|
||||
position: relative;
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.device-details {
|
||||
background-color: skyblue;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue