diff --git a/popcorn/Assets/MyGame/Scenes/shopping/Prefabs/PurchaseView.prefab b/popcorn/Assets/MyGame/Scenes/shopping/Prefabs/PurchaseView.prefab
index efba52e9..086e705d 100644
--- a/popcorn/Assets/MyGame/Scenes/shopping/Prefabs/PurchaseView.prefab
+++ b/popcorn/Assets/MyGame/Scenes/shopping/Prefabs/PurchaseView.prefab
@@ -30,7 +30,7 @@ RectTransform:
   m_LocalScale: {x: 1, y: 1, z: 1}
   m_Children: []
   m_Father: {fileID: 9133304335168602039}
-  m_RootOrder: 1
+  m_RootOrder: 0
   m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
   m_AnchorMin: {x: 0.5, y: 0.5}
   m_AnchorMax: {x: 0.5, y: 0.5}
@@ -83,6 +83,7 @@ GameObject:
   serializedVersion: 6
   m_Component:
   - component: {fileID: 9133304335168602039}
+  - component: {fileID: 922664456060550582}
   m_Layer: 5
   m_Name: Window
   m_TagString: Untagged
@@ -101,17 +102,39 @@ RectTransform:
   m_LocalPosition: {x: 0, y: 0, z: 0}
   m_LocalScale: {x: 1, y: 1, z: 1}
   m_Children:
-  - {fileID: 9133304335357123266}
   - {fileID: 9133304335139982200}
   - {fileID: 9133304336500199661}
   m_Father: {fileID: 9133304336623725467}
-  m_RootOrder: 0
+  m_RootOrder: 1
   m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
   m_AnchorMin: {x: 0.5, y: 0.5}
   m_AnchorMax: {x: 0.5, y: 0.5}
   m_AnchoredPosition: {x: 0, y: 0}
   m_SizeDelta: {x: 705, y: 705}
   m_Pivot: {x: 0.5, y: 0.5}
+--- !u!114 &922664456060550582
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 9133304335168602036}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 11500000, guid: 6bb93eb9b7574ef58a194e4cf5aadb5f, type: 3}
+  m_Name: 
+  m_EditorClassIdentifier: 
+  backgroundAnimator: {fileID: 9133304335357123271}
+  name: {fileID: 9133304336883555433}
+  icon: {fileID: 9133304335605570096}
+  price: {fileID: 9133304336128604254}
+  stockCount: {fileID: 9133304336153810480}
+  totalPrice: {fileID: 9133304335494687832}
+  purchaseCount: {fileID: 9133304336756314526}
+  subCountButton: {fileID: 5919954079663981596}
+  addCountButton: {fileID: 5919954079471528431}
+  closeButton: {fileID: 9133304335940276437}
+  purchaseButton: {fileID: 9133304335268316946}
 --- !u!1 &9133304335268316944
 GameObject:
   m_ObjectHideFlags: 0
@@ -446,17 +469,17 @@ RectTransform:
   m_PrefabInstance: {fileID: 0}
   m_PrefabAsset: {fileID: 0}
   m_GameObject: {fileID: 9133304335357123267}
-  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalRotation: {x: -0, y: -0, z: -0, w: 1}
   m_LocalPosition: {x: 0, y: 0, z: 0}
   m_LocalScale: {x: 1, y: 1, z: 1}
   m_Children: []
-  m_Father: {fileID: 9133304335168602039}
+  m_Father: {fileID: 9133304336623725467}
   m_RootOrder: 0
   m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
-  m_AnchorMin: {x: 0.5, y: 0.5}
-  m_AnchorMax: {x: 0.5, y: 0.5}
+  m_AnchorMin: {x: 0, y: 0}
+  m_AnchorMax: {x: 1, y: 1}
   m_AnchoredPosition: {x: 0, y: 0}
-  m_SizeDelta: {x: 2048, y: 2732}
+  m_SizeDelta: {x: 0, y: 0}
   m_Pivot: {x: 0.5, y: 0.5}
 --- !u!222 &9133304335357123268
 CanvasRenderer:
@@ -480,7 +503,7 @@ MonoBehaviour:
   m_EditorClassIdentifier: 
   m_Material: {fileID: 0}
   m_Color: {r: 1, g: 1, b: 0.9372549, a: 0.19607843}
-  m_RaycastTarget: 0
+  m_RaycastTarget: 1
   m_Maskable: 1
   m_OnCullStateChanged:
     m_PersistentCalls:
@@ -1578,7 +1601,7 @@ RectTransform:
   - {fileID: 9133304336675516546}
   - {fileID: 9133304335380453066}
   m_Father: {fileID: 9133304335168602039}
-  m_RootOrder: 2
+  m_RootOrder: 1
   m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
   m_AnchorMin: {x: 0, y: 0}
   m_AnchorMax: {x: 1, y: 1}
@@ -1684,7 +1707,7 @@ GameObject:
   - component: {fileID: 9133304336623725465}
   - component: {fileID: 9133304336623725414}
   m_Layer: 5
-  m_Name: Canvas
+  m_Name: PurchaseView
   m_TagString: Untagged
   m_Icon: {fileID: 0}
   m_NavMeshLayer: 0
@@ -1701,6 +1724,7 @@ RectTransform:
   m_LocalPosition: {x: 0, y: 0, z: 0}
   m_LocalScale: {x: 0, y: 0, z: 0}
   m_Children:
+  - {fileID: 9133304335357123266}
   - {fileID: 9133304335168602039}
   m_Father: {fileID: 0}
   m_RootOrder: 0
@@ -1854,7 +1878,7 @@ GameObject:
   m_Component:
   - component: {fileID: 9133304336675516546}
   m_Layer: 5
