合并

dist/index.html

@@ -46,7 +46,11 @@
   
   <!-- <script type="module" src="/src/teacher/main.ts"></script> -->
   <script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
+<<<<<<< HEAD
   <script nomodule id="vite-legacy-polyfill" src="./assets/polyfills-legacy.efa12d36.js"></script>
+=======
+  <script nomodule id="vite-legacy-polyfill" src="./assets/polyfills-legacy.1a177d7d.js"></script>
+>>>>>>> fine_music_score
   <script nomodule id="vite-legacy-entry" data-src="./assets/index-legacy.c9bee8f5.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
 </body>
 

src/components/col-img-code/index.tsx

@@ -1,127 +1,139 @@
-import { defineComponent } from 'vue'
-import { Col, Popup, Row, Image as VanImage, Loading, Field, Toast } from 'vant'
-import styles from './index.module.less'
-import request from '@/helpers/request'
-import { state } from '@/state'
-
-export default defineComponent({
-  name: 'imgCode',
-  props: {
-    value: Boolean,
-    phone: [String, Number],
-    onClose: {
-      type: Function,
-      // (...args: any[]) => any) | undefined
-      default: () => {}
-    },
-    onSendCode: {
-      type: Function,
-      default: () => {}
-    }
-  },
-  data() {
-    const origin = window.location.origin
-    return {
-      showStatus: false,
-      identifyingCode:
-        origin + state.platformApi + '/code/getLoginImage?phone=' + this.phone,
-      code: null
-    }
-  },
-  mounted() {
-    this.showStatus = this.value
-  },
-  watch: {
-    value(val: any) {
-      this.showStatus = val
-    },
-    code(val: any) {
-      if (val.length >= 4) {
-        this.checkVerifyLoginImage()
-      }
-    }
-  },
-  methods: {
-    async updateIdentifyingCode() {
-      // 刷新token
-      const origin = window.location.origin
-      this.identifyingCode = `${origin}${
-        state.platformApi
-      }/code/getLoginImage?phone=${this.phone}&token=${Math.random()}`
-    },
-    async checkVerifyLoginImage() {
-      try {
-        if ((this as any).code.length < 4) {
-          return
-        }
-        await request.post(`${state.platformApi}/code/verifyLoginImage`, {
-          requestType: 'form',
-          data: {
-            phone: this.phone,
-            code: this.code
-          }
-        })
-        await request.post(`${state.platformApi}/code/sendSms`, {
-          requestType: 'form',
-          data: {
-            mobile: this.phone,
-            type: 'LOGIN'
-          }
-        })
-        Toast('验证码已发送')
-        this.onClose()
-        this.onSendCode()
-      } catch {
-        this.updateIdentifyingCode()
-      }
-    }
-  },
-  render() {
-    return (
-      // @ts-ignore
-      <Popup
-        show={this.showStatus}
-        class={styles.imgCodePopup}
-        closeOnClickOverlay={false}
-        onClose={() => {
-          this.onClose()
-        }}
-        closeable
-        closeIcon="close"
-      >
-        <div class={styles.imgCode}>
-          <p class={styles.codeTitle}>输入图形验证码</p>
-          <Row>
-            <Col span="14">
-              <Field
-                placeholder="请输入验证码"
-                v-model={this.code}
-                class={styles.field}
-              />
-            </Col>
-            <Col span="10" class={styles.img}>
-              <VanImage
-                src={this.identifyingCode}
-                onClick={() => this.updateIdentifyingCode()}
-                // @ts-ignore
-                vSlots={{
-                  loading: () => <Loading type="spinner" size="20" />
-                }}
-              />
-            </Col>
-          </Row>
-          <Row style={{ display: 'flex', justifyContent: 'end' }}>
-            <Col span="10">
-              <span
-                class={styles.imgChange}
-                onClick={() => this.updateIdentifyingCode()}
-              >
-                看不清？换一换
-              </span>
-            </Col>
-          </Row>
-        </div>
-      </Popup>
-    )
-  }
-})
+import { defineComponent } from 'vue'
+import { Col, Popup, Row, Image as VanImage, Loading, Field, Toast } from 'vant'
+import styles from './index.module.less'
+import request from '@/helpers/request'
+import { state } from '@/state'
+
+export default defineComponent({
+  name: 'imgCode',
+  props: {
+    value: Boolean,
+    phone: [String, Number],
+    onClose: {
+      type: Function,
+      // (...args: any[]) => any) | undefined
+      default: () => {}
+    },
+    onSendCode: {
+      type: Function,
+      default: () => {}
+    }
+  },
+  data() {
+    const origin = window.location.origin
+    return {
+      showStatus: false,
+      identifyingCode:
+        origin + state.platformApi + '/code/getLoginImage?phone=' + this.phone,
+      code: null
+    }
+  },
+  mounted() {
+    this.showStatus = this.value
+  },
+  watch: {
+    value(val: any) {
+      this.showStatus = val
+    },
+    code(val: any) {
+      if (val.length >= 4) {
+        this.checkVerifyLoginImage()
+      }
+    }
+  },
+  methods: {
+    async updateIdentifyingCode() {
+      // 刷新token
+      const origin = window.location.origin
+      this.identifyingCode = `${origin}${
+        state.platformApi
+      }/code/getLoginImage?phone=${this.phone}&token=${Math.random()}`
+    },
+    async checkVerifyLoginImage() {
+      try {
+        if ((this as any).code.length < 4) {
+          return
+        }
+        // await request.post(`${state.platformApi}/code/verifyLoginImage`, {
+        //   requestType: 'form',
+        //   data: {
+        //     phone: this.phone,
+        //     code: this.code
+        //   }
+        // })
+        // await request.post(`${state.platformApi}/code/sendSms`, {
+        //   requestType: 'form',
+        //   data: {
+        //     mobile: this.phone,
+        //     type: 'LOGIN'
+        //   }
+        // })
+        await request.post(`${state.platformApi}/code/sendSmsCode`, {
+          requestType: 'form',
+          hideLoading: true,
+          data: {
+            mobile: this.phone,
+            code: this.code,
+            type: 'LOGIN'
+          }
+        })
+        setTimeout(() => {
+          Toast('验证码已发送')
+        }, 100)
+        this.onClose()
+        this.onSendCode()
+      } catch {
+        this.updateIdentifyingCode()
+      }
+    }
+  },
+  render() {
+    return (
+      // @ts-ignore
+      <Popup
+        show={this.showStatus}
+        class={styles.imgCodePopup}
+        closeOnClickOverlay={false}
+        onClose={() => {
+          this.onClose()
+        }}
+        closeable
+        closeIcon="close"
+      >
+        <div class={styles.imgCode}>
+          <p class={styles.codeTitle}>输入图形验证码</p>
+          <Row>
+            <Col span="14">
+              <Field
+                placeholder="请输入验证码"
+                v-model={this.code}
+                class={styles.field}
+                maxlength={4}
+              />
+            </Col>
+            <Col span="10" class={styles.img}>
+              <VanImage
+                src={this.identifyingCode}
+                onClick={() => this.updateIdentifyingCode()}
+                // @ts-ignore
+                vSlots={{
+                  loading: () => <Loading type="spinner" size="20" />
+                }}
+              />
+            </Col>
+          </Row>
+          <Row style={{ display: 'flex', justifyContent: 'end' }}>
+            <Col span="10">
+              <span
+                class={styles.imgChange}
+                onClick={() => this.updateIdentifyingCode()}
+              >
+                看不清？换一换
+              </span>
+            </Col>
+          </Row>
+        </div>
+      </Popup>
+    )
+  }
+})

