From cce741189bfa7063cf0ee83e0a11df1ab539958c Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期二, 21 四月 2026 20:27:44 +0800
Subject: [PATCH] 门店
---
small-program/shop/pages/store-home/store-home.vue | 344 ++++++++++++++++++++++++++++++++-------------------------
1 files changed, 194 insertions(+), 150 deletions(-)
diff --git a/small-program/shop/pages/store-home/store-home.vue b/small-program/shop/pages/store-home/store-home.vue
index b144a38..991a139 100644
--- a/small-program/shop/pages/store-home/store-home.vue
+++ b/small-program/shop/pages/store-home/store-home.vue
@@ -6,30 +6,40 @@
<view class="custom-nav">
<view :style="{ height: statusbarHeight + 'px' }"></view>
<view class="nav-content" :style="{ height: navHeight + 'px' }">
+ <image class="nav-icon" src="/static/icon/ic_home@2x.png"></image>
<text class="nav-title">涓搧蹇繍鍗楃珯鏃楄埌搴�</text>
</view>
</view>
-
+ <view :style="{ height: (statusbarHeight + navHeight) + 'px' }"></view>
<!-- 鏁版嵁缁熻 -->
<view class="stats-section" :style="{ backgroundImage: 'url(' + bgImg + ')' }">
<view class="stats-tabs">
- <text class="tab-item active">浠婃棩</text>
- <text class="tab-item">鏈湀</text>
- <text class="tab-item">涓婃湀</text>
+ <view class="stats-tabs-left">
+ <text class="tab-item active">浠婃棩</text>
+ <text class="tab-item">鏈湀</text>
+ <text class="tab-item">涓婃湀</text>
+ </view>
<text class="tab-item right">鍦ㄥ簱璁㈠崟: 10</text>
</view>
<view class="stats-cards">
<view class="stat-card">
- <text class="stat-label">閿�鍞(鍏�)</text>
+ <view class="stat-label">
+ <text>閿�鍞(鍏�)</text>
+ <image class="stat-icon" src="/static/icon/ic_visible@2x.png"></image>
+ </view>
<text class="stat-value">12,000.00</text>
</view>
<view class="stat-card">
- <text class="stat-label">缁撶畻鍒╂鼎(鍏�)</text>
+ <view class="stat-label">
+ <text>缁撶畻鍒╂鼎(鍏�)</text>
+ </view>
<text class="stat-value">1,200.00</text>
</view>
<view class="stat-card">
- <text class="stat-label">璁㈠崟鏁�</text>
+ <view class="stat-label">
+ <text>璁㈠崟鏁�</text>
+ </view>
<text class="stat-value">23</text>
</view>
</view>
@@ -46,27 +56,28 @@
<image class="func-icon" src="/static/icon/ic_dingdanguanli@2x.png"></image>
<text class="func-text">璁㈠崟绠＄悊</text>
</view>
- <view class="func-btn">
+ <view class="func-btn" @click="goToStoreInfo">
<image class="func-icon" src="/static/icon/ic_wodezizhi@2x.png"></image>
<text class="func-text">闂ㄥ簵淇℃伅</text>
</view>
- <view class="func-btn">
+ <view class="func-btn" @click="goToQualification">
<image class="func-icon" src="/static/icon/ic_wodezizhi@2x.png"></image>
<text class="func-text">闂ㄥ簵璧勮川</text>
</view>
</view>
+ <text class="section-title">寰呭鐞嗚鍗�(2)</text>
+
<!-- 寰呭鐞嗚鍗� -->
<view class="orders-section">
- <!-- <text class="section-title">寰呭鐞嗚鍗�(2)</text> -->
-
<view class="order-item">
<view class="order-header">
- <view class="order-tag">灏卞湴瀵勫瓨</view>
- <text class="order-user">鏉庢槑 181****1898</text>
+ <view style="display: flex; align-items: center;">
+ <view class="order-tag">灏卞湴瀵勫瓨</view>
+ <text class="order-user">鏉庢槑 181****1898</text>
+ </view>
<text class="order-status">寰呮牳楠�</text>
</view>
-
<view class="order-items">
<view class="order-product">
<view class="product-info">
@@ -91,94 +102,51 @@
</view>
<view class="order-footer">
- <text class="total-price">瀹炰粯娆�: 楼80.00</text>
+ <text class="total-price">
+ <text>瀹炰粯娆�: </text>
+ <text>楼80.00</text>
+ </text>
<view class="order-buttons">
- <button class="btn btn-secondary">鑱旂郴瀹㈡埛</button>
- <button class="btn btn-primary">鎵爜鏍搁攢</button>
+ <button class="btn secondary">鑱旂郴瀹㈡埛</button>
+ <button class="btn primary">鎵爜鏍搁攢</button>
</view>
</view>
- <text class="order-note">璁㈠崟澶囨敞: 13:30鏉ュ瘎瀛�</text>
- </view>
-
- <view class="order-item">
- <view class="order-header">
- <view class="order-tag">灏卞湴瀵勫瓨</view>
- <text class="order-user">寮犳澃 151****7678</text>
- <text class="order-status">寰呭彇浠�</text>
- </view>
-
- <view class="order-items">
- <view class="order-product">
- <text class="product-name">澶т欢琛屾潕绠�</text>
- <text class="product-spec">24-28瀵�</text>
- <text class="product-price">楼35</text>
- <text class="product-count">x1</text>
- </view>
- <view class="order-product">
- <text class="product-name">涓欢琛屾潕绠�</text>
- <text class="product-spec">24-28瀵�</text>
- <text class="product-price">楼35</text>
- <text class="product-count">x1</text>
- </view>
- </view>
-
- <view class="order-footer">
- <text class="total-price">瀹炰粯娆�: 楼70.00</text>
- <view class="order-buttons">
- <button class="btn btn-secondary">鑱旂郴瀹㈡埛</button>
- <button class="btn btn-primary">鎵爜鏍搁攢</button>
- </view>
- </view>
-
- <text class="order-note">璁㈠崟澶囨敞: -</text>
- </view>
- <view class="order-item">
- <view class="order-header">
- <view class="order-tag">灏卞湴瀵勫瓨</view>
- <text class="order-user">寮犳澃 151****7678</text>
- <text class="order-status">寰呭彇浠�</text>
- </view>
-
- <view class="order-items">
- <view class="order-product">
- <text class="product-name">澶т欢琛屾潕绠�</text>
- <text class="product-spec">24-28瀵�</text>
- <text class="product-price">楼35</text>
- <text class="product-count">x1</text>
- </view>
- <view class="order-product">
- <text class="product-name">涓欢琛屾潕绠�</text>
- <text class="product-spec">24-28瀵�</text>
- <text class="product-price">楼35</text>
- <text class="product-count">x1</text>
- </view>
- </view>
-
- <view class="order-footer">
- <text class="total-price">瀹炰粯娆�: 楼70.00</text>
- <view class="order-buttons">
- <button class="btn btn-secondary">鑱旂郴瀹㈡埛</button>
- <button class="btn btn-primary">鎵爜鏍搁攢</button>
- </view>
- </view>
-
- <text class="order-note">璁㈠崟澶囨敞: -</text>
+ <view class="order-note">璁㈠崟澶囨敞: 13:30鏉ュ瘎瀛�</view>
</view>
</view>
+ <custom-tabbar></custom-tabbar>
</view>
</template>
<script>
import { mapState } from 'vuex'
-
+import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue'
export default {
+ components: {
+ CustomTabbar
+ },
computed: {
...mapState(['navHeight', 'statusbarHeight'])
},
+ onReachBottom() {
+ console.log('store-home onReachBottom')
+ },
+ methods: {
+ goToStoreInfo() {
+ uni.navigateTo({
+ url: '/shop/pages/store-info/store-info'
+ })
+ },
+ goToQualification() {
+ uni.navigateTo({
+ url: '/shop/pages/qualification/qualification'
+ })
+ }
+ },
data() {
return {
- bgImg: require('@/static/image/bg_card@2x.png'),
+ bgImg: require('@/static/image/bg_card@2x.png'),
orders: [
{
id: 1,
@@ -211,10 +179,8 @@
<style lang="scss" scoped>
$bg-color: #f5f5f5;
$primary-color: #1677ff;
-$success-color: #52c41a;
$danger-color: #ff4d4f;
$text-color: #333;
-$text-secondary-color: #666;
$text-tertiary-color: #999;
.container {
@@ -224,6 +190,9 @@
/* 娓愬彉鑳屾櫙瀹瑰櫒 */
.gradient-background {
+ padding: 0 30rpx;
+ box-sizing: border-box;
+ width: 100%;
background: #C8F3FF;
color: #1a1a1a;
position: relative;
@@ -242,13 +211,25 @@
/* 鑷畾涔夊鑸爮 */
.custom-nav {
+ width: 100%;
color: #1a1a1a;
+ background-color: #C8F3FF;
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 100;
}
.nav-content {
display: flex;
align-items: center;
padding: 0 20rpx;
+}
+
+.nav-icon {
+ width: 64rpx;
+ height: 64rpx;
+ margin-right: 14rpx;
}
.nav-title {
@@ -259,8 +240,13 @@
.stats-section {
height: 256rpx;
width: 100%;
+ padding: 30rpx;
+ box-sizing: border-box;
background-repeat: no-repeat;
background-size: 100% 100%;
+ margin-top: 20rpx;
+ position: relative;
+ z-index: 99;
}
.stats-tabs {
@@ -272,13 +258,21 @@
z-index: 1;
}
+.stats-tabs-left {
+ width: 43%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
.tab-item {
font-size: 28rpx;
- color: #91d5ff;
+ color: rgba(255,255,255,0.8);
&.active {
+ font-size: 32rpx;
color: white;
- font-weight: bold;
+ font-weight: 600;
}
&.right {
@@ -287,35 +281,54 @@
}
.stats-cards {
+ width: 100%;
+ height: 132rpx;
display: flex;
justify-content: space-between;
position: relative;
z-index: 1;
+ padding-top: 22rpx;
+ box-sizing: border-box;
+ border-top: 1rpx solid rgba(255,255,255,0.09);
}
.stat-card {
flex: 1;
- text-align: center;
+ text-align: left;
+ &:nth-child(1) {
+ flex: 2.3;
+ }
+ &:nth-child(2) {
+ flex: 2;
+ }
}
.stat-label {
- display: block;
- font-size: 24rpx;
- color: #91d5ff;
- margin-bottom: 10rpx;
+ display: flex;
+ height: 40rpx;
+ text {
+ font-size: 24rpx;
+ font-weight: 400;
+ color: rgba(255,255,255,0.7);
+ }
+ .stat-icon {
+ width: 40rpx;
+ height: 40rpx;
+ margin-left: 10rpx;
+ }
}
.stat-value {
- display: block;
- font-size: 36rpx;
- font-weight: bold;
- color: white;
+ font-weight: 600;
+ font-size: 44rpx;
+ color: #FFFFFF;
+ margin-top: 14rpx;
}
.function-buttons {
background-color: white;
- margin: 0 20rpx 20rpx;
- border-radius: 12rpx;
+ margin: 30rpx 30rpx 40rpx 30rpx;
+ border-radius: 16rpx;
padding: 30rpx;
display: flex;
justify-content: space-between;
@@ -329,37 +342,39 @@
}
.func-icon {
- width: 80rpx;
- height: 80rpx;
- margin-bottom: 10rpx;
+ width: 88rpx;
+ height: 88rpx;
+ margin-bottom: 16rpx;
}
.func-text {
- font-size: 24rpx;
- color: $text-secondary-color;
+ font-weight: 400;
+ font-size: 26rpx;
+ color: #333333;
+ white-space: nowrap;
}
.orders-section {
- background-color: white;
- margin: 0 20rpx 20rpx;
- border-radius: 12rpx;
- padding: 20rpx;
+ margin: 30rpx;
}
.section-title {
+ width: 100%;
+ font-weight: 600;
font-size: 32rpx;
- font-weight: bold;
- color: $text-color;
- margin-bottom: 20rpx;
- display: block;
+ color: #111111;
+ padding: 0 30rpx;
+ box-sizing: border-box;
}
.order-item {
- border-bottom: 1rpx solid #eee;
- padding: 20rpx 0;
-
+ background: #FFFFFF;
+ border-radius: 16rpx;
+ padding: 30rpx;
+ box-sizing: border-box;
+ margin-bottom: 20rpx;
&:last-child {
- border-bottom: none;
+ margin-bottom: 0;
}
}
@@ -367,68 +382,81 @@
display: flex;
justify-content: space-between;
align-items: center;
- margin-bottom: 20rpx;
+ margin-bottom: 28rpx;
flex-wrap: wrap;
}
.order-tag {
- background-color: $success-color;
+ background-color: #10B2FA;
color: white;
- padding: 8rpx 16rpx;
- border-radius: 20rpx;
- font-size: 24rpx;
+ width: 104rpx;
+ height: 40rpx;
+ line-height: 40rpx;
+ font-weight: 400;
+ font-size: 22rpx;
+ color: #FFFFFF;
+ text-align: center;
+ background: #10B2FA;
+ border-radius: 8rpx;
+ margin-right: 20rpx;
}
.order-user {
+ font-weight: 400;
font-size: 28rpx;
- color: $text-color;
+ color: #333333;
}
.order-status {
- font-size: 28rpx;
- color: $danger-color;
+ font-weight: 400;
+ font-size: 26rpx;
+ color: #FF0020;
}
.order-product {
display: flex;
justify-content: space-between;
align-items: flex-start;
- margin-bottom: 30rpx;
+ margin-bottom: 26rpx;
}
.product-info {
flex: 3;
+ display: flex;
+ flex-direction: column;
}
.product-name {
+ font-weight: 600;
font-size: 28rpx;
- color: $text-color;
- display: block;
+ color: #333333;
}
.product-spec {
+ font-weight: 400;
font-size: 24rpx;
- color: $text-tertiary-color;
- display: block;
- margin-top: 5rpx;
+ color: #8C939F;
+ margin-top: 12rpx;
}
.product-price-count {
flex: 1;
- text-align: right;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
}
.product-price {
- font-size: 28rpx;
- color: $danger-color;
- display: block;
+ font-weight: 400;
+ font-size: 30rpx;
+ color: #333333;
}
.product-count {
+ font-weight: 400;
font-size: 24rpx;
- color: $text-tertiary-color;
- display: block;
- margin-top: 5rpx;
+ color: #8C939F;
+ margin-top: 12rpx;
}
.order-footer {
@@ -439,9 +467,20 @@
}
.total-price {
- font-size: 28rpx;
- color: $text-color;
- font-weight: bold;
+ display: flex;
+ align-items: center;
+ text {
+ &:nth-child(1) {
+ font-weight: 400;
+ font-size: 26rpx;
+ color: #333333;
+ }
+ &:nth-child(2) {
+ font-weight: 600;
+ font-size: 26rpx;
+ color: #222222;
+ }
+ }
}
.order-buttons {
@@ -450,28 +489,33 @@
}
.btn {
- padding: 20rpx 40rpx;
- border-radius: 40rpx;
+ width: 160rpx;
+ height: 64rpx;
+ line-height: 64rpx;
+ text-align: center;
+ border-radius: 34rpx;
font-size: 28rpx;
- border: none;
+ padding: 0 !important;
&.secondary {
background-color: white;
- color: $primary-color;
- border: 2rpx solid $primary-color;
+ color: #004096;
+ border: 2rpx solid #004096;
}
&.primary {
- background-color: $primary-color;
+ background-color: #004096;
color: white;
}
}
.order-note {
- font-size: 24rpx;
- color: $text-tertiary-color;
- background-color: $bg-color;
+ width: 100%;
+ font-size: 26rpx;
+ color: #666666;
+ background-color: #F8F9FB;
padding: 20rpx;
+ box-sizing: border-box;
border-radius: 8rpx;
margin-top: 20rpx;
}
--
Gitblit v1.9.3