【功能修复】修复装修用户卡片使用图片无效的问题

This commit is contained in:
卢越
2024-08-11 14:03:20 +08:00
parent 5feab41b3d
commit 19d3cb33e2
2 changed files with 24 additions and 6 deletions
@@ -47,7 +47,7 @@
<s-richtext-block v-if="type === 'PromotionArticle'" :data="data" :styles="styles" /> <s-richtext-block v-if="type === 'PromotionArticle'" :data="data" :styles="styles" />
<!-- 用户组件用户卡片 --> <!-- 用户组件用户卡片 -->
<s-user-card v-if="type === 'UserCard'" /> <s-user-card v-if="type === 'UserCard'" :data="data" :styles="styles" />
<!-- 用户组件用户订单 --> <!-- 用户组件用户订单 -->
<s-order-card v-if="type === 'UserOrder'" :data="data" /> <s-order-card v-if="type === 'UserOrder'" :data="data" />
<!-- 用户组件用户资产 --> <!-- 用户组件用户资产 -->
+23 -5
View File
@@ -1,6 +1,6 @@
<!-- 装修用户组件用户卡片 --> <!-- 装修用户组件用户卡片 -->
<template> <template>
<view class="ss-user-info-wrap ss-p-t-50"> <view class="ss-user-info-wrap ss-p-t-50" :style="[style, { 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">
@@ -70,9 +70,15 @@
const isLogin = computed(() => sheep.$store('user').isLogin); const isLogin = computed(() => sheep.$store('user').isLogin);
// 接收参数 // 接收参数
const props = defineProps({ const props = defineProps({
background: { // 装修数据
type: String, data: {
default: '', type: Object,
default: () => ({}),
},
// 装修样式
styles: {
type: Object,
default: () => ({}),
}, },
// 头像 // 头像
avatar: { avatar: {
@@ -96,7 +102,19 @@
default: '1', default: '1',
}, },
}); });
// 设置背景样式
const style = 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() { function onBind() {
showAuthModal('changeMobile'); showAuthModal('changeMobile');
} }