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.
1391 lines
34 KiB
1391 lines
34 KiB
<template>
|
|
<view class="item-wrap" :class="type">
|
|
|
|
<block v-if="type == 'category' && category.child_list.length">
|
|
<view class="category-adv"
|
|
@click="$util.redirectTo('/page_goods/goodsList/goodsList', {category_id: category.category_id})">
|
|
<image :src="$util.img(category.image_adv)" mode="widthFix"></image>
|
|
</view>
|
|
<block v-if="value.level == 2">
|
|
<view class="category-title">{{ category.category_name }}</view>
|
|
<view class="category-list">
|
|
<view class="category-item" v-for="(one, oneIndex) in category.child_list" :key="oneIndex"
|
|
@click="$util.redirectTo('/page_goods/goodsList/goodsList', {category_id: one.category_id})">
|
|
<view class="img-box">
|
|
<image :src="$util.img(one.image)" mode="widthFix"></image>
|
|
</view>
|
|
<view class="name">{{ one.category_name }}</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
|
|
<block v-if="value.level == 3">
|
|
<block v-for="(one, oneIndex) in category.child_list" :key="oneIndex">
|
|
<view class="category-title">{{ one.category_name }}</view>
|
|
<view class="category-list">
|
|
<view class="category-item" v-for="(two, twoIndex) in one.child_list" :key="twoIndex"
|
|
@click="$util.redirectTo('/page_goods/goodsList/goodsList', {category_id: two.category_id})">
|
|
<view class="img-box">
|
|
<image :src="$util.img(two.image)" mode="widthFix" :lazy-load="true"></image>
|
|
</view>
|
|
<view class="name">{{ two.category_name }}</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</block>
|
|
</block>
|
|
|
|
<block v-if="type == 'goods'">
|
|
<view class="categoty-goods-wrap" v-if="loadType == 'part'"
|
|
:style="'padding-top:' + (value.search ? 0 : '20rpx')">
|
|
<!-- 分类筛选 -->
|
|
<block v-if="category.child_list && value.goodsLevel == 2">
|
|
<view class="screen-category-wrap">
|
|
<scroll-view scroll-x="true" class="screen-category"
|
|
:class="{'screen-category-4': value.template == 4}" :scroll-with-animation="true"
|
|
:scroll-into-view="scrollIntoView">
|
|
<view class="item" id="category-2--1" :class="{selected: categoryId == -1}"
|
|
@click="selectCategoey(-1)">全部</view>
|
|
<view class="item" :id="'category-2-' + oneIndex"
|
|
:class="{selected: categoryId == oneIndex}" @click="selectCategoey(oneIndex)"
|
|
v-for="(one, oneIndex) in category.child_list" :key="oneIndex">{{ one.category_name }}
|
|
</view>
|
|
</scroll-view>
|
|
<view class="iconfont icon-unfold" @click="$refs.screenCategoryPopup.open()"></view>
|
|
</view>
|
|
<uni-popup type="top" ref="screenCategoryPopup">
|
|
<view class="screen-category-popup" @click="$refs.screenCategoryPopup.close()">
|
|
<scroll-view scroll-y="true" class="screen-category"
|
|
:class="{'screen-category-4': value.template == 4}">
|
|
<view class="title">全部</view>
|
|
<view class="item" :class="{selected: categoryId == oneIndex}"
|
|
@click="selectCategoey(oneIndex)" v-for="(one, oneIndex) in category.child_list"
|
|
:key="oneIndex">{{ one.category_name }}</view>
|
|
</scroll-view>
|
|
</view>
|
|
</uni-popup>
|
|
</block>
|
|
|
|
<scroll-view scroll-y="true" class="scroll-goods-view" lower-threshold="300" :scroll-top="scrollTop"
|
|
@scrolltolower="scrolltolower" @touchstart="touchstart" @touchend="touchend" @scroll="listenScroll">
|
|
|
|
<view class="goods-list" :data-template="value.template">
|
|
|
|
<block v-if="goodsList.length">
|
|
|
|
<view class="seckill-item" v-for="(item, index) in goodsList" :key="index"
|
|
:style="{borderBottom:index==goodsList.length-1?'none':'1px solid #E8E8E8'}">
|
|
<div class="cover" @click="toDetail(item)">
|
|
<image :src="goodsImg(item.goods_image)" mode="aspectFill"></image>
|
|
<!-- <div class="time">{{item.min_buy||1}}{{ item.unit||'件' }}起订</div> -->
|
|
</div>
|
|
<div class="right">
|
|
<div class="title" @click="toDetail(item)">{{item.goods_name}}</div>
|
|
|
|
<view></view>
|
|
<div class="labels" @click="toDetail(item)">
|
|
<div class="label-item">
|
|
产地：{{item.address||'-'}}
|
|
</div>
|
|
<div class="label-item">
|
|
规格：{{item.spec_name||'-'}}
|
|
</div>
|
|
<div class="label-item">
|
|
执行标准：{{item.execu_content.title}}
|
|
</div>
|
|
<div class="label-item">
|
|
生产企业：{{item.business}}
|
|
</div>
|
|
</div>
|
|
<!-- <view>{{userInfo.show_price&&token?true:false}}</view> -->
|
|
<div class="bottom" v-if="userInfo.show_price&&token">
|
|
|
|
<div class="price">
|
|
¥<span style="margin-right: 0;">{{parseFloat(showPrice(item)).toFixed(2)}}</span>
|
|
<span style="font-size: 28rpx;margin: 0;">/{{ item.unit }}</span>
|
|
</div>
|
|
<div style="display: flex;align-items: center;" v-if="item.stock>0">
|
|
<view slot="minus" class="minus" @click.stop="numChange(item,'minus')">
|
|
<u-icon name="minus-circle-fill" size="22"
|
|
color="var(--base-color)"></u-icon>
|
|
</view>
|
|
<!-- <input
|
|
slot="input"
|
|
type="number"
|
|
style="width: 32px;text-align: center;"
|
|
class="input"
|
|
v-model="item.cart_num || 0"
|
|
@confirm="inputBlur($event,item)"
|
|
@click="btn(item)"
|
|
/> -->
|
|
<view class="df aic jcsa" style="margin:0 24rpx;" @click="focus(item)">
|
|
{{ item.cart_num || 0 }}
|
|
</view>
|
|
<view slot="plus" class="minus" @click.stop="numChange(item,'add')">
|
|
<u-icon name="plus-circle-fill" size="22"
|
|
color="var(--base-color)"></u-icon>
|
|
</view>
|
|
</div>
|
|
<div style="display:flex;justify-content: space-between;" v-else>
|
|
<view></view>
|
|
<view>库存不足</view>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</view>
|
|
</block>
|
|
<view class="category-empty" v-else>
|
|
<image :src="$util.img('public/uniapp/category/empty.png')" mode="widthFix"></image>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<loading-cover ref="loadingCover" :init-show="loading"></loading-cover>
|
|
</scroll-view>
|
|
|
|
</view>
|
|
|
|
<block v-if="loadType == 'all' && goodsList.length">
|
|
<view class="goods-list" :data-template="value.template">
|
|
<view class="goods-item" v-for="(item, index) in goodsList" :key="index">
|
|
<view class="goods-img" @click="toDetail(item)">
|
|
<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)"
|
|
:lazy-load="true"></image>
|
|
<view class="color-base-bg goods-tag" v-if="item.label_name">{{ item.label_name }}</view>
|
|
</view>
|
|
<view class="info-wrap">
|
|
<view class="name-wrap" @click="toDetail(item)">
|
|
<view class="goods-name">{{ item.goods_name }}</view>
|
|
</view>
|
|
<view class="price-wrap">
|
|
<view class="discount-price">
|
|
<text class="unit price-style small">￥</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="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">
|
|
<image :src="$util.img('public/uniapp/index/discount.png')" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
<view class="footer-wrap">
|
|
<view class="pro-info">
|
|
<view class="delete-price font-size-activity-tag color-tip price-font">
|
|
<block v-if="item.market_price_show">
|
|
<text class="unit">￥</text>
|
|
{{ item.market_price > 0 ? item.market_price : item.price }}
|
|
</block>
|
|
</view>
|
|
</view>
|
|
<view class="right-wrap" v-if="value.template == 2">
|
|
<block v-if="item.is_virtual">
|
|
<view class="color-base-bg select-sku" @click="toDetail(item)">立即购买</view>
|
|
</block>
|
|
<block v-else>
|
|
<view v-if="item.goods_spec_format" class="color-base-bg select-sku"
|
|
@click="selectSku(item)">
|
|
选规格
|
|
<text class="num-tag"
|
|
v-if="cart['goods_' + item.goods_id]">{{ cart['goods_' + item.goods_id].num }}</text>
|
|
</view>
|
|
<block v-else>
|
|
<block v-if="cart['goods_' + item.goods_id]">
|
|
<view class="num-action reduce" @click="reduce(item)">
|
|
<text class="iconfont icon-jian"></text>
|
|
</view>
|
|
<view class="num">
|
|
{{ cart['goods_' + item.goods_id]['sku_' + item.sku_id].num }}
|
|
</view>
|
|
<view class="num-action" :id="'cart-num-' + index"
|
|
@click="increase($event, item)">
|
|
<text class="iconfont icon-jia"></text>
|
|
<view class="click-event"></view>
|
|
</view>
|
|
</block>
|
|
<view class="num-action" v-else :id="'cart-num-' + index"
|
|
@click="increase($event, item, 0)">
|
|
<text class="iconfont icon-jia"></text>
|
|
<view class="click-event"></view>
|
|
</view>
|
|
</block>
|
|
</block>
|
|
</view>
|
|
<view class="right-wrap" v-if="value.template == 3">
|
|
<view class="color-base-bg select-sku" @click="toDetail(item)">立即购买</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
|
|
</block>
|
|
<!-- <u-loading-page :loading="loading"></u-loading-page> -->
|
|
|
|
<!-- <ns-login ref="login"></ns-login> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapGetters
|
|
} from 'vuex'
|
|
|
|
// import nsGoodsSku from '@/components/ns-goods-sku/ns-goods-sku.vue';
|
|
export default {
|
|
|
|
name: 'diy-category-item',
|
|
props: {
|
|
category: {
|
|
type: Object
|
|
},
|
|
value: {
|
|
type: Object,
|
|
default: () => {
|
|
return {};
|
|
}
|
|
},
|
|
index: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
select: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
oneCategorySelect: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
last: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
show: true,
|
|
goodsSkuDetail: {
|
|
goods_id: 0,
|
|
goods_service: []
|
|
},
|
|
type: 'goods',
|
|
level: 3,
|
|
categoryId: -1,
|
|
loading: false,
|
|
goodsList: [],
|
|
pageIndex: 0,
|
|
pageSize: 10,
|
|
totalPage: 1,
|
|
cart: {},
|
|
touchstartPosition: 0,
|
|
scrollType: 'top',
|
|
contentWrapHeight: 0,
|
|
scrollIntoView: 'category-2--1',
|
|
scrollTop: 0,
|
|
loadType: '',
|
|
order: "",
|
|
sort: "",
|
|
min_price: "",
|
|
max_price: "",
|
|
business: "",
|
|
token: uni.getStorageSync("token"),
|
|
|
|
|
|
};
|
|
},
|
|
created() {
|
|
|
|
this.type = this.value.template == 1 ? 'category' : 'goods';
|
|
if (this.index == this.select && this.pageIndex == 0) this.getGoodsList();
|
|
this.loadType = this.value.goodsLevel == 1 && this.value.loadType == 'all' ? 'all' : 'part';
|
|
},
|
|
mounted() {
|
|
setTimeout(() => {
|
|
const query = uni.createSelectorQuery().in(this);
|
|
query.select('.scroll-goods-view').boundingClientRect(data => {
|
|
if (data) this.contentWrapHeight = data.height;
|
|
}).exec();
|
|
|
|
}, 1000)
|
|
},
|
|
computed: {
|
|
...mapGetters(['userInfo']),
|
|
|
|
},
|
|
|
|
watch: {
|
|
order: {
|
|
handler: function(newV) {
|
|
this.order = newV;
|
|
this.pageIndex = 1;
|
|
this.watchGoodsList();
|
|
}
|
|
},
|
|
sort: {
|
|
handler: function(newV) {
|
|
console.log('sort');
|
|
this.sort = newV;
|
|
this.pageIndex = 1;
|
|
this.watchGoodsList();
|
|
}
|
|
},
|
|
max_price: {
|
|
handler: function(newV) {
|
|
console.log('sort');
|
|
this.max_price = newV;
|
|
this.pageIndex = 1;
|
|
this.watchGoodsList();
|
|
}
|
|
},
|
|
min_price: {
|
|
handler: function(newV) {
|
|
console.log('sort');
|
|
this.min_price = newV;
|
|
this.pageIndex = 1;
|
|
this.watchGoodsList();
|
|
}
|
|
},
|
|
business: {
|
|
handler: function(newV) {
|
|
console.log('business');
|
|
this.business = newV;
|
|
this.pageIndex = 1;
|
|
this.watchGoodsList();
|
|
}
|
|
},
|
|
'cartList': function(nval) {
|
|
let cart = {},
|
|
cartList = Object.keys(this.$store.state.cartList);
|
|
if (cartList.length) {
|
|
cartList.forEach(key => {
|
|
let item = this.$store.state.cartList[key];
|
|
if (cart && cart['goods_' + item.goods_id]) {
|
|
cart['goods_' + item.goods_id]['sku_' + item.sku_id] = item;
|
|
cart['goods_' + item.goods_id].num += item.num;
|
|
} else {
|
|
cart['goods_' + item.goods_id] = { num: item.num };
|
|
cart['goods_' + item.goods_id]['sku_' + item.sku_id] = item;
|
|
}
|
|
})
|
|
}
|
|
this.cart = cart;
|
|
},
|
|
oneCategorySelect: function() {
|
|
this.scrollTop = -1;
|
|
this.goodsList = [];
|
|
this.selectCategoey(-1);
|
|
},
|
|
// scrollTop:{
|
|
// handler(newVal){
|
|
// if(newVal==0&&this.select==0){
|
|
// this.pageIndex=1,
|
|
// this.pageSize=10,
|
|
// // this.loading=true;
|
|
// this.watchGoodsList();
|
|
// }
|
|
// }
|
|
// },
|
|
select: function() {
|
|
if (this.index == this.select) {
|
|
this.scrollTop = 0;
|
|
if (this.pageIndex == 0) {
|
|
this.getGoodsList();
|
|
} else if (this.$refs.loadingCover && this.loadType == 'part') {
|
|
this.$refs.loadingCover.show();
|
|
setTimeout(() => {
|
|
this.$refs.loadingCover.hide();
|
|
}, 300)
|
|
}
|
|
if (!this.contentWrapHeight) {
|
|
const query = uni.createSelectorQuery().in(this);
|
|
query.select('.scroll-goods-view').boundingClientRect(data => {
|
|
if (data) this.contentWrapHeight = data.height;
|
|
}).exec();
|
|
}
|
|
} else if (this.loadType == 'part') {
|
|
this.scrollTop = -1;
|
|
}
|
|
},
|
|
|
|
},
|
|
methods: {
|
|
getCartCount() {
|
|
this.$store.dispatch('getCartNumber');
|
|
},
|
|
focus(item) {
|
|
this.getGoodsItem(item);
|
|
uni.removeStorageSync('buyer_message');
|
|
uni.hideKeyboard();
|
|
},
|
|
getGoodsItem(item) {
|
|
|
|
this.loading = true;
|
|
this.$api.sendRequest({
|
|
url: '/api/goodssku/detail',
|
|
data: {
|
|
goods_id: item.goods_id
|
|
},
|
|
success: res => {
|
|
|
|
this.goods_Item_Detail = res.data.goods_sku_detail;
|
|
this.goods_Item_Detail.goods_spec_format = JSON.parse(
|
|
res.data.goods_sku_detail.goods_spec_format
|
|
);
|
|
this.goods_Item_Detail.number = item.cart_num;
|
|
uni.$emit('getGoodsItem', this.goods_Item_Detail)
|
|
console.log(this.goods_Item_Detail, 1111111);
|
|
// this.$refs.skuPopup.open();
|
|
this.loading = false;
|
|
|
|
}
|
|
});
|
|
},
|
|
// btn(item) {
|
|
// console.log(item);
|
|
// this.$parent.$parent.$parent.$parent.$parent.$parent.fatherMethod(item);
|
|
// // 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();
|
|
// });
|
|
// },
|
|
watchGoodsList() {
|
|
this.$refs.loadingCover.show();
|
|
this.$api.sendRequest({
|
|
url: '/api/goodssku/page',
|
|
data: {
|
|
page: this.pageIndex,
|
|
page_size: this.pageSize,
|
|
order: this.order,
|
|
sort: this.sort,
|
|
min_price: this.min_price,
|
|
max_price: this.max_price,
|
|
business: this.business,
|
|
category_id: this.categoryId != -1 ? this.category.child_list[this.categoryId]
|
|
.category_id : this.category.category_id,
|
|
},
|
|
success: res => {
|
|
this.goodsList = res.data.list;
|
|
this.totalPage = res.data.page_count;
|
|
setTimeout(() => {
|
|
this.$refs.loadingCover.hide();
|
|
}, 1000)
|
|
|
|
}
|
|
})
|
|
},
|
|
numChange(item, type) {
|
|
|
|
console.log(item, type);
|
|
if (item.max_buy) {
|
|
// is_limit 是否限购 limit_type限购类型 1单次 2长期
|
|
if (item.is_limit && item.limit_type == 1) {
|
|
if (item.cart_num >= item.max_buy && type == "add") {
|
|
this.$util.showToast({
|
|
title: `每人限购${item.max_buy}件`
|
|
});
|
|
return
|
|
}
|
|
|
|
|
|
} else if (item.is_limit && item.limit_type == 2) {
|
|
if (item.purchased_num >= item.max_buy) {
|
|
this.$util.showToast({
|
|
// title: `每人长期限购${item.max_buy}件，您已购买${item.purchased_num}件`
|
|
title: `每人长期限购${item.max_buy}件`
|
|
});
|
|
return
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
item.cart_num = Number(item.cart_num);
|
|
let setp = 1;
|
|
item.cart_num ? item.cart_num : item.cart_num = 0;
|
|
if (type == 'minus' && !item.cart_num) {
|
|
return
|
|
}
|
|
if (!item.cart_num || item.is_multiple) {
|
|
setp = item.min_buy || 1
|
|
} else {
|
|
if (type == 'add') {
|
|
setp = item.cart_num >= item.min_buy ? 1 : item.min_buy
|
|
} else {
|
|
setp = item.cart_num == item.min_buy ? item.min_buy : 1
|
|
}
|
|
|
|
}
|
|
type == 'add' ? item.cart_num += setp : item.cart_num -= setp
|
|
|
|
|
|
|
|
|
|
this.$forceUpdate()
|
|
this.$api.sendRequest({
|
|
url: '/api/cart/add',
|
|
data: {
|
|
num: item.cart_num,
|
|
sku_id: item.sku_id,
|
|
is_all: 1
|
|
},
|
|
success: () => {
|
|
this.$store.dispatch('getCartNumber');
|
|
}
|
|
})
|
|
},
|
|
/**
|
|
* 查询商品列表
|
|
*/
|
|
getGoodsList() {
|
|
if (this.type != 'goods' || this.loading || this.pageIndex >= this.totalPage) return;
|
|
this.loading = true;
|
|
this.pageIndex++;
|
|
if (this.$refs.loadingCover && this.pageIndex == 1 && this.loadType == 'part') {
|
|
setTimeout(() => {
|
|
this.$refs.loadingCover.show();
|
|
})
|
|
}
|
|
this.$api.sendRequest({
|
|
url: '/api/goodssku/page',
|
|
data: {
|
|
page: this.pageIndex,
|
|
page_size: this.pageSize,
|
|
order: this.order,
|
|
sort: this.sort,
|
|
min_price: this.min_price,
|
|
max_price: this.max_price,
|
|
business: this.business,
|
|
category_id: this.categoryId != -1 ? this.category.child_list[this.categoryId]
|
|
.category_id : this.category.category_id,
|
|
},
|
|
success: res => {
|
|
if (res.code == 0 && res.data) {
|
|
if (this.pageIndex == 1) this.goodsList = [];
|
|
this.goodsList = this.goodsList.concat(res.data.list);
|
|
console.log(this.goodsList);
|
|
this.totalPage = res.data.page_count;
|
|
this.loading = false;
|
|
if (this.$refs.loadingCover && this.loadType == 'part') this.$refs.loadingCover
|
|
.hide();
|
|
setTimeout(() => {
|
|
if (this.loadType == 'all') this.$emit('loadfinish', this.pageIndex ==
|
|
1 ? this.index : -1);
|
|
const query = uni.createSelectorQuery().in(this);
|
|
query.select('.goods-list').boundingClientRect(data => {
|
|
if (data && data.height < this.contentWrapHeight) this
|
|
.scrollType = 'none';
|
|
}).exec();
|
|
}, 500)
|
|
}
|
|
}
|
|
})
|
|
},
|
|
/**
|
|
* 商品图片处理
|
|
* @param {Object} imgStr
|
|
*/
|
|
goodsImg(imgStr) {
|
|
let imgs = imgStr.split(',');
|
|
return imgs[0] ? this.$util.img(imgs[0]
|
|
// , {
|
|
// size: this.value == 3 ? 'big' : 'mid'
|
|
// },
|
|
) : this.$util.getDefaultImage().goods;
|
|
},
|
|
imgError(index) {
|
|
this.goodsList[index].goods_image = this.$util.getDefaultImage().goods;
|
|
},
|
|
showPrice(data) {
|
|
let price = data.price;
|
|
if (data.discount_price && parseFloat(data.discount_price) < parseFloat(price)) price = data
|
|
.discount_price;
|
|
if (data.member_price && parseFloat(data.member_price) < parseFloat(price)) price = data.member_price;
|
|
|
|
return price;
|
|
},
|
|
/**
|
|
* 跳转商品详情
|
|
* @param {Object} item
|
|
*/
|
|
toDetail(item) {
|
|
this.$util.redirectTo('/page_goods/detail/detail', {
|
|
goods_id: item.goods_id
|
|
});
|
|
},
|
|
/**
|
|
* 购物车数量增加
|
|
*/
|
|
increase(event, data) {
|
|
if (!uni.getStorageSync('token')) {
|
|
this.$emit('tologin');
|
|
return;
|
|
}
|
|
let cart = this.cart['goods_' + data.goods_id] && this.cart['goods_' + data.goods_id]['sku_' + data
|
|
.sku_id
|
|
] ? this.cart['goods_' + data.goods_id]['sku_' + data.sku_id] : null,
|
|
num = cart ? cart.num : 0,
|
|
api = num ? '/api/cart/edit' : '/api/cart/add',
|
|
_num = num + 1;
|
|
|
|
if (_num > parseInt(data.stock)) {
|
|
this.$util.showToast({ title: '库存不足' });
|
|
return;
|
|
}
|
|
if (data.is_limit && data.max_buy && _num > parseInt(data.max_buy)) {
|
|
this.$util.showToast({ title: '该商品每人限购' });
|
|
return;
|
|
}
|
|
|
|
const query = uni.createSelectorQuery().in(this);
|
|
query.select('#' + event.currentTarget.id + ' .click-event').boundingClientRect(data => {
|
|
if (data) {
|
|
this.$emit('addCart', data.left, data.top);
|
|
}
|
|
}).exec();
|
|
|
|
this.$api.sendRequest({
|
|
url: api,
|
|
data: {
|
|
cart_id: cart ? cart.cart_id : 0,
|
|
sku_id: data.sku_id,
|
|
num: _num
|
|
},
|
|
success: res => {
|
|
if (res.code == 0) {
|
|
if (cart) {
|
|
this.cart['goods_' + data.goods_id]['sku_' + data.sku_id].num = _num;
|
|
} else {
|
|
if (!this.cart['goods_' + data.goods_id]) this.$set(this.cart, 'goods_' + data
|
|
.goods_id, { num: _num })
|
|
this.$set(this.cart['goods_' + data.goods_id], 'sku_' + data.sku_id, {
|
|
cart_id: res.data,
|
|
goods_id: data.goods_id,
|
|
sku_id: data.sku_id,
|
|
num: _num
|
|
})
|
|
}
|
|
this.$store.dispatch('getCartNumber');
|
|
} else {
|
|
this.$util.showToast({ title: res.message });
|
|
}
|
|
}
|
|
})
|
|
},
|
|
/**
|
|
* 购物车数量减少
|
|
*/
|
|
reduce(data) {
|
|
let cart = this.cart['goods_' + data.goods_id] && this.cart['goods_' + data.goods_id]['sku_' + data
|
|
.sku_id
|
|
] ? this.cart['goods_' + data.goods_id]['sku_' + data.sku_id] : null,
|
|
num = cart.num,
|
|
api = num > 1 ? '/api/cart/edit' : '/api/cart/delete',
|
|
_num = num - 1;
|
|
|
|
this.$api.sendRequest({
|
|
url: api,
|
|
data: {
|
|
cart_id: cart ? cart.cart_id : 0,
|
|
sku_id: data.sku_id,
|
|
num: _num
|
|
},
|
|
success: res => {
|
|
if (res.code == 0) {
|
|
if (_num) {
|
|
this.cart['goods_' + data.goods_id]['sku_' + data.sku_id].num = _num;
|
|
} else {
|
|
delete this.cart['goods_' + data.goods_id]['sku_' + data.sku_id];
|
|
if (Object.keys(this.cart['goods_' + data.goods_id]).length == 1) delete this
|
|
.cart['goods_' + data.goods_id];
|
|
this.$forceUpdate();
|
|
}
|
|
this.$store.dispatch('getCartNumber');
|
|
} else {
|
|
this.$util.showToast({ title: res.message });
|
|
}
|
|
}
|
|
})
|
|
},
|
|
/**
|
|
* 选择规格
|
|
* @param {Object} data
|
|
*/
|
|
selectSku(data) {
|
|
if (!uni.getStorageSync('token')) {
|
|
this.$emit('tologin');
|
|
return;
|
|
}
|
|
this.$emit('selectsku', data)
|
|
},
|
|
selectCategoey(index) {
|
|
this.categoryId = index;
|
|
this.pageIndex = 0;
|
|
this.totalPage = 1;
|
|
console.log(this.pageIndex);
|
|
this.getGoodsList();
|
|
setTimeout(() => {
|
|
this.scrollIntoView = 'category-2-' + index;
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 滚动到底部加载
|
|
*/
|
|
scrolltolower() {
|
|
this.getGoodsList();
|
|
},
|
|
/**
|
|
* 监听滚动
|
|
* @param {Object} e
|
|
*/
|
|
listenScroll(e) {
|
|
// this.scrollTop=e.detail.scrollTop;
|
|
if (e.detail.scrollTop <= 10) {
|
|
this.scrollType = 'top';
|
|
// this.watchGoodsList();
|
|
} else if (parseInt(e.detail.scrollTop + this.contentWrapHeight + 30) >= e.detail.scrollHeight) {
|
|
this.scrollType = 'bottom';
|
|
} else {
|
|
this.scrollType = '';
|
|
}
|
|
},
|
|
/**
|
|
* 触摸开始
|
|
* @param {Object} e
|
|
*/
|
|
touchstart(e) {
|
|
this.touchstartPosition = e.changedTouches[0].clientY;
|
|
},
|
|
/**
|
|
* 触摸结束
|
|
* @param {Object} e
|
|
*/
|
|
touchend(e) {
|
|
let end = e.changedTouches[0].clientY;
|
|
if ((this.scrollType == 'top' || this.scrollType == 'none') && end - this.touchstartPosition > 100) {
|
|
this.switchCategory('prev');
|
|
} else if ((this.scrollType == 'bottom' || this.scrollType == 'none') && this.touchstartPosition - end >
|
|
100) {
|
|
this.switchCategory('next');
|
|
}
|
|
},
|
|
/**
|
|
* 切换分类
|
|
* @param {Object} action
|
|
*/
|
|
switchCategory(action) {
|
|
if (action == 'prev') {
|
|
if (this.categoryId == -1) {
|
|
let index = this.index - 1;
|
|
if (index == -1) return;
|
|
this.$emit('switch', index);
|
|
} else {
|
|
let index = this.categoryId - 1;
|
|
this.selectCategoey(index);
|
|
}
|
|
} else {
|
|
if (this.categoryId == -1 || (this.category.child_list && this.categoryId == this.category.child_list
|
|
.length - 1)) {
|
|
let index = this.index + 1;
|
|
this.$emit('switch', index);
|
|
} else {
|
|
let index = this.categoryId + 1;
|
|
this.selectCategoey(index);
|
|
}
|
|
}
|
|
},
|
|
syncCartList() {
|
|
this.goodsList = this.goodsList.map(v => {
|
|
if(this.$store.state.cartList[`sku_${v.sku_id}`]) {
|
|
v.cart_num = this.$store.state.cartList[`sku_${v.sku_id}`].num
|
|
} else {
|
|
v.cart_num = 0
|
|
}
|
|
return v;
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.head {
|
|
width: 750rpx;
|
|
height: 484rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 32rpx 32rpx 0rpx 0rpx;
|
|
z-index: 999;
|
|
}
|
|
|
|
.seckill-item {
|
|
background-color: #fff;
|
|
// margin-bottom: 30rpx;
|
|
padding: 24rpx;
|
|
display: flex;
|
|
line-height: 40rpx;
|
|
border-bottom: 1px solid #E8E8E8;
|
|
|
|
.labels {
|
|
font-size: 30rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 40rpx;
|
|
margin-top: 10rpx;
|
|
|
|
.label-item {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
flex: 1;
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
|
|
.bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 16rpx;
|
|
|
|
.price {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
color: #EF6154;
|
|
|
|
span {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
margin: 0 16rpx 0 6rpx;
|
|
}
|
|
|
|
.y-price {
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
}
|
|
|
|
.title {
|
|
font-size: 32rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
margin-bottom: 16rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
}
|
|
|
|
.cover {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
border-radius: 8rpx;
|
|
margin-right: 24rpx;
|
|
position: relative;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.time {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
width: 100%;
|
|
position: absolute;
|
|
text-align: center;
|
|
font-size: 22rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
line-height: 44rpx;
|
|
background-color: rgba(0, 0, 0, .4);
|
|
bottom: 0;
|
|
border-radius: 0 0 8rpx 8rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-wrap {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 24rpx;
|
|
|
|
&.goods {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.category-title {
|
|
padding: 20rpx 0;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #222;
|
|
position: relative;
|
|
text-align: center;
|
|
|
|
&::after,
|
|
&::before {
|
|
content: ' ';
|
|
width: 46rpx;
|
|
border-top: 2rpx solid #DFDFDF;
|
|
position: absolute;
|
|
top: 50%;
|
|
}
|
|
|
|
&::after {
|
|
margin-left: 40rpx;
|
|
}
|
|
|
|
&::before {
|
|
margin-left: -80rpx;
|
|
}
|
|
}
|
|
|
|
.category-adv {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
line-height: 1;
|
|
padding: 20rpx 0;
|
|
|
|
image {
|
|
width: 100%;
|
|
border-radius: 8rpx;
|
|
}
|
|
}
|
|
|
|
.category-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.category-item {
|
|
|
|
width: 33.33%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 16rpx;
|
|
box-sizing: border-box;
|
|
|
|
.img-box {
|
|
width: 80%;
|
|
padding-top: 80%;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
margin-bottom: 20rpx;
|
|
position: relative;
|
|
|
|
image {
|
|
position: absolute;
|
|
width: 100%;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
|
|
.name {
|
|
width: 100%;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
line-height: 1;
|
|
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.goods-list {
|
|
.goods-item {
|
|
padding: 0 0 26rpx 0;
|
|
background: #fff;
|
|
display: flex;
|
|
position: relative;
|
|
|
|
.goods-img {
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
overflow: hidden;
|
|
border-radius: $border-radius;
|
|
margin-right: 14rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.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: 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: 26rpx;
|
|
left: 26rpx;
|
|
z-index: 5;
|
|
overflow: hidden;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.info-wrap {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 0;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.introduction {
|
|
line-height: 1;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.discount-price {
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
line-height: 1;
|
|
margin-top: 16rpx;
|
|
color: var(--price-color);
|
|
|
|
.unit {
|
|
margin-right: 6rpx;
|
|
}
|
|
}
|
|
|
|
.pro-info {
|
|
display: flex;
|
|
margin-top: 16rpx;
|
|
|
|
.delete-price {
|
|
text-decoration: line-through;
|
|
flex: 1;
|
|
|
|
.unit {
|
|
margin-right: 0rpx;
|
|
}
|
|
}
|
|
|
|
&>view {
|
|
line-height: 1;
|
|
|
|
&:nth-child(2) {
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.member-price-tag {
|
|
display: inline-block;
|
|
width: 60rpx;
|
|
line-height: 1;
|
|
margin-left: 6rpx;
|
|
height: 28rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.footer-wrap {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.right-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: end;
|
|
|
|
.num {
|
|
width: auto;
|
|
padding: 0 16rpx;
|
|
line-height: 1;
|
|
}
|
|
|
|
.num-action {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
background: $base-color;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
|
|
.click-event {
|
|
position: absolute;
|
|
width: 2rpx;
|
|
height: 2rpx;
|
|
left: 0;
|
|
top: 0;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 5;
|
|
}
|
|
|
|
&.reduce {
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
background-color: transparent;
|
|
border: 2rpx solid $base-color;
|
|
box-sizing: border-box;
|
|
|
|
.icon-jian {
|
|
color: $base-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon-jian,
|
|
.icon-jia {
|
|
color: var(--btn-text-color);
|
|
font-weight: bold;
|
|
font-size: 26rpx;
|
|
line-height: 1;
|
|
}
|
|
|
|
.select-sku {
|
|
font-weight: bold;
|
|
color: var(--btn-text-color);
|
|
font-size: 24rpx;
|
|
padding: 16rpx 24rpx;
|
|
border-radius: 12rpx;
|
|
position: relative;
|
|
// height: 40rpx;
|
|
line-height: 1;
|
|
text-align: center;
|
|
border-radius: 50rpx;
|
|
|
|
.num-tag {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
transform: translateY(-50%);
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
color: #fff;
|
|
line-height: 1.2;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
padding: 0 6rpx;
|
|
min-width: 32rpx;
|
|
border-radius: 16rpx;
|
|
background-color: $base-color;
|
|
border: 2rpx solid #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&[data-template="3"] .goods-item {
|
|
flex-direction: column;
|
|
|
|
.info-wrap {
|
|
width: 100%;
|
|
margin-top: 12rpx;
|
|
}
|
|
|
|
.goods-img {
|
|
width: 100%;
|
|
height: auto;
|
|
margin-right: 0;
|
|
line-height: 1;
|
|
|
|
image {
|
|
border-radius: 8rpx;
|
|
}
|
|
}
|
|
|
|
.select-sku {
|
|
font-weight: bold;
|
|
width: 128rpx;
|
|
height: 52rpx !important;
|
|
line-height: 52rpx !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.categoty-goods-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
|
|
.scroll-goods-view {
|
|
flex: 1;
|
|
height: 0;
|
|
transform: translateX(0px);
|
|
}
|
|
}
|
|
|
|
.screen-category-wrap {
|
|
display: flex;
|
|
|
|
.icon-unfold {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
padding: 0 0 0 20rpx;
|
|
}
|
|
}
|
|
|
|
.screen-category {
|
|
flex: 1;
|
|
width: 0;
|
|
padding: 0 0 20rpx 0;
|
|
white-space: nowrap;
|
|
height: 60rpx;
|
|
|
|
.item {
|
|
display: inline-block;
|
|
padding: 4rpx 24rpx;
|
|
background: #F5F5F5;
|
|
color: #666;
|
|
margin-right: 20rpx;
|
|
border-radius: 40rpx;
|
|
|
|
&.selected {
|
|
background-color: $base-color;
|
|
color: var(--btn-text-color);
|
|
;
|
|
}
|
|
}
|
|
}
|
|
|
|
/deep/ .uni-popup__wrapper-box {
|
|
border-radius: 0
|
|
}
|
|
|
|
.screen-category-popup {
|
|
display: flex;
|
|
|
|
.screen-category {
|
|
white-space: break-spaces;
|
|
padding: 20rpx;
|
|
height: auto;
|
|
}
|
|
|
|
.title {
|
|
line-height: 1;
|
|
margin-bottom: 20rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.item {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
}
|
|
|
|
.end-tips {
|
|
text-align: center;
|
|
color: #999;
|
|
font-size: 24rpx;
|
|
padding: 30rpx 0 30rpx 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/deep/ .loading-layer {
|
|
background: #fff !important;
|
|
}
|
|
|
|
.category-empty {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
padding-top: 100rpx;
|
|
|
|
image {
|
|
width: 280rpx;
|
|
height: 252rpx;
|
|
}
|
|
|
|
.tips {
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
color: #999;
|
|
margin-top: 50rpx;
|
|
}
|
|
}
|
|
|
|
.screen-category-4 .item {
|
|
background-color: #F2f2f2 !important;
|
|
padding: 10rpx 24rpx;
|
|
line-height: 1;
|
|
font-size: $font-size-tag;
|
|
|
|
&.selected {
|
|
background-color: var(--main-color-shallow) !important;
|
|
color: var(--main-color);
|
|
}
|
|
}
|
|
</style>
|
|
|