|
|
@@ -46,16 +46,16 @@
|
|
|
<!-- 无网络提示条 -->
|
|
|
<no-network-bar></no-network-bar>
|
|
|
|
|
|
- <!-- 花店列表 -->
|
|
|
+ <!-- 花店列表：卡片布局对齐设计稿（头图信息 / 余额条 / 四列快捷） -->
|
|
|
<view class="shop-list" v-if="!$util.isEmpty(list.data)">
|
|
|
<view
|
|
|
class="shop-card"
|
|
|
v-for="(item, index) in list.data"
|
|
|
:key="item.id"
|
|
|
>
|
|
|
- <!-- 更多选项按钮 -->
|
|
|
+ <!-- 更多选项 -->
|
|
|
<view class="more-btn" @click.stop="showMoreOptions(index)">
|
|
|
- <text class="more-icon">...</text>
|
|
|
+ <text class="more-icon">···</text>
|
|
|
</view>
|
|
|
|
|
|
<!-- 更多选项弹出菜单 -->
|
|
|
@@ -93,7 +93,7 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <!-- 店铺基本信息 -->
|
|
|
+ <!-- 店铺头：头像 + 店名/会员标 + 地址 -->
|
|
|
<view class="shop-header">
|
|
|
<view class="shop-avatar">
|
|
|
<image
|
|
|
@@ -109,14 +109,17 @@
|
|
|
<text class="member-tag-text">{{ getMemberLevelText(item) }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <text class="shop-address">{{ item.dist }}{{ item.address }}{{ item.floor }}</text>
|
|
|
+ <view class="shop-address-row">
|
|
|
+ <text class="iconfont icondianhua address-icon"></text>
|
|
|
+ <text class="shop-address">{{ item.dist }}{{ item.address }}{{ item.floor }}</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <!-- 余额 / 进入店铺 -->
|
|
|
- <view class="shop-main-actions">
|
|
|
+ <!-- 中部一整块圆角：左余额浅灰、右进入店铺浅绿（底色区分，不拆开） -->
|
|
|
+ <view class="shop-summary">
|
|
|
<view
|
|
|
- class="balance-btn"
|
|
|
+ class="summary-balance"
|
|
|
:class="{
|
|
|
'is-debt': Number(item.balance) < 0,
|
|
|
'is-positive': Number(item.balance) > 0,
|
|
|
@@ -124,37 +127,36 @@
|
|
|
}"
|
|
|
@click.stop="recharge(item)"
|
|
|
>
|
|
|
- <view class="balance-btn-content">
|
|
|
- <text class="balance-btn-label">{{ getBalanceLabel(item) }}</text>
|
|
|
- <text class="balance-btn-value">{{ formatBalanceAmount(item) }}</text>
|
|
|
- </view>
|
|
|
+ <text class="balance-label">{{ getBalanceLabel(item) }}</text>
|
|
|
+ <text class="balance-value">{{ formatBalanceAmount(item) }}</text>
|
|
|
</view>
|
|
|
<view
|
|
|
- class="enter-btn"
|
|
|
+ class="summary-enter"
|
|
|
:class="{ disabled: item.openShop === 0 }"
|
|
|
@click.stop="enterShop(item)"
|
|
|
>
|
|
|
- <sprite-icon name="hua" :size="40" custom-class="action-icon-slot" />
|
|
|
- <text class="enter-btn-text">进入店铺</text>
|
|
|
+ <text class="iconfont icondianpuweixuanzhong enter-icon"></text>
|
|
|
+ <text class="enter-text">进入店铺</text>
|
|
|
+ <text class="enter-arrow">›</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <!-- 底部快捷操作：2×2 网格，图标+文字横向排列 -->
|
|
|
+ <!-- 底部四列快捷：图标在上、文字在下，竖线分隔 -->
|
|
|
<view class="shop-util-actions">
|
|
|
<view class="util-btn" @click.stop="goMyDividend(item)">
|
|
|
- <sprite-icon name="dengji-biandong" :size="32" custom-class="util-btn-icon" />
|
|
|
+ <text class="iconfont iconfenhong util-btn-icon"></text>
|
|
|
<text class="util-btn-text">我的分红</text>
|
|
|
</view>
|
|
|
<view class="util-btn" @click.stop="getBalanceChange(item)">
|
|
|
- <sprite-icon name="yue-biandong" :size="32" custom-class="util-btn-icon" />
|
|
|
+ <text class="iconfont iconyuechaxun util-btn-icon"></text>
|
|
|
<text class="util-btn-text">余额变动</text>
|
|
|
</view>
|
|
|
<view class="util-btn" @click.stop="goMemberBenefits(item)">
|
|
|
- <sprite-icon name="huiyuan-quanyi" :size="32" custom-class="util-btn-icon" />
|
|
|
+ <text class="iconfont iconhuiyuandengjishezhi util-btn-icon"></text>
|
|
|
<text class="util-btn-text">会员权益</text>
|
|
|
</view>
|
|
|
<view class="util-btn" @click.stop="contactService(item)">
|
|
|
- <sprite-icon name="lianxikefu" :size="32" custom-class="util-btn-icon" />
|
|
|
+ <text class="iconfont iconkefu1 util-btn-icon"></text>
|
|
|
<text class="util-btn-text">联系客服</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -185,7 +187,6 @@ import { checkArrival } from "@/api/hb";
|
|
|
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";
|
|
|
@@ -199,7 +200,6 @@ export default {
|
|
|
TuiListCell,
|
|
|
AppHbArrival,
|
|
|
NoNetworkBar,
|
|
|
- SpriteIcon,
|
|
|
},
|
|
|
mixins: [share, list],
|
|
|
data() {
|
|
|
@@ -498,11 +498,11 @@ export default {
|
|
|
return Number(item.balance) < 0 ? "待结" : "余额";
|
|
|
},
|
|
|
/**
|
|
|
- * 余额展示数值
|
|
|
+ * 余额展示数值：待结保留负号，与设计稿「待结 -200」一致
|
|
|
*/
|
|
|
formatBalanceAmount(item) {
|
|
|
const balance = Number(item.balance || 0);
|
|
|
- return parseFloat(Math.abs(balance));
|
|
|
+ return parseFloat(balance);
|
|
|
},
|
|
|
/**
|
|
|
* 进入店铺：跳转可配置的店铺首页
|
|
|
@@ -676,31 +676,30 @@ page {
|
|
|
padding: 20upx 24upx 40upx;
|
|
|
}
|
|
|
|
|
|
-// 花店卡片
|
|
|
+// 花店卡片（对齐设计：白卡圆角 + 灰底摘要条 + 四列快捷）
|
|
|
.shop-card {
|
|
|
background: #ffffff;
|
|
|
- border-radius: 24upx;
|
|
|
+ border-radius: 20upx;
|
|
|
margin-bottom: 24upx;
|
|
|
- padding: 28upx 28upx 24upx;
|
|
|
+ padding: 28upx 28upx 8upx;
|
|
|
position: relative;
|
|
|
- box-shadow: 0 8upx 24upx rgba(15, 23, 42, 0.06);
|
|
|
+ box-shadow: 0 4upx 20upx rgba(15, 23, 42, 0.05);
|
|
|
|
|
|
.more-btn {
|
|
|
position: absolute;
|
|
|
- top: 24upx;
|
|
|
- right: 24upx;
|
|
|
- width: 48upx;
|
|
|
- height: 48upx;
|
|
|
+ top: 16upx;
|
|
|
+ right: 12upx;
|
|
|
+ width: 56upx;
|
|
|
+ height: 56upx;
|
|
|
display: flex;
|
|
|
+ align-items: center;
|
|
|
justify-content: center;
|
|
|
- border-radius: 24upx;
|
|
|
- background: #f3f4f6;
|
|
|
z-index: 2;
|
|
|
|
|
|
.more-icon {
|
|
|
- font-size: 32upx;
|
|
|
- color: #9ca3af;
|
|
|
- font-weight: bold;
|
|
|
+ font-size: 36upx;
|
|
|
+ color: #c0c4cc;
|
|
|
+ font-weight: 700;
|
|
|
line-height: 1;
|
|
|
letter-spacing: 2upx;
|
|
|
}
|
|
|
@@ -709,7 +708,7 @@ page {
|
|
|
.shop-header {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- padding-right: 56upx;
|
|
|
+ padding-right: 48upx;
|
|
|
margin-bottom: 24upx;
|
|
|
|
|
|
.shop-avatar {
|
|
|
@@ -731,24 +730,12 @@ page {
|
|
|
.shop-name-row {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- margin-bottom: 10upx;
|
|
|
- }
|
|
|
-
|
|
|
- /* custom-class 在子组件根节点，需 deep 才能写间距 */
|
|
|
- .shop-name-row ::v-deep .shop-name-icon {
|
|
|
- margin-right: 8upx;
|
|
|
- flex-shrink: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .member-tag ::v-deep .member-crown-icon {
|
|
|
- margin-right: 4upx;
|
|
|
- margin-botom: 14upx;
|
|
|
- flex-shrink: 0;
|
|
|
+ margin-bottom: 12upx;
|
|
|
}
|
|
|
|
|
|
.shop-name {
|
|
|
max-width: 280upx;
|
|
|
- color: #111827;
|
|
|
+ color: #1a1a1a;
|
|
|
font-size: 34upx;
|
|
|
font-weight: 700;
|
|
|
line-height: 1.2;
|
|
|
@@ -757,25 +744,41 @@ page {
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
+ /* 会员标签：浅灰底，文字用主题绿 */
|
|
|
.member-tag {
|
|
|
margin-left: 12upx;
|
|
|
- padding: 4upx 14upx;
|
|
|
- border-radius: 20upx;
|
|
|
- background: #eef9f0;
|
|
|
+ padding: 4upx 12upx;
|
|
|
+ border-radius: 8upx;
|
|
|
+ background: #f0f1f3;
|
|
|
flex-shrink: 0;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.member-tag-text {
|
|
|
- color: #1f7a3d;
|
|
|
+ color: $mainColor1;
|
|
|
font-size: 22upx;
|
|
|
- font-weight: 600;
|
|
|
+ font-weight: 500;
|
|
|
line-height: 1.2;
|
|
|
}
|
|
|
|
|
|
+ .shop-address-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ min-width: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .address-icon {
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-right: 6upx;
|
|
|
+ font-size: 24upx;
|
|
|
+ color: $mainColor1;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+
|
|
|
.shop-address {
|
|
|
- display: block;
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
color: #9ca3af;
|
|
|
font-size: 24upx;
|
|
|
line-height: 1.4;
|
|
|
@@ -786,138 +789,131 @@ page {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .shop-main-actions {
|
|
|
+ /* 中部一整块圆角：左右底色区分，内容垂直居中 */
|
|
|
+ .shop-summary {
|
|
|
display: flex;
|
|
|
- margin-bottom: 20upx;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: stretch;
|
|
|
+ margin-bottom: 8upx;
|
|
|
+ border-radius: 16upx;
|
|
|
+ overflow: hidden;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
- .balance-btn,
|
|
|
- .enter-btn {
|
|
|
+ .summary-balance,
|
|
|
+ .summary-enter {
|
|
|
flex: 1;
|
|
|
- min-height: 96upx;
|
|
|
- border-radius: 16upx;
|
|
|
+ min-height: 115upx;
|
|
|
display: flex;
|
|
|
+ flex-direction: row;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
+ padding: 20upx 12upx;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
- .balance-btn {
|
|
|
- margin-right: 16upx;
|
|
|
- background: #eef9f0;
|
|
|
-
|
|
|
- /* 余额为 0：标签+数值均为绿色，不加粗 */
|
|
|
- &.is-zero {
|
|
|
- background: #eef9f0;
|
|
|
+ .summary-balance {
|
|
|
+ background: #f5f6f8;
|
|
|
|
|
|
- .balance-btn-label,
|
|
|
- .balance-btn-value {
|
|
|
- color: #1f7a3d;
|
|
|
- font-weight: 400;
|
|
|
- }
|
|
|
+ .balance-label {
|
|
|
+ color: #333333;
|
|
|
}
|
|
|
|
|
|
- /* 余额 > 0：文字蓝色加粗，背景保持原绿色底 */
|
|
|
- &.is-positive {
|
|
|
- background: #eef9f0;
|
|
|
-
|
|
|
- .balance-btn-label,
|
|
|
- .balance-btn-value {
|
|
|
- color: #4c8ff3;
|
|
|
- font-weight: 700;
|
|
|
- }
|
|
|
+ .balance-value {
|
|
|
+ margin-left: 20upx;
|
|
|
+ color: $mainColor1;
|
|
|
}
|
|
|
|
|
|
- /* 待结（余额 < 0）：标签+数值均为红色加粗 */
|
|
|
&.is-debt {
|
|
|
- background: #fef2f2;
|
|
|
-
|
|
|
- .balance-btn-label,
|
|
|
- .balance-btn-value {
|
|
|
+ .balance-label,
|
|
|
+ .balance-value {
|
|
|
color: #ef4444;
|
|
|
- font-weight: 700;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .enter-btn {
|
|
|
- background: #eef9f0;
|
|
|
+ .balance-label {
|
|
|
+ font-size: 28upx;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-right: 10upx;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .balance-value {
|
|
|
+ font-size: 44upx;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .summary-enter {
|
|
|
+ background: rgba(4, 158, 44, 0.1);
|
|
|
|
|
|
&.disabled {
|
|
|
- opacity: 0.55;
|
|
|
+ opacity: 0.5;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .balance-btn ::v-deep .action-icon-slot,
|
|
|
- .enter-btn ::v-deep .action-icon-slot {
|
|
|
- margin-right: 10upx;
|
|
|
+ .enter-icon {
|
|
|
+ margin-right: 20upx;
|
|
|
flex-shrink: 0;
|
|
|
+ font-size: 36upx;
|
|
|
+ color: $mainColor1;
|
|
|
+ line-height: 1;
|
|
|
}
|
|
|
|
|
|
- .balance-btn-content {
|
|
|
- display: flex;
|
|
|
- align-items: baseline;
|
|
|
- }
|
|
|
-
|
|
|
- .balance-btn-label {
|
|
|
- font-size: 30upx;
|
|
|
+ .enter-text {
|
|
|
+ color: $mainColor1;
|
|
|
+ font-size: 28upx;
|
|
|
font-weight: 600;
|
|
|
- margin-right: 8upx;
|
|
|
- }
|
|
|
-
|
|
|
- .balance-btn-value {
|
|
|
- font-size: 34upx;
|
|
|
- font-weight: 700;
|
|
|
line-height: 1;
|
|
|
}
|
|
|
|
|
|
- .enter-btn-text {
|
|
|
- color: #1f7a3d;
|
|
|
- font-size: 30upx;
|
|
|
- font-weight: 700;
|
|
|
+ .enter-arrow {
|
|
|
+ margin-left: 4upx;
|
|
|
+ color: $mainColor1;
|
|
|
+ font-size: 32upx;
|
|
|
+ line-height: 1;
|
|
|
+ font-weight: 400;
|
|
|
}
|
|
|
|
|
|
+ /* 四列快捷：上图标下文案，竖线分隔，无灰底按钮块 */
|
|
|
.shop-util-actions {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
- flex-wrap: nowrap;
|
|
|
+ align-items: stretch;
|
|
|
+ padding: 25upx 0 20upx;
|
|
|
}
|
|
|
|
|
|
- /* 快捷按钮：同一排，图标左、文字右 */
|
|
|
.util-btn {
|
|
|
flex: 1;
|
|
|
min-width: 0;
|
|
|
- margin-right: 10upx;
|
|
|
- padding: 14upx 8upx;
|
|
|
+ padding: 8upx 4upx;
|
|
|
box-sizing: border-box;
|
|
|
display: flex;
|
|
|
- flex-direction: row;
|
|
|
+ flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- background: #f5f6f8;
|
|
|
- border: 1upx solid #e5e7eb;
|
|
|
- border-radius: 12upx;
|
|
|
+ border-right: 1upx solid #eceef2;
|
|
|
|
|
|
&:last-child {
|
|
|
- margin-right: 0;
|
|
|
+ border-right: none;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .util-btn ::v-deep .util-btn-icon {
|
|
|
- margin-right: 6upx;
|
|
|
+ .util-btn-icon {
|
|
|
+ margin-bottom: 20upx;
|
|
|
flex-shrink: 0;
|
|
|
+ font-size: 50upx;
|
|
|
+ color: $mainColor1;
|
|
|
+ line-height: 1;
|
|
|
}
|
|
|
|
|
|
.util-btn-text {
|
|
|
- flex-shrink: 1;
|
|
|
- min-width: 0;
|
|
|
color: #6b7280;
|
|
|
- font-size: 24upx;
|
|
|
+ font-size: 22upx;
|
|
|
line-height: 1.2;
|
|
|
- text-align: left;
|
|
|
+ text-align: center;
|
|
|
white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
}
|
|
|
}
|
|
|
|
ouyang