ZF sun
5b7351dcd2
1. 修复cart页面unload时调用不存在方法的报错 2. 适配鸿蒙themeColor绑定和$nextTick兼容问题 3. 给多处逻辑添加try/catch防止页面空白 4. 补全v-for循环的key属性
788 lines
32 KiB
Vue
788 lines
32 KiB
Vue
<template>
|
||
<!-- 鸿蒙兼容: themeColor 是 CSS 变量字符串, 鸿蒙 JSVM 早期版本对 :style="字符串" 处理可能不稳.
|
||
兜底: 只有非空字符串才绑定 :style. -->
|
||
<view :style="themeColor || undefined">
|
||
<!-- #ifndef H5 -->
|
||
<!-- <view class="page-header" v-if="goodsSkuDetail && goodsSkuDetail.config && goodsSkuDetail.config.nav_bar_switch == 0">
|
||
<ns-navbar :data="navbarData" :isBack="!isTabRootPage"></ns-navbar>
|
||
</view> -->
|
||
<!-- #endif -->
|
||
|
||
<goods-detail-view :goodsSkuDetail="goodsSkuDetail" ref="goodsDetailView" @aiChatClick="sendToAIChat(goodsSkuDetail)">
|
||
<!-- 价格区域 -->
|
||
<template v-slot:price>
|
||
<!-- 限时折扣 -->
|
||
<view v-if="showDiscount && goodsSkuDetail.discountTimeMachine" class="goods-promotion">
|
||
<view class="price-info">
|
||
<view class="icon-box"><text class="iconfont icon-tutechan"></text></view>
|
||
<view class="price-box">
|
||
<view class="promotion-text">{{ $lang('goods.detail.limitedTimeDiscount') }}</view>
|
||
<view class="sale-num" v-if="goodsSkuDetail.sale_show">{{ $lang('goods.detail.sold') }}{{ goodsSkuDetail.sale_num }}{{ goodsSkuDetail.unit }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="countdown">
|
||
<view class="txt">{{ $lang('goods.detail.countdownEndsIn') }}</view>
|
||
<view class="clockrun">
|
||
<uni-count-down
|
||
:day="goodsSkuDetail.discountTimeMachine.d"
|
||
:hour="goodsSkuDetail.discountTimeMachine.h"
|
||
:minute="goodsSkuDetail.discountTimeMachine.i"
|
||
:second="goodsSkuDetail.discountTimeMachine.s"
|
||
splitorColor="#ffffff"
|
||
backgroundColor="#ffffff"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="group-wrap padding-top">
|
||
<view class="goods-module-wrap">
|
||
|
||
<block v-if="goodsSkuDetail.isinformation == 0">
|
||
<template v-if="showDiscount">
|
||
<text class="price-symbol price-font">{{ $lang('common.currencySymbol') }}</text>
|
||
<text class="price price-font">{{ parseFloat(goodsSkuDetail.discount_price).toFixed(2).split('.')[0] }}</text>
|
||
<text class="price-symbol price-font">.{{ parseFloat(goodsSkuDetail.discount_price).toFixed(2).split('.')[1] }}</text>
|
||
</template>
|
||
<template v-else>
|
||
<template v-if="goodsSkuDetail.member_price > 0">
|
||
<text class="price-symbol price-font">{{ $lang('common.currencySymbol') }}</text>
|
||
<text class="price price-font">{{ parseFloat(goodsSkuDetail.member_price).toFixed(2).split('.')[0] }}</text>
|
||
<text class="price-symbol price-font">.{{ parseFloat(goodsSkuDetail.member_price).toFixed(2).split('.')[1] }}</text>
|
||
<view class="member-vip-wrap">
|
||
<image :src="$util.img('public/uniapp/goods/member_vip.png')" mode="aspectFit" show-menu-by-longpress/>
|
||
</view>
|
||
<view class="member-price-wrap" v-if="!goodsSkuDetail.market_price_show">
|
||
<text class="unit price-font">{{ $lang('goods.detail.originalPrice') }}</text>
|
||
<text class="unit price-font">{{ $lang('common.currencySymbol') }}</text>
|
||
<text class="money price-font">{{ goodsSkuDetail.price }}</text>
|
||
</view>
|
||
</template>
|
||
<template v-else>
|
||
<text class="price-symbol price-font">{{ $lang('common.currencySymbol') }}</text>
|
||
<text class="price price-font">{{ parseFloat(goodsSkuDetail.price).toFixed(2).split('.')[0] }}</text>
|
||
<text class="price-symbol price-font">.{{ parseFloat(goodsSkuDetail.price).toFixed(2).split('.')[1] }}</text>
|
||
</template>
|
||
</template>
|
||
<view class="market-price-wrap" v-if="goodsSkuDetail.market_price_show">
|
||
<text class="unit price-font" v-if="(showDiscount && goodsSkuDetail.price > 0) || goodsSkuDetail.market_price > 0">
|
||
{{ $lang('common.currencySymbol') }}
|
||
</text>
|
||
<text class="money price-font" v-if="showDiscount && goodsSkuDetail.price > 0">{{ goodsSkuDetail.price }}</text>
|
||
<text class="money price-font" v-else-if="goodsSkuDetail.market_price > 0">{{ goodsSkuDetail.market_price }}</text>
|
||
</view>
|
||
<view class="follow-and-share">
|
||
<text class="follow iconfont icon-share" @click="openSharePopup()"></text>
|
||
<text class="share iconfont" @click="editCollection()" :class="whetherCollection == 1 ? 'icon-likefill color-base-text' : 'icon-guanzhu'"></text>
|
||
</view>
|
||
</block>
|
||
<block v-else>
|
||
<template>
|
||
</template>
|
||
</block>
|
||
</view>
|
||
|
||
<view class="goods-module-wrap info">
|
||
<text class="sku-name-wrap">{{ isEnEnv ? goodsSkuDetail.en_goods_name : goodsSkuDetail.goods_name }}</text>
|
||
<text class="introduction" v-if="goodsSkuDetail.introduction" :style="{ color: goodsSkuDetail.config ? goodsSkuDetail.config.introduction_color : '' }">
|
||
{{ goodsSkuDetail.introduction }}
|
||
</text>
|
||
<view class="goods-tag-list" v-if="goodsSkuDetail.label_name">
|
||
<text class="tag-item">{{ goodsSkuDetail.label_name }}</text>
|
||
</view>
|
||
<view class="logistics-wrap">
|
||
<text v-if="goodsSkuDetail.stock_show">{{$lang('goods.detail.stock')}}: {{ goodsSkuDetail.stock +goodsSkuDetail.unit}}</text>
|
||
<text v-if="goodsSkuDetail.sale_show">{{$lang('goods.detail.sales')}}: {{ goodsSkuDetail.sale_num+goodsSkuDetail.unit }}</text>
|
||
</view>
|
||
<!-- 会员卡 -->
|
||
<!-- <view class="member-card-wrap" @click="$util.redirectTo('/pages_tool/member/card_buy')" v-if="membercard">
|
||
<text class="iconfont icon-huiyuan"></text>
|
||
<view class="info">开通{{ membercard.level_name }}仅需{{ membercard.member_price }}元</view>
|
||
<text class="btn">立即开通</text>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 当前商品参与的营销活动入口 -->
|
||
<view class="group-wrap"><ns-goods-promotion ref="goodsPromotion" promotion="discount"></ns-goods-promotion></view>
|
||
|
||
<view class="group-wrap fenxiao-detail"
|
||
v-if="
|
||
goodsSkuDetail.fenxiao_detail &&
|
||
goodsSkuDetail.fenxiao_detail.words_account &&
|
||
goodsSkuDetail.fenxiao_detail.commission_money > 0 &&
|
||
goodsSkuDetail.fenxiao_detail.is_commission_money == 1
|
||
">
|
||
<view class="title color-base-text">{{$lang('goods.detail.commission')}}</view>
|
||
<view class="commission-ratio">
|
||
<view class="item">
|
||
<view>One {{$lang('goods.detail.commissiontext')}}</view>
|
||
<view class="price-color">
|
||
<text class="unit">{{ $lang('common.currencySymbol') }}</text>
|
||
<text class="money">{{ parseFloat(goodsSkuDetail.fenxiao_detail.commission_money).toFixed(2).split('.')[0] }}</text>
|
||
<text class="unit">.{{ parseFloat(goodsSkuDetail.fenxiao_detail.commission_money).toFixed(2).split('.')[1] }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view class="group-wrap card-info" v-if="goodsSkuDetail.goods_class == 5 && goodsSkuDetail.card_info && goodsSkuDetail.card_info.relation_goods.length">
|
||
<view class="card-title">- 套餐包含以下的服务及商品 -</view>
|
||
<view class="card-desc" v-if="goodsSkuDetail.card_info.card_type == 'timecard' || goodsSkuDetail.card_info.card_type == 'commoncard'">
|
||
{{ goodsSkuDetail.card_info.card_type == 'commoncard' ? '卡项内项目/商品总的可用次数为' + goodsSkuDetail.card_info.common_num + ' ,' : '' }}
|
||
{{ goodsSkuDetail.card_info.card_type == 'timecard' ? '次数不限 ,' : '' }} 有效期为{{
|
||
(goodsSkuDetail.card_info.validity_type == 0 && '永久') ||
|
||
(goodsSkuDetail.card_info.validity_type == 1 && goodsSkuDetail.card_info.validity_day + '天') ||
|
||
(goodsSkuDetail.card_info.validity_type == 2 && $util.timeStampTurnTime(goodsSkuDetail.card_info.validity_time))
|
||
}}
|
||
</view>
|
||
<view class="card-content" :style="{ height: [cardOff ? 'auto' : '198rpx'] }">
|
||
<view class="card-item"
|
||
v-for="(item, index) in goodsSkuDetail.card_info.relation_goods"
|
||
@click="$util.redirectTo('/pages_goods/detail', { goods_id: item.goods_id })"
|
||
>
|
||
<image :src="$util.img(item.sku_image)" mode="aspectFill" show-menu-by-longpress/>
|
||
<view class="content">
|
||
<view class="name multi-hidden">{{ item.sku_name }}</view>
|
||
<view class="price">￥{{ item.price }}</view>
|
||
<text class="num" v-if="goodsSkuDetail.card_info.card_type == 'oncecard'">x{{ item.num }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="card-off" @click="cardOff = !cardOff" v-if="goodsSkuDetail.card_info.relation_goods.length > 1">
|
||
<text>{{ cardOff ? '收起' : '展开' }}</text>
|
||
<text class="icondiy" :class="[cardOff ? 'icon-system-jiantoushang' : 'icon-system-jiantouxia']"></text>
|
||
</view>
|
||
</view> -->
|
||
</template>
|
||
<!--多规格-->
|
||
<template v-slot:skuspec>
|
||
<view class="item selected-sku-spec" @click="buyNow()">
|
||
<view class="label">{{$lang('goods.detail.spec')}}</view>
|
||
<view class="box">
|
||
<text v-for="(item, index) in goodsSkuDetail.sku_spec_format" :key="index">{{ item.spec_name }}/{{ item.spec_value_name }}</text>
|
||
</view>
|
||
<text class="iconfont iconright"></text>
|
||
</view>
|
||
</template>
|
||
<!-- 入口区域 -->
|
||
<!-- <template v-slot:entrance>
|
||
<view class="item coupon" v-if="couponList.length && couponList[0]['useState'] != 2" @click="openCouponPopup()">
|
||
<view class="label">领券</view>
|
||
<view class="coupon-list">
|
||
<view class="coupon-item" v-for="(item, index) in couponList" :key="index" v-if="index < 3 && item.useState != 2">
|
||
<view v-if="item.type == 'reward'">
|
||
{{
|
||
parseFloat(item.at_least) > 0
|
||
? '满' + decimalPointFormat(item.at_least) + '减' + decimalPointFormat(item.money)
|
||
: '无门槛使用' + decimalPointFormat(item.money)
|
||
}}
|
||
</view>
|
||
<view v-else-if="item.type == 'discount'">{{ '满' + decimalPointFormat(item.at_least) + '打' + parseFloat(item.discount)+'折' }}</view>
|
||
</view>
|
||
</view>
|
||
<text class="iconfont icon-right"></text>
|
||
</view>
|
||
|
||
<view class="item selected-sku-spec" v-if="goodsSkuDetail.sku_spec_format" @click="choiceSku">
|
||
<view class="label">选择</view>
|
||
<view class="box">
|
||
<text v-for="(item, index) in goodsSkuDetail.sku_spec_format" :key="index">{{ item.spec_name }}/{{ item.spec_value_name }}</text>
|
||
</view>
|
||
<text class="iconfont icon-right"></text>
|
||
</view>
|
||
<view class="item free" v-if="manjian.rule_json !== null && addonIsExist.manjian" @click="openManjianPopup()">
|
||
<view class="label">促销</view>
|
||
<text class="free-tip color-base-text">满减</text>
|
||
<text class="font-size-base value">{{ manjian.manjian_name }}</text>
|
||
<text class="iconfont icon-right"></text>
|
||
</view>
|
||
</template> -->
|
||
|
||
<!-- 业务区域 -->
|
||
<template v-slot:business>
|
||
<!-- SKU选择 -->
|
||
<ns-goods-sku
|
||
v-if="goodsSkuDetail.goods_id"
|
||
ref="goodsSku"
|
||
@refresh="refreshGoodsSkuDetail"
|
||
:goods-id="goodsSkuDetail.goods_id"
|
||
:goods-detail="goodsSkuDetail"
|
||
:max-buy="goodsSkuDetail.max_buy"
|
||
:min-buy="goodsSkuDetail.min_buy"
|
||
@getSkuId="setSkuId"
|
||
></ns-goods-sku>
|
||
|
||
<!-- 组合套餐 -->
|
||
<view v-if="bundling.length && bundling[0].bl_name && addonIsExist.bundling">
|
||
<view class="group-wrap" @click="openBundlingPopup()">
|
||
<view class="goods-cell" @click="openBundlingPopup()">
|
||
<view class="box">
|
||
<text class="tit">{{ $lang('goods.detail.comboPackage') }}</text>
|
||
<text>{{ bundling[0].bl_name }}</text>
|
||
</view>
|
||
<text class="iconfont icon-right"></text>
|
||
<!-- <view class="more-img-wrap"><image :src="$util.img('public/uniapp/goods/detail_more.png')" mode="aspectFit" show-menu-by-longpress/></view> -->
|
||
</view>
|
||
<scroll-view class="combo-goods-wrap color-tip" scroll-x="true">
|
||
<view class="goods-wrap">
|
||
<view class="goods-item" @click="toGoodsDetail(skuId)" v-if="bundlingType == true">
|
||
<view class="combo-img">
|
||
<image :src="$util.img(goodsSkuDetail.sku_image, { size: 'mid' })" @error="imageError()" show-menu-by-longpress/>
|
||
<view class="price-wrap">
|
||
<text class="unit price-font">{{ $lang('common.currencySymbol') }}</text>
|
||
<text class="price price-font">{{ goodsSkuDetail.price }}</text>
|
||
</view>
|
||
</view>
|
||
<text class="name">{{ isEnEnv ? goodsSkuDetail.en_goods_name : goodsSkuDetail.goods_name }}</text>
|
||
</view>
|
||
<block v-for="(item, index) in bundling[0].bundling_goods" :key="index">
|
||
<template v-if="index < 3">
|
||
<view class="goods-item" @click="toGoodsDetail(item.sku_id)">
|
||
<view class="combo-img">
|
||
<image :src="$util.img(item.sku_image, { size: 'mid' })" @error="bundlingImageError(0, index)" show-menu-by-longpress/>
|
||
<view class="price-wrap">
|
||
<text class="unit price-font">{{ $lang('common.currencySymbol') }}</text>
|
||
<text class="price price-font">{{ item.price }}</text>
|
||
</view>
|
||
</view>
|
||
<text class="name">{{ item.sku_name }}</text>
|
||
</view>
|
||
</template>
|
||
</block>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<view @touchmove.prevent.stop>
|
||
<uni-popup ref="bundlingPopup" type="bottom">
|
||
<view class="bundling-popup-layer popup-layer">
|
||
<view class="head-wrap" @click="closeBundlingPopup()">
|
||
<text>{{ $lang('goods.detail.comboPackage') }}</text>
|
||
<text class="iconfont icon-close"></text>
|
||
</view>
|
||
<scroll-view scroll-y class="bundling-body">
|
||
<view class="bundling-view">
|
||
<block v-for="(item, index) in bundling" :key="index">
|
||
<view class="bundling-item">
|
||
<view class="title" @click="toComoDetail(item.bl_id)">
|
||
<text>{{ item.bl_name }}</text>
|
||
<text class="iconfont icon-right"></text>
|
||
</view>
|
||
<scroll-view scroll-x>
|
||
<view class="goods-wrap">
|
||
<view class="goods-item" @click="toGoodsDetail(skuId)">
|
||
<view class="combo-img">
|
||
<image :src="$util.img(goodsSkuDetail.sku_image, { size: 'mid' })" @error="imageError()" show-menu-by-longpress/>
|
||
<view class="price-wrap">
|
||
<text class="unit price-font">{{ $lang('common.currencySymbol') }}</text>
|
||
<text class="price price-font">{{ goodsSkuDetail.price }}</text>
|
||
</view>
|
||
</view>
|
||
<text class="name">{{ isEnEnv ? goodsSkuDetail.en_goods_name : goodsSkuDetail.goods_name }}</text>
|
||
</view>
|
||
<block v-for="(goods, goods_index) in item.bundling_goods" :key="goods_index">
|
||
<template v-if="goods_index < 3">
|
||
<view class="goods-item" @click="toGoodsDetail(goods.sku_id)">
|
||
<view class="combo-img">
|
||
<image :src="$util.img(goods.sku_image, { size: 'mid' })" @error="bundlingImageError(index, goods_index)" show-menu-by-longpress/>
|
||
<view class="price-wrap">
|
||
<text class="unit price-font">{{ $lang('common.currencySymbol') }}</text>
|
||
<text class="price price-font">{{ goods.price }}</text>
|
||
</view>
|
||
</view>
|
||
<text class="name">{{ goods.sku_name }}</text>
|
||
</view>
|
||
</template>
|
||
</block>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="bundling-price-wrap">
|
||
<text class="label">{{ $lang('goods.detail.comboPrice') }}</text>
|
||
<text class="unit price-color">{{ $lang('common.currencySymbol') }}</text>
|
||
<text class="price price-color">{{ item.bl_price }}</text>
|
||
<button type="primary" size="mini" class="mini" @click="toComoDetail(item.bl_id)">{{ $lang('goods.detail.buynow') }}</button>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 优惠券 -->
|
||
<view @touchmove.prevent.stop>
|
||
<uni-popup ref="couponPopup" type="bottom">
|
||
<view class="goods-coupon-popup-layer popup-layer">
|
||
<view class="head-wrap" @click="closeCouponPopup()">
|
||
<text>{{ $lang('goods.detail.coupons') }}</text>
|
||
<text class="iconfont icon-close"></text>
|
||
</view>
|
||
<scroll-view class="coupon-body" scroll-y>
|
||
<view class="coupon-item ns-gradient-diy-goods-list" v-for="(item, index) in couponList" :key="index" v-if="hackReset">
|
||
<view class="coupon-info" :style="{ backgroundColor: item.useState == 2 ? '#F2F2F2' : 'var(--main-color-shallow)' }">
|
||
<view class="info-wrap" :class="{ disabled: item.useState == 2 }">
|
||
<image class="coupon-line" mode="heightFix" :src="$util.img('public/uniapp/coupon/coupon_line.png')" show-menu-by-longpress></image>
|
||
<view class="coupon-money">
|
||
<template v-if="item.type == 'reward'">
|
||
<text class="unit">{{ $lang('common.currencySymbol') }}</text>
|
||
<text class="money">{{ parseFloat(item.money) }}</text>
|
||
</template>
|
||
<template v-else-if="item.type == 'discount'">
|
||
<text class="money">{{ parseFloat(item.discount) }}</text>
|
||
<text class="unit">{{ $lang('goods.detail.discountOff') }}</text>
|
||
</template>
|
||
<view class="at-least">
|
||
<template v-if="item.at_least > 0">
|
||
{{ $lang('goods.detail.minSpendAvailable', { amount: item.at_least }) }}
|
||
</template>
|
||
<template v-else>
|
||
{{ $lang('goods.detail.noThreshold') }}
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="desc-wrap">
|
||
<view class="coupon-name">{{ item.coupon_name }}</view>
|
||
<view v-if="item.type == 'discount' && item.discount_limit > 0" class="limit">{{ $lang('goods.detail.maxDiscount', { symbol: $lang('common.currencySymbol'), amount: item.discount_limit }) }}</view>
|
||
<view class="time font-size-goods-tag" v-if="item.validity_type == 0">{{ $lang('goods.detail.validUntilDate', { date: $util.timeStampTurnTime(item.end_time) }) }}</view>
|
||
<view class="time font-size-goods-tag" v-else-if="item.validity_type == 1">{{ $lang('goods.detail.validForDays', { days: item.fixed_term }) }}</view>
|
||
<view class="time font-size-goods-tag" v-else>{{ $lang('goods.detail.validPermanent') }}</view>
|
||
</view>
|
||
|
||
<button type="primary" v-if="item.useState == 2" disabled>{{ $lang('goods.detail.couponSoldOut') }}</button>
|
||
<button type="primary" v-else-if="item.useState == 1" disabled>{{ $lang('goods.detail.couponClaimed') }}</button>
|
||
<button type="primary" v-else @click="receiveCoupon(item)">{{ $lang('goods.detail.couponReceive') }}</button>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="button-box"><button type="primary" @click="closeCouponPopup()">{{ $lang('goods.detail.confirm') }}</button></view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
|
||
<!-- 促销 -->
|
||
<view @touchmove.prevent.stop v-if="addonIsExist.manjian">
|
||
<uni-popup ref="manjianPopup" type="bottom">
|
||
<view class="manjian-popup-layer popup-layer">
|
||
<view class="head-wrap" @click="closeManjianPopup()">
|
||
<text>{{ $lang('goods.detail.promotion') }}</text>
|
||
<text class="iconfont icon-close"></text>
|
||
</view>
|
||
<scroll-view scroll-y class="manjian-body">
|
||
<view class="item" v-if="manjian.manjian != undefined" style="display: flex;">
|
||
<view class="free-tip color-base-text color-base-border">{{ $lang('goods.detail.fullReduction') }}</view>
|
||
<text class="font-size-base">{{ manjian.manjian }}</text>
|
||
</view>
|
||
<view class="item" v-if="manjian.mansong != undefined">
|
||
<text class="free-tip color-base-text color-base-border">{{ $lang('goods.detail.fullGift') }}</text>
|
||
<text class="font-size-base">{{ manjian.mansong }}</text>
|
||
</view>
|
||
<view class="item" v-if="manjian.free_shipping != undefined" style="display: flex;">
|
||
<view class="free-tip color-base-text color-base-border">{{ $lang('goods.detail.freeShipping') }}</view>
|
||
<text class="font-size-base">{{ manjian.free_shipping }}</text>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="button-box"><button type="primary" @click="closeManjianPopup()">{{ $lang('goods.detail.confirm') }}</button></view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
<!--商品留言弹窗-->
|
||
<view class="goods-sku" @touchmove.prevent.stop>
|
||
<uni-popup ref="informationPopup" type="bottom">
|
||
<view class="manjian-popup-layer popup-layer" :style="{ height: FormHeight }">
|
||
<view class="head-wrap" @click="closeinformationPopup()">
|
||
<text>{{ $lang('goods.detail.productMessage') }}</text>
|
||
<text class="iconfont icon-close"></text>
|
||
</view>
|
||
<scroll-view scroll-y class="manjian-body" >
|
||
<!-- <view class="item" v-if="manjian.manjian != undefined" style="display: flex;">
|
||
<view class="free-tip color-base-text color-base-border">满减</view>
|
||
<text class="font-size-base">{{ manjian.manjian }}</text>
|
||
</view>
|
||
<view class="item" v-if="manjian.mansong != undefined">
|
||
<text class="free-tip color-base-text color-base-border">满送</text>
|
||
<text class="font-size-base">{{ manjian.mansong }}</text>
|
||
</view>
|
||
<view class="item" v-if="manjian.free_shipping != undefined" style="display: flex;">
|
||
<view class="free-tip color-base-text color-base-border">包邮</view>
|
||
<text class="font-size-base">{{ manjian.free_shipping }}</text>
|
||
</view> -->
|
||
<!-- v-if="goodsSkuDetail.goodsForm" -->
|
||
<view style="padding: 0 30rpx;">
|
||
<!-- 表单暂无字段时的友好提示, 避免"打开弹窗却什么都不显示"困惑用户 -->
|
||
<view v-if="!formDiyValue || !formDiyValue.jsonData || !formDiyValue.jsonData.length" class="form-empty" style="padding: 60rpx 0; text-align: center; color: #999;">
|
||
{{ $lang('goods.detail.formEmptyTip') }}
|
||
</view>
|
||
<diy-form
|
||
v-else
|
||
:value="formDiyValue"
|
||
dataMode="raw"
|
||
:show-submit="false"
|
||
ref="form"
|
||
></diy-form>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="button-box"><button type="primary" @click="saveubfirnation()">{{ $lang('goods.detail.confirm') }}</button></view>
|
||
</view>
|
||
</uni-popup>
|
||
<!-- <uni-popup ref="informationPopup" type="bottom" class="sku-layer" @change="popclose">
|
||
<view class="sku-info">
|
||
<view class="body-item">
|
||
<scroll-view scroll-y class="wrap">
|
||
<ns-form :data="goodsSkuDetail.goodsForm" v-if="goodsSkuDetail.goodsForm" ref="form"></ns-form>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</uni-popup> -->
|
||
</view>
|
||
<!---->
|
||
</template>
|
||
|
||
<!-- 操作区域 -->
|
||
<template v-slot:action>
|
||
<!-- 商品底部导航 -->
|
||
<ns-goods-action :safeArea="isIphoneX">
|
||
|
||
<template v-if="goodsSkuDetail.goods_state == 1">
|
||
|
||
<ns-goods-action-button
|
||
class="goods-action-button active3"
|
||
:disabled-text="$lang('goods.detail.status')"
|
||
:disabled="true"
|
||
v-if="goodsSkuDetail.store_goods_status != undefined && goodsSkuDetail.store_goods_status != 1"
|
||
/>
|
||
<block v-else>
|
||
<ns-goods-action-icon :text="$lang('goods.detail.home')" icon="icon-shouye1" @click="goHome" />
|
||
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<ns-goods-action-icon
|
||
:text="$lang('goods.detail.cart')"
|
||
:cornerMarkBg="themeStyle.goods_cart_num_corner"
|
||
icon="icon-gouwuche2"
|
||
:corner-mark="cartNumber > 0 ? cartNumber + '' : ''"
|
||
@click="goCart"
|
||
/>
|
||
<ns-goods-action-icon :text="$lang('goods.detail.kefu')" icon="icox icox-kefu" :send-data="contactData" :chatParam="chatRoomParams" />
|
||
<!-- #endif -->
|
||
<!-- #ifdef H5 -->
|
||
<ns-goods-action-icon :text="$lang('goods.detail.follow')" :icon="whetherCollection == 1 ? 'icon-likefill color-base-text' : 'icon-guanzhu'" @click="editCollection" />
|
||
<!-- #endif -->
|
||
<block v-if="goodsSkuDetail.isinformation >= 1">
|
||
|
||
<ns-goods-action-button v-if="goodsSkuDetail.isinformation == 1" class="goods-action-button active3" disabled-text="" backgroundColor="#54c952" @click="phoneClick(goodsSkuDetail.goods_mobile)" :text="$lang('goods.detail.make')" :disabled="false" />
|
||
<ns-goods-action-button v-if="goodsSkuDetail.isinformation == 2" class="goods-action-button active3" disabled-text="" backgroundColor="#54c952" @click="showinformation" :text="$lang('goods.detail.leave')" :disabled="false" />
|
||
<ns-goods-action-button v-if="goodsSkuDetail.isinformation == 3" class="goods-action-button active3" disabled-text="" backgroundColor="#54c952" @click="goToAIChat" :text="$lang('goods.detail.aiCustomerService')" :disabled="false" />
|
||
<!-- <ns-goods-action-button v-if="goodsSkuDetail.isinformation == 2" class="goods-action-button active3" disabled-text="" backgroundColor="#54c952" @click="buyNow" text="商品留言" :disabled="false" /> -->
|
||
|
||
</block>
|
||
<block v-else>
|
||
<block v-if="goodsSkuDetail.stock == 0 && !goodsSkuDetail.sku_spec_format">
|
||
<ns-goods-action-button class="goods-action-button active3" :disabled-text="$lang('goods.detail.sellout')" :disabled="true" />
|
||
</block>
|
||
<block v-else-if="
|
||
goodsSkuDetail.is_limit == 1 &&
|
||
goodsSkuDetail.limit_type == 2 &&
|
||
goodsSkuDetail.max_buy != 0 &&
|
||
goodsSkuDetail.purchased_num >= goodsSkuDetail.max_buy
|
||
">
|
||
<ns-goods-action-button class="goods-action-button active3" :disabled-text="$lang('goods.detail.max')" :disabled="true" />
|
||
</block>
|
||
<block v-else>
|
||
<ns-goods-action-button
|
||
class="goods-action-button"
|
||
:text="$lang('goods.detail.addcart')"
|
||
:backgroundColor="themeStyle.goods_btn_color_shallow"
|
||
@click="joinCart"
|
||
v-if="goodsSkuDetail.is_virtual == 0"
|
||
/>
|
||
<ns-goods-action-button
|
||
class="goods-action-button"
|
||
:backgroundColor="themeStyle.goods_btn_color"
|
||
:textColor="themeStyle.btn_text_color"
|
||
:text="$lang('goods.detail.buynow')"
|
||
@click="buyNow"
|
||
/>
|
||
</block>
|
||
|
||
</block>
|
||
</block>
|
||
|
||
</template>
|
||
<template v-else>
|
||
<ns-goods-action-button class="goods-action-button active3" :disabled-text="$lang('goods.detail.status')" :disabled="true" />
|
||
</template>
|
||
|
||
|
||
|
||
</ns-goods-action>
|
||
</template>
|
||
</goods-detail-view>
|
||
<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
|
||
<ns-login ref="login"></ns-login>
|
||
<loading-cover ref="loadingCover"></loading-cover>
|
||
|
||
<!-- 隐私弹窗 -->
|
||
<privacy-popup ref="privacyPopup"></privacy-popup>
|
||
|
||
<!-- 联系电话弹窗 -->
|
||
<uni-popup ref="contactPopup" type="center">
|
||
<view class="contact-popup">
|
||
<view class="contact-content">
|
||
<text class="contact-text">{{ $lang('goods.detail.dialOnMobile', { phone: '021-51815181' }) }}</text>
|
||
</view>
|
||
<view class="contact-buttons">
|
||
<button class="contact-btn cancel-btn" @click="closeContactPopup">{{ $lang('goods.detail.cancel') }}</button>
|
||
<button class="contact-btn copy-btn" @click="copyPhoneNumber">{{ $lang('goods.detail.copyToClipboard') }}</button>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import scroll from '@/common/js/scroll-view.js';
|
||
import base from '@/common/js/goods_detail_base.js';
|
||
import detail from './public/js/detail.js';
|
||
|
||
import goodsDetailView from './_components/goods-detail-view/goods-detail-view.vue';
|
||
import nsGoodsPromotion from './_components/ns-goods-promotion/ns-goods-promotion.vue';
|
||
|
||
export default {
|
||
components: {
|
||
goodsDetailView,
|
||
nsGoodsPromotion
|
||
},
|
||
mixins: [base, detail, scroll],
|
||
computed: {
|
||
// diy-form raw 模式 value：banner/tip 由独立列归一化后的 goods_form_* 提供，
|
||
// 与 formdata.vue 的 diyValue 同源；本页 :show-submit="false" 走外部"确定"按钮提交。
|
||
formDiyValue() {
|
||
const sku = this.goodsSkuDetail || {};
|
||
return {
|
||
jsonData: sku.goods_form || [],
|
||
formConfig: sku.goods_form_config || {},
|
||
show_banner: sku.goods_form_show_banner === true,
|
||
form_banner: sku.goods_form_banner || '',
|
||
show_tip: sku.goods_form_show_tip === true,
|
||
form_tip: sku.goods_form_tip || ''
|
||
};
|
||
}
|
||
},
|
||
methods: {
|
||
/**
|
||
* 发送商品信息到智能客服
|
||
* @param {Object} item 商品信息
|
||
*/
|
||
sendToAIChat(item) {
|
||
this.$refs.contactPopup.open();
|
||
},
|
||
|
||
/**
|
||
* 跳转到智能客服页面
|
||
*/
|
||
goToAIChat() {
|
||
const productInfo = {
|
||
goods_id: this.goodsSkuDetail.goods_id || '',
|
||
goods_name: this.goodsSkuDetail.goods_name || '',
|
||
price: this.goodsSkuDetail.discount_price || this.goodsSkuDetail.member_price || this.goodsSkuDetail.price || '',
|
||
image: this.goodsSkuDetail.sku_image || '',
|
||
category_id: this.goodsSkuDetail.category_id || ''
|
||
};
|
||
|
||
uni.setStorageSync('selectedProduct', productInfo);
|
||
|
||
uni.navigateTo({
|
||
url: '/pages_tool/ai-chat/index'
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 关闭联系电话弹窗
|
||
*/
|
||
closeContactPopup() {
|
||
this.$refs.contactPopup.close();
|
||
},
|
||
|
||
/**
|
||
* 复制电话号码到剪切板
|
||
*/
|
||
copyPhoneNumber() {
|
||
uni.setClipboardData({
|
||
data: '021-51815181',
|
||
success: () => {
|
||
uni.showToast({
|
||
title: this.$lang('goods.detail.copySuccess'),
|
||
icon: 'success'
|
||
});
|
||
this.closeContactPopup();
|
||
}
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import '@/common/css/goods_detail.scss';
|
||
@import './public/css/detail.scss';
|
||
|
||
.sku-info {
|
||
max-height: 75vh;
|
||
height: 45vh;
|
||
position: relative;
|
||
z-index: 999;
|
||
}
|
||
|
||
.contact-popup {
|
||
width: 600rpx;
|
||
background: #ffffff;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.contact-content {
|
||
padding: 60rpx 40rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.contact-text {
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.contact-buttons {
|
||
display: flex;
|
||
border-top: 1px solid #e5e5e5;
|
||
}
|
||
|
||
.contact-btn {
|
||
flex: 1;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
border: none;
|
||
background: transparent;
|
||
margin: 0;
|
||
padding: 0;
|
||
border-radius: 0;
|
||
}
|
||
|
||
.contact-btn::after {
|
||
border: none;
|
||
}
|
||
|
||
.cancel-btn {
|
||
color: #333333;
|
||
background: #ffffff;
|
||
border-right: 1px solid #e5e5e5;
|
||
}
|
||
|
||
.copy-btn {
|
||
color: #ffffff;
|
||
background: #54c952;
|
||
}
|
||
|
||
</style>
|
||
<style scoped>
|
||
::v-deep .action-icon-wrap .iconfont.icon-shouye1 {
|
||
font-size: 40rpx;
|
||
}
|
||
::v-deep .uni-video-cover {
|
||
background: none;
|
||
}
|
||
|
||
::v-deep .uni-video-cover-duration {
|
||
display: none;
|
||
}
|
||
|
||
::v-deep .uni-video-cover-play-button {
|
||
border-radius: 50%;
|
||
border: 4rpx solid #fff;
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
background-size: 30%;
|
||
}
|
||
|
||
.poster-layer >>> .uni-popup__wrapper-box {
|
||
max-height: initial !important;
|
||
}
|
||
|
||
::v-deep .sku-layer .uni-popup__wrapper-box {
|
||
overflow-y: initial !important;
|
||
}
|
||
|
||
.goods-promotion .countdown .clockrun >>> .uni-countdown__number {
|
||
min-width: 32rpx;
|
||
height: 32rpx;
|
||
text-align: center;
|
||
line-height: 32rpx;
|
||
border-radius: 4px;
|
||
display: inline-block;
|
||
padding: 4rpx;
|
||
margin: 0;
|
||
border: none;
|
||
}
|
||
|
||
.goods-promotion .countdown .clockrun >>> .uni-countdown__splitor {
|
||
width: 10rpx;
|
||
height: 32rpx;
|
||
line-height: 36rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.goods-promotion .countdown .clockrun >>> .uni-countdown__splitor.day {
|
||
width: initial;
|
||
}
|
||
|
||
::v-deep .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
||
max-height: unset !important;
|
||
}
|
||
|
||
::v-deep .goods-action-button.active1 {
|
||
padding-left: 10px;
|
||
}
|
||
|
||
::v-deep .goods-action-button.active2 {
|
||
padding-right: 10px;
|
||
}
|
||
|
||
::v-deep .goods-action-button.active3 {
|
||
padding: 0 10px;
|
||
}
|
||
|
||
::v-deep .goods-action-button.active4 {
|
||
padding: 0 10px;
|
||
}
|
||
::v-deep .uni-popup__wrapper.bottom {
|
||
border-radius: 24rpx 24rpx 0 0;
|
||
}
|
||
|
||
::v-deep .goods-action-button.active1 .action-buttom-wrap {
|
||
height: 72rpx;
|
||
line-height: 72rpx;
|
||
}
|
||
|
||
::v-deep .goods-action-button.active2 .action-buttom-wrap {
|
||
height: 72rpx;
|
||
line-height: 72rpx;
|
||
}
|
||
|
||
::v-deep .goods-action-button.active3 .action-buttom-wrap {
|
||
height: 72rpx;
|
||
line-height: 72rpx;
|
||
margin: 20rpx 0;
|
||
}
|
||
|
||
::v-deep .goods-action-button.active4 .action-buttom-wrap {
|
||
height: 72rpx;
|
||
line-height: 72rpx;
|
||
}
|
||
|
||
</style>
|