This commit is contained in:
杨鹏
2025-10-11 16:06:53 +08:00
parent 0f450c6691
commit 09f8815234
24 changed files with 926 additions and 832 deletions
+14 -2
View File
@@ -98,7 +98,13 @@
<view class="ss-m-t-60 ss-flex ss-flex-wrap ss-row-center"> <view class="ss-m-t-60 ss-flex ss-flex-wrap ss-row-center">
<!-- 团长 --> <!-- 团长 -->
<view class="header-avatar ss-m-r-24 ss-m-b-20"> <view class="header-avatar ss-m-r-24 ss-m-b-20">
<image :src="sheep.$url.cdn(state.data.headRecord.avatar) || sheep.$url.static('/static/img/shop/default_avatar.png')" class="avatar-img"></image> <image
:src="
sheep.$url.cdn(state.data.headRecord.avatar) ||
sheep.$url.static('https://puton.huimeimeta.com/imgs/default_avatar.png')
"
class="avatar-img"
></image>
<view class="header-tag ss-flex ss-col-center ss-row-center">团长</view> <view class="header-tag ss-flex ss-col-center ss-row-center">团长</view>
</view> </view>
<!-- 团员 --> <!-- 团员 -->
@@ -107,7 +113,13 @@
v-for="item in state.data.memberRecords" v-for="item in state.data.memberRecords"
:key="item.id" :key="item.id"
> >
<image :src="sheep.$url.cdn(item.avatar) || sheep.$url.static('/static/img/shop/default_avatar.png')" class="avatar-img"></image> <image
:src="
sheep.$url.cdn(item.avatar) ||
sheep.$url.static('https://puton.huimeimeta.com/imgs/default_avatar.png')
"
class="avatar-img"
></image>
<view <view
class="header-tag ss-flex ss-col-center ss-row-center" class="header-tag ss-flex ss-col-center ss-row-center"
v-if="item.is_leader == '1'" v-if="item.is_leader == '1'"
+1 -1
View File
@@ -283,7 +283,7 @@
right: -10rpx; right: -10rpx;
top: -6rpx; top: -6rpx;
font-size: 20rpx; font-size: 20rpx;
color: red; color: #9251eb;
} }
// 签到按钮 // 签到按钮
+37 -38
View File
@@ -7,15 +7,15 @@
<view <view
class="uni-easyinput__content" class="uni-easyinput__content"
:class="{ :class="{
'is-input-border': inputBorder, 'is-input-border': inputBorder,
'is-input-error-border': inputBorder && msg, 'is-input-error-border': inputBorder && msg,
'is-textarea': type === 'textarea', 'is-textarea': type === 'textarea',
'is-disabled': disabled 'is-disabled': disabled,
}" }"
:style="{ :style="{
'border-color': inputBorder && msg ? '#dd524d' : styles.borderColor, 'border-color': inputBorder && msg ? '#dd524d' : styles.borderColor,
'background-color': disabled ? styles.disableColor : '' 'background-color': disabled ? styles.disableColor : '',
}" }"
> >
<uni-icons <uni-icons
v-if="prefixIcon" v-if="prefixIcon"
@@ -48,10 +48,9 @@
:type="type === 'password' ? 'text' : type" :type="type === 'password' ? 'text' : type"
class="uni-easyinput__content-input" class="uni-easyinput__content-input"
:style="{ :style="{
'padding-right': type === 'password' || clearable || prefixIcon ? '' : '10px', 'padding-right': type === 'password' || clearable || prefixIcon ? '' : '10px',
'padding-left': paddingLeft + 'px' 'padding-left': paddingLeft + 'px',
}"
}"
:name="name" :name="name"
:value="val" :value="val"
:password="!showPassword && type === 'password'" :password="!showPassword && type === 'password'"
@@ -159,7 +158,7 @@
emits: ['click', 'iconClick', 'update:modelValue', 'input', 'focus', 'blur', 'confirm'], emits: ['click', 'iconClick', 'update:modelValue', 'input', 'focus', 'blur', 'confirm'],
model: { model: {
prop: 'modelValue', prop: 'modelValue',
event: 'update:modelValue' event: 'update:modelValue',
}, },
props: { props: {
name: String, name: String,
@@ -167,57 +166,57 @@
modelValue: [Number, String], modelValue: [Number, String],
type: { type: {
type: String, type: String,
default: 'text' default: 'text',
}, },
clearable: { clearable: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
autoHeight: { autoHeight: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
placeholder: String, placeholder: String,
placeholderStyle: String, placeholderStyle: String,
focus: { focus: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
disabled: { disabled: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
maxlength: { maxlength: {
type: [Number, String], type: [Number, String],
default: 140 default: 140,
}, },
confirmType: { confirmType: {
type: String, type: String,
default: 'done' default: 'done',
}, },
clearSize: { clearSize: {
type: [Number, String], type: [Number, String],
default: 15 default: 15,
}, },
inputBorder: { inputBorder: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
prefixIcon: { prefixIcon: {
type: String, type: String,
default: '' default: '',
}, },
suffixIcon: { suffixIcon: {
type: String, type: String,
default: '' default: '',
}, },
trim: { trim: {
type: [Boolean, String], type: [Boolean, String],
default: true default: true,
}, },
passwordIcon: { passwordIcon: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
styles: { styles: {
type: Object, type: Object,
@@ -225,18 +224,18 @@
return { return {
color: '#333', color: '#333',
disableColor: '#F7F6F6', disableColor: '#F7F6F6',
borderColor: '#e5e5e5' borderColor: '#e5e5e5',
}; };
} },
}, },
errorMessage: { errorMessage: {
type: [String, Boolean], type: [String, Boolean],
default: '' default: '',
}, },
paddingLeft:{ paddingLeft: {
type: [Number, String], type: [Number, String],
default: 0 default: 0,
} },
}, },
data() { data() {
return { return {
@@ -247,7 +246,7 @@
border: false, border: false,
isFirstBorder: false, isFirstBorder: false,
showClearIcon: false, showClearIcon: false,
showPassword: false showPassword: false,
}; };
}, },
computed: { computed: {
@@ -257,7 +256,7 @@
// 因为uniapp的input组件的maxlength组件必须要数值,这里转为数值,用户可以传入字符串数值 // 因为uniapp的input组件的maxlength组件必须要数值,这里转为数值,用户可以传入字符串数值
inputMaxlength() { inputMaxlength() {
return Number(this.maxlength); return Number(this.maxlength);
} },
}, },
watch: { watch: {
value(newVal) { value(newVal) {
@@ -281,7 +280,7 @@
this.$nextTick(() => { this.$nextTick(() => {
this.focused = this.focus; this.focused = this.focus;
}); });
} },
}, },
created() { created() {
if (!this.value && this.value !== 0) { if (!this.value && this.value !== 0) {
@@ -389,8 +388,8 @@
return str; return str;
} }
return str; return str;
} },
} },
}; };
</script> </script>
@@ -529,7 +528,7 @@
} }
.is-disabled { .is-disabled {
border-color: red; border-color: #9251eb;
background-color: #f7f6f6; background-color: #f7f6f6;
color: #d5d5d5; color: #d5d5d5;
.uni-easyinput__placeholder-class { .uni-easyinput__placeholder-class {
+2 -2
View File
@@ -315,7 +315,7 @@
.top { .top {
background-color: #fff; background-color: #fff;
border-radius: 20rpx 20rpx 0 0; border-radius: 20rpx 20rpx 0 0;
-webkit-mask: radial-gradient(circle at 16rpx 100%, #0000 16rpx, red 0) -16rpx; -webkit-mask: radial-gradient(circle at 16rpx 100%, #0000 16rpx, #9251eb 0) -16rpx;
padding: 110rpx 0 0 0; padding: 110rpx 0 0 0;
position: relative; position: relative;
z-index: 5; z-index: 5;
@@ -364,7 +364,7 @@
.bottom { .bottom {
background-color: #fff; background-color: #fff;
border-radius: 0 0 20rpx 20rpx; border-radius: 0 0 20rpx 20rpx;
-webkit-mask: radial-gradient(circle at 16rpx 0%, #0000 16rpx, red 0) -16rpx; -webkit-mask: radial-gradient(circle at 16rpx 0%, #0000 16rpx, #9251eb 0) -16rpx;
padding: 40rpx 30rpx; padding: 40rpx 30rpx;
.type { .type {
+1 -1
View File
@@ -21,7 +21,7 @@
:src=" :src="
isLogin && userInfo.avatar isLogin && userInfo.avatar
? sheep.$url.cdn(userInfo.avatar) ? sheep.$url.cdn(userInfo.avatar)
: sheep.$url.static('/static/img/shop/default_avatar.png') : sheep.$url.static('https://puton.huimeimeta.com/imgs/default_avatar.png')
" "
mode="aspectFill" mode="aspectFill"
@tap="sheep.$router.go('/pages/user/info')" @tap="sheep.$router.go('/pages/user/info')"
+5 -1
View File
@@ -1,7 +1,7 @@
<template> <template>
<view> <view>
<s-layout title="试衣间" navbar="custom" tabbar="" :bgStyle="{ color: '#fff' }"> <s-layout title="试衣间" navbar="custom" tabbar="" :bgStyle="{ color: '#fff' }">
<web-view :src="webviewUrl" ref="webviewRef"> <web-view :src="webviewUrl" ref="webviewRef" @message="handleMessage">
<cover-view-tabbar activeUrl="/pages/index/room" /> <cover-view-tabbar activeUrl="/pages/index/room" />
</web-view> </web-view>
</s-layout> </s-layout>
@@ -65,6 +65,10 @@
tokenCheckTimer.value = null; tokenCheckTimer.value = null;
} }
} }
function handleMessage(e) {
console.log('收到H5消息:', e.detail.data);
}
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>
+1 -1
View File
@@ -143,7 +143,7 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.highlight { .highlight {
color: red; /* 高亮颜色 */ color: #9251eb; /* 高亮颜色 */
font-weight: bold; font-weight: bold;
} }
+4 -1
View File
@@ -15,7 +15,10 @@
class="content-img" class="content-img"
isPreview isPreview
:current="0" :current="0"
:src="state.model?.avatar || sheep.$url.static('/static/img/shop/default_avatar.png')" :src="
state.model?.avatar ||
sheep.$url.static('https://puton.huimeimeta.com/imgs/default_avatar.png')
"
:height="160" :height="160"
:width="160" :width="160"
:radius="80" :radius="80"
+179 -153
View File
@@ -1,173 +1,199 @@
<template> <template>
<view class="time" :style="justifyLeft"> <view class="time" :style="justifyLeft">
<text class="" v-if="tipText">{{ tipText }}</text> <text class="" v-if="tipText">{{ tipText }}</text>
<text class="styleAll p6" v-if="isDay === true" <text
:style="{background:bgColor.bgColor,color:bgColor.Color}">{{ day }}{{bgColor.isDay?'天':''}}</text> class="styleAll p6"
<text class="timeTxt" v-if="dayText" v-if="isDay === true"
:style="{width:bgColor.timeTxtwidth,color:bgColor.bgColor}">{{ dayText }}</text> :style="{ background: bgColor.bgColor, color: bgColor.Color }"
<text class="styleAll" :class='isCol?"timeCol":""' >{{ day }}{{ bgColor.isDay ? '天' : '' }}</text
:style="{background:bgColor.bgColor,color:bgColor.Color,width:bgColor.width}">{{ hour }}</text> >
<text class="timeTxt" v-if="hourText" :class='isCol?"whit":""' <text
:style="{width:bgColor.timeTxtwidth,color:bgColor.bgColor}">{{ hourText }}</text> class="timeTxt"
<text class="styleAll" :class='isCol?"timeCol":""' v-if="dayText"
:style="{background:bgColor.bgColor,color:bgColor.Color,width:bgColor.width}">{{ minute }}</text> :style="{ width: bgColor.timeTxtwidth, color: bgColor.bgColor }"
<text class="timeTxt" v-if="minuteText" :class='isCol?"whit":""' >{{ dayText }}</text
:style="{width:bgColor.timeTxtwidth,color:bgColor.bgColor}">{{ minuteText }}</text> >
<text class="styleAll" :class='isCol?"timeCol":""' <text
:style="{background:bgColor.bgColor,color:bgColor.Color,width:bgColor.width}">{{ second }}</text> class="styleAll"
<text class="timeTxt" v-if="secondText">{{ secondText }}</text> :class="isCol ? 'timeCol' : ''"
</view> :style="{ background: bgColor.bgColor, color: bgColor.Color, width: bgColor.width }"
>{{ hour }}</text
>
<text
class="timeTxt"
v-if="hourText"
:class="isCol ? 'whit' : ''"
:style="{ width: bgColor.timeTxtwidth, color: bgColor.bgColor }"
>{{ hourText }}</text
>
<text
class="styleAll"
:class="isCol ? 'timeCol' : ''"
:style="{ background: bgColor.bgColor, color: bgColor.Color, width: bgColor.width }"
>{{ minute }}</text
>
<text
class="timeTxt"
v-if="minuteText"
:class="isCol ? 'whit' : ''"
:style="{ width: bgColor.timeTxtwidth, color: bgColor.bgColor }"
>{{ minuteText }}</text
>
<text
class="styleAll"
:class="isCol ? 'timeCol' : ''"
:style="{ background: bgColor.bgColor, color: bgColor.Color, width: bgColor.width }"
>{{ second }}</text
>
<text class="timeTxt" v-if="secondText">{{ secondText }}</text>
</view>
</template> </template>
<script> <script>
export default { export default {
name: "countDown", name: 'countDown',
props: { props: {
justifyLeft: { justifyLeft: {
type: String, type: String,
default: "" default: '',
}, },
//距离开始提示文字 //距离开始提示文字
tipText: { tipText: {
type: String, type: String,
default: "倒计时" default: '倒计时',
}, },
dayText: { dayText: {
type: String, type: String,
default: "天" default: '天',
}, },
hourText: { hourText: {
type: String, type: String,
default: "时" default: '时',
}, },
minuteText: { minuteText: {
type: String, type: String,
default: "分" default: '分',
}, },
secondText: { secondText: {
type: String, type: String,
default: "秒" default: '秒',
}, },
datatime: { datatime: {
type: Number, type: Number,
default: 0 default: 0,
}, },
isDay: { isDay: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
isCol: { isCol: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
bgColor: { bgColor: {
type: Object, type: Object,
default: null default: null,
} },
}, },
data: function() { data: function () {
return { return {
day: "00", day: '00',
hour: "00", hour: '00',
minute: "00", minute: '00',
second: "00" second: '00',
}; };
}, },
created: function() { created: function () {
this.show_time(); this.show_time();
}, },
mounted: function() {}, mounted: function () {},
methods: { methods: {
show_time: function() { show_time: function () {
let that = this; let that = this;
function runTime() { function runTime() {
//时间函数 //时间函数
let intDiff = that.datatime - Date.parse(new Date()) / 1000; //获取数据中的时间戳的时间差; let intDiff = that.datatime - Date.parse(new Date()) / 1000; //获取数据中的时间戳的时间差;
let day = 0, let day = 0,
hour = 0, hour = 0,
minute = 0, minute = 0,
second = 0; second = 0;
if (intDiff > 0) { if (intDiff > 0) {
//转换时间 //转换时间
if (that.isDay === true) { if (that.isDay === true) {
day = Math.floor(intDiff / (60 * 60 * 24)); day = Math.floor(intDiff / (60 * 60 * 24));
} else { } else {
day = 0; day = 0;
} }
hour = Math.floor(intDiff / (60 * 60)) - day * 24; hour = Math.floor(intDiff / (60 * 60)) - day * 24;
minute = Math.floor(intDiff / 60) - day * 24 * 60 - hour * 60; minute = Math.floor(intDiff / 60) - day * 24 * 60 - hour * 60;
second = second = Math.floor(intDiff) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60;
Math.floor(intDiff) - if (hour <= 9) hour = '0' + hour;
day * 24 * 60 * 60 - if (minute <= 9) minute = '0' + minute;
hour * 60 * 60 - if (second <= 9) second = '0' + second;
minute * 60; that.day = day;
if (hour <= 9) hour = "0" + hour; that.hour = hour;
if (minute <= 9) minute = "0" + minute; that.minute = minute;
if (second <= 9) second = "0" + second; that.second = second;
that.day = day; } else {
that.hour = hour; that.day = '00';
that.minute = minute; that.hour = '00';
that.second = second; that.minute = '00';
} else { that.second = '00';
that.day = "00"; }
that.hour = "00"; }
that.minute = "00"; runTime();
that.second = "00"; setInterval(runTime, 1000);
} },
} },
runTime(); };
setInterval(runTime, 1000);
}
}
};
</script> </script>
<style scoped> <style scoped>
.p6 { .p6 {
padding: 0 8rpx; padding: 0 8rpx;
} }
.styleAll { .styleAll {
/* color: #fff; */ /* color: #fff; */
font-size: 24rpx; font-size: 24rpx;
height: 36rpx; height: 36rpx;
line-height: 36rpx; line-height: 36rpx;
border-radius: 6rpx; border-radius: 6rpx;
text-align: center; text-align: center;
/* padding: 0 6rpx; */ /* padding: 0 6rpx; */
} }
.timeTxt { .timeTxt {
text-align: center; text-align: center;
/* width: 16rpx; */ /* width: 16rpx; */
height: 36rpx; height: 36rpx;
line-height: 36rpx; line-height: 36rpx;
display: inline-block; display: inline-block;
} }
.whit { .whit {
color: #fff !important; color: #fff !important;
} }
.time { .time {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.red { .red {
color: #fc4141; color: #fc4141;
margin: 0 4rpx; margin: 0 4rpx;
} }
.timeCol { .timeCol {
/* width: 40rpx; /* width: 40rpx;
height: 40rpx; height: 40rpx;
line-height: 40rpx; line-height: 40rpx;
text-align:center; text-align:center;
border-radius: 6px; border-radius: 6px;
background: #fff; background: #fff;
font-size: 24rpx; */ font-size: 24rpx; */
color: #E93323; color: #e93323;
} }
</style> </style>
@@ -1,102 +1,108 @@
<!-- 装修用户组件用户卡券 --> <!-- 装修用户组件用户卡券 -->
<template> <template>
<view class="ss-coupon-menu-wrap ss-flex ss-col-center" :style="[bgStyle, { marginLeft: `${data.space}px` }]"> <view
<view class="menu-item ss-flex-col ss-row-center ss-col-center" v-for="item in props.list" :key="item.title" class="ss-coupon-menu-wrap ss-flex ss-col-center"
@tap="sheep.$router.go(item.path, { type: item.type })" :style="[bgStyle, { marginLeft: `${data.space}px` }]"
:class="item.type === 'all' ? 'menu-wallet' : 'ss-flex-1'"> >
<image class="item-icon" :src="sheep.$url.static(item.icon)" mode="aspectFit"></image> <view
<view class="menu-title ss-m-t-28">{{ item.title }}</view> class="menu-item ss-flex-col ss-row-center ss-col-center"
</view> v-for="item in props.list"
</view> :key="item.title"
@tap="sheep.$router.go(item.path, { type: item.type })"
:class="item.type === 'all' ? 'menu-wallet' : 'ss-flex-1'"
>
<image class="item-icon" :src="sheep.$url.static(item.icon)" mode="aspectFit"></image>
<view class="menu-title ss-m-t-28">{{ item.title }}</view>
</view>
</view>
</template> </template>
<script setup> <script setup>
/** /**
* 装修组件 - 优惠券菜单 * 装修组件 - 优惠券菜单
*/ */
import sheep from '@/sheep'; import sheep from '@/sheep';
import { computed } from 'vue'; import { computed } from 'vue';
// 接收参数 // 接收参数
const props = defineProps({ const props = defineProps({
list: { list: {
type: Array, type: Array,
default () { default() {
return [{ return [
title: '已领取', {
value: '0', title: '已领取',
icon: '/static/img/shop/order/nouse_coupon.png', value: '0',
path: '/pages/coupon/list', icon: 'https://puton.huimeimeta.com/imgs/nouse_coupon.png',
type: 'geted', path: '/pages/coupon/list',
}, type: 'geted',
{ },
title: '已使用', {
value: '0', title: '已使用',
icon: '/static/img/shop/order/useend_coupon.png', value: '0',
path: '/pages/coupon/list', icon: 'https://puton.huimeimeta.com/imgs/useend_coupon.png',
type: 'used', path: '/pages/coupon/list',
}, type: 'used',
{ },
title: '已失效', {
value: '0', title: '已失效',
icon: '/static/img/shop/order/out_coupon.png', value: '0',
path: '/pages/coupon/list', icon: 'https://puton.huimeimeta.com/imgs/out_coupon.png',
type: 'expired', path: '/pages/coupon/list',
}, type: 'expired',
{ },
title: '领券中心', {
value: '0', title: '领券中心',
icon: '/static/img/shop/order/all_coupon.png', value: '0',
path: '/pages/coupon/list', icon: 'https://puton.huimeimeta.com/imgs/all_coupon.png',
type: 'all', path: '/pages/coupon/list',
}, type: 'all',
]; },
}, ];
}, },
// 装修数据 },
data: { // 装修数据
type: Object, data: {
default: () => ({}), type: Object,
}, default: () => ({}),
// 装修样式 },
styles: { // 装修样式
type: Object, styles: {
default: () => ({}), type: Object,
}, default: () => ({}),
}); },
// 设置背景样式 });
const bgStyle = computed(() => { // 设置背景样式
// 直接从 props.styles 解构 const bgStyle = computed(() => {
const { bgType, bgImg, bgColor } = props.styles; // 直接从 props.styles 解构
const { bgType, bgImg, bgColor } = props.styles;
// 根据 bgType 返回相应的样式
return { // 根据 bgType 返回相应的样式
background: bgType === 'img' return {
? `url(${bgImg}) no-repeat top center / 100% 100%` background: bgType === 'img' ? `url(${bgImg}) no-repeat top center / 100% 100%` : bgColor,
: bgColor };
}; });
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.ss-coupon-menu-wrap { .ss-coupon-menu-wrap {
.menu-item { .menu-item {
height: 160rpx; height: 160rpx;
.menu-title { .menu-title {
font-size: 24rpx; font-size: 24rpx;
line-height: 24rpx; line-height: 24rpx;
color: #333333; color: #333333;
} }
.item-icon { .item-icon {
width: 44rpx; width: 44rpx;
height: 44rpx; height: 44rpx;
} }
} }
.menu-wallet { .menu-wallet {
width: 144rpx; width: 144rpx;
} }
} }
</style> </style>
@@ -121,7 +121,7 @@
width: 100%; width: 100%;
background: #fff; background: #fff;
border-radius: 20rpx 20rpx 0 0; border-radius: 20rpx 20rpx 0 0;
-webkit-mask: radial-gradient(circle at 12rpx 100%, #0000 12rpx, red 0) -12rpx; -webkit-mask: radial-gradient(circle at 12rpx 100%, #0000 12rpx, #9251eb 0) -12rpx;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04); box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04);
.tag { .tag {
@@ -175,7 +175,7 @@
.desc { .desc {
width: 100%; width: 100%;
background: #fff; background: #fff;
-webkit-mask: radial-gradient(circle at 12rpx 0%, #0000 12rpx, red 0) -12rpx; -webkit-mask: radial-gradient(circle at 12rpx 0%, #0000 12rpx, #9251eb 0) -12rpx;
box-shadow: rgba(#000, 0.1); box-shadow: rgba(#000, 0.1);
box-sizing: border-box; box-sizing: border-box;
padding: 24rpx 30rpx; padding: 24rpx 30rpx;
@@ -190,6 +190,6 @@
} }
.price-text { .price-text {
color: #ff0000; color: #9251eb;
} }
</style> </style>
@@ -777,10 +777,10 @@
.activity-tag { .activity-tag {
font-size: 20rpx; font-size: 20rpx;
color: #ff0000; color: #9251eb;
line-height: 30rpx; line-height: 30rpx;
padding: 0 10rpx; padding: 0 10rpx;
border: 1px solid rgba(#ff0000, 0.25); border: 1px solid rgba(#9251eb, 0.25);
border-radius: 4px; border-radius: 4px;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -1006,7 +1006,7 @@
width: fit-content; width: fit-content;
height: fit-content; height: fit-content;
padding: 2rpx 10rpx; padding: 2rpx 10rpx;
background-color: red; background-color: #9251eb;
color: #ffffff; color: #ffffff;
font-size: 24rpx; font-size: 24rpx;
margin-top: 5rpx; margin-top: 5rpx;
@@ -771,10 +771,10 @@
.activity-tag { .activity-tag {
font-size: 20rpx; font-size: 20rpx;
color: #ff0000; color: #9251eb;
line-height: 30rpx; line-height: 30rpx;
padding: 0 10rpx; padding: 0 10rpx;
border: 1px solid rgba(#ff0000, 0.25); border: 1px solid rgba(#9251eb, 0.25);
border-radius: 4px; border-radius: 4px;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -999,7 +999,7 @@
width: fit-content; width: fit-content;
height: fit-content; height: fit-content;
padding: 2rpx 10rpx; padding: 2rpx 10rpx;
background-color: red; background-color: #9251eb;
color: #ffffff; color: #ffffff;
font-size: 24rpx; font-size: 24rpx;
margin-top: 5rpx; margin-top: 5rpx;
+335 -305
View File
@@ -1,343 +1,373 @@
<!-- 装修基础组件菜单导航金刚区 --> <!-- 装修基础组件菜单导航金刚区 -->
<template> <template>
<!-- 包裹层 --> <!-- 包裹层 -->
<view class="ui-swiper" :class="[props.mode, props.ui]" <view
:style="[bgStyle, { height: swiperHeight + (menuList.length > 1 ? 50 : 0) + 'rpx' }]"> class="ui-swiper"
<!-- 轮播 --> :class="[props.mode, props.ui]"
<swiper :circular="props.circular" :current="state.cur" :autoplay="props.autoplay" :interval="props.interval" :style="[bgStyle, { height: swiperHeight + (menuList.length > 1 ? 50 : 0) + 'rpx' }]"
: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
<view class="grid-wrap"> :circular="props.circular"
<view v-for="(item, index) in arr" :key="index" :current="state.cur"
class="grid-item ss-flex ss-flex-col ss-col-center ss-row-center" :autoplay="props.autoplay"
:style="[{ width: `${100 * (1 / data.column)}%`, height: '200rpx' }]" hover-class="ss-hover-btn" :interval="props.interval"
@tap="sheep.$router.go(item.url)"> :duration="props.duration"
<view class="menu-box ss-flex ss-flex-col ss-col-center ss-row-center"> :style="[{ height: swiperHeight + 'rpx' }]"
<view v-if="item.badge.show" class="tag-box" @change="swiperChange"
:style="[{ background: item.badge.bgColor, color: item.badge.textColor }]"> >
{{ item.badge.text }} <swiper-item
</view> v-for="(arr, index) in menuList"
<image v-if="item.iconUrl" class="menu-icon" :style="[ :key="index"
: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> ]"
<view v-if="data.layout === 'iconText'" class="menu-title" :src="sheep.$url.cdn(item.iconUrl)"
:style="[{ color: item.titleColor }]"> mode="aspectFill"
{{ item.title }} ></image>
</view> <view
</view> v-if="data.layout === 'iconText'"
</view> class="menu-title"
</view> :style="[{ color: item.titleColor }]"
</swiper-item> >
</swiper> {{ item.title }}
<!-- 指示点 --> </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" </view>
:class="[state.cur == index ? 'cur' : '', props.dotCur]"></view> </swiper-item>
</view> </swiper>
<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"> <template v-if="menuList.length > 1">
<view style="transform: scale(0.7)">{{ state.cur + 1 }} / {{ menuList.length }}</view> <view class="ui-swiper-dot" :class="props.dotStyle" v-if="props.dotStyle != 'tag'">
</view> <view
</view> class="line-box"
</template> v-for="(item, index) in menuList.length"
</view> :key="index"
: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 { import { reactive, computed } from 'vue';
reactive, import sheep from '@/sheep';
computed
} from 'vue';
import sheep from '@/sheep';
// 数据 // 数据
const state = reactive({ const state = reactive({
cur: 0, cur: 0,
}); });
// 接收参数 // 接收参数
const props = defineProps({ const props = defineProps({
// 装修数据 // 装修数据
data: { data: {
type: Object, type: Object,
default: () => ({}), default: () => ({}),
}, },
// 装修样式 // 装修样式
styles: { styles: {
type: Object, type: Object,
default: () => ({}), default: () => ({}),
}, },
circular: { circular: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
autoplay: { autoplay: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
interval: { interval: {
type: Number, type: Number,
default: 5000, default: 5000,
}, },
duration: { duration: {
type: Number, type: Number,
default: 500, default: 500,
}, },
ui: { ui: {
type: String, type: String,
default: '', default: '',
}, },
mode: { mode: {
//default //default
type: String, type: String,
default: 'default', default: 'default',
}, },
dotStyle: { dotStyle: {
type: String, type: String,
default: 'long', //default long tag default: 'long', //default long tag
}, },
dotCur: { dotCur: {
type: String, type: String,
default: 'ui-BG-Main', default: 'ui-BG-Main',
}, },
height: { height: {
type: Number, type: Number,
default: 300, default: 300,
}, },
// 是否有边框 // 是否有边框
hasBorder: { hasBorder: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
// 边框颜色 // 边框颜色
borderColor: { borderColor: {
type: String, type: String,
default: 'red', default: '#9251EB',
}, },
background: { background: {
type: String, type: String,
default: 'blue', default: 'blue',
}, },
hoverClass: { hoverClass: {
type: String, type: String,
default: 'ss-hover-class', //'none'为没有hover效果 default: 'ss-hover-class', //'none'为没有hover效果
}, },
// 一排宫格数 // 一排宫格数
col: { col: {
type: [Number, String], type: [Number, String],
default: 3, default: 3,
}, },
iconSize: { iconSize: {
type: Number, type: Number,
default: 80, default: 80,
}, },
color: { color: {
type: String, type: String,
default: '#000', default: '#000',
}, },
}); });
// 设置背景样式 // 设置背景样式
const bgStyle = computed(() => { const bgStyle = computed(() => {
// 直接从 props.styles 解构 // 直接从 props.styles 解构
const { const { bgType, bgImg, bgColor } = props.styles;
bgType,
bgImg,
bgColor
} = props.styles;
// 根据 bgType 返回相应的样式 // 根据 bgType 返回相应的样式
return { return {
background: bgType === 'img' ? `url(${bgImg}) no-repeat top center / 100% 100%` : bgColor background: bgType === 'img' ? `url(${bgImg}) no-repeat top center / 100% 100%` : bgColor,
}; };
}); });
// 生成数据 // 生成数据
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(
const windowWidth = sheep.$platform.device.windowWidth; () => props.data.row * (props.data.layout === 'iconText' ? 200 : 180),
);
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 { .menu-box {
position: relative; position: relative;
z-index: 1; z-index: 1;
transform: translate(0, 0); transform: translate(0, 0);
.tag-box { .tag-box {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
top: 0; top: 0;
right: -6rpx; right: -6rpx;
font-size: 2em; font-size: 2em;
line-height: 1; line-height: 1;
padding: 0.4em 0.6em 0.3em; padding: 0.4em 0.6em 0.3em;
transform: scale(0.4) translateX(0.5em) translatey(-0.6em); transform: scale(0.4) translateX(0.5em) translatey(-0.6em);
transform-origin: 100% 0; transform-origin: 100% 0;
border-radius: 200rpx; border-radius: 200rpx;
white-space: nowrap; white-space: nowrap;
} }
.menu-icon { .menu-icon {
transform: translate(0, 0); transform: translate(0, 0);
width: 80rpx; width: 80rpx;
height: 80rpx; height: 80rpx;
padding-bottom: 10rpx; padding-bottom: 10rpx;
} }
.menu-title { .menu-title {
font-size: 24rpx; font-size: 24rpx;
color: #333; color: #333;
} }
} }
::v-deep(.ui-swiper) { ::v-deep(.ui-swiper) {
position: relative; position: relative;
z-index: 1; z-index: 1;
.ui-swiper-dot { .ui-swiper-dot {
position: absolute; position: absolute;
width: 100%; width: 100%;
bottom: 20rpx; bottom: 20rpx;
height: 30rpx; height: 30rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 2; z-index: 2;
&.default .line-box { &.default .line-box {
display: inline-flex; display: inline-flex;
border-radius: 50rpx; border-radius: 50rpx;
width: 6px; width: 6px;
height: 6px; height: 6px;
border: 2px solid transparent; border: 2px solid transparent;
margin: 0 10rpx; margin: 0 10rpx;
opacity: 0.3; opacity: 0.3;
position: relative; position: relative;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
&.cur { &.cur {
width: 8px; width: 8px;
height: 8px; height: 8px;
opacity: 1; opacity: 1;
border: 0px solid transparent; border: 0px solid transparent;
} }
&.cur::after { &.cur::after {
content: ''; content: '';
border-radius: 50rpx; border-radius: 50rpx;
width: 4px; width: 4px;
height: 4px; height: 4px;
background-color: #fff; background-color: #fff;
} }
} }
&.long .line-box { &.long .line-box {
display: inline-block; display: inline-block;
border-radius: 100rpx; border-radius: 100rpx;
width: 6px; width: 6px;
height: 6px; height: 6px;
margin: 0 10rpx; margin: 0 10rpx;
opacity: 0.3; opacity: 0.3;
position: relative; position: relative;
&.cur { &.cur {
width: 24rpx; width: 24rpx;
opacity: 1; opacity: 1;
} }
&.cur::after {} &.cur::after {
} }
}
&.line { &.line {
bottom: 20rpx; bottom: 20rpx;
.line-box { .line-box {
display: inline-block; display: inline-block;
width: 30px; width: 30px;
height: 3px; height: 3px;
opacity: 0.3; opacity: 0.3;
position: relative; position: relative;
&.cur { &.cur {
opacity: 1; opacity: 1;
} }
} }
} }
&.tag { &.tag {
justify-content: flex-end; justify-content: flex-end;
position: absolute; position: absolute;
bottom: 20rpx; bottom: 20rpx;
right: 20rpx; right: 20rpx;
} }
} }
} }
</style> </style>
+89 -89
View File
@@ -1,104 +1,104 @@
<!-- 装修基础组件宫格导航 --> <!-- 装修基础组件宫格导航 -->
<template> <template>
<view :style="[bgStyle, { marginLeft: `${data.space}px` }]"> <view :style="[bgStyle, { marginLeft: `${data.space}px` }]">
<uni-grid :showBorder="Boolean(data.border)" :column="data.column"> <uni-grid :showBorder="Boolean(data.border)" :column="data.column">
<uni-grid-item v-for="(item, index) in data.list" :key="index" @tap="sheep.$router.go(item.url)"> <uni-grid-item
<view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center"> v-for="(item, index) in data.list"
<view class="img-box"> :key="index"
<view class="tag-box" v-if="item.badge.show" @tap="sheep.$router.go(item.url)"
:style="[{ background: item.badge.bgColor, color: item.badge.textColor }]"> >
{{ item.badge.text }} <view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
</view> <view class="img-box">
<image class="menu-image" :src="sheep.$url.cdn(item.iconUrl)"></image> <view
</view> class="tag-box"
v-if="item.badge.show"
<view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center"> :style="[{ background: item.badge.bgColor, color: item.badge.textColor }]"
<view class="grid-text" :style="[{ color: item.titleColor }]"> >
{{ item.title }} {{ item.badge.text }}
</view> </view>
<view class="grid-tip" :style="[{ color: item.subtitleColor }]"> <image class="menu-image" :src="sheep.$url.cdn(item.iconUrl)"></image>
{{ item.subtitle }} </view>
</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>
</view>
</template> </template>
<script setup> <script setup>
import sheep from '@/sheep'; import sheep from '@/sheep';
import { import { computed } from 'vue';
computed
} from 'vue';
const props = defineProps({ const props = defineProps({
// 装修数据 // 装修数据
data: { data: {
type: Object, type: Object,
default: () => ({}), default: () => ({}),
}, },
// 装修样式 // 装修样式
styles: { styles: {
type: Object, type: Object,
default: () => ({}), default: () => ({}),
}, },
}); });
// 设置背景样式 // 设置背景样式
const bgStyle = computed(() => { const bgStyle = computed(() => {
// 直接从 props.styles 解构 // 直接从 props.styles 解构
const { const { bgType, bgImg, bgColor } = props.styles;
bgType,
bgImg,
bgColor
} = props.styles;
// 根据 bgType 返回相应的样式 // 根据 bgType 返回相应的样式
return { return {
background: bgType === 'img' ? `url(${bgImg}) no-repeat top center / 100% 100%` : bgColor 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 { .grid-item-box {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
.img-box { .img-box {
position: relative; position: relative;
.tag-box { .tag-box {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
top: 0; top: 0;
right: 0; right: 0;
font-size: 2em; font-size: 2em;
line-height: 1; line-height: 1;
padding: 0.4em 0.6em 0.3em; padding: 0.4em 0.6em 0.3em;
transform: scale(0.4) translateX(0.5em) translatey(-0.6em); transform: scale(0.4) translateX(0.5em) translatey(-0.6em);
transform-origin: 100% 0; transform-origin: 100% 0;
border-radius: 200rpx; border-radius: 200rpx;
white-space: nowrap; white-space: nowrap;
} }
} }
.title-box { .title-box {
.grid-tip { .grid-tip {
font-size: 24rpx; font-size: 24rpx;
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
} }
} }
} }
</style> </style>
+22 -21
View File
@@ -1,6 +1,9 @@
<!-- 装修用户组件用户订单 --> <!-- 装修用户组件用户订单 -->
<template> <template>
<view class="ss-order-menu-wrap ss-flex ss-col-center" :style="[style, { marginLeft: `${data.space}px` }]"> <view
class="ss-order-menu-wrap ss-flex ss-col-center"
:style="[style, { marginLeft: `${data.space}px` }]"
>
<view <view
class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center" class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center"
v-for="item in orderMap" v-for="item in orderMap"
@@ -31,7 +34,7 @@
{ {
title: '待付款', title: '待付款',
value: '1', value: '1',
icon: '/static/img/shop/order/no_pay.png', icon: 'https://puton.huimeimeta.com/imgs/no_pay.png',
path: '/pages/order/list', path: '/pages/order/list',
type: 'unpaid', type: 'unpaid',
count: 'unpaidCount', count: 'unpaidCount',
@@ -39,7 +42,7 @@
{ {
title: '待收货', title: '待收货',
value: '3', value: '3',
icon: '/static/img/shop/order/no_take.png', icon: 'https://puton.huimeimeta.com/imgs/no_take.png',
path: '/pages/order/list', path: '/pages/order/list',
type: 'noget', type: 'noget',
count: 'deliveredCount', count: 'deliveredCount',
@@ -47,7 +50,7 @@
{ {
title: '待评价', title: '待评价',
value: '4', value: '4',
icon: '/static/img/shop/order/no_comment.png', icon: 'https://puton.huimeimeta.com/imgs/no_comment.png',
path: '/pages/order/list', path: '/pages/order/list',
type: 'nocomment', type: 'nocomment',
count: 'uncommentedCount', count: 'uncommentedCount',
@@ -55,7 +58,7 @@
{ {
title: '售后单', title: '售后单',
value: '0', value: '0',
icon: '/static/img/shop/order/change_order.png', icon: 'https://puton.huimeimeta.com/imgs/change_order.png',
path: '/pages/order/aftersale/list', path: '/pages/order/aftersale/list',
type: 'aftersale', type: 'aftersale',
count: 'afterSaleCount', count: 'afterSaleCount',
@@ -63,35 +66,33 @@
{ {
title: '全部订单', title: '全部订单',
value: '0', value: '0',
icon: '/static/img/shop/order/all_order.png', icon: 'https://puton.huimeimeta.com/imgs/all_order.png',
path: '/pages/order/list', path: '/pages/order/list',
}, },
]; ];
// 接收参数 // 接收参数
const props = defineProps({ const props = defineProps({
// 装修数据 // 装修数据
data: { data: {
type: Object, type: Object,
default: () => ({}), default: () => ({}),
}, },
// 装修样式 // 装修样式
styles: { styles: {
type: Object, type: Object,
default: () => ({}), default: () => ({}),
}, },
}); });
// 设置角标 // 设置角标
const numData = computed(() => sheep.$store('user').numData); const numData = computed(() => sheep.$store('user').numData);
// 设置背景样式 // 设置背景样式
const style = computed(() => { const style = 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%` : bgColor,
? `url(${bgImg}) no-repeat top center / 100% 100%` };
: bgColor
};
}); });
</script> </script>
@@ -73,7 +73,7 @@ const groupon = async (poster) => {
type: 'text', type: 'text',
text: '¥' + poster.shareInfo.poster.price, text: '¥' + poster.shareInfo.poster.price,
css: { css: {
color: '#ff0000', color: '#9251EB',
fontSize: 20, fontSize: 20,
fontFamily: 'OPPOSANS', fontFamily: 'OPPOSANS',
position: 'fixed', position: 'fixed',
+10 -10
View File
@@ -4,11 +4,16 @@
<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 && userInfo.avatar isLogin && userInfo.avatar
? sheep.$url.cdn(userInfo.avatar) ? sheep.$url.cdn(userInfo.avatar)
: sheep.$url.static('/static/img/shop/default_avatar.png')" : sheep.$url.static('https://puton.huimeimeta.com/imgs/default_avatar.png')
mode="aspectFill" @tap="sheep.$router.go('/pages/user/info')"> "
mode="aspectFill"
@tap="sheep.$router.go('/pages/user/info')"
>
</image> </image>
</view> </view>
<view> <view>
@@ -55,10 +60,7 @@
*/ */
import { computed } from 'vue'; import { computed } from 'vue';
import sheep from '@/sheep'; import sheep from '@/sheep';
import { import { showShareModal, showAuthModal } from '@/sheep/hooks/useModal';
showShareModal,
showAuthModal,
} from '@/sheep/hooks/useModal';
// 用户信息 // 用户信息
const userInfo = computed(() => sheep.$store('user').userInfo); const userInfo = computed(() => sheep.$store('user').userInfo);
@@ -107,9 +109,7 @@
// 根据 bgType 返回相应的样式 // 根据 bgType 返回相应的样式
return { return {
background: bgType === 'img' background: bgType === 'img' ? `url(${bgImg}) no-repeat top center / 100% 100%` : bgColor,
? `url(${bgImg}) no-repeat top center / 100% 100%`
: bgColor,
}; };
}); });
+113 -100
View File
@@ -1,119 +1,132 @@
<!-- 装修用户组件用户资产 --> <!-- 装修用户组件用户资产 -->
<template> <template>
<view class="ss-wallet-menu-wrap ss-flex ss-col-center" :style="[bgStyle, { marginLeft: `${data.space}px` }]"> <view
<view class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center" class="ss-wallet-menu-wrap ss-flex ss-col-center"
@tap="sheep.$router.go('/pages/user/wallet/money')"> :style="[bgStyle, { marginLeft: `${data.space}px` }]"
<view class="value-box ss-flex ss-col-bottom"> >
<view class="value-text ss-line-1">{{ fen2yuan(userWallet.balance) || '0.00' }}</view> <view
<view class="unit-text ss-m-l-6"></view> class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center"
</view> @tap="sheep.$router.go('/pages/user/wallet/money')"
<view class="menu-title ss-m-t-28">账户余额</view> >
</view> <view class="value-box ss-flex ss-col-bottom">
<view class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center" <view class="value-text ss-line-1">{{ fen2yuan(userWallet.balance) || '0.00' }}</view>
@tap="sheep.$router.go('/pages/user/wallet/score')"> <view class="unit-text ss-m-l-6"></view>
<view class="value-box ss-flex ss-col-bottom"> </view>
<view class="value-text">{{ userInfo.point || 0 }}</view> <view class="menu-title ss-m-t-28">账户余额</view>
<view class="unit-text ss-m-l-6"></view> </view>
</view> <view
<view class="menu-title ss-m-t-28">积分</view> class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center"
</view> @tap="sheep.$router.go('/pages/user/wallet/score')"
<view class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center" @tap=" >
<view class="value-box ss-flex ss-col-bottom">
<view class="value-text">{{ userInfo.point || 0 }}</view>
<view class="unit-text ss-m-l-6"></view>
</view>
<view class="menu-title ss-m-t-28">积分</view>
</view>
<view
class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center"
@tap="
sheep.$router.go('/pages/coupon/list', { sheep.$router.go('/pages/coupon/list', {
type: 'geted', type: 'geted',
}) })
"> "
<view class="value-box ss-flex ss-col-bottom"> >
<view class="value-text">{{ numData.unusedCouponCount }}</view> <view class="value-box ss-flex ss-col-bottom">
<view class="unit-text ss-m-l-6"></view> <view class="value-text">{{ numData.unusedCouponCount }}</view>
</view> <view class="unit-text ss-m-l-6"></view>
<view class="menu-title ss-m-t-28">优惠券</view> </view>
</view> <view class="menu-title ss-m-t-28">优惠券</view>
<view class="menu-item ss-flex-col ss-row-center ss-col-center menu-wallet" </view>
@tap="sheep.$router.go('/pages/user/wallet/money')"> <view
<image class="item-icon" :src="sheep.$url.static('/static/img/shop/user/wallet_icon.png')" mode="aspectFit" /> class="menu-item ss-flex-col ss-row-center ss-col-center menu-wallet"
<view class="menu-title ss-m-t-30">我的钱包</view> @tap="sheep.$router.go('/pages/user/wallet/money')"
</view> >
</view> <image
class="item-icon"
:src="sheep.$url.static('https://puton.huimeimeta.com/imgs/wallet_icon.png')"
mode="aspectFit"
/>
<view class="menu-title ss-m-t-30">我的钱包</view>
</view>
</view>
</template> </template>
<script setup> <script setup>
/** /**
* 装修组件 - 订单菜单组 * 装修组件 - 订单菜单组
*/ */
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({ const props = defineProps({
// 装修数据 // 装修数据
data: { data: {
type: Object, type: Object,
default: () => ({}), default: () => ({}),
}, },
// 装修样式 // 装修样式
styles: { styles: {
type: Object, type: Object,
default: () => ({}), default: () => ({}),
}, },
}); });
// 设置背景样式 // 设置背景样式
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%` : bgColor,
? `url(${bgImg}) no-repeat top center / 100% 100%` };
: bgColor });
};
}); const userWallet = computed(() => sheep.$store('user').userWallet);
const userInfo = computed(() => sheep.$store('user').userInfo);
const userWallet = computed(() => sheep.$store('user').userWallet); const numData = computed(() => sheep.$store('user').numData);
const userInfo = computed(() => sheep.$store('user').userInfo);
const numData = computed(() => sheep.$store('user').numData);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.ss-wallet-menu-wrap { .ss-wallet-menu-wrap {
.menu-wallet { .menu-wallet {
width: 144rpx; width: 144rpx;
} }
.menu-item { .menu-item {
height: 160rpx; height: 160rpx;
.menu-title { .menu-title {
font-size: 24rpx; font-size: 24rpx;
line-height: 24rpx; line-height: 24rpx;
color: #333333; color: #333333;
} }
.item-icon { .item-icon {
width: 44rpx; width: 44rpx;
height: 44rpx; height: 44rpx;
} }
.value-box { .value-box {
height: 50rpx; height: 50rpx;
text-align: center; text-align: center;
.value-text { .value-text {
font-size: 28rpx; font-size: 28rpx;
color: #000000; color: #000000;
line-height: 28rpx; line-height: 28rpx;
vertical-align: text-bottom; vertical-align: text-bottom;
font-family: OPPOSANS; font-family: OPPOSANS;
} }
.unit-text { .unit-text {
font-size: 24rpx; font-size: 24rpx;
color: #343434; color: #343434;
line-height: 24rpx; line-height: 24rpx;
} }
} }
} }
} }
</style> </style>
@@ -242,6 +242,6 @@
} }
.ui-btn-picker--tips { .ui-btn-picker--tips {
color: red; color: #9251eb;
} }
</style> </style>
@@ -382,7 +382,7 @@
&.uni-collapse-item--border { &.uni-collapse-item--border {
border-bottom-width: 1px; border-bottom-width: 1px;
border-bottom-color: red; border-bottom-color: #9251EB;
border-bottom-color: #ebeef5; border-bottom-color: #ebeef5;
} }
@@ -527,7 +527,7 @@ $uni-border-1: #dcdfe6 !default;
} }
.is-disabled { .is-disabled {
border-color: red; border-color: #9251EB;
background-color: #f7f6f6; background-color: #f7f6f6;
color: #d5d5d5; color: #d5d5d5;
.uni-easyinput__placeholder-class { .uni-easyinput__placeholder-class {
@@ -11,7 +11,7 @@
</view> </view>
<text class="uni-tab__text">{{ item.text }}</text> <text class="uni-tab__text">{{ item.text }}</text>
<view class="flex uni-tab__dot-box"> <view class="flex uni-tab__dot-box">
<text v-if="item.info" :class="{ 'uni-tab__dots': item.info > 9 }" class="uni-tab__dot " :style="{'backgroundColor':item.infoBackgroundColor?item.infoBackgroundColor:'#ff0000', <text v-if="item.info" :class="{ 'uni-tab__dots': item.info > 9 }" class="uni-tab__dot " :style="{'backgroundColor':item.infoBackgroundColor?item.infoBackgroundColor:'#9251EB',
color:item.infoColor?item.infoColor:'#fff' color:item.infoColor?item.infoColor:'#fff'
}">{{ item.info }}</text> }">{{ item.info }}</text>
</view> </view>
@@ -217,7 +217,7 @@
color: #ffffff; color: #ffffff;
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
background-color: #ff0000; background-color: #9251EB;
border-radius: 15px; border-radius: 15px;
} }
@@ -4,7 +4,7 @@
<!-- #endif --> <!-- #endif -->
<view class="uni-list-ad"> <view class="uni-list-ad">
<view v-if="borderShow" :class="{'uni-list--border':border,'uni-list-item--first':isFirstChild}"></view> <view v-if="borderShow" :class="{'uni-list--border':border,'uni-list-item--first':isFirstChild}"></view>
<ad style="width: 200px;height: 300px;border-width: 1px;border-color: red;border-style: solid;" adpid="1111111111" <ad style="width: 200px;height: 300px;border-width: 1px;border-color: #9251EB;border-style: solid;" adpid="1111111111"
unit-id="" appid="" apid="" type="feed" @error="aderror" @close="closeAd"></ad> unit-id="" appid="" apid="" type="feed" @error="aderror" @close="closeAd"></ad>
</view> </view>
<!-- #ifdef APP-NVUE --> <!-- #ifdef APP-NVUE -->
@@ -72,7 +72,7 @@
<style lang="scss" > <style lang="scss" >
.uni-list-ad { .uni-list-ad {
position: relative; position: relative;
border: 1px red solid; border: 1px #9251EB solid;
} }
.uni-list--border { .uni-list--border {