|
|
@@ -37,10 +37,10 @@
|
|
|
<!-- 贴在昵称下方左侧，避开右侧花朵装饰 -->
|
|
|
<view class="profile-card__actions" @click.stop>
|
|
|
<view class="profile-card__action" @click.stop="goChat">
|
|
|
- <sprite-icon name="xiaoxi" :size="36" custom-class="profile-action-icon" />
|
|
|
+ <text class="iconfont iconmessage profile-action-icon"></text>
|
|
|
</view>
|
|
|
<view class="profile-card__action" @click.stop="goSettings">
|
|
|
- <sprite-icon name="shezhi" :size="36" custom-class="profile-action-icon" />
|
|
|
+ <text class="iconfont iconshezhi profile-action-icon"></text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -53,7 +53,7 @@
|
|
|
<text class="section-title">我的订单</text>
|
|
|
<view class="section-link" @click="goAllOrders">
|
|
|
<text class="section-link__text">查看全部</text>
|
|
|
- <text class="section-link__arrow">›</text>
|
|
|
+ <text class="iconfont iconxiangyou section-link__arrow"></text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="order-grid">
|
|
|
@@ -65,7 +65,7 @@
|
|
|
@click="goOrderStatus(item)"
|
|
|
>
|
|
|
<view class="order-icon-wrap" :class="'order-icon-wrap--' + item.theme">
|
|
|
- <sprite-icon :name="item.icon" :size="item.iconSize" custom-class="order-icon" />
|
|
|
+ <text class="iconfont order-iconfont" :class="item.iconfont"></text>
|
|
|
</view>
|
|
|
<text class="order-item__label">{{ item.name }}</text>
|
|
|
</view>
|
|
|
@@ -86,16 +86,10 @@
|
|
|
@click="onServiceClick(item)"
|
|
|
>
|
|
|
<view class="service-item__left">
|
|
|
- <sprite-icon
|
|
|
- v-if="item.icon"
|
|
|
- :name="item.icon"
|
|
|
- :size="item.iconSize || 48"
|
|
|
- custom-class="service-icon"
|
|
|
- />
|
|
|
- <text v-else class="iconfont service-iconfont" :class="item.iconfont"></text>
|
|
|
+ <text class="iconfont service-iconfont" :class="item.iconfont"></text>
|
|
|
<text class="service-item__label">{{ item.name }}</text>
|
|
|
</view>
|
|
|
- <text class="service-item__arrow">›</text>
|
|
|
+ <text class="iconfont iconxiangyou service-item__arrow"></text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -109,7 +103,6 @@
|
|
|
* 原生 tabBar 入口，展示会员信息、订单状态快捷入口与服务菜单
|
|
|
*/
|
|
|
import { mapGetters } from "vuex";
|
|
|
-import SpriteIcon from "@/components/sprite-icon/index.vue";
|
|
|
import { getNavBarMetrics } from "@/utils/navBar";
|
|
|
import { getShopUser } from "@/utils/auth";
|
|
|
import { clearLogin } from "@/api/user";
|
|
|
@@ -117,26 +110,23 @@ import { SHOP_NAV_ACTIVE_KEY } from "@/constant/storageKeys";
|
|
|
|
|
|
export default {
|
|
|
name: "user",
|
|
|
- components: {
|
|
|
- SpriteIcon
|
|
|
- },
|
|
|
data() {
|
|
|
return {
|
|
|
constant: this.$constant,
|
|
|
navMetrics: getNavBarMetrics(),
|
|
|
- /** 订单快捷入口：status 对应订单 Tab；退款/售后走独立列表 url */
|
|
|
+ /** 订单快捷入口：iconfont；status 对应订单 Tab；退款/售后走独立列表 */
|
|
|
orderShortcuts: [
|
|
|
- { key: "pay", name: "待付款", icon: "qianbao", iconSize: 48, status: "1", theme: "pink" },
|
|
|
- { key: "delivery", name: "待配送", icon: "huoche-da", iconSize: 48, status: "2", theme: "green" },
|
|
|
- { key: "receive", name: "待收货", icon: "baoguo", iconSize: 48, status: "3", theme: "green" },
|
|
|
- { key: "refund", name: "退款/售后", icon: "fanghu-yuan", iconSize: 48, url: "/pages/order/refund-list", theme: "pink" }
|
|
|
+ { key: "pay", name: "待付款", iconfont: "icondaifukuan", status: "1", theme: "green" },
|
|
|
+ { key: "delivery", name: "待配送", iconfont: "iconfahuo", status: "2", theme: "green" },
|
|
|
+ { key: "receive", name: "待收货", iconfont: "icondaishouhuo", status: "3", theme: "green" },
|
|
|
+ { key: "refund", name: "退款/售后", iconfont: "iconshouhou", url: "/pages/order/refund-list", theme: "green" }
|
|
|
],
|
|
|
- /** 服务菜单 */
|
|
|
+ /** 服务菜单：统一 iconfont */
|
|
|
serviceItems: [
|
|
|
- { key: "coupon", name: "我的红包", icon: "youhuiquan-yellow", iconSize: 40, url: "/pages/hb/list" },
|
|
|
- { key: "addressNew", name: "收货地址", iconfont: "iconditu", url: "/pages/user/address/list" },
|
|
|
- { key: "hasDel", name: "已删花店", icon: "dianpu-fill", iconSize: 40, url: "/pages/hd/hasDel" },
|
|
|
- { key: "logout", name: "退出登录", icon: "tuichu", iconSize: 40, action: "logout" }
|
|
|
+ { key: "coupon", name: "我的红包", iconfont: "iconhongbao", url: "/pages/hb/list" },
|
|
|
+ { key: "addressNew", name: "收货地址", iconfont: "iconshouhuodizhi", url: "/pages/user/address/list" },
|
|
|
+ { key: "hasDel", name: "已删花店", iconfont: "icondianpuweixuanzhong", url: "/pages/hd/hasDel" },
|
|
|
+ { key: "logout", name: "退出登录", iconfont: "icontuichu", action: "logout" }
|
|
|
]
|
|
|
};
|
|
|
},
|
|
|
@@ -371,6 +361,12 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+.profile-action-icon {
|
|
|
+ font-size: 36upx;
|
|
|
+ color: #4b5563;
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+
|
|
|
.profile-card__content {
|
|
|
position: relative;
|
|
|
z-index: 1;
|
|
|
@@ -464,9 +460,9 @@ export default {
|
|
|
}
|
|
|
|
|
|
.section-link__arrow {
|
|
|
- font-size: 28upx;
|
|
|
+ font-size: 22upx;
|
|
|
color: #9ca3af;
|
|
|
- margin-left: 4upx;
|
|
|
+ margin-left: 6upx;
|
|
|
line-height: 1;
|
|
|
}
|
|
|
|
|
|
@@ -501,10 +497,23 @@ export default {
|
|
|
|
|
|
.order-icon-wrap--pink {
|
|
|
background: #fce7f3;
|
|
|
+
|
|
|
+ .order-iconfont {
|
|
|
+ color: #ec4899;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.order-icon-wrap--green {
|
|
|
background: #ecfdf3;
|
|
|
+
|
|
|
+ .order-iconfont {
|
|
|
+ color: #049e2c;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.order-iconfont {
|
|
|
+ font-size: 50upx;
|
|
|
+ line-height: 1;
|
|
|
}
|
|
|
|
|
|
.order-item__label {
|
|
|
@@ -519,17 +528,19 @@ export default {
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
+/* 服务行：左右整行垂直居中 */
|
|
|
.service-item {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
- padding: 28upx 0;
|
|
|
+ min-height: 96upx;
|
|
|
+ padding: 0;
|
|
|
border-top: 1upx solid #f3f4f6;
|
|
|
- margin-top: 20upx;
|
|
|
+ margin-top: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
&--first {
|
|
|
- margin-top: 0;
|
|
|
border-top: none;
|
|
|
}
|
|
|
}
|
|
|
@@ -540,28 +551,28 @@ export default {
|
|
|
align-items: center;
|
|
|
flex: 1;
|
|
|
min-width: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.service-item__left ::v-deep .service-icon {
|
|
|
- margin-right: 20upx;
|
|
|
+ min-height: 96upx;
|
|
|
}
|
|
|
|
|
|
.service-iconfont {
|
|
|
- font-size: 36upx;
|
|
|
- color: #3b82f6;
|
|
|
+ font-size: 40upx;
|
|
|
+ color: #049e2c;
|
|
|
margin-right: 20upx;
|
|
|
flex-shrink: 0;
|
|
|
+ line-height: 1;
|
|
|
}
|
|
|
|
|
|
.service-item__label {
|
|
|
font-size: 30upx;
|
|
|
color: #374151;
|
|
|
+ line-height: 1.2;
|
|
|
}
|
|
|
|
|
|
.service-item__arrow {
|
|
|
- font-size: 32upx;
|
|
|
- color: #d1d5db;
|
|
|
+ font-size: 24upx;
|
|
|
+ color: #333333;
|
|
|
flex-shrink: 0;
|
|
|
margin-left: 16upx;
|
|
|
+ line-height: 1;
|
|
|
}
|
|
|
</style>
|
ouyang