|
|
@@ -16,62 +16,6 @@
|
|
|
<!-- 已登录状态 -->
|
|
|
<block v-else>
|
|
|
<view class="main-content">
|
|
|
- <!-- 个人中心版块 -->
|
|
|
- <view class="profile-section">
|
|
|
- <view class="profile-header">
|
|
|
- <view class="avatar-container">
|
|
|
- <button class="avatar-button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" >
|
|
|
- <image class="avatar" :src="user.smallAvatar" mode="aspectFill" />
|
|
|
- </button>
|
|
|
- </view>
|
|
|
- <view class="user-info" @click="goEdit()">
|
|
|
- <text class="username">{{ user.name }}</text>
|
|
|
- <text class="user-id">ID {{ user.id }}</text>
|
|
|
- </view>
|
|
|
- <view class="arrow-container" @click="goEdit()">
|
|
|
- <text class="arrow-icon">〉</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="function-grid">
|
|
|
- <view class="function-item" @click="">
|
|
|
- <text class="function-text">统计</text>
|
|
|
- </view>
|
|
|
- <view class="function-item" @click="setAddress">
|
|
|
- <text class="function-text">我的地址</text>
|
|
|
- </view>
|
|
|
- <view class="function-item" @click="hasDelHd">
|
|
|
- <text class="function-text">已删花店</text>
|
|
|
- </view>
|
|
|
- <view class="function-item-wrapper">
|
|
|
- <view class="function-item message-item" @click="pageTo({ url: '/pages/chat/list' })">
|
|
|
- <text class="function-text">新消息</text>
|
|
|
- </view>
|
|
|
- <view v-if="unReadMsgNum > 0" class="message-badge">{{ unReadMsgNum > 9 ? '9+' : unReadMsgNum }}</view>
|
|
|
- </view>
|
|
|
- <view class="function-item" @click="pageTo({ url: '/pages/hb/list' })">
|
|
|
- <text class="function-text">我的红包</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 生日礼物提示横幅 -->
|
|
|
- <view
|
|
|
- class="birthday-banner"
|
|
|
- @click="goToBirthday"
|
|
|
- v-if="Number(user.birthdayMonth) == 0"
|
|
|
- >
|
|
|
- <view class="gift-icon-container">
|
|
|
- <text class="gift-icon">🎁</text>
|
|
|
- </view>
|
|
|
- <view class="banner-text">
|
|
|
- <text class="banner-title">填写生日，有机会领取生日小礼品</text>
|
|
|
- </view>
|
|
|
- <view class="banner-button">
|
|
|
- <text class="button-text">填写</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
<!-- 无网络提示条 -->
|
|
|
<no-network-bar></no-network-bar>
|
|
|
|
|
|
@@ -84,7 +28,7 @@
|
|
|
>
|
|
|
<!-- 更多选项按钮 -->
|
|
|
<view class="more-btn" @click.stop="showMoreOptions(index)">
|
|
|
- <text class="more-icon">⋯</text>
|
|
|
+ <sprite-icon name="gengduo-quan" :size="36" />
|
|
|
</view>
|
|
|
|
|
|
<!-- 更多选项弹出菜单 -->
|
|
|
@@ -129,56 +73,54 @@
|
|
|
/>
|
|
|
</view>
|
|
|
<view class="shop-info">
|
|
|
- <text class="shop-name">{{ item.name }}</text>
|
|
|
- <text class="shop-address"
|
|
|
- >{{ item.dist }}{{ item.address }}{{ item.floor }}</text
|
|
|
- >
|
|
|
+ <view class="shop-name-row">
|
|
|
+ <sprite-icon name="dianpu-fill" :size="30" custom-class="shop-name-icon" />
|
|
|
+ <text class="shop-name">{{ item.name }}</text>
|
|
|
+ <view class="member-tag">
|
|
|
+ <sprite-icon name="huangguan" :size="21" custom-class="member-crown-icon" />
|
|
|
+ <text class="member-tag-text">{{ getMemberLevelText(item) }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <text class="shop-address">{{ item.dist }}{{ item.address }}{{ item.floor }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <!-- 余额信息 -->
|
|
|
- <view class="balance-section" v-if="item.balance != 0">
|
|
|
+ <!-- 余额 / 进入店铺 -->
|
|
|
+ <view class="shop-main-actions">
|
|
|
+ <view class="balance-btn" @click.stop="recharge(item)">
|
|
|
+ <sprite-icon name="huashu" :size="40" custom-class="action-icon-slot" />
|
|
|
+ <view class="balance-btn-content">
|
|
|
+ <text class="balance-btn-label">{{ getBalanceLabel(item) }}</text>
|
|
|
+ <text class="balance-btn-value" :class="{ negative: Number(item.balance) < 0 }">{{ formatBalanceAmount(item) }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<view
|
|
|
- class="balance-item"
|
|
|
- @click.stop="recharge(item)"
|
|
|
- v-if="Number(item.balance) < 0"
|
|
|
+ class="enter-btn"
|
|
|
+ :class="{ disabled: item.openShop === 0 }"
|
|
|
+ @click.stop="enterShop(item)"
|
|
|
>
|
|
|
- <text class="balance-label">待结金额</text>
|
|
|
- <text class="balance-amount negative"
|
|
|
- >¥{{ parseFloat(Math.abs(item.balance)) }}</text
|
|
|
- >
|
|
|
- <text class="balance-action-2">去结账</text>
|
|
|
- </view>
|
|
|
- <view class="balance-item" @click.stop="recharge(item)" v-if="item.balance > 0" >
|
|
|
- <text class="balance-label">可用余额</text>
|
|
|
- <text class="balance-amount positive" >¥{{ parseFloat(item.balance) }}</text >
|
|
|
- <text class="balance-action">查看</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 操作按钮组 -->
|
|
|
- <view class="action-buttons">
|
|
|
- <view class="action-btn secondary bouquet" :class="{ disabled: item.openShop === 0 }" @click.stop="hs(item)">
|
|
|
- <text class="btn-text">💐 花束</text>
|
|
|
- </view>
|
|
|
- <view class="action-btn secondary plant" :class="{ disabled: item.openShop === 0 }" @click.stop="bug(item)">
|
|
|
- <text class="btn-text">🌷 绿植花材</text>
|
|
|
+ <sprite-icon name="hua" :size="40" custom-class="action-icon-slot" />
|
|
|
+ <text class="enter-btn-text">进入店铺</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <!-- 记录查询按钮 -->
|
|
|
- <view class="record-buttons">
|
|
|
- <view class="record-btn" @click="getLevelChange(item)">
|
|
|
- <text class="record-text">等级变动</text>
|
|
|
+ <!-- 底部快捷操作 -->
|
|
|
+ <view class="shop-util-actions">
|
|
|
+ <view class="util-btn" @click.stop="getLevelChange(item)">
|
|
|
+ <sprite-icon name="dengji-biandong" :size="36"/>
|
|
|
+ <text class="util-btn-text">等级变动</text>
|
|
|
</view>
|
|
|
- <view class="record-btn" @click="getBalanceChange(item)">
|
|
|
- <text class="record-text">余额变动</text>
|
|
|
+ <view class="util-btn" @click.stop="getBalanceChange(item)">
|
|
|
+ <sprite-icon name="yue-biandong" :size="36" custom-class="util-icon-slot" />
|
|
|
+ <text class="util-btn-text">余额变动</text>
|
|
|
</view>
|
|
|
- <view class="record-btn" @click="getSettleList(item)">
|
|
|
- <text class="record-text">结账记录</text>
|
|
|
+ <view class="util-btn" @click.stop="goMemberBenefits(item)">
|
|
|
+ <sprite-icon name="huiyuan-quanyi" :size="36" custom-class="util-icon-slot" />
|
|
|
+ <text class="util-btn-text">会员权益</text>
|
|
|
</view>
|
|
|
- <view class="record-btn" @click="getBuyList(item)">
|
|
|
- <text class="record-text">买花记录</text>
|
|
|
+ <view class="util-btn" @click.stop="contactService(item)">
|
|
|
+ <sprite-icon name="lianxikefu" :size="36" custom-class="util-icon-slot" />
|
|
|
+ <text class="util-btn-text">联系客服</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -201,11 +143,10 @@ import { getList, delHd } from "@/api/hd";
|
|
|
import { share } from "@/mixins";
|
|
|
import AppAvatarModule from "@/components/module/app-avatar";
|
|
|
import NoNetworkBar from "@/components/no-network-bar.vue";
|
|
|
+import SpriteIcon from "@/components/sprite-icon/index.vue";
|
|
|
import { mapGetters } from "vuex";
|
|
|
import { currentInfo } from "@/api/user";
|
|
|
import { list } from "@/mixins";
|
|
|
-import { APIHOST } from "@/config";
|
|
|
-import { unReadMsgCount } from "@/api/chat";
|
|
|
import { TOKEN_STORAGE_KEY } from "@/constant/storageKeys";
|
|
|
export default {
|
|
|
name: "recent",
|
|
|
@@ -216,6 +157,7 @@ export default {
|
|
|
TuiListCell,
|
|
|
AppActivilyCoupon,
|
|
|
NoNetworkBar,
|
|
|
+ SpriteIcon,
|
|
|
},
|
|
|
mixins: [share, list],
|
|
|
data() {
|
|
|
@@ -225,7 +167,6 @@ export default {
|
|
|
activePopupIndex: -1,
|
|
|
pageAction: { refresh: 0 },
|
|
|
user: { name: "", smallAvatar: "", id: 0 },
|
|
|
- unReadMsgNum:0, //未读消息数
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -293,7 +234,11 @@ export default {
|
|
|
this.pageTo({ url: "/pages/balance/changeList?id=" + item.id + "&account=" + item.shopId+"&hdId="+item.id, })
|
|
|
},
|
|
|
getBuyList(item) {
|
|
|
- this.pageTo({ url: "/pages/order/list?id=" + item.id + "&account=" + item.shopId+"&hdId="+item.id, })
|
|
|
+ this.pageTo({
|
|
|
+ url: "/pages/home/order",
|
|
|
+ type: 4,
|
|
|
+ query: { id: item.id, account: item.shopId, hdId: item.id }
|
|
|
+ });
|
|
|
},
|
|
|
bug(item) {
|
|
|
if(item.openShop == 0){
|
|
|
@@ -317,13 +262,9 @@ export default {
|
|
|
hasDelHd(){
|
|
|
this.pageTo({ url: "/pages/hd/hasDel" });
|
|
|
},
|
|
|
- setAddress() {
|
|
|
- this.pageTo({ url: "/pages/user/address" });
|
|
|
- },
|
|
|
init() {
|
|
|
this.getLoginInfo()
|
|
|
this.getMyHdList()
|
|
|
- this.getUnReadMsgCount()
|
|
|
},
|
|
|
getLoginInfo() {
|
|
|
currentInfo().then((res) => {
|
|
|
@@ -404,52 +345,6 @@ export default {
|
|
|
item.name,
|
|
|
});
|
|
|
},
|
|
|
- goToBirthday() {
|
|
|
- this.pageTo({ url: "/pages/user/birthday" });
|
|
|
- },
|
|
|
- goEdit() {
|
|
|
- this.pageTo({ url: "/pages/user/edit" });
|
|
|
- },
|
|
|
- onChooseAvatar(e) {
|
|
|
- if (e.detail.avatarUrl) {
|
|
|
- this.user.smallAvatar = e.detail.avatarUrl;
|
|
|
- this.updateUserAvatar(e.detail.avatarUrl);
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: "获取头像失败",
|
|
|
- icon: "none",
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- updateUserAvatar(avatarUrl) {
|
|
|
- let token = uni.getStorageSync(TOKEN_STORAGE_KEY) || "";
|
|
|
- let url = APIHOST + "/upload/save-file?actType=saveAvatar";
|
|
|
- uni.uploadFile({
|
|
|
- url: url,
|
|
|
- filePath: avatarUrl,
|
|
|
- name: "file",
|
|
|
- header: {
|
|
|
- token: token,
|
|
|
- },
|
|
|
- formData: {},
|
|
|
- success: (res) => {
|
|
|
- const ret = JSON.parse(res.data);
|
|
|
- if (ret.code == 1) {
|
|
|
- //无操作
|
|
|
- } else {
|
|
|
- uni.showToast({ title: ret.msg, icon: "none" });
|
|
|
- }
|
|
|
- },
|
|
|
- fail: () => uni.showToast({ title: "上传失败", icon: "none" }),
|
|
|
- });
|
|
|
- },
|
|
|
- getUnReadMsgCount(){
|
|
|
- unReadMsgCount().then(res=>{
|
|
|
- if(res.code == 1){
|
|
|
- this.unReadMsgNum = res.data.msg_count
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
delMyHd(item) {
|
|
|
this.hideMoreOptions();
|
|
|
this.$util.confirmModal({content:'确认删除该花店？'},() => {
|
|
|
@@ -461,6 +356,60 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 会员等级文案，接口无字段时默认普通会员
|
|
|
+ */
|
|
|
+ getMemberLevelText(item) {
|
|
|
+ return item.levelName || item.memberName || item.memberLevel || "普通会员";
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 余额按钮标签：负数为待结，其余为余额
|
|
|
+ */
|
|
|
+ getBalanceLabel(item) {
|
|
|
+ return Number(item.balance) < 0 ? "待结" : "余额";
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 余额展示数值
|
|
|
+ */
|
|
|
+ formatBalanceAmount(item) {
|
|
|
+ const balance = Number(item.balance || 0);
|
|
|
+ return parseFloat(Math.abs(balance));
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 进入店铺：跳转花材选购页
|
|
|
+ */
|
|
|
+ enterShop(item) {
|
|
|
+ if (item.openShop == 0) {
|
|
|
+ this.$msg("已休店");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.bug(item);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 会员权益
|
|
|
+ */
|
|
|
+ goMemberBenefits(item) {
|
|
|
+ this.pageTo({
|
|
|
+ url: "/pages/interest/level?account=" + item.shopId + "&hdId=" + item.id
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 联系客服：打开对应门店聊天
|
|
|
+ */
|
|
|
+ contactService(item) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/chat/chatPage",
|
|
|
+ success: (res) => {
|
|
|
+ res.eventChannel.emit("acceptDataFromOpenerPage", {
|
|
|
+ shopId: item.shopId,
|
|
|
+ customId: item.customId || "",
|
|
|
+ name: this.user.name || "",
|
|
|
+ avatar: this.user.smallAvatar || "",
|
|
|
+ chatPerson: item.name
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
}
|
|
|
},
|
|
|
};
|
|
|
@@ -468,12 +417,13 @@ export default {
|
|
|
<style lang="scss" scoped>
|
|
|
page {
|
|
|
height: 100%;
|
|
|
- background-color: #f8f9fa;
|
|
|
+ background-color: #f3f4f6;
|
|
|
}
|
|
|
|
|
|
.page-container {
|
|
|
min-height: 100vh;
|
|
|
- background-color: #f8f9fa;
|
|
|
+ background-color: #f3f4f6;
|
|
|
+ padding-bottom: calc(20upx + env(safe-area-inset-bottom));
|
|
|
}
|
|
|
|
|
|
// 登录页面样式
|
|
|
@@ -525,436 +475,208 @@ page {
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
-// 个人中心版块
|
|
|
-.profile-section {
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- padding: 35upx 30upx;
|
|
|
- margin-bottom: 20upx;
|
|
|
- box-shadow: 0 4upx 20upx rgba(102, 126, 234, 0.15);
|
|
|
-
|
|
|
- .profile-header {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
- margin-bottom: 35upx;
|
|
|
- padding: 0 10upx;
|
|
|
- border-radius: 10upx;
|
|
|
-
|
|
|
- .avatar-container {
|
|
|
- margin-right: 30upx;
|
|
|
- flex-shrink: 0;
|
|
|
-
|
|
|
- .avatar-button {
|
|
|
- background: none !important;
|
|
|
- border: none !important;
|
|
|
- padding: 0 !important;
|
|
|
- margin: 0 !important;
|
|
|
- line-height: 1;
|
|
|
- display: block;
|
|
|
- color: transparent !important;
|
|
|
-
|
|
|
- &::after {
|
|
|
- border: none !important;
|
|
|
- }
|
|
|
-
|
|
|
- /* &:active {
|
|
|
- background: none !important;
|
|
|
- } */
|
|
|
-
|
|
|
- &:focus {
|
|
|
- background: none !important;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .avatar {
|
|
|
- width: 110upx;
|
|
|
- height: 110upx;
|
|
|
- border-radius: 55upx;
|
|
|
- border: 3upx solid rgba(255, 255, 255, 0.3);
|
|
|
- background-color: #f5f5f5;
|
|
|
- box-shadow: 0 4upx 12upx rgba(0, 0, 0, 0.1);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .user-info {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .username {
|
|
|
- display: block;
|
|
|
- color: #ffffff;
|
|
|
- font-size: 45upx;
|
|
|
- font-weight: bold;
|
|
|
- margin-bottom: 8upx;
|
|
|
- text-shadow: 0 2upx 4upx rgba(0, 0, 0, 0.1);
|
|
|
- line-height: 1.2;
|
|
|
- }
|
|
|
-
|
|
|
- .user-id {
|
|
|
- display: block;
|
|
|
- color: rgba(255, 255, 255, 0.8);
|
|
|
- font-size: 28upx;
|
|
|
- line-height: 1.2;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .arrow-container {
|
|
|
- margin-left: 20upx;
|
|
|
- flex-shrink: 0;
|
|
|
-
|
|
|
- .arrow-icon {
|
|
|
- color: rgba(255, 255, 255, 0.7);
|
|
|
- font-size: 28upx;
|
|
|
- font-weight: 300;
|
|
|
- text-shadow: 0 1upx 2upx rgba(0, 0, 0, 0.1);
|
|
|
- transition: all 0.2s ease;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /* &:active .arrow-icon {
|
|
|
- color: #ffffff;
|
|
|
- } */
|
|
|
- }
|
|
|
-
|
|
|
- .function-grid {
|
|
|
- display: flex;
|
|
|
- flex-wrap: nowrap;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 0 10upx;
|
|
|
-
|
|
|
- > * {
|
|
|
- margin-right: 15upx;
|
|
|
- flex: 1 1 auto;
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .function-item-wrapper {
|
|
|
- position: relative;
|
|
|
- // 这里的 flex: 1 1 auto 已经由 > * 继承
|
|
|
-
|
|
|
- > .function-item {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .message-badge {
|
|
|
- position: absolute;
|
|
|
- top: -15upx;
|
|
|
- right: -15upx;
|
|
|
- width: 42upx;
|
|
|
- height: 42upx;
|
|
|
- background: #ff4757;
|
|
|
- border-radius: 21upx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- color: #ffffff;
|
|
|
- font-size: 22upx;
|
|
|
- font-weight: bold;
|
|
|
- box-shadow: 0 4upx 12upx rgba(255, 56, 56, 0.6);
|
|
|
- z-index: 10;
|
|
|
- text-shadow: 0 1upx 2upx rgba(0, 0, 0, 0.3);
|
|
|
- line-height: 1;
|
|
|
- min-width: 42upx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .function-item {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- height: 70upx;
|
|
|
- padding: 0 16upx; // 增加左右内边距防止字挤边上
|
|
|
- box-sizing: border-box; // 确保内边距不会撑开容器
|
|
|
- background: rgba(255, 255, 255, 0.15);
|
|
|
- border-radius: 15upx;
|
|
|
- border: 1upx solid rgba(255, 255, 255, 0.2);
|
|
|
- backdrop-filter: blur(10upx);
|
|
|
- transition: all 0.2s ease;
|
|
|
- box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.1);
|
|
|
-
|
|
|
- .function-text {
|
|
|
- color: #ffffff;
|
|
|
- font-size: 26upx; // 稍微调小一点字体，不然五个字多的可能会超出屏幕
|
|
|
- font-weight: 500;
|
|
|
- text-shadow: 0 1upx 2upx rgba(0, 0, 0, 0.1);
|
|
|
- line-height: 1;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 生日礼物提示横幅
|
|
|
- .birthday-banner {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- background: #fff5f5;
|
|
|
- border-radius: 15upx;
|
|
|
- padding: 20upx 24upx;
|
|
|
- margin-top: 20upx;
|
|
|
- border: 1upx solid #ffe4e4;
|
|
|
- box-shadow: 0 2upx 8upx rgba(255, 182, 193, 0.2);
|
|
|
-
|
|
|
- .gift-icon-container {
|
|
|
- width: 60upx;
|
|
|
- height: 60upx;
|
|
|
- background: #ff4757;
|
|
|
- border-radius: 30upx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin-right: 20upx;
|
|
|
- flex-shrink: 0;
|
|
|
-
|
|
|
- .gift-icon {
|
|
|
- font-size: 32upx;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .banner-text {
|
|
|
- flex: 1;
|
|
|
- margin-right: 20upx;
|
|
|
-
|
|
|
- .banner-title {
|
|
|
- font-size: 28upx;
|
|
|
- color: #ff4757;
|
|
|
- font-weight: 500;
|
|
|
- line-height: 1.4;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .banner-button {
|
|
|
- background: #ff4757;
|
|
|
- border-radius: 20upx;
|
|
|
- padding: 12upx 24upx;
|
|
|
- flex-shrink: 0;
|
|
|
-
|
|
|
- .button-text {
|
|
|
- font-size: 26upx;
|
|
|
- color: #ffffff;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /* &:active {
|
|
|
- background: #fff0f0;
|
|
|
- } */
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
// 花店列表
|
|
|
.shop-list {
|
|
|
- padding: 0 20upx;
|
|
|
+ padding: 20upx 24upx 40upx;
|
|
|
}
|
|
|
|
|
|
// 花店卡片
|
|
|
.shop-card {
|
|
|
- background: white;
|
|
|
- border-radius: 20upx;
|
|
|
- margin-bottom: 20upx;
|
|
|
- margin-top:40upx;
|
|
|
- padding: 30upx;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 24upx;
|
|
|
+ margin-bottom: 24upx;
|
|
|
+ padding: 28upx 28upx 24upx;
|
|
|
position: relative;
|
|
|
- box-shadow: 0 4upx 20upx rgba(0, 0, 0, 0.08);
|
|
|
+ box-shadow: 0 8upx 24upx rgba(15, 23, 42, 0.06);
|
|
|
|
|
|
.more-btn {
|
|
|
position: absolute;
|
|
|
- top: 20upx;
|
|
|
- right: 20upx;
|
|
|
- width: 40upx;
|
|
|
- height: 40upx;
|
|
|
+ top: 24upx;
|
|
|
+ right: 24upx;
|
|
|
+ width: 48upx;
|
|
|
+ height: 48upx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- border-radius: 20upx;
|
|
|
- background: rgba(0, 0, 0, 0.05);
|
|
|
+ border-radius: 24upx;
|
|
|
+ background: #f3f4f6;
|
|
|
+ z-index: 2;
|
|
|
|
|
|
.more-icon {
|
|
|
- font-size: 24upx;
|
|
|
- color: #585858;
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #9ca3af;
|
|
|
font-weight: bold;
|
|
|
+ line-height: 1;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.shop-header {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ padding-right: 56upx;
|
|
|
margin-bottom: 24upx;
|
|
|
|
|
|
.shop-avatar {
|
|
|
margin-right: 20upx;
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
|
.shop-logo {
|
|
|
- width: 80upx;
|
|
|
- height: 80upx;
|
|
|
- border-radius: 12upx;
|
|
|
+ width: 96upx;
|
|
|
+ height: 96upx;
|
|
|
+ border-radius: 48upx;
|
|
|
background-color: #f5f5f5;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.shop-info {
|
|
|
flex: 1;
|
|
|
+ min-width: 0;
|
|
|
|
|
|
- .shop-name {
|
|
|
- display: block;
|
|
|
- font-size: 38upx;
|
|
|
- font-weight: bold;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 8upx;
|
|
|
+ .shop-name-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10upx;
|
|
|
}
|
|
|
|
|
|
- .shop-address {
|
|
|
- display: block;
|
|
|
- font-size: 24upx;
|
|
|
- color: #999;
|
|
|
+ /* custom-class 在子组件根节点，需 deep 才能写间距 */
|
|
|
+ .shop-name-row ::v-deep .shop-name-icon {
|
|
|
+ margin-right: 8upx;
|
|
|
+ flex-shrink: 0;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
- .balance-section {
|
|
|
- margin-bottom: 24upx;
|
|
|
+ .member-tag ::v-deep .member-crown-icon {
|
|
|
+ margin-right: 4upx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
|
|
|
- .balance-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 20upx 24upx;
|
|
|
- background: #f8f9fa;
|
|
|
- border-radius: 12upx;
|
|
|
+ .shop-name {
|
|
|
+ max-width: 280upx;
|
|
|
+ color: #111827;
|
|
|
+ font-size: 34upx;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 1.2;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
|
|
|
- .balance-label {
|
|
|
- font-size: 38upx;
|
|
|
- color: #666;
|
|
|
+ .member-tag {
|
|
|
+ margin-left: 12upx;
|
|
|
+ padding: 4upx 14upx;
|
|
|
+ border-radius: 20upx;
|
|
|
+ background: #77c34f;
|
|
|
+ flex-shrink: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
|
|
|
- .balance-amount {
|
|
|
- font-size: 38upx;
|
|
|
+ .member-tag-text {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 22upx;
|
|
|
font-weight: 600;
|
|
|
-
|
|
|
- &.negative {
|
|
|
- color: #ff4757;
|
|
|
- }
|
|
|
-
|
|
|
- &.positive {
|
|
|
- color: #667eea;
|
|
|
- }
|
|
|
+ line-height: 1.2;
|
|
|
}
|
|
|
|
|
|
- .balance-action {
|
|
|
- font-size: 38upx;
|
|
|
- color: #667eea;
|
|
|
- text-decoration: underline;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .balance-action-2 {
|
|
|
- font-size: 38upx;
|
|
|
- color: #ff4757;
|
|
|
- text-decoration: underline;
|
|
|
- font-weight: bold;
|
|
|
+ .shop-address {
|
|
|
+ display: block;
|
|
|
+ color: #9ca3af;
|
|
|
+ font-size: 24upx;
|
|
|
+ line-height: 1.4;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .action-buttons {
|
|
|
+ .shop-main-actions {
|
|
|
display: flex;
|
|
|
- gap: 15upx;
|
|
|
- margin-bottom: 24upx;
|
|
|
-
|
|
|
- .action-btn {
|
|
|
- flex: 1;
|
|
|
- padding: 35upx 20upx;
|
|
|
- border-radius: 15upx;
|
|
|
- text-align: center;
|
|
|
- box-shadow: 0 4upx 12upx rgba(0, 0, 0, 0.15);
|
|
|
- transition: all 0.2s ease;
|
|
|
-
|
|
|
- /* &:active {
|
|
|
- box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.2);
|
|
|
- } */
|
|
|
+ margin-bottom: 20upx;
|
|
|
+ }
|
|
|
|
|
|
- &.primary {
|
|
|
- background: linear-gradient(135deg, #a55eea 0%, #8e44ad 100%);
|
|
|
- flex: 0.9;
|
|
|
- }
|
|
|
+ .balance-btn,
|
|
|
+ .enter-btn {
|
|
|
+ flex: 1;
|
|
|
+ min-height: 96upx;
|
|
|
+ border-radius: 16upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
|
|
|
- &.secondary {
|
|
|
- background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
|
|
|
- flex: 1.1;
|
|
|
+ .balance-btn {
|
|
|
+ margin-right: 16upx;
|
|
|
+ background: #ffeef5;
|
|
|
+ }
|
|
|
|
|
|
- &.bouquet {
|
|
|
- background: linear-gradient(135deg, #fff0f6 0%, #ffd1e1 100%);
|
|
|
- border: 1upx solid #f5a3be;
|
|
|
- box-shadow: 0 4upx 12upx rgba(199, 72, 118, 0.18);
|
|
|
+ .enter-btn {
|
|
|
+ background: #eef9f0;
|
|
|
|
|
|
- .btn-text {
|
|
|
- color: #b83265;
|
|
|
- text-shadow: none;
|
|
|
- }
|
|
|
- }
|
|
|
+ &.disabled {
|
|
|
+ opacity: 0.55;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- &.plant {
|
|
|
- background: linear-gradient(135deg, #e9f8ee 0%, #bfe8cc 100%);
|
|
|
- border: 1upx solid #8bd39f;
|
|
|
- box-shadow: 0 4upx 12upx rgba(46, 125, 78, 0.18);
|
|
|
+ .balance-btn ::v-deep .action-icon-slot,
|
|
|
+ .enter-btn ::v-deep .action-icon-slot {
|
|
|
+ margin-right: 10upx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
|
|
|
- .btn-text {
|
|
|
- color: #1f7a3d;
|
|
|
- text-shadow: none;
|
|
|
- }
|
|
|
- }
|
|
|
+ .balance-btn-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+ }
|
|
|
|
|
|
- &.disabled {
|
|
|
- background: linear-gradient(135deg, #ccc 0%, #999 100%);
|
|
|
- opacity: 0.6;
|
|
|
- box-shadow: none;
|
|
|
- pointer-events: none;
|
|
|
- }
|
|
|
- }
|
|
|
+ .balance-btn-label {
|
|
|
+ color: #374151;
|
|
|
+ font-size: 28upx;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-right: 8upx;
|
|
|
+ }
|
|
|
|
|
|
- &.tertiary {
|
|
|
- background: #e91e63;
|
|
|
- }
|
|
|
+ .balance-btn-value {
|
|
|
+ color: #d63384;
|
|
|
+ font-size: 34upx;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 1;
|
|
|
|
|
|
- .btn-text {
|
|
|
- color: white;
|
|
|
- font-size: 36upx;
|
|
|
- font-weight: 600;
|
|
|
- text-shadow: 0 1upx 2upx rgba(0, 0, 0, 0.2);
|
|
|
- }
|
|
|
+ &.negative {
|
|
|
+ color: #ef4444;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .record-buttons {
|
|
|
+ .enter-btn-text {
|
|
|
+ color: #1f7a3d;
|
|
|
+ font-size: 30upx;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-util-actions {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
- gap: 12upx;
|
|
|
+ }
|
|
|
|
|
|
- .record-btn {
|
|
|
- flex: 1;
|
|
|
- min-width: 140upx;
|
|
|
- padding: 16upx 12upx;
|
|
|
- background: #f8f9fa;
|
|
|
- border-radius: 8upx;
|
|
|
- text-align: center;
|
|
|
- border: 1upx solid #e9ecef;
|
|
|
+ .util-btn {
|
|
|
+ width: 25%;
|
|
|
+ padding: 8upx 4upx 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
|
|
|
- /* &:active {
|
|
|
- background: #e9ecef;
|
|
|
- } */
|
|
|
+ .util-btn ::v-deep .util-icon-slot {
|
|
|
+ margin-bottom: 8upx;
|
|
|
+ }
|
|
|
|
|
|
- .record-text {
|
|
|
- font-size: 26upx;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
- }
|
|
|
+ .util-btn-text {
|
|
|
+ color: #6b7280;
|
|
|
+ font-size: 22upx;
|
|
|
+ line-height: 1.3;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
}
|
|
|
|
ouyang