code-image-backup-public/lilishop-uniapp
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git synced 2026-02-05 23:45:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 更新样式和配置

Browse Source 
- 在App.vue中添加全局字体和自定义字体样式。
- 修改uni.scss中的主颜色和背景色以提升视觉效果。
- 更新用户页面(my.vue)的布局和样式，优化用户信息展示和钱包信息显示。
- 在.gitignore中添加designHtml以排除不必要的文件。
This commit is contained in:
Yer11214
2025-12-26 14:55:26 +08:00
parent 7939998a30
commit f57d739a91
8 changed files with 87 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pages/mine/deposit/index.vue
View File

@@ -124,7 +124,7 @@ export default {
<style lang="scss" scoped>
.green {
color: $aider-color-green !important;
color: #28d094 !important;
}
.view-item {
padding: 32rpx;

294
pages/tabbar/user/my.vue
View File

@@ -1,77 +1,39 @@
<template>
<view class="user">
<!-- 个人信息 -->
<view class="status_bar">
<!-- 这里是状态栏 -->
</view>
<view class="header" @click="userDetail">
<view class="head-1">
<image :src="userInfo.face || userImage"></image>
</view>
<view class="head-2" v-if="userInfo.id">
<view class="user-name">{{ userInfo.nickName }}</view>
</view>
<view class="head-2" v-else>
<view class="user-name">登录/注册</view>
</view>
<u-icon style="display: flex;align-items: flex-start;" name="arrow-right"></u-icon>
</view>
<!-- 积分，优惠券，关注， -->
<div class="pointBox box">
<u-row text-align="center" gutter="16" class="point">
<u-col text-align="center" span="4" @click="navigateTo('/pages/mine/deposit/operation')">
<view>预存款</view>
<view class="money">{{ walletNum | unitPrice }}</view>
</u-col>
<u-col text-align="center" span="4" @click="navigateTo('/pages/cart/coupon/myCoupon')">
<view>优惠券</view>
<view>{{ couponNum || 0 }}</view>
</u-col>
<u-col text-align="center" span="4" @click="navigateTo('/pages/mine/myTracks')">
<view>足迹</view>
<view>{{ footNum || 0 }}</view>
</u-col>
</u-row>
<!-- 我的订单，代付款 -->
<view class="order">
<view class="order-item" @click="navigateTo('/pages/order/myOrder?status=1')">
<div class="bag bag2">
<u-icon name="bag-fill" size="35" color="#fff"></u-icon>
<view class="user" :style="{ 'padding-top': statusBarHeight }">
<!-- -->
<u-navbar title-color="#333" :border-bottom="false" immersive :is-back="false" title="个人中心"
:background="background"></u-navbar>
<div class="wrapper background" :style="{ 'padding-top': '61px' }">
<div class="flex flex-a-c flex-j-sb">
<!-- 会员信息 -->
<div class="flex flex-a-c">
<div>
<u-image :src="userInfo.face || '/static/missing-face.png'" shape="circle" width="108"
height="108"></u-image>
</div>
<view>待付款</view>
</view>
<view class="order-item" @click="navigateTo('/pages/order/myOrder?status=3')">
<div class="bag bag3">
<u-icon name="car-fill" size="35" color="#fff"></u-icon>
<div class="user-info">
<div>
{{ userInfo && userInfo.id ? userInfo.nickName : '登录/注册' }}
</div>
<div class="info-tag">
个人主页
</div>
</div>
<view>待收货</view>
</view>
<view class="order-item" @click="navigateTo('/pages/order/evaluate/myEvaluate')">
<div class="bag bag4">
<u-icon name="star-fill" size="35" color="#fff"></u-icon>
</div>
<view>待评价</view>
</view>
<view class="order-item" @click="navigateTo('/pages/order/afterSales/afterSales')">
<div class="bag bag5">
<u-icon name="server-fill" size="35" color="#fff"></u-icon>
</div>
<view>售后</view>
</view>
<view class="order-item" @click="navigateTo('/pages/order/myOrder?status=0')">
<div class="bag bag1">
<u-icon name="order" size="35" color="#fff"></u-icon>
</div>
<view>我的订单</view>
</view>
</view>
</div>
<!-- 右侧会员权益 -->
<div>
<u-image :src="'/static/feature/vip.png'" width="240" height="68" />
</div>
</div>
<!-- 钱包栏 -->
<div class="wallet-info">
<div>
<div class="wallet-info_label">198</div>
</div>
</div>
</div>
<!-- 常用工具 -->
<tool />
</view>
</template>
<script>
@@ -79,6 +41,7 @@ import tool from "@/pages/tabbar/user/utils/tool.vue";
import { getCouponsNum, getFootprintNum } from "@/api/members.js";
import { getUserWallet } from "@/api/members";
import configs from '@/config/config'
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight + "px";
export default {
components: {
tool,
@@ -86,14 +49,15 @@ export default {
data() {
return {
configs,
userImage:configs.defaultUserPhoto,
coverTransform: "translateY(0px)",
coverTransition: "0s",
moving: false,
userImage: configs.defaultUserPhoto,
userInfo: {},
couponNum: "",
footNum: "",
walletNum: "",
background: {
backgroundColor: "transparent",
},
};
},
onLoad() { },
@@ -153,164 +117,52 @@ export default {
};
</script>
<style lang="scss" scoped>
html,
body {
overflow: auto;
.background {
background-image: url('/static/feature/bg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
width: 100%;
}
.money {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.info-tag {
background-image: linear-gradient(135deg, #FAFAFA 0%, #F8E2F1 49%, #ECEFF6 100%);
border-radius: 8rpx;
font-family: PingFangSC-Medium;
font-size: 24rpx;
color: #333333;
letter-spacing: 0;
font-weight: 500;
}
.user {
.header {
max-width: 100%;
padding: calc(50rpx + var(--status-bar-height)) 30rpx 0 6%;
height: calc(var(--status-bar-height) + 360rpx);
background-size: cover;
border-bottom-left-radius: 30rpx;
border-bottom-right-radius: 30rpx;
background-image: url("/static/img/main-bg.png");
background-position: bottom;
background-repeat: no-repeat;
color: #ffffff;
display: flex;
justify-content: space-between;
.wrapper {
height: 396rpx;
}
.head-1 {
text-align: center;
width: 152rpx;
position: relative;
display: flex;
align-items: center;
.wrapper,
.wallet-info {
padding: 0 44rpx;
width: calc(100% - 88rpx);
}
image {
width: 152rpx;
height: 144rpx;
border-radius: 50%;
margin-bottom: 30rpx;
border: 3px solid #fff;
}
.user-info {
padding-left: 20rpx;
}
.edti-head {
position: absolute;
width: 40rpx;
height: 40rpx;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3);
top: 100rpx;
right: 0;
.wallet-info {
height: 168rpx;
background: #fff;
border-radius: 16rpx;
margin-top: 36rpx;
image {
width: 100%;
height: 100%;
}
}
}
.head-2 {
flex: 1;
margin-left: 30rpx;
margin-top: 100rpx;
line-height: 1;
}
::v-deep .u-icon,
.u-icon {
margin-top: 106rpx;
}
&_label {
font-family: DINCond-Bold;
font-size: 40rpx;
color: #333333;
letter-spacing: 0;
font-weight: 700;
}
.pointBox {
width: 94%;
margin: 0 3%;
background: #fff;
border-radius: 20rpx;
box-shadow: 0 4rpx 24rpx 0 rgba($color: #f6f6f6, $alpha: 1);
}
.point {
text-align: center;
height: 160rpx;
font-size: $font-sm;
// #ifdef MP-WEIXIN
padding: 24rpx;
// #endif
.u-col {
view {
color: $u-main-color;
font-size: 28rpx;
}
view:last-child {
margin-top: 8rpx;
color: $main-color;
font-size: $font-lg;
}
}
}
.order {
height: 140rpx;
text-align: center;
font-size: $font-sm;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0 3%;
color: #999;
.order-item {
position: relative;
line-height: 2em;
width: 96rpx;
:first-child {
font-size: 48rpx;
margin-bottom: 10rpx;
}
}
}
}
.box {
transform: translateY(-30rpx);
}
.user-name {
font-size: 34rpx;
}
.bag {
width: 56rpx;
height: 56rpx;
border-radius: 50%;
margin: 0 auto;
}
.bag1 {
background: #ff4a48;
}
.bag2 {
background: #ff992f;
}
.bag3 {
background: #009ee0;
}
.bag4 {
background: #00d5d5;
}
.bag5 {
background: #28ccb0;
}
</style>