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

import request from '@/helpers/request'
import { moneyFormat } from '@/helpers/utils'
import {
  Swipe,
  SwipeItem,
  Image,
  CellGroup,
  Cell,
  ImagePreview,
  RadioGroup,
  Radio,
  Tag,
  Row,
  Col,
  Sticky,
  ActionBar,
  ActionBarButton,
  ActionBarIcon,
  Icon,
  Badge,
  Toast
} from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'
import iconShopCart from '../images/icon-shop-cart.png'

export default defineComponent({
  name: 'goods-detail',
  data() {
    const query = this.$route.query
    return {
      id: query.id,
      albumPics: [],
      product: {} as any,
      radio: '',
      skuStockListTemp: [],
      detailMobileHtml: '',
      loading: 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)
          let str = ''
          spData.forEach((sp: any) => {
            str += `${sp.value}`
          })
          item.spDataJson = str
        } else {
          item.spDataJson = '默认'
        }
      })
      return skuStockList
    }
  },
  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.albumPics
        ? result.product.albumPics.split(',')
        : [result.product.pic]
      this.product = result.product
      this.skuStockListTemp = result.skuStockList || []
      this.detailMobileHtml = result.product.detailMobileHtml
    } catch {}
  },
  methods: {
    onPreview(index: number) {
      // 图片预览
      ImagePreview({
        images: this.albumPics,
        startPosition: index,
        closeable: true
      })
    },
    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
      })
    },
    onBuy() {
      // 购买
      if (!this.radio) {
        return Toast('请选择规格')
      }
      console.log(true)
    }
  },
  render() {
    const product = this.product
    return (
      <div class={styles.goodsDetail}>
        <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(product.price)}
                  </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}>
            <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 && (
          <ActionBar class={styles.actionBar}>
            <ActionBarIcon
              icon="cart-o"
              // text="购物车"
              v-slots={{
                icon: () => <Icon name={iconShopCart} size={30} />
              }}
            />
            <div class={styles.buyGroup}>
              <ActionBarButton
                type="primary"
                class={styles.addCertBtn}
                text="加入购物车"
              />
              <ActionBarButton
                type="primary"
                text="立即购买"
                onClick={this.onBuy}
              />
            </div>
          </ActionBar>
        )}
      </div>
    )
  }
})