|
|
|
@ -17,11 +17,7 @@ |
|
|
|
<view class="header-search-row"> |
|
|
|
<view @click="searchTrigger"> |
|
|
|
<image mode="aspectFit" src="/static/images/icon/retail/search.png"></image> |
|
|
|
<input |
|
|
|
type="text" |
|
|
|
placeholder="请输入商品名称" |
|
|
|
disabled |
|
|
|
/> |
|
|
|
<input type="text" placeholder="请输入商品名称" disabled /> |
|
|
|
</view> |
|
|
|
<button hover-class="hover-active" @click="searchTrigger">搜索</button> |
|
|
|
</view> |
|
|
|
@ -30,14 +26,14 @@ |
|
|
|
<view class="main" :style="{ height:mainHeight }"> |
|
|
|
<scroll-view class="main-left" :scroll-top="categoryScrollTop" scroll-y="true" @scroll="categoryOnScroll"> |
|
|
|
<view class="main-left-list" v-if="item.isCateShow" v-for="item in goodsInfo" :key="item.cate.id"> |
|
|
|
<button plain=true @click="mainCategoryClick(item.cate.id)" :style="{ color:item.style.color, backgroundColor:item.style.backgroundColor }">{{ item.cate.erp_goods_cate_name }}</button> |
|
|
|
<button plain=true @click="mainCategoryClick(item.cate.id)" :style="{ fontWeight: item.style.fontWeight, color:item.style.color, backgroundColor:item.style.backgroundColor }">{{ item.cate.erp_goods_cate_name }}</button> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
<scroll-view class="main-right" scroll-top="0" scroll-y="true" v-if="scrollItem.isShow" v-for="scrollItem in goodsInfo" :key="scrollItem.cate.id"> |
|
|
|
<view class="main-right-list" v-for="item in scrollItem.goods_list" :key="item.id"> |
|
|
|
<view class="item-left"> |
|
|
|
<image mode="aspectFit" src="/static/images/icon/author_modal.png"></image> |
|
|
|
<view v-if="item.stock_num>0?false:true" class="item-left-empty"> |
|
|
|
<view v-if="item.stock_num?false:true" class="item-left-empty"> |
|
|
|
<view>盘罄</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -49,14 +45,14 @@ |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="item-right-price-count"> |
|
|
|
<view class="item-right-price-row" :style="{color:item.stock_num>0?'rgb(255,135,61)':'#9A9A9D'}"> |
|
|
|
<view class="item-right-price-row" :style="{color:item.stock_num?'#FF873D':'#9A9A9D'}"> |
|
|
|
<view><text>￥</text>{{ item.erp_goods_price }}</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="item-right-count-row"> |
|
|
|
<image v-if="item.count>0?true:false" mode="aspectFit" src="/static/images/icon/retail/sub.png" @click="mainCountClick('sub', scrollItem.cate.id, scrollItem.cate.erp_goods_cate_name, item.id, item.stock_num)"></image> |
|
|
|
<view v-if="item.count>0?true:false">{{ item.count }}</view> |
|
|
|
<image v-if="item.stock_num>0?true:false" mode="aspectFit" src="/static/images/icon/retail/add.png" @click="mainCountClick('add', scrollItem.cate.id, scrollItem.cate.erp_goods_cate_name, item.id, item.stock_num)"></image> |
|
|
|
<image v-if="item.count?true:false" mode="aspectFit" src="/static/images/icon/retail/sub.png" @click="mainCountClick('sub', scrollItem.cate.id, scrollItem.cate.erp_goods_cate_name, item.id, item.stock_num)"></image> |
|
|
|
<view v-if="item.count?true:false">{{ item.count }}</view> |
|
|
|
<image v-if="item.stock_num?true:false" mode="aspectFit" src="/static/images/icon/retail/add.png" @click="mainCountClick('add', scrollItem.cate.id, scrollItem.cate.erp_goods_cate_name, item.id, item.stock_num)"></image> |
|
|
|
<image v-else mode="aspectFit" src="/static/images/icon/retail/addEmpty.png" @click="mainCountClick('add', scrollItem.cate.id, scrollItem.cate.erp_goods_cate_name, item.id, item.stock_num)"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -66,8 +62,11 @@ |
|
|
|
</view> |
|
|
|
|
|
|
|
<hoverCartList |
|
|
|
:isShowCartList="isShowCartList" :cartList="cartList" @update:clearCart="clearCart" |
|
|
|
@update:cartInputConfirm="cartInputConfirm" @update:cartCountClick="cartCountClick" @update:maskClick="cartClick" |
|
|
|
:isShowCartList="isShowCartList" |
|
|
|
:cartList="cartList" |
|
|
|
@update:clearCart="clearCart" |
|
|
|
@update:cartCountClick="cartCountClick" |
|
|
|
@update:maskClick="cartClick" |
|
|
|
> |
|
|
|
</hoverCartList> |
|
|
|
|
|
|
|
@ -76,8 +75,8 @@ |
|
|
|
<view class="footer-price"> |
|
|
|
<view @click="cartClick"> |
|
|
|
<image mode="aspectFit" src="/static/images/icon/retail/cart.png"></image> |
|
|
|
<view v-if="(totalCount>0 && !isShowCartList) ? true:false">{{ totalCount }}</view> |
|
|
|
<view v-if="(cartTotalCount>0 && isShowCartList) ? true:false">{{ cartTotalCount }}</view> |
|
|
|
<view v-if="(totalCount && !isShowCartList) ? true:false">{{ totalCount }}</view> |
|
|
|
<view v-if="(cartTotalCount && isShowCartList) ? true:false">{{ cartTotalCount }}</view> |
|
|
|
</view> |
|
|
|
<view>合计：</view> |
|
|
|
<view v-if="!isShowCartList"><text>￥</text>{{ totalPrice }}</view> |
|
|
|
@ -99,14 +98,14 @@ import retailApi from '../../js/retail_api'; |
|
|
|
import hoverCartList from '../../components/hover_cart_list/hover_cart_list'; |
|
|
|
|
|
|
|
export default { |
|
|
|
components: { |
|
|
|
'hoverCartList': hoverCartList |
|
|
|
}, |
|
|
|
components: { |
|
|
|
'hoverCartList': hoverCartList , |
|
|
|
}, |
|
|
|
data(){ |
|
|
|
return { |
|
|
|
categoryBtnStyle: { // 分类按钮样式 |
|
|
|
default: { "color":"rgb(154,154,157)", "backgroundColor":"rgba(0,0,0,0)" }, |
|
|
|
click: { "color":"rgb(0,152,116)", "backgroundColor":"rgb(205,235,228)" }, |
|
|
|
default: { fontWeight:"normal", color:"#9A9A9D", backgroundColor:"rgba(0,0,0,0)" }, |
|
|
|
click: { fontWeight:"600", color:"#009874", backgroundColor:"rgba(0,152,116,0.2)" }, |
|
|
|
}, |
|
|
|
categoryScrollTop: 0, // 分类滚动值 |
|
|
|
categoryOldScrollTop: 0, // 分类滚动旧值 |
|
|
|
@ -141,8 +140,8 @@ export default { |
|
|
|
this.getRetailStatus(); // 获取收款出库状态 |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
cartList() { |
|
|
|
this.setCartConfirmStyle(); |
|
|
|
cartList() { |
|
|
|
this.setCartConfirmStyle(); |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
@ -152,29 +151,18 @@ export default { |
|
|
|
|
|
|
|
uni.getStorage({ |
|
|
|
key: 'retailStatus', |
|
|
|
success: function (res) { |
|
|
|
success: (res) => { |
|
|
|
_this.getGoodsInfo(); // 重新获取 刷新商品数据，把出库的数据清了 |
|
|
|
_this.deleteRetailLocal(); // 删除收款出库状态 |
|
|
|
}, |
|
|
|
fail: function(err) { |
|
|
|
console.log(err); |
|
|
|
_this.deleteRetailLocal(); // 删除收款出库状态 |
|
|
|
}, |
|
|
|
fail: (err) => { _this.deleteRetailLocal();}, |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
// 删除收款出库状态 |
|
|
|
deleteRetailLocal() { |
|
|
|
this.searchData = null; |
|
|
|
|
|
|
|
uni.removeStorage({ |
|
|
|
key: 'retailStatus', |
|
|
|
success: function (res) { |
|
|
|
console.log('success'); |
|
|
|
} |
|
|
|
}); |
|
|
|
uni.removeStorage({ key: 'retailStatus', success: (res) => {} }); |
|
|
|
}, |
|
|
|
|
|
|
|
// 分类列表滚动监听 |
|
|
|
categoryOnScroll(e) { |
|
|
|
this.categoryOldScrollTop = e.detail.scrollTop; |
|
|
|
@ -183,16 +171,12 @@ export default { |
|
|
|
categoryGoTop(e) { |
|
|
|
let _this = this; |
|
|
|
_this.categoryScrollTop = _this.categoryOldScrollTop; |
|
|
|
_this.$nextTick(function() { |
|
|
|
_this.categoryScrollTop = 0; |
|
|
|
}); |
|
|
|
_this.$nextTick(() => { _this.categoryScrollTop = 0; }); |
|
|
|
}, |
|
|
|
|
|
|
|
// 设置搜索数据 默认列表第一项是存放搜索数据 |
|
|
|
setSearchData(data) { |
|
|
|
util.showLoad(); |
|
|
|
setTimeout(util.hideLoad, 1000); |
|
|
|
|
|
|
|
setTimeout(util.hideLoad, 500); |
|
|
|
this.goodsInfo[0].goods_list = []; |
|
|
|
|
|
|
|
// 剔除相同的商品 |
|
|
|
@ -206,77 +190,55 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
for (let key in tempData) { |
|
|
|
this.goodsInfo[0].goods_list.push(tempData[key]); |
|
|
|
} |
|
|
|
for (let key in tempData) this.goodsInfo[0].goods_list.push(tempData[key]); |
|
|
|
|
|
|
|
// 同步一下数据，因为有可能搜索的数据 在其他分类出现过 |
|
|
|
let otherData = []; |
|
|
|
for (let i = this.categoryIndex; i < this.goodsInfo.length; ++i) { |
|
|
|
for (let j = 0; j < this.goodsInfo[i].goods_list.length; ++j) { |
|
|
|
for (let j = 0; j < this.goodsInfo[i].goods_list.length; ++j) |
|
|
|
otherData.push(this.goodsInfo[i].goods_list[j]); |
|
|
|
} |
|
|
|
} |
|
|
|
for (let i = 0; i < this.goodsInfo[0].goods_list.length; ++i) { |
|
|
|
for (let j = 0; j < otherData.length; ++j) { |
|
|
|
if (this.goodsInfo[0].goods_list[i].id == otherData[j].id) { |
|
|
|
if (this.goodsInfo[0].goods_list[i].id == otherData[j].id) |
|
|
|
this.goodsInfo[0].goods_list[i].count = otherData[j].count; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
// end |
|
|
|
|
|
|
|
this.categoryGoTop(); // 每次搜索后，分类列表都要滚动到顶部 |
|
|
|
this.goodsInfo[0].isCateShow = true; |
|
|
|
this.mainCategoryClick(this.goodsInfo[0].cate.id); |
|
|
|
}, |
|
|
|
|
|
|
|
// 获取本地的历史搜索 |
|
|
|
getSearchLocal() { |
|
|
|
let _this = this; |
|
|
|
|
|
|
|
uni.getStorage({ |
|
|
|
key: 'searchData', |
|
|
|
success: function (res) { |
|
|
|
success: (res) => { |
|
|
|
_this.setSearchData(res.data); // 设置搜索数据 |
|
|
|
_this.deleteSearchLocal(); // 删除本地的历史搜索 |
|
|
|
}, |
|
|
|
fail: function(err) { |
|
|
|
console.log(err); |
|
|
|
_this.deleteSearchLocal(); // 删除本地的历史搜索 |
|
|
|
}, |
|
|
|
fail: (err) => { _this.deleteSearchLocal(); }, |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
// 删除本地的历史搜索 |
|
|
|
deleteSearchLocal() { |
|
|
|
this.searchData = null; |
|
|
|
|
|
|
|
uni.removeStorage({ |
|
|
|
key: 'searchData', |
|
|
|
success: function (res) { |
|
|
|
console.log('success'); |
|
|
|
} |
|
|
|
}); |
|
|
|
uni.removeStorage({ key: 'searchData', success: (res) => {} }); |
|
|
|
}, |
|
|
|
|
|
|
|
// 触发搜索 |
|
|
|
searchTrigger() { |
|
|
|
let data = { |
|
|
|
curStore: this.curStore, |
|
|
|
}; |
|
|
|
|
|
|
|
let data = { curStore: this.curStore }; |
|
|
|
uni.navigateTo({ |
|
|
|
url: `/subpackage/retail/pages/search/search?data=${encodeURIComponent(JSON.stringify(data))}` |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
// 购物车输入确认 |
|
|
|
cartInputConfirm(value, i) { |
|
|
|
this.cartList[i].erp_goods_price = value; |
|
|
|
this.calcCartTotalPriceAndCount(); // 计算购物车总价跟总量 |
|
|
|
}, |
|
|
|
|
|
|
|
// 计算购物车总价跟总量 |
|
|
|
calcCartTotalPriceAndCount() { |
|
|
|
let price = 0.0; |
|
|
|
@ -286,24 +248,20 @@ export default { |
|
|
|
price += (this.cartList[i].count * this.cartList[i].erp_goods_price); |
|
|
|
count += this.cartList[i].count; |
|
|
|
} |
|
|
|
|
|
|
|
this.cartTotalPrice = price.toFixed(2); |
|
|
|
this.cartTotalCount = count; |
|
|
|
}, |
|
|
|
|
|
|
|
// 清空购物车 |
|
|
|
clearCart() { |
|
|
|
this.cartList = []; |
|
|
|
for (let i = 0; i < this.goodsInfo.length; ++i) { |
|
|
|
for (let j = 0; j < this.goodsInfo[i].goods_list.length; ++j) { |
|
|
|
for (let j = 0; j < this.goodsInfo[i].goods_list.length; ++j) |
|
|
|
this.goodsInfo[i].goods_list[j].count = 0; |
|
|
|
} |
|
|
|
} |
|
|
|
this.isShowCartList = false; |
|
|
|
this.calcCartTotalPriceAndCount(); // 计算购物车总价跟总量 |
|
|
|
this.calcTotalPriceAndCount(); // 计算总价跟总量 |
|
|
|
}, |
|
|
|
|
|
|
|
// 购物车列表数量选项触发 |
|
|
|
cartCountClick(type, i) { |
|
|
|
// 增减购物车对应的主页数量 |
|
|
|
@ -311,80 +269,52 @@ export default { |
|
|
|
let mainItems = []; // 可能不止一个 |
|
|
|
for (let i = 0; i < this.goodsInfo.length; ++i) { |
|
|
|
for (let j = 0; j < this.goodsInfo[i].goods_list.length; ++j) { |
|
|
|
if (curId == this.goodsInfo[i].goods_list[j].id) { |
|
|
|
if (curId == this.goodsInfo[i].goods_list[j].id) |
|
|
|
mainItems.push(this.goodsInfo[i].goods_list[j]); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
switch (type) { |
|
|
|
case "add": { |
|
|
|
// 判断库存 |
|
|
|
if (this.cartList[i].count + 1 > this.cartList[i].stock_num) { |
|
|
|
util.showNone("库存就这么多了！"); |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
this.cartList[i].count += 1; |
|
|
|
for (let i = 0; i < mainItems.length; ++i) { |
|
|
|
mainItems[i].count += 1; |
|
|
|
} |
|
|
|
for (let i = 0; i < mainItems.length; ++i) mainItems[i].count += 1; |
|
|
|
} break; |
|
|
|
case "sub": { |
|
|
|
if (this.cartList[i].count > 0) { |
|
|
|
this.cartList[i].count -= 1; |
|
|
|
} |
|
|
|
if (this.cartList[i].count > 0) this.cartList[i].count -= 1; |
|
|
|
|
|
|
|
for (let i = 0; i < mainItems.length; ++i) { |
|
|
|
if (mainItems[i].count > 0) { |
|
|
|
mainItems[i].count -= 1; |
|
|
|
} |
|
|
|
if (mainItems[i].count > 0) mainItems[i].count -= 1; |
|
|
|
} |
|
|
|
|
|
|
|
} break; |
|
|
|
} |
|
|
|
|
|
|
|
// 没数量了就删掉 |
|
|
|
if (this.cartList[i].count <= 0) { |
|
|
|
this.cartList.splice(i, 1); |
|
|
|
} |
|
|
|
// 列表没了，隐藏 |
|
|
|
if (!this.cartList.length) { |
|
|
|
this.isShowCartList = false; |
|
|
|
} |
|
|
|
|
|
|
|
if (this.cartList[i].count <= 0) this.cartList.splice(i, 1); // 没数量了就删掉 |
|
|
|
if (!this.cartList.length) this.isShowCartList = false; // 列表没了，隐藏 |
|
|
|
this.calcCartTotalPriceAndCount(); // 计算购物车总价跟总量 |
|
|
|
this.calcTotalPriceAndCount(); // 计算总价跟总量 |
|
|
|
}, |
|
|
|
|
|
|
|
// 获取购物车列表的最终数据 |
|
|
|
getCartListFinalData() { |
|
|
|
let arr = []; |
|
|
|
|
|
|
|
for (let i = 0; i < this.cartList.length; ++i) { |
|
|
|
if (this.cartList[i].count) { |
|
|
|
arr.push(tools.getNewObj(this.cartList[i])); |
|
|
|
} |
|
|
|
if (this.cartList[i].count) arr.push(tools.getNewObj(this.cartList[i])); |
|
|
|
} |
|
|
|
|
|
|
|
return arr; |
|
|
|
}, |
|
|
|
|
|
|
|
// 购物车确认 |
|
|
|
cartConfirm() { |
|
|
|
if (this.cartList.length <= 0) { |
|
|
|
return; |
|
|
|
} |
|
|
|
if (this.cartList.length <= 0) return; |
|
|
|
this.cartListFinal = this.getCartListFinalData(); |
|
|
|
|
|
|
|
// 有数据，那么需要跳到确定页面 |
|
|
|
if (this.cartListFinal.length) { |
|
|
|
this.isShowCartList = false; |
|
|
|
|
|
|
|
let data = { |
|
|
|
cartListFinal: this.cartListFinal, |
|
|
|
curStore: this.curStore, |
|
|
|
}; |
|
|
|
let data = { cartListFinal: this.cartListFinal, curStore: this.curStore }; |
|
|
|
uni.navigateTo({ |
|
|
|
url: `/subpackage/retail/pages/confirm_goods/confirm_goods?data=${encodeURIComponent(JSON.stringify(data))}` |
|
|
|
}); |
|
|
|
@ -393,7 +323,6 @@ export default { |
|
|
|
util.showNone("购物车无数据！"); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 加入购物车列表 |
|
|
|
addToCartList() { |
|
|
|
this.cartList = []; |
|
|
|
@ -401,42 +330,33 @@ export default { |
|
|
|
// 计算购物车列表 |
|
|
|
for (let i = this.categoryIndex; i < this.goodsInfo.length; ++i) { |
|
|
|
for (let j = 0; j < this.goodsInfo[i].goods_list.length; ++j) { |
|
|
|
if (this.goodsInfo[i].goods_list[j].count) { |
|
|
|
if (this.goodsInfo[i].goods_list[j].count) |
|
|
|
this.cartList.push(tools.getNewObj(this.goodsInfo[i].goods_list[j])); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 再把搜索跟热销的 不在其他分类里的数据找出来也加上 |
|
|
|
let tempData = this.findDifferentData(); // 找不同 |
|
|
|
for (let i = 0; i < tempData.length; ++i) { |
|
|
|
this.cartList.push(tools.getNewObj(tempData[i])); |
|
|
|
} |
|
|
|
for (let i = 0; i < tempData.length; ++i) this.cartList.push(tools.getNewObj(tempData[i])); |
|
|
|
}, |
|
|
|
|
|
|
|
setCartConfirmStyle() { |
|
|
|
this.cartConfirmOpacity = this.cartList.length > 0 ? 1 : 0.3; |
|
|
|
}, |
|
|
|
|
|
|
|
// 购物车点击 |
|
|
|
cartClick() { |
|
|
|
if (!this.cartList.length) { |
|
|
|
return; |
|
|
|
} |
|
|
|
if (!this.cartList.length) return; |
|
|
|
|
|
|
|
if (this.isShowCartList) { |
|
|
|
this.isShowCartList = false; |
|
|
|
} |
|
|
|
else { |
|
|
|
this.addToCartList(); // 将主页数据加入到购物车列表 |
|
|
|
|
|
|
|
this.cartTotalPrice = this.totalPrice; |
|
|
|
this.cartTotalCount = this.totalCount; |
|
|
|
this.isShowCartList = true; |
|
|
|
this.calcCartTotalPriceAndCount(); // 计算购物车总价跟总量 |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 适配主内容高度 |
|
|
|
fixMainHeight() { |
|
|
|
let _this = this; |
|
|
|
@ -458,43 +378,33 @@ export default { |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
// 找搜索跟热销 不同于其他分类的数据 |
|
|
|
findDifferentData() { |
|
|
|
let searchAndHotData = []; |
|
|
|
for (let i = 0; i < this.categoryIndex; ++i) { |
|
|
|
for (let j = 0; j < this.goodsInfo[i].goods_list.length; ++j) { |
|
|
|
for (let j = 0; j < this.goodsInfo[i].goods_list.length; ++j) |
|
|
|
searchAndHotData.push(this.goodsInfo[i].goods_list[j]); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
let otherData = []; |
|
|
|
for (let i = this.categoryIndex; i < this.goodsInfo.length; ++i) { |
|
|
|
for (let j = 0; j < this.goodsInfo[i].goods_list.length; ++j) { |
|
|
|
for (let j = 0; j < this.goodsInfo[i].goods_list.length; ++j) |
|
|
|
otherData.push(this.goodsInfo[i].goods_list[j]); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
let mark = false; |
|
|
|
let tempData = []; |
|
|
|
for (let i = 0; i < searchAndHotData.length; ++i) { |
|
|
|
mark = false; // 表示不在其他分类里面 |
|
|
|
|
|
|
|
for (let j = 0; j < otherData .length; ++j) { |
|
|
|
if (searchAndHotData[i].id == otherData [j].id) { |
|
|
|
mark = true; |
|
|
|
} |
|
|
|
if (searchAndHotData[i].id == otherData [j].id) mark = true; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 如果不在 并且有数量，那么加进列表 |
|
|
|
if (!mark && searchAndHotData[i].count) { |
|
|
|
tempData.push(searchAndHotData[i]); |
|
|
|
} |
|
|
|
if (!mark && searchAndHotData[i].count) tempData.push(searchAndHotData[i]); |
|
|
|
} |
|
|
|
|
|
|
|
return tempData; |
|
|
|
}, |
|
|
|
|
|
|
|
// 计算总价跟总量 |
|
|
|
calcTotalPriceAndCount() { |
|
|
|
let price = 0.0; |
|
|
|
@ -516,11 +426,9 @@ export default { |
|
|
|
count += tempData[i].count; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
this.totalPrice = price.toFixed(2); |
|
|
|
this.totalCount = count; |
|
|
|
}, |
|
|
|
|
|
|
|
// 主页数量选项触发 |
|
|
|
mainCountClick(type, id, cateName, goodsId, stockNum) { |
|
|
|
if (stockNum <= 0) return; |
|
|
|
@ -548,7 +456,6 @@ export default { |
|
|
|
if (goodsItem) { |
|
|
|
switch (type) { |
|
|
|
case "add": { |
|
|
|
// 判断库存 |
|
|
|
if (goodsItem.count + 1 > goodsItem.stock_num) { |
|
|
|
util.showNone("库存就这么多了！"); |
|
|
|
return; |
|
|
|
@ -556,10 +463,7 @@ export default { |
|
|
|
goodsItem.count += 1; |
|
|
|
} break; |
|
|
|
case "sub": { |
|
|
|
if (goodsItem.count <= 0) { |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
if (goodsItem.count <= 0) return; |
|
|
|
goodsItem.count -= 1; |
|
|
|
} break; |
|
|
|
} |
|
|
|
@ -568,16 +472,13 @@ export default { |
|
|
|
// 遍历物品列表，把相同物品的数量 设置成当前点击物品的数量 |
|
|
|
for (let i = 0; i < this.goodsInfo.length; ++i) { |
|
|
|
for (let j = 0; j < this.goodsInfo[i].goods_list.length; ++j) { |
|
|
|
if (this.goodsInfo[i].goods_list[j].id == goodsItem.id) { |
|
|
|
if (this.goodsInfo[i].goods_list[j].id == goodsItem.id) |
|
|
|
this.goodsInfo[i].goods_list[j].count = goodsItem.count; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
this.calcTotalPriceAndCount(); // 计算总价跟总量 |
|
|
|
this.addToCartList(); // 将主页数据加入到购物车列表 |
|
|
|
}, |
|
|
|
|
|
|
|
// 主页分类选项触发 |
|
|
|
mainCategoryClick(id) { |
|
|
|
// 将所有按钮恢复默认状态，点击的按钮则是另外的状态 |
|
|
|
@ -586,9 +487,7 @@ export default { |
|
|
|
this.goodsInfo[i].style = this.categoryBtnStyle.default; |
|
|
|
this.goodsInfo[i].isShow = false; |
|
|
|
|
|
|
|
if (this.goodsInfo[i].cate.id == id) { |
|
|
|
item = this.goodsInfo[i]; |
|
|
|
} |
|
|
|
if (this.goodsInfo[i].cate.id == id) item = this.goodsInfo[i]; |
|
|
|
} |
|
|
|
|
|
|
|
if (item) { |
|
|
|
@ -596,7 +495,6 @@ export default { |
|
|
|
item.isShow = true; |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 获取商品信息 |
|
|
|
getGoodsInfo() { |
|
|
|
let _this = this; |
|
|
|
@ -628,18 +526,13 @@ export default { |
|
|
|
|
|
|
|
for (let i = 0; i < res.data.data.list.length; ++i) { |
|
|
|
// 过滤没有商品数据的分类 |
|
|
|
if (!res.data.data.list[i].goods_list || !res.data.data.list[i].goods_list.length) { |
|
|
|
// res.data.data.list[i].goods_list = []; |
|
|
|
continue; |
|
|
|
} |
|
|
|
if (!res.data.data.list[i].goods_list || !res.data.data.list[i].goods_list.length) continue; |
|
|
|
|
|
|
|
if (res.data.data.list[i].cate.erp_goods_cate_name == "热销") { |
|
|
|
_this.categoryIndex = 2; // 如果有热销，那么分类索引值从2开始，前面两项过滤掉（搜索、热销） |
|
|
|
} |
|
|
|
// 如果有热销，那么分类索引值从2开始，前面两项过滤掉（搜索、热销） |
|
|
|
if (res.data.data.list[i].cate.erp_goods_cate_name == "热销") _this.categoryIndex = 2; |
|
|
|
|
|
|
|
for (let j = 0; j < res.data.data.list[i].goods_list.length; ++j) { |
|
|
|
for (let j = 0; j < res.data.data.list[i].goods_list.length; ++j) |
|
|
|
res.data.data.list[i].goods_list[j].count = 0; // 用来计数 |
|
|
|
} |
|
|
|
|
|
|
|
res.data.data.list[i].isCateShow = true; |
|
|
|
res.data.data.list[i].isShow = false; |
|
|
|
@ -655,7 +548,6 @@ export default { |
|
|
|
_this.goodsInfo[1].isShow = true; |
|
|
|
} |
|
|
|
_this.categoryGoTop(); // 分类列表需要滚动至顶部 |
|
|
|
|
|
|
|
util.hideLoad(); |
|
|
|
} |
|
|
|
else { |
|
|
|
@ -664,7 +556,6 @@ export default { |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
// 店铺列表 |
|
|
|
getStoreList() { |
|
|
|
util.showLoad(); |
|
|
|
@ -691,7 +582,6 @@ export default { |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
// 当前店铺变化 |
|
|
|
curStoreChange(e) { |
|
|
|
let _this = this; |
|
|
|
@ -707,12 +597,10 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
@function toDouble($value) { |
|
|
|
@return $value * 2; |
|
|
|
} |
|
|
|
|
|
|
|
@import '~style/public.scss'; |
|
|
|
$orange: #FF873D; |
|
|
|
page { |
|
|
|
background-color: rgb(255,255,255); |
|
|
|
background-color: white; |
|
|
|
} |
|
|
|
|
|
|
|
.container { |
|
|
|
@ -725,65 +613,48 @@ export default { |
|
|
|
padding-bottom: calc( 0rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|
|
|
|
|
|
|
.header { |
|
|
|
// height: 230rpx; |
|
|
|
// border: 1rpx solid red; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
background-color: rgb(237,237,245); |
|
|
|
background-color: #F2F2F7; |
|
|
|
z-index: 0; |
|
|
|
|
|
|
|
.header-store-selecter { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
align-items: center; |
|
|
|
@include centerFlex(flex-start); |
|
|
|
padding-left: 38rpx; |
|
|
|
fotn-size: 32rpx; |
|
|
|
|
|
|
|
& { |
|
|
|
position: relative; |
|
|
|
height: 78rpx; |
|
|
|
line-height: 78rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.header-store-selecter-name { |
|
|
|
height: 78rpx; |
|
|
|
height: 100%; |
|
|
|
line-height: 78rpx; |
|
|
|
fotn-size: 16rpx; |
|
|
|
margin-right: 14rpx; |
|
|
|
color: #333333; |
|
|
|
} |
|
|
|
.header-store-selecter-left-img { |
|
|
|
width: 36rpx; |
|
|
|
height: 36rpx; |
|
|
|
} |
|
|
|
.header-store-selecter-right-img { |
|
|
|
width: 18rpx; |
|
|
|
height: 18rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.header-search-row { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
@include centerFlex(center); |
|
|
|
height: 92rpx; |
|
|
|
margin-top: 17rpx; |
|
|
|
|
|
|
|
>view { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
@include centerFlex(space-between); |
|
|
|
flex-grow: 1; |
|
|
|
height: 92rpx; |
|
|
|
height: 100%; |
|
|
|
border-radius: 10rpx; |
|
|
|
background-color: #FFFFFF; |
|
|
|
background-color: white; |
|
|
|
margin-left: 24rpx; |
|
|
|
padding-left: 20rpx; |
|
|
|
padding-right: 20rpx; |
|
|
|
padding: 0 20rpx; |
|
|
|
|
|
|
|
>input { |
|
|
|
flex-grow: 1; |
|
|
|
height: 100%; |
|
|
|
font-size: 32rpx; |
|
|
|
} |
|
|
|
>image{ |
|
|
|
flex-shrink: 0; |
|
|
|
@ -794,37 +665,32 @@ export default { |
|
|
|
} |
|
|
|
>button { |
|
|
|
flex-shrink: 0; |
|
|
|
margin-left: 20rpx; |
|
|
|
margin-right: 20rpx; |
|
|
|
margin: 0 20rpx; |
|
|
|
padding: 0 0; |
|
|
|
width: 142rpx; |
|
|
|
height: 88rpx; |
|
|
|
line-height: 88rpx; |
|
|
|
font-size: 32rpx; |
|
|
|
color: #FFFFFF; |
|
|
|
background-color: #009874; |
|
|
|
color: white; |
|
|
|
background-color: $themeColor; |
|
|
|
border-radius: 10rpx; |
|
|
|
white-space: nowrap; |
|
|
|
padding: 0 0; |
|
|
|
font-size: 32rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.main { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
justify-content: space-between; |
|
|
|
// border: 1rpx solid green; |
|
|
|
position: relative; |
|
|
|
background-color: rgb(237,237,245); |
|
|
|
background-color: #F2F2F7; |
|
|
|
padding-top: 24rpx; |
|
|
|
// padding-bottom: 18rpx; |
|
|
|
padding-bottom: calc( 18rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|
|
|
padding-bottom: calc( 18rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|
|
|
|
|
|
|
.main-left { |
|
|
|
width: 180rpx; |
|
|
|
margin-right: 12rpx; |
|
|
|
background-color: rgb(255,255,255); |
|
|
|
background-color: white; |
|
|
|
border-top-right-radius: 30rpx; |
|
|
|
|
|
|
|
.main-left-list { |
|
|
|
@ -838,35 +704,28 @@ export default { |
|
|
|
border-radius: 0rpx; |
|
|
|
border-top-right-radius: 30rpx; |
|
|
|
border: 0rpx; |
|
|
|
color: rgb(154,154,157); |
|
|
|
background-color: rgba(0,0,0,0); |
|
|
|
font-size: 25rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.main-right { |
|
|
|
width: 558rpx; |
|
|
|
background-color: rgb(255,255,255); |
|
|
|
border-radius: 10rpx; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
width: 558rpx; |
|
|
|
background-color: white; |
|
|
|
border-radius: 10rpx; |
|
|
|
padding-left: 20rpx; |
|
|
|
// padding-right: 20rpx; |
|
|
|
|
|
|
|
.main-right-list { |
|
|
|
// border-bottom: 1rpx solid rgb(237,237,245); |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
padding-top: 20rpx; |
|
|
|
padding-bottom: 20rpx; |
|
|
|
// border: 1px solid red; |
|
|
|
padding: 20rpx 0; |
|
|
|
|
|
|
|
.item-left { |
|
|
|
position: relative; |
|
|
|
width: 172rpx; |
|
|
|
height: 172rpx; |
|
|
|
margin-right: 20rpx; |
|
|
|
// border: 1px solid red; |
|
|
|
position: relative; |
|
|
|
border-radius: 10rpx; |
|
|
|
|
|
|
|
>image { |
|
|
|
@ -877,15 +736,14 @@ export default { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
position: absolute; |
|
|
|
top: 0rpx; |
|
|
|
left: 0rpx; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
background-color: rgba(0,0,0,0.5); |
|
|
|
border-radius: 10rpx; |
|
|
|
|
|
|
|
>view { |
|
|
|
font-size: 28rpx; |
|
|
|
color: #333333; |
|
|
|
background: #FFFFFF; |
|
|
|
background: white; |
|
|
|
width: 88rpx; |
|
|
|
height: 88rpx; |
|
|
|
border-radius: 50%; |
|
|
|
@ -893,9 +751,7 @@ export default { |
|
|
|
top: 50%; |
|
|
|
left: 50%; |
|
|
|
transform: translate(-50%,-50%); |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
@include centerFlex(center); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -903,23 +759,20 @@ export default { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: space-between; |
|
|
|
// border: 1px solid red; |
|
|
|
flex-grow: 1; |
|
|
|
padding-right: 20rpx; |
|
|
|
|
|
|
|
.item-right-top { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
// border: 1px solid black; |
|
|
|
|
|
|
|
.item-right-name { |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
.item-right-spec { |
|
|
|
margin-top: 8rpx; |
|
|
|
margin-bottom: 14rpx; |
|
|
|
margin: 8rpx 0 14rpx 0; |
|
|
|
font-size: 24rpx; |
|
|
|
color: rgb(154,154,157); |
|
|
|
color: #9A9A9D; |
|
|
|
} |
|
|
|
.item-right-special { |
|
|
|
width: 58rpx; |
|
|
|
@ -934,34 +787,25 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.item-right-price-count { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
// border: 1rpx solid green; |
|
|
|
@include centerFlex(space-between); |
|
|
|
|
|
|
|
.item-right-price-row { |
|
|
|
// display: flex; |
|
|
|
// flex-direction: row; |
|
|
|
// align-items: center; |
|
|
|
color: rgb(255,135,61); |
|
|
|
color: $orange; |
|
|
|
|
|
|
|
>view { |
|
|
|
&:first-child { |
|
|
|
font-size: 32rpx; |
|
|
|
line-height: 32rpx; |
|
|
|
|
|
|
|
>text { |
|
|
|
font-size: 24rpx; |
|
|
|
line-height: 24rpx; |
|
|
|
} |
|
|
|
font-size: 36rpx; |
|
|
|
line-height: 32rpx; |
|
|
|
font-weight: 500; |
|
|
|
|
|
|
|
>text { |
|
|
|
font-size: 28rpx; |
|
|
|
line-height: 28rpx; |
|
|
|
font-weight: 400; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.item-right-count-row { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
align-items: center; |
|
|
|
@include centerFlex(flex-start); |
|
|
|
|
|
|
|
>image { |
|
|
|
&:first-child { |
|
|
|
@ -974,9 +818,7 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
>view { |
|
|
|
margin-left: 12rpx; |
|
|
|
margin-right: 12rpx; |
|
|
|
color: rgb(51,51,51); |
|
|
|
margin: 0 12rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
@ -985,110 +827,90 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.footer { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
@include centerFlex(center); |
|
|
|
position: fixed; |
|
|
|
// bottom: 0rpx; |
|
|
|
bottom: calc( 0rpx + constant(safe-area-inset-bottom)); |
|
|
|
bottom: calc( 0rpx + env(safe-area-inset-bottom)); |
|
|
|
// padding-bottom: calc( 0rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|
|
|
// padding-bottom: calc( 0rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|
|
|
width: 100%; |
|
|
|
height: 108rpx; |
|
|
|
// border: 1rpx solid blue; |
|
|
|
background-color: rgb(255,255,255); |
|
|
|
background-color: white; |
|
|
|
|
|
|
|
>view { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
@include centerFlex(space-between); |
|
|
|
flex-grow: 1; |
|
|
|
// border: 1px solid red; |
|
|
|
// margin-top: 24rpx; |
|
|
|
|
|
|
|
.footer-price { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
align-items: center; |
|
|
|
@include centerFlex(flex-start); |
|
|
|
margin-left: 36rpx; |
|
|
|
|
|
|
|
>view { |
|
|
|
&:first-child { |
|
|
|
position: relative; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
align-items: center; |
|
|
|
// border: 1rpx solid green; |
|
|
|
@include centerFlex(flex-start); |
|
|
|
|
|
|
|
>image { |
|
|
|
width: 84rpx; |
|
|
|
height: 84rpx; |
|
|
|
} |
|
|
|
|
|
|
|
>view { |
|
|
|
position: absolute; |
|
|
|
top: 0rpx; |
|
|
|
right: 0rpx; |
|
|
|
color: rgb(255,255,255); |
|
|
|
background-color: rgb(230,0,18); |
|
|
|
top: 0; |
|
|
|
right: 0; |
|
|
|
color: white; |
|
|
|
background-color: #E60012; |
|
|
|
font-size: 20rpx; |
|
|
|
line-height: 40rpx; |
|
|
|
border-radius: 100%; |
|
|
|
width: 40rpx; |
|
|
|
height: 40rpx; |
|
|
|
line-height: 40rpx; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
} |
|
|
|
&:nth-child(2) { |
|
|
|
flex-shrink: 0; |
|
|
|
margin-left: 10rpx; |
|
|
|
font-size: 24rpx; |
|
|
|
line-height: 24rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
line-height: 28rpx; |
|
|
|
} |
|
|
|
&:nth-child(3) { |
|
|
|
font-size: 32rpx; |
|
|
|
line-height: 32rpx; |
|
|
|
color: rgb(255,135,61); |
|
|
|
font-size: 40rpx; |
|
|
|
line-height: 40rpx; |
|
|
|
color: $orange; |
|
|
|
|
|
|
|
>text { |
|
|
|
font-size: 24rpx; |
|
|
|
line-height: 24rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
line-height: 28rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
&:nth-child(4) { |
|
|
|
font-size: 32rpx; |
|
|
|
line-height: 32rpx; |
|
|
|
color: rgb(255,135,61); |
|
|
|
font-size: 40rpx; |
|
|
|
line-height: 40rpx; |
|
|
|
color: $orange; |
|
|
|
|
|
|
|
>text { |
|
|
|
font-size: 24rpx; |
|
|
|
line-height: 24rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
line-height: 28rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.footer-confirm { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
align-items: center; |
|
|
|
@include centerFlex(flex-start); |
|
|
|
margin-right: 24rpx; |
|
|
|
|
|
|
|
>button { |
|
|
|
flex-shrink: 0; |
|
|
|
width: 240rpx; |
|
|
|
height: 88rpx; |
|
|
|
line-height: 88rpx; |
|
|
|
color: #FFFFFF; |
|
|
|
font-weight: 500; |
|
|
|
font-size: 32rpx; |
|
|
|
line-height: 88rpx; |
|
|
|
border: 0rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
background-color: #009874; |
|
|
|
color: white; |
|
|
|
background-color: $themeColor; |
|
|
|
white-space: nowrap; |
|
|
|
padding: 0 0; |
|
|
|
opacity: 0.3; |
|
|
|
|
