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

!76 【功能修复】修复部分装修背景图片问题 

Merge pull request !76 from 卢越/master
pull/79/head^2
芋道源码 2024-08-12 16:34:44 +00:00 committed by Gitee
parent 83daf7f7c2 e9a91b84fc
commit 4db992d3fa
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
7 changed files with 551 additions and 489 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
sheep/components/s-block-item/s-block-item.vue
View File

@ -9,7 +9,7 @@
<!-- 基础组件：列表导航 --> <!-- 基础组件：列表导航 -->
<s-menu-list v-if="type === 'MenuList'" :data="data" /> <s-menu-list v-if="type === 'MenuList'" :data="data" />
<!-- 基础组件：宫格导航 --> <!-- 基础组件：宫格导航 -->
<s-menu-grid v-if="type === 'MenuGrid'" :data="data" /> <s-menu-grid v-if="type === 'MenuGrid'" :data="data" :styles="styles" />
<!-- 基础组件：弹窗广告 --> <!-- 基础组件：弹窗广告 -->
<s-popup-image v-if="type === 'Popover'" :data="data" /> <s-popup-image v-if="type === 'Popover'" :data="data" />
<!-- 基础组件：悬浮按钮 --> <!-- 基础组件：悬浮按钮 -->
@ -51,9 +51,9 @@
<!-- 用户组件：用户订单 --> <!-- 用户组件：用户订单 -->
<s-order-card v-if="type === 'UserOrder'" :data="data" :styles="styles" /> <s-order-card v-if="type === 'UserOrder'" :data="data" :styles="styles" />
<!-- 用户组件：用户资产 --> <!-- 用户组件：用户资产 -->
<s-wallet-card v-if="type === 'UserWallet'" /> <s-wallet-card v-if="type === 'UserWallet'" :data="data" :styles="styles" />
<!-- 用户组件：用户卡券 --> <!-- 用户组件：用户卡券 -->
<s-coupon-card v-if="type === 'UserCoupon'" /> <s-coupon-card v-if="type === 'UserCoupon'" :data="data" :styles="styles" />
</view> </view>
</template> </template>

25
sheep/components/s-coupon-card/s-coupon-card.vue
View File

@ -1,6 +1,6 @@
<!-- 装修用户组件：用户卡券 --> <!-- 装修用户组件：用户卡券 -->
<template> <template>
<view class="ss-coupon-menu-wrap ss-flex ss-col-center"> <view class="ss-coupon-menu-wrap ss-flex ss-col-center" :style="[bgStyle, { marginLeft: `${data.space}px` }]">
<view class="menu-item ss-flex-col ss-row-center ss-col-center" v-for="item in props.list" :key="item.title" <view class="menu-item ss-flex-col ss-row-center ss-col-center" v-for="item in props.list" :key="item.title"
@tap="sheep.$router.go(item.path, { type: item.type })" @tap="sheep.$router.go(item.path, { type: item.type })"
:class="item.type === 'all' ? 'menu-wallet' : 'ss-flex-1'"> :class="item.type === 'all' ? 'menu-wallet' : 'ss-flex-1'">
@ -15,6 +15,7 @@
* 装修组件 - 优惠券菜单 * 装修组件 - 优惠券菜单
*/ */
import sheep from '@/sheep'; import sheep from '@/sheep';
import { computed } from 'vue';
// 接收参数 // 接收参数
const props = defineProps({ const props = defineProps({
@ -52,6 +53,28 @@
]; ];
}, },
}, },
// 装修数据
data: {
type: Object,
default: () => ({}),
},
// 装修样式
styles: {
type: Object,
default: () => ({}),
},
});
// 设置背景样式
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
};
}); });
</script> </script>

633
sheep/components/s-menu-button/s-menu-button.vue
View File

