商品详情页

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

@@ -60,7 +60,6 @@
   background-color: #fff;
   padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);
   .col {
-    line-height: 32px;
     font-size: 16px;
     color: #333333;
   }
@@ -73,7 +72,7 @@
 }
 
 .radio {
-  margin-right: 10px;
+  margin-right: 8px;
   margin-bottom: 8px;
   :global {
     .van-radio__label--disabled {
@@ -83,8 +82,8 @@
       display: none;
     }
     .van-tag--large {
-      height: 32px;
-      font-size: 16px;
+      height: 27px;
+      font-size: 13px;
       text-align: center;
       display: flex;
       align-items: center;
@@ -197,3 +196,9 @@
   overflow: hidden;
   box-sizing: border-box;
 }
+.selectWrap{
+  padding-top: 1.5px;
+  font-size: 14px;
+  color: #666;
+  padding-bottom: 12px;
+}

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

@@ -175,6 +175,7 @@ export default defineComponent({
   },
   render() {
     const product = this.product
+    const selectList = this.skuStockList.filter((n: any) => n.id === this.radio)
     return (
       <div class={styles.goodsDetail}>
         <Swipe
@@ -205,12 +206,6 @@ export default defineComponent({
           <Cell
             center
             border={false}
-            title={product.name}
-            titleClass={[styles.goodsName, 'van-ellipsis']}
-          />
-          <Cell
-            center
-            border={false}
             v-slots={{
               title: () => (
                 <div class={styles.priceGroup}>
@@ -226,6 +221,12 @@ export default defineComponent({
               // default: () => <div class={styles.stock}>销量4件</div>
             }}
           />
+          <Cell
+            center
+            border={false}
+            title={product.name}
+            titleClass={[styles.goodsName, 'van-ellipsis']}
+          />
         </CellGroup>
 
         <Row class={[styles.row, 'mb12']}>
@@ -233,6 +234,15 @@ export default defineComponent({
             规格
           </Col>
           <Col span={20}>
+            {selectList.length ? (
+              <div class={styles.selectWrap}>
+                {selectList[0].stock <= 0
+                  ? `当前款式暂时缺货`
+                  : `已选择 ${selectList[0].spDataJson}`}
+              </div>
+            ) : (
+              <div>请选择 规格</div>
+            )}
             <RadioGroup
               class={styles['radio-group']}
               modelValue={this.radio}