This commit is contained in:
lr
parent
b1b68d68ef
commit
307b25d08d
135
jiuyi2/App.vue
135
jiuyi2/App.vue
|
|
@ -1,59 +1,96 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import {
|
import {
|
||||||
onLaunch,
|
onLaunch,
|
||||||
} from '@dcloudio/uni-app'
|
} from '@dcloudio/uni-app'
|
||||||
// 工具库
|
// 工具库
|
||||||
import util from '@/common/js/util';
|
import util from '@/common/js/util';
|
||||||
//
|
//
|
||||||
import api from '@/api/index.js'
|
import api from '@/api/index.js'
|
||||||
// vuex
|
// vuex
|
||||||
import store from '@/store/index.js'
|
import store from '@/store/index.js'
|
||||||
|
|
||||||
onLaunch(() => {
|
|
||||||
// 获取用户信息
|
|
||||||
getUserinfo()
|
|
||||||
// 获取系统配置
|
|
||||||
getConfig()
|
|
||||||
})
|
|
||||||
|
|
||||||
|
onLaunch(() => {
|
||||||
// 获取用户信息
|
// 获取用户信息
|
||||||
function getUserinfo() {
|
getUserinfo()
|
||||||
// 登录令牌
|
|
||||||
const token = uni.getStorageSync('token')
|
|
||||||
// 用户信息
|
|
||||||
const userinfo = uni.getStorageSync('userinfo')
|
|
||||||
|
|
||||||
// 如果登录保活
|
|
||||||
if (token) {
|
|
||||||
// 用户信息
|
|
||||||
if (userinfo) store.commit('setState', {
|
|
||||||
key: 'userinfo',
|
|
||||||
value: userinfo
|
|
||||||
})
|
|
||||||
|
|
||||||
//
|
|
||||||
util.getUserinfo().then(rs => {
|
|
||||||
// 腾讯im登录
|
|
||||||
util.loginTencent(userinfo)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取系统配置
|
// 获取系统配置
|
||||||
function getConfig() {
|
getConfig()
|
||||||
api.getConfig().then(rs => {
|
// 获取未读消息数量
|
||||||
if (rs.code == 200) {
|
getNoReadNum()
|
||||||
store.commit('setState', {
|
})
|
||||||
key: 'config',
|
|
||||||
value: rs.data
|
// 获取用户信息
|
||||||
})
|
function getUserinfo() {
|
||||||
return
|
// 登录令牌
|
||||||
}
|
const token = uni.getStorageSync('token')
|
||||||
|
// 用户信息
|
||||||
|
const userinfo = uni.getStorageSync('userinfo')
|
||||||
|
|
||||||
|
// 如果登录保活
|
||||||
|
if (token) {
|
||||||
|
// 用户信息
|
||||||
|
if (userinfo) store.commit('setState', {
|
||||||
|
key: 'userinfo',
|
||||||
|
value: userinfo
|
||||||
|
})
|
||||||
|
|
||||||
|
//
|
||||||
|
util.getUserinfo().then(rs => {
|
||||||
|
// 腾讯im登录
|
||||||
|
util.loginTencent(userinfo)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取系统配置
|
||||||
|
function getConfig() {
|
||||||
|
api.getConfig().then(rs => {
|
||||||
|
if (rs.code == 200) {
|
||||||
|
store.commit('setState', {
|
||||||
|
key: 'config',
|
||||||
|
value: rs.data
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取未读消息数量
|
||||||
|
async function getNoReadNum() {
|
||||||
|
// uni.removeTabBarBadge({
|
||||||
|
// index: 2,
|
||||||
|
// text: "",
|
||||||
|
// });
|
||||||
|
// api.getNoReadNum().then(rs => {
|
||||||
|
// if (rs.code == 200) {
|
||||||
|
// uni.setTabBarBadge({
|
||||||
|
// index: 0,
|
||||||
|
// text: "11",
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
|
||||||
|
// uni.setTabBarBadge({
|
||||||
|
// index: 2,
|
||||||
|
// text: "11",
|
||||||
|
// });
|
||||||
|
|
||||||
|
// const res = await uni.request({ url: 'API_URL' });
|
||||||
|
// const count = res.data.unread;
|
||||||
|
|
||||||
|
|
||||||
|
// setTimeout(() => {
|
||||||
|
// uni.setTabBarBadge({
|
||||||
|
// index: 1,
|
||||||
|
// text: '10',
|
||||||
|
// success: function () {
|
||||||
|
// console.log(11111);
|
||||||
|
// },
|
||||||
|
// })
|
||||||
|
// }, 1000)
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
/*每个页面公共css */
|
/*每个页面公共css */
|
||||||
@import "./common/css/style.scss";
|
@import "./common/css/style.scss";
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -85,6 +85,17 @@ const api = {
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取未读消息数量
|
||||||
|
* @param {Object} param
|
||||||
|
*/
|
||||||
|
getNoReadNum() {
|
||||||
|
return util.request({
|
||||||
|
url: '/shopify/region/all',
|
||||||
|
method: 'GET',
|
||||||
|
})
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
export default api
|
export default api
|
||||||
|
|
@ -6,8 +6,8 @@ const config = {
|
||||||
// host: 'h5api',
|
// host: 'h5api',
|
||||||
// #endif
|
// #endif
|
||||||
// #ifndef H5
|
// #ifndef H5
|
||||||
host: 'http://91f.xyz:8080',
|
// host: 'http://91f.xyz:8080',
|
||||||
// host: 'https://b433d23.r24.cpolar.top/',
|
host: 'https://b433d23.r24.cpolar.top/',
|
||||||
// host: 'http://hvw2rn.natappfree.cc',
|
// host: 'http://hvw2rn.natappfree.cc',
|
||||||
// #endif
|
// #endif
|
||||||
// 支付方式配置
|
// 支付方式配置
|
||||||
|
|
|
||||||
|
|
@ -1,220 +1,244 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
/** 底部菜单导航
|
/** 底部菜单导航
|
||||||
* 底部导航的规则
|
* 底部导航的规则
|
||||||
* 视频端显示：
|
* 视频端显示：
|
||||||
* 视频 商城 消息 我的(视频我的)
|
* 视频 商城 消息 我的(视频我的)
|
||||||
* 商城端显示：
|
* 商城端显示：
|
||||||
* 视频 商城 消息 个人中心(商城我的)
|
* 视频 商城 消息 个人中心(商城我的)
|
||||||
*/
|
*/
|
||||||
import {
|
import {
|
||||||
ref,
|
ref,
|
||||||
computed,
|
computed,
|
||||||
onMounted,
|
onMounted,
|
||||||
onUnmounted,
|
onUnmounted,
|
||||||
getCurrentInstance,
|
getCurrentInstance,
|
||||||
reactive,
|
reactive,
|
||||||
watch,
|
watch,
|
||||||
} from 'vue'
|
} from 'vue'
|
||||||
// 工具库
|
// 工具库
|
||||||
import util from '@/common/js/util';
|
import util from '@/common/js/util';
|
||||||
const {
|
const {
|
||||||
proxy
|
proxy
|
||||||
} = getCurrentInstance()
|
} = getCurrentInstance()
|
||||||
// 接收参数
|
// 接收参数
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
page: {
|
page: {
|
||||||
type: String,
|
type: String,
|
||||||
},
|
},
|
||||||
// 主题 dark黑色 light白色的
|
// 主题 dark黑色 light白色的
|
||||||
subject: {
|
subject: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'light',
|
default: 'light',
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
// 用户信息
|
// 用户信息
|
||||||
const userinfo = computed(() => {
|
const userinfo = computed(() => {
|
||||||
let resuilt = uni.$store.state.userinfo
|
let resuilt = uni.$store.state.userinfo
|
||||||
return resuilt
|
return resuilt
|
||||||
})
|
})
|
||||||
// 展示模式 商城shop 默认default
|
// 展示模式 商城shop 默认default
|
||||||
const mode = computed(() => uni.$store.state.tabbarMode)
|
const mode = computed(() => uni.$store.state.tabbarMode)
|
||||||
// 底部菜单
|
// 底部菜单
|
||||||
const menu = computed(() => {
|
const menu = computed(() => {
|
||||||
let arr = [{
|
let arr = [{
|
||||||
page: 'index',
|
page: 'index',
|
||||||
|
type: 'option',
|
||||||
|
name: '视频',
|
||||||
|
labelType: 'default',
|
||||||
|
pagePath: 'pages/index/index',
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// page: '',
|
||||||
|
// type: 'option',
|
||||||
|
// name: '榴莲果',
|
||||||
|
// pagePath: 'pages/index/durian',
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
page: 'shop',
|
||||||
|
type: 'option',
|
||||||
|
name: '商城',
|
||||||
|
labelType: 'shop',
|
||||||
|
pagePath: 'pages/shop/shop'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'middle',
|
||||||
|
name: '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
page: 'news',
|
||||||
|
type: 'option',
|
||||||
|
name: '消息',
|
||||||
|
pagePath: 'pages/news/news',
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
switch (mode.value) {
|
||||||
|
case 'default':
|
||||||
|
arr.push({
|
||||||
|
page: 'homepage',
|
||||||
type: 'option',
|
type: 'option',
|
||||||
name: '视频',
|
name: '我的',
|
||||||
labelType: 'default',
|
labelType: 'default',
|
||||||
pagePath: 'pages/index/index',
|
pagePath: 'pages/mine/homepage',
|
||||||
},
|
})
|
||||||
// {
|
break;
|
||||||
// page: '',
|
case 'shop':
|
||||||
// type: 'option',
|
arr.push({
|
||||||
// name: '榴莲果',
|
page: 'mine',
|
||||||
// pagePath: 'pages/index/durian',
|
|
||||||
// },
|
|
||||||
{
|
|
||||||
page: 'shop',
|
|
||||||
type: 'option',
|
type: 'option',
|
||||||
name: '商城',
|
name: '个人中心',
|
||||||
labelType: 'shop',
|
labelType: 'shop',
|
||||||
pagePath: 'pages/shop/shop'
|
pagePath: 'pages/mine/mine',
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'middle',
|
|
||||||
name: '',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
page: 'news',
|
|
||||||
type: 'option',
|
|
||||||
name: '消息',
|
|
||||||
pagePath: 'pages/news/news',
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
switch (mode.value) {
|
|
||||||
case 'default':
|
|
||||||
arr.push({
|
|
||||||
page: 'homepage',
|
|
||||||
type: 'option',
|
|
||||||
name: '我的',
|
|
||||||
labelType: 'default',
|
|
||||||
pagePath: 'pages/mine/homepage',
|
|
||||||
})
|
|
||||||
break;
|
|
||||||
case 'shop':
|
|
||||||
arr.push({
|
|
||||||
page: 'mine',
|
|
||||||
type: 'option',
|
|
||||||
name: '个人中心',
|
|
||||||
labelType: 'shop',
|
|
||||||
pagePath: 'pages/mine/mine',
|
|
||||||
})
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
return arr
|
|
||||||
})
|
|
||||||
// 安全区高度
|
|
||||||
let safeHeight = ref(0)
|
|
||||||
|
|
||||||
// 弹窗菜单
|
|
||||||
const showMenu = computed(() => {
|
|
||||||
let result = []
|
|
||||||
|
|
||||||
// 验证登录
|
|
||||||
if (userinfo.value.id) {
|
|
||||||
result.push({
|
|
||||||
name: '发布视频',
|
|
||||||
img: '/static/footerMenu1.png',
|
|
||||||
url: '/pages/release/video',
|
|
||||||
})
|
})
|
||||||
}
|
break;
|
||||||
// 1是商家
|
}
|
||||||
// if(userinfo.value.isShop == 1) {
|
return arr
|
||||||
// result.push({
|
})
|
||||||
// name: '发布商品',
|
// 安全区高度
|
||||||
// img: '/static/footerMenu1.png',
|
let safeHeight = ref(0)
|
||||||
// url: '/pages/release/commodity',
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
// 追加
|
|
||||||
// result.push({
|
|
||||||
// name: '打车',
|
|
||||||
// }, {
|
|
||||||
// name: '充电',
|
|
||||||
// }, {
|
|
||||||
// name: '到店美食',
|
|
||||||
// }, {
|
|
||||||
// name: '出行',
|
|
||||||
// }, {
|
|
||||||
// name: '家政',
|
|
||||||
// })
|
|
||||||
return result
|
|
||||||
})
|
|
||||||
|
|
||||||
// 加载完成之后
|
// 弹窗菜单
|
||||||
onMounted(() => {
|
const showMenu = computed(() => {
|
||||||
// 开启监听
|
let result = []
|
||||||
addListener()
|
|
||||||
// 隐藏tabbar
|
// 验证登录
|
||||||
uni.hideTabBar()
|
if (userinfo.value.id) {
|
||||||
// 系统信息
|
result.push({
|
||||||
uni.getSystemInfo().then(rs => {
|
name: '发布视频',
|
||||||
safeHeight.value = rs.safeArea + 'px'
|
img: '/static/footerMenu1.png',
|
||||||
|
url: '/pages/release/video',
|
||||||
})
|
})
|
||||||
|
}
|
||||||
|
// 1是商家
|
||||||
|
// if(userinfo.value.isShop == 1) {
|
||||||
|
// result.push({
|
||||||
|
// name: '发布商品',
|
||||||
|
// img: '/static/footerMenu1.png',
|
||||||
|
// url: '/pages/release/commodity',
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
// 追加
|
||||||
|
// result.push({
|
||||||
|
// name: '打车',
|
||||||
|
// }, {
|
||||||
|
// name: '充电',
|
||||||
|
// }, {
|
||||||
|
// name: '到店美食',
|
||||||
|
// }, {
|
||||||
|
// name: '出行',
|
||||||
|
// }, {
|
||||||
|
// name: '家政',
|
||||||
|
// })
|
||||||
|
return result
|
||||||
|
})
|
||||||
|
|
||||||
//
|
// 未读数量
|
||||||
// proxy.$refs.alert.open()
|
const noReadNum = ref(0)
|
||||||
})
|
|
||||||
|
|
||||||
// 卸载
|
|
||||||
onUnmounted(() => {
|
|
||||||
uni.$off('changeMine')
|
|
||||||
})
|
|
||||||
|
|
||||||
|
// 加载完成之后
|
||||||
|
onMounted(() => {
|
||||||
// 开启监听
|
// 开启监听
|
||||||
function addListener() {
|
addListener()
|
||||||
// 修改个人中心的状态
|
// 隐藏tabbar
|
||||||
uni.$on('changeMine', (value) => {
|
uni.hideTabBar()
|
||||||
uni.$store.commit('setState', {
|
// 系统信息
|
||||||
key: 'tabbarMode',
|
uni.getSystemInfo().then(rs => {
|
||||||
value,
|
safeHeight.value = rs.safeArea + 'px'
|
||||||
})
|
})
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
//
|
||||||
* 点击菜单
|
// proxy.$refs.alert.open()
|
||||||
* @param {Object} item 当前点击的菜单项
|
|
||||||
*/
|
// 获取未读消息数量
|
||||||
function handleMenu(item) {
|
getNoReadNum()
|
||||||
if (item.type != 'middle') {
|
})
|
||||||
// 判断是否配置页
|
|
||||||
if (item.page) uni.switchTab({
|
// 卸载
|
||||||
url: `/${item.pagePath}`,
|
onUnmounted(() => {
|
||||||
})
|
uni.$off('changeMine')
|
||||||
else uni.navigateTo({
|
})
|
||||||
url: `/${item.pagePath}`,
|
|
||||||
})
|
// 开启监听
|
||||||
return
|
function addListener() {
|
||||||
|
// 修改个人中心的状态
|
||||||
|
uni.$on('changeMine', (value) => {
|
||||||
|
uni.$store.commit('setState', {
|
||||||
|
key: 'tabbarMode',
|
||||||
|
value,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 点击菜单
|
||||||
|
* @param {Object} item 当前点击的菜单项
|
||||||
|
*/
|
||||||
|
function handleMenu(item) {
|
||||||
|
if (item.type != 'middle') {
|
||||||
|
// 判断是否配置页
|
||||||
|
if (item.page) uni.switchTab({
|
||||||
|
url: `/${item.pagePath}`,
|
||||||
|
})
|
||||||
|
else uni.navigateTo({
|
||||||
|
url: `/${item.pagePath}`,
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
//
|
||||||
|
proxy.$refs.alert.open()
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 内容
|
||||||
|
* @param {Object} ev
|
||||||
|
*/
|
||||||
|
function handleAlert(ev) {
|
||||||
|
const index = ev.detail.index
|
||||||
|
const item = showMenu.value[index]
|
||||||
|
// 验证
|
||||||
|
util.isAuth({
|
||||||
|
success: rs => {
|
||||||
|
//
|
||||||
|
if (item.url) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: item.url,
|
||||||
|
})
|
||||||
|
} else util.alert('敬请期待')
|
||||||
}
|
}
|
||||||
//
|
})
|
||||||
proxy.$refs.alert.open()
|
//
|
||||||
|
proxy.$refs.alert.close()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取未读消息数量
|
||||||
|
function getNoReadNum() {
|
||||||
|
// 验证sdk是否准备完毕
|
||||||
|
let isReady = uni.$chat.isReady();
|
||||||
|
if (!isReady) {
|
||||||
|
setTimeout(function () {
|
||||||
|
getNoReadNum();
|
||||||
|
}, 800);
|
||||||
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
const unreadCount = uni.$chat.getTotalUnreadMessageCount();
|
||||||
* 内容
|
|
||||||
* @param {Object} ev
|
noReadNum.value = +unreadCount > 99 ? '99+' : unreadCount;
|
||||||
*/
|
|
||||||
function handleAlert(ev) {
|
}
|
||||||
const index = ev.detail.index
|
|
||||||
const item = showMenu.value[index]
|
|
||||||
// 验证
|
|
||||||
util.isAuth({
|
|
||||||
success: rs => {
|
|
||||||
//
|
|
||||||
if (item.url) {
|
|
||||||
uni.navigateTo({
|
|
||||||
url: item.url,
|
|
||||||
})
|
|
||||||
} else util.alert('敬请期待')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
//
|
|
||||||
proxy.$refs.alert.close()
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<!-- 幽灵盒子 -->
|
<!-- 幽灵盒子 -->
|
||||||
<view class="ghost" :style="{paddingBottom: safeHeight}"></view>
|
<view class="ghost" :style="{ paddingBottom: safeHeight }"></view>
|
||||||
<!-- 底部导航 -->
|
<!-- 底部导航 -->
|
||||||
<view class="menuBox" :class="subject">
|
<view class="menuBox" :class="subject">
|
||||||
<view class="menu">
|
<view class="menu">
|
||||||
<view class="item" v-for="(item,index) in menu" :key="index" @click="handleMenu(item)">
|
<view class="item" v-for="(item, index) in menu" :key="index" @click="handleMenu(item)">
|
||||||
|
|
||||||
<view class="option" :class="{active: item.page === page}" v-if="item.type == 'option'">
|
<view class="option" :class="{ active: item.page === page }" v-if="item.type == 'option'">
|
||||||
<text class="text">{{item.name}}</text>
|
<text class="text">{{ item.name }}</text>
|
||||||
|
<span class="pot" v-if="item.page == 'news' && noReadNum != 0">{{ noReadNum }}</span>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="middle" v-else-if="item.type === 'middle'">
|
<view class="middle" v-else-if="item.type === 'middle'">
|
||||||
|
|
@ -224,7 +248,7 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="safeArea" :style="{height: safeHeight}"></view>
|
<view class="safeArea" :style="{ height: safeHeight }"></view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 底部菜单 -->
|
<!-- 底部菜单 -->
|
||||||
|
|
@ -237,7 +261,7 @@
|
||||||
<!-- <uni-icons type="image" :size="30" color="#777" /> -->
|
<!-- <uni-icons type="image" :size="30" color="#777" /> -->
|
||||||
<image class="wh80" :src="item.img" mode="aspectFill" />
|
<image class="wh80" :src="item.img" mode="aspectFill" />
|
||||||
<view class="mt5">
|
<view class="mt5">
|
||||||
<text class="text f28 c333">{{item.name}}</text>
|
<text class="text f28 c333">{{ item.name }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</uni-grid-item>
|
</uni-grid-item>
|
||||||
|
|
@ -252,97 +276,116 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
$boderSize: 2rpx;
|
$boderSize: 2rpx;
|
||||||
|
|
||||||
// 幽灵盒子
|
// 幽灵盒子
|
||||||
.ghost {
|
.ghost {
|
||||||
height: 120rpx;
|
height: 120rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 菜单
|
// 菜单
|
||||||
.menuBox {
|
.menuBox {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20rpx 0;
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
box-sizing: border-box;
|
display: flex;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
flex-direction: row;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
.menu {
|
.item {
|
||||||
justify-content: space-between;
|
/* #ifndef APP-NVUE */
|
||||||
padding: 20rpx 0;
|
display: flex;
|
||||||
/* #ifndef APP-NVUE */
|
/* #endif */
|
||||||
display: flex;
|
align-items: center;
|
||||||
/* #endif */
|
justify-content: center;
|
||||||
/* #ifdef APP-NVUE */
|
flex: 1;
|
||||||
flex-direction: row;
|
}
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
|
|
||||||
.item {
|
// 黑色的
|
||||||
/* #ifndef APP-NVUE */
|
&.dark {
|
||||||
display: flex;
|
border-top: 1rpx solid #999;
|
||||||
/* #endif */
|
background-color: #161616;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 黑色的
|
|
||||||
&.dark {
|
|
||||||
border-top: 1rpx solid #999;
|
|
||||||
background-color: #161616;
|
|
||||||
|
|
||||||
.active {
|
|
||||||
.text {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
.active {
|
||||||
.text {
|
.text {
|
||||||
color: #999;
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 浅色的
|
.text {
|
||||||
&.light {
|
color: #999;
|
||||||
box-shadow: 0px 8px 20px rgba(0, 0, 0, .3);
|
}
|
||||||
background-color: #fff;
|
}
|
||||||
|
|
||||||
.active {
|
// 浅色的
|
||||||
.text {
|
&.light {
|
||||||
color: #333;
|
box-shadow: 0px 8px 20px rgba(0, 0, 0, .3);
|
||||||
}
|
background-color: #fff;
|
||||||
}
|
|
||||||
|
|
||||||
|
.active {
|
||||||
.text {
|
.text {
|
||||||
color: #999;
|
color: #333;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.middle {
|
.text {
|
||||||
.img {
|
color: #999;
|
||||||
width: 80rpx;
|
}
|
||||||
height: 80rpx;
|
|
||||||
|
.option {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.pot {
|
||||||
|
position: absolute;
|
||||||
|
top: -16rpx;
|
||||||
|
right: -30rpx;
|
||||||
|
height: 24rpx;
|
||||||
|
min-width: 24rpx;
|
||||||
|
line-height: 24rpx;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
background: #FF6B17;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20rpx;
|
||||||
|
padding: 4rpx;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 弹窗
|
.middle {
|
||||||
.alert {
|
.img {
|
||||||
margin-bottom: 120rpx;
|
width: 80rpx;
|
||||||
background-color: #f8f8f8;
|
height: 80rpx;
|
||||||
border-radius: 30rpx;
|
|
||||||
|
|
||||||
// 滚动块
|
|
||||||
.scroll {
|
|
||||||
height: 350rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
.itemBox {
|
|
||||||
// padding: 30rpx;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 弹窗
|
||||||
|
.alert {
|
||||||
|
margin-bottom: 120rpx;
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
|
||||||
|
// 滚动块
|
||||||
|
.scroll {
|
||||||
|
height: 350rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
.itemBox {
|
||||||
|
// padding: 30rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -54,17 +54,32 @@ const systemRightOption = [{
|
||||||
backgroundColor: '#00ADEE'
|
backgroundColor: '#00ADEE'
|
||||||
},
|
},
|
||||||
},]
|
},]
|
||||||
|
// 传入参数
|
||||||
|
const props = defineProps({
|
||||||
|
// 类型
|
||||||
|
type: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
// 用户列表
|
// 用户列表
|
||||||
const list = reactive([])
|
const list = reactive([])
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getList()
|
if (props.type == 0) {
|
||||||
|
getList()
|
||||||
|
} else if(props.type == 1) {
|
||||||
|
// 视频消息
|
||||||
|
} else if (props.type == 2) {
|
||||||
|
// 商城消息
|
||||||
|
}
|
||||||
|
|
||||||
addListener()
|
addListener()
|
||||||
})
|
})
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
removeListener()
|
// removeListener()
|
||||||
})
|
})
|
||||||
|
|
||||||
// 开启监听消息
|
// 开启监听消息
|
||||||
|
|
@ -81,7 +96,7 @@ function removeListener() {
|
||||||
uni.$chat.on(TencentCloudChat.EVENT.CONVERSATION_LIST_UPDATED);
|
uni.$chat.on(TencentCloudChat.EVENT.CONVERSATION_LIST_UPDATED);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取朋友列表
|
// 获取消息列表
|
||||||
function getList() {
|
function getList() {
|
||||||
api.news.getMessageList({
|
api.news.getMessageList({
|
||||||
query: {
|
query: {
|
||||||
|
|
@ -97,6 +112,17 @@ function getList() {
|
||||||
showCancel: false,
|
showCancel: false,
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// // 验证sdk是否准备完毕
|
||||||
|
// let isReady = uni.$chat.isReady();
|
||||||
|
// if (!isReady) {
|
||||||
|
// setTimeout(function () {
|
||||||
|
// getList();
|
||||||
|
// }, 1000);
|
||||||
|
// return
|
||||||
|
// }
|
||||||
|
|
||||||
|
// uni.$chat.getMessageList({})
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -144,7 +170,7 @@ function getGroupNoReadNum(groupId) {
|
||||||
if (!isReady) {
|
if (!isReady) {
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
getGroupNoReadNum(groupId);
|
getGroupNoReadNum(groupId);
|
||||||
}, 200);
|
}, 800);
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -187,7 +213,8 @@ function handleChat(item) {
|
||||||
param.msgId = `${item.groupId}`
|
param.msgId = `${item.groupId}`
|
||||||
param.num = `${item.groupChatDTO.memberCount}`
|
param.num = `${item.groupChatDTO.memberCount}`
|
||||||
}
|
}
|
||||||
//
|
|
||||||
|
setRead(item)
|
||||||
util.toChat(param)
|
util.toChat(param)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -209,7 +236,7 @@ function delMsg(item) {
|
||||||
if (!isReady) {
|
if (!isReady) {
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
delMsg(item);
|
delMsg(item);
|
||||||
}, 200);
|
}, 800);
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -227,7 +254,7 @@ function setRead(item) {
|
||||||
if (!isReady) {
|
if (!isReady) {
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
setRead(item);
|
setRead(item);
|
||||||
}, 200);
|
}, 800);
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -297,7 +324,7 @@ function setRead(item) {
|
||||||
|
|
||||||
<uni-swipe-action-item :right-options="rightOption" v-for="(item, index) in list.data" :key="index"
|
<uni-swipe-action-item :right-options="rightOption" v-for="(item, index) in list.data" :key="index"
|
||||||
@click="handleMenu($event, item)">
|
@click="handleMenu($event, item)">
|
||||||
<view class="item rows ptb20 plr30" @click="handleChat(item)">
|
<view class="item rows ptb20 plr30" @click.stop="handleChat(item)">
|
||||||
<view class="image wh90 pr">
|
<view class="image wh90 pr">
|
||||||
<template v-if="item.groupId == null">
|
<template v-if="item.groupId == null">
|
||||||
<image class="cir wh90" :src="item.callbackJson.from_url" mode="aspectFill" />
|
<image class="cir wh90" :src="item.callbackJson.from_url" mode="aspectFill" />
|
||||||
|
|
|
||||||
|
|
@ -1,159 +1,162 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
// 消息
|
// 消息
|
||||||
|
|
||||||
import {
|
import {
|
||||||
ref,
|
ref,
|
||||||
reactive,
|
reactive,
|
||||||
computed,
|
computed,
|
||||||
} from 'vue'
|
} from 'vue'
|
||||||
import {
|
import {
|
||||||
useStore,
|
useStore,
|
||||||
} from 'vuex'
|
} from 'vuex'
|
||||||
import {
|
import {
|
||||||
onLoad,
|
onLoad,
|
||||||
onUnload,
|
onUnload,
|
||||||
} from '@dcloudio/uni-app'
|
} from '@dcloudio/uni-app'
|
||||||
// 腾讯云聊天
|
// 腾讯云聊天
|
||||||
import TencentCloudChat from '@tencentcloud/chat';
|
import TencentCloudChat from '@tencentcloud/chat';
|
||||||
|
|
||||||
// 头部导航栏
|
// 头部导航栏
|
||||||
import apex from '@/components/header/apex'
|
import apex from '@/components/header/apex'
|
||||||
// 未登录
|
// 未登录
|
||||||
import noLogin from '@/components/login/noLogin.vue'
|
import noLogin from '@/components/login/noLogin.vue'
|
||||||
// 通讯录
|
// 通讯录
|
||||||
import book from '@/components/news/book'
|
import book from '@/components/news/book'
|
||||||
// 群聊列表
|
// 群聊列表
|
||||||
import groupList from '@/components/news/groupList'
|
import groupList from '@/components/news/groupList'
|
||||||
// 消息列表
|
// 消息列表
|
||||||
import msgList from '@/components/news/msgList'
|
import msgList from '@/components/news/msgList'
|
||||||
// 底部菜单
|
// 底部菜单
|
||||||
import footerMneu from '@/components/footerMenu/footerMenu'
|
import footerMneu from '@/components/footerMenu/footerMenu'
|
||||||
// 工具库
|
// 工具库
|
||||||
import util from '@/common/js/util.js'
|
import util from '@/common/js/util.js'
|
||||||
// vuex
|
// vuex
|
||||||
const store = useStore()
|
const store = useStore()
|
||||||
// 菜单列表
|
// 菜单列表
|
||||||
const menuList = reactive([{
|
const menuList = reactive([
|
||||||
key: 'friend',
|
{
|
||||||
name: '通讯录',
|
key: 'group',
|
||||||
load: false,
|
name: '即时消息',
|
||||||
},
|
load: true,
|
||||||
{
|
}, {
|
||||||
key: 'group',
|
key: 'friend',
|
||||||
name: '即时消息',
|
name: '通讯录',
|
||||||
load: false,
|
load: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'video',
|
key: 'video',
|
||||||
name: '视讯消息',
|
name: '视讯消息',
|
||||||
load: false,
|
load: false,
|
||||||
},
|
},
|
||||||
// {
|
{
|
||||||
// key: 'video',
|
key: 'store',
|
||||||
// name: '商城消息',
|
name: '商城消息',
|
||||||
// load: false,
|
load: false,
|
||||||
// },
|
},
|
||||||
])
|
])
|
||||||
// 菜单下标
|
// 菜单下标
|
||||||
const menuIndex = ref('')
|
const menuIndex = ref('')
|
||||||
// 是否显示搜索菜单
|
// 是否显示搜索菜单
|
||||||
const showSearch = ref(false)
|
const showSearch = ref(false)
|
||||||
// im加载
|
// im加载
|
||||||
const imLoad = ref(false)
|
const imLoad = ref(false)
|
||||||
// 用户信息
|
// 用户信息
|
||||||
const userinfo = computed(() => {
|
const userinfo = computed(() => {
|
||||||
return store.state.userinfo
|
return store.state.userinfo
|
||||||
})
|
})
|
||||||
// 当前选中的菜单
|
// 当前选中的菜单
|
||||||
const menuCurrent = computed(() => {
|
const menuCurrent = computed(() => {
|
||||||
return menuList[menuIndex.value]
|
return menuList[menuIndex.value]
|
||||||
})
|
})
|
||||||
|
|
||||||
onLoad(() => {
|
onLoad(() => {
|
||||||
// 初始化菜单
|
// 初始化菜单
|
||||||
handleMenuIndex(0)
|
handleMenuIndex(0)
|
||||||
|
|
||||||
// 开启监听
|
|
||||||
addListener()
|
|
||||||
})
|
|
||||||
|
|
||||||
onUnload(() => {
|
|
||||||
// 移除监听
|
|
||||||
removeListener()
|
|
||||||
})
|
|
||||||
|
|
||||||
// 开启监听
|
// 开启监听
|
||||||
function addListener() {
|
addListener()
|
||||||
uni.$chat.on(TencentCloudChat.EVENT.SDK_READY, imLoading);
|
})
|
||||||
}
|
|
||||||
|
|
||||||
// im加载完成
|
|
||||||
function imLoading() {
|
|
||||||
imLoad.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
|
onUnload(() => {
|
||||||
// 移除监听
|
// 移除监听
|
||||||
function removeListener() {
|
removeListener()
|
||||||
uni.$chat.off(TencentCloudChat.EVENT.SDK_READY);
|
})
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
// 开启监听
|
||||||
* 切换下标
|
function addListener() {
|
||||||
* @param {Number} index
|
uni.$chat.on(TencentCloudChat.EVENT.SDK_READY, imLoading);
|
||||||
*/
|
}
|
||||||
function handleMenuIndex(index) {
|
|
||||||
if (menuIndex.value === index) return
|
|
||||||
menuIndex.value = index
|
|
||||||
if (!menuList[index].load) menuList[index].load = true
|
|
||||||
}
|
|
||||||
|
|
||||||
// 打开菜单
|
// im加载完成
|
||||||
function showActionSheet() {
|
function imLoading() {
|
||||||
uni.showActionSheet({
|
imLoad.value = true
|
||||||
itemList: ['扫一扫', '添加好友', '发起群聊', '我的二维码'],
|
}
|
||||||
success: rs => {
|
|
||||||
switch (rs.tapIndex) {
|
|
||||||
case 0:
|
|
||||||
util.scan()
|
|
||||||
break;
|
|
||||||
case 1:
|
|
||||||
uni.navigateTo({
|
|
||||||
// url: '/pages/news/addFriend'
|
|
||||||
url: '/pages/news/newFriend'
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case 2:
|
|
||||||
uni.navigateTo({
|
|
||||||
url: '/pages/news/group-chat/index'
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case 3:
|
|
||||||
uni.navigateTo({
|
|
||||||
url: '/pages/news/myQr'
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function getUserInfos(userRecommend) {
|
// 移除监听
|
||||||
videoApi.getUserInfo({
|
function removeListener() {
|
||||||
query: {
|
uni.$chat.off(TencentCloudChat.EVENT.SDK_READY);
|
||||||
userRecommend: userRecommend,
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 切换下标
|
||||||
|
* @param {Number} index
|
||||||
|
*/
|
||||||
|
function handleMenuIndex(index) {
|
||||||
|
if (menuIndex.value === index) return
|
||||||
|
menuList.forEach(item => {
|
||||||
|
item.load = false;
|
||||||
|
});
|
||||||
|
menuList[index].load = true;
|
||||||
|
menuIndex.value = index
|
||||||
|
}
|
||||||
|
|
||||||
|
// 打开菜单
|
||||||
|
function showActionSheet() {
|
||||||
|
uni.showActionSheet({
|
||||||
|
itemList: ['扫一扫', '添加好友', '发起群聊', '我的二维码'],
|
||||||
|
success: rs => {
|
||||||
|
switch (rs.tapIndex) {
|
||||||
|
case 0:
|
||||||
|
util.scan()
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
uni.navigateTo({
|
||||||
|
// url: '/pages/news/addFriend'
|
||||||
|
url: '/pages/news/newFriend'
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/news/group-chat/index'
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/news/myQr'
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
}).then(rs => {
|
}
|
||||||
if (rs.data !== null) {
|
})
|
||||||
uni.navigateTo({
|
}
|
||||||
url: '/pages/index/beInvited?header=' + rs.data.userPortrait + '&userId=' + rs.data
|
|
||||||
.userId + '&userNickname=' +
|
function getUserInfos(userRecommend) {
|
||||||
rs.data.userNickname
|
videoApi.getUserInfo({
|
||||||
});
|
query: {
|
||||||
}
|
userRecommend: userRecommend,
|
||||||
})
|
}
|
||||||
}
|
}).then(rs => {
|
||||||
|
if (rs.data !== null) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/index/beInvited?header=' + rs.data.userPortrait + '&userId=' + rs.data
|
||||||
|
.userId + '&userNickname=' +
|
||||||
|
rs.data.userNickname
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -194,27 +197,27 @@
|
||||||
|
|
||||||
<!-- 轮播图 -->
|
<!-- 轮播图 -->
|
||||||
<swiper class="swiper" :current="menuIndex" disable-touch="true">
|
<swiper class="swiper" :current="menuIndex" disable-touch="true">
|
||||||
<!-- 通讯录 -->
|
<!-- 群组 -->
|
||||||
<swiper-item>
|
<swiper-item>
|
||||||
<book v-if="menuList[0].load" />
|
<msgList v-if="menuList[0].load" :type="menuIndex" />
|
||||||
<view class="loading" v-else>正在加载</view>
|
<view class="loading" v-else>正在加载</view>
|
||||||
</swiper-item>
|
</swiper-item>
|
||||||
|
|
||||||
<!-- 群组 -->
|
<!-- 通讯录 -->
|
||||||
<swiper-item>
|
<swiper-item>
|
||||||
<msgList v-if="menuList[1].load" />
|
<book v-if="menuList[1].load" />
|
||||||
<view class="loading" v-else>正在加载</view>
|
<view class="loading" v-else>正在加载</view>
|
||||||
</swiper-item>
|
</swiper-item>
|
||||||
|
|
||||||
<!-- 视频消息 -->
|
<!-- 视频消息 -->
|
||||||
<swiper-item>
|
<swiper-item>
|
||||||
<msgList v-if="menuList[2].load" />
|
<msgList v-if="menuList[2].load" :type="menuIndex" />
|
||||||
<view class="loading" v-else>正在加载</view>
|
<view class="loading" v-else>正在加载</view>
|
||||||
</swiper-item>
|
</swiper-item>
|
||||||
|
|
||||||
<!-- 商城消息 -->
|
<!-- 商城消息 -->
|
||||||
<swiper-item>
|
<swiper-item>
|
||||||
<msgList />
|
<msgList v-if="menuList[3].load" :type="menuIndex" />
|
||||||
</swiper-item>
|
</swiper-item>
|
||||||
</swiper>
|
</swiper>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -224,70 +227,70 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
//
|
//
|
||||||
.headMenu {
|
.headMenu {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, 1fr);
|
grid-template-columns: repeat(4, 1fr);
|
||||||
grid-gap: 25rpx;
|
grid-gap: 25rpx;
|
||||||
margin: 20rpx;
|
margin: 20rpx;
|
||||||
|
|
||||||
// 单项
|
// 单项
|
||||||
.option {
|
.option {
|
||||||
height: 120rpx;
|
height: 120rpx;
|
||||||
background-color: #E2E2E2;
|
background-color: #E2E2E2;
|
||||||
border-radius: 15rpx;
|
border-radius: 15rpx;
|
||||||
transition: .3s;
|
|
||||||
|
|
||||||
// 激活的
|
|
||||||
&.active {
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
// 朋友
|
|
||||||
&.friend,
|
|
||||||
&.group,
|
|
||||||
&.video {
|
|
||||||
background-image: linear-gradient(126deg, #27EFE2 0%, #A45EFF 43%, #FF004F 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 商城消息
|
|
||||||
&.store {
|
|
||||||
background-image: linear-gradient(270deg, #FF9B27 20%, #FDC123 103%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 卡通
|
|
||||||
.cartoon {
|
|
||||||
margin-top: -15rpx;
|
|
||||||
margin-right: -25rpx;
|
|
||||||
width: 194rpx;
|
|
||||||
height: 175rpx;
|
|
||||||
transform: rotate(-5deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 搜索条
|
|
||||||
.searchBox {
|
|
||||||
overflow: hidden;
|
|
||||||
height: 0;
|
|
||||||
transition: .3s;
|
transition: .3s;
|
||||||
|
|
||||||
|
// 激活的
|
||||||
&.active {
|
&.active {
|
||||||
height: 80rpx;
|
color: #fff;
|
||||||
|
|
||||||
|
// 朋友
|
||||||
|
&.friend,
|
||||||
|
&.group,
|
||||||
|
&.video {
|
||||||
|
background-image: linear-gradient(126deg, #27EFE2 0%, #A45EFF 43%, #FF004F 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 商城消息
|
||||||
|
&.store {
|
||||||
|
background-image: linear-gradient(270deg, #FF9B27 20%, #FDC123 103%);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 容器
|
// 卡通
|
||||||
.swiper {
|
.cartoon {
|
||||||
flex: 1;
|
margin-top: -15rpx;
|
||||||
width: 100%;
|
margin-right: -25rpx;
|
||||||
|
width: 194rpx;
|
||||||
|
height: 175rpx;
|
||||||
|
transform: rotate(-5deg);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 正在加载
|
// 搜索条
|
||||||
.loading {
|
.searchBox {
|
||||||
display: flex;
|
overflow: hidden;
|
||||||
justify-content: center;
|
height: 0;
|
||||||
align-items: center;
|
transition: .3s;
|
||||||
height: 100%;
|
|
||||||
|
&.active {
|
||||||
|
height: 80rpx;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 容器
|
||||||
|
.swiper {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 正在加载
|
||||||
|
.loading {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue