ZF sun
1bf8a4a9b2
1. 移除多处重复的@click和@tap事件，只保留必要的@tap 2. 修复scoped样式穿透语法，补全样式文件末尾换行 3. 统一调整隐私弹窗、搜索页等页面的样式写法
290 lines
13 KiB
Vue
290 lines
13 KiB
Vue
<template>
|
|
<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="$lang('searchPlaceholder')" />
|
|
<text class="iconfont icon-sousuo3" @click.stop="search()"></text>
|
|
</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 === '' }">{{ $lang('sort.comprehensive') }}</text>
|
|
</view>
|
|
|
|
<view :class="{ 'color-base-text': orderType === 'sale_num' }" @click="sortTabClick('sale_num')">{{ $lang('sort.sales') }}
|
|
</view>
|
|
|
|
<view class="price-wrap" @click="sortTabClick('discount_price')">
|
|
<text
|
|
:class="{ 'color-base-text': orderType === 'discount_price' }">{{ $lang('sort.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>
|
|
</view>
|
|
|
|
<view :class="{ 'color-base-text': orderType === 'screen' }" class="screen-wrap" @click="sortTabClick('screen')">
|
|
<text @click="sortTabClick('screen')">{{ $lang('sort.filter') }}</text>
|
|
<view @click="sortTabClick('screen')" class="iconfont-wrap">
|
|
<view class="iconfont icon-shaixuan color-tip"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<mescroll-uni top="180" ref="mescroll" @getData="getGoodsList">
|
|
<block slot="list">
|
|
<view v-if="isList" class="goods-list single-column" :class="{ show: isList }">
|
|
<view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="item.id"
|
|
@click="toDetail(item)">
|
|
<view class="goods-img">
|
|
<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)" show-menu-by-longpress ></image>
|
|
<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="name-wrap">
|
|
<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>
|
|
|
|
<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>
|
|
</view>
|
|
<view class="discount-price" v-else>
|
|
<text class="price price-style large">{{ $lang('goods.consultNow') }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="pro-info" v-if="item.isinformation == 0">
|
|
<view class="delete-price color-tip price-font" v-if="showMarketPrice(item)">
|
|
<text class="unit">{{ $lang('common.currencySymbol') }}</text>
|
|
<text>{{ showMarketPrice(item) }}</text>
|
|
</view>
|
|
<view class="block-wrap">
|
|
<view class="sale color-tip" v-if="item.sale_show">{{ $lang('goods.sold', { num: item.sale_num, unit: item.unit || $lang('goods.defaultUnit') }) }}</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"
|
|
@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"
|
|
@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"
|
|
@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"
|
|
@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>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="goods-list double-column" :class="{ show: !isList }">
|
|
<view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="item.id"
|
|
@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)" show-menu-by-longpress></image>
|
|
<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' }]">
|
|
{{ 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>
|
|
</view>
|
|
<view class="discount-price" v-else>
|
|
<text class="price price-style large">{{ $lang('goods.consultNow') }}</text>
|
|
</view>
|
|
<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" show-menu-by-longpress></image>
|
|
</view>
|
|
<view class="member-price-tag" v-else-if="item.promotion_type == 1">
|
|
<image :src="$util.img('public/uniapp/index/discount.png')" mode="widthFix" show-menu-by-longpress></image>
|
|
</view>
|
|
<view class="delete-price color-tip price-font" v-if="showMarketPrice(item)">
|
|
<text class="unit">{{ $lang('common.currencySymbol') }}</text>
|
|
<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">{{ $lang('goods.sold', { num: item.sale_num, unit: item.unit || $lang('goods.defaultUnit') }) }}</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"
|
|
@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"
|
|
@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"
|
|
@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"
|
|
@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>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="goodsList.length == 0 && emptyShow"><ns-empty :text="$lang('goods.noGoods')"></ns-empty></view>
|
|
</block>
|
|
</mescroll-uni>
|
|
|
|
<ns-goods-sku-index ref="goodsSkuIndex" @addCart="addCart"></ns-goods-sku-index>
|
|
|
|
<!-- 筛选弹出框 -->
|
|
<uni-drawer :visible="showScreen" mode="right" @close="showScreen = false" class="screen-wrap">
|
|
<view class="title color-tip">{{ $lang('filter.title') }}</view>
|
|
<scroll-view scroll-y>
|
|
<!-- 分类筛选项 -->
|
|
<view class="category-list-wrap">
|
|
<text class="first">{{ $lang('filter.allCategories') }}</text>
|
|
<view class="class-box">
|
|
<view @click="selectedCategory('')" class="list-wrap">
|
|
<text :class="{ selected: !categoryId, 'color-base-text': !categoryId }">{{ $lang('filter.all') }}</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>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="footer" :class="{ 'safe-area': isIphoneX }">
|
|
<button type="default" class="footer-box" @click="resetData">{{ $lang('filter.reset') }}</button>
|
|
<button type="primary" class="footer-box1" @click="screenData">{{ $lang('filter.confirm') }}</button>
|
|
</view>
|
|
</uni-drawer>
|
|
<loading-cover ref="loadingCover"></loading-cover>
|
|
|
|
<!-- 隐私弹窗 -->
|
|
<privacy-popup ref="privacyPopup"></privacy-popup>
|
|
|
|
<!-- 底部tabBar -->
|
|
<view id="tab-bar">
|
|
<diy-bottom-nav></diy-bottom-nav>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import list from './public/js/list.js';
|
|
|
|
export default {
|
|
data() {
|
|
return {};
|
|
},
|
|
mixins: [list],
|
|
methods: {}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import './public/css/list.scss';
|
|
</style>
|
|
<style scoped>
|
|
::v-deep .uni-tag--primary.uni-tag--inverted {
|
|
background-color: #f5f5f5 !important;
|
|
}
|
|
|
|
::v-deep .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
|
max-height: unset !important;
|
|
}
|
|
</style>
|