chore(组件): 全部使用easycom来处理组件问题
This commit is contained in:
@@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<view :style="themeColor">
|
||||
<view class="container">
|
||||
<scroll-view class="scroll-view" :scroll-y="true" :show-scrollbar="false" :refresher-enabled="true" :refresher-triggered="refresherTriggered" @refresherrefresh="onRefresh">
|
||||
<scroll-view class="scroll-view" :scroll-y="true" :show-scrollbar="false" :refresher-enabled="true"
|
||||
:refresher-triggered="refresherTriggered" @refresherrefresh="onRefresh">
|
||||
<block v-if="hasData">
|
||||
<view class="cart-header" v-if="cartData.length">
|
||||
<view class="num-wrap">共{{ cartData[0].cartList.length }}种商品</view>
|
||||
@@ -20,51 +21,67 @@
|
||||
<text class="iconfont icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="store-wrap" v-if="globalStoreConfig && globalStoreConfig.store_business == 'store' && globalStoreInfo">
|
||||
<view class="store-wrap"
|
||||
v-if="globalStoreConfig && globalStoreConfig.store_business == 'store' && globalStoreInfo">
|
||||
<text class="iconfont icon-dianpu"></text>
|
||||
<text class="name">{{globalStoreInfo.store_name}}</text>
|
||||
<text class="name">{{ globalStoreInfo.store_name }}</text>
|
||||
</view>
|
||||
<block v-for="(item, cartIndex) in siteItem.cartList" :key="cartIndex">
|
||||
<view class="cart-goods" @touchstart="touchS($event)" @touchend="touchE($event, item)">
|
||||
<view class="goods-wrap" :class="{ edit: item.edit }">
|
||||
<view class="iconfont" :class="item.checked ? 'icon-yuan_checked color-base-text' : 'icon-yuan_checkbox'" @click="singleElection(siteIndex, cartIndex)"></view>
|
||||
<view class="iconfont"
|
||||
:class="item.checked ? 'icon-yuan_checked color-base-text' : 'icon-yuan_checkbox'"
|
||||
@click="singleElection(siteIndex, cartIndex)"></view>
|
||||
<view @click="toGoodsDetail(item)" class="goods-img">
|
||||
<image :src="$util.img(item.sku_image, { size: 'mid' })" @error="imageError(siteIndex, cartIndex)" mode="aspectFill"/>
|
||||
<image :src="$util.img(item.sku_image, { size: 'mid' })"
|
||||
@error="imageError(siteIndex, cartIndex)" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<view>
|
||||
<view @click="toGoodsDetail(item)" class="goods-name">{{ isEnEnv ? item.en_goods_name : item.goods_name }}</view>
|
||||
<view @click="toGoodsDetail(item)" class="goods-name">{{ isEnEnv ?
|
||||
item.en_goods_name : item.goods_name }}</view>
|
||||
<view class="sku-wrap">
|
||||
<view class="sku">
|
||||
<view class="goods-spec" v-if="item.sku_spec_format.length" @click="selectSku(item)">
|
||||
<view class="goods-spec" v-if="item.sku_spec_format.length"
|
||||
@click="selectSku(item)">
|
||||
<block v-for="(x, i) in item.sku_spec_format" :key="i">
|
||||
{{ x.spec_name }}:{{ x.spec_value_name }}
|
||||
{{ i < item.sku_spec_format.length - 1 ? ';' : '' }}
|
||||
</block>
|
||||
</block>
|
||||
</view>
|
||||
<text class="iconfont icon-unfold" v-if="item.sku_spec_format.length"></text>
|
||||
<text class="iconfont icon-unfold"
|
||||
v-if="item.sku_spec_format.length"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-sub-section">
|
||||
<block v-if="item.promotion_type == 1">
|
||||
<block v-if="Number(item.member_price) > 0 && Number(item.member_price) < Number(item.discount_price)">
|
||||
<block
|
||||
v-if="Number(item.member_price) > 0 && Number(item.member_price) < Number(item.discount_price)">
|
||||
<view class="goods-price ">
|
||||
<view class="bottom-price price-style large">
|
||||
<text class="unit price-style small">{{ $lang('common.currencySymbol') }}</text>
|
||||
<text class="unit price-style small">{{
|
||||
$lang('common.currencySymbol') }}</text>
|
||||
{{ parseFloat(item.member_price).toFixed(2).split('.')[0] }}
|
||||
<text class="unit price-style small">.{{ parseFloat(item.member_price).toFixed(2).split('.')[1] }}</text>
|
||||
<image :src="$util.img('public/uniapp/index/VIP.png')"/>
|
||||
<text class="unit price-style small">.{{
|
||||
parseFloat(item.member_price).toFixed(2).split('.')[1]
|
||||
}}</text>
|
||||
<image :src="$util.img('public/uniapp/index/VIP.png')" />
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="goods-price ">
|
||||
<view class="bottom-price price-style large">
|
||||
<text class="unit price-style small">{{ $lang('common.currencySymbol') }}</text>
|
||||
{{ parseFloat(item.discount_price).toFixed(2).split('.')[0] }}
|
||||
<text class="unit price-style small">.{{ parseFloat(item.discount_price).toFixed(2).split('.')[1] }}</text>
|
||||
<image :src="$util.img('public/uniapp/index/discount.png')"/>
|
||||
<text class="unit price-style small">{{
|
||||
$lang('common.currencySymbol') }}</text>
|
||||
{{ parseFloat(item.discount_price).toFixed(2).split('.')[0]
|
||||
}}
|
||||
<text class="unit price-style small">.{{
|
||||
parseFloat(item.discount_price).toFixed(2).split('.')[1]
|
||||
}}</text>
|
||||
<image
|
||||
:src="$util.img('public/uniapp/index/discount.png')" />
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
@@ -73,19 +90,25 @@
|
||||
<block v-if="Number(item.member_price) > 0">
|
||||
<view class="goods-price">
|
||||
<view class="bottom-price price-style large">
|
||||
<text class="unit price-style small">{{ $lang('common.currencySymbol') }}</text>
|
||||
<text class="unit price-style small">{{
|
||||
$lang('common.currencySymbol') }}</text>
|
||||
{{ parseFloat(item.member_price).toFixed(2).split('.')[0] }}
|
||||
<text class="unit price-style small">.{{ parseFloat(item.member_price).toFixed(2).split('.')[1] }}</text>
|
||||
<image :src="$util.img('public/uniapp/index/VIP.png')"/>
|
||||
<text class="unit price-style small">.{{
|
||||
parseFloat(item.member_price).toFixed(2).split('.')[1]
|
||||
}}</text>
|
||||
<image :src="$util.img('public/uniapp/index/VIP.png')" />
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="goods-price">
|
||||
<view class="bottom-price price-style large">
|
||||
<text class="unit price-style small">{{ $lang('common.currencySymbol') }}</text>
|
||||
<text class="unit price-style small">{{
|
||||
$lang('common.currencySymbol') }}</text>
|
||||
{{ parseFloat(item.price).toFixed(2).split('.')[0] }}
|
||||
<text class="unit price-style small">.{{ parseFloat(item.price).toFixed(2).split('.')[1] }}</text>
|
||||
<text class="unit price-style small">.{{
|
||||
parseFloat(item.price).toFixed(2).split('.')[1]
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
@@ -100,14 +123,16 @@
|
||||
<text class="discount-tag">满减</text>
|
||||
<scroll-view scroll-x="true" class="scroll-view">
|
||||
<block v-for="(mitem, key) in manjian['sku_' + item.sku_id]" :key="key">
|
||||
<text v-if="mitem.discount_money">{{ Number(mitem.limit) }}减{{ mitem.discount_money }}</text>
|
||||
<text v-if="mitem.discount_money">{{ Number(mitem.limit) }}减{{
|
||||
mitem.discount_money }}</text>
|
||||
<text class="interval" v-if="mitem.discount_money"></text>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-del color-base-bg" :class="{ show: item.edit }" @click="deleteCart('single', siteIndex, cartIndex)">{{ $lang('del') }}</view>
|
||||
<view class="item-del color-base-bg" :class="{ show: item.edit }"
|
||||
@click="deleteCart('single', siteIndex, cartIndex)">{{ $lang('del') }}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
@@ -124,7 +149,8 @@
|
||||
<view class="goods-wrap">
|
||||
<view class="iconfont icon-yuan_checked color-tip"></view>
|
||||
<view class="goods-img">
|
||||
<image :src="$util.img(goodsItem.sku_image, { size: 'mid' })" mode="aspectFill"/>
|
||||
<image :src="$util.img(goodsItem.sku_image, { size: 'mid' })"
|
||||
mode="aspectFill" />
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<view class="goods-name">{{ goodsItem.sku_name }}</view>
|
||||
@@ -134,23 +160,32 @@
|
||||
<block v-for="(x, i) in goodsItem.sku_spec_format" :key="i">
|
||||
{{ x.spec_name }}:{{ x.spec_value_name }}
|
||||
{{ i < goodsItem.sku_spec_format.length - 1 ? '; ' : '' }}
|
||||
</block>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-sub-section">
|
||||
<view class="goods-price">
|
||||
<text class="bottom-price price-style large">
|
||||
<template v-if="goodsItem.member_price > 0 && goodsItem.member_price < goodsItem.discount_price">
|
||||
<text class="unit price-style small">{{ $lang('common.currencySymbol') }}</text>
|
||||
{{ parseFloat(goodsItem.member_price).toFixed(2).split('.')[0] }}
|
||||
<text class="unit price-style small">.{{ parseFloat(goodsItem.member_price).toFixed(2).split('.')[1] }}</text>
|
||||
<image :src="$util.img('public/uniapp/index/VIP.png')"/>
|
||||
<template
|
||||
v-if="goodsItem.member_price > 0 && goodsItem.member_price < goodsItem.discount_price">
|
||||
<text class="unit price-style small">{{
|
||||
$lang('common.currencySymbol') }}</text>
|
||||
{{ parseFloat(goodsItem.member_price).toFixed(2).split('.')[0]
|
||||
}}
|
||||
<text class="unit price-style small">.{{
|
||||
parseFloat(goodsItem.member_price).toFixed(2).split('.')[1]
|
||||
}}</text>
|
||||
<image :src="$util.img('public/uniapp/index/VIP.png')" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<text class="unit price-style small">{{ $lang('common.currencySymbol') }}</text>
|
||||
{{ parseFloat(goodsItem.discount_price).toFixed(2).split('.')[0] }}
|
||||
<text class="unit price-style small">.{{ parseFloat(goodsItem.discount_price).toFixed(2).split('.')[1] }}</text>
|
||||
<text class="unit price-style small">{{
|
||||
$lang('common.currencySymbol') }}</text>
|
||||
{{ parseFloat(goodsItem.discount_price).toFixed(2).split('.')[0]
|
||||
}}
|
||||
<text class="unit price-style small">.{{
|
||||
parseFloat(goodsItem.discount_price).toFixed(2).split('.')[1]
|
||||
}}</text>
|
||||
</template>
|
||||
</text>
|
||||
</view>
|
||||
@@ -165,7 +200,8 @@
|
||||
<block v-else>
|
||||
<view class="cart-empty">
|
||||
<ns-empty text="购物车为空" subText="赶紧去逛逛, 购买心仪的商品吧" :isIndex="Boolean(storeToken)"></ns-empty>
|
||||
<button type="primary" size="mini" class="button mini" v-if="!storeToken" @click="toLogin">去登录</button>
|
||||
<button type="primary" size="mini" class="button mini" v-if="!storeToken"
|
||||
@click="toLogin">去登录</button>
|
||||
</view>
|
||||
</block>
|
||||
<ns-goods-recommend ref="goodrecommend" route="cart"></ns-goods-recommend>
|
||||
@@ -201,7 +237,7 @@
|
||||
<view class="money price-font ">¥{{ discount.order_money | moneyFormat }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view :style="{height: tabBarHeight}"></view>
|
||||
<view :style="{ height: tabBarHeight }"></view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
@@ -213,9 +249,11 @@
|
||||
</view>
|
||||
<view class="popup-body" :class="{ 'safe-area': isIphoneX }" @click="$refs.couponPopup.close()">
|
||||
<view class="coupon-item">
|
||||
<view class="coupon-info" :style="{ backgroundColor: discount.coupon_info.receive_type != 'wait' ? '#F2F2F2' : 'var(--main-color-shallow)' }">
|
||||
<view class="coupon-info"
|
||||
:style="{ backgroundColor: discount.coupon_info.receive_type != 'wait' ? '#F2F2F2' : 'var(--main-color-shallow)' }">
|
||||
<view class="info-wrap">
|
||||
<image class="coupon-line" mode="heightFix" :src="$util.img('public/uniapp/coupon/coupon_line.png')"/>
|
||||
<image class="coupon-line" mode="heightFix"
|
||||
:src="$util.img('public/uniapp/coupon/coupon_line.png')" />
|
||||
<view class="coupon-money">
|
||||
<template v-if="discount.coupon_info.type == 'reward'">
|
||||
<text class="unit">{{ $lang('common.currencySymbol') }}</text>
|
||||
@@ -237,24 +275,30 @@
|
||||
</view>
|
||||
<view class="desc-wrap">
|
||||
<view class="coupon-name">{{ discount.coupon_info.coupon_name }}</view>
|
||||
<view v-if="discount.coupon_info.type == 'discount' && discount.coupon_info.discount_limit > 0" class="limit">
|
||||
<view
|
||||
v-if="discount.coupon_info.type == 'discount' && discount.coupon_info.discount_limit > 0"
|
||||
class="limit">
|
||||
最多可抵¥{{ discount.coupon_info.discount_limit }}
|
||||
</view>
|
||||
<view class="time font-size-goods-tag" v-if="discount.coupon_info.validity_type == 0">
|
||||
<view class="time font-size-goods-tag"
|
||||
v-if="discount.coupon_info.validity_type == 0">
|
||||
有效期:{{ $util.timeStampTurnTime(discount.coupon_info.end_time) }}
|
||||
</view>
|
||||
<view class="time font-size-goods-tag" v-else-if="discount.coupon_info.validity_type == 1">
|
||||
<view class="time font-size-goods-tag"
|
||||
v-else-if="discount.coupon_info.validity_type == 1">
|
||||
有效期:领取之日起{{ discount.coupon_info.fixed_term }}天内有效
|
||||
</view>
|
||||
<view class="time font-size-goods-tag" v-else>有效期:长期有效</view>
|
||||
</view>
|
||||
|
||||
<button type="primary" v-if="discount.coupon_info.receive_type != 'wait'" disabled>已领取</button>
|
||||
<button type="primary" v-else @click.stop="receiveCoupon(discount.coupon_info.coupon_type_id)">领取</button>
|
||||
<button type="primary" v-if="discount.coupon_info.receive_type != 'wait'"
|
||||
disabled>已领取</button>
|
||||
<button type="primary" v-else
|
||||
@click.stop="receiveCoupon(discount.coupon_info.coupon_type_id)">领取</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view :style="{height: tabBarHeight}"></view>
|
||||
<view :style="{ height: tabBarHeight }"></view>
|
||||
<view class="cart-bottom-block"></view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
@@ -262,7 +306,8 @@
|
||||
|
||||
<view class="cart-bottom" :style="{ bottom: tabBarHeight }" :class="{ active: isIphoneX }" v-if="hasData">
|
||||
<view class="all-election" @click="allElection">
|
||||
<view class="iconfont" :class="checkAll ? 'icon-yuan_checked color-base-text' : 'icon-yuan_checkbox'"></view>
|
||||
<view class="iconfont" :class="checkAll ? 'icon-yuan_checked color-base-text' : 'icon-yuan_checkbox'">
|
||||
</view>
|
||||
<text>{{ $lang('allElection') }}</text>
|
||||
</view>
|
||||
<view class="settlement-info" :style="{ visibility: isAction ? 'hidden' : 'visible' }">
|
||||
@@ -270,8 +315,10 @@
|
||||
{{ $lang('total') }}:
|
||||
<text class="unit price-font">{{ $lang('common.currencySymbol') }}</text>
|
||||
<block v-if="Object.keys(discount).length">
|
||||
<text class="value price-font">{{ parseFloat(discount.order_money).toFixed(2).split('.')[0] }}</text>
|
||||
<text class="unit price-font">.{{ parseFloat(discount.order_money).toFixed(2).split('.')[1] }}</text>
|
||||
<text class="value price-font">{{ parseFloat(discount.order_money).toFixed(2).split('.')[0]
|
||||
}}</text>
|
||||
<text class="unit price-font">.{{ parseFloat(discount.order_money).toFixed(2).split('.')[1]
|
||||
}}</text>
|
||||
</block>
|
||||
<block v-else>
|
||||
<text class="value price-font">{{ parseFloat(totalPrice).toFixed(2).split('.')[0] }}</text>
|
||||
@@ -288,16 +335,20 @@
|
||||
</view>
|
||||
<view class="action-btn" v-else>
|
||||
<button type="primary" size="mini" class="mini" @click="settlement" v-if="totalCount != 0">
|
||||
{{ discount.coupon_info && discount.coupon_info.receive_type == 'wait' ? '领券' : '立即' }}结算({{ totalCount }})
|
||||
{{ discount.coupon_info && discount.coupon_info.receive_type == 'wait' ? '领券' : '立即' }}结算({{
|
||||
totalCount }})
|
||||
</button>
|
||||
<button type="primary" size="mini" class="mini" @click="settlement" disabled
|
||||
v-else>{{ $lang('settlement') }}({{ totalCount }})</button>
|
||||
<button type="primary" size="mini" class="mini" @click="settlement" disabled v-else>{{
|
||||
$lang('settlement') }}({{
|
||||
totalCount }})</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<diy-bottom-nav></diy-bottom-nav>
|
||||
|
||||
<ns-goods-sku ref="selectSku" v-if="goodsSkuDetail" :goods-detail="goodsSkuDetail" :goods-id="goodsSkuDetail.goods_id" :max-buy="goodsSkuDetail.max_buy" :min-buy="goodsSkuDetail.min_buy" @refresh="refreshSkuDetail"></ns-goods-sku>
|
||||
<ns-goods-sku ref="selectSku" v-if="goodsSkuDetail" :goods-detail="goodsSkuDetail"
|
||||
:goods-id="goodsSkuDetail.goods_id" :max-buy="goodsSkuDetail.max_buy" :min-buy="goodsSkuDetail.min_buy"
|
||||
@refresh="refreshSkuDetail"></ns-goods-sku>
|
||||
|
||||
<!-- 加载动画 -->
|
||||
<loading-cover ref="loadingCover"></loading-cover>
|
||||
@@ -315,44 +366,33 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import nsGoodsRecommend from '@/components/ns-goods-recommend/ns-goods-recommend.vue';
|
||||
import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue';
|
||||
import toTop from '@/components/toTop/toTop.vue';
|
||||
import nsEmpty from '@/components/ns-empty/ns-empty.vue';
|
||||
import nsLogin from '@/components/ns-login/ns-login.vue';
|
||||
import loadingCover from '@/components/loading-cover/loading-cover.vue';
|
||||
import scroll from '@/common/js/scroll-view.js';
|
||||
import cart from './public/js/cart.js';
|
||||
// #ifdef MP-WEIXIN
|
||||
import privacyPopup from '@/components/wx-privacy-popup/privacy-popup.vue';
|
||||
// #endif
|
||||
|
||||
export default {
|
||||
components: {
|
||||
nsGoodsRecommend,
|
||||
uniNumberBox,
|
||||
toTop,
|
||||
nsEmpty,
|
||||
nsLogin,
|
||||
loadingCover,
|
||||
import scroll from '@/common/js/scroll-view.js';
|
||||
import cart from './public/js/cart.js';
|
||||
// #ifdef MP-WEIXIN
|
||||
import privacyPopup from '@/components/wx-privacy-popup/privacy-popup.vue';
|
||||
// #endif
|
||||
|
||||
export default {
|
||||
components: {
|
||||
// #ifdef MP-WEIXIN
|
||||
privacyPopup
|
||||
// #endif
|
||||
},
|
||||
mixins: [scroll, cart]
|
||||
};
|
||||
mixins: [scroll, cart]
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
||||
background: none;
|
||||
max-height: unset !important;
|
||||
overflow-y: hidden !important;
|
||||
}
|
||||
/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
||||
background: none;
|
||||
max-height: unset !important;
|
||||
overflow-y: hidden !important;
|
||||
}
|
||||
|
||||
/deep/ .uni-popup__wrapper {
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
}
|
||||
/deep/ .uni-popup__wrapper {
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
}
|
||||
|
||||
@import './public/css/cart.scss';
|
||||
@import './public/css/cart.scss';
|
||||
</style>
|
||||
@@ -25,15 +25,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import nsLogin from '@/components/ns-login/ns-login.vue';
|
||||
import loadingCover from '@/components/loading-cover/loading-cover.vue';
|
||||
// #ifdef MP-WEIXIN
|
||||
import privacyPopup from '@/components/wx-privacy-popup/privacy-popup.vue';
|
||||
// #endif
|
||||
export default {
|
||||
components: {
|
||||
nsLogin,
|
||||
loadingCover,
|
||||
// #ifdef MP-WEIXIN
|
||||
privacyPopup
|
||||
// #endif
|
||||
|
||||
@@ -1,465 +0,0 @@
|
||||
// 商品详情业务
|
||||
import {
|
||||
Weixin
|
||||
} from '@/common/js/wx-jssdk.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
skuId: 0,
|
||||
goodsId: 0,
|
||||
isIphoneX: false, //判断手机是否是iphoneX以上
|
||||
whetherCollection: 0,
|
||||
|
||||
//是否开启预览,0:不开启,1:开启
|
||||
preview: 0,
|
||||
videoContext: '',
|
||||
|
||||
// 媒体,图片,视频
|
||||
|
||||
// 解决每个商品SKU图片数量不同时,无法切换到第一个,导致轮播图显示不出来
|
||||
swiperInterval: 1,
|
||||
swiperAutoplay: false,
|
||||
swiperCurrent: 1,
|
||||
switchMedia: 'img',
|
||||
|
||||
//评价
|
||||
goodsEvaluate: [{
|
||||
member_headimg: '',
|
||||
member_name: '',
|
||||
content: '',
|
||||
images: [],
|
||||
create_time: 0,
|
||||
sku_name: ''
|
||||
}],
|
||||
evaluateConfig: {
|
||||
evaluate_audit: 1,
|
||||
evaluate_show: 0,
|
||||
evaluate_status: 1
|
||||
},
|
||||
|
||||
// 是否可分享到好物圈
|
||||
goodsCircle: false,
|
||||
service: null,
|
||||
shareUrl: '', // 分享链接
|
||||
source_member: 0, //分享人的id
|
||||
isCommunity: false, //社群弹窗
|
||||
|
||||
poster: "-1", //海报
|
||||
posterMsg: "", //海报错误信息
|
||||
posterHeight: 0,
|
||||
posterParams: {}, //海报所需参数
|
||||
goodsRoute: '',
|
||||
posterApi: '',
|
||||
goodsAttrShow: false, // 商品属性是否展开
|
||||
|
||||
//门店列表
|
||||
storeList: {
|
||||
data: [],
|
||||
page: 1,
|
||||
page_size: 10
|
||||
},
|
||||
isShowStore: false,
|
||||
latitude: null, // 纬度
|
||||
longitude: null, // 经度
|
||||
evaluateCount: 0, // 商品评论数量
|
||||
deliveryType: null, // 配送方式
|
||||
isVirtual: 0 //是否为虚拟商品
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.isIphoneX = this.$util.uniappIsIPhoneX();
|
||||
|
||||
if (this.location) {
|
||||
this.latitude = this.location.latitude;
|
||||
this.longitude = this.location.longitude;
|
||||
} else {
|
||||
this.$util.getLocation();
|
||||
}
|
||||
this.getStoreData();
|
||||
},
|
||||
watch: {
|
||||
location: function (nVal) {
|
||||
if (nVal) {
|
||||
this.latitude = nVal.latitude;
|
||||
this.longitude = nVal.longitude;
|
||||
this.getStoreData();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(params) {
|
||||
this.skuId = params.sku_id;
|
||||
this.goodsId = params.goods_id;
|
||||
this.preview = params.preview;
|
||||
this.source_member = params.source_member;
|
||||
this.whetherCollection = params.whetherCollection;
|
||||
this.posterParams = params.posterParams;
|
||||
|
||||
this.shareUrl = params.shareUrl;
|
||||
this.goodsRoute = params.goodsRoute;
|
||||
this.posterApi = params.posterApi;
|
||||
this.isVirtual = params.isVirtual;
|
||||
this.deliveryType = params.deliveryType;
|
||||
this.evaluateConfig = params.evaluateConfig;
|
||||
|
||||
if (this.evaluateConfig.evaluate_show == 1) {
|
||||
//商品评论
|
||||
this.getGoodsEvaluate(params.evaluateList);
|
||||
this.evaluateCount = params.evaluateCount;
|
||||
}
|
||||
|
||||
for (let k in this.deliveryType) {
|
||||
if (k == 'store') {
|
||||
this.isShowStore = true;
|
||||
}
|
||||
}
|
||||
|
||||
this.getService();
|
||||
|
||||
this.videoContext = uni.createVideoContext('goodsVideo');
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
this.goodsSyncToGoodsCircle();
|
||||
// #endif
|
||||
|
||||
},
|
||||
swiperChange(e) {
|
||||
this.swiperCurrent = e.detail.current + 1;
|
||||
},
|
||||
|
||||
//-------------------------------------服务-------------------------------------
|
||||
|
||||
openMerchantsServicePopup() {
|
||||
this.$refs.merchantsServicePopup.open();
|
||||
},
|
||||
closeMerchantsServicePopup() {
|
||||
this.$refs.merchantsServicePopup.close();
|
||||
},
|
||||
|
||||
//-------------------------------------门店列表-------------------------------------
|
||||
openStoreListPopup() {
|
||||
this.$refs.storeListPopup.open();
|
||||
},
|
||||
closeStoreListPopup() {
|
||||
this.$refs.storeListPopup.close();
|
||||
},
|
||||
getStoreData() {
|
||||
//门店列表
|
||||
let data = {
|
||||
page: this.storeList.page,
|
||||
page_size: this.storeList.page_size
|
||||
};
|
||||
if (this.latitude && this.longitude) {
|
||||
data.latitude = this.latitude;
|
||||
data.longitude = this.longitude;
|
||||
}
|
||||
this.$api.sendRequest({
|
||||
url: '/api/store/page',
|
||||
data: data,
|
||||
success: res => {
|
||||
if (this.storeList.page == 1) this.storeList.data == [];
|
||||
if (res.code >= 0 && res.data) {
|
||||
this.storeList.data = this.storeList.data.concat(res.data.list);
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: res.message
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
selectStore(item) {
|
||||
this.$util.redirectTo('/pages_tool/store/detail', {
|
||||
store_id: item.store_id
|
||||
});
|
||||
this.closeStoreListPopup();
|
||||
},
|
||||
//-------------------------------------属性-------------------------------------
|
||||
|
||||
switchGoodsAttr() {
|
||||
this.goodsAttrShow = !this.goodsAttrShow;
|
||||
},
|
||||
//-------------------------------------评价-------------------------------------
|
||||
//商品评论列表
|
||||
getGoodsEvaluate(list) {
|
||||
if (list) {
|
||||
this.goodsEvaluate = list;
|
||||
this.goodsEvaluate.forEach((item, index) => {
|
||||
if (this.goodsEvaluate[index].images) this.goodsEvaluate[index].images = this.goodsEvaluate[index].images.split(",");
|
||||
if (this.goodsEvaluate[index].is_anonymous == 1) this.goodsEvaluate[index].member_name = this.goodsEvaluate[index].member_name.replace(this.goodsEvaluate[index].member_name.substring(1, this.goodsEvaluate[index].member_name.length - 1), '***')
|
||||
})
|
||||
// if (this.goodsEvaluate.images) this.goodsEvaluate.images = this.goodsEvaluate.images.split(",");
|
||||
// if (this.goodsEvaluate.is_anonymous == 1) this.goodsEvaluate.member_name = this.goodsEvaluate.member_name.replace(
|
||||
// this.goodsEvaluate.member_name.substring(1, this.goodsEvaluate.member_name.length - 1), '***')
|
||||
}
|
||||
},
|
||||
// 预览评价图片
|
||||
previewEvaluate(index, img_index, field) {
|
||||
var paths = [];
|
||||
for (let i = 0; i < this.goodsEvaluate[index][field].length; i++) {
|
||||
paths.push(this.$util.img(this.goodsEvaluate[index][field][i]));
|
||||
}
|
||||
uni.previewImage({
|
||||
current: img_index,
|
||||
urls: paths
|
||||
});
|
||||
},
|
||||
//-------------------------------------关注-------------------------------------
|
||||
async collection() {
|
||||
if (this.preview) return; // 开启预览,禁止任何操作和跳转
|
||||
|
||||
if (this.storeToken) {
|
||||
|
||||
//未关注添加关注
|
||||
if (this.whetherCollection == 0) {
|
||||
let res = await this.$api.sendRequest({
|
||||
url: "/api/goodscollect/add",
|
||||
data: {
|
||||
sku_id: this.skuId,
|
||||
goods_id: this.goodsSkuDetail.goods_id,
|
||||
sku_name: this.goodsSkuDetail.sku_name,
|
||||
sku_price: this.goodsSkuDetail.show_price,
|
||||
sku_image: this.goodsSkuDetail.sku_image
|
||||
},
|
||||
async: false,
|
||||
});
|
||||
var data = res.data;
|
||||
if (data > 0) {
|
||||
this.whetherCollection = 1;
|
||||
}
|
||||
} else {
|
||||
//已关注取消关注
|
||||
let res = await this.$api.sendRequest({
|
||||
url: "/api/goodscollect/delete",
|
||||
data: {
|
||||
goods_id: this.goodsSkuDetail.goods_id
|
||||
},
|
||||
async: false,
|
||||
});
|
||||
var data = res.data;
|
||||
if (data > 0) {
|
||||
this.whetherCollection = 0;
|
||||
}
|
||||
}
|
||||
return this.whetherCollection;
|
||||
} else {
|
||||
if (this.source_member) {
|
||||
this.$refs.login.open(this.shareUrl + '&source_member=' + this.source_member);
|
||||
} else {
|
||||
this.$refs.login.open(this.shareUrl);
|
||||
}
|
||||
}
|
||||
},
|
||||
//-------------------------------------分享-------------------------------------
|
||||
// 打开分享弹出层
|
||||
openSharePopup() {
|
||||
this.$refs.sharePopup.open();
|
||||
},
|
||||
// 关闭分享弹出层
|
||||
closeSharePopup() {
|
||||
this.$refs.sharePopup.close();
|
||||
},
|
||||
copyUrl() {
|
||||
let text = this.$config.h5Domain + this.shareUrl;
|
||||
if (this.memberInfo && this.memberInfo.member_id) text += '&source_member=' + this.memberInfo.member_id;
|
||||
this.$util.copy(text, () => {
|
||||
this.closeSharePopup();
|
||||
});
|
||||
},
|
||||
|
||||
//-------------------------------------海报-------------------------------------
|
||||
// 打开海报弹出层
|
||||
openPosterPopup() {
|
||||
this.getGoodsPoster();
|
||||
this.$refs.sharePopup.close();
|
||||
},
|
||||
// 关闭海报弹出层
|
||||
closePosterPopup() {
|
||||
this.$refs.posterPopup.close();
|
||||
this.poster = ''
|
||||
},
|
||||
//生成海报
|
||||
getGoodsPoster() {
|
||||
uni.showLoading({
|
||||
'title': '海报生成中...'
|
||||
})
|
||||
//活动海报信息
|
||||
if (this.memberInfo && this.memberInfo.member_id) this.posterParams.source_member = this.memberInfo.member_id;
|
||||
|
||||
this.$api.sendRequest({
|
||||
url: this.posterApi,
|
||||
data: {
|
||||
page: this.goodsRoute,
|
||||
qrcode_param: JSON.stringify(this.posterParams)
|
||||
},
|
||||
success: res => {
|
||||
if (res.code == 0) {
|
||||
this.$refs.posterPopup.open();
|
||||
this.poster = res.data.path + "?time=" + new Date().getTime();
|
||||
} else {
|
||||
this.posterMsg = res.message;
|
||||
this.$util.showToast({
|
||||
title: res.message
|
||||
})
|
||||
}
|
||||
uni.hideLoading();
|
||||
},
|
||||
fail: err => {
|
||||
uni.hideLoading();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 预览图片
|
||||
previewMedia(index) {
|
||||
var paths = [];
|
||||
for (let i = 0; i < this.goodsSkuDetail.sku_images.length; i++) {
|
||||
paths.push(this.$util.img(this.goodsSkuDetail.sku_images[i], {
|
||||
size: 'big'
|
||||
}));
|
||||
}
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: paths,
|
||||
// longPressActions: {
|
||||
// itemList: ['发送给朋友', '保存图片', '关注'],
|
||||
// success: function(data) {
|
||||
// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
|
||||
// },
|
||||
// fail: function(err) {
|
||||
// console.log(err.errMsg);
|
||||
// }
|
||||
// }
|
||||
});
|
||||
},
|
||||
swiperImageError(index) {
|
||||
this.goodsSkuDetail.sku_images[index] = this.$util.getDefaultImage().goods;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
// #ifdef MP || APP-PLUS
|
||||
//小程序中保存海报
|
||||
saveGoodsPoster() {
|
||||
let url = this.$util.img(this.poster);
|
||||
uni.downloadFile({
|
||||
url: url,
|
||||
success: (res) => {
|
||||
if (res.errMsg == "downloadFile:ok") {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: () => {
|
||||
this.$util.showToast({
|
||||
title: "保存成功"
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
this.$util.showToast({
|
||||
title: "保存失败,请稍后重试"
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
this.$util.showToast({
|
||||
title: "保存失败,请稍后重试"
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// #endif
|
||||
//售后保障查询
|
||||
getService() {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/goods/aftersale',
|
||||
success: res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
this.service = res.data;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
/**
|
||||
* 将商品同步到微信圈子
|
||||
*/
|
||||
goodsSyncToGoodsCircle() {
|
||||
this.$api.sendRequest({
|
||||
url: '/goodscircle/api/goods/sync',
|
||||
data: {
|
||||
goods_id: this.goodsSkuDetail.goods_id
|
||||
},
|
||||
success: res => {
|
||||
if (res.code == 0) {
|
||||
this.goodsCircle = true;
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 将商品推荐到微信圈子
|
||||
*/
|
||||
openBusinessView() {
|
||||
if (wx.openBusinessView) {
|
||||
wx.openBusinessView({
|
||||
businessType: 'friendGoodsRecommend',
|
||||
extraData: {
|
||||
product: {
|
||||
item_code: this.goodsSkuDetail.goods_id,
|
||||
title: this.goodsSkuDetail.sku_name,
|
||||
image_list: this.goodsSkuDetail.sku_images.map((ele) => {
|
||||
return this.$util.img(ele);
|
||||
})
|
||||
}
|
||||
},
|
||||
success: function (res) {
|
||||
console.log('success', res);
|
||||
},
|
||||
fail: function (res) {
|
||||
console.log('fail', res);
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
toEvaluateDetail(id) {
|
||||
this.$util.redirectTo('/pages_tool/goods/evaluate', {
|
||||
goods_id: id
|
||||
});
|
||||
},
|
||||
showImg(e) {
|
||||
//拿到图片的路径里面的内容放在我们数组中
|
||||
let contentimg = e.target.dataset.nodes;
|
||||
let arrImg = [];
|
||||
for (var i = 0; i < contentimg.length; i++) {
|
||||
var img = contentimg[i].children;
|
||||
if (Array.isArray(img)) {
|
||||
for (var j = 0; j < img.length; j++) {
|
||||
if (img[j].attrs && img[j].name == "img") {
|
||||
if (img[j].attrs.src) {
|
||||
arrImg.push(img[j].attrs.src)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//最后一步就是把我们的所有图片放在预览的api中就可以了
|
||||
uni.previewImage({
|
||||
current: arrImg,
|
||||
urls: arrImg,
|
||||
})
|
||||
},
|
||||
|
||||
//-------------------------------------社群-------------------------------------
|
||||
|
||||
//添加福利群
|
||||
onCommunity() {
|
||||
this.isCommunity = true
|
||||
},
|
||||
onCloseCommunity() {
|
||||
this.isCommunity = false
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,455 +0,0 @@
|
||||
<template>
|
||||
<view>
|
||||
<view scroll-y="true" class="goods-detail" :class="isIphoneX ? 'active' : ''">
|
||||
<view class="goods-container">
|
||||
<!-- 弹幕 -->
|
||||
<pengpai-fadein-out v-if="goodsSkuDetail.barrage_show && goodsSkuDetail.barrageData" ref="pengpai" :duration="1600" :wait="1900" :top="200" :left="0" :radius="60" :loop="true" :info="goodsSkuDetail.barrageData"/>
|
||||
|
||||
<!-- 商品媒体信息 -->
|
||||
<view class="goods-media" :style="{height: goodsSkuDetail.swiperHeight}">
|
||||
<!-- 商品图片 -->
|
||||
<view class="goods-img" :class="{ show: switchMedia == 'img' }">
|
||||
<swiper class="swiper" @change="swiperChange" :interval="swiperInterval" :autoplay="swiperAutoplay" autoplay="true" interval="4000" circular="true">
|
||||
<swiper-item v-for="(item, index) in goodsSkuDetail.sku_images" :key="index" :item-id="'goods_id_' + index">
|
||||
<view class="item" @click="previewMedia(index)">
|
||||
<image :src="$util.img(item, { size: 'big' })" @error="swiperImageError(index)" mode="aspectFit" />
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="img-indicator-dots">
|
||||
<text>{{ swiperCurrent }}</text>
|
||||
<text v-if="goodsSkuDetail.sku_images">/{{ goodsSkuDetail.sku_images.length }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品视频 -->
|
||||
<view class="goods-video" :class="{ show: switchMedia == 'video' }">
|
||||
<video id="goodsVideo" :src="$util.img(goodsSkuDetail.video_url)" :poster="$util.img(goodsSkuDetail.sku_image, { size: 'big' })" objectFit="cover"></video>
|
||||
</view>
|
||||
|
||||
<!-- 切换视频、图片 -->
|
||||
<view class="media-mode" v-if="goodsSkuDetail.video_url != ''">
|
||||
<text :class="{ 'color-base-bg': switchMedia == 'video' }" @click="switchMedia = 'video'">{{ $lang('video') }}</text>
|
||||
<text :class="{ 'color-base-bg': switchMedia == 'img' }" @click="(switchMedia = 'img'), videoContext.pause()">{{ $lang('image') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 价格区域 -->
|
||||
<view class="goods-gression">
|
||||
<slot name="price"></slot>
|
||||
</view>
|
||||
|
||||
<view class="newdetail margin-bottom" v-if="goodsSkuDetail.isinformation == 0">
|
||||
|
||||
<!-- 入口区域 -->
|
||||
<slot name="entrance"></slot>
|
||||
|
||||
<!-- 配送 -->
|
||||
<!-- @click="$refs.deliveryType.open()" -->
|
||||
<view class="item delivery-type" v-if="goodsSkuDetail.is_virtual == 0" >
|
||||
<view class="label">{{$lang('send')}}</view>
|
||||
<block v-if="deliveryType">
|
||||
<view class="box">
|
||||
<block v-for="(item, index) in deliveryType" :key="index">
|
||||
<text v-if="goodsSkuDetail.support_trade_type.indexOf(index) != -1">{{$lang('express')}}</text>
|
||||
<!-- {{ item.name }} -->
|
||||
</block>
|
||||
</view>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="box">未配置</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!-- 门店 -->
|
||||
<!-- <view class="item store-wrap" @click="openStoreListPopup()" v-if="addonIsExist.store && globalStoreInfo && isShowStore">
|
||||
<view class="label">门店</view>
|
||||
<view class="list-wrap">
|
||||
<view class="name-wrap">
|
||||
<text class="icondiy icon-system-shop"></text>
|
||||
<text class="name">{{globalStoreInfo.store_name}}</text>
|
||||
</view>
|
||||
<view class="other-wrap">
|
||||
<text class="distance" v-if="parseFloat(globalStoreInfo.distance)">距离{{ globalStoreInfo.distance > 1 ? globalStoreInfo.distance + 'km' : globalStoreInfo.distance * 1000 + 'm' }}</text>
|
||||
<text class="decorate" v-if="parseFloat(globalStoreInfo.distance)">.</text>
|
||||
<view class="address">{{ globalStoreInfo.full_address + globalStoreInfo.address }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</view> -->
|
||||
|
||||
<view class="item service" @click="openMerchantsServicePopup()" v-if="goodsSkuDetail.goods_service.length">
|
||||
<view class="label">服务</view>
|
||||
<view class="list-wrap">
|
||||
<view class="item-wrap" v-for="(item, index) in goodsSkuDetail.goods_service" :key="index" v-if="index < 3">
|
||||
<view class="item-wrap-box">
|
||||
<view class="item-wrap-icon">
|
||||
<text class="iconfont icon-dui" v-if="!item.icon || (!item.icon.imageUrl && !item.icon.icon)"></text>
|
||||
<image class="icon-img" v-else-if="item.icon.iconType == 'img'" :src=" $util.img(item.icon.imageUrl)" />
|
||||
<diy-icon class="icon-box" v-else-if="item.icon.iconType == 'icon'" :icon="item.icon.icon" :value="item.icon.style ? item.icon.style : null"></diy-icon>
|
||||
</view>
|
||||
<text>{{ item.service_name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!--多规格区域-->
|
||||
<view class="newdetail margin-bottom" v-if="goodsSkuDetail.sku_spec_format">
|
||||
<!-- 入口区域 -->
|
||||
<slot name="skuspec"></slot>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="newdetail margin-bottom" v-if="goodsSkuDetail.merch_id > 0">
|
||||
<!-- 入口区域 -->
|
||||
<slot name="entrance"></slot>
|
||||
<!-- 商家 -->
|
||||
<view class="item store-wrap" @click="$util.redirectTo('/pages_promotion/merch/detail', { merch_id: goodsSkuDetail.merch_id })">
|
||||
<view class="list-wrap" style="display: flex;">
|
||||
<view class="name-wrap">
|
||||
<image :src="$util.img(goodsSkuDetail.merchinfo.merch_image)" mode="widthFix" style="width: 100rpx;height: 100rpx;border-radius: 50rpx;"></image>
|
||||
</view>
|
||||
<view class="other-wrap">
|
||||
<view class="address" style="margin-left: 30rpx;">
|
||||
<view>{{goodsSkuDetail.merchinfo.merch_name}}</view>
|
||||
<view style="font-size: 24rpx;color: #888;">官方认证商家,值得信赖!</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 配送方式 -->
|
||||
<view @touchmove.prevent.stop>
|
||||
<uni-popup ref="deliveryType" type="bottom">
|
||||
<view class="deliverytype-popup-layer popup-layer">
|
||||
<view class="head-wrap" @click="$refs.deliveryType.close()">
|
||||
<text>配送</text>
|
||||
<text class="iconfont icon-close"></text>
|
||||
</view>
|
||||
<scroll-view scroll-y class="type-body">
|
||||
<block v-for="(item, index) in deliveryType" :key="index">
|
||||
<view class="type-item" :class="{ 'not-support': goodsSkuDetail.support_trade_type.indexOf(index) == -1 }">
|
||||
<text class="iconfont" :class="item.icon"></text>
|
||||
<view class="content">
|
||||
<view class="title">{{ item.name }}</view>
|
||||
<view class="desc">{{ item.desc }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
|
||||
<!-- 商品服务 -->
|
||||
<view @touchmove.prevent.stop>
|
||||
<uni-popup ref="merchantsServicePopup" type="bottom">
|
||||
<view class="goods-merchants-service-popup-layer popup-layer">
|
||||
<view class="head-wrap" @click="closeMerchantsServicePopup()">
|
||||
<text>商品服务</text>
|
||||
<text class="iconfont icon-close"></text>
|
||||
</view>
|
||||
<scroll-view scroll-y>
|
||||
<view class="item" :class="{ 'empty-desc': !item.desc }" v-for="(item, index) in goodsSkuDetail.goods_service" :key="index">
|
||||
<view class="item-icon" :class="{'empty-desc':!item.desc}">
|
||||
<text class="iconfont icon-dui color-base-text" v-if="!item.icon || (!item.icon.imageUrl && !item.icon.icon)"></text>
|
||||
<image class="icon-img" v-else-if="item.icon.iconType == 'img'" :src=" $util.img(item.icon.imageUrl)" />
|
||||
<diy-icon class="icon-box" v-else-if="item.icon.iconType == 'icon'" :icon="item.icon.icon" :value="item.icon.style ? item.icon.style : null"></diy-icon>
|
||||
</view>
|
||||
<view class="info-wrap">
|
||||
<text class="title">{{ item.service_name }}</text>
|
||||
<text class="describe" v-if="item.desc">{{ item.desc }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="button-box">
|
||||
<button type="primary" @click="closeMerchantsServicePopup()">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
|
||||
<!-- 门店列表 -->
|
||||
<view @touchmove.prevent.stop>
|
||||
<uni-popup ref="storeListPopup" type="bottom">
|
||||
<view class="goods-merchants-service-popup-layer popup-layer store-list-wrap">
|
||||
<view class="head-wrap" @click="closeStoreListPopup()">
|
||||
<text>门店列表</text>
|
||||
<text class="iconfont icon-close"></text>
|
||||
</view>
|
||||
<scroll-view scroll-y>
|
||||
<view class="store-list-content">
|
||||
<view class="list-item" v-for="(item, index) in storeList.data" :key="index" @click="selectStore(item)">
|
||||
<view class="item-box">
|
||||
<view class="item-image">
|
||||
<image :src="$util.img(item.store_image)" v-if="item.store_image"/>
|
||||
<image :src="$util.getDefaultImage().store" v-else/>
|
||||
</view>
|
||||
<view class="item-info">
|
||||
<view class="item-title">
|
||||
<text class="title">{{ item.store_name }}</text>
|
||||
<text class="distance color-base-text" v-if="item.distance">
|
||||
距离{{ item.distance > 1 ? item.distance + 'km' : item.distance * 1000 + 'm' }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="item-time" v-if="item.open_date">营业时间:{{ item.open_date }}
|
||||
</view>
|
||||
<view class="item-address">{{ item.full_address + item.address }}</view>
|
||||
</view>
|
||||
<view class="item-right"><text class="iconfont icon-right"></text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
|
||||
<!-- 业务区域 -->
|
||||
<slot name="business"></slot>
|
||||
|
||||
<view class="detail-community" v-if="goodsSkuDetail.qr_data && goodsSkuDetail.qr_data.qr_state == 1">
|
||||
<view class="community-box">
|
||||
<image :src="$util.img('public/uniapp/goods/detail_erweiImage.png')" mode="aspectFill"></image>
|
||||
<view class="community-content">
|
||||
<view class="community-title">{{ goodsSkuDetail.qr_data.qr_name }}</view>
|
||||
<view class="community-txt">{{ goodsSkuDetail.qr_data.community_describe }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="community-btn" @click="onCommunity()">添加</view>
|
||||
</view>
|
||||
|
||||
<!-- 促销 -->
|
||||
<!-- <view class="community-model" @touchmove.prevent.stop @click.stop="onCloseCommunity()" v-show="isCommunity">
|
||||
<view class="community-model-content" @click.stop>
|
||||
<view class="community-model-content-radius">
|
||||
<view>添加社群</view>
|
||||
</view>
|
||||
<view class="community-model-content-draw" v-if="goodsSkuDetail.qr_data && goodsSkuDetail.qr_data.qr_img">
|
||||
<image :src="goodsSkuDetail.qr_data.qr_img != '' && goodsSkuDetail.qr_data.qr_state == 1 ? $util.img(goodsSkuDetail.qr_data.qr_img) : $util.img('public/uniapp/goods/detail_erweiImage.png') " mode="aspectFill" show-menu-by-longpress="true"/>
|
||||
</view>
|
||||
<view class="community-model-content-text">长按识别二维码,添加社群</view>
|
||||
</view>
|
||||
<view class="community-model-close" @click.stop="onCloseCommunity()">
|
||||
<text class="iconfont icon-close"></text>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 参与流程 -->
|
||||
<slot name="articipation"></slot>
|
||||
|
||||
<!-- 商品评价 -->
|
||||
<view class="group-wrap" v-if="evaluateConfig.evaluate_show == 1 && goodsSkuDetail.isinformation == 0" style="display: none;">
|
||||
<view class="goods-evaluate" @click="toEvaluateDetail(goodsSkuDetail.goods_id)">
|
||||
<view class="tit">
|
||||
<!-- <view class="tit" :class="{ active: goodsEvaluate.content }"> -->
|
||||
<view>
|
||||
<text class="color-title font-size-base">
|
||||
评价
|
||||
<text class="font-size-base">({{ evaluateCount }})</text>
|
||||
</text>
|
||||
<text class="evaluate-item-empty" v-if="!evaluateCount">暂无评价</text>
|
||||
<view class="evaluate-item-empty" v-else>
|
||||
<text class="font-size-tag">查看全部</text>
|
||||
<text class="iconfont icon-right font-size-tag"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="evaluate-item" v-for="(item, index) in goodsEvaluate" :key="index"
|
||||
v-if="item.content">
|
||||
<view class="evaluator">
|
||||
<view class="evaluator-info">
|
||||
<view class="evaluator-face">
|
||||
<image v-if="item.member_headimg" :src="$util.img(item.member_headimg)" @error="item.member_headimg = $util.getDefaultImage().head" mode="aspectFill" />
|
||||
<image v-else :src="$util.getDefaultImage().head" @error="item.member_headimg = $util.getDefaultImage().head" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="evaluator-name-wrap">
|
||||
<text class="evaluator-name using-hidden" v-if="item.member_name.length > 2 && item.is_anonymous == 1">
|
||||
{{ item.member_name[0] }}***{{ item.member_name[item.member_name.length - 1] }}
|
||||
</text>
|
||||
<text class="evaluator-name using-hidden" v-else>{{ item.member_name }}</text>
|
||||
<view v-if="item.scores" class="evaluator-xing">
|
||||
<xiaoStarComponent :starCount="item.scores * 2"></xiaoStarComponent>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="time color-tip">{{ $util.timeStampTurnTime(item.create_time) }}</text>
|
||||
</view>
|
||||
<view class="cont margin-top">{{ item.content }}</view>
|
||||
<scroll-view scroll-x="true">
|
||||
<view class="evaluate-img" v-if="item.images">
|
||||
<view class="img-box" v-for="(img, img_index) in item.images" :key="img_index" @click="previewEvaluate(index, img_index, 'images')">
|
||||
<image :src="$util.img(img)" mode="aspectFill" />
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="goods-attr" v-if="goodsSkuDetail.goods_attr_format && goodsSkuDetail.goods_attr_format.length > 0">
|
||||
<view class="title">规格属性</view>
|
||||
<view class="attr-wrap">
|
||||
<block v-for="(item, index) in goodsSkuDetail.goods_attr_format" :key="index">
|
||||
<view class="item" v-if="goodsAttrShow || (!goodsAttrShow && index < 4)">
|
||||
<text class="attr-name">{{ item.attr_name }}</text>
|
||||
<text class="value-name">{{ item.attr_value_name }}</text>
|
||||
</view>
|
||||
</block>
|
||||
<view class="attr-action" v-if="goodsSkuDetail.goods_attr_format.length > 4" @click="switchGoodsAttr">
|
||||
<block v-if="!goodsAttrShow">
|
||||
展开<text class="iconfont icon-iconangledown"></text>
|
||||
</block>
|
||||
<block v-else>
|
||||
收起<text class="iconfont icon-iconangledown-copy"></text>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<!-- 详情 -->
|
||||
<view class="goods-detail-tab">
|
||||
<view class="detail-tab">
|
||||
<view class="tab-item">{{$lang('details')}}</view>
|
||||
</view>
|
||||
<view class="detail-content active">
|
||||
<view class="detail-content-item">
|
||||
<view class="goods-details" v-if="goodsSkuDetail.goods_content">
|
||||
<!-- <rich-text :nodes="goodsSkuDetail.goods_content" @click="showImg($event)" :data-nodes="goodsSkuDetail.goods_content"></rich-text> -->
|
||||
<!-- {{goodsSkuDetail.goods_content}} -->
|
||||
<mp-html :content="goodsSkuDetail.goods_content" />
|
||||
<!-- :loading="loading" @preview="preview" @navigate="navigate" -->
|
||||
</view>
|
||||
<view class="goods-details active" v-else></view>
|
||||
<view class="goods-details" v-if="service && service.is_display == 1 && service.content">
|
||||
<rich-text :nodes="service.content" @click="showImg($event)" :data-nodes="service.content"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品推荐 -->
|
||||
<ns-goods-recommend ref="goodrecommend" route="goods_detail"></ns-goods-recommend>
|
||||
|
||||
<ns-copyright></ns-copyright>
|
||||
|
||||
<!-- 海报 -->
|
||||
<view @touchmove.prevent.stop class="poster-layer">
|
||||
<uni-popup ref="posterPopup" type="center">
|
||||
<template v-if="poster != '-1'">
|
||||
<view class="poster-wrap">
|
||||
<view class="image-wrap">
|
||||
<image :src="$util.img(poster)" :show-menu-by-longpress="true" mode="widthFix" />
|
||||
<view class="close iconfont icon-close" @click="closePosterPopup()"></view>
|
||||
</view>
|
||||
<!-- #ifdef MP || APP-PLUS -->
|
||||
<view class="save-btn" @click="saveGoodsPoster()">保存图片</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<view class="save-btn">长按图片进行保存</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
</uni-popup>
|
||||
</view>
|
||||
|
||||
<!-- 分享弹窗 -->
|
||||
<view @touchmove.prevent.stop>
|
||||
<uni-popup ref="sharePopup" type="bottom" class="share-popup">
|
||||
<view>
|
||||
<view class="share-title">分享</view>
|
||||
<view class="share-content">
|
||||
<!-- #ifdef MP -->
|
||||
<view class="share-box">
|
||||
<button class="share-btn" :plain="true" open-type="share">
|
||||
<view class="iconfont icon-share-friend"></view>
|
||||
<text>分享给好友</text>
|
||||
</button>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="share-box" v-if="goodsCircle">
|
||||
<button class="share-btn" :plain="true" @click="openBusinessView">
|
||||
<view class="iconfont icon-haowuquan"></view>
|
||||
<text>分享到好物圈</text>
|
||||
</button>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<view class="share-box" @click="openPosterPopup">
|
||||
<button class="share-btn" :plain="true">
|
||||
<view class="iconfont icon-pengyouquan"></view>
|
||||
<text>生成分享海报</text>
|
||||
</button>
|
||||
</view>
|
||||
<!-- #ifdef H5 -->
|
||||
<view class="share-box" @click="copyUrl">
|
||||
<button class="share-btn" :plain="true">
|
||||
<view class="iconfont icon-fuzhilianjie"></view>
|
||||
<text>复制链接</text>
|
||||
</button>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view class="share-footer" @click="closeSharePopup"><text>取消分享</text></view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
|
||||
<slot name="fixedbtn"></slot>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作区域 -->
|
||||
<slot name="action"></slot>
|
||||
<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
|
||||
<ns-login ref="login"></ns-login>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 商品详情视图
|
||||
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
||||
import nsGoodsRecommend from '@/components/ns-goods-recommend/ns-goods-recommend.vue';
|
||||
import pengpaiFadeinOut from '@/components/pengpai-fadein-out/pengpai-fadein-out.vue';
|
||||
import xiaoStarComponent from '@/components/xiao-star-component/xiao-star-component.vue';
|
||||
import scroll from '@/common/js/scroll-view.js';
|
||||
import toTop from '@/components/toTop/toTop.vue';
|
||||
import detail from './detail.js';
|
||||
|
||||
export default {
|
||||
name: 'goods-detail-view',
|
||||
props: {
|
||||
goodsSkuDetail: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
uniPopup,
|
||||
nsGoodsRecommend,
|
||||
pengpaiFadeinOut,
|
||||
toTop,
|
||||
xiaoStarComponent
|
||||
},
|
||||
mixins: [scroll, detail]
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '@/common/css/goods_detail.scss';
|
||||
</style>
|
||||
<style scoped></style>
|
||||
@@ -1,96 +0,0 @@
|
||||
<template>
|
||||
<view class="action-buttom-wrap disabled" v-if="disabled" @click="clickEvent">{{ disabledText }}</view>
|
||||
<view class="action-buttom-wrap"
|
||||
:class="[backgroundClass, textPrice ? 'has-second' : '', background ? 'color-join-cart' : 'color-base-bg']"
|
||||
:style="{background:backgroundColor+'!important', 'color':textColor ? textColor : '#ffffff'}" v-else
|
||||
@click="clickEvent">
|
||||
<text class="price-font">{{ textPrice }}</text>
|
||||
<text>{{ text }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ns-goods-action-button',
|
||||
props: {
|
||||
// 商品底部按钮文字
|
||||
text: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 商品底部按钮价格文字
|
||||
textPrice: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 背景色
|
||||
background: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 背景色样式
|
||||
backgroundClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 是否禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 禁用文字提示
|
||||
disabledText: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 文字颜色
|
||||
textColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
clickEvent() {
|
||||
this.$emit('click');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.action-buttom-wrap {
|
||||
flex: 1;
|
||||
height: 70rpx;
|
||||
font-weight: 600;
|
||||
font-size: 30rpx;
|
||||
line-height: 70rpx;
|
||||
border: none;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.action-buttom-wrap.has-second {
|
||||
line-height: 50rpx;
|
||||
}
|
||||
|
||||
.action-buttom-wrap.has-second text {
|
||||
display: block;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.action-buttom-wrap:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.action-buttom-wrap.disabled {
|
||||
background: $color-disabled;
|
||||
}
|
||||
</style>
|
||||
@@ -1,146 +0,0 @@
|
||||
<template>
|
||||
<view>
|
||||
<block v-if="text == '客服' || text == 'Contact'">
|
||||
<!-- <ns-contact :niushop="chatParam" :send-message-title="sendData.title" :send-message-path="sendData.path" :send-message-img="sendData.img"> -->
|
||||
<button hoverClass="none" openType="contact" sessionFrom="weapp" showMessageCard="true" class="action-icon-wrap" style="background: transparent;padding: 0;margin: 0;">
|
||||
<view class="iconfont color-title" :class="icon"></view>
|
||||
<text>{{ text }}</text>
|
||||
<view class="corner-mark color-base-bg" v-if="cornerMark.length" :style="{ background: cornerMarkBg+'!important', color: cornerMarkColor }">{{ cornerMark }}</view>
|
||||
</button>
|
||||
<!-- </ns-contact> -->
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="action-icon-wrap" @click="clickEvent">
|
||||
<view class="iconfont " :class="icon"></view>
|
||||
<text>{{ text }}</text>
|
||||
<view class="corner-mark color-base-bg" :class="{'max' : parseInt(cornerMark)>99}" v-if="cornerMark.length" :style="{ background: cornerMarkBg+'!important', color: cornerMarkColor }">{{ cornerMark > 99 ? '99+' : cornerMark }}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import nsContact from '@/components/ns-contact/ns-contact.vue';
|
||||
export default {
|
||||
name: 'ns-goods-action-icon',
|
||||
props: {
|
||||
// 商品底部icon导航icon图标
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 商品底部icon导航文字
|
||||
text: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 角标文字
|
||||
cornerMark: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 角标背景色
|
||||
cornerMarkBg: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 角标文字颜色
|
||||
cornerMarkColor: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
// 开放能力
|
||||
openType: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 发送内容 openType="contact"时有效
|
||||
sendData: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
title: '',
|
||||
path: '',
|
||||
img: ''
|
||||
};
|
||||
}
|
||||
},
|
||||
chatParam: {
|
||||
type: Object,
|
||||
default: function(){
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
components:{
|
||||
nsContact
|
||||
},
|
||||
methods: {
|
||||
clickEvent() {
|
||||
this.$emit('click');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.action-icon-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 100rpx;
|
||||
min-width: 90rpx;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
.action-icon-wrap button {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
border: none;
|
||||
z-index: 1;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.action-icon-wrap button::after {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.action-icon-wrap .iconfont {
|
||||
margin: 0 auto 10rpx;
|
||||
line-height: 1;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.action-icon-wrap .corner-mark {
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
font-size: $font-size-activity-tag;
|
||||
top: 4rpx;
|
||||
right: 12rpx;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
padding: 6rpx;
|
||||
border-radius: 50%;
|
||||
&.max{
|
||||
right:-4rpx;
|
||||
width: 40rpx;
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.action-icon-wrap text {
|
||||
font-size: $font-size-tag;
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
@@ -1,33 +0,0 @@
|
||||
<template>
|
||||
<view class="ns-goods-action bottom-safe-area" :class="{ 'bottom-safe-area': safeArea }"><slot></slot></view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ns-goods-action',
|
||||
props: {
|
||||
safeArea: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.ns-goods-action {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
z-index: 9;
|
||||
}
|
||||
.ns-goods-action.bottom-safe-area {
|
||||
padding-bottom: 0;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
</style>
|
||||
@@ -1,125 +0,0 @@
|
||||
<template>
|
||||
<!-- 当前商品参与的营销活动入口 -->
|
||||
<view class="ns-goods-promotion" v-if="goodsPromotion.length">
|
||||
<view v-for="(item, index) in goodsPromotion" v-if="promotion != item.promotion_type" :key="index">
|
||||
<view v-if="item.promotion_type == 'discount'" class="item" @click="redirectTo('/pages_goods/detail', { goods_id: item.goods_id })">
|
||||
<text class="promotion-mark ">限时折扣</text>
|
||||
<text class="title">当前商品正在参加{{ item.promotion_name }}</text>
|
||||
<text class="iconfont icon-right"></text>
|
||||
<!-- <view class="img-wrap"><image :src="$util.img('public/uniapp/goods/detail_more.png')" mode="aspectFit" /></view> -->
|
||||
</view>
|
||||
<view v-else-if="item.promotion_type == 'groupbuy'" class="item" @click="redirectTo('/pages_promotion/groupbuy/detail', { groupbuy_id: item.groupbuy_id })">
|
||||
<!-- <view v-else-if="item.promotion_type == 'groupbuy'" class="item" @click="redirectTo('/pages_promotion/groupbuy/detail', { id: item.groupbuy_id })"> -->
|
||||
<text class="promotion-mark ">团购</text>
|
||||
<text class="title">当前商品正在参加{{ item.promotion_name }}</text>
|
||||
<text class="iconfont icon-right"></text>
|
||||
<!-- <view class="img-wrap"><image :src="$util.img('public/uniapp/goods/detail_more.png')" mode="aspectFit" /></view> -->
|
||||
</view>
|
||||
<view v-else-if="item.promotion_type == 'pintuan'" class="item" @click="redirectTo('/pages_promotion/pintuan/detail', { pintuan_id: item.pintuan_id })">
|
||||
<text class="promotion-mark ">拼团</text>
|
||||
<text class="title">当前商品正在参加{{ item.promotion_name }}</text>
|
||||
<text class="iconfont icon-right"></text>
|
||||
<!-- <view class="img-wrap"><image :src="$util.img('public/uniapp/goods/detail_more.png')" mode="aspectFit" /></view> -->
|
||||
</view>
|
||||
<view v-else-if="item.promotion_type == 'seckill'" class="item" @click="redirectTo('/pages_promotion/seckill/detail', { seckill_id: item.id })">
|
||||
<text class="promotion-mark ">秒杀</text>
|
||||
<text class="title">当前商品正在参加{{ item.promotion_name }}</text>
|
||||
<text class="iconfont icon-right"></text>
|
||||
<!-- <view class="img-wrap"><image :src="$util.img('public/uniapp/goods/detail_more.png')" mode="aspectFit" /></view> -->
|
||||
</view>
|
||||
<view v-else-if="item.promotion_type == 'topic'" class="item" @click="redirectTo('/pages_promotion/topics/goods_detail', { id: item.id })">
|
||||
<text class="promotion-mark ">专题活动</text>
|
||||
<text class="title">当前商品正在参加{{ item.promotion_name }}</text>
|
||||
<text class="iconfont icon-right"></text>
|
||||
<!-- <view class="img-wrap"><image :src="$util.img('public/uniapp/goods/detail_more.png')" mode="aspectFit" /></view> -->
|
||||
</view>
|
||||
<view v-else-if="item.promotion_type == 'bargain'" class="item" @click="redirectTo('/pages_promotion/bargain/detail', { b_id: item.bargain_id })">
|
||||
<text class="promotion-mark ">砍价</text>
|
||||
<text class="title">当前商品正在参加{{ item.promotion_name }}</text>
|
||||
<text class="iconfont icon-right"></text>
|
||||
<!-- <view class="img-wrap"><image :src="$util.img('public/uniapp/goods/detail_more.png')" mode="aspectFit" /></view> -->
|
||||
</view>
|
||||
<view v-else-if="item.promotion_type == 'pinfan'" class="item" @click="redirectTo('/pages_promotion/pinfan/detail', { pinfan_id: item.pintuan_id })">
|
||||
<text class="promotion-mark ">拼团返利</text>
|
||||
<text class="title">当前商品正在参加{{ item.promotion_name }}</text>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ns-goods-promotion',
|
||||
props: {
|
||||
promotion: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
goodsPromotion: {
|
||||
type: Array
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
refresh(goodsPromotion) {
|
||||
this.goodsPromotion = goodsPromotion;
|
||||
},
|
||||
redirectTo(path, param) {
|
||||
this.$util.redirectTo(path, param);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.ns-goods-promotion {
|
||||
background-color: #fff;
|
||||
& > view {
|
||||
}
|
||||
.item {
|
||||
display: flex;
|
||||
font-size: $font-size-base;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 2rpx solid $color-line;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.promotion-mark {
|
||||
padding: 12rpx 14rpx;
|
||||
margin-right: 16rpx;
|
||||
line-height: 1;
|
||||
color: var(--main-color);
|
||||
border-radius: 6rpx;
|
||||
font-size: $font-size-tag;
|
||||
font-weight: bold;
|
||||
background-color: var(--main-color-shallow);
|
||||
}
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
color: $color-tip;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
|
||||
.img-wrap {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -521,38 +521,16 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import nsGoodsAction from '@/pages_goods/components/ns-goods-action/ns-goods-action.vue';
|
||||
import nsGoodsActionIcon from '@/pages_goods/components/ns-goods-action-icon/ns-goods-action-icon.vue';
|
||||
import nsGoodsActionButton from '@/pages_goods/components/ns-goods-action-button/ns-goods-action-button.vue';
|
||||
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
||||
import nsGoodsSku from '@/components/ns-goods-sku/ns-goods-sku.vue';
|
||||
import uniCountDown from '@/components/uni-count-down/uni-count-down.vue';
|
||||
import detail from './public/js/detail.js';
|
||||
import scroll from '@/common/js/scroll-view.js';
|
||||
import toTop from '@/components/toTop/toTop.vue';
|
||||
import nsGoodsPromotion from '@/pages_goods/components/ns-goods-promotion/ns-goods-promotion.vue';
|
||||
import goodsDetailBase from '@/common/js/goods_detail_base.js';
|
||||
import goodsDetailView from '@/pages_goods/components/goods-detail-view/goods-detail-view.vue';
|
||||
// 按需引入全局组件
|
||||
import nsLogin from '@/components/ns-login/ns-login.vue';
|
||||
import loadingCover from '@/components/loading-cover/loading-cover.vue';
|
||||
// #ifdef MP-WEIXIN
|
||||
import privacyPopup from '@/components/wx-privacy-popup/privacy-popup.vue';
|
||||
// #endif
|
||||
|
||||
export default {
|
||||
components: {
|
||||
nsGoodsAction,
|
||||
nsGoodsActionIcon,
|
||||
nsGoodsActionButton,
|
||||
uniPopup,
|
||||
nsGoodsSku,
|
||||
uniCountDown,
|
||||
nsGoodsPromotion,
|
||||
goodsDetailView,
|
||||
toTop,
|
||||
nsLogin,
|
||||
loadingCover,
|
||||
// #ifdef MP-WEIXIN
|
||||
privacyPopup,
|
||||
// #endif
|
||||
|
||||
@@ -1,34 +1,43 @@
|
||||
<template>
|
||||
<view class="content" :style="themeColor">
|
||||
<view class="content" :style="themeColor">
|
||||
<view class="head-wrap">
|
||||
<!-- 搜索区域 -->
|
||||
<view class="search-wrap uni-flex uni-row">
|
||||
<view class="flex-item input-wrap">
|
||||
<input class="uni-input" maxlength="50" v-model="keyword" @confirm="search()" :placeholder="langstatus?$lang('Search'):'请输入您要搜索的商品'" />
|
||||
<input class="uni-input" maxlength="50" v-model="keyword" @confirm="search()"
|
||||
:placeholder="langstatus ? $lang('Search') : '请输入您要搜索的商品'" />
|
||||
<text class="iconfont icon-sousuo3" @click.stop="search()"></text>
|
||||
</view>
|
||||
<view class="iconfont" :class="{ 'icon-apps': isList, 'icon-list': !isList }" @click="changeListStyle()"></view>
|
||||
<view class="iconfont" :class="{ 'icon-apps': isList, 'icon-list': !isList }"
|
||||
@click="changeListStyle()"></view>
|
||||
</view>
|
||||
|
||||
<!-- 排序 -->
|
||||
<view class="sort-wrap">
|
||||
<view class="comprehensive-wrap" :class="{ 'color-base-text': orderType === '' }" @click="sortTabClick('')">
|
||||
<text :class="{ 'color-base-text': orderType === '' }">{{langstatus?$lang('Random'):'综合'}}</text>
|
||||
<view class="comprehensive-wrap" :class="{ 'color-base-text': orderType === '' }"
|
||||
@click="sortTabClick('')">
|
||||
<text :class="{ 'color-base-text': orderType === '' }">{{ langstatus ? $lang('Random') : '综合' }}</text>
|
||||
</view>
|
||||
|
||||
<view :class="{ 'color-base-text': orderType === 'sale_num' }" @click="sortTabClick('sale_num')">{{langstatus?$lang('Sales'):'销量'}}
|
||||
<view :class="{ 'color-base-text': orderType === 'sale_num' }" @click="sortTabClick('sale_num')">
|
||||
{{ langstatus ? $lang('Sales') : '销量' }}
|
||||
</view>
|
||||
|
||||
<view class="price-wrap" @click="sortTabClick('discount_price')">
|
||||
<text :class="{ 'color-base-text': orderType === 'discount_price' }">{{langstatus?$lang('Price'):'价格'}}</text>
|
||||
<text
|
||||
:class="{ 'color-base-text': orderType === 'discount_price' }">{{ langstatus ? $lang('Price') : '价格' }}</text>
|
||||
<view class="iconfont-wrap">
|
||||
<view class="iconfont icon-iconangledown-copy asc" :class="{ 'color-base-text': priceOrder === 'asc' && orderType === 'discount_price' }"></view>
|
||||
<view class="iconfont icon-iconangledown desc" :class="{ 'color-base-text': priceOrder === 'desc' && orderType === 'discount_price' }"></view>
|
||||
<view class="iconfont icon-iconangledown-copy asc"
|
||||
:class="{ 'color-base-text': priceOrder === 'asc' && orderType === 'discount_price' }">
|
||||
</view>
|
||||
<view class="iconfont icon-iconangledown desc"
|
||||
:class="{ 'color-base-text': priceOrder === 'desc' && orderType === 'discount_price' }">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view :class="{ 'color-base-text': orderType === 'screen' }" class="screen-wrap">
|
||||
<text @click="sortTabClick('screen')">{{langstatus?$lang('Filter'):'筛选'}}</text>
|
||||
<text @click="sortTabClick('screen')">{{ langstatus ? $lang('Filter') : '筛选' }}</text>
|
||||
<view @click="sortTabClick('screen')" class="iconfont-wrap">
|
||||
<view class="iconfont icon-shaixuan color-tip"></view>
|
||||
</view>
|
||||
@@ -39,18 +48,21 @@
|
||||
<mescroll-uni top="180" ref="mescroll" @getData="getGoodsList">
|
||||
<block slot="list">
|
||||
<view class="goods-list single-column" :class="{ show: isList }">
|
||||
<view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="index" @click="toDetail(item)">
|
||||
<view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="index"
|
||||
@click="toDetail(item)">
|
||||
<view class="goods-img">
|
||||
<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)"></image>
|
||||
<view class="color-base-bg goods-tag" v-if="goodsTag(item) != ''">{{ goodsTag(item) }}</view>
|
||||
<view class="color-base-bg goods-tag" v-if="goodsTag(item) != ''">{{ goodsTag(item) }}
|
||||
</view>
|
||||
<view class="sell-out" v-if="item.goods_stock <= 0">
|
||||
<text class="iconfont icon-shuqing"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-wrap">
|
||||
<view class="name-wrap">
|
||||
<view class="goods-name" :class="[{ 'using-hidden': config.nameLineMode == 'single' }, { 'multi-hidden': config.nameLineMode == 'multiple' }]">
|
||||
|
||||
<view class="goods-name"
|
||||
:class="[{ 'using-hidden': config.nameLineMode == 'single' }, { 'multi-hidden': config.nameLineMode == 'multiple' }]">
|
||||
|
||||
{{ isEnEnv ? item.en_goods_name : item.goods_name }}
|
||||
</view>
|
||||
</view>
|
||||
@@ -58,15 +70,18 @@
|
||||
<view class="lineheight-clear">
|
||||
<view class="discount-price" v-if="item.isinformation == 0">
|
||||
<text class="unit price-style small">{{ $lang('common.currencySymbol') }}</text>
|
||||
<text class="price price-style large">{{ parseFloat(showPrice(item)).toFixed(2).split('.')[0] }}</text>
|
||||
<text class="unit price-style small">.{{ parseFloat(showPrice(item)).toFixed(2).split('.')[1] }}</text>
|
||||
<text class="price price-style large">{{
|
||||
parseFloat(showPrice(item)).toFixed(2).split('.')[0] }}</text>
|
||||
<text class="unit price-style small">.{{
|
||||
parseFloat(showPrice(item)).toFixed(2).split('.')[1] }}</text>
|
||||
</view>
|
||||
<view class="discount-price" v-else>
|
||||
<text class="price price-style large">{{langstatus?$lang('Make'):'询底价'}}</text>
|
||||
<text class="price price-style large">{{ langstatus ? $lang('Make') : '询底价' }}</text>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="member-price-tag" v-if="item.member_price && item.member_price == showPrice(item)">
|
||||
|
||||
|
||||
<view class="member-price-tag"
|
||||
v-if="item.member_price && item.member_price == showPrice(item)">
|
||||
<image :src="$util.img('public/uniapp/index/VIP.png')" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="member-price-tag" v-else-if="item.promotion_type == 1">
|
||||
@@ -79,34 +94,35 @@
|
||||
<text>{{ showMarketPrice(item) }}</text>
|
||||
</view>
|
||||
<view class="block-wrap">
|
||||
<view class="sale color-tip" v-if="item.sale_show">已售{{ item.sale_num }}{{ item.unit ? item.unit : '件' }}</view>
|
||||
<view class="sale color-tip" v-if="item.sale_show">已售{{ item.sale_num }}{{ item.unit
|
||||
? item.unit : '件' }}</view>
|
||||
</view>
|
||||
<view class="cart-action-wrap" v-if="config.control && item.is_virtual == 0">
|
||||
<!-- 购物车图标 -->
|
||||
<view v-if="config.style == 'icon-cart'" :style="{
|
||||
color: config.theme == 'diy' ? config.textColor : '',
|
||||
borderColor: config.theme == 'diy' ? config.textColor : ''
|
||||
}" class="cart shopping-cart-btn iconfont icon-gouwuche click-wrap" :id="'goods-' + item.id"
|
||||
color: config.theme == 'diy' ? config.textColor : '',
|
||||
borderColor: config.theme == 'diy' ? config.textColor : ''
|
||||
}" class="cart shopping-cart-btn iconfont icon-gouwuche click-wrap" :id="'goods-' + item.id"
|
||||
@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
|
||||
<view class="click-event"></view>
|
||||
</view>
|
||||
|
||||
<!--加号图标 -->
|
||||
<view v-else-if="config.style == 'icon-add'" :style="{
|
||||
color: config.theme == 'diy' ? config.textColor : '',
|
||||
borderColor: config.theme == 'diy' ? config.textColor : ''
|
||||
}" class="cart plus-sign-btn iconfont icon-add1 click-wrap" :id="'goods-' + item.id"
|
||||
color: config.theme == 'diy' ? config.textColor : '',
|
||||
borderColor: config.theme == 'diy' ? config.textColor : ''
|
||||
}" class="cart plus-sign-btn iconfont icon-add1 click-wrap" :id="'goods-' + item.id"
|
||||
@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
|
||||
<view class="click-event"></view>
|
||||
</view>
|
||||
|
||||
<!-- 按钮 -->
|
||||
<view v-else-if="config.style == 'button'" :style="{
|
||||
backgroundColor: config.theme == 'diy' ? config.bgColor : '',
|
||||
color: config.theme == 'diy' ? config.textColor : '',
|
||||
fontWeight: config.theme == 'diy' ? (config.fontWeight ? 'bold' : 'normal') : '',
|
||||
padding: config.theme == 'diy' ? '12rpx ' + config.padding * 2 + 'rpx' : ''
|
||||
}" class="cart buy-btn click-wrap" :id="'goods-' + item.id"
|
||||
backgroundColor: config.theme == 'diy' ? config.bgColor : '',
|
||||
color: config.theme == 'diy' ? config.textColor : '',
|
||||
fontWeight: config.theme == 'diy' ? (config.fontWeight ? 'bold' : 'normal') : '',
|
||||
padding: config.theme == 'diy' ? '12rpx ' + config.padding * 2 + 'rpx' : ''
|
||||
}" class="cart buy-btn click-wrap" :id="'goods-' + item.id"
|
||||
@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
|
||||
{{ config.text }}
|
||||
<view class="click-event"></view>
|
||||
@@ -114,11 +130,12 @@
|
||||
|
||||
<!--自定义图标 -->
|
||||
<view v-else-if="config.style == 'icon-diy'" :style="{
|
||||
color: config.theme == 'diy' ? config.textColor : ''
|
||||
}" class="icon-diy click-wrap" :id="'goods-' + item.id"
|
||||
color: config.theme == 'diy' ? config.textColor : ''
|
||||
}" class="icon-diy click-wrap" :id="'goods-' + item.id"
|
||||
@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
|
||||
<view class="click-event"></view>
|
||||
<diy-icon :icon="config.iconDiy.icon" :value="config.iconDiy.style ? config.iconDiy.style : null"></diy-icon>
|
||||
<diy-icon :icon="config.iconDiy.icon"
|
||||
:value="config.iconDiy.style ? config.iconDiy.style : null"></diy-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -127,29 +144,35 @@
|
||||
</view>
|
||||
<view class="goods-list double-column" :class="{ show: !isList }">
|
||||
<view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="index"
|
||||
@click="toDetail(item)" :style="{ left: listPosition[index] ? listPosition[index].left : '', top: listPosition[index] ? listPosition[index].top : '' }">
|
||||
@click="toDetail(item)"
|
||||
:style="{ left: listPosition[index] ? listPosition[index].left : '', top: listPosition[index] ? listPosition[index].top : '' }">
|
||||
<view class="goods-img">
|
||||
<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)"></image>
|
||||
<view class="color-base-bg goods-tag" v-if="goodsTag(item) != ''">{{ goodsTag(item) }}</view>
|
||||
<view class="color-base-bg goods-tag" v-if="goodsTag(item) != ''">{{ goodsTag(item) }}
|
||||
</view>
|
||||
<view class="sell-out" v-if="item.stock <= 0">
|
||||
<text class="iconfont icon-shuqing"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-wrap">
|
||||
<view class="goods-name" :class="[{ 'using-hidden': config.nameLineMode == 'single' }, { 'multi-hidden': config.nameLineMode == 'multiple' }]">
|
||||
<view class="goods-name"
|
||||
:class="[{ 'using-hidden': config.nameLineMode == 'single' }, { 'multi-hidden': config.nameLineMode == 'multiple' }]">
|
||||
{{ isEnEnv ? item.en_goods_name : item.goods_name }}
|
||||
</view>
|
||||
|
||||
|
||||
<view class="lineheight-clear">
|
||||
<view class="discount-price" v-if="item.isinformation == 0">
|
||||
<text class="unit price-style small">{{ $lang('common.currencySymbol') }}</text>
|
||||
<text class="price price-style large">{{ parseFloat(showPrice(item)).toFixed(2).split('.')[0] }}</text>
|
||||
<text class="unit price-style small">.{{ parseFloat(showPrice(item)).toFixed(2).split('.')[1] }}</text>
|
||||
<text class="price price-style large">{{
|
||||
parseFloat(showPrice(item)).toFixed(2).split('.')[0] }}</text>
|
||||
<text class="unit price-style small">.{{
|
||||
parseFloat(showPrice(item)).toFixed(2).split('.')[1] }}</text>
|
||||
</view>
|
||||
<view class="discount-price" v-else>
|
||||
<text class="price price-style large">{{langstatus?$lang('Make'):'询底价'}}</text>
|
||||
<text class="price price-style large">{{ langstatus ? $lang('Make') : '询底价' }}</text>
|
||||
</view>
|
||||
<view class="member-price-tag" v-if="item.member_price && item.member_price == showPrice(item)">
|
||||
<view class="member-price-tag"
|
||||
v-if="item.member_price && item.member_price == showPrice(item)">
|
||||
<image :src="$util.img('public/uniapp/index/VIP.png')" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="member-price-tag" v-else-if="item.promotion_type == 1">
|
||||
@@ -160,48 +183,50 @@
|
||||
<text>{{ showMarketPrice(item) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pro-info" v-if="item.isinformation == 0">
|
||||
<view class="block-wrap" >
|
||||
<view class="sale color-tip" v-if="item.sale_show">已售{{ item.sale_num }}{{ item.unit ? item.unit : '件' }}</view>
|
||||
<view class="pro-info" v-if="item.isinformation == 0">
|
||||
<view class="block-wrap">
|
||||
<view class="sale color-tip" v-if="item.sale_show">已售{{ item.sale_num }}{{ item.unit
|
||||
? item.unit : '件' }}</view>
|
||||
</view>
|
||||
<view class="cart-action-wrap" v-if="config.control && item.is_virtual == 0">
|
||||
<!-- 购物车图标 -->
|
||||
<view v-if="config.style == 'icon-cart'" :style="{
|
||||
color: config.theme == 'diy' ? config.textColor : '',
|
||||
borderColor: config.theme == 'diy' ? config.textColor : ''
|
||||
}" class="cart shopping-cart-btn iconfont icon-gouwuche click-wrap" :id="'goods-' + item.id"
|
||||
color: config.theme == 'diy' ? config.textColor : '',
|
||||
borderColor: config.theme == 'diy' ? config.textColor : ''
|
||||
}" class="cart shopping-cart-btn iconfont icon-gouwuche click-wrap" :id="'goods-' + item.id"
|
||||
@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
|
||||
<view class="click-event"></view>
|
||||
</view>
|
||||
|
||||
|
||||
<!--加号图标 -->
|
||||
<view v-else-if="config.style == 'icon-add'" :style="{
|
||||
color: config.theme == 'diy' ? config.textColor : '',
|
||||
borderColor: config.theme == 'diy' ? config.textColor : ''
|
||||
}" class="cart plus-sign-btn iconfont icon-add1 click-wrap" :id="'goods-' + item.id"
|
||||
color: config.theme == 'diy' ? config.textColor : '',
|
||||
borderColor: config.theme == 'diy' ? config.textColor : ''
|
||||
}" class="cart plus-sign-btn iconfont icon-add1 click-wrap" :id="'goods-' + item.id"
|
||||
@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
|
||||
<view class="click-event"></view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 按钮 -->
|
||||
<view v-else-if="config.style == 'button'" :style="{
|
||||
backgroundColor: config.theme == 'diy' ? config.bgColor : '',
|
||||
color: config.theme == 'diy' ? config.textColor : '',
|
||||
fontWeight: config.theme == 'diy' ? (config.fontWeight ? 'bold' : 'normal') : '',
|
||||
padding: config.theme == 'diy' ? '12rpx ' + config.padding * 2 + 'rpx' : ''
|
||||
}" class="cart buy-btn click-wrap" :id="'goods-' + item.id"
|
||||
backgroundColor: config.theme == 'diy' ? config.bgColor : '',
|
||||
color: config.theme == 'diy' ? config.textColor : '',
|
||||
fontWeight: config.theme == 'diy' ? (config.fontWeight ? 'bold' : 'normal') : '',
|
||||
padding: config.theme == 'diy' ? '12rpx ' + config.padding * 2 + 'rpx' : ''
|
||||
}" class="cart buy-btn click-wrap" :id="'goods-' + item.id"
|
||||
@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
|
||||
{{ config.text }}
|
||||
<view class="click-event"></view>
|
||||
</view>
|
||||
|
||||
|
||||
<!--自定义图标 -->
|
||||
<view v-else-if="config.style == 'icon-diy'" :style="{
|
||||
color: config.theme == 'diy' ? config.textColor : ''
|
||||
}" class="icon-diy click-wrap" :id="'goods-' + item.id"
|
||||
color: config.theme == 'diy' ? config.textColor : ''
|
||||
}" class="icon-diy click-wrap" :id="'goods-' + item.id"
|
||||
@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
|
||||
<view class="click-event"></view>
|
||||
<diy-icon :icon="config.iconDiy.icon" :value="config.iconDiy.style ? config.iconDiy.style : null"></diy-icon>
|
||||
<diy-icon :icon="config.iconDiy.icon"
|
||||
:value="config.iconDiy.style ? config.iconDiy.style : null"></diy-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -219,7 +244,7 @@
|
||||
<view class="title color-tip">筛选</view>
|
||||
<scroll-view scroll-y>
|
||||
<!-- 包邮 -->
|
||||
<!-- <view class="item-wrap">
|
||||
<!-- <view class="item-wrap">
|
||||
<view class="label"><text>是否包邮</text></view>
|
||||
<view class="list">
|
||||
<uni-tag :inverted="true" text="包邮" :type="isFreeShipping ? 'primary' : 'default'" @click="isFreeShipping = !isFreeShipping" />
|
||||
@@ -227,7 +252,7 @@
|
||||
</view> -->
|
||||
|
||||
<!-- 价格筛选项 -->
|
||||
<!-- <view class="item-wrap">
|
||||
<!-- <view class="item-wrap">
|
||||
<view class="label"><text>价格区间(元)</text></view>
|
||||
<view class="price-wrap">
|
||||
<input class="uni-input" type="digit" v-model="minPrice" placeholder="最低价" />
|
||||
@@ -237,7 +262,7 @@
|
||||
</view> -->
|
||||
|
||||
<!-- 品牌筛选项 -->
|
||||
<!-- <view class="item-wrap" v-if="brandList.length > 0">
|
||||
<!-- <view class="item-wrap" v-if="brandList.length > 0">
|
||||
<view class="label"><text>品牌</text></view>
|
||||
<view class="list">
|
||||
<view v-for="(item, index) in brandList" :key="index">
|
||||
@@ -253,8 +278,11 @@
|
||||
<view @click="selectedCategory('')" class="list-wrap">
|
||||
<text :class="{ selected: !categoryId, 'color-base-text': !categoryId }">全部</text>
|
||||
</view>
|
||||
<view @click="selectedCategory(item.category_id)" v-for="(item, index) in categoryList" :key="index" class="list-wrap">
|
||||
<text :class="{ selected: item.category_id == categoryId, 'color-base-text': item.category_id == categoryId }">{{ item.category_name }}</text>
|
||||
<view @click="selectedCategory(item.category_id)" v-for="(item, index) in categoryList"
|
||||
:key="index" class="list-wrap">
|
||||
<text
|
||||
:class="{ selected: item.category_id == categoryId, 'color-base-text': item.category_id == categoryId }">{{
|
||||
item.category_name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -274,50 +302,40 @@
|
||||
<!-- 底部tabBar -->
|
||||
<view id="tab-bar">
|
||||
<diy-bottom-nav></diy-bottom-nav>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';
|
||||
import uniTag from '@/components/uni-tag/uni-tag.vue';
|
||||
import nsGoodsSkuIndex from '@/components/ns-goods-sku/ns-goods-sku-index.vue';
|
||||
import nsEmpty from '@/components/ns-empty/ns-empty.vue';
|
||||
import MescrollUni from "@/components/mescroll/my-list-mescroll.vue";
|
||||
import loadingCover from '@/components/loading-cover/loading-cover.vue';
|
||||
// #ifdef MP-WEIXIN
|
||||
import privacyPopup from '@/components/wx-privacy-popup/privacy-popup.vue';
|
||||
// #endif
|
||||
import list from './public/js/list.js';
|
||||
import MescrollUni from "@/components/mescroll/my-list-mescroll.vue";
|
||||
// #ifdef MP-WEIXIN
|
||||
import privacyPopup from '@/components/wx-privacy-popup/privacy-popup.vue';
|
||||
// #endif
|
||||
import list from './public/js/list.js';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
uniDrawer,
|
||||
uniTag,
|
||||
nsGoodsSkuIndex,
|
||||
nsEmpty,
|
||||
export default {
|
||||
components: {
|
||||
MescrollUni,
|
||||
loadingCover,
|
||||
// #ifdef MP-WEIXIN
|
||||
privacyPopup
|
||||
// #endif
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mixins: [list]
|
||||
};
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mixins: [list]
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './public/css/list.scss';
|
||||
@import './public/css/list.scss';
|
||||
</style>
|
||||
<style scoped>
|
||||
>>>.uni-tag--primary.uni-tag--inverted {
|
||||
background-color: #f5f5f5 !important;
|
||||
}
|
||||
>>>.uni-tag--primary.uni-tag--inverted {
|
||||
background-color: #f5f5f5 !important;
|
||||
}
|
||||
|
||||
/deep/ .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
||||
max-height: unset !important;
|
||||
}
|
||||
/deep/ .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
||||
max-height: unset !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user