|
|
@@ -1,431 +1,446 @@
|
|
|
-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 AddGoodsCart from '../modal/add-goods-cart'
|
|
|
-import ColHeader from '@/components/col-header'
|
|
|
-import iconShare from '../images/icon-share.svg'
|
|
|
-import ColShare from '@/components/col-share'
|
|
|
-import { state } from '@/state'
|
|
|
-import { useEventTracking } from '@/helpers/hooks'
|
|
|
-
|
|
|
-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
|
|
|
- },
|
|
|
-
|
|
|
- shareUrl() {
|
|
|
- // 分享链接
|
|
|
- const productId = this.product.id as any
|
|
|
- if (browser().isApp) {
|
|
|
- return `${location.origin}/teacher/#/shareMall?bizId=${productId}&userId=${state.user.data.userId}&userType=${state.platformType}`
|
|
|
- } else {
|
|
|
- return `${location.origin}/teacher.html#/shareMall?bizId=${productId}&userId=${state.user.data.userId}&userType=${state.platformType}`
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- 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()
|
|
|
- useEventTracking('商品详情')
|
|
|
- },
|
|
|
- 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)
|
|
|
- const sharePic = this.product.pic + '?v=' + Date.now()
|
|
|
- return (
|
|
|
- <div class={styles.goodsDetail}>
|
|
|
- <ColHeader
|
|
|
- v-slots={{
|
|
|
- right: () => (
|
|
|
- <div
|
|
|
- class={styles.shareBtn}
|
|
|
- onClick={() => (this.shareShow = true)}
|
|
|
- >
|
|
|
- <Icon name={iconShare} size={14} color="#666" />
|
|
|
- <span style={{ marginLeft: '3px' }}>分享</span>
|
|
|
- </div>
|
|
|
- )
|
|
|
- }}
|
|
|
- />
|
|
|
- <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"
|
|
|
- text="立即购买"
|
|
|
- onClick={() => this.onShowCart('cartConfirm')}
|
|
|
- />
|
|
|
- </div>
|
|
|
- )
|
|
|
- }}
|
|
|
- >
|
|
|
- <Badge
|
|
|
- content={this.cartCount}
|
|
|
- showZero={false}
|
|
|
- onClick={() => {
|
|
|
- this.$router.push('/cart')
|
|
|
- }}
|
|
|
- >
|
|
|
- <Icon name={iconShopCart} size={30} />
|
|
|
- </Badge>
|
|
|
- </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>
|
|
|
-
|
|
|
- <Popup
|
|
|
- style={{ background: 'transparent' }}
|
|
|
- show={this.shareShow}
|
|
|
- onClose={() => (this.shareShow = false)}
|
|
|
- >
|
|
|
- <ColShare
|
|
|
- shareUrl={this.shareUrl}
|
|
|
- teacherId={state.user.data.userId}
|
|
|
- shareType="mall"
|
|
|
- >
|
|
|
- <div class={styles.shareWrap}>
|
|
|
- <div class={styles.shareLeft}>
|
|
|
- <img
|
|
|
- crossorigin="anonymous"
|
|
|
- class={styles.sharePic}
|
|
|
- src={sharePic}
|
|
|
- ></img>
|
|
|
- </div>
|
|
|
- <div class={styles.shareRight}>
|
|
|
- <div class={styles.shareShopTitle}>{this.product.name}</div>
|
|
|
- {selectSku ? (
|
|
|
- <div class={styles.shareShopDes}>{selectSku.sku}</div>
|
|
|
- ) : null}
|
|
|
- <div class={styles.shareShopValue}>
|
|
|
- <span class={styles.shareShopPrice}>
|
|
|
- {moneyFormat(this.getPrice)}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- {/* <Card
|
|
|
- price={this.getPrice}
|
|
|
- desc={selectSku.sku}
|
|
|
- title={this.product.name}
|
|
|
- thumb={this.product.pic}
|
|
|
- /> */}
|
|
|
- </div>
|
|
|
- </ColShare>
|
|
|
- </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 AddGoodsCart from '../modal/add-goods-cart'
|
|
|
+import ColHeader from '@/components/col-header'
|
|
|
+import iconShare from '../images/icon-share.svg'
|
|
|
+import ColShare from '@/components/col-share'
|
|
|
+import { state } from '@/state'
|
|
|
+import { useEventTracking } from '@/helpers/hooks'
|
|
|
+
|
|
|
+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
|
|
|
+ },
|
|
|
+
|
|
|
+ shareUrl() {
|
|
|
+ // 分享链接
|
|
|
+ const productId = this.product.id as any
|
|
|
+ if (browser().isApp) {
|
|
|
+ return `${location.origin}/teacher/#/shareMall?bizId=${productId}&userId=${state.user.data.userId}&userType=${state.platformType}&p=tenant`
|
|
|
+ } else {
|
|
|
+ return `${location.origin}/teacher.html#/shareMall?bizId=${productId}&userId=${state.user.data.userId}&userType=${state.platformType}&p=tenant`
|
|
|
+ }
|
|
|
+ },
|
|
|
+ platformStatus() {
|
|
|
+ const userInfo = state.user.data as any
|
|
|
+ // 是机构学生 并且 是机构老师分享
|
|
|
+ const query = this.$route.query
|
|
|
+ return userInfo.tenantId > 0 && query.p == 'tenant'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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()
|
|
|
+ useEventTracking('商品详情')
|
|
|
+ },
|
|
|
+ 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)
|
|
|
+ const sharePic = this.product.pic + '?v=' + Date.now()
|
|
|
+ return (
|
|
|
+ <div class={styles.goodsDetail}>
|
|
|
+ <ColHeader
|
|
|
+ v-slots={{
|
|
|
+ right: () => (
|
|
|
+ <div
|
|
|
+ class={styles.shareBtn}
|
|
|
+ onClick={() => (this.shareShow = true)}
|
|
|
+ >
|
|
|
+ <Icon name={iconShare} size={14} color="#666" />
|
|
|
+ <span style={{ marginLeft: '3px' }}>分享</span>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <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="加入购物车"
|
|
|
+ disabled={this.platformStatus}
|
|
|
+ onClick={() => this.onShowCart()}
|
|
|
+ />
|
|
|
+ <ActionBarButton
|
|
|
+ type="primary"
|
|
|
+ text="立即购买"
|
|
|
+ disabled={this.platformStatus}
|
|
|
+ onClick={() => this.onShowCart('cartConfirm')}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Badge
|
|
|
+ content={this.cartCount}
|
|
|
+ showZero={false}
|
|
|
+ onClick={() => {
|
|
|
+ if (this.platformStatus) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$router.push('/cart')
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Icon
|
|
|
+ name={iconShopCart}
|
|
|
+ size={30}
|
|
|
+ class={this.platformStatus && styles.cartDisabled}
|
|
|
+ />
|
|
|
+ </Badge>
|
|
|
+ </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>
|
|
|
+
|
|
|
+ <Popup
|
|
|
+ style={{ background: 'transparent' }}
|
|
|
+ show={this.shareShow}
|
|
|
+ onClose={() => (this.shareShow = false)}
|
|
|
+ >
|
|
|
+ <ColShare
|
|
|
+ shareUrl={this.shareUrl}
|
|
|
+ teacherId={state.user.data.userId}
|
|
|
+ shareType="mall"
|
|
|
+ >
|
|
|
+ <div class={styles.shareWrap}>
|
|
|
+ <div class={styles.shareLeft}>
|
|
|
+ <img
|
|
|
+ crossorigin="anonymous"
|
|
|
+ class={styles.sharePic}
|
|
|
+ src={sharePic}
|
|
|
+ ></img>
|
|
|
+ </div>
|
|
|
+ <div class={styles.shareRight}>
|
|
|
+ <div class={styles.shareShopTitle}>{this.product.name}</div>
|
|
|
+ {selectSku ? (
|
|
|
+ <div class={styles.shareShopDes}>{selectSku.sku}</div>
|
|
|
+ ) : null}
|
|
|
+ <div class={styles.shareShopValue}>
|
|
|
+ <span class={styles.shareShopPrice}>
|
|
|
+ {moneyFormat(this.getPrice)}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ {/* <Card
|
|
|
+ price={this.getPrice}
|
|
|
+ desc={selectSku.sku}
|
|
|
+ title={this.product.name}
|
|
|
+ thumb={this.product.pic}
|
|
|
+ /> */}
|
|
|
+ </div>
|
|
|
+ </ColShare>
|
|
|
+ </Popup>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+})
|
