消息列表功能完善 发送消息功能完善

index.html

@@ -19,7 +19,9 @@
       '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
       (coverSupport ? ', viewport-fit=cover' : '') + '" />')
   </script>
-  <title></title>
+  <title>
+    安徽租赁商城
+  </title>
   <!--preload-links-->
   <!--app-context-->
 </head>

package-lock.json

@@ -26,6 +26,7 @@
                 "@vant/area-data": "^2.0.0",
                 "less": "^4.2.1",
                 "less-loader": "^12.2.0",
+                "lodash-es": "^4.17.21",
                 "moment": "^2.30.1",
                 "pinia": "^2.3.0",
                 "pinia-plugin-persistedstate": "^4.1.3",
@@ -9504,6 +9505,12 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/lodash-es": {
+            "version": "4.17.21",
+            "resolved": "https://repo.huaweicloud.com/repository/npm/lodash-es/-/lodash-es-4.17.21.tgz",
+            "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+            "license": "MIT"
+        },
         "node_modules/lodash.camelcase": {
             "version": "4.3.0",
             "resolved": "https://repo.huaweicloud.com/repository/npm/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",

package.json

@@ -60,6 +60,7 @@
         "@vant/area-data": "^2.0.0",
         "less": "^4.2.1",
         "less-loader": "^12.2.0",
+        "lodash-es": "^4.17.21",
         "moment": "^2.30.1",
         "pinia": "^2.3.0",
         "pinia-plugin-persistedstate": "^4.1.3",

src/pages/goods-details/components/details-model.vue

@@ -47,7 +47,7 @@
     </view>
 
     <van-action-bar v-if="memberStore.userType === 2">
-        <van-action-bar-icon icon="chat-o" text="在线聊" />
+        <van-action-bar-icon icon="chat-o" text="在线聊" @click="onLineMessage" />
         <van-action-bar-icon
             icon="shop-o"
             text="预约车"
@@ -152,6 +152,14 @@ 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}`,
+    })
+}
+
 onLoad(() => {
     userCompanyId.value = memberStore.userInfo.companyId
     getDeviceDetailsData()

src/pages/goods-list/index.vue

@@ -12,21 +12,33 @@
 
         <view class="goods-items">
             <view class="filter-box">
-                <view class="flex-row-start">
+                <view class="filter-items">
-                    <view>
                     使用年限
-                        <van-icon name="sort" />
+                    <view class="filter-type">
+                        <van-icon name="play" size="12" />
+                        <van-icon name="play" size="12" />
                     </view>
-                    <view>
+                </view>
+                <view class="filter-items">
                     租金
-                        <van-icon name="sort" />
+                    <view class="filter-type">
+                        <van-icon name="play" size="12" />
+                        <van-icon name="play" size="12" />
                     </view>
-                    <view>
+                </view>
+                <view class="filter-items">
                     上架时间
-                        <van-icon name="sort" />
+                    <view class="filter-type">
+                        <van-icon name="play" size="12" />
+                        <van-icon name="play" size="12" />
                     </view>
                 </view>
             </view>
+
+            <view @click="onFilter">
+                筛选
+                <van-icon name="filter-o" />
+            </view>
         </view>
 
         <scroll-view scroll-y class="scroll-item" @scrolltolower="onScrollTolower">
@@ -40,6 +52,49 @@
                 </van-grid-item>
             </van-grid>
         </scroll-view>
+
+        <van-popup position="bottom" v-model:show="showBottom" :style="{ height: '60%' }">
+            <view class="filter-bottom">
+                <view style="text-align: right; padding: 4px 8px">
+                    <van-icon name="close" color="#575B66" size="20" />
+                </view>
+                <view
+                    style="
+                        text-align: center;
+                        font-weight: bold;
+                        color: #333333;
+                        font-family: PingFangSC, PingFang SC;
+                    "
+                >
+                    全部筛选
+                </view>
+
+                <view class="filter-content">
+                    <van-sidebar v-model="activeSelect">
+                        <van-sidebar-item
+                            :key="index"
+                            :title="item.selectName"
+                            v-for="(item, index) in selectList"
+                        />
+                    </van-sidebar>
+
+                    <scroll-view scroll-y class="right-btns">
+                        <view>
+                            <view> {{ selectList[activeSelect].selectName }} </view>
+                            <view class="btns">
+                                <view
+                                    class="active_btn"
+                                    v-for="(item, index) in selectList[activeSelect].val_list"
+                                    :key="index"
+                                >
+                                    {{ item.name }}
+                                </view>
+                            </view>
+                        </view>
+                    </scroll-view>
+                </view>
+            </view>
+        </van-popup>
     </view>
 </template>
 
@@ -50,8 +105,76 @@ import Navbar from '@/components/Navbar/index'
 import { getDeviceListAPI } from '@/services/index/index.js'
 import { onLoad } from '@dcloudio/uni-app'
 import { ref } from 'vue'
-const active = ref('')
+const activeSelect = ref(0)
+const showBottom = ref(false)
 const deviceList = ref([])
+const selectList = ref([
+    {
+        selectName: '使用年限',
+        val_list: [
+            {
+                name: '全部',
+                value: '',
+            },
+            {
+                name: '0-1年',
+                value: [0, 1],
+            },
+        ],
+    },
+    {
+        selectName: '设备类型',
+        val_list: [
+            {
+                name: '全部',
+                value: '',
+            },
+            {
+                name: '0-1年',
+                value: [0, 1],
+            },
+        ],
+    },
+    {
+        selectName: '下级分类',
+        val_list: [
+            {
+                name: '全部',
+                value: '',
+            },
+            {
+                name: '0-1年',
+                value: [0, 1],
+            },
+        ],
+    },
+    {
+        selectName: '价格区间',
+        val_list: [
+            {
+                name: '全部',
+                value: '',
+            },
+            {
+                name: '0-1年',
+                value: [0, 1],
+            },
+        ],
+    },
+    {
+        selectName: '设备所属公司',
+        val_list: [
+            {
+                name: '全部',
+                value: '',
+            },
+            {
+                name: '0-1年',
+                value: [0, 1],
+            },
+        ],
+    },
+])
 const onScrollTolower = () => {
     console.log('滚动触底')
 }
@@ -82,6 +205,10 @@ const onClickLeft = () => {
         url: '/pages/index/index',
     })
 }
+
+const onFilter = () => {
+    showBottom.value = true
+}
 onLoad(() => {
     getDeviceListData()
 })
@@ -116,15 +243,40 @@ onLoad(() => {
 }
 
 .goods-items {
+    display: flex;
+    justify-content: space-between;
     padding: 10px;
     box-sizing: border-box;
     border-top-left-radius: 20px;
     border-top-right-radius: 20px;
     background: $uni-bg-color;
-}
 
-.flex-row-start view {
+    .filter-box {
-    margin-right: 6px;
+        display: flex;
+        align-items: center;
+
+        .filter-items {
+            display: flex;
+            align-items: center;
+
+            .filter-type {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                padding: 0 6px;
+
+                & .van-icon:first-child {
+                    transform: rotateZ(-90deg);
+                    margin-bottom: -3px;
+                }
+                & .van-icon:last-child {
+                    transform: rotateZ(90deg);
+                    margin-top: -3px;
+                }
+            }
+        }
+    }
 }
 
 .van-tabbar {
@@ -141,4 +293,47 @@ onLoad(() => {
 :deep(.van-nav-bar__title) {
     color: #333;
 }
+
+.filter-bottom {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow-y: hidden;
+}
+
+.filter-content {
+    flex: 1;
+    height: 100%;
+    display: flex;
+
+    .right-btns {
+        flex: 1;
+        padding: 10px;
+        box-sizing: border-box;
+
+        .btns {
+            display: flex;
+            flex-wrap: wrap;
+            margin-top: 15px;
+            view {
+                width: calc((100% - 20px) / 3);
+                margin-bottom: 10px;
+                margin-right: 10px;
+                height: 28px;
+                line-height: 28px;
+                text-align: center;
+                border-radius: 14px;
+            }
+
+            .active_btn {
+                color: #22ab9b;
+                background-color: #d1eae7;
+            }
+
+            & view:nth-child(3n) {
+                margin-right: 0;
+            }
+        }
+    }
+}
 </style>

src/pages/message-pages/index.vue

@@ -3,15 +3,15 @@
     <view class="h5-container message-pages">
         <view style="padding: 15px">
             <van-icon name="arrow-left" @click="onClickLeft" />
-            <text style="color: #000"> 老张租赁 </text>
+            <text style="color: #000"> {{ contactUser }} </text>
         </view>
 
         <scroll-view scroll-y style="padding-bottom: 60px">
             <van-cell-group inset style="flex: 1">
-                <view v-for="item in 20" :key="item">
+                <view v-for="item in messageList" :key="item.uuid">
-                    <view class="message-items left-message" v-if="item === 2 || item === 4">
+                    <view class="message-items left-message" v-if="myCompanyId == item.fromCompany">
                         <view style="flex: 1">
-                            <text> 你还有货吗 </text>
+                            <text> {{ item.messageContent }} </text>
                         </view>
                         <van-image
                             round
@@ -21,7 +21,7 @@
                             src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
                         />
                     </view>
-                    <view class="message-items right-message" v-if="item === 3 || item === 5">
+                    <view class="message-items right-message" v-else>
                         <van-image
                             round
                             fit="cover"
@@ -30,7 +30,7 @@
                             src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
                         />
                         <view style="flex: 1">
-                            <text> 你还有货吗 </text>
+                            <text> {{ item.messageContent }} </text>
                         </view>
                     </view>
                 </view>
@@ -38,8 +38,8 @@
         </scroll-view>
 
         <view class="message-ipt">
-            <van-field rows="1" autosize type="textarea" />
+            <van-field rows="1" autosize type="textarea" v-model="sendParams.messageContent" />
-            <van-icon name="guide-o" color="#22ab9a" size="24" />
+            <van-icon name="guide-o" color="#22ab9a" size="24" @click="onSendMessage" />
         </view>
     </view>
 </template>
@@ -48,17 +48,44 @@
 import { ref } from 'vue'
 import { useMemberStore } from '@/stores/index.js'
 import { onLoad } from '@dcloudio/uni-app'
+import { debounce } from 'lodash-es'
+import { sendMessageAPI, getMessageInfoAPI } from '@/services/message/index.js'
 const memberStore = useMemberStore()
-const userName = ref('')
+const contactUser = ref('')
-const userAccount = ref('')
+const messageList = ref([])
+const myCompanyId = ref()
+
+const sendParams = ref({
+    toUser: '',
+    toCompany: '',
+    messageContent: '',
+})
 
 const onClickLeft = () => {
     uni.navigateBack()
 }
 
-onLoad(() => {
+const getMessageInfoData = async () => {
-    userName.value = memberStore.userInfo.nickName
+    const { data: res } = await getMessageInfoAPI({ toCompany: sendParams.value.toCompany })
-    userAccount.value = memberStore.userInfo.userName
+    messageList.value = res
+}
+
+// 发送按钮
+const onSendMessage = debounce(async () => {
+    const res = await sendMessageAPI(sendParams.value)
+    if (res.code === 200) {
+        getMessageInfoData()
+    } else {
+        showNotify({ type: 'success', message: '发送失败' })
+    }
+}, 500)
+
+onLoad((options) => {
+    myCompanyId.value = memberStore.userInfo?.companyId
+    sendParams.value.toCompany = options?.id
+    sendParams.value.toUser = options?.ownId
+    contactUser.value = options?.name
+    getMessageInfoData()
 })
 </script>
 
@@ -138,7 +165,8 @@ onLoad(() => {
     bottom: 0;
     left: 0;
     padding: 12px 0;
-    height: 60px;
+    // height: 60px;
+    height: auto;
     width: 100%;
     display: flex;
     align-items: center;

src/pages/message/index.vue

@@ -53,16 +53,33 @@
 
 <script setup>
 import { ref } from 'vue'
+import { onLoad, onUnload } from '@dcloudio/uni-app'
 import { useMemberStore } from '@/stores/index.js'
-import { onLoad } from '@dcloudio/uni-app'
+import { getMessageListAPI } from '@/services/message/index.js'
 const memberStore = useMemberStore()
 const userName = ref('')
 const userAccount = ref('')
+const messageInterval = ref(null)
 
 onLoad(() => {
     userName.value = memberStore.userInfo.nickName
     userAccount.value = memberStore.userInfo.userName
+
+    messageInterval.value = setInterval(() => {
+        getMessageListData()
+    }, 3000)
 })
+
+onUnload(() => {
+    if (messageInterval.value) {
+        clearInterval(messageInterval.value)
+        messageInterval.value = null
+    }
+})
+
+const getMessageListData = async () => {
+    const res = await getMessageListAPI()
+}
 const onJumpToMessagePages = () => {
     uni.navigateTo({ url: '/pages/message-pages/index' })
 }

src/services/message/index.js

@@ -0,0 +1,32 @@
+import { http } from '@/utils/http'
+
+/**
+ *  消息 发送消息
+ */
+export const sendMessageAPI = (data) => {
+    return http({
+        method: 'POSt',
+        url: '/material-mall/bm_message',
+        data,
+    })
+}
+/**
+ *  消息 消息详情
+ */
+export const getMessageInfoAPI = (data) => {
+    return http({
+        method: 'GET',
+        url: '/material-mall/bm_message/listOneToOne',
+        data,
+    })
+}
+/**
+ *  消息 消息列表
+ */
+export const getMessageListAPI = (data) => {
+    return http({
+        method: 'GET',
+        url: '/material-mall/bm_message/list',
+        data,
+    })
+}

vite.config.js

@@ -31,8 +31,8 @@ export default defineConfig({
         proxy: {
             // 在此处编写代理规则
             '/api': {
-                target: 'http://36.33.26.201:17788/proxyApi',
+                // target: 'http://36.33.26.201:17788/proxyApi',
-                // target: 'http://192.168.0.244:28580',
+                target: 'http://192.168.2.123:28080',
                 changeOrigin: true,
                 rewrite: (path) => {
                     return path.replace(/\/api/, '')