You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2086 lines
44 KiB
2086 lines
44 KiB
<template>
|
|
<view class="" :class="['category-page-wrap', 'category-template-' + value.template]">
|
|
<div class="search">
|
|
<searchSelect @search="searchData" />
|
|
<!-- <u-input placeholder="请输入商品名称/编号" border="surround" v-model="keyword" @confirm="searchData">
|
|
<div slot="suffix">
|
|
<u-icon size="24" name="search" color="#BFBFBF" @click="searchData"></u-icon>
|
|
</div>
|
|
</u-input> -->
|
|
</div>
|
|
|
|
<!-- 排序 -->
|
|
<view class="sort-wrap">
|
|
<view class="comprehensive-wrap" :class="{ 'color-base-text': orderType === '' }" @click="sortTabClick('')">
|
|
<text :class="{ 'color-base-text': orderType === '' }">综合</text>
|
|
</view>
|
|
|
|
<view :class="{ 'color-base-text': orderType === 'sale_num' }" @click="sortTabClick('sale_num')">
|
|
销量
|
|
</view>
|
|
|
|
<view class="price-wrap" @click="sortTabClick('discount_price')">
|
|
<text :class="{ 'color-base-text': orderType === 'discount_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">
|
|
<text @click="sortTabClick('screen')">筛选</text>
|
|
<view @click="sortTabClick('screen')" class="iconfont-wrap">
|
|
<view class="iconfont icon-shaixuan color-tip"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="content-box" v-if="categoryTree">
|
|
<block v-if="categoryTree.length">
|
|
<!-- 左侧分类栏 -->
|
|
<scroll-view scroll-y="true" class="tree-wrap">
|
|
<view class="category-item-wrap">
|
|
<view class="category-item" v-for="(item, index) in categoryTree" :key="index" :class="[
|
|
{ select: select == index },
|
|
{ 'border-bottom': value.template == 4 && select + 1 === index },
|
|
{ 'border-top': value.template == 4 && select - 1 === index }
|
|
]" @click="switchOneCategory(index)">
|
|
<view class="" :style="{ color: select === index ? 'var(--base-color)' : '' }">
|
|
{{ item.category_name }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<view class="right-flex-wrap">
|
|
<!-- 右侧商品 -->
|
|
<scroll-view scroll-y="true" class="content-wrap" v-if="value.template == 1 || loadType == 'all'"
|
|
ref="contentWrap" :scroll-into-view="categoryId" :scroll-with-animation="true"
|
|
@scroll="listenScroll" @touchstart="touchStart" :refresher-enabled="true"
|
|
refresher-default-style="none" :refresher-triggered="triggered" @refresherrefresh="onRefresh"
|
|
@refresherrestore="onRestore">
|
|
<view class="child-category" v-for="(item, index) in categoryTree" :key="index"
|
|
:id="'category-' + index">
|
|
<diy-category-item :category="item" :value="value" ref="categoryItem" :index="index"
|
|
:select="select" :oneCategorySelect="oneCategorySelect" @tologin="toLogin"
|
|
@selectsku="selectSku($event, index)" @addCart="addCartPoint"
|
|
@loadfinish="getHeightArea"></diy-category-item>
|
|
</view>
|
|
<view class="end-tips" ref="endTips" :style="{ opacity: endTips }">
|
|
已经到底了~
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<view class="content-wrap" v-if="
|
|
(value.template == 2 || value.template == 3 || value.template == 4) &&
|
|
loadType == 'part'
|
|
">
|
|
<view class="child-category-wrap" v-for="(item, index) in categoryTree" :key="index"
|
|
:id="'category-' + index" :style="{ display: select == index ? 'block' : 'none' }">
|
|
<diy-category-item :category="item" :value="value" ref="categoryItem" :index="index"
|
|
:last="index == categoryTree.length - 1 ? true : false" :select="select"
|
|
:oneCategorySelect="oneCategorySelect" @tologin="toLogin"
|
|
@selectsku="selectSku($event, index)" @addCart="addCartPoint"></diy-category-item>
|
|
<!-- @switch="switchOneCategory" -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<view class="category-empty" v-else>
|
|
<image :src="$util.img('public/uniapp/category/empty.png')" mode="widthFix"></image>
|
|
<view class="tips">暂时没有分类哦！</view>
|
|
</view>
|
|
<!-- 弹出 -->
|
|
</view>
|
|
|
|
<view class="cart-box" v-if="
|
|
false &&
|
|
(value.template == 2 || value.template == 4) &&
|
|
value.quickBuy &&
|
|
token &&
|
|
categoryTree &&
|
|
categoryTree.length
|
|
">
|
|
<view class="left-wrap">
|
|
<view class="cart-icon" ref="cartIcon" :animation="cartAnimation"
|
|
@click="$util.redirectTo('/pages/goods/cart')">
|
|
<text class="iconfont icon-ziyuan1"></text>
|
|
<view class="num" v-if="cartNumber">
|
|
{{ cartNumber < 99 ? cartNumber : '99+' }}
|
|
</view>
|
|
</view>
|
|
<view class="price">
|
|
<text class="title">总计：</text>
|
|
<text class="unit font-size-tag price-font">￥</text>
|
|
<text class="money font-size-toolbar price-font">{{ cartMoney[0] }}</text>
|
|
<text class="unit font-size-tag price-font">
|
|
.{{ cartMoney[1] ? cartMoney[1] : '00' }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view class="right-wrap">
|
|
<button type="primary" class="settlement-btn" @click="settlement">去结算</button>
|
|
</view>
|
|
</view>
|
|
<ns-goods-sku v-if="goodsSkuDetail.goods_id" ref="goodsSku" @refresh="refreshGoodsSkuDetail"
|
|
:goods-id="goodsSkuDetail.goods_id" :goods-detail="goodsSkuDetail" :max-buy="goodsSkuDetail.max_buy"
|
|
:min-buy="goodsSkuDetail.min_buy" @getSkuId="setSkuId"></ns-goods-sku>
|
|
<view class="cart-point" :style="{ left: item.left + 'px', top: item.top + 'px' }" :key="index"
|
|
v-for="(item, index) in carIconList"></view>
|
|
|
|
<ns-goods-sku-category ref="skuSelect" @addCart="addCartPoint"></ns-goods-sku-category>
|
|
<!-- <categoyr></categoyr> -->
|
|
<!-- 筛选弹出框 -->
|
|
<uni-drawer :visible="showScreen" mode="right" @close="showScreen = false" class="screen-wrap">
|
|
<view class="title color-tip">筛选</view>
|
|
<scroll-view scroll-y>
|
|
<!-- 价格筛选项 -->
|
|
<view class="item-wrap">
|
|
<view class="label"><text>价格区间(元)</text></view>
|
|
<view class="price-wrap">
|
|
<input class="uni-input" type="digit" v-model="min_price" placeholder="最低价" />
|
|
<view class="h-line"></view>
|
|
<input class="uni-input" type="digit" v-model="max_price" placeholder="最高价" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="item-wrap">
|
|
<view class="item-Manufacturer">生产厂家</view>
|
|
<view class="df aic fw">
|
|
<view v-for="(v, i) in BusinessList" :key="i" v-if="BusinessList.length">
|
|
<view class="manufactor df aic jcsa" :class="{ manufactorActive: Businessindexa == i }"
|
|
@click="selectBusiness(v, i)">
|
|
{{ v }}
|
|
</view>
|
|
</view>
|
|
|
|
<view v-else class="manufactor df aic jcsa">暂无生产厂家</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="footer df aic" :class="{ 'safe-area': isIphoneX }">
|
|
<view class="footer-btn " @click="resetData">重置</view>
|
|
<view class="footer-btn1 " @click="screenData">确定</view>
|
|
</view>
|
|
</uni-drawer>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// 获取系统状态栏的高度
|
|
let systemInfo = uni.getSystemInfoSync();
|
|
let menuButtonInfo = {};
|
|
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
|
|
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
|
|
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
|
// #endif
|
|
import nsGoodsSku from '@/components/ns-goods-sku/ns-goods-sku.vue';
|
|
import diyCategoryItem from '@/components/diy-components/diy-category-item.vue';
|
|
import nsGoodsSkuCategory from '@/components/ns-goods-sku/ns-goods-sku-category.vue';
|
|
var contentWrapHeight, query, cartPosition;
|
|
import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';
|
|
export default {
|
|
components: {
|
|
nsGoodsSkuCategory,
|
|
uniDrawer,
|
|
diyCategoryItem
|
|
},
|
|
name: 'diy-category',
|
|
props: {
|
|
value: {
|
|
type: Object,
|
|
default: () => {
|
|
return {};
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
value12: '',
|
|
goods_name: '',
|
|
discount_price: '',
|
|
goodsSkuDetail: {
|
|
goods_id: 0,
|
|
goods_service: []
|
|
},
|
|
sku_id: '',
|
|
unit: '',
|
|
stock: Number,
|
|
goods_image: '',
|
|
oneCategorySelect: 0,
|
|
select: 0,
|
|
indexa: -1,
|
|
categoryId: 'category-0',
|
|
categoryTree: [],
|
|
scrollLock: false,
|
|
triggered: false,
|
|
heightArea: [],
|
|
isSub: false,
|
|
token: null,
|
|
carIconList: {},
|
|
endTips: 0,
|
|
cartAnimation: {},
|
|
loadType: '',
|
|
templateFourData: [],
|
|
show12: false,
|
|
listStyle: '',
|
|
loadingType: 'loading', //加载更多状态
|
|
orderType: '',
|
|
priceOrder: 'desc', //1 价格从低到高 2价格从高到低
|
|
categoryList: [], //排序类型
|
|
goodsList: [],
|
|
order: '',
|
|
sort: 'desc',
|
|
showScreen: false,
|
|
keyword: '',
|
|
business: '',
|
|
categoryId: 0,
|
|
min_price: '',
|
|
max_price: '',
|
|
isFreeShipping: false, //是否免邮
|
|
isIphoneX: false,
|
|
coupon: 0,
|
|
emptyShow: false,
|
|
isList: true, //列表样式
|
|
//分享建立上下级所需id
|
|
memberId: 0,
|
|
//分享所需标题
|
|
share_title: '',
|
|
//搜索到多少件商品
|
|
count: 0,
|
|
//当前分类名称
|
|
category_title: '',
|
|
//优惠券数据
|
|
coupon_name: '',
|
|
//列表瀑布流数据
|
|
listHeight: [],
|
|
listPosition: [],
|
|
debounce: null,
|
|
brandId: 0,
|
|
brandList: [], //品牌筛选项
|
|
BusinessList: [],
|
|
Businessindexa: undefined
|
|
};
|
|
},
|
|
created() {
|
|
this.init();
|
|
},
|
|
mounted() {
|
|
query = uni.createSelectorQuery().in(this);
|
|
query
|
|
.select('.content-wrap')
|
|
.boundingClientRect(data => {
|
|
if (data) contentWrapHeight = data.height;
|
|
})
|
|
.exec();
|
|
setTimeout(() => {
|
|
query
|
|
.select('.end-tips')
|
|
.boundingClientRect(data => {
|
|
if (data && data.top > contentWrapHeight) this.endTips = 1;
|
|
})
|
|
.exec();
|
|
query
|
|
.select('.cart-icon')
|
|
.boundingClientRect(data => {
|
|
if (data) cartPosition = data;
|
|
})
|
|
.exec();
|
|
if (this.value.template == 1) this.getHeightArea(-1);
|
|
}, 500);
|
|
},
|
|
computed: {
|
|
cartMoney() {
|
|
let cartMoney = parseFloat(this.$store.state.cartMoney).toFixed(2);
|
|
return cartMoney.split('.');
|
|
},
|
|
cartNumber() {
|
|
return this.$store.state.cartNumber;
|
|
},
|
|
// 转换字符数值为真正的数值
|
|
navbarHeight() {
|
|
// #ifdef APP-PLUS || H5
|
|
return 44;
|
|
// #endif
|
|
// #ifdef MP
|
|
// 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
|
|
// 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
|
|
// return menuButtonInfo.height + (menuButtonInfo.top - this.navbarHeight) * 2;//导航高度
|
|
// let height = systemInfo.platform == 'ios' ? 44 : 48;
|
|
let height = menuButtonInfo.top;
|
|
// height += systemInfo.navbarHeight;
|
|
return height;
|
|
// #endif
|
|
},
|
|
// 导航栏内部盒子的样式
|
|
navbarInnerStyle() {
|
|
let style = '';
|
|
// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
|
|
// style += 'height:' + this.navbarHeight + 'px;';
|
|
style += 'height:' + menuButtonInfo.height * 2 + 'rpx;';
|
|
// // 如果是各家小程序，导航栏内部的宽度需要减少右边胶囊的宽度
|
|
style += 'padding-top:' + this.navbarHeight + 'px;';
|
|
// #ifdef MP
|
|
if (this.value.template == 4 && this.value.search) {
|
|
let rightButtonWidth = menuButtonInfo.width ?
|
|
menuButtonInfo.width * 2 + 'rpx' :
|
|
'70rpx';
|
|
style += 'padding-right:calc(' + rightButtonWidth + ' + 30rpx);';
|
|
}
|
|
// #endif
|
|
if (this.value.template != 4 || (this.value.template == 4 && !this.value.search)) {
|
|
style += 'text-align: center;';
|
|
style += 'line-height:' + menuButtonInfo.height * 2 + 'rpx;';
|
|
style += 'font-size: 24rpx;';
|
|
style += 'padding-bottom: 10rpx;';
|
|
}
|
|
return style;
|
|
}
|
|
},
|
|
watch: {
|
|
value() {
|
|
this.init();
|
|
}
|
|
},
|
|
methods: {
|
|
init() {
|
|
this.getCategoryTree();
|
|
this.$store.dispatch('getCartNumber');
|
|
this.token = uni.getStorageSync('token');
|
|
this.loadType = this.value.goodsLevel == 1 && this.value.loadType == 'all' ? 'all' : 'part';
|
|
this.loadCategoryList();
|
|
this.getBusinessList();
|
|
},
|
|
/**
|
|
* 选择生产厂家
|
|
*/
|
|
selectBusiness(item, index) {
|
|
this.Businessindexa = index;
|
|
this.business = item;
|
|
},
|
|
/**
|
|
* 获取生产厂家
|
|
*/
|
|
getBusinessList() {
|
|
this.$api.sendRequest({
|
|
url: '/api/goodssku/getBusinessList',
|
|
success: res => {
|
|
console.log(res);
|
|
this.BusinessList = res.data;
|
|
}
|
|
});
|
|
},
|
|
|
|
getCartCount() {
|
|
this.$store.dispatch('getCartNumber');
|
|
},
|
|
jian() {
|
|
if (this.value12.length == 0) {
|
|
this.value12 = 0;
|
|
}
|
|
if (this.value12 == 0) {
|
|
return;
|
|
}
|
|
this.value12--;
|
|
},
|
|
jia() {
|
|
if (this.value12.length == 0) {
|
|
this.value12 = 0;
|
|
}
|
|
if (this.value12 < this.stock) {
|
|
this.value12++;
|
|
} else {
|
|
this.$util.showToast({
|
|
title: '库存不足'
|
|
});
|
|
}
|
|
},
|
|
fatherMethod(item) {
|
|
console.log(item, 'item');
|
|
let _this = this;
|
|
this.goodsSkuDetail = item;
|
|
|
|
uni.removeStorageSync('buyer_message');
|
|
|
|
if (!uni.getStorageSync('token')) {
|
|
this.$refs.login.open(item); /* */
|
|
|
|
return;
|
|
}
|
|
|
|
this.$refs.goodsSku.show('join_cart', () => {
|
|
this.getCartCount();
|
|
_this.$util.showToast({
|
|
title: '加入购物车成功'
|
|
});
|
|
});
|
|
|
|
// let _this=this
|
|
// // console.log(_this.$refs['inputa']);
|
|
// // var inputb = document.querySelector('#inputa')
|
|
|
|
// this.goods_name=item.goods_name
|
|
// this.discount_price=item.discount_price
|
|
// this.unit=item.unit
|
|
// // this.value12=item.cart_num
|
|
// this.sku_id=item.sku_id
|
|
// this.goods_image=item.goods_image
|
|
// this.stock=item.stock
|
|
// this.show12=true
|
|
},
|
|
open() {
|
|
// console.log('open');
|
|
// document.querySelector('#tet input').focus()
|
|
// document.querySelector('#tet input').click()
|
|
// a.
|
|
// console.log(document.querySelector('#tet'));
|
|
// console.log();
|
|
},
|
|
close() {
|
|
console.log(111);
|
|
this.show = false;
|
|
console.log('close');
|
|
this.value12 = '';
|
|
},
|
|
Selectmanufacturer(index) {
|
|
this.indexa = index;
|
|
},
|
|
//搜索框
|
|
searchData(e) {
|
|
this.$util.redirectTo('/page_goods/goodsList/goodsList', { keyword: e });
|
|
},
|
|
resetData() {
|
|
this.min_price = '';
|
|
this.max_price = '';
|
|
this.business = [];
|
|
this.Businessindexa = undefined
|
|
},
|
|
screenData() {
|
|
if (this.min_price != '' || this.max_price != '') {
|
|
if (!Number(this.max_price) && this.max_price) {
|
|
this.$util.showToast({
|
|
title: '请输入最高价'
|
|
});
|
|
return;
|
|
}
|
|
if (Number(this.min_price) < 0 || Number(this.max_price) < 0) {
|
|
this.$util.showToast({
|
|
title: '筛选价格不能小于0'
|
|
});
|
|
return;
|
|
}
|
|
if (
|
|
this.min_price != '' &&
|
|
Number(this.min_price) > Number(this.max_price) &&
|
|
this.max_price
|
|
) {
|
|
this.$util.showToast({
|
|
title: '最低价不能大于最高价'
|
|
});
|
|
return;
|
|
}
|
|
if (this.max_price != '' && Number(this.max_price) < Number(this.min_price)) {
|
|
this.$util.showToast({
|
|
title: '最高价不能小于最低价'
|
|
});
|
|
return;
|
|
}
|
|
}
|
|
this.$refs.categoryItem[this.select].min_price = this.min_price;
|
|
this.$refs.categoryItem[this.select].max_price = this.max_price;
|
|
this.$refs.categoryItem[this.select].business = this.business;
|
|
this.showScreen = false;
|
|
},
|
|
//加载分类
|
|
loadCategoryList(fid, sid) {
|
|
this.$api.sendRequest({
|
|
url: '/api/goodscategory/tree',
|
|
data: {},
|
|
success: res => {
|
|
if (res.data != null) {
|
|
this.categoryList = res.data;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
selectedCategory(categoryId) {
|
|
this.categoryId = categoryId;
|
|
},
|
|
//筛选点击
|
|
sortTabClick(tag) {
|
|
if (tag == 'sale_num') {
|
|
this.order = 'sale_num';
|
|
this.sort = 'desc';
|
|
} else if (tag == 'discount_price') {
|
|
this.order = 'discount_price';
|
|
this.sort = 'desc';
|
|
} else if (tag == 'screen') {
|
|
//筛选
|
|
this.showScreen = true;
|
|
return;
|
|
} else {
|
|
this.order = '';
|
|
this.sort = '';
|
|
}
|
|
|
|
if (this.orderType === tag && tag !== 'discount_price') return;
|
|
|
|
this.orderType = tag;
|
|
if (tag === 'discount_price') {
|
|
this.priceOrder = this.priceOrder === 'asc' ? 'desc' : 'asc';
|
|
this.sort = this.priceOrder;
|
|
} else {
|
|
this.priceOrder = '';
|
|
}
|
|
|
|
this.emptyShow = false;
|
|
this.goodsList = [];
|
|
this.$refs.categoryItem[this.select].order = this.order;
|
|
this.$refs.categoryItem[this.select].sort = this.sort;
|
|
this.$refs.categoryItem[this.select].pageIndex = 1;
|
|
},
|
|
/**
|
|
* 页面显示
|
|
*/
|
|
pageShow() {
|
|
this.$store.dispatch('getCartNumber');
|
|
this.token = uni.getStorageSync('token');
|
|
if (!this.heightArea.length) this.getHeightArea(-1);
|
|
},
|
|
/**
|
|
* 获取高度区间
|
|
*/
|
|
getHeightArea(index) {
|
|
let heightArea = [];
|
|
query
|
|
.selectAll('.content-wrap .child-category')
|
|
.boundingClientRect(data => {
|
|
if (data && data.length) {
|
|
data.forEach((item, index) => {
|
|
if (index == 0) heightArea.push([0, item.height]);
|
|
else
|
|
heightArea.push([
|
|
heightArea[index - 1][1],
|
|
heightArea[index - 1][1] + item.height
|
|
]);
|
|
});
|
|
}
|
|
})
|
|
.exec();
|
|
this.heightArea = heightArea;
|
|
if (index != -1 && index < this.categoryTree.length - 1)
|
|
this.$refs.categoryItem[index + 1].getGoodsList();
|
|
},
|
|
/**
|
|
* 获取全部分类
|
|
*/
|
|
getCategoryTree() {
|
|
this.categoryTree = [];
|
|
this.$api.sendRequest({
|
|
url: '/api/goodscategory/tree',
|
|
data: {
|
|
level: 3
|
|
},
|
|
success: res => {
|
|
if (res.code == 0) {
|
|
this.categoryTree.push({
|
|
category_id: 0,
|
|
category_name: '全部商品',
|
|
level: 1,
|
|
pid: 0
|
|
});
|
|
this.categoryTree = [...this.categoryTree, ...res.data];
|
|
if (this.value.template == 4) {
|
|
this.templateFourData = JSON.parse(JSON.stringify(this.categoryTree));
|
|
this.categoryTree = this.templateFourData[0].child_list;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
/**
|
|
* 切换一级分类
|
|
* @param {Object} index
|
|
*/
|
|
switchOneCategory(index) {
|
|
if (index >= this.categoryTree.length) return;
|
|
this.select = index;
|
|
this.categoryId = 'category-' + index;
|
|
// 阻止切换分类之后滚动事件也立即执行
|
|
this.scrollLock = true;
|
|
this.$refs.categoryItem[this.select].order = '';
|
|
this.$refs.categoryItem[this.select].sort = '';
|
|
this.$refs.categoryItem[this.select].min_price = '';
|
|
this.$refs.categoryItem[this.select].max_price = '';
|
|
this.$refs.categoryItem[this.select].business = '';
|
|
// this.$refs.categoryItem[this.select].pageIndex = 1;
|
|
|
|
},
|
|
touchStart() {
|
|
this.scrollLock = false;
|
|
},
|
|
/**
|
|
* 监听滚动
|
|
* @param {Object} event
|
|
*/
|
|
listenScroll(event) {
|
|
if (this.scrollLock) return;
|
|
let scrollTop = event.detail.scrollTop;
|
|
if (this.heightArea.length) {
|
|
for (let i = 0; i < this.heightArea.length; i++) {
|
|
if (scrollTop >= this.heightArea[i][0] && scrollTop <= this.heightArea[i][1]) {
|
|
this.select = i;
|
|
break;
|
|
}
|
|
}
|
|
if (
|
|
this.value.template != 1 &&
|
|
this.value.loadType == 'all' &&
|
|
this.heightArea[this.select][1] - scrollTop - contentWrapHeight < 300
|
|
) {
|
|
this.$refs.categoryItem.getGoodsList();
|
|
}
|
|
}
|
|
},
|
|
onRefresh() {
|
|
this.triggered = false;
|
|
},
|
|
onRestore() {
|
|
this.triggered = 'restore'; // 需要重置
|
|
},
|
|
toLogin() {
|
|
this.$emit('tologin');
|
|
},
|
|
/**
|
|
* sku选择
|
|
* @param {Object} data
|
|
* @param {Object} index
|
|
*/
|
|
selectSku(data, index) {
|
|
this.$api.sendRequest({
|
|
url: '/api/goodssku/getInfoForCategory',
|
|
data: {
|
|
sku_id: data.sku_id
|
|
},
|
|
success: res => {
|
|
if (res.code >= 0) {
|
|
let data = res.data,
|
|
obj = {};
|
|
|
|
let item = res.data;
|
|
item.unit = item.unit || '件';
|
|
|
|
if (item.sku_images) item.sku_images = item.sku_images.split(',');
|
|
else item.sku_images = [];
|
|
|
|
// 多规格时合并主图
|
|
if (item.goods_spec_format && item.goods_image) {
|
|
item.goods_image = item.goods_image.split(',');
|
|
item.sku_images = item.goods_image.concat(item.sku_images);
|
|
}
|
|
|
|
// 当前商品SKU规格
|
|
if (item.sku_spec_format)
|
|
item.sku_spec_format = JSON.parse(item.sku_spec_format);
|
|
|
|
// 商品SKU格式
|
|
if (item.goods_spec_format)
|
|
item.goods_spec_format = JSON.parse(item.goods_spec_format);
|
|
|
|
this.emptyShow = false;
|
|
this.goodsList = [];
|
|
this.$refs.categoryItem[this.select].order = this.order;
|
|
this.$refs.categoryItem[this.select].pageIndex = 1;
|
|
this.$refs.categoryItem[this.select].sort = this.sort;
|
|
}
|
|
}
|
|
})
|
|
},
|
|
/**
|
|
* 页面显示
|
|
*/
|
|
pageShow() {
|
|
this.$store.dispatch('getCartNumber');
|
|
this.token = uni.getStorageSync('token');
|
|
if (!this.heightArea.length) this.getHeightArea(-1);
|
|
},
|
|
/**
|
|
* 获取高度区间
|
|
*/
|
|
getHeightArea(index) {
|
|
let heightArea = [];
|
|
query
|
|
.selectAll('.content-wrap .child-category')
|
|
.boundingClientRect(data => {
|
|
if (data && data.length) {
|
|
data.forEach((item, index) => {
|
|
if (index == 0) heightArea.push([0, item.height]);
|
|
else
|
|
heightArea.push([
|
|
heightArea[index - 1][1],
|
|
heightArea[index - 1][1] + item.height
|
|
]);
|
|
});
|
|
|
|
// 限时折扣
|
|
if (item.promotion_type == 1) {
|
|
item.discountTimeMachine = this.$util.countDown(
|
|
item.end_time - res.timestamp
|
|
);
|
|
|
|
}
|
|
|
|
if (item.promotion_type == 1 && item.discountTimeMachine) {
|
|
if (item.member_price > 0 && Number(item.member_price) <= Number(item
|
|
.discount_price)) {
|
|
item.show_price = item.member_price;
|
|
} else {
|
|
item.show_price = item.discount_price;
|
|
}
|
|
} else if (item.member_price > 0) {
|
|
item.show_price = item.member_price;
|
|
} else {
|
|
item.show_price = item.price;
|
|
}
|
|
|
|
this.$refs.skuSelect.show('join_cart', item, () => {});
|
|
}
|
|
|
|
})
|
|
|
|
|
|
},
|
|
settlement() {
|
|
let cartList = Object.keys(this.$store.state.cartList),
|
|
cartIds = [];
|
|
if (!cartList.length || this.isSub) return;
|
|
this.isSub = true;
|
|
|
|
cartList.forEach(key => {
|
|
cartIds.push(this.$store.state.cartList[key].cart_id);
|
|
});
|
|
|
|
uni.removeStorageSync('delivery');
|
|
uni.setStorage({
|
|
key: 'orderCreateData',
|
|
data: {
|
|
cart_ids: cartIds.toString()
|
|
},
|
|
success: () => {
|
|
this.$util.redirectTo('/page_goods/payment/payment');
|
|
this.isSub = false;
|
|
}
|
|
});
|
|
},
|
|
/**
|
|
* 添加点
|
|
* @param {Object} left
|
|
* @param {Object} top
|
|
*/
|
|
addCartPoint(left, top) {
|
|
if (this.value.template != 2 && !this.value.quickBuy) return;
|
|
|
|
let key = new Date().getTime();
|
|
this.$set(this.carIconList, key, {
|
|
left: left,
|
|
top: top,
|
|
index: 0,
|
|
bezierPos: this.$util.bezier(
|
|
[{
|
|
x: left,
|
|
y: top
|
|
},
|
|
{
|
|
x: left - 200,
|
|
y: left - 120
|
|
},
|
|
{
|
|
x: cartPosition.left + 10,
|
|
y: cartPosition.top
|
|
}
|
|
],
|
|
6
|
|
).bezier_points,
|
|
timer: null
|
|
});
|
|
this.startAnimation(key);
|
|
},
|
|
/**
|
|
* 执行动画
|
|
* @param {Object} key
|
|
*/
|
|
startAnimation(key) {
|
|
let bezierPos = this.carIconList[key].bezierPos,
|
|
index = this.carIconList[key].index;
|
|
|
|
this.carIconList[key].timer = setInterval(() => {
|
|
if (index < 6) {
|
|
this.carIconList[key].left = bezierPos[index].x;
|
|
this.carIconList[key].top = bezierPos[index].y;
|
|
index++;
|
|
} else {
|
|
clearInterval(this.carIconList[key].timer);
|
|
delete this.carIconList[key];
|
|
this.$forceUpdate();
|
|
|
|
// 购物车图标
|
|
setTimeout(() => {
|
|
this.$store.commit('setCartChange');
|
|
}, 100);
|
|
let animation = uni.createAnimation({
|
|
duration: 200,
|
|
timingFunction: 'ease'
|
|
});
|
|
animation.scale(1.2).step();
|
|
this.cartAnimation = animation.export();
|
|
setTimeout(() => {
|
|
animation.scale(1).step();
|
|
this.cartAnimation = animation.export();
|
|
}, 300);
|
|
}
|
|
}, 50);
|
|
},
|
|
// 风格四头部切换
|
|
templateFourOneFn(index) {
|
|
this.categoryTree = this.templateFourData[index].child_list || [];
|
|
this.oneCategorySelect = index;
|
|
this.select = 0;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.box {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.head {
|
|
width: 750rpx;
|
|
height: 740rpx;
|
|
background: #ffffff;
|
|
border-radius: 32rpx 32rpx 0rpx 0rpx;
|
|
// z-index: 999;
|
|
padding: 46rpx 48rpx;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
|
|
.img {
|
|
image {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
}
|
|
}
|
|
|
|
.imgtwo {
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
|
|
.mlentc {
|
|
margin-left: 24rpx;
|
|
}
|
|
|
|
.guige {
|
|
margin-top: 16rpx;
|
|
color: #999;
|
|
text-align: center;
|
|
|
|
span {
|
|
color: #000;
|
|
}
|
|
}
|
|
|
|
.xuxian {
|
|
width: 100%;
|
|
border: 1rpx solid #ccc;
|
|
margin: 16rpx 0;
|
|
}
|
|
|
|
.danwei {
|
|
width: 200rpx;
|
|
border: 1rpx solid rgb(54, 171, 255);
|
|
padding: 10rpx 20rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 16rpx;
|
|
color: rgb(54, 171, 255);
|
|
}
|
|
|
|
.goumai {
|
|
margin-top: 40rpx;
|
|
|
|
.one {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
|
|
.two {
|
|
width: 60rpx;
|
|
height: 40rpx;
|
|
text-align: center;
|
|
border: 1rpx solid #ccc;
|
|
margin: 0 12rpx;
|
|
}
|
|
|
|
.sui {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.add {
|
|
width: 686rpx;
|
|
height: 80rpx;
|
|
background: #21bbf3;
|
|
border-radius: 40rpx;
|
|
position: absolute;
|
|
bottom: 24rpx;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.manufactor {
|
|
background-color: rgb(245, 245, 245);
|
|
border-radius: 20rpx;
|
|
margin: 10rpx 22rpx;
|
|
padding: 10rpx 30rpx;
|
|
}
|
|
|
|
.manufactorActive {
|
|
background-color: rgb(33, 187, 243);
|
|
}
|
|
|
|
.item-Manufacturer {
|
|
padding: 24rpx;
|
|
}
|
|
|
|
.search-wrap {
|
|
flex: 0.5;
|
|
padding: 30rpx 30rpx 0;
|
|
font-size: $font-size-tag;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.iconfont {
|
|
margin-left: 16rpx;
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
.input-wrap {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: $color-bg;
|
|
height: 70rpx;
|
|
padding-left: 10rpx;
|
|
border-radius: 70rpx;
|
|
|
|
input {
|
|
width: 90%;
|
|
background: $color-bg;
|
|
font-size: $font-size-tag;
|
|
height: 50rpx;
|
|
padding: 10rpx 25rpx 10rpx 40rpx;
|
|
line-height: 50rpx;
|
|
border-radius: 40rpx;
|
|
}
|
|
|
|
text {
|
|
font-size: $font-size-toolbar;
|
|
color: $color-tip;
|
|
width: 80rpx;
|
|
text-align: center;
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
|
|
.category-wrap,
|
|
.list-style {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.iconfont {
|
|
font-size: 50rpx;
|
|
color: $color-tip;
|
|
}
|
|
|
|
text {
|
|
display: block;
|
|
margin-top: 60rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sort-wrap {
|
|
display: flex;
|
|
padding: 10rpx 20rpx 10rpx 0;
|
|
|
|
>view {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.comprehensive-wrap {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.iconfont-wrap {
|
|
display: inline-block;
|
|
margin-left: 10rpx;
|
|
width: 40rpx;
|
|
|
|
.iconfont {
|
|
font-size: $font-size-toolbar;
|
|
line-height: 1;
|
|
margin-bottom: 5rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.price-wrap {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.iconfont-wrap {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
width: 40rpx;
|
|
|
|
.iconfont {
|
|
position: relative;
|
|
float: left;
|
|
font-size: 32rpx;
|
|
line-height: 1;
|
|
height: 20rpx;
|
|
color: #909399;
|
|
|
|
&.asc {
|
|
top: -2rpx;
|
|
}
|
|
|
|
&.desc {
|
|
top: -6rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.screen-wrap {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.iconfont-wrap {
|
|
display: inline-block;
|
|
margin-left: 10rpx;
|
|
width: 40rpx;
|
|
|
|
.iconfont {
|
|
font-size: $font-size-toolbar;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.category-list-wrap {
|
|
height: 100%;
|
|
|
|
.class-box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 0 $padding;
|
|
|
|
view {
|
|
width: calc((100% - 60rpx) / 3);
|
|
font-size: $font-size-goods-tag;
|
|
margin-right: 20rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
margin-bottom: 12rpx;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
background: rgba(245, 245, 245, 1);
|
|
border-radius: 5rpx;
|
|
|
|
&:nth-of-type(3n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.first {
|
|
font-size: $font-size-tag;
|
|
display: block;
|
|
// background: $page-color-base;
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.second {
|
|
border-bottom: 2rpx solid $color-line;
|
|
padding: 20rpx;
|
|
display: block;
|
|
font-size: $font-size-tag;
|
|
}
|
|
|
|
.third {
|
|
padding: 0 20rpx 20rpx;
|
|
overflow: hidden;
|
|
font-size: $font-size-tag;
|
|
|
|
>view {
|
|
display: inline-block;
|
|
margin-right: 20rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.uni-tag {
|
|
padding: 0 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.screen-wrap {
|
|
/deep/.uni-drawer__content {
|
|
width: 75%;
|
|
|
|
.title {
|
|
font-size: $font-size-tag;
|
|
padding: $padding;
|
|
background: #f6f4f5;
|
|
}
|
|
}
|
|
|
|
|
|
scroll-view {
|
|
height: 85%;
|
|
|
|
.item-wrap {
|
|
border-bottom: 1px solid #f0f0f0;
|
|
|
|
.label {
|
|
font-size: $font-size-tag;
|
|
padding: $padding;
|
|
|
|
view {
|
|
display: inline-block;
|
|
font-size: 60rpx;
|
|
height: 40rpx;
|
|
vertical-align: middle;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|
|
|
|
.list {
|
|
margin: $margin-updown $margin-both;
|
|
overflow: hidden;
|
|
|
|
>view {
|
|
display: inline-block;
|
|
margin-right: 25rpx;
|
|
margin-bottom: 25rpx;
|
|
}
|
|
|
|
.uni-tag {
|
|
padding: 0 $padding;
|
|
font-size: $font-size-goods-tag;
|
|
background: #f5f5f5;
|
|
height: 52rpx;
|
|
line-height: 52rpx;
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
.price-wrap {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: $padding;
|
|
|
|
input {
|
|
flex: 1;
|
|
background: #f5f5f5;
|
|
height: 52rpx;
|
|
width: 182rpx;
|
|
line-height: 50rpx;
|
|
font-size: $font-size-goods-tag;
|
|
border-radius: 50rpx;
|
|
text-align: center;
|
|
|
|
&:first-child {
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
height: 90rpx;
|
|
|
|
|
|
|
|
//position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
|
|
.footer-btn {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
margin: 0;
|
|
background: #F6F6F6;
|
|
width: 30%;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.footer-btn1 {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
margin: 0;
|
|
width: 70%;
|
|
height: 88rpx;
|
|
background: #21BBF3;
|
|
line-height: 88rpx;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.safe-area {
|
|
bottom: 68rpx !important;
|
|
}
|
|
|
|
.empty {
|
|
margin-top: 100rpx;
|
|
}
|
|
|
|
.buy-num {
|
|
font-size: $font-size-activity-tag;
|
|
}
|
|
|
|
.icon {
|
|
width: 34rpx;
|
|
height: 30rpx;
|
|
}
|
|
|
|
.list-style-new {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.line {
|
|
width: 4rpx;
|
|
height: 28rpx;
|
|
background-color: rgba(227, 227, 227, 1);
|
|
margin-right: 60rpx;
|
|
}
|
|
}
|
|
|
|
.h-line {
|
|
width: 37rpx;
|
|
height: 2rpx;
|
|
background-color: $color-tip;
|
|
}
|
|
|
|
.lineheight-clear {}
|
|
|
|
// 商品列表单列样式
|
|
.goods-list.single-column {
|
|
display: none;
|
|
|
|
&.show {
|
|
display: block;
|
|
}
|
|
|
|
.goods-item {
|
|
padding: 26rpx;
|
|
background: #fff;
|
|
margin: $margin-updown $margin-both;
|
|
border-radius: $border-radius;
|
|
display: flex;
|
|
position: relative;
|
|
|
|
.goods-img {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
// overflow: hidden;
|
|
border-radius: $border-radius;
|
|
margin-right: 20rpx;
|
|
overflow: hidden;
|
|
|
|
image {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
}
|
|
}
|
|
|
|
.goods-tag {
|
|
color: #fff;
|
|
line-height: 1;
|
|
padding: 8rpx 12rpx;
|
|
position: absolute;
|
|
border-top-left-radius: $border-radius;
|
|
border-bottom-right-radius: $border-radius;
|
|
top: 26rpx;
|
|
left: 26rpx;
|
|
font-size: $font-size-goods-tag;
|
|
}
|
|
|
|
.goods-tag-img {
|
|
position: absolute;
|
|
border-top-left-radius: $border-radius;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
top: 26rpx;
|
|
left: 26rpx;
|
|
z-index: 5;
|
|
overflow: hidden;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.info-wrap {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.name-wrap {
|
|
flex: 1;
|
|
}
|
|
|
|
.goods-name {
|
|
font-size: $font-size-base;
|
|
line-height: 1.3;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
height: 68rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.introduction {
|
|
line-height: 1;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.discount-price {
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
line-height: 1;
|
|
margin-top: 16rpx;
|
|
|
|
.unit {
|
|
margin-right: 6rpx;
|
|
color: var(--price-color);
|
|
}
|
|
|
|
.price {
|
|
color: var(--price-color);
|
|
}
|
|
}
|
|
|
|
.pro-info {
|
|
display: flex;
|
|
margin-top: auto;
|
|
|
|
.delete-price {
|
|
text-decoration: line-through;
|
|
flex: 1;
|
|
|
|
.unit {
|
|
margin-right: 0rpx;
|
|
}
|
|
}
|
|
|
|
&>view {
|
|
line-height: 1;
|
|
font-size: $font-size-tag !important;
|
|
|
|
&:nth-child(2) {
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.member-price-tag {
|
|
display: inline-block;
|
|
width: 60rpx;
|
|
line-height: 1;
|
|
margin-left: 6rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
display: flex;
|
|
max-height: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 商品列表双列样式
|
|
.goods-list.double-column {
|
|
display: none;
|
|
margin: 0 $margin-both;
|
|
padding-top: $margin-updown;
|
|
position: relative;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
|
|
&.show {
|
|
display: flex;
|
|
}
|
|
|
|
.goods-item {
|
|
background-color: #fff;
|
|
width: calc(50% - 10rpx);
|
|
border-radius: $border-radius;
|
|
overflow: hidden;
|
|
|
|
&:nth-child(2n + 2) {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.goods-img {
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding-top: 100%;
|
|
border-top-left-radius: $border-radius;
|
|
border-top-right-radius: $border-radius;
|
|
|
|
image {
|
|
width: 100%;
|
|
position: absolute !important;
|
|
top: 50%;
|
|
left: 0;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
|
|
.goods-tag {
|
|
color: #fff;
|
|
line-height: 1;
|
|
padding: 8rpx 16rpx;
|
|
position: absolute;
|
|
border-bottom-right-radius: $border-radius;
|
|
top: 0;
|
|
left: 0;
|
|
font-size: $font-size-goods-tag;
|
|
}
|
|
|
|
.goods-tag-img {
|
|
position: absolute;
|
|
border-top-left-radius: $border-radius;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 5;
|
|
overflow: hidden;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.info-wrap {
|
|
padding: 0 26rpx 26rpx 26rpx;
|
|
}
|
|
|
|
.goods-name {
|
|
font-size: $font-size-base;
|
|
line-height: 1.3;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.discount-price {
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
line-height: 1;
|
|
margin-top: 16rpx;
|
|
|
|
.unit {
|
|
margin-right: 6rpx;
|
|
color: var(--price-color);
|
|
}
|
|
|
|
.price {
|
|
color: var(--price-color);
|
|
}
|
|
}
|
|
|
|
.pro-info {
|
|
display: flex;
|
|
margin-top: auto;
|
|
|
|
.delete-price {
|
|
text-decoration: line-through;
|
|
flex: 1;
|
|
|
|
.unit {
|
|
margin-right: 6rpx;
|
|
}
|
|
}
|
|
|
|
&>view {
|
|
line-height: 1;
|
|
font-size: $font-size-tag !important;
|
|
|
|
&:nth-child(2) {
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.member-price-tag {
|
|
display: inline-block;
|
|
width: 60rpx;
|
|
line-height: 1;
|
|
margin-left: 6rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.search {
|
|
padding: 32rpx 32rpx 0;
|
|
/* #ifndef MP-WEIXIN */
|
|
padding-top: calc(var(--status-bar-height) + 30rpx);
|
|
/* #endif */
|
|
}
|
|
|
|
.category-page-wrap {
|
|
width: 100vw;
|
|
height: calc(100vh - var(--tab-bar-height, 0));
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.content-box {
|
|
flex: 1;
|
|
height: 0;
|
|
display: flex;
|
|
|
|
.tree-wrap {
|
|
width: 180rpx;
|
|
height: 100%;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.right-flex-wrap {
|
|
flex: 1;
|
|
width: 0;
|
|
height: 100%;
|
|
background: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transform: translateX(0px);
|
|
|
|
.content-wrap {
|
|
display: flex;
|
|
flex: 1;
|
|
height: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.child-category-wrap {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tree-wrap .category-item-wrap {
|
|
height: auto;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.tree-wrap .category-item {
|
|
line-height: 1.5;
|
|
padding: 26rpx 28rpx;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
background-color: #f5f5f5;
|
|
|
|
view {
|
|
font-size: 30rpx !important;
|
|
color: #222222;
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
}
|
|
|
|
&.border-top {
|
|
border-bottom-right-radius: 12rpx;
|
|
}
|
|
|
|
&.border-bottom {
|
|
border-top-right-radius: 12rpx;
|
|
}
|
|
|
|
&.select {
|
|
background: #fff;
|
|
|
|
view {
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
|
|
&::before {
|
|
content: ' ';
|
|
width: 8rpx;
|
|
height: 34rpx;
|
|
background: var(--base-color);
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.search-box {
|
|
position: relative;
|
|
padding: 20rpx 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
background: #fff;
|
|
|
|
.search-content {
|
|
position: relative;
|
|
height: 70rpx;
|
|
border-radius: 40rpx;
|
|
flex: 1;
|
|
background-color: #f5f5f5;
|
|
|
|
input {
|
|
box-sizing: border-box;
|
|
display: block;
|
|
height: 70rpx;
|
|
width: 100%;
|
|
padding: 0 20rpx 0 40rpx;
|
|
background: #f5f5f5;
|
|
color: #333;
|
|
border-radius: 40rpx;
|
|
}
|
|
|
|
.iconfont {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 10rpx;
|
|
transform: translateY(-50%);
|
|
font-size: $font-size-toolbar;
|
|
z-index: 10;
|
|
color: #89899a;
|
|
width: 80rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cart-box {
|
|
height: 100rpx;
|
|
width: 100%;
|
|
background: #fff;
|
|
border-top: 1px solid #f5f5f5;
|
|
box-sizing: border-box;
|
|
padding: 0 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.left-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.cart-icon {
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
position: relative;
|
|
|
|
.iconfont {
|
|
color: var(--btn-text-color);
|
|
width: inherit;
|
|
height: inherit;
|
|
background-color: $base-color;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.num {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
transform: translate(60%, 0);
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
color: #fff;
|
|
line-height: 1.2;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
padding: 0 6rpx;
|
|
min-width: 30rpx;
|
|
border-radius: 16rpx;
|
|
background-color: var(--price-color);
|
|
border: 2rpx solid #fff;
|
|
}
|
|
}
|
|
|
|
.price {
|
|
margin-left: 30rpx;
|
|
|
|
.title {
|
|
color: #333;
|
|
}
|
|
|
|
.money,
|
|
.unit {
|
|
font-weight: bold;
|
|
color: var(--price-color);
|
|
}
|
|
}
|
|
|
|
.settlement-btn {
|
|
margin: 0 0 0 20rpx;
|
|
width: 200rpx;
|
|
font-weight: bold;
|
|
border-radius: 50rpx;
|
|
}
|
|
}
|
|
|
|
.cart-point {
|
|
width: 26rpx;
|
|
height: 26rpx;
|
|
position: fixed;
|
|
z-index: 1000;
|
|
background: #f00;
|
|
border-radius: 50%;
|
|
transition: all 0.05s;
|
|
}
|
|
|
|
.category-empty {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
|
|
image {
|
|
width: 380rpx;
|
|
}
|
|
|
|
.tips {
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
color: #999;
|
|
margin-top: 50rpx;
|
|
}
|
|
}
|
|
|
|
.end-tips {
|
|
text-align: center;
|
|
color: #999;
|
|
font-size: 24rpx;
|
|
padding: 20rpx 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
// 风格四
|
|
.category-template-4 {
|
|
.search-box {
|
|
background-color: #f0f5ff;
|
|
|
|
.search-content input {
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
|
|
.cart-box {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
/deep/ .template-four {
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 20rpx;
|
|
height: 4rpx;
|
|
left: 0;
|
|
right: 0;
|
|
box-shadow: 0 20rpx 14rpx rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.template-four-wrap {
|
|
position: relative;
|
|
z-index: 1;
|
|
padding-left: 20rpx;
|
|
padding-right: 80rpx;
|
|
padding-bottom: 10rpx;
|
|
display: flex;
|
|
height: 180rpx;
|
|
align-items: baseline;
|
|
box-sizing: border-box;
|
|
background-image: linear-gradient(#f0f5ff 45%, #fff);
|
|
}
|
|
|
|
.template-four-popup {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
|
|
.title {
|
|
line-height: 1;
|
|
margin-bottom: 20rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.template-four-scroll {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
align-content: baseline;
|
|
white-space: break-spaces;
|
|
padding: 20rpx;
|
|
white-space: nowrap;
|
|
height: 380rpx;
|
|
box-sizing: border-box;
|
|
|
|
.uni-scroll-view-content {
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
align-content: baseline;
|
|
}
|
|
|
|
.item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 4rpx 0;
|
|
color: #666;
|
|
margin-right: 16rpx;
|
|
border-radius: 40rpx;
|
|
margin-bottom: 10rpx;
|
|
width: calc((100% - 64rpx) / 5);
|
|
|
|
&:nth-child(5n + 5) {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.image-warp {
|
|
margin-bottom: 6rpx;
|
|
padding: 4rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 42rpx;
|
|
border: 4rpx solid transparent;
|
|
}
|
|
|
|
image {
|
|
width: 84rpx;
|
|
height: 84rpx;
|
|
border-radius: 32rpx;
|
|
}
|
|
|
|
.text {
|
|
padding: 2rpx 16rpx;
|
|
border-radius: 40rpx;
|
|
font-size: $font-size-tag;
|
|
}
|
|
|
|
&.selected {
|
|
.text {
|
|
background-color: $base-color;
|
|
color: var(--btn-text-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.pack-up {
|
|
font-size: $font-size-tag;
|
|
color: #888888;
|
|
height: 74rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-top: 2rpx solid #f2f2f2;
|
|
|
|
.iconfont {
|
|
font-size: 40rpx;
|
|
margin-left: -4rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.category-item-all {
|
|
position: absolute;
|
|
bottom: 0;
|
|
z-index: 1;
|
|
right: 0;
|
|
top: 0;
|
|
width: 72rpx;
|
|
line-height: 1;
|
|
|
|
.category-item-all-wrap {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
top: 0;
|
|
left: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 2;
|
|
background-image: linear-gradient(#f0f5ff 45%, #fff);
|
|
}
|
|
|
|
.text {
|
|
writing-mode: tb-rl;
|
|
margin-bottom: 6rpx;
|
|
letter-spacing: 4rpx;
|
|
font-size: $font-size-tag;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.img {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
box-shadow: -4rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
|
|
position: absolute;
|
|
left: 0;
|
|
width: 10rpx;
|
|
// height: 100rpx;
|
|
top: 20%;
|
|
bottom: 20%;
|
|
background-image: linear-gradient(#f0f5ff 45%, #fff);
|
|
// transform: translateY(-50%);
|
|
// background-color: #F0F5FF;
|
|
}
|
|
}
|
|
|
|
.uni-scroll-view-content {
|
|
display: flex;
|
|
}
|
|
|
|
.category-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 130rpx;
|
|
flex-shrink: 0;
|
|
margin-right: 20rpx;
|
|
padding: 4rpx 0;
|
|
|
|
&:last-of-type {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.image-warp {
|
|
margin-bottom: 6rpx;
|
|
padding: 4rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 42rpx;
|
|
border: 4rpx solid transparent;
|
|
}
|
|
|
|
image {
|
|
width: 84rpx;
|
|
height: 84rpx;
|
|
border-radius: 32rpx;
|
|
}
|
|
}
|
|
|
|
.select {
|
|
.text {
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 40rpx;
|
|
color: #fff;
|
|
font-size: $font-size-tag;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-wrap .categoty-goods-wrap .goods-list {
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.tree-wrap .category-item.select::before {
|
|
border-top-right-radius: 8rpx;
|
|
border-bottom-right-radius: 8rpx;
|
|
}
|
|
}
|
|
</style>
|