【功能修复】修复顶部导航栏装修无效的问题
卢越
parent
263eb74695
commit
522591c486
|
|
@ -44,9 +44,9 @@
|
||||||
*
|
*
|
||||||
* @property {Number | String} alwaysShow = [0,1] - 是否常驻
|
* @property {Number | String} alwaysShow = [0,1] - 是否常驻
|
||||||
* @property {Number | String} styleType = [inner] - 是否沉浸式
|
* @property {Number | String} styleType = [inner] - 是否沉浸式
|
||||||
* @property {String | Number} type - 标题背景模式
|
* @property {String | Number} type - 标题背景模式
|
||||||
* @property {String} color - 页面背景色
|
* @property {String} color - 页面背景色
|
||||||
* @property {String} src - 页面背景图片
|
* @property {String} src - 页面背景图片
|
||||||
*/
|
*/
|
||||||
import { computed, unref } from 'vue';
|
import { computed, unref } from 'vue';
|
||||||
import sheep from '@/sheep';
|
import sheep from '@/sheep';
|
||||||
|
|
@ -77,7 +77,7 @@
|
||||||
});
|
});
|
||||||
const navList = computed(() => {
|
const navList = computed(() => {
|
||||||
// #ifdef MP
|
// #ifdef MP
|
||||||
return props.data.mapCells || [];
|
return props.data.mpCells || [];
|
||||||
// #endif
|
// #endif
|
||||||
return props.data.otherCells || [];
|
return props.data.otherCells || [];
|
||||||
});
|
});
|
||||||
|
|
@ -117,11 +117,12 @@
|
||||||
const bgStyles = computed(() => {
|
const bgStyles = computed(() => {
|
||||||
return {
|
return {
|
||||||
background:
|
background:
|
||||||
props.data.bgType === 'img' && props.data.bgImg
|
props.data.bgType === 'img' && props.data.bgImg
|
||||||
? `url(${sheep.$url.cdn(props.data.bgImg)}) no-repeat top center / 100% 100%`
|
? `url(${sheep.$url.cdn(props.data.bgImg)}) no-repeat top center / 100% 100%`
|
||||||
: props.data.bgColor
|
: props.data.bgColor,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
// 左侧按钮：返回上一页或首页
|
// 左侧按钮：返回上一页或首页
|
||||||
function onClickLeft() {
|
function onClickLeft() {
|
||||||
if (hasHistory) {
|
if (hasHistory) {
|
||||||
|
|
@ -130,6 +131,7 @@
|
||||||
sheep.$router.go('/pages/index/index');
|
sheep.$router.go('/pages/index/index');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 右侧按钮：打开快捷菜单
|
// 右侧按钮：打开快捷菜单
|
||||||
function onClickRight() {
|
function onClickRight() {
|
||||||
showMenuTools();
|
showMenuTools();
|
||||||
|
|
@ -147,44 +149,53 @@
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-icon {
|
.nav-icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
left: 20rpx;
|
left: 20rpx;
|
||||||
|
|
||||||
.inner-icon-box {
|
.inner-icon-box {
|
||||||
border: 1px solid rgba(#fff, 0.4);
|
border: 1px solid rgba(#fff, 0.4);
|
||||||
background: none !important;
|
background: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-box {
|
.icon-box {
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
box-shadow: 0px 0px 4rpx rgba(51, 51, 51, 0.08),
|
box-shadow: 0px 0px 4rpx rgba(51, 51, 51, 0.08), 0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12);
|
||||||
0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12);
|
|
||||||
border-radius: 30rpx;
|
border-radius: 30rpx;
|
||||||
width: 134rpx;
|
width: 134rpx;
|
||||||
height: 56rpx;
|
height: 56rpx;
|
||||||
margin-left: 8rpx;
|
margin-left: 8rpx;
|
||||||
|
|
||||||
.line {
|
.line {
|
||||||
width: 2rpx;
|
width: 2rpx;
|
||||||
height: 24rpx;
|
height: 24rpx;
|
||||||
background: #e5e5e7;
|
background: #e5e5e7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sicon-back {
|
.sicon-back {
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sicon-home {
|
.sicon-home {
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sicon-more {
|
.sicon-more {
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-button {
|
.icon-button {
|
||||||
width: 67rpx;
|
width: 67rpx;
|
||||||
height: 56rpx;
|
height: 56rpx;
|
||||||
|
|
||||||
&-left:hover {
|
&-left:hover {
|
||||||
background: rgba(0, 0, 0, 0.16);
|
background: rgba(0, 0, 0, 0.16);
|
||||||
border-radius: 30rpx 0px 0px 30rpx;
|
border-radius: 30rpx 0px 0px 30rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-right:hover {
|
&-right:hover {
|
||||||
background: rgba(0, 0, 0, 0.16);
|
background: rgba(0, 0, 0, 0.16);
|
||||||
border-radius: 0px 30rpx 30rpx 0px;
|
border-radius: 0px 30rpx 30rpx 0px;
|
||||||
|
|
|
||||||
|
|
@ -1,186 +1,185 @@
|
||||||
<!-- 装修用户组件：用户卡片 -->
|
<!-- 装修用户组件：用户卡片 -->
|
||||||
<template>
|
<template>
|
||||||
<view class="ss-user-info-wrap ss-p-t-50" :style="[bgStyle, { marginLeft: `${data.space}px` }]">
|
<view class="ss-user-info-wrap ss-p-t-50" :style="[bgStyle, { marginLeft: `${data.space}px` }]">
|
||||||
<view class="ss-flex ss-col-center ss-row-between ss-m-b-20">
|
<view class="ss-flex ss-col-center ss-row-between ss-m-b-20">
|
||||||
<view class="left-box ss-flex ss-col-center ss-m-l-36">
|
<view class="left-box ss-flex ss-col-center ss-m-l-36">
|
||||||
<view class="avatar-box ss-m-r-24">
|
<view class="avatar-box ss-m-r-24">
|
||||||
<image class="avatar-img" :src="
|
<image class="avatar-img" :src="
|
||||||
isLogin
|
isLogin
|
||||||
? sheep.$url.cdn(userInfo.avatar)
|
? sheep.$url.cdn(userInfo.avatar)
|
||||||
: sheep.$url.static('/static/img/shop/default_avatar.png')
|
: sheep.$url.static('/static/img/shop/default_avatar.png')"
|
||||||
" mode="aspectFill" @tap="sheep.$router.go('/pages/user/info')"></image>
|
mode="aspectFill" @tap="sheep.$router.go('/pages/user/info')">
|
||||||
</view>
|
</image>
|
||||||
<view>
|
</view>
|
||||||
<view class="nickname-box ss-flex ss-col-center">
|
<view>
|
||||||
<view class="nick-name ss-m-r-20">{{ userInfo?.nickname || nickname }}</view>
|
<view class="nickname-box ss-flex ss-col-center">
|
||||||
</view>
|
<view class="nick-name ss-m-r-20">{{ userInfo?.nickname || nickname }}</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="right-box ss-m-r-52">
|
</view>
|
||||||
<button class="ss-reset-button" @tap="showShareModal">
|
<view class="right-box ss-m-r-52">
|
||||||
<text class="sicon-qrcode"></text>
|
<button class="ss-reset-button" @tap="showShareModal">
|
||||||
</button>
|
<text class="sicon-qrcode"></text>
|
||||||
</view>
|
</button>
|
||||||
</view>
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
<!-- 提示绑定手机号 先隐藏 yudao 需要再修改 -->
|
<!-- 提示绑定手机号 先隐藏 yudao 需要再修改 -->
|
||||||
<view
|
<view
|
||||||
class="bind-mobile-box ss-flex ss-row-between ss-col-center"
|
class="bind-mobile-box ss-flex ss-row-between ss-col-center"
|
||||||
v-if="isLogin && !userInfo.mobile"
|
v-if="isLogin && !userInfo.mobile"
|
||||||
>
|
>
|
||||||
<view class="ss-flex">
|
<view class="ss-flex">
|
||||||
<text class="cicon-mobile-o" />
|
<text class="cicon-mobile-o" />
|
||||||
<view class="mobile-title ss-m-l-20"> 点击绑定手机号确保账户安全 </view>
|
<view class="mobile-title ss-m-l-20"> 点击绑定手机号确保账户安全</view>
|
||||||
</view>
|
</view>
|
||||||
<button class="ss-reset-button bind-btn" @tap="onBind">去绑定</button>
|
<button class="ss-reset-button bind-btn" @tap="onBind">去绑定</button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
/**
|
/**
|
||||||
* 用户卡片
|
* 用户卡片
|
||||||
*
|
*
|
||||||
* @property {Number} leftSpace - 容器左间距
|
* @property {Number} leftSpace - 容器左间距
|
||||||
* @property {Number} rightSpace - 容器右间距
|
* @property {Number} rightSpace - 容器右间距
|
||||||
*
|
*
|
||||||
* @property {String} avatar - 头像
|
* @property {String} avatar - 头像
|
||||||
* @property {String} nickname - 昵称
|
* @property {String} nickname - 昵称
|
||||||
* @property {String} vip - 等级
|
* @property {String} vip - 等级
|
||||||
* @property {String} collectNum - 收藏数
|
* @property {String} collectNum - 收藏数
|
||||||
* @property {String} likeNum - 点赞数
|
* @property {String} likeNum - 点赞数
|
||||||
*
|
*
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
import {
|
import { computed } from 'vue';
|
||||||
computed,
|
import sheep from '@/sheep';
|
||||||
reactive
|
import {
|
||||||
} from 'vue';
|
showShareModal,
|
||||||
import sheep from '@/sheep';
|
showAuthModal,
|
||||||
import {
|
} from '@/sheep/hooks/useModal';
|
||||||
showShareModal,
|
|
||||||
showAuthModal
|
|
||||||
} from '@/sheep/hooks/useModal';
|
|
||||||
|
|
||||||
// 用户信息
|
// 用户信息
|
||||||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||||||
console.log('用户信息', userInfo)
|
console.log('用户信息', userInfo);
|
||||||
|
|
||||||
// 是否登录
|
// 是否登录
|
||||||
const isLogin = computed(() => sheep.$store('user').isLogin);
|
const isLogin = computed(() => sheep.$store('user').isLogin);
|
||||||
// 接收参数
|
// 接收参数
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
// 装修数据
|
// 装修数据
|
||||||
data: {
|
data: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => ({}),
|
default: () => ({}),
|
||||||
},
|
},
|
||||||
// 装修样式
|
// 装修样式
|
||||||
styles: {
|
styles: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => ({}),
|
default: () => ({}),
|
||||||
},
|
},
|
||||||
// 头像
|
// 头像
|
||||||
avatar: {
|
avatar: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '',
|
default: '',
|
||||||
},
|
},
|
||||||
nickname: {
|
nickname: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '请先登录',
|
default: '请先登录',
|
||||||
},
|
},
|
||||||
vip: {
|
vip: {
|
||||||
type: [String, Number],
|
type: [String, Number],
|
||||||
default: '1',
|
default: '1',
|
||||||
},
|
},
|
||||||
collectNum: {
|
collectNum: {
|
||||||
type: [String, Number],
|
type: [String, Number],
|
||||||
default: '1',
|
default: '1',
|
||||||
},
|
},
|
||||||
likeNum: {
|
likeNum: {
|
||||||
type: [String, Number],
|
type: [String, Number],
|
||||||
default: '1',
|
default: '1',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// 设置背景样式
|
// 设置背景样式
|
||||||
const bgStyle = computed(() => {
|
const bgStyle = computed(() => {
|
||||||
// 直接从 props.styles 解构
|
// 直接从 props.styles 解构
|
||||||
const { bgType, bgImg, bgColor } = props.styles;
|
const { bgType, bgImg, bgColor } = props.styles;
|
||||||
|
|
||||||
// 根据 bgType 返回相应的样式
|
// 根据 bgType 返回相应的样式
|
||||||
return {
|
return {
|
||||||
background: bgType === 'img'
|
background: bgType === 'img'
|
||||||
? `url(${bgImg}) no-repeat top center / 100% 100%`
|
? `url(${bgImg}) no-repeat top center / 100% 100%`
|
||||||
: bgColor
|
: bgColor,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
// 绑定手机号
|
|
||||||
function onBind() {
|
// 绑定手机号
|
||||||
showAuthModal('changeMobile');
|
function onBind() {
|
||||||
}
|
showAuthModal('changeMobile');
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.ss-user-info-wrap {
|
.ss-user-info-wrap {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
.avatar-box {
|
.avatar-box {
|
||||||
width: 100rpx;
|
width: 100rpx;
|
||||||
height: 100rpx;
|
height: 100rpx;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
.avatar-img {
|
.avatar-img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nick-name {
|
.nick-name {
|
||||||
font-size: 34rpx;
|
font-size: 34rpx;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vip-img {
|
.vip-img {
|
||||||
width: 30rpx;
|
width: 30rpx;
|
||||||
height: 30rpx;
|
height: 30rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sicon-qrcode {
|
.sicon-qrcode {
|
||||||
font-size: 40rpx;
|
font-size: 40rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bind-mobile-box {
|
.bind-mobile-box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 84rpx;
|
height: 84rpx;
|
||||||
padding: 0 34rpx 0 44rpx;
|
padding: 0 34rpx 0 44rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
box-shadow: 0px -8rpx 9rpx 0px rgba(#e0e0e0, 0.3);
|
box-shadow: 0px -8rpx 9rpx 0px rgba(#e0e0e0, 0.3);
|
||||||
|
|
||||||
.cicon-mobile-o {
|
.cicon-mobile-o {
|
||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
color: #ff690d;
|
color: #ff690d;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-title {
|
.mobile-title {
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #ff690d;
|
color: #ff690d;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bind-btn {
|
.bind-btn {
|
||||||
width: 100rpx;
|
width: 100rpx;
|
||||||
height: 50rpx;
|
height: 50rpx;
|
||||||
background: #ff6100;
|
background: #ff6100;
|
||||||
border-radius: 25rpx;
|
border-radius: 25rpx;
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue