上一篇文章《營銷工具之拼團活動如何設計》，我們從實操角度，對拼團活動的前后端整體流程進行了梳理，發布之后收到小伙伴們對小程序前端設計的問題。所以本篇就拼團活動的小程序前端頁面，做一個詳細的說明。

我們發起一個拼團活動，通常需要以下幾支功能去支撐拼團活動的運行：活動入口、商品詳情頁的展示和交互、購物車和訂單展示及結算層面、訂單管理、退款管理、以及我的拼團管理。

一、活動入口

活動入口除了從首頁列表進入，還可以通過分享商品鏈接，商品二維碼以及朋友的參團邀請進入（這個上一篇文章《營銷工具之拼團活動如何設計》中忽略了，在此補充一下）。

1. banner廣告位指定跳轉活動商品。

2. 通過列表頁進入：首頁推薦活動列表以及拼團活動列表。

3. 通過分享進入：朋友分享的活動商品鏈接，活動商品二維碼，以及參團邀請等。

二、商品詳情頁的展示和交互

同一個商品的拼團活動商品詳情頁和普通購買詳情頁是分開的2個頁面，即：拼團商品詳情頁，僅展示參與活動的SKU；普通商品詳情頁，展示此商品的全部SKU。

什么意思呢？

假設SPU1下面有4個規格，分別是：SKU1、SKU2、SKU3、SKU4，其中SKU3、SKU4參與了拼團活動。

那么在那么在普通商品詳情頁，能選擇4個規格：SKU1、SKU2、SKU3、SKU4。

在活動預熱或者進行中狀態時，有對應的拼團活動的提示，點擊【去拼團】跳轉SPU1對應的拼團商品詳情頁，此頁面僅能選擇2個活動的SKU：SKU3、SKU4。

其中拼團商品詳情頁，不管已選哪個SKU，點擊【單獨購買】，均跳轉普通商品詳情頁，且定位到上一頁面選中的SKU，走普通商品購買流程。

三、購物車和訂單展示及結算層面

1. 購物車活動商品展示的場景有以下2個

• ①無活動時，SKU已加入購物車的情況；活動
• ②活動預熱或者活動進行中時，在普通商品詳情頁加入購物車的情況；

當購物車中的商品有參與拼團活動時，在活動預熱或者進行中狀態時，購物車會對應出現活動信息，支持點擊跳轉拼團活動詳情頁。

2. 結算頁面取值

• ①購物車選中商品，不管是選單個商品還是多個商品，點擊進入結算頁面時，是以單買價（即商品正常銷售價）下單。
• ②只有通過拼團商品詳情頁【我要開團】或者參團邀請【我要參團】入口，才支持以拼團價下單，也相當于參與拼團活動都是單個SKU下單。

四、訂單管理

1. 訂單類型標記

拼團訂單、普通訂單2種。

2. 訂單狀態

• 普通訂單流：待支付–待發貨–待收貨–已完成–已關閉
• 拼團訂單流：待支付–待成團–待發貨–待收貨–已完成–已關閉

小程序端待成團訂單同樣放在待發貨狀態里，支持客戶邀請好友，處理方式如下：

五、退款管理

拼團的退款單生成的2種場景（前提條件：已支付待成團狀態時，不支持發起退款）：

1. 拼團成功，用戶主動申請退款的情況

拼團成功待發貨狀態時，支持用戶在訂單詳情頁申請退款，申請后，僅退此訂單，同團的其他訂單不受影響。

2. 拼團失敗，系統自動觸發退款的情況

六、我的拼團管理

用戶發起拼團，下單支付成功后，即開團成功，或者用戶參團，下單支付成功后，即參團成功。開團或參團成功后，【我的拼團】會新增一條拼團記錄，用來跟蹤此拼團活動的拼團狀態。

拼團狀態有3個：拼團中，拼團成功，拼團失敗，如下圖所示：

1. 拼團中狀態頁面分2種場景處理

• ①自己發起的團，支持用戶邀請好友參團
• ②點擊別人的團，支持用戶參團

2. 拼團成功狀態頁面分2種場景處理

• ①用戶已參與該團，且該團已拼團成功時；
• ②用戶未參與該團，但該團已拼團成功時；

3. 拼團成功狀態頁面分2種場景處理

• ①用戶已參與該團，且該團拼團失敗時；
• ②用戶未參與該團，但該團拼團失敗時；

作者：shirly ，公眾號：小小何小廚

本文由 @shirly 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于 CC0 協議