modify

src/App.vue

@@ -21,4 +21,8 @@ export default {
 <style>
 /*每个页面公共css */
 @import "@/static/iconfont/iconfont.css";
+page {
+  background-color: #f0f0f0;
+  min-height: 100vh;
+}
 </style>

src/component/grouporder.vue

@@ -1,6 +1,7 @@
 <template>
     <view class="bg">
         <view class="flex-s-between-m-8">
+            <!-----团长信息------>
             <view class="flex-c-m-8"> 
                 <image 
                   :src="groupLeader.avatar" 
@@ -10,13 +11,20 @@
                 />
                 <text style="padding-left: 8px;">{{ groupLeader.nickname }}</text>
             </view>
-            <view class="flex-c-m-8"> 
+            <!-----自提点------>
-                <uni-icons v-if="type === 'pickup'" type="location" size="30"></uni-icons>
+            <view v-if="type === 'pickup'" class="flex-c-m-8"> 
-                <view class="text-ellipsis-w-120" v-if="type === 'pickup'">{{ pickupAddr }}</view>
+                <uni-icons  type="location" size="30"></uni-icons>
+                <view class="text-ellipsis-w-120">{{ pickupAddr }}</view>
             </view>
+            <!-----物流方式------>
             <text>{{ groupTypeInfo() }}</text>
+            <!-----收藏------>
+            <uni-icons v-if="groupLeader.fav" style="margin-right: 10px;" type="heart-filled" color="red" size="24" @click="favHandler"/>
+            <uni-icons v-else type="heart" style="margin-right: 10px;" color="" size="24" @click="favHandler" />
         </view>
+        <!-----团购描述------>
         <view class="text-ellipsis">{{ desc }}</view>
+        <!-----商品信息------>
         <view class="flex-c-m-8">
             <view class="item" v-for="item in itemList" :key="item.id">
                 <image 
@@ -43,6 +51,8 @@
 <script setup lang="ts">
 
 interface GroupLeader {
+    id: String
+    fav: boolean
     avatar: String
     nickname: String
 }
@@ -77,7 +87,7 @@ function handleImageError(item: Goods) {
 // 事件
 const emit = defineEmits(['fav','share',"join"])
 function favHandler() {
-    emit('fav',props.id)
+    emit('fav',props.groupLeader.id)
 }
 
 function shareHandler() {
@@ -100,11 +110,11 @@ function groupTypeInfo() {
 
 
 </script>
-
 <style scoped>
 .bg {
-    background-color: rgb(148, 148, 135);
+    background-color: rgb(251, 251, 251);
     margin: 10px;
+    border-radius: 2%;
 }
 
 .flex-s-between-m-8 {
@@ -117,12 +127,15 @@ function groupTypeInfo() {
 .flex-c-m-8 {
   display: flex;
   align-items: center;
-  margin: 8px;
+  margin-left: 8rpx;
+  margin-right: 8rpx;
+  margin-top: 20rpx;
+  margin-bottom: 10rpx;
 }
 
 .avatar {
-  width: 100rpx;
+  width: 60rpx;
-  height: 100rpx;
+  height: 60rpx;
   border-radius: 50%;
 }
 

src/pages/home/home.vue

@@ -18,6 +18,7 @@
     :statisticDesc = "item.statistic_desc"
     @share="shareClick"
     @join="joinClicked"
+    @fav="favClick"
     ></GroupOrderComponent>
 </template>
 
@@ -57,6 +58,8 @@ export default {
             }
           ],
           group_leader:{
+            id:1,
+            fav:true,
             avatar:"adsfadfa",
             nickname:"测试团长1"
           },
@@ -91,6 +94,8 @@ export default {
             }
           ],
           group_leader:{
+            id:1,
+            fav:true,
             avatar:"adsfadfa",
             nickname:"测试团长1"
           },
@@ -125,8 +130,10 @@ export default {
             }
           ],
           group_leader:{
+            id:2,
+            fav:false,
             avatar:"adsfadfa",
-            nickname:"测试团长1"
+            nickname:"测试团长2"
           },
           statistic_desc:"20000人参团"
         },
@@ -159,8 +166,10 @@ export default {
             }
           ],
           group_leader:{
+            id:3,
+            fav:false,
             avatar:"adsfadfa",
-            nickname:"测试团长1"
+            nickname:"测试团长3"
           },
           statistic_desc:"20000人参团"
         },
@@ -173,10 +182,13 @@ export default {
       console.log("search clicked:",this.searchContent)
     },
     shareClick(id) {
-      console.log("share clicked,param:")
+      console.log("share clicked,param:",id)
     },
     joinClicked(id) {
       console.log("join clicked,param:",id)
+    },
+    favClick(id) {
+      console.log("fav clicked,param")
     }
   },
 }