From ac224d1ace34960794497e4aa4b032130bf9c845 Mon Sep 17 00:00:00 2001
From: D <3066417822@qq.com>
Date: Wed, 16 Aug 2023 09:42:50 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BA=86=E4=B8=80=E4=BA=9B?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/geek-order/geek-order.vue      | 158 +++++++++++++-----
 src/pages_geek/pages/index/index.vue          |  24 ++-
 2 files changed, 138 insertions(+), 44 deletions(-)

diff --git a/src/components/geek-xd/components/geek-order/geek-order.vue b/src/components/geek-xd/components/geek-order/geek-order.vue
index 3450f85..4196885 100644
--- a/src/components/geek-xd/components/geek-order/geek-order.vue
+++ b/src/components/geek-xd/components/geek-order/geek-order.vue
@@ -7,6 +7,11 @@
         <view class="geek-content">
             <image class="geek-img" :src="img"></image>
             <view class="geek-label">{{ label }}</view>
+            <view class="geek-sum">
+                <view class=".geek-sum-1">￥{{ number.integerPart }}</view>
+                <view class=".geek-sum-2">. {{ number.decimalPart }}</view>
+                <view class=".geek-sum-3">共 {{ num }} 件</view>
+            </view>
         </view>
         <view class="geek-footer">
             <view class="geek-more" @click="$emit('more')">更多</view>
@@ -19,6 +24,7 @@
     </view>
 </template>
 <script setup>