-  m_Name: Popcorn
+  m_Name: Item
   m_TagString: Untagged
   m_Icon: {fileID: 0}
   m_NavMeshLayer: 0
@@ -2327,6 +2351,18 @@ RectTransform:
     type: 3}
   m_PrefabInstance: {fileID: 9133304335910433000}
   m_PrefabAsset: {fileID: 0}
+--- !u!114 &5919954079663981596 stripped
+MonoBehaviour:
+  m_CorrespondingSourceObject: {fileID: 3235806894350595316, guid: a3d75f774aaefd046aebd07db1400975,
+    type: 3}
+  m_PrefabInstance: {fileID: 9133304335910433000}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 0}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 11500000, guid: 4e29b1a8efbd4b44bb3f3716e73f07ff, type: 3}
+  m_Name: 
+  m_EditorClassIdentifier: 
 --- !u!1001 &9133304336221248795
 PrefabInstance:
   m_ObjectHideFlags: 0
@@ -2478,3 +2514,15 @@ RectTransform:
     type: 3}
   m_PrefabInstance: {fileID: 9133304336221248795}
   m_PrefabAsset: {fileID: 0}
+--- !u!114 &5919954079471528431 stripped
+MonoBehaviour:
+  m_CorrespondingSourceObject: {fileID: 3235806894350595316, guid: a3d75f774aaefd046aebd07db1400975,
+    type: 3}
+  m_PrefabInstance: {fileID: 9133304336221248795}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 0}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 11500000, guid: 4e29b1a8efbd4b44bb3f3716e73f07ff, type: 3}
+  m_Name: 
+  m_EditorClassIdentifier: 
diff --git a/popcorn/Assets/MyGame/Scenes/shopping/Scripts/ShopItemPurchaseView.cs b/popcorn/Assets/MyGame/Scenes/shopping/Scripts/ShopItemPurchaseView.cs
new file mode 100644
index 00000000..acafc70b
--- /dev/null
+++ b/popcorn/Assets/MyGame/Scenes/shopping/Scripts/ShopItemPurchaseView.cs
@@ -0,0 +1,75 @@
+using System;
+using UniRx;
+using UnityEngine;
+using UnityEngine.UI;
+
+public class ShopItemPurchaseView : MonoBehaviour
+{
+    public static readonly string ItemPurchaseTag = "ItemPurcahse";
+    private static readonly int OpenTrigger = Animator.StringToHash("OpenTrigger");
+    private static readonly int CloseTrigger = Animator.StringToHash("CloseTrigger");
+    private static readonly int MaxPurchaseCount = 999;
+    private static readonly int MinPurchaseCount = 1;
+    
+    [SerializeField] private Animator backgroundAnimator;
+    [SerializeField] private Text name;
+    [SerializeField] private Transform icon;
+    [SerializeField] private Text price;
+    [SerializeField] private Text stockCount;
+    [SerializeField] private Text totalPrice;
+    [SerializeField] private Text purchaseCount;
+    [SerializeField] private Button subCountButton;
+    [SerializeField] private Button addCountButton;
+    [SerializeField] private Button closeButton;
+    [SerializeField] private Button purchaseButton;
+    
+    public IObservable<Unit> PurchaseButtonObservable => purchaseButton.OnClickAsObservable().TakeUntilDestroy(this);
+
+    private readonly IntReactiveProperty currentCount = new IntReactiveProperty();
+    private void Start()
+    {
+        currentCount.AddTo(this);
+        
+        var data = LocalCacheManager.Load<(ShopData shopData, int stockCount)>(ItemPurchaseTag);
+        SetData(data.shopData, data.stockCount);
+        closeButton.OnClickAsObservable().Subscribe(_ =>
+        {
+            transform.SetLocalScale(0);
+            backgroundAnimator.SetTrigger(CloseTrigger);
+            this.CallWaitForSeconds(.25f, () =>
+            {
+                TransitionManager.Instance.UnloadScene(GameScenes.Purchase);
+            });
+        }).AddTo(this);
+        purchaseButton.OnClickAsObservable().Subscribe(_ =>
+        {
+            transform.SetLocalScale(0);
+            backgroundAnimator.SetTrigger(CloseTrigger);
+            this.CallWaitForSeconds(.25f, () =>
+            {
+                TransitionManager.Instance.UnloadScene(GameScenes.Purchase);
+            });
+        }).AddTo(this);
+
+        currentCount.Value = MinPurchaseCount;
+        currentCount.Subscribe(x =>
+        {
+            purchaseCount.text = $"{x}";
+            totalPrice.text = $"{data.shopData.price * x}";
+        }).AddTo(this);
+        addCountButton.OnClickAsObservable().Select(_ => 1)
+            .Merge(subCountButton.OnClickAsObservable().Select(_ => -1))
+            .Subscribe(x =>
+            {
+                currentCount.Value = Mathf.Clamp(currentCount.Value + x, MinPurchaseCount, MaxPurchaseCount);
+                
+            }).AddTo(this);
+    }
+
+    private void SetData(ShopData shopData, int count)
+    {
+        name.text = shopData.name;
+        price.text = $"{shopData.price}";
+        stockCount.text = $"所持数 :{count}";
+    }
+}
diff --git a/popcorn/Assets/MyGame/Scenes/shopping/Scripts/ShopItemPurchaseView.cs.meta b/popcorn/Assets/MyGame/Scenes/shopping/Scripts/ShopItemPurchaseView.cs.meta
new file mode 100644
index 00000000..f0d8f88f
--- /dev/null
+++ b/popcorn/Assets/MyGame/Scenes/shopping/Scripts/ShopItemPurchaseView.cs.meta
@@ -0,0 +1,3 @@
+fileFormatVersion: 2
+guid: 6bb93eb9b7574ef58a194e4cf5aadb5f
+timeCreated: 1631247063
\ No newline at end of file