@ -1,363 +1,344 @@
<!-- 装修基础组件：菜单导航（金刚区） --> <!-- 装修基础组件：菜单导航（金刚区） -->
<template> <template>
<!-- 包裹层 --> <!-- 包裹层 -->
<view <view class="ui-swiper" :class="[props.mode, props.ui]"
class="ui-swiper" :style="[bgStyle, { height: swiperHeight + (menuList.length > 1 ? 50 : 0) + 'rpx' }]">
:class="[props.mode, props.bg, props.ui]" <!-- 轮播 -->
:style="[{ height: swiperHeight + (menuList.length > 1 ? 50 : 0) + 'rpx' }]" <swiper :circular="props.circular" :current="state.cur" :autoplay="props.autoplay" :interval="props.interval"
> :duration="props.duration" :style="[{ height: swiperHeight + 'rpx' }]" @change="swiperChange">
<!-- 轮播 --> <swiper-item v-for="(arr, index) in menuList" :key="index" :class="{ cur: state.cur == index }">
<swiper <!-- 宫格 -->
:circular="props.circular" <view class="grid-wrap">
:current="state.cur" <view v-for="(item, index) in arr" :key="index"
:autoplay="props.autoplay" class="grid-item ss-flex ss-flex-col ss-col-center ss-row-center"
:interval="props.interval" :style="[{ width: `${100 * (1 / data.column)}%`, height: '200rpx' }]" hover-class="ss-hover-btn"
:duration="props.duration" @tap="sheep.$router.go(item.url)">
:style="[{ height: swiperHeight + 'rpx' }]" <view class="menu-box ss-flex ss-flex-col ss-col-center ss-row-center">
@change="swiperChange" <view v-if="item.badge.show" class="tag-box"
> :style="[{ background: item.badge.bgColor, color: item.badge.textColor }]">
<swiper-item {{ item.badge.text }}
v-for="(arr, index) in menuList" </view>
:key="index" <image v-if="item.iconUrl" class="menu-icon" :style="[
:class="{ cur: state.cur == index }"
>
<!-- 宫格 -->
<view class="grid-wrap">
<view
v-for="(item, index) in arr"
:key="index"
class="grid-item ss-flex ss-flex-col ss-col-center ss-row-center"
:style="[{ width: `${100 * (1 / data.column)}%`, height: '200rpx' }]"
hover-class="ss-hover-btn"
@tap="sheep.$router.go(item.url)"
>
<view class="menu-box ss-flex ss-flex-col ss-col-center ss-row-center">
<view
v-if="item.badge.show"
class="tag-box"
:style="[{ background: item.badge.bgColor, color: item.badge.textColor }]"
>
{{ item.badge.text }}
</view>
<image
v-if="item.iconUrl"
class="menu-icon"
:style="[
{ {
width: props.iconSize + 'rpx', width: props.iconSize + 'rpx',
height: props.iconSize + 'rpx', height: props.iconSize + 'rpx',
}, },
]" ]" :src="sheep.$url.cdn(item.iconUrl)" mode="aspectFill"></image>
:src="sheep.$url.cdn(item.iconUrl)" <view v-if="data.layout === 'iconText'" class="menu-title"
mode="aspectFill" :style="[{ color: item.titleColor }]">
></image> {{ item.title }}
<view </view>
v-if="data.layout === 'iconText'" </view>
class="menu-title" </view>
:style="[{ color: item.titleColor }]" </view>
> </swiper-item>
{{ item.title }} </swiper>
</view> <!-- 指示点 -->
</view> <template v-if="menuList.length > 1">
</view> <view class="ui-swiper-dot" :class="props.dotStyle" v-if="props.dotStyle != 'tag'">
</view> <view class="line-box" v-for="(item, index) in menuList.length" :key="index"
</swiper-item> :class="[state.cur == index ? 'cur' : '', props.dotCur]"></view>
</swiper> </view>
<!-- 指示点 --> <view class="ui-swiper-dot" :class="props.dotStyle" v-if="props.dotStyle == 'tag'">
<template v-if="menuList.length > 1"> <view class="ui-tag radius" :class="[props.dotCur]" style="pointer-events: none">
<view class="ui-swiper-dot" :class="props.dotStyle" v-if="props.dotStyle != 'tag'"> <view style="transform: scale(0.7)">{{ state.cur + 1 }} / {{ menuList.length }}</view>
<view </view>
class="line-box" </view>
v-for="(item, index) in menuList.length" </template>
:key="index" </view>
:class="[state.cur == index ? 'cur' : '', props.dotCur]"
></view>
</view>
<view class="ui-swiper-dot" :class="props.dotStyle" v-if="props.dotStyle == 'tag'">
<view class="ui-tag radius" :class="[props.dotCur]" style="pointer-events: none">
<view style="transform: scale(0.7)">{{ state.cur + 1 }} / {{ menuList.length }}</view>
</view>
</view>
</template>
</view>
</template> </template>
<script setup> <script setup>
/** /**
* 轮播menu * 轮播menu
* *
* @property {Boolean} circular = false - 是否采用衔接滑动，即播放到末尾后重新回到开头 * @property {Boolean} circular = false - 是否采用衔接滑动，即播放到末尾后重新回到开头
* @property {Boolean} autoplay = true - 是否自动切换 * @property {Boolean} autoplay = true - 是否自动切换
* @property {Number} interval = 5000 - 自动切换时间间隔 * @property {Number} interval = 5000 - 自动切换时间间隔
* @property {Number} duration = 500 - 滑动动画时长,app-nvue不支持 * @property {Number} duration = 500 - 滑动动画时长,app-nvue不支持
* @property {Array} list = [] - 轮播数据 * @property {Array} list = [] - 轮播数据
* @property {String} ui = '' - 样式class * @property {String} ui = '' - 样式class
* @property {String} mode - 模式 * @property {String} mode - 模式
* @property {String} dotStyle - 指示点样式 * @property {String} dotStyle - 指示点样式
* @property {String} dotCur= 'ui-BG-Main' - 当前指示点样式,默认主题色 * @property {String} dotCur= 'ui-BG-Main' - 当前指示点样式,默认主题色
* @property {String} bg - 背景 * @property {String} bg - 背景
* *
* @property {String|Number} col = 4 - 一行数量 * @property {String|Number} col = 4 - 一行数量
* @property {String|Number} row = 1 - 几行 * @property {String|Number} row = 1 - 几行
* @property {String} hasBorder - 是否有边框 * @property {String} hasBorder - 是否有边框
* @property {String} borderColor - 边框颜色 * @property {String} borderColor - 边框颜色
* @property {String} background - 背景 * @property {String} background - 背景
* @property {String} hoverClass - 按压样式类 * @property {String} hoverClass - 按压样式类
* @property {String} hoverStayTime - 动画时间 * @property {String} hoverStayTime - 动画时间
* *
* @property {Array} list - 导航列表 * @property {Array} list - 导航列表
* @property {Number} iconSize - 图标大小 * @property {Number} iconSize - 图标大小
* @property {String} color - 标题颜色 * @property {String} color - 标题颜色
* *
*/ */
import { reactive, computed } from 'vue'; import {
import sheep from '@/sheep'; reactive,
computed
} from 'vue';
import sheep from '@/sheep';
// 数据 // 数据
const state = reactive({ const state = reactive({
cur: 0, cur: 0,
}); });
// 接收参数 // 接收参数
const props = defineProps({ const props = defineProps({
data: { // 装修数据
type: Object, data: {
default() {}, type: Object,
}, default: () => ({}),
styles: { },
type: Object, // 装修样式
default() {}, styles: {
}, type: Object,
circular: { default: () => ({}),
type: Boolean, },
default: true, circular: {
}, type: Boolean,
autoplay: { default: true,
type: Boolean, },
default: false, autoplay: {
}, type: Boolean,
interval: { default: false,
type: Number, },
default: 5000, interval: {
}, type: Number,
duration: { default: 5000,
type: Number, },
default: 500, duration: {
}, type: Number,
default: 500,
},
ui: {
type: String,
default: '',
},
mode: {
//default
type: String,
default: 'default',
},
dotStyle: {
type: String,
default: 'long', //default long tag
},
dotCur: {
type: String,
default: 'ui-BG-Main',
},
height: {
type: Number,
default: 300,
},
// 是否有边框
hasBorder: {
type: Boolean,
default: true,
},
// 边框颜色
borderColor: {
type: String,
default: 'red',
},
background: {
type: String,
default: 'blue',
},
hoverClass: {
type: String,
default: 'ss-hover-class', //'none'为没有hover效果
},
// 一排宫格数
col: {
type: [Number, String],
default: 3,
},
iconSize: {
type: Number,
default: 80,
},
color: {
type: String,
default: '#000',
},
});
ui: { // 设置背景样式
type: String, const bgStyle = computed(() => {
default: '', console.log(props.styles)
}, // 直接从 props.styles 解构
mode: { const {
//default bgType,
type: String, bgImg,
default: 'default', bgColor
}, } = props.styles;
dotStyle: {
type: String,
default: 'long', //default long tag
},
dotCur: {
type: String,
default: 'ui-BG-Main',
},
bg: {
type: String,
default: 'bg-none',
},
height: {
type: Number,
default: 300,
},
// 是否有边框 // 根据 bgType 返回相应的样式
hasBorder: { return {
type: Boolean, background: bgType === 'img' ? `url(${bgImg}) no-repeat top center / 100% 100%` : bgColor
default: true, };
}, });
// 边框颜色
borderColor: {
type: String,
default: 'red',
},
background: {
type: String,
default: 'blue',
},
hoverClass: {
type: String,
default: 'ss-hover-class', //'none'为没有hover效果
},
// 一排宫格数
col: {
type: [Number, String],
default: 3,
},
iconSize: {
type: Number,
default: 80,
},
color: {
type: String,
default: '#000',
},
});
// 生成数据 // 生成数据
const menuList = computed(() => splitData(props.data.list, props.data.row * props.data.column)); const menuList = computed(() => splitData(props.data.list, props.data.row * props.data.column));
const swiperHeight = computed(() => props.data.row * (props.data.layout === 'iconText' ? 200 : 180)); const swiperHeight = computed(() => props.data.row * (props.data.layout === 'iconText' ? 200 : 180));
const windowWidth = sheep.$platform.device.windowWidth; const windowWidth = sheep.$platform.device.windowWidth;
// current 改变时会触发 change 事件 // current 改变时会触发 change 事件
const swiperChange = (e) => { const swiperChange = (e) => {
state.cur = e.detail.current; state.cur = e.detail.current;
}; };
// 重组数据 // 重组数据
const splitData = (oArr = [], length = 1) => { const splitData = (oArr = [], length = 1) => {
let arr = []; let arr = [];
let minArr = []; let minArr = [];
oArr.forEach((c) => { oArr.forEach((c) => {
if (minArr.length === length) { if (minArr.length === length) {
minArr = []; minArr = [];
} }
if (minArr.length === 0) { if (minArr.length === 0) {
arr.push(minArr); arr.push(minArr);
} }
minArr.push(c); minArr.push(c);
}); });
return arr; return arr;
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.grid-wrap { .grid-wrap {
width: 100%; width: 100%;
display: flex; display: flex;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
} }
.menu-box {
position: relative;
z-index: 1;
transform: translate(0, 0);
.tag-box { .menu-box {
position: absolute; position: relative;
z-index: 2; z-index: 1;
top: 0; transform: translate(0, 0);
right: -6rpx;
font-size: 2em;
line-height: 1;
padding: 0.4em 0.6em 0.3em;
transform: scale(0.4) translateX(0.5em) translatey(-0.6em);
transform-origin: 100% 0;
border-radius: 200rpx;
white-space: nowrap;
}
.menu-icon { .tag-box {
transform: translate(0, 0); position: absolute;
width: 80rpx; z-index: 2;
height: 80rpx; top: 0;
padding-bottom: 10rpx; right: -6rpx;
} font-size: 2em;
line-height: 1;
padding: 0.4em 0.6em 0.3em;
transform: scale(0.4) translateX(0.5em) translatey(-0.6em);
transform-origin: 100% 0;
border-radius: 200rpx;
white-space: nowrap;
}
.menu-title { .menu-icon {
font-size: 24rpx; transform: translate(0, 0);
color: #333; width: 80rpx;
} height: 80rpx;
} padding-bottom: 10rpx;
}
::v-deep(.ui-swiper) { .menu-title {
position: relative; font-size: 24rpx;
z-index: 1; color: #333;
}
}
.ui-swiper-dot { ::v-deep(.ui-swiper) {
position: absolute; position: relative;
width: 100%; z-index: 1;
bottom: 20rpx;
height: 30rpx;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
&.default .line-box { .ui-swiper-dot {
display: inline-flex; position: absolute;
border-radius: 50rpx; width: 100%;
width: 6px; bottom: 20rpx;
height: 6px; height: 30rpx;
border: 2px solid transparent; display: flex;
margin: 0 10rpx; align-items: center;
opacity: 0.3; justify-content: center;
position: relative; z-index: 2;
justify-content: center;
align-items: center;
&.cur { &.default .line-box {
width: 8px; display: inline-flex;
height: 8px; border-radius: 50rpx;
opacity: 1; width: 6px;
border: 0px solid transparent; height: 6px;
} border: 2px solid transparent;
margin: 0 10rpx;
opacity: 0.3;
position: relative;
justify-content: center;
align-items: center;
&.cur::after { &.cur {
content: ''; width: 8px;
border-radius: 50rpx; height: 8px;
width: 4px; opacity: 1;
height: 4px; border: 0px solid transparent;
background-color: #fff; }
}
}
&.long .line-box { &.cur::after {
display: inline-block; content: '';
border-radius: 100rpx; border-radius: 50rpx;
width: 6px; width: 4px;
height: 6px; height: 4px;
margin: 0 10rpx; background-color: #fff;
opacity: 0.3; }
position: relative; }
&.cur { &.long .line-box {
width: 24rpx; display: inline-block;
opacity: 1; border-radius: 100rpx;
} width: 6px;
height: 6px;
margin: 0 10rpx;
opacity: 0.3;
position: relative;
&.cur::after { &.cur {
} width: 24rpx;
} opacity: 1;
}
&.line { &.cur::after {}
bottom: 20rpx; }
.line-box { &.line {
display: inline-block; bottom: 20rpx;
width: 30px;
height: 3px;
opacity: 0.3;
position: relative;
&.cur { .line-box {
opacity: 1; display: inline-block;
} width: 30px;
} height: 3px;
} opacity: 0.3;
position: relative;
&.tag { &.cur {
justify-content: flex-end; opacity: 1;
position: absolute; }
bottom: 20rpx; }
right: 20rpx; }
}
} &.tag {
} justify-content: flex-end;
</style> position: absolute;
bottom: 20rpx;
right: 20rpx;
}
}
}
</style>

164
sheep/components/s-menu-grid/s-menu-grid.vue
View File

@ -1,82 +1,104 @@
<!-- 装修基础组件：宫格导航 --> <!-- 装修基础组件：宫格导航 -->
<template> <template>
<uni-grid :showBorder="Boolean(data.border)" :column="data.column"> <view :style="[bgStyle, { marginLeft: `${data.space}px` }]">
<uni-grid-item <uni-grid :showBorder="Boolean(data.border)" :column="data.column">
v-for="(item, index) in data.list" <uni-grid-item v-for="(item, index) in data.list" :key="index" @tap="sheep.$router.go(item.url)">
:key="index" <view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
@tap="sheep.$router.go(item.url)" <view class="img-box">
> <view class="tag-box" v-if="item.badge.show"
<view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center"> :style="[{ background: item.badge.bgColor, color: item.badge.textColor }]">
<view class="img-box"> {{ item.badge.text }}
<view </view>
class="tag-box" <image class="menu-image" :src="sheep.$url.cdn(item.iconUrl)"></image>
v-if="item.badge.show" </view>
:style="[{ background: item.badge.bgColor, color: item.badge.textColor }]"
> <view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
{{ item.badge.text }} <view class="grid-text" :style="[{ color: item.titleColor }]">
</view> {{ item.title }}
<image class="menu-image" :src="sheep.$url.cdn(item.iconUrl)"></image> </view>
</view> <view class="grid-tip" :style="[{ color: item.subtitleColor }]">
{{ item.subtitle }}
</view>
</view>
</view>
</uni-grid-item>
</uni-grid>
</view>
<view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
<view class="grid-text" :style="[{ color: item.titleColor }]">
{{ item.title }}
</view>
<view class="grid-tip" :style="[{ color: item.subtitleColor }]">
{{ item.subtitle }}
</view>
</view>
</view>
</uni-grid-item>
</uni-grid>
</template> </template>
<script setup> <script setup>
import sheep from '@/sheep'; import sheep from '@/sheep';
import {
computed
} from 'vue';
const props = defineProps({ const props = defineProps({
data: { // 装修数据
type: Object, data: {
default() {}, type: Object,
}, default: () => ({}),
}); },
// 装修样式
styles: {
type: Object,
default: () => ({}),
},
});
// 设置背景样式
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
};
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.menu-image { .menu-image {
width: 24px; width: 24px;
height: 24px; height: 24px;
} }
.grid-item-box {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
.img-box {
position: relative;
.tag-box {
position: absolute;
z-index: 2;
top: 0;
right: 0;
font-size: 2em;
line-height: 1;
padding: 0.4em 0.6em 0.3em;
transform: scale(0.4) translateX(0.5em) translatey(-0.6em);
transform-origin: 100% 0;
border-radius: 200rpx;
white-space: nowrap;
}
}
.title-box { .grid-item-box {
.grid-tip { flex: 1;
font-size: 24rpx; display: flex;
white-space: nowrap; flex-direction: column;
text-align: center; align-items: center;
} justify-content: center;
} height: 100%;
}
</style> .img-box {
position: relative;
.tag-box {
position: absolute;
z-index: 2;
top: 0;
right: 0;
font-size: 2em;
line-height: 1;
padding: 0.4em 0.6em 0.3em;
transform: scale(0.4) translateX(0.5em) translatey(-0.6em);
transform-origin: 100% 0;
border-radius: 200rpx;
white-space: nowrap;
}
}
.title-box {
.grid-tip {
font-size: 24rpx;
white-space: nowrap;
text-align: center;
}
}
}
</style>

177
sheep/components/s-title-block/s-title-block.vue
View File

@ -1,100 +1,109 @@
<!-- 装修商品组件：标题栏 --> <!-- 装修商品组件：标题栏 -->
<template> <template>
<view <view class="ss-title-wrap ss-flex ss-col-center" :class="[state.typeMap[data.textAlign]]" :style="[bgStyle, { marginLeft: `${data.space}px` }]">
class="ss-title-wrap ss-flex ss-col-center" <view class="title-content">
:class="[state.typeMap[data.textAlign]]" <!-- 主标题 -->
:style="[elStyles]" <view v-if="data.title" class="title-text" :style="[titleStyles]">{{ data.title }}</view>
> <!-- 副标题 -->
<view class="title-content"> <view v-if="data.description" :style="[descStyles]" class="sub-title-text">{{ data.description }}</view>
<!-- 主标题 --> </view>
<view v-if="data.title" class="title-text" :style="[titleStyles]">{{ data.title }}</view> <!-- 查看更多 -->
<!-- 副标题 --> <view v-if="data.more?.show" class="more-box ss-flex ss-col-center" @tap="sheep.$router.go(data.more.url)"
<view v-if="data.description" :style="[descStyles]" class="sub-title-text">{{ data.description }}</view> :style="{color: data.descriptionColor}">
</view> <view class="more-text" v-if="data.more.type !== 'icon'">{{ data.more.text }} </view>
<!-- 查看更多 --> <text class="_icon-forward" v-if="data.more.type !== 'text'"></text>
<view v-if="data.more?.show" class="more-box ss-flex ss-col-center" @tap="sheep.$router.go(data.more.url)" </view>
:style="{color: data.descriptionColor}"> </view>
<view class="more-text" v-if="data.more.type !== 'icon'">{{ data.more.text }} </view>
<text class="_icon-forward" v-if="data.more.type !== 'text'"></text>
</view>
</view>
</template> </template>
<script setup> <script setup>
/** /**
* 标题栏 * 标题栏
*/ */
import { reactive } from 'vue'; import {
import sheep from '@/sheep'; reactive,
computed
} from 'vue';
import sheep from '@/sheep';
// 数据 // 数据
const state = reactive({ const state = reactive({
typeMap: { typeMap: {
left: 'ss-row-left', left: 'ss-row-left',
center: 'ss-row-center', center: 'ss-row-center',
}, },
}); });
// 接收参数 // 接收参数
const props = defineProps({ const props = defineProps({
data: { // 装修数据
type: Object, data: {
default() {}, type: Object,
}, default: () => ({}),
styles: { },
type: Object, // 装修样式
default() {}, styles: {
}, type: Object,
}); default: () => ({}),
},
});
// 设置背景样式
const bgStyle = computed(() => {
console.log(props.data)
// 直接从 props.styles 解构
const {
bgType,
bgImg,
bgColor
} = props.styles;
// 组件样式 // 根据 bgType 返回相应的样式
const elStyles = { return {
background: `url(${sheep.$url.cdn(props.data.bgImgUrl)}) no-repeat top center / 100% auto`, background: bgType === 'img' ? `url(${bgImg}) no-repeat top center / 100% 100%` : bgColor
fontSize: `${props.data.titleSize}px`, };
fontWeight: `${props.data.titleWeight}px`, });
};
// 标题样式 // 标题样式
const titleStyles = { const titleStyles = {
color: props.data.titleColor, color: props.data.titleColor,
fontSize: `${props.data.titleSize}px`, fontSize: `${props.data.titleSize}px`,
textAlign: props.data.textAlign textAlign: props.data.textAlign
}; };
// 副标题 // 副标题
const descStyles = { const descStyles = {
color: props.data.descriptionColor, color: props.data.descriptionColor,
textAlign: props.data.textAlign, textAlign: props.data.textAlign,
fontSize: `${props.data.descriptionSize}px`, fontSize: `${props.data.descriptionSize}px`,
fontWeight: `${props.data.descriptionWeight}px`, fontWeight: `${props.data.descriptionWeight}px`,
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.ss-title-wrap { .ss-title-wrap {
height: 80rpx; height: 80rpx;
position: relative; position: relative;
.title-content { .title-content {
.title-text { .title-text {
font-size: 30rpx; font-size: 30rpx;
color: #333; color: #333;
} }
.sub-title-text { .sub-title-text {
font-size: 22rpx; font-size: 22rpx;
color: #999; color: #999;
} }
} }
.more-box { .more-box {
white-space: nowrap; white-space: nowrap;
font-size: 22rpx; font-size: 22rpx;
color: #999; color: #999;
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
right: 20rpx; right: 20rpx;
} }
} }
</style> </style>

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

@ -1,6 +1,6 @@
<!-- 装修用户组件：用户卡片 --> <!-- 装修用户组件：用户卡片 -->
<template> <template>
<view class="ss-user-info-wrap ss-p-t-50" :style="[style, { 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">
@ -102,8 +102,9 @@
default: '1', default: '1',
}, },
}); });
// 设置背景样式 // 设置背景样式
const style = computed(() => { const bgStyle = computed(() => {
// 直接从 props.styles 解构 // 直接从 props.styles 解构
const { bgType, bgImg, bgColor } = props.styles; const { bgType, bgImg, bgColor } = props.styles;

30
sheep/components/s-wallet-card/s-wallet-card.vue
View File

@ -1,6 +1,6 @@
<!-- 装修用户组件：用户资产 --> <!-- 装修用户组件：用户资产 -->
<template> <template>
<view class="ss-wallet-menu-wrap ss-flex ss-col-center"> <view class="ss-wallet-menu-wrap ss-flex ss-col-center" :style="[bgStyle, { marginLeft: `${data.space}px` }]">
<view class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center" <view class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center"
@tap="sheep.$router.go('/pages/user/wallet/money')"> @tap="sheep.$router.go('/pages/user/wallet/money')">
<view class="value-box ss-flex ss-col-bottom"> <view class="value-box ss-flex ss-col-bottom">
@ -42,8 +42,34 @@
*/ */
import { computed } from 'vue'; import { computed } from 'vue';
import sheep from '@/sheep'; import sheep from '@/sheep';
import { fen2yuan } from '../../hooks/useGoods'; import { fen2yuan } from '../../hooks/useGoods';
// 接收参数
const props = defineProps({
// 装修数据
data: {
type: Object,
default: () => ({}),
},
// 装修样式
styles: {
type: Object,
default: () => ({}),
},
});
// 设置背景样式
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
};
});
const userWallet = computed(() => sheep.$store('user').userWallet); const userWallet = computed(() => sheep.$store('user').userWallet);
const userInfo = computed(() => sheep.$store('user').userInfo); const userInfo = computed(() => sheep.$store('user').userInfo);
const numData = computed(() => sheep.$store('user').numData); const numData = computed(() => sheep.$store('user').numData);