src/views/cart/index.tsx

@@ -32,13 +32,13 @@ export default defineComponent({
   },
   computed: {
     checkAll() {
-      let selectLen: number = this.selectItems.length
-      let cartLen: number = this.cartList.length
+      const selectLen: number = this.selectItems.length
+      const cartLen: number = this.cartList.length
       if (!cartLen) return false
       return selectLen === cartLen
     },
     len() {
-      let n: number = this.selectItems.length
+      const n: number = this.selectItems.length
       return n
     },
     totalPrice() {
@@ -60,7 +60,7 @@ export default defineComponent({
       this.loading = true
       this.cartList = []
       try {
-        let { code, data } = await request.get('/api-mall-portal/cart/list')
+        const { code, data } = await request.get('/api-mall-portal/cart/list')
         if (code === 200) {
           this.cartList = data.map(n => {
             return n
@@ -84,13 +84,11 @@ export default defineComponent({
       const selectItems = [] as any
       if (!this.checkAll) {
         this.cartList.forEach((n: any) => {
-          if (!this.isManage) {
-            if (n.stock > 0) {
-              selectItems.push(n.id)
-            }
-          } else {
-            selectItems.push(n.id)
-          }
+          selectItems.push(n.id)
+          // if (!this.isManage) {
+          // } else {
+          //   selectItems.push(n.id)
+          // }
         })
       }
       this.selectItems = selectItems
@@ -98,7 +96,7 @@ export default defineComponent({
 
     async setCartItem(item: any) {
       try {
-        let { code, data } = await request.get(
+        const { code, data } = await request.get(
           '/api-mall-portal/cart/update/quantity',
           {
             params: {
@@ -134,7 +132,7 @@ export default defineComponent({
       }).then(async () => {
         const ids = this.selectItems.join(',')
         try {
-          let { code, data } = await request.post(
+          const { code, data } = await request.post(
             '/api-mall-portal/cart/delete?ids=' + ids
           )
           if (code === 200) {
@@ -211,10 +209,7 @@ export default defineComponent({
                 <CheckboxGroup v-model={this.selectItems}>
                   {this.cartList.map((item: any) => (
                     <div class={styles.cartItem}>
-                      <Checkbox
-                        name={item.id}
-                        disabled={item.stock <= 0 && !this.isManage}
-                      >
+                      <Checkbox name={item.id}>
                         <Card
                           price={moneyFormat(item.price)}
                           desc={formateAttr(item.productAttr)}
@@ -236,14 +231,15 @@ export default defineComponent({
                                 inputWidth="50px"
                                 buttonSize="24px"
                                 min={1}
-                                max={item.stock > 200 ? 200 : item.stock}
+                                // max={item.stock > 200 ? 200 : item.stock}
+                                max={200}
                                 integer
                               />
                             ),
                             thumb: () => (
                               <div>
                                 <Image src={item.productPic}></Image>
-                                {item.stock <= 0 && (
+                                {/* {item.stock <= 0 && (
                                   <div class={styles.sellOut}>
                                     <Image
                                       src={iconSellOut}
@@ -251,7 +247,7 @@ export default defineComponent({
                                       class={styles.sellOutImg}
                                     />
                                   </div>
-                                )}
+                                )} */}
                               </div>
                             )
                           }}

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

@@ -1,71 +1,71 @@
-import { Icon, Image } from 'vant'
-import { defineComponent } from 'vue'
-import styles from './index.module.less'
-
-import iconAddCart from '../../images/icon-add-cart.png'
-import iconSellOut from '../../images/icon-sell-out.png'
-import { moneyFormat } from '@/helpers/utils'
-
-export default defineComponent({
-  name: 'goods',
-  props: {
-    showAdd: {
-      type: Boolean,
-      default: true
-    },
-    item: {
-      type: Object,
-      default: {}
-    },
-    onItemClick: {
-      type: Function,
-      default: (item: any) => {}
-    },
-    onBuyClick: {
-      type: Function,
-      default: (item: any) => {}
-    }
-  },
-  render() {
-    const item = this.item
-    return (
-      <div class={styles.goods} onClick={() => this.onItemClick(item)}>
-        <div class={styles.goodsSection}>
-          <Image src={item.pic} fit="cover" class={styles.goodsImg} />
-          {item.stock <= 0 && (
-            <div class={styles.sellOut}>
-              <Image src={iconSellOut} fit="cover" class={styles.sellOutImg} />
-            </div>
-          )}
-        </div>
-        <div class={styles.goodsInfo}>
-          <div class={[styles.goodsName, 'van-ellipsis']}>{item.name}</div>
-          <div class={styles.goodsBuy}>
-            {/* <del class={styles.goodsSale}>
-              ￥{moneyFormat(item.originalPrice)}
-            </del> */}
-            <p class={styles.goodsPrice}>
-              <span class={styles.pre}>￥</span>
-              {moneyFormat(item.price)}
-            </p>
-
-            {this.showAdd && (
-              <Icon
-                class={[
-                  styles.addCart,
-                  item.stock <= 0 && styles.addCartDisabled
-                ]}
-                name={iconAddCart}
-                size={22}
-                onClick={(e: MouseEvent) => {
-                  e.stopPropagation()
-                  item.stock > 0 && this.onBuyClick(item)
-                }}
-              />
-            )}
-          </div>
-        </div>
-      </div>
-    )
-  }
-})
+import { Icon, Image } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+
+import iconAddCart from '../../images/icon-add-cart.png'
+import iconSellOut from '../../images/icon-sell-out.png'
+import { moneyFormat } from '@/helpers/utils'
+
+export default defineComponent({
+  name: 'goods',
+  props: {
+    showAdd: {
+      type: Boolean,
+      default: true
+    },
+    item: {
+      type: Object,
+      default: {}
+    },
+    onItemClick: {
+      type: Function,
+      default: (item: any) => {}
+    },
+    onBuyClick: {
+      type: Function,
+      default: (item: any) => {}
+    }
+  },
+  render() {
+    const item = this.item
+    return (
+      <div class={styles.goods} onClick={() => this.onItemClick(item)}>
+        <div class={styles.goodsSection}>
+          <Image src={item.pic} fit="cover" class={styles.goodsImg} />
+          {/* {item.stock <= 0 && (
+            <div class={styles.sellOut}>
+              <Image src={iconSellOut} fit="cover" class={styles.sellOutImg} />
+            </div>
+          )} */}
+        </div>
+        <div class={styles.goodsInfo}>
+          <div class={[styles.goodsName, 'van-ellipsis']}>{item.name}</div>
+          <div class={styles.goodsBuy}>
+            {/* <del class={styles.goodsSale}>
+              ￥{moneyFormat(item.originalPrice)}
+            </del> */}
+            <p class={styles.goodsPrice}>
+              <span class={styles.pre}>￥</span>
+              {moneyFormat(item.price)}
+            </p>
+
+            {this.showAdd && (
+              <Icon
+                class={[
+                  styles.addCart,
+                  item.stock <= 0 && styles.addCartDisabled
+                ]}
+                name={iconAddCart}
+                size={22}
+                onClick={(e: MouseEvent) => {
+                  e.stopPropagation()
+                  item.stock > 0 && this.onBuyClick(item)
+                }}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    )
+  }
+})

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

@@ -1,394 +1,395 @@
-import request from '@/helpers/request'
-import { browser, moneyFormat } from '@/helpers/utils'
-import {
-  Swipe,
-  SwipeItem,
-  Image,
-  CellGroup,
-  Cell,
-  ImagePreview,
-  RadioGroup,
-  Radio,
-  Tag,
-  Row,
-  Col,
-  Sticky,
-  ActionBar,
-  ActionBarButton,
-  ActionBarIcon,
-  Icon,
-  Badge,
-  Toast,
-  Popup,
-  SubmitBar,
-  Card
-} from 'vant'
-import { defineComponent } from 'vue'
-import styles from './index.module.less'
-import iconShopCart from '../images/icon-shop-cart.png'
-import iconHome from '../images/icon-home.png'
-import AddGoodsCart from '../modal/add-goods-cart'
-import ColHeader from '@/components/col-header'
-import iconShare from '../images/icon-share.svg'
-import { state } from '@/state'
-
-export default defineComponent({
-  name: 'goods-detail',
-  data() {
-    const query = this.$route.query
-    return {
-      id: query.id,
-      albumPics: [] as any[],
-      product: {} as Record<string | number | symbol, any>,
-      radio: 0,
-      skuStockListTemp: [],
-      detailMobileHtml: '',
-      loading: false,
-      addGoodsShow: false,
-      selectGoodsItem: {},
-      cartCount: 0,
-      showType: 'cart',
-      shareShow: false // 分享弹窗
-    }
-  },
-  computed: {
-    skuStockList() {
-      // 处理规格
-      const product = this.product
-      const skuStockList: any =
-        this.skuStockListTemp.length > 0
-          ? this.skuStockListTemp
-          : [
-              {
-                id: -1,
-                price: product.price,
-                pic: product.pic,
-                stock: product.stock,
-                spData: null
-              }
-            ]
-      skuStockList.forEach((item: any) => {
-        if (item.spData) {
-          const spData = JSON.parse(item.spData)
-          item.spDataJson = spData.reduce((spDataJson, value) => {
-            spDataJson += value.value
-            return spDataJson
-          }, '')
-          item.sku = spData
-            .reduce((sku, value) => {
-              sku.push(`${value.key}: ${value.value}`)
-              return sku
-            }, [])
-            .join(',')
-        } else {
-          item.spDataJson = '默认'
-        }
-      })
-      return skuStockList
-    },
-    getPrice() {
-      let item = this.skuStockList.filter(n => n.id == this.radio) as any
-      if (item && Array.isArray(item) && item.length) {
-        return item[0].price
-      }
-      return 0
-    }
-  },
-  async mounted() {
-    try {
-      this.loading = true
-      const res = await request.get(
-        `/api-mall-portal/product/detail/${this.id}`
-      )
-      this.loading = false
-      const result = res.data || {}
-      this.albumPics = [result.product.pic]
-        .concat(result.product.albumPics.split(','))
-        .filter(n => n)
-      this.product = result.product
-      this.skuStockListTemp = result.skuStockList || []
-      if (this.skuStockListTemp.length) {
-        let len = this.skuStockListTemp.length
-        for (let i = 0; i < len; i++) {
-          let item = this.skuStockListTemp[i] as any
-          if (item.stock >= 0) {
-            this.radio = item.id
-            break
-          }
-        }
-      }
-      this.detailMobileHtml = result.product.detailMobileHtml
-    } catch {}
-    this.getCartCount()
-  },
-  methods: {
-    onPreview(index: number) {
-      // 图片预览
-      ImagePreview({
-        images: this.albumPics,
-        startPosition: index,
-        closeable: true,
-        className: styles.imagesOverlayWrap
-      })
-    },
-    onShowImg(target: any) {
-      const { localName } = target.srcElement
-      if (localName !== 'img') {
-        return
-      }
-      let startPosition = 0
-      const domList = document.querySelectorAll('.msgWrap img')
-      let imgList = Array.from(domList).map((item: any, index: number) => {
-        if (target.srcElement == item) {
-          startPosition = index
-        }
-        return item.src
-      })
-
-      ImagePreview({
-        images: imgList,
-        startPosition: startPosition,
-        closeable: true,
-        className: styles.imagesOverlayWrap
-      })
-    },
-    onShowCart(type = 'cart') {
-      this.selectGoodsItem = {
-        price: this.product.pic,
-        stock: this.product.stock,
-        skuStockList: this.skuStockListTemp.length
-          ? this.skuStockListTemp
-          : undefined,
-        brandName: this.product.brandName,
-        productCategoryId: this.product.productCategoryId,
-        name: this.product.name,
-        productSn: this.product.productSn,
-        productSubTitle: this.product.subTitle,
-        id: this.product.id
-      }
-      this.showType = type
-      // 打开购物弹框
-      this.addGoodsShow = true
-    },
-    onBuy() {
-      // 购买
-      if (!this.radio) {
-        return Toast('请选择规格')
-      }
-      console.log(true)
-    },
-    async getCartCount() {
-      try {
-        let { code, data } = await request.get('/api-mall-portal/cart/list')
-        if (code === 200) {
-          this.cartCount = data.length
-        }
-      } catch (err) {}
-    }
-  },
-  render() {
-    const product = this.product
-    const selectSku = this.skuStockList.find((n: any) => n.id === this.radio)
-    return (
-      <div class={styles.goodsDetail}>
-        <ColHeader />
-        <Swipe
-          class={styles.swipe}
-          lazyRender
-          v-slots={{
-            indicator: (item: any) =>
-              item.total > 1 && (
-                <div class={styles['custom-indicator']}>
-                  {(item.active || 0) + 1} / {item.total}
-                </div>
-              )
-          }}
-        >
-          {this.albumPics.map((item: string, index: number) => (
-            <SwipeItem>
-              <Image
-                class={styles.swipeItemImg}
-                src={item}
-                onClick={() => this.onPreview(index)}
-                fit="cover"
-              />
-            </SwipeItem>
-          ))}
-        </Swipe>
-
-        <CellGroup border={false} class={[styles.goodsHead, 'mb12']}>
-          <Cell
-            center
-            border={false}
-            v-slots={{
-              title: () => (
-                <div class={styles.priceGroup}>
-                  <span class={styles.price}>
-                    <i>¥</i>
-                    {moneyFormat(this.getPrice)}
-                  </span>
-                  {/* <del class={styles.delPrice}>
-                    ¥{moneyFormat(product.originalPrice)}
-                  </del> */}
-                </div>
-              )
-              // 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']}>
-          <Col span={4} class={styles.col}>
-            规格
-          </Col>
-          <Col span={20}>
-            {selectSku ? (
-              <div class={styles.selectWrap}>
-                {selectSku.stock <= 0
-                  ? `当前款式暂时缺货`
-                  : `已选择 ${selectSku.spDataJson}`}
-              </div>
-            ) : (
-              <div>请选择 规格</div>
-            )}
-            <RadioGroup
-              class={styles['radio-group']}
-              modelValue={this.radio}
-              onUpdate:modelValue={val => (this.radio = val)}
-            >
-              {this.skuStockList.map((item: any) => {
-                const isActive = item.id === this.radio
-                const type = isActive ? 'primary' : 'default'
-                return (
-                  <Badge
-                    position="top-right"
-                    content={item.stock <= 0 ? '缺货' : ''}
-                    color={'#999999'}
-                    class={styles.badge}
-                    offset={[-20, 0]}
-                  >
-                    <Radio
-                      class={styles.radio}
-                      name={item.id}
-                      disabled={item.stock <= 0}
-                      onClick={() => {
-                        // 判断是否有库存
-                        if (item.stock <= 0) {
-                          return
-                        }
-                        this.radio = item.id
-                      }}
-                    >
-                      <Tag size="large" plain={isActive} type={type}>
-                        {item.spDataJson}
-                      </Tag>
-                    </Radio>
-                  </Badge>
-                )
-              })}
-            </RadioGroup>
-          </Col>
-        </Row>
-        {this.detailMobileHtml && (
-          <div class={[styles.section]}>
-            <div class={styles.detail}>
-              <span>图文详情</span>
-            </div>
-
-            <div
-              class={[styles.photoDetail, 'msgWrap']}
-              onClick={this.onShowImg}
-              v-html={this.detailMobileHtml}
-            ></div>
-          </div>
-        )}
-
-        {!this.loading && (
-          <>
-            <SubmitBar
-              class={styles.actionBar}
-              safe-area-inset-bottom
-              v-slots={{
-                button: () => (
-                  <div class={styles.buyGroup}>
-                    <ActionBarButton
-                      type="primary"
-                      class={styles.addCertBtn}
-                      text="加入购物车"
-                      onClick={() => this.onShowCart()}
-                    />
-                    <ActionBarButton
-                      type="primary"
-                      class={styles.buyGroupBtn}
-                      text="立即购买"
-                      onClick={() => this.onShowCart('cartConfirm')}
-                    />
-                  </div>
-                )
-              }}
-            >
-              <div
-                style={{
-                  display: 'flex',
-                  alignItems: 'center'
-                }}
-              >
-                <Badge
-                  content={this.cartCount}
-                  showZero={false}
-                  onClick={() => {
-                    this.$router.push('/cart')
-                  }}
-                >
-                  {/* <Icon name={iconShopCart} size={24} /> */}
-                  <Image
-                    src={iconShopCart}
-                    style={{ width: '30px', height: '24px' }}
-                  />
-                  <div class={styles.text}>购物车</div>
-                </Badge>
-
-                <Badge
-                  content={0}
-                  showZero={false}
-                  style={{
-                    marginLeft: '32px'
-                  }}
-                  onClick={() => {
-                    this.$router.push('/')
-                  }}
-                >
-                  <Icon name={iconHome} size={24} />
-                  <div class={styles.text}>首页</div>
-                </Badge>
-              </div>
-            </SubmitBar>
-          </>
-        )}
-        <Popup
-          show={this.addGoodsShow}
-          closeable
-          position="bottom"
-          round
-          onClose={() => {
-            this.addGoodsShow = false
-          }}
-        >
-          <AddGoodsCart
-            show={this.addGoodsShow}
-            onGetCartCount={() => this.getCartCount()}
-            item={this.selectGoodsItem}
-            defaultRadio={this.radio}
-            showType={this.showType}
-          />
-        </Popup>
-      </div>
-    )
-  }
-})
+import request from '@/helpers/request'
+import { browser, moneyFormat } from '@/helpers/utils'
+import {
+  Swipe,
+  SwipeItem,
+  Image,
+  CellGroup,
+  Cell,
+  ImagePreview,
+  RadioGroup,
+  Radio,
+  Tag,
+  Row,
+  Col,
+  Sticky,
+  ActionBar,
+  ActionBarButton,
+  ActionBarIcon,
+  Icon,
+  Badge,
+  Toast,
+  Popup,
+  SubmitBar,
+  Card
+} from 'vant'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+import iconShopCart from '../images/icon-shop-cart.png'
+import iconHome from '../images/icon-home.png'
+import AddGoodsCart from '../modal/add-goods-cart'
+import ColHeader from '@/components/col-header'
+import iconShare from '../images/icon-share.svg'
+import { state } from '@/state'
+
+export default defineComponent({
+  name: 'goods-detail',
+  data() {
+    const query = this.$route.query
+    return {
+      id: query.id,
+      albumPics: [] as any[],
+      product: {} as Record<string | number | symbol, any>,
+      radio: 0,
+      skuStockListTemp: [],
+      detailMobileHtml: '',
+      loading: false,
+      addGoodsShow: false,
+      selectGoodsItem: {},
+      cartCount: 0,
+      showType: 'cart',
+      shareShow: false // 分享弹窗
+    }
+  },
+  computed: {
+    skuStockList() {
+      // 处理规格
+      const product = this.product
+      const skuStockList: any =
+        this.skuStockListTemp.length > 0
+          ? this.skuStockListTemp
+          : [
+              {
+                id: -1,
+                price: product.price,
+                pic: product.pic,
+                stock: product.stock,
+                spData: null
+              }
+            ]
+      skuStockList.forEach((item: any) => {
+        if (item.spData) {
+          const spData = JSON.parse(item.spData)
+          item.spDataJson = spData.reduce((spDataJson, value) => {
+            spDataJson += value.value
+            return spDataJson
+          }, '')
+          item.sku = spData
+            .reduce((sku, value) => {
+              sku.push(`${value.key}: ${value.value}`)
+              return sku
+            }, [])
+            .join(',')
+        } else {
+          item.spDataJson = '默认'
+        }
+      })
+      return skuStockList
+    },
+    getPrice() {
+      const item = this.skuStockList.filter(n => n.id == this.radio) as any
+      if (item && Array.isArray(item) && item.length) {
+        return item[0].price
+      }
+      return 0
+    }
+  },
+  async mounted() {
+    try {
+      this.loading = true
+      const res = await request.get(
+        `/api-mall-portal/product/detail/${this.id}`
+      )
+      this.loading = false
+      const result = res.data || {}
+      this.albumPics = [result.product.pic]
+        .concat(result.product.albumPics.split(','))
+        .filter(n => n)
+      this.product = result.product
+      this.skuStockListTemp = result.skuStockList || []
+      if (this.skuStockListTemp.length) {
+        const len = this.skuStockListTemp.length
+        for (let i = 0; i < len; i++) {
+          const item = this.skuStockListTemp[i] as any
+          if (item.stock >= 0) {
+            this.radio = item.id
+            break
+          }
+        }
+      }
+      this.detailMobileHtml = result.product.detailMobileHtml
+    } catch {}
+    this.getCartCount()
+  },
+  methods: {
+    onPreview(index: number) {
+      // 图片预览
+      ImagePreview({
+        images: this.albumPics,
+        startPosition: index,
+        closeable: true,
+        className: styles.imagesOverlayWrap
+      })
+    },
+    onShowImg(target: any) {
+      const { localName } = target.srcElement
+      if (localName !== 'img') {
+        return
+      }
+      let startPosition = 0
+      const domList = document.querySelectorAll('.msgWrap img')
+      const imgList = Array.from(domList).map((item: any, index: number) => {
+        if (target.srcElement == item) {
+          startPosition = index
+        }
+        return item.src
+      })
+
+      ImagePreview({
+        images: imgList,
+        startPosition: startPosition,
+        closeable: true,
+        className: styles.imagesOverlayWrap
+      })
+    },
+    onShowCart(type = 'cart') {
+      this.selectGoodsItem = {
+        price: this.product.pic,
+        stock: this.product.stock,
+        skuStockList: this.skuStockListTemp.length
+          ? this.skuStockListTemp
+          : undefined,
+        brandName: this.product.brandName,
+        productCategoryId: this.product.productCategoryId,
+        name: this.product.name,
+        productSn: this.product.productSn,
+        productSubTitle: this.product.subTitle,
+        id: this.product.id
+      }
+      this.showType = type
+      // 打开购物弹框
+      this.addGoodsShow = true
+    },
+    onBuy() {
+      // 购买
+      if (!this.radio) {
+        return Toast('请选择规格')
+      }
+      console.log(true)
+    },
+    async getCartCount() {
+      try {
+        const { code, data } = await request.get('/api-mall-portal/cart/list')
+        if (code === 200) {
+          this.cartCount = data.length
+        }
+      } catch (err) {}
+    }
+  },
+  render() {
+    const product = this.product
+    const selectSku = this.skuStockList.find((n: any) => n.id === this.radio)
+    return (
+      <div class={styles.goodsDetail}>
+        <ColHeader />
+        <Swipe
+          class={styles.swipe}
+          lazyRender
+          v-slots={{
+            indicator: (item: any) =>
+              item.total > 1 && (
+                <div class={styles['custom-indicator']}>
+                  {(item.active || 0) + 1} / {item.total}
+                </div>
+              )
+          }}
+        >
+          {this.albumPics.map((item: string, index: number) => (
+            <SwipeItem>
+              <Image
+                class={styles.swipeItemImg}
+                src={item}
+                onClick={() => this.onPreview(index)}
+                fit="cover"
+              />
+            </SwipeItem>
+          ))}
+        </Swipe>
+
+        <CellGroup border={false} class={[styles.goodsHead, 'mb12']}>
+          <Cell
+            center
+            border={false}
+            v-slots={{
+              title: () => (
+                <div class={styles.priceGroup}>
+                  <span class={styles.price}>
+                    <i>¥</i>
+                    {moneyFormat(this.getPrice)}
+                  </span>
+                  {/* <del class={styles.delPrice}>
+                    ¥{moneyFormat(product.originalPrice)}
+                  </del> */}
+                </div>
+              )
+              // 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']}>
+          <Col span={4} class={styles.col}>
+            规格
+          </Col>
+          <Col span={20}>
+            {selectSku ? (
+              <div class={styles.selectWrap}>
+                {/* {selectSku.stock <= 0
+                  ? `当前款式暂时缺货`
+                  : `已选择 ${selectSku.spDataJson}`} */}
+                已选择 {selectSku.spDataJson}
+              </div>
+            ) : (
+              <div>请选择 规格</div>
+            )}
+            <RadioGroup
+              class={styles['radio-group']}
+              modelValue={this.radio}
+              onUpdate:modelValue={val => (this.radio = val)}
+            >
+              {this.skuStockList.map((item: any) => {
+                const isActive = item.id === this.radio
+                const type = isActive ? 'primary' : 'default'
+                return (
+                  <Badge
+                    position="top-right"
+                    // content={item.stock <= 0 ? '缺货' : ''}
+                    color={'#999999'}
+                    class={styles.badge}
+                    offset={[-20, 0]}
+                  >
+                    <Radio
+                      class={styles.radio}
+                      name={item.id}
+                      // disabled={item.stock <= 0}
+                      onClick={() => {
+                        // 判断是否有库存
+                        if (item.stock <= 0) {
+                          return
+                        }
+                        this.radio = item.id
+                      }}
+                    >
+                      <Tag size="large" plain={isActive} type={type}>
+                        {item.spDataJson}
+                      </Tag>
+                    </Radio>
+                  </Badge>
+                )
+              })}
+            </RadioGroup>
+          </Col>
+        </Row>
+        {this.detailMobileHtml && (
+          <div class={[styles.section]}>
+            <div class={styles.detail}>
+              <span>图文详情</span>
+            </div>
+
+            <div
+              class={[styles.photoDetail, 'msgWrap']}
+              onClick={this.onShowImg}
+              v-html={this.detailMobileHtml}
+            ></div>
+          </div>
+        )}
+
+        {!this.loading && (
+          <>
+            <SubmitBar
+              class={styles.actionBar}
+              safe-area-inset-bottom
+              v-slots={{
+                button: () => (
+                  <div class={styles.buyGroup}>
+                    <ActionBarButton
+                      type="primary"
+                      class={styles.addCertBtn}
+                      text="加入购物车"
+                      onClick={() => this.onShowCart()}
+                    />
+                    <ActionBarButton
+                      type="primary"
+                      class={styles.buyGroupBtn}
+                      text="立即购买"
+                      onClick={() => this.onShowCart('cartConfirm')}
+                    />
+                  </div>
+                )
+              }}
+            >
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center'
+                }}
+              >
+                <Badge
+                  content={this.cartCount}
+                  showZero={false}
+                  onClick={() => {
+                    this.$router.push('/cart')
+                  }}
+                >
+                  {/* <Icon name={iconShopCart} size={24} /> */}
+                  <Image
+                    src={iconShopCart}
+                    style={{ width: '30px', height: '24px' }}
+                  />
+                  <div class={styles.text}>购物车</div>
+                </Badge>
+
+                <Badge
+                  content={0}
+                  showZero={false}
+                  style={{
+                    marginLeft: '32px'
+                  }}
+                  onClick={() => {
+                    this.$router.push('/')
+                  }}
+                >
+                  <Icon name={iconHome} size={24} />
+                  <div class={styles.text}>首页</div>
+                </Badge>
+              </div>
+            </SubmitBar>
+          </>
+        )}
+        <Popup
+          show={this.addGoodsShow}
+          closeable
+          position="bottom"
+          round
+          onClose={() => {
+            this.addGoodsShow = false
+          }}
+        >
+          <AddGoodsCart
+            show={this.addGoodsShow}
+            onGetCartCount={() => this.getCartCount()}
+            item={this.selectGoodsItem}
+            defaultRadio={this.radio}
+            showType={this.showType}
+          />
+        </Popup>
+      </div>
+    )
+  }
+})

src/views/shop-mall/modal/add-goods-cart/index.tsx

@@ -1,289 +1,290 @@
-import { moneyFormat } from '@/helpers/utils'
-import {
-  Button,
-  Cell,
-  Dialog,
-  Image,
-  Loading,
-  Radio,
-  RadioGroup,
-  Stepper,
-  Tag,
-  Toast
-} from 'vant'
-import { defineComponent, PropType } from 'vue'
-import styles from './index.module.less'
-import iconSellOut from '../../images/icon-sell-out.png'
-import request from '@/helpers/request'
-import { getCartCount } from '../../shop-mall'
-
-export default defineComponent({
-  name: 'add-goods-cart',
-  props: {
-    show: {
-      type: Boolean,
-      default: false
-    },
-    item: {
-      type: Object,
-      default: {}
-    },
-    defaultRadio: {
-      type: Number,
-      default: 0
-    },
-    showType: {
-      type: String,
-      default: 'cart'
-    },
-    onGetCartCount: {
-      type: Function,
-      default: (n: any) => {}
-    }
-  },
-  watch: {
-    show(val) {
-      // 添加购物车显示
-      if (val) {
-        this.totalData = {}
-        this.total = 1
-        this.radio = ''
-        this.setList()
-      }
-    }
-  },
-  data() {
-    return {
-      radio: '',
-      total: 1,
-      totalData: {},
-      skuStockList: []
-    }
-  },
-  computed: {
-    selectItem() {
-      const radio = this.radio
-      const select = this.skuStockList.find((n: any) => n.id == radio) as any
-      if (select) {
-        let stock: number = select.stock - select.lockStock //- select.cartNum
-        return {
-          ...select,
-          stock
-        }
-      }
-      return {
-        stock: 0
-      }
-    }
-  },
-  mounted() {
-    this.setList()
-  },
-  methods: {
-    setList() {
-      // 处理规格
-      let skuStockList = [] as any
-      const item = JSON.parse(JSON.stringify(this.item))
-      if (Array.isArray(item.skuStockList)) {
-        skuStockList = item.skuStockList.map((n: any) => {
-          n.pic = n.pic || item.pic
-          n.cartNum = 0
-          if (n.spData) {
-            const spData = JSON.parse(n.spData)
-            let str = ''
-            spData.forEach((sp: any) => {
-              str += `${sp.value}`
-            })
-            n.spDataJson = str
-          } else {
-            n.spDataJson = '默认'
-          }
-          n.lockStock = n.lockStock > 0 ? n.lockStock : 0
-          return {
-            ...n
-          }
-        })
-      }
-      if (!skuStockList.length) return skuStockList
-      // 处理默认显示
-      let index = 0
-      if (this.defaultRadio) {
-        let i = skuStockList.findIndex(n => n.id == this.defaultRadio)
-        index = i > -1 ? i : 0
-      }
-      this.radio = skuStockList[index].id
-      this.skuStockList = skuStockList
-      // this.getProductAddCartCount(skuStockList[index].id)
-    },
-    async onAddCart() {
-      const selectItem = this.selectItem
-      const item = this.item
-      const body = {
-        price: selectItem.price, //添加到购物车的价格
-        productSkuId: selectItem.id,
-        quantity: this.total, // 数量
-        productId: item.id,
-        hidden: this.showType === 'cart' ? 0 : 1,
-        promoterId: this.$route.query.promoterId
-          ? this.$route.query.promoterId
-          : undefined
-      }
-      // console.log(body)
-      try {
-        let { code, data } = await request.post('/api-mall-portal/cart/add', {
-          data: body
-        })
-        if (code === 200) {
-          // this.getProductAddCartCount(selectItem.id, true)
-          if (this.showType === 'cart') {
-            this.onGetCartCount()
-            this.$nextTick(() => {
-              setTimeout(() => {
-                Toast({
-                  icon: 'success',
-                  message: '添加商品成功'
-                })
-              }, 500)
-            })
-          } else {
-            this.$router.push({
-              path: '/cartConfirm',
-              query: {
-                cartIds: data.id
-              }
-            })
-          }
-          getCartCount()
-        }
-      } catch (error) {
-        // let msg : string = (error as any).message
-        // if (msg === "库存不足") {
-        //   for(let i = 0; i < this.skuStockList.length; i++){
-        //     if ((this.skuStockList[i] as any).id === this.selectItem.id){
-        //       (this.skuStockList[i] as any).stock = 0
-        //     }
-        //   }
-        // }
-      }
-    },
-
-    // 获取购物车当前产品的数量
-    async getProductAddCartCount(id?: any, isRest = false) {
-      id = id ? id : this.selectItem.id
-      if (this.totalData.hasOwnProperty(id) && !isRest) {
-        this.setProductStock(this.totalData[id])
-        return
-      }
-      if (!id) return
-      try {
-        let res = await request.get(`/api-mall-portal/product/cart/${id}`)
-        this.setProductStock(res.data || 0)
-        this.totalData[id] = res.data || 0
-      } catch (err) {}
-    },
-
-    // 更新产品规格的库存
-    setProductStock(n: number) {
-      // 根据当前用户的购物车,当前产品规格的数量,限制库存
-      for (let i = 0; i < this.skuStockList.length; i++) {
-        if ((this.skuStockList[i] as any).id === this.radio) {
-          ;(this.skuStockList[i] as any).cartNum = n
-        }
-      }
-    }
-  },
-  render() {
-    return (
-      <div class={styles.addGoodsCart}>
-        <Cell
-          titleStyle={{ paddingLeft: '12px' }}
-          v-slots={{
-            icon: () => (
-              <div class={styles.goodsSection}>
-                <Image
-                  src={this.selectItem.pic}
-                  class={styles.goodsImg}
-                  fit="cover"
-                />
-                {this.selectItem.stock <= 0 && (
-                  <div class={styles.sellOut}>
-                    <Image
-                      src={iconSellOut}
-                      fit="cover"
-                      class={styles.sellOutImg}
-                    />
-                  </div>
-                )}
-              </div>
-            ),
-            title: () => (
-              <div class={styles.goodsInfo}>
-                <p class={styles.goodsPrice}>
-                  <span>￥</span>
-                  {moneyFormat(this.selectItem.price)}
-                </p>
-                <p class={styles.goodsStore}>库存：{this.selectItem.stock}</p>
-              </div>
-            )
-          }}
-        />
-        <Cell
-          v-slots={{
-            title: () => <div class={styles.title}>规格</div>,
-            label: () => (
-              <RadioGroup class={styles['radio-group']} modelValue={this.radio}>
-                {this.skuStockList.map((item: any) => {
-                  const isActive = item.id === this.radio
-                  const type = isActive ? 'primary' : 'default'
-                  return (
-                    <Radio
-                      class={styles.radio}
-                      name={item.id}
-                      onClick={() => {
-                        if (this.radio == item.id) return
-                        this.radio = item.id
-                        // this.getProductAddCartCount(item.id)
-                      }}
-                    >
-                      <Tag size="large" plain={isActive} type={type}>
-                        {item.spDataJson}
-                      </Tag>
-                    </Radio>
-                  )
-                })}
-              </RadioGroup>
-            )
-          }}
-        />
-        <Cell
-          title="购买数量"
-          style={{ margin: '12px 0' }}
-          border={false}
-          titleClass={styles.title}
-          center
-        >
-          <Stepper
-            v-model={this.total}
-            inputWidth="50px"
-            theme="round"
-            buttonSize="24px"
-            max={this.selectItem.stock > 200 ? 200 : this.selectItem.stock}
-            min={1}
-            disabled={this.selectItem.stock <= 0}
-            integer
-          />
-        </Cell>
-        <div class={['btnGroup']} style={{ marginBottom: '8px' }}>
-          <Button
-            block
-            round
-            type="primary"
-            text="确定"
-            disabled={this.selectItem.stock <= 0}
-            onClick={() => this.onAddCart()}
-          />
-        </div>
-      </div>
-    )
-  }
-})
+import { moneyFormat } from '@/helpers/utils'
+import {
+  Button,
+  Cell,
+  Dialog,
+  Image,
+  Loading,
+  Radio,
+  RadioGroup,
+  Stepper,
+  Tag,
+  Toast
+} from 'vant'
+import { defineComponent, PropType } from 'vue'
+import styles from './index.module.less'
+import iconSellOut from '../../images/icon-sell-out.png'
+import request from '@/helpers/request'
+import { getCartCount } from '../../shop-mall'
+
+export default defineComponent({
+  name: 'add-goods-cart',
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    item: {
+      type: Object,
+      default: {}
+    },
+    defaultRadio: {
+      type: Number,
+      default: 0
+    },
+    showType: {
+      type: String,
+      default: 'cart'
+    },
+    onGetCartCount: {
+      type: Function,
+      default: (n: any) => {}
+    }
+  },
+  watch: {
+    show(val) {
+      // 添加购物车显示
+      if (val) {
+        this.totalData = {}
+        this.total = 1
+        this.radio = ''
+        this.setList()
+      }
+    }
+  },
+  data() {
+    return {
+      radio: '',
+      total: 1,
+      totalData: {},
+      skuStockList: []
+    }
+  },
+  computed: {
+    selectItem() {
+      const radio = this.radio
+      const select = this.skuStockList.find((n: any) => n.id == radio) as any
+      if (select) {
+        const stock: number = select.stock - select.lockStock //- select.cartNum
+        return {
+          ...select,
+          stock
+        }
+      }
+      return {
+        stock: 0
+      }
+    }
+  },
+  mounted() {
+    this.setList()
+  },
+  methods: {
+    setList() {
+      // 处理规格
+      let skuStockList = [] as any
+      const item = JSON.parse(JSON.stringify(this.item))
+      if (Array.isArray(item.skuStockList)) {
+        skuStockList = item.skuStockList.map((n: any) => {
+          n.pic = n.pic || item.pic
+          n.cartNum = 0
+          if (n.spData) {
+            const spData = JSON.parse(n.spData)
+            let str = ''
+            spData.forEach((sp: any) => {
+              str += `${sp.value}`
+            })
+            n.spDataJson = str
+          } else {
+            n.spDataJson = '默认'
+          }
+          n.lockStock = n.lockStock > 0 ? n.lockStock : 0
+          return {
+            ...n
+          }
+        })
+      }
+      if (!skuStockList.length) return skuStockList
+      // 处理默认显示
+      let index = 0
+      if (this.defaultRadio) {
+        const i = skuStockList.findIndex(n => n.id == this.defaultRadio)
+        index = i > -1 ? i : 0
+      }
+      this.radio = skuStockList[index].id
+      this.skuStockList = skuStockList
+      // this.getProductAddCartCount(skuStockList[index].id)
+    },
+    async onAddCart() {
+      const selectItem = this.selectItem
+      const item = this.item
+      const body = {
+        price: selectItem.price, //添加到购物车的价格
+        productSkuId: selectItem.id,
+        quantity: this.total, // 数量
+        productId: item.id,
+        hidden: this.showType === 'cart' ? 0 : 1,
+        promoterId: this.$route.query.promoterId
+          ? this.$route.query.promoterId
+          : undefined
+      }
+      // console.log(body)
+      try {
+        const { code, data } = await request.post('/api-mall-portal/cart/add', {
+          data: body
+        })
+        if (code === 200) {
+          // this.getProductAddCartCount(selectItem.id, true)
+          if (this.showType === 'cart') {
+            this.onGetCartCount()
+            this.$nextTick(() => {
+              setTimeout(() => {
+                Toast({
+                  icon: 'success',
+                  message: '添加商品成功'
+                })
+              }, 500)
+            })
+          } else {
+            this.$router.push({
+              path: '/cartConfirm',
+              query: {
+                cartIds: data.id
+              }
+            })
+          }
+          getCartCount()
+        }
+      } catch (error) {
+        // let msg : string = (error as any).message
+        // if (msg === "库存不足") {
+        //   for(let i = 0; i < this.skuStockList.length; i++){
+        //     if ((this.skuStockList[i] as any).id === this.selectItem.id){
+        //       (this.skuStockList[i] as any).stock = 0
+        //     }
+        //   }
+        // }
+      }
+    },
+
+    // 获取购物车当前产品的数量
+    async getProductAddCartCount(id?: any, isRest = false) {
+      id = id ? id : this.selectItem.id
+      if (this.totalData.hasOwnProperty(id) && !isRest) {
+        this.setProductStock(this.totalData[id])
+        return
+      }
+      if (!id) return
+      try {
+        const res = await request.get(`/api-mall-portal/product/cart/${id}`)
+        this.setProductStock(res.data || 0)
+        this.totalData[id] = res.data || 0
+      } catch (err) {}
+    },
+
+    // 更新产品规格的库存
+    setProductStock(n: number) {
+      // 根据当前用户的购物车,当前产品规格的数量,限制库存
+      for (let i = 0; i < this.skuStockList.length; i++) {
+        if ((this.skuStockList[i] as any).id === this.radio) {
+          ;(this.skuStockList[i] as any).cartNum = n
+        }
+      }
+    }
+  },
+  render() {
+    return (
+      <div class={styles.addGoodsCart}>
+        <Cell
+          titleStyle={{ paddingLeft: '12px' }}
+          v-slots={{
+            icon: () => (
+              <div class={styles.goodsSection}>
+                <Image
+                  src={this.selectItem.pic}
+                  class={styles.goodsImg}
+                  fit="cover"
+                />
+                {/* {this.selectItem.stock <= 0 && (
+                  <div class={styles.sellOut}>
+                    <Image
+                      src={iconSellOut}
+                      fit="cover"
+                      class={styles.sellOutImg}
+                    />
+                  </div>
+                )} */}
+              </div>
+            ),
+            title: () => (
+              <div class={styles.goodsInfo}>
+                <p class={styles.goodsPrice}>
+                  <span>￥</span>
+                  {moneyFormat(this.selectItem.price)}
+                </p>
+                {/* <p class={styles.goodsStore}>库存：{this.selectItem.stock}</p> */}
+              </div>
+            )
+          }}
+        />
+        <Cell
+          v-slots={{
+            title: () => <div class={styles.title}>规格</div>,
+            label: () => (
+              <RadioGroup class={styles['radio-group']} modelValue={this.radio}>
+                {this.skuStockList.map((item: any) => {
+                  const isActive = item.id === this.radio
+                  const type = isActive ? 'primary' : 'default'
+                  return (
+                    <Radio
+                      class={styles.radio}
+                      name={item.id}
+                      onClick={() => {
+                        if (this.radio == item.id) return
+                        this.radio = item.id
+                        // this.getProductAddCartCount(item.id)
+                      }}
+                    >
+                      <Tag size="large" plain={isActive} type={type}>
+                        {item.spDataJson}
+                      </Tag>
+                    </Radio>
+                  )
+                })}
+              </RadioGroup>
+            )
+          }}
+        />
+        <Cell
+          title="购买数量"
+          style={{ margin: '12px 0' }}
+          border={false}
+          titleClass={styles.title}
+          center
+        >
+          <Stepper
+            v-model={this.total}
+            inputWidth="50px"
+            theme="round"
+            buttonSize="24px"
+            // max={this.selectItem.stock > 200 ? 200 : this.selectItem.stock}
+            max={200}
+            min={1}
+            // disabled={this.selectItem.stock <= 0}
+            integer
+          />
+        </Cell>
+        <div class={['btnGroup']} style={{ marginBottom: '8px' }}>
+          <Button
+            block
+            round
+            type="primary"
+            text="确定"
+            // disabled={this.selectItem.stock <= 0}
+            onClick={() => this.onAddCart()}
+          />
+        </div>
+      </div>
+    )
+  }
+})