modify

src/component/grouporder.vue

@@ -0,0 +1,128 @@
+<template>
+    <view class="bg">
+        <view class="flex-round-m-8">
+            <image 
+              :src="groupLeader.avatar" 
+              mode="aspectFill" 
+              class="avatar"
+              @error="handleAvatarError(groupLeader)"
+            />
+            <text>{{ groupLeader.nickname }}</text>
+            <uni-icons v-if="type === 'pickup'" type="location" size="30"></uni-icons>
+            <text v-if="type === 'pickup'">{{ pickupAddr }}</text>
+            <text>{{ groupTypeInfo() }}</text>
+        </view>
+        <text>{{ desc }}</text>
+        <view class="flex-c-m-8">
+            <view v-for="item in itemList" :key="item.id">
+                <image 
+                  :src="item.image_url" 
+                  mode="aspectFill" 
+                  @error="handleImageError(item)"
+                />
+                <text>{{ '￥'+item.price }}</text>
+            </view>
+        </view>
+        
+        <view class="flex-c-m-8">
+            <text>{{ statisticDesc }}</text>
+            <button
+                @click="shareHandler"
+            >
+                分享
+            </button>
+            <button
+                @click="joinHandler"
+            >
+                参团
+            </button>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+
+interface GroupLeader {
+    avatar: String
+    nickname: String
+}
+
+interface Goods {
+    id: string | number
+    image_url: string
+    price: string | number
+}
+interface Props {
+    id: string
+    type: 'express' | 'pickup'
+    pickupAddr?: string
+    status: string
+    groupLeader: GroupLeader
+    desc: string
+    itemList: Goods[]
+    statisticDesc: string
+}
+// 声明对外属性
+const props = defineProps<Props>()
+
+// 加载图片信息
+function handleAvatarError(leader: GroupLeader) {
+    leader.avatar = '/static/default_avatar.png'; // 加载失败时显示默认头像
+}
+
+function handleImageError(item: Goods) {
+    item.image_url = '/static/logo.png'; // 加载失败时显示默认头像
+}
+
+// 事件
+const emit = defineEmits(['fav','share',"join"])
+function favHandler() {
+    emit('fav',props.id)
+}
+
+function shareHandler() {
+    emit('share',props.id)
+}
+
+function joinHandler() {
+    emit('join',props.id)
+}
+
+function groupTypeInfo() {
+    switch (props.type) {
+        case 'express':
+            return "快递物流";            
+        default:
+           return "自行取货"
+    }
+}
+
+
+
+</script>
+
+<style scoped>
+.bg {
+    background-color: rgb(148, 148, 135);
+    margin: 10px;
+}
+
+.flex-round-m-8 {
+    display: flex;
+    align-content: space-around;
+    align-items: center;
+    margin: 8px;
+}
+
+.flex-c-m-8 {
+  display: flex;
+  align-items: center;
+  margin: 8px;
+}
+
+.avatar {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 50%;
+}
+</style>

src/main.js

@@ -2,10 +2,12 @@ import {
 	createSSRApp
 } from "vue";
 import App from "./App.vue";
+import GroupOrderComponent from "./component/grouporder.vue";
 import { setupInterceptors } from "@/utils/interceptors";
 export function createApp() {
 	const app = createSSRApp(App);
 	app.use(setupInterceptors)
+	app.component('GroupOrderComponent',GroupOrderComponent)
 	return {
 		app,
 	};

src/pages/home/home.vue

@@ -7,6 +7,18 @@
   <view class="content">
     <text >火热开团中</text>
   </view>
+  <GroupOrderComponent v-for="item in data" :key="item.id" 
+    :id="item.id"
+    :type="item.type"
+    :desc="item.desc"
+    :status="item.status"
+    :pickupAddr = "item.pickup_addr"
+    :itemList="item.item_list"
+    :groupLeader = "item.group_leader"
+    :statisticDesc = "item.statistic_desc"
+    @share="shareClick"
+    @join="joinClicked"
+    ></GroupOrderComponent>
 </template>
 
 <script>
@@ -15,12 +27,39 @@ export default {
     return {
       title: 'Hello',
       searchContent:'',
+      data: [
+        {
+          id:"1",
+          type:"express",
+          desc:"测试描述",
+          status:"start",
+          pickup_addr:"自提点地址",
+          item_list:[
+            {
+              id:1,
+              image_url:"/static/logo.png",
+              price:"20"
+            }
+          ],
+          group_leader:{
+            avatar:"adsfadfa",
+            nickname:"测试团长1"
+          },
+          statistic_desc:"20000人参团"
+        },
+      ]
     }
   },
   onLoad() {},
   methods: {
     searchClick() {
       console.log("search clicked:",this.searchContent)
+    },
+    shareClick(id) {
+      console.log("share clicked,param:")
+    },
+    joinClicked(id) {
+      console.log("join clicked,param:",id)
     }
   },
 }

src/static/iconfont/iconfont.css

@@ -1,6 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4910053 */
-  src: url('/static/iconfont') format('truetype');
+  src: url('iconfont.woff2?t=1746493213522') format('woff2'),
+       url('iconfont.woff?t=1746493213522') format('woff'),
+       url('iconfont.ttf?t=1746493213522') format('truetype');
 }
 
 .iconfont {
@@ -11,6 +13,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-shoucang:before {
+  content: "\e613";
+}
+
+.icon-tupian:before {
+  content: "\e620";
+}
+
+.icon-morentouxiang:before {
+  content: "\e62f";
+}
+
 .icon-dingwei:before {
   content: "\e629";
 }