yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

!87 【功能修复】修复顶部导航栏装修无效的问题 

Merge pull request !87 from 卢越/master
pull/88/head
芋道源码 2024-08-25 06:29:58 +00:00 committed by Gitee
parent 263eb74695 522591c486
commit a514de68b3
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
2 changed files with 173 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
sheep/components/s-custom-navbar/s-custom-navbar.vue
View File

@ -44,9 +44,9 @@
*
* @property {Number | String} alwaysShow = [0,1] - 是否常驻
* @property {Number | String} styleType = [inner] - 是否沉浸式
* @property {String | Number} type - 标题背景模式
* @property {String} color - 页面背景色
* @property {String} src - 页面背景图片
* @property {String | Number} type - 标题背景模式
* @property {String} color - 页面背景色
* @property {String} src - 页面背景图片
*/
import { computed, unref } from 'vue';
import sheep from '@/sheep';
@ -77,7 +77,7 @@
});
const navList = computed(() => {
// #ifdef MP
return props.data.mapCells || [];
return props.data.mpCells || [];
// #endif
return props.data.otherCells || [];
});
@ -117,11 +117,12 @@
const bgStyles = computed(() => {
return {
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%`
: props.data.bgColor
: props.data.bgColor,
};
});
// 左侧按钮：返回上一页或首页
function onClickLeft() {
if (hasHistory) {
@ -130,6 +131,7 @@
sheep.$router.go('/pages/index/index');
}
}
// 右侧按钮：打开快捷菜单
function onClickRight() {
showMenuTools();
@ -147,44 +149,53 @@
top: 50%;
transform: translateY(-50%);
}
.nav-icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 20rpx;
.inner-icon-box {
border: 1px solid rgba(#fff, 0.4);
background: none !important;
}
.icon-box {
background: #ffffff;
box-shadow: 0px 0px 4rpx rgba(51, 51, 51, 0.08),
0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12);
box-shadow: 0px 0px 4rpx rgba(51, 51, 51, 0.08), 0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12);
border-radius: 30rpx;
width: 134rpx;
height: 56rpx;
margin-left: 8rpx;
.line {
width: 2rpx;
height: 24rpx;
background: #e5e5e7;
}
.sicon-back {
font-size: 32rpx;
}
.sicon-home {
font-size: 32rpx;
}
.sicon-more {
font-size: 32rpx;
}
.icon-button {
width: 67rpx;
height: 56rpx;
&-left:hover {
background: rgba(0, 0, 0, 0.16);
border-radius: 30rpx 0px 0px 30rpx;
}
&-right:hover {
background: rgba(0, 0, 0, 0.16);
border-radius: 0px 30rpx 30rpx 0px;

309
sheep/components/s-user-card/s-user-card.vue
View File

@ -1,186 +1,185 @@
<!-- 装修用户组件：用户卡片 -->
<template>
<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="left-box ss-flex ss-col-center ss-m-l-36">
<view class="avatar-box ss-m-r-24">
<image class="avatar-img" :src="
<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="left-box ss-flex ss-col-center ss-m-l-36">
<view class="avatar-box ss-m-r-24">
<image class="avatar-img" :src="
isLogin
? sheep.$url.cdn(userInfo.avatar)
: sheep.$url.static('/static/img/shop/default_avatar.png')
" mode="aspectFill" @tap="sheep.$router.go('/pages/user/info')"></image>
</view>
<view>
<view class="nickname-box ss-flex ss-col-center">
<view class="nick-name ss-m-r-20">{{ userInfo?.nickname || nickname }}</view>
</view>
</view>
</view>
<view class="right-box ss-m-r-52">
<button class="ss-reset-button" @tap="showShareModal">
<text class="sicon-qrcode"></text>
</button>
</view>
</view>
: sheep.$url.static('/static/img/shop/default_avatar.png')"
mode="aspectFill" @tap="sheep.$router.go('/pages/user/info')">
</image>
</view>
<view>
<view class="nickname-box ss-flex ss-col-center">
<view class="nick-name ss-m-r-20">{{ userInfo?.nickname || nickname }}</view>
</view>
</view>
</view>
<view class="right-box ss-m-r-52">
<button class="ss-reset-button" @tap="showShareModal">
<text class="sicon-qrcode"></text>
</button>
</view>
</view>
<!-- 提示绑定手机号 先隐藏 yudao 需要再修改 -->
<view
<!-- 提示绑定手机号 先隐藏 yudao 需要再修改 -->
<view
class="bind-mobile-box ss-flex ss-row-between ss-col-center"
v-if="isLogin && !userInfo.mobile"
>
<view class="ss-flex">
<text class="cicon-mobile-o" />
<view class="mobile-title ss-m-l-20"> 点击绑定手机号确保账户安全 </view>
<view class="mobile-title ss-m-l-20"> 点击绑定手机号确保账户安全</view>
</view>
<button class="ss-reset-button bind-btn" @tap="onBind">去绑定</button>
</view>
</view>
</view>
</template>
<script setup>
/**
* 用户卡片
*
* @property {Number} leftSpace - 容器左间距
* @property {Number} rightSpace - 容器右间距
*
* @property {String} avatar - 头像
* @property {String} nickname - 昵称
* @property {String} vip - 等级
* @property {String} collectNum - 收藏数
* @property {String} likeNum - 点赞数
*
*
*/
import {
computed,
reactive
} from 'vue';
import sheep from '@/sheep';
import {
showShareModal,
showAuthModal
} from '@/sheep/hooks/useModal';
/**
* 用户卡片
*
* @property {Number} leftSpace - 容器左间距
* @property {Number} rightSpace - 容器右间距
*
* @property {String} avatar - 头像
* @property {String} nickname - 昵称
* @property {String} vip - 等级
* @property {String} collectNum - 收藏数
* @property {String} likeNum - 点赞数
*
*
*/
import { computed } from 'vue';
import sheep from '@/sheep';
import {
showShareModal,
showAuthModal,
} from '@/sheep/hooks/useModal';
// 用户信息
const userInfo = computed(() => sheep.$store('user').userInfo);
console.log('用户信息', userInfo)
// 用户信息
const userInfo = computed(() => sheep.$store('user').userInfo);
console.log('用户信息', userInfo);
// 是否登录
const isLogin = computed(() => sheep.$store('user').isLogin);
// 接收参数
const props = defineProps({
// 装修数据
data: {
type: Object,
default: () => ({}),
},
// 装修样式
styles: {
type: Object,
default: () => ({}),
},
// 头像
avatar: {
type: String,
default: '',
},
nickname: {
type: String,
default: '请先登录',
},
vip: {
type: [String, Number],
default: '1',
},
collectNum: {
type: [String, Number],
default: '1',
},
likeNum: {
type: [String, Number],
default: '1',
},
});
// 设置背景样式
const bgStyle = computed(() => {
// 直接从 props.styles 解构
const { bgType, bgImg, bgColor } = props.styles;
// 根据 bgType 返回相应的样式
return {
background: bgType === 'img'
? `url(${bgImg}) no-repeat top center / 100% 100%`
: bgColor
};
});
// 绑定手机号
function onBind() {
showAuthModal('changeMobile');
}
// 是否登录
const isLogin = computed(() => sheep.$store('user').isLogin);
// 接收参数
const props = defineProps({
// 装修数据
data: {
type: Object,
default: () => ({}),
},
// 装修样式
styles: {
type: Object,
default: () => ({}),
},
// 头像
avatar: {
type: String,
default: '',
},
nickname: {
type: String,
default: '请先登录',
},
vip: {
type: [String, Number],
default: '1',
},
collectNum: {
type: [String, Number],
default: '1',
},
likeNum: {
type: [String, Number],
default: '1',
},
});
// 设置背景样式
const bgStyle = computed(() => {
// 直接从 props.styles 解构
const { bgType, bgImg, bgColor } = props.styles;
// 根据 bgType 返回相应的样式
return {
background: bgType === 'img'
? `url(${bgImg}) no-repeat top center / 100% 100%`
: bgColor,
};
});
// 绑定手机号
function onBind() {
showAuthModal('changeMobile');
}
</script>
<style lang="scss" scoped>
.ss-user-info-wrap {
box-sizing: border-box;
.ss-user-info-wrap {
box-sizing: border-box;
.avatar-box {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
overflow: hidden;
.avatar-box {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
overflow: hidden;
.avatar-img {
width: 100%;
height: 100%;
}
}
.avatar-img {
width: 100%;
height: 100%;
}
}
.nick-name {
font-size: 34rpx;
font-weight: 400;
color: #333333;
line-height: normal;
}
.nick-name {
font-size: 34rpx;
font-weight: 400;
color: #333333;
line-height: normal;
}
.vip-img {
width: 30rpx;
height: 30rpx;
}
.vip-img {
width: 30rpx;
height: 30rpx;
}
.sicon-qrcode {
font-size: 40rpx;
}
}
.sicon-qrcode {
font-size: 40rpx;
}
}
.bind-mobile-box {
width: 100%;
height: 84rpx;
padding: 0 34rpx 0 44rpx;
box-sizing: border-box;
background: #ffffff;
box-shadow: 0px -8rpx 9rpx 0px rgba(#e0e0e0, 0.3);
.bind-mobile-box {
width: 100%;
height: 84rpx;
padding: 0 34rpx 0 44rpx;
box-sizing: border-box;
background: #ffffff;
box-shadow: 0px -8rpx 9rpx 0px rgba(#e0e0e0, 0.3);
.cicon-mobile-o {
font-size: 30rpx;
color: #ff690d;
}
.cicon-mobile-o {
font-size: 30rpx;
color: #ff690d;
}
.mobile-title {
font-size: 24rpx;
font-weight: 500;
color: #ff690d;
}
.mobile-title {
font-size: 24rpx;
font-weight: 500;
color: #ff690d;
}
.bind-btn {
width: 100rpx;
height: 50rpx;
background: #ff6100;
border-radius: 25rpx;
font-size: 24rpx;
font-weight: 500;
color: #ffffff;
}
}
.bind-btn {
width: 100rpx;
height: 50rpx;
background: #ff6100;
border-radius: 25rpx;
font-size: 24rpx;
font-weight: 500;
color: #ffffff;
}
}
</style>