更新

src/views/shop-mall/goods-detail/index.module.less

@@ -104,6 +104,12 @@
     }
   }
 }
+.badge {
+  :global(.van-badge) {
+    border-radius: 6px 0px 6px 0px;
+    font-size: 12px;
+  }
+}
 
 .section {
   background: #fff;

src/views/shop-mall/goods-detail/index.tsx

@@ -17,7 +17,8 @@ import {
   ActionBarButton,
   ActionBarIcon,
   Icon,
-  Badge
+  Badge,
+  Toast
 } from 'vant'
 import { defineComponent } from 'vue'
 import styles from './index.module.less'
@@ -112,6 +113,13 @@ export default defineComponent({
         startPosition: startPosition,
         closeable: true
       })
+    },
+    onBuy() {
+      // 购买
+      if (!this.radio) {
+        return Toast('请选择规格')
+      }
+      console.log(true)
     }
   },
   render() {
@@ -187,7 +195,9 @@ export default defineComponent({
                   <Badge
                     position="top-right"
                     content={item.stock <= 0 ? '缺货' : ''}
-                    offset={[-20, 2]}
+                    color={'#999999'}
+                    class={styles.badge}
+                    offset={[-20, 0]}
                   >
                     <Radio
                       class={styles.radio}
@@ -240,7 +250,11 @@ export default defineComponent({
                 class={styles.addCertBtn}
                 text="加入购物车"
               />
-              <ActionBarButton type="primary" text="立即购买" />
+              <ActionBarButton
+                type="primary"
+                text="立即购买"
+                onClick={this.onBuy}
+              />
             </div>
           </ActionBar>
         )}