.
This commit is contained in:
杨鹏
@@ -1,223 +0,0 @@
|
||||
<template>
|
||||
<s-layout
|
||||
class="chat-wrap"
|
||||
:title="!isReconnecting ? '连接客服成功' : '会话重连中'"
|
||||
navbar="inner"
|
||||
tabbar="/pages/index/chat"
|
||||
>
|
||||
<!-- 覆盖头部导航栏背景颜色 -->
|
||||
<view class="page-bg" :style="{ height: sys_navBar + 'px' }"></view>
|
||||
<!-- 聊天区域 -->
|
||||
<MessageList ref="messageListRef">
|
||||
<template #bottom>
|
||||
<message-input
|
||||
v-model="chat.msg"
|
||||
@on-tools="onTools"
|
||||
@send-message="onSendMessage"
|
||||
:auto-focus="false"
|
||||
:show-char-count="true"
|
||||
:max-length="500"
|
||||
></message-input>
|
||||
</template>
|
||||
</MessageList>
|
||||
<!-- 聊天工具 -->
|
||||
<tools-popup
|
||||
:show-tools="chat.showTools"
|
||||
:tools-mode="chat.toolsMode"
|
||||
@close="handleToolsClose"
|
||||
@on-emoji="onEmoji"
|
||||
@image-select="onSelect"
|
||||
@on-show-select="onShowSelect"
|
||||
>
|
||||
<message-input
|
||||
v-model="chat.msg"
|
||||
@on-tools="onTools"
|
||||
@send-message="onSendMessage"
|
||||
:auto-focus="false"
|
||||
:show-char-count="true"
|
||||
:max-length="500"
|
||||
></message-input>
|
||||
</tools-popup>
|
||||
<!-- 商品订单选择 -->
|
||||
<SelectPopup
|
||||
:mode="chat.selectMode"
|
||||
:show="chat.showSelect"
|
||||
@select="onSelect"
|
||||
@close="chat.showSelect = false"
|
||||
/>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MessageList from '@/pages/chat/components/messageList.vue';
|
||||
import { reactive, ref, toRefs } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import ToolsPopup from '@/pages/chat/components/toolsPopup.vue';
|
||||
import MessageInput from '@/pages/chat/components/messageInput.vue';
|
||||
import SelectPopup from '@/pages/chat/components/select-popup.vue';
|
||||
import {
|
||||
KeFuMessageContentTypeEnum,
|
||||
WebSocketMessageTypeConstants,
|
||||
} from '@/pages/chat/util/constants';
|
||||
import FileApi from '@/sheep/api/infra/file';
|
||||
import KeFuApi from '@/sheep/api/promotion/kefu';
|
||||
import { useWebSocket } from '@/pages/chat/util/useWebSocket';
|
||||
import { jsonParse } from '@/sheep/helper/utils';
|
||||
|
||||
const sys_navBar = sheep.$platform.navbar;
|
||||
|
||||
const chat = reactive({
|
||||
msg: '',
|
||||
scrollInto: '',
|
||||
showTools: false,
|
||||
toolsMode: '',
|
||||
showSelect: false,
|
||||
selectMode: '',
|
||||
});
|
||||
|
||||
// 发送消息
|
||||
async function onSendMessage() {
|
||||
if (!chat.msg) return;
|
||||
try {
|
||||
const data = {
|
||||
contentType: KeFuMessageContentTypeEnum.TEXT,
|
||||
content: JSON.stringify({ text: chat.msg }),
|
||||
};
|
||||
await KeFuApi.sendKefuMessage(data);
|
||||
chat.msg = '';
|
||||
} finally {
|
||||
chat.showTools = false;
|
||||
}
|
||||
}
|
||||
|
||||
const messageListRef = ref();
|
||||
|
||||
//======================= 聊天工具相关 start =======================
|
||||
|
||||
function handleToolsClose() {
|
||||
chat.showTools = false;
|
||||
chat.toolsMode = '';
|
||||
}
|
||||
|
||||
function onEmoji(item) {
|
||||
chat.msg += item.name;
|
||||
}
|
||||
|
||||
// 点击工具栏开关
|
||||
function onTools(mode) {
|
||||
if (isReconnecting.value) {
|
||||
sheep.$helper.toast('您已掉线！请返回重试');
|
||||
return;
|
||||
}
|
||||
|
||||
// 第二次点击关闭
|
||||
if (chat.showTools && chat.toolsMode === mode) {
|
||||
handleToolsClose();
|
||||
return;
|
||||
}
|
||||
// 切换工具栏
|
||||
if (chat.showTools && chat.toolsMode !== mode) {
|
||||
chat.showTools = false;
|
||||
chat.toolsMode = '';
|
||||
}
|
||||
// 延迟打开等一下过度效果
|
||||
setTimeout(() => {
|
||||
chat.toolsMode = mode;
|
||||
chat.showTools = true;
|
||||
}, 200);
|
||||
}
|
||||
|
||||
function onShowSelect(mode) {
|
||||
chat.showTools = false;
|
||||
chat.showSelect = true;
|
||||
chat.selectMode = mode;
|
||||
}
|
||||
|
||||
async function onSelect({ type, data }) {
|
||||
let msg;
|
||||
switch (type) {
|
||||
case 'image':
|
||||
const res = await FileApi.uploadFile(data.tempFiles[0].path);
|
||||
msg = {
|
||||
contentType: KeFuMessageContentTypeEnum.IMAGE,
|
||||
content: JSON.stringify({ picUrl: res.data }),
|
||||
};
|
||||
break;
|
||||
case 'goods':
|
||||
msg = {
|
||||
contentType: KeFuMessageContentTypeEnum.PRODUCT,
|
||||
content: JSON.stringify(data),
|
||||
};
|
||||
break;
|
||||
case 'order':
|
||||
msg = {
|
||||
contentType: KeFuMessageContentTypeEnum.ORDER,
|
||||
content: JSON.stringify(data),
|
||||
};
|
||||
break;
|
||||
}
|
||||
if (msg) {
|
||||
// 发送消息
|
||||
// scrollBottom();
|
||||
await KeFuApi.sendKefuMessage(msg);
|
||||
await messageListRef.value.refreshMessageList();
|
||||
chat.showTools = false;
|
||||
chat.showSelect = false;
|
||||
chat.selectMode = '';
|
||||
}
|
||||
}
|
||||
|
||||
//======================= 聊天工具相关 end =======================
|
||||
const { options } = useWebSocket({
|
||||
// 连接成功
|
||||
onConnected: async () => {},
|
||||
// 收到消息
|
||||
onMessage: async (data) => {
|
||||
const type = data.type;
|
||||
if (!type) {
|
||||
console.error('未知的消息类型：' + data);
|
||||
return;
|
||||
}
|
||||
// 2.2 消息类型：KEFU_MESSAGE_TYPE
|
||||
if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_TYPE) {
|
||||
// 刷新消息列表
|
||||
await messageListRef.value.refreshMessageList(jsonParse(data.content));
|
||||
return;
|
||||
}
|
||||
// 2.3 消息类型：KEFU_MESSAGE_ADMIN_READ
|
||||
if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_ADMIN_READ) {
|
||||
console.log('管理员已读消息');
|
||||
// 更新消息已读状态
|
||||
sheep.$helper.toast('客服已读您的消息');
|
||||
}
|
||||
},
|
||||
});
|
||||
const isReconnecting = toRefs(options).isReconnecting; // 重连状态
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.chat-wrap {
|
||||
.page-bg {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: var(--ui-BG-Main);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.status {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
z-index: 3;
|
||||
height: 70rpx;
|
||||
padding: 0 30rpx;
|
||||
background: var(--ui-BG-Main-opacity-1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<cover-view class="cover-view-ctn">
|
||||
<cover-view
|
||||
class="cover-tabbar-item"
|
||||
v-for="(item, index) in tabbar.items"
|
||||
:key="item.text"
|
||||
@tap="sheep.$router.go(item.url)"
|
||||
>
|
||||
<cover-view class="content-box">
|
||||
<cover-image class="tabbar-icon" :src="sheep.$url.cdn(item.iconUrl)" />
|
||||
<cover-view class="active-line" v-show="activeUrl === item.url" />
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, unref } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import SuTabbar from '@/sheep/ui/su-tabbar/su-tabbar.vue';
|
||||
|
||||
const tabbar = computed(() => {
|
||||
return sheep.$store('app').template.basic?.tabbar;
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
activeUrl: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cover-view-ctn {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: -1px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
box-shadow: 0px -2px 4px 0px rgba(51, 51, 51, 0.06);
|
||||
z-index: 9999;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
background: #fff;
|
||||
|
||||
.cover-tabbar-item {
|
||||
flex: 1;
|
||||
|
||||
.content-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 32px;
|
||||
|
||||
.tabbar-icon {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.active-line {
|
||||
width: 20rpx;
|
||||
height: 1rpx;
|
||||
background: #000;
|
||||
position: absolute;
|
||||
left: calc(50% - 10rpx);
|
||||
bottom: 0rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+58
-94
@@ -1,94 +1,58 @@
|
||||
<!-- 这里是模板原来的首页代码 -->
|
||||
<!-- 首页，支持店铺装修 -->
|
||||
<template>
|
||||
<view v-if="template">
|
||||
<s-layout
|
||||
title="首页"
|
||||
navbar="custom"
|
||||
tabbar="/pages/index/index"
|
||||
:bgStyle="template.page"
|
||||
:navbarStyle="template.navigationBar"
|
||||
onShareAppMessage
|
||||
>
|
||||
<s-block
|
||||
v-for="(item, index) in template.components"
|
||||
:key="index"
|
||||
:styles="item.property.style"
|
||||
>
|
||||
<s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
|
||||
</s-block>
|
||||
</s-layout>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { onLoad, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import $share from '@/sheep/platform/share';
|
||||
// 隐藏原生tabBar
|
||||
uni.hideTabBar({
|
||||
fail: () => {},
|
||||
});
|
||||
|
||||
const template = computed(() => sheep.$store('app').template?.home);
|
||||
// 在此处拦截改变一下首页轮播图 此处先写死后期复活 放到启动函数里
|
||||
// (async function() {
|
||||
// console.log('原代码首页定制化数据',template)
|
||||
// let {
|
||||
// data
|
||||
// } = await index2Api.decorate();
|
||||
// console.log('首页导航配置化过高无法兼容',JSON.parse(data[1].value))
|
||||
// 改变首页底部数据 但是没有通过数组id获取商品数据接口
|
||||
// let {
|
||||
// data: datas
|
||||
// } = await index2Api.spids();
|
||||
// template.value.data[9].data.goodsIds = datas.list.map(item => item.id);
|
||||
// template.value.data[0].data.list = JSON.parse(data[0].value).map(item => {
|
||||
// return {
|
||||
// src: item.picUrl,
|
||||
// url: item.url,
|
||||
// title: item.name,
|
||||
// type: "image"
|
||||
// }
|
||||
// })
|
||||
// }())
|
||||
|
||||
onLoad((options) => {
|
||||
// #ifdef MP
|
||||
// 小程序识别二维码
|
||||
if (options.scene) {
|
||||
const sceneParams = decodeURIComponent(options.scene).split('=');
|
||||
console.log('sceneParams=>', sceneParams);
|
||||
options[sceneParams[0]] = sceneParams[1];
|
||||
}
|
||||
// #endif
|
||||
|
||||
// 预览模板
|
||||
if (options.templateId) {
|
||||
sheep.$store('app').init(options.templateId);
|
||||
}
|
||||
|
||||
// 解析分享信息
|
||||
if (options.spm) {
|
||||
$share.decryptSpm(options.spm);
|
||||
}
|
||||
|
||||
// 进入指定页面(完整页面路径)
|
||||
if (options.page) {
|
||||
sheep.$router.go(decodeURIComponent(options.page));
|
||||
}
|
||||
});
|
||||
|
||||
// 下拉刷新
|
||||
onPullDownRefresh(() => {
|
||||
sheep.$store('app').init();
|
||||
setTimeout(function () {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 800);
|
||||
});
|
||||
|
||||
onPageScroll(() => {});
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
<template>
|
||||
<view>
|
||||
<s-layout title="首页" navbar="custom" tabbar="" :bgStyle="{ color: '#fff' }">
|
||||
<web-view :src="url">
|
||||
<cover-view-tabbar activeUrl="/pages/index/index" />
|
||||
</web-view>
|
||||
</s-layout>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { onLoad, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import $share from '@/sheep/platform/share';
|
||||
import CoverViewTabbar from '@/pages/index/components/cover-view-tabbar.vue';
|
||||
|
||||
// 隐藏原生tabBar
|
||||
uni.hideTabBar({
|
||||
fail: () => {},
|
||||
});
|
||||
|
||||
const tabbar = computed(() => {
|
||||
return sheep.$store('app').template.basic?.tabbar;
|
||||
});
|
||||
|
||||
const template = computed(() => sheep.$store('app').template?.home);
|
||||
|
||||
onLoad((options) => {
|
||||
// #ifdef MP
|
||||
// 小程序识别二维码
|
||||
if (options.scene) {
|
||||
const sceneParams = decodeURIComponent(options.scene).split('=');
|
||||
console.log('sceneParams=>', sceneParams);
|
||||
options[sceneParams[0]] = sceneParams[1];
|
||||
}
|
||||
// #endif
|
||||
|
||||
// 预览模板
|
||||
if (options.templateId) {
|
||||
sheep.$store('app').init(options.templateId);
|
||||
}
|
||||
|
||||
// 解析分享信息
|
||||
if (options.spm) {
|
||||
$share.decryptSpm(options.spm);
|
||||
}
|
||||
|
||||
// 进入指定页面(完整页面路径)
|
||||
if (options.page) {
|
||||
sheep.$router.go(decodeURIComponent(options.page));
|
||||
}
|
||||
});
|
||||
|
||||
const url = ref('https://www.baidu.com');
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
>
|
||||
{{ sortState.sortList[0].name }}
|
||||
<image
|
||||
src="https://3d.aidigitalfield.com/imgs/down-icon.png"
|
||||
src="https://puton.huimeimeta.com/imgs/down-icon.png"
|
||||
style="width: 36rpx; height: 36rpx"
|
||||
/>
|
||||
</view>
|
||||
@@ -130,6 +130,8 @@
|
||||
onLoad(async (params) => {
|
||||
await getCategoryList();
|
||||
getList();
|
||||
|
||||
// await CategoryApi.getCategoryTree();
|
||||
});
|
||||
|
||||
const categoryState = reactive({
|
||||
@@ -155,6 +157,7 @@
|
||||
sort: 0,
|
||||
order: false,
|
||||
});
|
||||
console.log(categoryState.categoryList, 'categoryState.categoryList');
|
||||
}
|
||||
|
||||
const sortState = reactive({
|
||||
|
||||
+45
-5
@@ -17,9 +17,14 @@
|
||||
<s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
|
||||
</s-block>
|
||||
<userTryOn />
|
||||
|
||||
<view class="logout-box" v-if="isLogin">
|
||||
<button class="ss-rest-button logout-btn" @click="handleLayout">退出登录</button>
|
||||
</view>
|
||||
|
||||
<!-- 购物车 -->
|
||||
<view class="cart-box" @click="sheep.$router.go('/pages/index/cart')">
|
||||
<uni-icons type="cart" size="28" color="#fff" />
|
||||
<view class="chat-box" @click="sheep.$router.go('/pages/chat/index')">
|
||||
<uni-icons type="chat" size="28" color="#fff" />
|
||||
</view>
|
||||
</s-layout>
|
||||
</template>
|
||||
@@ -30,6 +35,7 @@
|
||||
import sheep from '@/sheep';
|
||||
import userAvatarCard from './components/user-avatar-card.vue';
|
||||
import userTryOn from './components/user-tryOn.vue';
|
||||
import AuthUtil from '@/sheep/api/member/auth';
|
||||
|
||||
// 隐藏原生tabBar
|
||||
uni.hideTabBar({
|
||||
@@ -37,6 +43,7 @@
|
||||
});
|
||||
|
||||
const template = computed(() => sheep.$store('app').template.user);
|
||||
const isLogin = computed(() => sheep.$store('user').isLogin);
|
||||
|
||||
onShow(() => {
|
||||
sheep.$store('user').updateUserData();
|
||||
@@ -54,18 +61,51 @@
|
||||
const pattern = reactive({
|
||||
icon: 'uni-icons-heart',
|
||||
});
|
||||
|
||||
const handleLayout = () => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认注销账号？',
|
||||
success: async function (res) {
|
||||
if (!res.confirm) {
|
||||
return;
|
||||
}
|
||||
const { code } = await AuthUtil.logout();
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
sheep.$store('user').logout();
|
||||
sheep.$router.go('/pages/login/index');
|
||||
},
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cart-box {
|
||||
.chat-box {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
background: red;
|
||||
background: #000;
|
||||
position: fixed;
|
||||
bottom: 80px;
|
||||
bottom: 100px;
|
||||
right: 10px;
|
||||
text-align: center;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
.logout-box {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 24rpx 0;
|
||||
background: #fff;
|
||||
.logout-btn {
|
||||
width: 710rpx;
|
||||
height: 80rpx;
|
||||
background: linear-gradient(90deg, #000, #000);
|
||||
border-radius: 40rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user