|
|
|
@ -10,8 +10,6 @@ |
|
|
|
:disabled="storeListDisabled" |
|
|
|
> |
|
|
|
<view class="header-store-selecter"> |
|
|
|
<image class="header-store-selecter-left-img" mode="aspectFit" src="/static/images/icon/retail/home.png"></image> |
|
|
|
<!-- <input id="cur-store-input-node" placeholder="请选择门店" :value="curStore.name" disabled /> --> |
|
|
|
<view class="header-store-selecter-name">{{ curStore.name ? curStore.name : '' }}</view> |
|
|
|
<image class="header-store-selecter-right-img" mode="aspectFit" src="/static/images/icon/retail/dropDown.png"></image> |
|
|
|
</view> |
|
|
|
@ -21,7 +19,7 @@ |
|
|
|
<image mode="aspectFit" src="/static/images/icon/retail/search.png"></image> |
|
|
|
<input |
|
|
|
type="text" |
|
|
|
placeholder="请输入商品名称、sku" |
|
|
|
placeholder="请输入商品名称" |
|
|
|
disabled |
|
|
|
/> |
|
|
|
</view> |
|
|
|
@ -37,18 +35,30 @@ |
|
|
|
</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>{{ item.erp_goods_name }}</view> |
|
|
|
<view>{{ item.erp_goods_specs }}</view> |
|
|
|
|
|
|
|
<view class="main-right-list-price-count"> |
|
|
|
<view class="main-right-list-price-row"> |
|
|
|
<view><text>￥</text>{{ item.erp_goods_price }}</view> |
|
|
|
<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>盘罄</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="item-right"> |
|
|
|
<view class="item-right-top"> |
|
|
|
<view class="item-right-name">{{ item.erp_goods_name }}</view> |
|
|
|
<view class="item-right-spec">{{ item.erp_goods_specs }}</view> |
|
|
|
<view class="item-right-special">特价</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="main-right-list-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)"></image> |
|
|
|
<view v-if="item.count>0?true:false">{{ item.count }}</view> |
|
|
|
<image mode="aspectFit" src="/static/images/icon/retail/add.png" @click="mainCountClick('add', scrollItem.cate.id, scrollItem.cate.erp_goods_cate_name, item.id)"></image> |
|
|
|
<view class="item-right-price-count"> |
|
|
|
<view class="item-right-price-row" :style="{color:item.stock_num>0?'rgb(255,135,61)':'#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-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> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -56,8 +66,7 @@ |
|
|
|
</view> |
|
|
|
|
|
|
|
<hoverCartList |
|
|
|
:isShowCartList="isShowCartList" :cartList="cartList" :cartListScroll="cartListScroll" |
|
|
|
:cartListHeight="cartListHeight" :cartListDialogHeight="cartListDialogHeight" :cartListItemBorderBottom="cartListItemBorderBottom" |
|
|
|
:isShowCartList="isShowCartList" :cartList="cartList" @update:clearCart="clearCart" |
|
|
|
@update:cartInputConfirm="cartInputConfirm" @update:cartCountClick="cartCountClick" @update:maskClick="cartClick" |
|
|
|
> |
|
|
|
</hoverCartList> |
|
|
|
@ -75,7 +84,7 @@ |
|
|
|
<view v-if="isShowCartList"><text>￥</text>{{ cartTotalPrice }}</view> |
|
|
|
</view> |
|
|
|
<view class="footer-confirm"> |
|
|
|
<button hover-class="hover-active" @click="cartConfirm">确认</button> |
|
|
|
<button hover-class="hover-active" @click="cartConfirm" :style="{opacity:cartConfirmOpacity}">去结算</button> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -119,10 +128,7 @@ export default { |
|
|
|
cartList: [], // 购物车列表 |
|
|
|
cartListFinal: [], // 购物车最终列表数据 |
|
|
|
isShowCartList: false, // 是否显示购物车列表 |
|
|
|
cartListScroll: true, // 购物车列表是否滚动 |
|
|
|
cartListHeight: "0rpx", // 购物车列表高度，根据数量来改变高度 |
|
|
|
cartListDialogHeight: "0rpx", // 购物车列表对话框高度，根据数量来改变高度 |
|
|
|
cartListItemBorderBottom: "1rpx solid rgb(216,216,216)", // 列表数量大于1才会显示border |
|
|
|
cartConfirmOpacity: 0.3 // 结算按钮 |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad() { |
|
|
|
@ -280,6 +286,11 @@ export default { |
|
|
|
this.cartTotalCount = count; |
|
|
|
}, |
|
|
|
|
|
|
|
// 清空购物车 |
|
|
|
clearCart() { |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
// 购物车列表数量选项触发 |
|
|
|
cartCountClick(type, i) { |
|
|
|
// 增减购物车对应的主页数量 |
|
|
|
@ -327,7 +338,7 @@ export default { |
|
|
|
|
|
|
|
this.calcCartTotalPriceAndCount(); // 计算购物车总价跟总量 |
|
|
|
this.calcTotalPriceAndCount(); // 计算总价跟总量 |
|
|
|
this.cartListStatusChange(); // 购物车列表状态变化 |
|
|
|
this.setCartConfirmStyle(); |
|
|
|
}, |
|
|
|
|
|
|
|
// 获取购物车列表的最终数据 |
|
|
|
@ -345,6 +356,9 @@ export default { |
|
|
|
|
|
|
|
// 购物车确认 |
|
|
|
cartConfirm() { |
|
|
|
if (this.cartList.length <= 0) { |
|
|
|
return; |
|
|
|
} |
|
|
|
this.cartListFinal = this.getCartListFinalData(); |
|
|
|
|
|
|
|
// 有数据，那么需要跳到确定页面 |
|
|
|
@ -382,28 +396,12 @@ export default { |
|
|
|
for (let i = 0; i < tempData.length; ++i) { |
|
|
|
this.cartList.push(tools.getNewObj(tempData[i])); |
|
|
|
} |
|
|
|
|
|
|
|
this.setCartConfirmStyle(); |
|
|
|
}, |
|
|
|
|
|
|
|
// 购物车列表状态变化 |
|
|
|
cartListStatusChange() { |
|
|
|
// 根据数量改变列表高度 |
|
|
|
let num = this.cartList.length; |
|
|
|
this.cartListScroll = false; |
|
|
|
if (this.cartList.length > 5) { |
|
|
|
num = 5; |
|
|
|
this.cartListScroll = true; |
|
|
|
} |
|
|
|
|
|
|
|
// 只有一条数据就不会显示border |
|
|
|
if (this.cartList.length <= 1) { |
|
|
|
this.cartListItemBorderBottom = "0rpx solid rgb(216,216,216)"; |
|
|
|
} |
|
|
|
else { |
|
|
|
this.cartListItemBorderBottom = "1rpx solid rgb(216,216,216)"; |
|
|
|
} |
|
|
|
|
|
|
|
this.cartListHeight = `${151.6 * num}rpx`; |
|
|
|
this.cartListDialogHeight = `${(878 - 758) + 151.6 * num}rpx`; |
|
|
|
setCartConfirmStyle() { |
|
|
|
this.cartConfirmOpacity = this.cartList.length > 0 ? 1 : 0.3; |
|
|
|
}, |
|
|
|
|
|
|
|
// 购物车点击 |
|
|
|
@ -413,7 +411,6 @@ export default { |
|
|
|
} |
|
|
|
else { |
|
|
|
this.addToCartList(); // 将主页数据加入到购物车列表 |
|
|
|
this.cartListStatusChange(); // 购物车列表状态变化 |
|
|
|
|
|
|
|
this.cartTotalPrice = this.totalPrice; |
|
|
|
this.cartTotalCount = this.totalCount; |
|
|
|
@ -507,7 +504,9 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
// 主页数量选项触发 |
|
|
|
mainCountClick(type, id, cateName, goodsId) { |
|
|
|
mainCountClick(type, id, cateName, goodsId, stockNum) { |
|
|
|
if (stockNum <= 0) return; |
|
|
|
|
|
|
|
// 找点击的对应分类 |
|
|
|
let item = null; |
|
|
|
for (let i = 0; i < this.goodsInfo.length; ++i) { |
|
|
|
@ -708,7 +707,7 @@ export default { |
|
|
|
padding-bottom: calc( 0rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|
|
|
|
|
|
|
.header { |
|
|
|
height: 230rpx; |
|
|
|
// height: 230rpx; |
|
|
|
// border: 1rpx solid red; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
@ -731,9 +730,8 @@ export default { |
|
|
|
height: 78rpx; |
|
|
|
line-height: 78rpx; |
|
|
|
fotn-size: 16rpx; |
|
|
|
margin-left: 12rpx; |
|
|
|
margin-right: 14rpx; |
|
|
|
color: rgb(51,51,51); |
|
|
|
color: #333333; |
|
|
|
} |
|
|
|
.header-store-selecter-left-img { |
|
|
|
width: 36rpx; |
|
|
|
@ -749,10 +747,8 @@ export default { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
height: 152rpx; |
|
|
|
background-color: rgb(255,255,255); |
|
|
|
border-top-left-radius: 40rpx; |
|
|
|
border-top-right-radius: 40rpx; |
|
|
|
height: 92rpx; |
|
|
|
margin-top: 17rpx; |
|
|
|
|
|
|
|
>view { |
|
|
|
display: flex; |
|
|
|
@ -761,7 +757,7 @@ export default { |
|
|
|
flex-grow: 1; |
|
|
|
height: 92rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
background-color: rgb(242,242,247); |
|
|
|
background-color: #FFFFFF; |
|
|
|
margin-left: 24rpx; |
|
|
|
padding-left: 20rpx; |
|
|
|
padding-right: 20rpx; |
|
|
|
@ -782,12 +778,12 @@ export default { |
|
|
|
flex-shrink: 0; |
|
|
|
margin-left: 20rpx; |
|
|
|
margin-right: 20rpx; |
|
|
|
width: 100rpx; |
|
|
|
height: 62rpx; |
|
|
|
line-height: 62rpx; |
|
|
|
width: 142rpx; |
|
|
|
height: 88rpx; |
|
|
|
line-height: 88rpx; |
|
|
|
font-size: 32rpx; |
|
|
|
color: rgb(255,255,255); |
|
|
|
background-color: rgb(6,147,137); |
|
|
|
color: #FFFFFF; |
|
|
|
background-color: #009874; |
|
|
|
border-radius: 10rpx; |
|
|
|
white-space: nowrap; |
|
|
|
padding: 0 0; |
|
|
|
@ -833,79 +829,138 @@ export default { |
|
|
|
.main-right { |
|
|
|
width: 558rpx; |
|
|
|
background-color: rgb(255,255,255); |
|
|
|
border-top-left-radius: 30rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
padding-left: 36rpx; |
|
|
|
// padding-right: 48rpx; |
|
|
|
padding-left: 20rpx; |
|
|
|
// padding-right: 20rpx; |
|
|
|
|
|
|
|
.main-right-list { |
|
|
|
border-bottom: 1rpx solid rgb(237,237,245); |
|
|
|
// border-bottom: 1rpx solid rgb(237,237,245); |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
padding-top: 24rpx; |
|
|
|
padding-bottom: 24rpx; |
|
|
|
flex-direction: row; |
|
|
|
padding-top: 20rpx; |
|
|
|
padding-bottom: 20rpx; |
|
|
|
// border: 1px solid red; |
|
|
|
|
|
|
|
>view { |
|
|
|
padding-right: 24rpx; |
|
|
|
.item-left { |
|
|
|
width: 172rpx; |
|
|
|
height: 172rpx; |
|
|
|
margin-right: 20rpx; |
|
|
|
// border: 1px solid red; |
|
|
|
position: relative; |
|
|
|
border-radius: 10rpx; |
|
|
|
|
|
|
|
&:first-child { |
|
|
|
font-size: 28rpx; |
|
|
|
>image { |
|
|
|
max-width: 100%; |
|
|
|
max-height: 100%; |
|
|
|
} |
|
|
|
&:nth-child(2) { |
|
|
|
margin-top: 8rpx; |
|
|
|
margin-bottom: 14rpx; |
|
|
|
font-size: 24rpx; |
|
|
|
color: rgb(154,154,157); |
|
|
|
.item-left-empty { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
position: absolute; |
|
|
|
top: 0rpx; |
|
|
|
left: 0rpx; |
|
|
|
background-color: rgba(0,0,0,0.5); |
|
|
|
border-radius: 10rpx; |
|
|
|
|
|
|
|
>view { |
|
|
|
font-size: 28rpx; |
|
|
|
color: #333333; |
|
|
|
background: #FFFFFF; |
|
|
|
width: 88rpx; |
|
|
|
height: 88rpx; |
|
|
|
border-radius: 50%; |
|
|
|
position: absolute; |
|
|
|
top: 50%; |
|
|
|
left: 50%; |
|
|
|
transform: translate(-50%,-50%); |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.main-right-list-price-count { |
|
|
|
.item-right { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
// border: 1rpx solid green; |
|
|
|
// border: 1px solid red; |
|
|
|
flex-grow: 1; |
|
|
|
padding-right: 20rpx; |
|
|
|
|
|
|
|
.main-right-list-price-row { |
|
|
|
.item-right-top { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
align-items: center; |
|
|
|
color: rgb(255,135,61); |
|
|
|
flex-direction: column; |
|
|
|
// border: 1px solid black; |
|
|
|
|
|
|
|
>view { |
|
|
|
&:first-child { |
|
|
|
font-size: 32rpx; |
|
|
|
line-height: 32rpx; |
|
|
|
|
|
|
|
>text { |
|
|
|
font-size: 24rpx; |
|
|
|
line-height: 24rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.item-right-name { |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
.item-right-spec { |
|
|
|
margin-top: 8rpx; |
|
|
|
margin-bottom: 14rpx; |
|
|
|
font-size: 24rpx; |
|
|
|
color: rgb(154,154,157); |
|
|
|
} |
|
|
|
.item-right-special { |
|
|
|
width: 58rpx; |
|
|
|
height: 28rpx; |
|
|
|
margin-bottom: 10rpx; |
|
|
|
font-size: 20rpx; |
|
|
|
color: #E60012; |
|
|
|
background: rgba(230,0,18,0.13); |
|
|
|
border-radius: 6px; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
} |
|
|
|
.main-right-list-count-row { |
|
|
|
|
|
|
|
.item-right-price-count { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
padding-right: 48rpx; |
|
|
|
// border: 1rpx solid green; |
|
|
|
|
|
|
|
>image { |
|
|
|
&:first-child { |
|
|
|
width: 36rpx; |
|
|
|
height: 36rpx; |
|
|
|
} |
|
|
|
&:nth-child(3) { |
|
|
|
width: 36rpx; |
|
|
|
height: 36rpx; |
|
|
|
.item-right-price-row { |
|
|
|
// display: flex; |
|
|
|
// flex-direction: row; |
|
|
|
// align-items: center; |
|
|
|
color: rgb(255,135,61); |
|
|
|
|
|
|
|
>view { |
|
|
|
&:first-child { |
|
|
|
font-size: 32rpx; |
|
|
|
line-height: 32rpx; |
|
|
|
|
|
|
|
>text { |
|
|
|
font-size: 24rpx; |
|
|
|
line-height: 24rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
>view { |
|
|
|
margin-left: 12rpx; |
|
|
|
margin-right: 12rpx; |
|
|
|
color: rgb(51,51,51); |
|
|
|
font-size: 28rpx; |
|
|
|
.item-right-count-row { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
>image { |
|
|
|
&:first-child { |
|
|
|
width: 36rpx; |
|
|
|
height: 36rpx; |
|
|
|
} |
|
|
|
&:nth-child(3) { |
|
|
|
width: 36rpx; |
|
|
|
height: 36rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
>view { |
|
|
|
margin-left: 12rpx; |
|
|
|
margin-right: 12rpx; |
|
|
|
color: rgb(51,51,51); |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -1011,13 +1066,14 @@ export default { |
|
|
|
width: 240rpx; |
|
|
|
height: 88rpx; |
|
|
|
line-height: 88rpx; |
|
|
|
color: rgb(255,255,255); |
|
|
|
color: #FFFFFF; |
|
|
|
font-size: 32rpx; |
|
|
|
border: 0rpx; |
|
|
|
border-radius: 44rpx; |
|
|
|
background-color: rgb(0,152,116); |
|
|
|
border-radius: 10rpx; |
|
|
|
background-color: #009874; |
|
|
|
white-space: nowrap; |
|
|
|
padding: 0 0; |
|
|
|
opacity: 0.3; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
