代码修复

src/pages/goods-details/index.vue

@@ -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>