jiuyiUniapp/service/pages/index/index.vue

139 lines
3.1 KiB
Vue
Raw Normal View History

2025-02-13 09:59:20 +08:00
<script setup>
// 消息首页
import {
onMounted,
ref,
reactive,
getCurrentInstance,
} from 'vue';
import {
onLoad,
onReady,
onHide,
onPullDownRefresh,
onReachBottom,
} from '@dcloudio/uni-app'
// 路由
import util from '@/common/js/util.js'
const chatList = reactive([{
id: 1,
avatar: 'https://p3-flow-imagex-sign.byteimg.com/user-avatar/9f4488a87a17f6f31b9716331e14fe26~tplv-a9rns2rl98-icon-tiny.jpeg?rk3s=98c978ad&x-expires=1740537084&x-signature=OrjX8tZaafN4XJE2o8QzZDs3Q20%3D',
name: '客户 A',
lastMessage: '您好,商品什么时候发货?',
dot: 1,
},
{
id: 2,
avatar: 'https://p3-flow-imagex-sign.byteimg.com/user-avatar/9f4488a87a17f6f31b9716331e14fe26~tplv-a9rns2rl98-icon-tiny.jpeg?rk3s=98c978ad&x-expires=1740537084&x-signature=OrjX8tZaafN4XJE2o8QzZDs3Q20%3D',
name: '客户 B',
lastMessage: '这个商品有优惠吗?',
dot: '',
}
])
2025-02-15 16:09:39 +08:00
// // 用户信息
// const userinfo = computed(() => {
// return store.state.userinfo
// })
2025-02-13 09:59:20 +08:00
/**
* 去聊天
* @param {Number} item 聊天对象
*/
function handleChat(item) {
//
}
/**
* 跳转
* @param {String} url 路由地址
*/
function link(url) {
uni.navigateTo({
url,
})
}
</script>
<template>
<view class="container">
<view class="header pr ptb30 plr20">
<image src="/static/mine-b.png" class="background pfull" mode="aspectFill" />
<view class="content pr rows">
<view class="avatar">
<image class="wh120 cir" mode="aspectFill"
src="https://p3-flow-imagex-sign.byteimg.com/user-avatar/9f4488a87a17f6f31b9716331e14fe26~tplv-a9rns2rl98-icon-tiny.jpeg?rk3s=98c978ad&x-expires=1740537084&x-signature=OrjX8tZaafN4XJE2o8QzZDs3Q20%3D" />
</view>
<view class="info f1 ml20">
<view class="name c333 f34">客服小A</view>
<view class="mt10 c666 f28">店铺客服</view>
</view>
</view>
</view>
<!-- 商家订单 -->
<view class="rows ptb30 plr20">
<view class="">商家订单管理</view>
<uni-icons type="right" />
</view>
2025-02-15 16:09:39 +08:00
2025-02-13 09:59:20 +08:00
<view class="list">
<view class="item rows ptb20 plr20" v-for="(item, index) in chatList" :key="index"
@click="handleChat(item)">
<view class="avatar">
<image :src="item.avatar" class="wh80 cir" />
</view>
<view class="info f1 ml20">
<view class="rows">
<view class="name c333 f28">{{ item.name }}</view>
<view class="time c999 f22">2024.05.06 13:00</view>
</view>
<view class="rows">
<view class="content mt10 c666 f24">{{ item.lastMessage }}</view>
<view class="dot cfff f22">
<view class="content" v-if="item.dot">{{item.dot}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
// 个人信息
.header {
.background {
width: 100%;
height: 100%;
}
}
//
.list {
.item {
border-top: 1rpx solid #eee;
.dot {
padding: 5rpx;
border-radius: 100rpx;
background-color: #f00;
// 内容
.content {
display: flex;
justify-content: center;
align-items: center;
width: 20rpx;
height: 20rpx;
}
}
}
}
</style>