+import { computed } from 'vue';
 
 const props = defineProps({
     shop: {
@@ -41,24 +47,51 @@ const props = defineProps({
         type: Number,
         default: 0
     },
+    num: {
+        type: Number,
+        default: 0
+    },
     type: {
         type: String,
         default: 'line'
     }
 })
+
+const number = computed(() => {
+    return formatNumber(props.price, 2)
+})
+
+function formatNumber(num, place) {
+
+    let fixedNum = Number(num).toFixed(place); // 将数字保留两位小数
+    let parts = fixedNum.split('.'); // 拆分整数部分和小数部分
+    let integerPart = parts[0]; // 整数部分
+    let decimalPart = parts[1]; // 小数部分
+
+    // 使用padStart方法补0到小数部分
+    decimalPart = decimalPart.padStart(place, '0');
+
+    return {
+        integerPart, decimalPart
+    }
+}
 </script>
 <style lang="scss" scoped>
 .geek-card {
-    border: 1rpx solid rgb(183, 183, 183);
+
     position: relative;
-    padding: 0;
-    border-radius: 10px;
-    height: 320rpx;
+    padding: 28rpx 18rpx 26rpx 16rpx;
+    border: 1rpx solid rgb(183, 183, 183);
+    border-radius: 50rpx;
+    height: 400rpx;
     width: 700rpx;
-    padding: 20rpx;
-    margin: 20rpx;
+    margin: 25rpx;
 
     .geek-header {
+        height: 60rpx;
+        width: 664rpx;
+        margin-bottom: 6rpx;
+
         .geek-shop {
             font-size: 28rpx;
             font-weight: 600;
@@ -68,6 +101,7 @@ const props = defineProps({
             width: 100rpx;
             text-align: center;
             position: absolute;
+            opacity: 0.5;
             top: 30rpx;
             right: 30rpx;
             font-size: 25rpx;
@@ -76,11 +110,26 @@ const props = defineProps({
     }
 
     .geek-content {
+        position: relative;
+
+        margin-bottom: 46rpx;
+        height: 170rpx;
+        width: 664rpx;
+
+        .geek-img {
+            border-radius: 30rpx;
+            height: 170rpx;
+            width: 170rpx;
+            display: inline-block;
+        }
+
         .geek-label {
             position: absolute;
-            top: 100rpx;
-            width: 500rpx;
-            left: 180rpx;
+            top: 40rpx;
+            left: 178rpx;
+
+            width: 350rpx;
+
             display: -webkit-box;
             -webkit-line-clamp: 2;
             -webkit-box-orient: vertical;
@@ -88,54 +137,87 @@ const props = defineProps({
             text-overflow: ellipsis;
         }
 
-        .geek-img {
+        .geek-sum {
             position: absolute;
-            border-radius: 10px;
-            height: 160rpx;
-            width: 160rpx;
-            top: 70rpx;
-            left: 10rpx;
+            top: 44rpx;
+            right: 0rpx;
+
+            width: 126rpx;
+            height: 84rpx;
+
+            .geek-sum-1 {
+                position: absolute;
+                top: 0;
+                left: 0;
+                font-size: 32rpx;
+            }
+
+            .geek-sum-2 {
+                position: absolute;
+                top: 30rpx;
+                left: 84rpx;
+                font-size: 20rpx;
+            }
+
+            .geek-sum-3 {
+                position: absolute;
+                top: 55rpx;
+                left: 46rpx;
+                font-size: 20rpx;
+            }
         }
     }
 
     .geek-footer {
-        width: 660rpx;
-        position: absolute;
-        bottom: 10rpx;
+        height: 60rpx;
+        width: 664rpx;
         font-size: 25rpx;
 
         .geek-more {
-            margin-bottom: 20rpx;
+            width: 100rpx;
+            height: 60rpx;
+            margin-right: 110rpx;
+
+            padding: 10rpx;
+
+            text-align: center;
+            display: inline-block;
         }
 
         .geek-buttonGroup {
-
-            position: absolute;
-            right: 10rpx;
-            bottom: 0;
+            width: 450rpx;
+            height: 60rpx;
+            display: inline-block;
 
             .geek-btn {
-                border: 1rpx solid black;
-                width: 150rpx;
-                height: 50rpx;
-                border-radius: 100px;
-                display: inline-block;
-                margin: 10rpx;
-                padding: 6rpx;
+                border: 1rpx solid #E9E9E9;
+                width: 140rpx;
+                height: 60rpx;
+                border-radius: 80rpx;
+                opacity: 0.8;
+
+                padding: 10rpx;
+
+                margin-right: 10rpx;
+
                 text-align: center;
+                display: inline-block;
 
             }
 
             .geek-buy {
-                color: red;
-                border: 1rpx solid red;
-                width: 150rpx;
-                height: 50rpx;
-                border-radius: 100px;
-                display: inline-block;
-                margin: 10rpx;
-                padding: 6rpx;
+                width: 140rpx;
+                height: 60rpx;
+                border-radius: 80rpx;
+                opacity: 0.8;
+
+                padding: 10rpx;
+
                 text-align: center;
+                display: inline-block;
+
+                color: #F25E53;
+                border: 1rpx solid #F4DADA;
             }
 
 
diff --git a/src/pages_geek/pages/index/index.vue b/src/pages_geek/pages/index/index.vue
index 79bbc8c..05a6055 100644
--- a/src/pages_geek/pages/index/index.vue
+++ b/src/pages_geek/pages/index/index.vue
@@ -23,14 +23,14 @@
 
   <uni-section class="mb-10" title="商品列表" sub-title="commodity" type="line"></uni-section>
   <geek-commodity v-for="item, index in commodityList" :key="index" :price="item.price" :title="item.title"
-    :sub-title="item.subTitle" :img="item.img" type="line" @click="modal.msg(item.title)" />
+    :num="item.num" :sub-title="item.subTitle" :img="item.img" type="line" @click="modal.msg(item.title)" />
   <geek-commodity v-for="item, index in commodityList" :key="index" :price="item.price" :title="item.title"
-    :sub-title="item.subTitle" :img="item.img" type="rect" @click="modal.msg(item.title)" />
+    :num="item.num" :sub-title="item.subTitle" :img="item.img" type="rect" @click="modal.msg(item.title)" />
 
 
   <uni-section class="mb-10" title="订单列表" sub-title="order" type="line"></uni-section>
-  <geek-order v-for="item, index in orderList" :img="item.img" :label="item.title" :shop="item.shop" :status="item.status"
-    :price="item.price" @more="modal.msg('更多')" @again="modal.msg('再次购买')" @return="modal.msg('退换')"
+  <geek-order v-for="item, index in orderList" :key="index" :img="item.img" :label="item.title" :shop="item.shop"
+    :status="item.status" :price="item.price" @more="modal.msg('更多')" @again="modal.msg('再次购买')" @return="modal.msg('退换')"
     @sell="modal.msg('卖了换钱')"></geek-order>
 </template>
 
@@ -75,7 +75,9 @@ const orderList = [
     img: '/static/images/banner/banner01.jpg',
     title: '商品1',
     subTitle: '商品1简介',
-    price: 100,
+    price: 100.32,
+    num: 10
+
   },
   {
     shop: 'geek自营旗舰店',
@@ -83,7 +85,17 @@ const orderList = [
     img: '/static/images/banner/banner03.jpg',
     title: '商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商品3',
     subTitle: '商品3简介',
-    price: 200,
+    price: 2000.67,
+    num: 10
+  },
+  {
+    shop: 'geek自营旗舰店',
+    status: '已取消',
+    img: '/static/images/banner/banner03.jpg',
+    title: '商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商品3',
+    subTitle: '商品3简介',
+    price: 10.67,
+    num: 10
   }
 ]
 </script>