|
|
@@ -1,17 +1,51 @@
|
|
|
<template>
|
|
|
- <view class="body">
|
|
|
+ <view @tap="showChannelMenu(false)" class="body">
|
|
|
<view class="state-bar"></view>
|
|
|
<view class="head">
|
|
|
<view class="left">
|
|
|
<view class="avatar-cont">
|
|
|
- <image class="avatar" src="/static/icons/ins.png" ></image>
|
|
|
- <text class="name">Instagram</text>
|
|
|
+ <view :class="['change-channel',isShowChannelMenu?'show':'']">
|
|
|
+ <view @tap="setChannel()" class="channel-item">
|
|
|
+ <image mode="aspectFit" class="avatar" src="/static/icons/whatsapp.png" ></image>
|
|
|
+ <text class="name">WhatsApp商业账号</text>
|
|
|
+ </view>
|
|
|
+ <view @tap="setChannel()" class="channel-item">
|
|
|
+ <image mode="aspectFit" class="avatar" src="/static/icons/whatsapp.png" ></image>
|
|
|
+ <text class="name">WhatsApp个人账号</text>
|
|
|
+ </view>
|
|
|
+ <view @tap="setChannel()" class="channel-item">
|
|
|
+ <image mode="aspectFit" class="avatar" src="/static/icons/facebook.png" ></image>
|
|
|
+ <text class="name">Fackbook Messager</text>
|
|
|
+ </view>
|
|
|
+ <view @tap="setChannel()" class="channel-item">
|
|
|
+ <image mode="aspectFit" class="avatar" src="/static/icons/ins.png" ></image>
|
|
|
+ <text class="name">Instagram</text>
|
|
|
+ </view>
|
|
|
+ <view @tap="setChannel()" class="channel-item">
|
|
|
+ <image mode="aspectFit" class="avatar" src="/static/icons/line.png" ></image>
|
|
|
+ <text class="name">Line</text>
|
|
|
+ </view>
|
|
|
+ <view @tap="setChannel()" class="channel-item">
|
|
|
+ <image mode="aspectFit" class="avatar" src="/static/icons/wechat-m.png" ></image>
|
|
|
+ <text class="name">微信公众号</text>
|
|
|
+ </view>
|
|
|
+ <view @tap="setChannel()" class="channel-item">
|
|
|
+ <image mode="aspectFit" class="avatar" src="/static/icons/wechat-b.png" ></image>
|
|
|
+ <text class="name">企业微信</text>
|
|
|
+ </view>
|
|
|
+ <view @tap="setChannel()" class="channel-item">
|
|
|
+ <image mode="aspectFit" class="avatar" src="/static/icons/webchat.png" ></image>
|
|
|
+ <text class="name">网页AI客服</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <image @tap.stop="showChannelMenu(true)" class="avatar" src="/static/icons/ins.png" ></image>
|
|
|
+ <text @tap.stop="showChannelMenu(true)" class="name">Instagram</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="center title">聊天</view>
|
|
|
+ <view class="center title">聊天(72)</view>
|
|
|
<view class="right"></view>
|
|
|
</view>
|
|
|
- <view class="scroll-cont">
|
|
|
+ <view v-if="userInfo.token" class="scroll-cont">
|
|
|
<scroll-view :scroll-y="true" class="scroll-view">
|
|
|
<view class="chat-item">
|
|
|
<view class="avatar-cont">
|
|
|
@@ -105,6 +139,12 @@
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
</view>
|
|
|
+ <navigator url="/pages/user/login" v-else class="no-login">
|
|
|
+ <view url="/pages/user/login" class="login-lock" v-if="!userInfo.token">
|
|
|
+ <view class="title">登录/注册</view>
|
|
|
+ <view class="sub-title">解锁您的AI营销黑科技</view>
|
|
|
+ </view>
|
|
|
+ </navigator>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -112,8 +152,29 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- chatType:'facebook'
|
|
|
+ chatType:'facebook',
|
|
|
+ isShowChannelMenu: false
|
|
|
};
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * 设定通道菜单打开状态
|
|
|
+ * @param {Boolean} 设定通道菜单打开状态
|
|
|
+ */
|
|
|
+ showChannelMenu(state){
|
|
|
+ this.isShowChannelMenu = state
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 切换聊天通道
|
|
|
+ */
|
|
|
+ setChannel(){
|
|
|
+ this.isShowChannelMenu = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ userInfo() {
|
|
|
+ return this.$store.getters.userInfo
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -126,6 +187,7 @@
|
|
|
.left{
|
|
|
position: relative;
|
|
|
.avatar-cont{
|
|
|
+ z-index: 3;
|
|
|
display: flex;
|
|
|
gap: 12rpx;
|
|
|
align-items: center;
|
|
|
@@ -141,6 +203,68 @@
|
|
|
.name{
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
+ .change-channel{
|
|
|
+ transition-duration: 300ms;
|
|
|
+ transform-origin: 0% 0%;
|
|
|
+ box-shadow: 0 0 16rpx 0 #00000018;
|
|
|
+ z-index: 3;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: -24rpx;
|
|
|
+ top: -24rpx;
|
|
|
+ width: 340rpx;
|
|
|
+ padding: 12rpx;
|
|
|
+ background-color: white;
|
|
|
+ pointer-events: none;
|
|
|
+ opacity: 0;
|
|
|
+ scale: 0.9;
|
|
|
+ .channel-item{
|
|
|
+ border-radius: 12rpx;
|
|
|
+ padding: 12rpx;
|
|
|
+ height: 46rpx;
|
|
|
+ display: flex;
|
|
|
+ gap: 12rpx;
|
|
|
+ align-items: center;
|
|
|
+ .avatar{
|
|
|
+ width: 46rpx;
|
|
|
+ height: 46rpx;
|
|
|
+ }
|
|
|
+ .name{
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ &:active{
|
|
|
+ background-color: #f6f6f6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.show{
|
|
|
+ pointer-events: auto;
|
|
|
+ opacity: 1;
|
|
|
+ scale: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .no-login{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .login-lock{
|
|
|
+ z-index: 2;
|
|
|
+ gap: 4rpx;
|
|
|
+ color: gray;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .title{
|
|
|
+ font-size: 38rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ .sub-title{
|
|
|
+ font-size: 26rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -148,6 +272,7 @@
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
+
|
|
|
.scroll-view{
|
|
|
position: absolute;
|
|
|
left: 0;
|