|
@@ -1,52 +1,57 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <div class="mobile-fix-content mobile-centerfix-content mobile-cart" id="mobileFixContent">
|
|
|
|
|
- <ul class="store-list">
|
|
|
|
|
- <li class="store-item" v-for="(item, storeIndex) in cartList">
|
|
|
|
|
- <div class="store-info">
|
|
|
|
|
- <label class="mobile-cart-check" :class="{'active': item.$active}">
|
|
|
|
|
- <input type="checkbox" @change="setActive('store', storeIndex)">
|
|
|
|
|
- </label>
|
|
|
|
|
- <span class="store-tag inline-block">{{item.storeType | storeTypeFilter}}</span>
|
|
|
|
|
- <p class="store-name inline-block text-ellipse">{{item.storeName}}</p>
|
|
|
|
|
- <a class="com-mobile-link" @click="linkSaler(item)"><i class="iconfont icon-kefu1"></i>联系卖家</a>
|
|
|
|
|
- </div>
|
|
|
|
|
- <ul class="goods-list">
|
|
|
|
|
- <li class="goods-item" v-for="(goods, goodsIndex) in item.goods">
|
|
|
|
|
- <label class="mobile-cart-check" :class="{'active': goods.$active}">
|
|
|
|
|
- <input type="checkbox" @change="setActive('goods', storeIndex, goodsIndex)">
|
|
|
|
|
|
|
+ <div class="mobile-fix-content mobile-centerfix-content mobile-cart" :class="{'empty-mobile-cart': !cartList.length}" id="mobileFixContent">
|
|
|
|
|
+ <template v-if="cartList.length">
|
|
|
|
|
+ <ul class="store-list">
|
|
|
|
|
+ <li class="store-item" v-for="(item, storeIndex) in cartList">
|
|
|
|
|
+ <div class="store-info">
|
|
|
|
|
+ <label class="mobile-cart-check" :class="{'active': item.$active}">
|
|
|
|
|
+ <input type="checkbox" @change="setActive('store', storeIndex)">
|
|
|
</label>
|
|
</label>
|
|
|
- <div class="params inline-block">
|
|
|
|
|
- <p class="param text-ellipse"><span>品牌:</span>{{goods.goods.brandNameEn || '-'}}</p>
|
|
|
|
|
- <p class="param text-ellipse"><span>类目:</span>{{goods.kiName || '-'}}</p>
|
|
|
|
|
- <p class="param text-ellipse"><span>型号:</span>{{goods.code || '-'}}</p>
|
|
|
|
|
- <p class="param text-ellipse"><span>规格:</span>{{goods.spec || '-'}}</p>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="fr">
|
|
|
|
|
- <!--<p class="goods-tag">{{goods.goods.tag || '-'}}</p>-->
|
|
|
|
|
- <div class="input-line">
|
|
|
|
|
- <span class="inline-block" @click="setGoods('sub', goods)">-</span>
|
|
|
|
|
- <input type="number" v-model="goods.goods.purchaseNumber" @input="onPurchaseNumberInput(goods)" @blur="setGoods('set', goods)">
|
|
|
|
|
- <span class="inline-block" @click="setGoods('add', goods)">+</span>
|
|
|
|
|
|
|
+ <span class="store-tag inline-block" :style="getStoreTypeColor(item.storeType)">{{item.storeType | storeTypeFilter}}</span>
|
|
|
|
|
+ <p class="store-name inline-block text-ellipse">{{item.storeName}}</p>
|
|
|
|
|
+ <a class="com-mobile-link" @click="linkSaler(item)"><i class="iconfont icon-kefu1"></i>联系卖家</a>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <ul class="goods-list">
|
|
|
|
|
+ <li class="goods-item" v-for="(goods, goodsIndex) in item.goods">
|
|
|
|
|
+ <label class="mobile-cart-check" :class="{'active': goods.$active}">
|
|
|
|
|
+ <input type="checkbox" @change="setActive('goods', storeIndex, goodsIndex)">
|
|
|
|
|
+ </label>
|
|
|
|
|
+ <div class="params inline-block">
|
|
|
|
|
+ <p class="param text-ellipse"><span>品牌:</span>{{goods.goods.brandNameEn || '-'}}</p>
|
|
|
|
|
+ <p class="param text-ellipse"><span>类目:</span>{{goods.kiName || '-'}}</p>
|
|
|
|
|
+ <p class="param text-ellipse"><span>型号:</span>{{goods.code || '-'}}</p>
|
|
|
|
|
+ <p class="param text-ellipse"><span>规格:</span>{{goods.spec || '-'}}</p>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="price-line">
|
|
|
|
|
- <span>{{goods.currencyName | currencyFilter}}</span>{{goods.goods.currentPrice}}
|
|
|
|
|
|
|
+ <div class="fr">
|
|
|
|
|
+ <!--<p class="goods-tag">{{goods.goods.tag || '-'}}</p>-->
|
|
|
|
|
+ <div class="input-line">
|
|
|
|
|
+ <span class="inline-block" @click="setGoods('sub', goods)" :class="{disab: !goods.goods.canSub}">-</span>
|
|
|
|
|
+ <input type="number" v-model="goods.goods.purchaseNumber" @blur="setGoods('set', goods)">
|
|
|
|
|
+ <span class="inline-block" @click="setGoods('add', goods)" :class="{disab: !goods.goods.canAdd}">+</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="price-line">
|
|
|
|
|
+ <span>{{goods.currencyName | currencyFilter}}</span>{{goods.goods.currentPrice}}
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
- </li>
|
|
|
|
|
- </ul>
|
|
|
|
|
- </li>
|
|
|
|
|
- </ul>
|
|
|
|
|
- <div class="buy-wrap">
|
|
|
|
|
- <label class="mobile-cart-check" :class="{'active': isAllChecked}">
|
|
|
|
|
- <input type="checkbox" @change="setActive('all')">
|
|
|
|
|
- <span>全选</span>
|
|
|
|
|
- </label>
|
|
|
|
|
- <div class="fr">
|
|
|
|
|
- <i class="fare">不含运费</i>
|
|
|
|
|
- <span class="title">合计:</span><span class="price"><span v-show="allCount > 0">{{allCurrency | currencyFilter}}</span>{{allPrice}}</span>
|
|
|
|
|
- <button class="buy-btn" @click="submit">结算({{allCount}})</button>
|
|
|
|
|
|
|
+ </li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ <div class="buy-wrap">
|
|
|
|
|
+ <label class="mobile-cart-check" :class="{'active': isAllChecked}">
|
|
|
|
|
+ <input type="checkbox" @change="setActive('all')">
|
|
|
|
|
+ <span>全选</span>
|
|
|
|
|
+ </label>
|
|
|
|
|
+ <div class="fr">
|
|
|
|
|
+ <i class="fare">不含运费</i>
|
|
|
|
|
+ <span class="title">合计:</span><span class="price"><span v-show="allCount > 0">{{allCurrency | currencyFilter}}</span>{{allPrice}}</span>
|
|
|
|
|
+ <button class="buy-btn" @click="submit">结算({{allCount}})</button>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <template v-else>
|
|
|
|
|
+ <empty-status :text="'购物车空空如也,快去添加商品吧!'"></empty-status>
|
|
|
|
|
+ </template>
|
|
|
<remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
|
|
<remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
|
|
|
<pull-up :fixId="'mobileFixContent'" :searchMore="fetching" :allPage="allPage" :page="page" @pullUpAction="onPullUpAction"></pull-up>
|
|
<pull-up :fixId="'mobileFixContent'" :searchMore="fetching" :allPage="allPage" :page="page" @pullUpAction="onPullUpAction"></pull-up>
|
|
|
<link-user :infoObj="currentStoreInfo"
|
|
<link-user :infoObj="currentStoreInfo"
|
|
@@ -55,7 +60,7 @@
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
<script>
|
|
<script>
|
|
|
- import {RemindBox, PullUp} from '~components/mobile/common'
|
|
|
|
|
|
|
+ import {RemindBox, PullUp, EmptyStatus} from '~components/mobile/common'
|
|
|
import {LinkUser} from '~components/mobile/base'
|
|
import {LinkUser} from '~components/mobile/base'
|
|
|
export default {
|
|
export default {
|
|
|
layout: 'mobile',
|
|
layout: 'mobile',
|
|
@@ -76,7 +81,8 @@
|
|
|
components: {
|
|
components: {
|
|
|
RemindBox,
|
|
RemindBox,
|
|
|
PullUp,
|
|
PullUp,
|
|
|
- LinkUser
|
|
|
|
|
|
|
+ LinkUser,
|
|
|
|
|
+ EmptyStatus
|
|
|
},
|
|
},
|
|
|
fetch ({ store }) {
|
|
fetch ({ store }) {
|
|
|
return Promise.all([
|
|
return Promise.all([
|
|
@@ -157,7 +163,7 @@
|
|
|
this.allActiveObj.forEach(item => {
|
|
this.allActiveObj.forEach(item => {
|
|
|
price += Number(item.goods.currentPrice)
|
|
price += Number(item.goods.currentPrice)
|
|
|
})
|
|
})
|
|
|
- return price
|
|
|
|
|
|
|
+ return this.baseUtils.priceFixed(price)
|
|
|
},
|
|
},
|
|
|
// 统计数量
|
|
// 统计数量
|
|
|
allCount () {
|
|
allCount () {
|
|
@@ -165,6 +171,28 @@
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
|
|
+ getStoreTypeColor: function (type) {
|
|
|
|
|
+ let tmp = null
|
|
|
|
|
+ switch (type) {
|
|
|
|
|
+ case 'CONSIGNMENT':
|
|
|
|
|
+ tmp = '#f3393a'
|
|
|
|
|
+ break
|
|
|
|
|
+ case 'DISTRIBUTION':
|
|
|
|
|
+ tmp = '#4083f6'
|
|
|
|
|
+ break
|
|
|
|
|
+ case 'AGENCY':
|
|
|
|
|
+ tmp = '#15b262'
|
|
|
|
|
+ break
|
|
|
|
|
+ case 'ORIGINAL_FACTORY':
|
|
|
|
|
+ tmp = '#ff6300'
|
|
|
|
|
+ break
|
|
|
|
|
+ }
|
|
|
|
|
+ if (tmp) {
|
|
|
|
|
+ return `background: ${tmp};`
|
|
|
|
|
+ } else {
|
|
|
|
|
+ return ''
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
setRemindText: function (str) {
|
|
setRemindText: function (str) {
|
|
|
this.remindText = str
|
|
this.remindText = str
|
|
|
this.timeoutCount++
|
|
this.timeoutCount++
|
|
@@ -233,6 +261,7 @@
|
|
|
onPurchaseNumberInput: function (goods) {
|
|
onPurchaseNumberInput: function (goods) {
|
|
|
let showPrice = this.baseUtils.getPriceByLevel(goods.goods.prices, goods.goods.purchaseNumber, goods.goods.currencyName)
|
|
let showPrice = this.baseUtils.getPriceByLevel(goods.goods.prices, goods.goods.purchaseNumber, goods.goods.currencyName)
|
|
|
goods.goods.currentPrice = Number(((showPrice || goods.goods.currentPrice) * goods.goods.purchaseNumber).toFixed(6))
|
|
goods.goods.currentPrice = Number(((showPrice || goods.goods.currentPrice) * goods.goods.purchaseNumber).toFixed(6))
|
|
|
|
|
+// console.log(goods.goods.currentPrice)
|
|
|
},
|
|
},
|
|
|
checkPurchaseNumber: function (goods) {
|
|
checkPurchaseNumber: function (goods) {
|
|
|
if ((/^[\d]*$/).test(goods.goods.purchaseNumber)) {
|
|
if ((/^[\d]*$/).test(goods.goods.purchaseNumber)) {
|
|
@@ -255,7 +284,6 @@
|
|
|
newNum = isAdd ? goods.goods.purchaseNumber + pack : goods.goods.purchaseNumber - pack
|
|
newNum = isAdd ? goods.goods.purchaseNumber + pack : goods.goods.purchaseNumber - pack
|
|
|
}
|
|
}
|
|
|
this.changeNum(newNum, goods)
|
|
this.changeNum(newNum, goods)
|
|
|
- this.onPurchaseNumberInput(goods)
|
|
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
changeNum: function (newNum, goods) {
|
|
changeNum: function (newNum, goods) {
|
|
@@ -318,6 +346,7 @@
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+ this.onPurchaseNumberInput(goods)
|
|
|
},
|
|
},
|
|
|
onPullUpAction: function () {
|
|
onPullUpAction: function () {
|
|
|
this.page++
|
|
this.page++
|
|
@@ -375,6 +404,9 @@
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
.mobile-cart {
|
|
.mobile-cart {
|
|
|
bottom: 2rem;
|
|
bottom: 2rem;
|
|
|
|
|
+ &.empty-mobile-cart {
|
|
|
|
|
+ bottom: .98rem;
|
|
|
|
|
+ }
|
|
|
.store-list {
|
|
.store-list {
|
|
|
.store-item {
|
|
.store-item {
|
|
|
padding: 0 .25rem;
|
|
padding: 0 .25rem;
|
|
@@ -397,17 +429,21 @@
|
|
|
.store-name {
|
|
.store-name {
|
|
|
font-size: .28rem;
|
|
font-size: .28rem;
|
|
|
margin-left: .08rem;
|
|
margin-left: .08rem;
|
|
|
- max-width: 5.7rem;
|
|
|
|
|
|
|
+ max-width: 4rem;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
.goods-list {
|
|
.goods-list {
|
|
|
.goods-item {
|
|
.goods-item {
|
|
|
- padding: .32rem 0;
|
|
|
|
|
|
|
+ padding: .3rem 0;
|
|
|
border-top: 1px solid #e4e4e4;
|
|
border-top: 1px solid #e4e4e4;
|
|
|
.params {
|
|
.params {
|
|
|
margin-left: .17rem;
|
|
margin-left: .17rem;
|
|
|
.param {
|
|
.param {
|
|
|
width: 3.65rem;
|
|
width: 3.65rem;
|
|
|
|
|
+ margin-top: .22rem;
|
|
|
|
|
+ &:first-child {
|
|
|
|
|
+ margin-top: 0;
|
|
|
|
|
+ }
|
|
|
span {
|
|
span {
|
|
|
color: #666;
|
|
color: #666;
|
|
|
}
|
|
}
|
|
@@ -417,19 +453,20 @@
|
|
|
width: 2.6rem;
|
|
width: 2.6rem;
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
.input-line {
|
|
.input-line {
|
|
|
- $group-height: .35rem;
|
|
|
|
|
|
|
+ $group-height: .4rem;
|
|
|
margin-top: .52rem;
|
|
margin-top: .52rem;
|
|
|
input {
|
|
input {
|
|
|
width: 1.31rem;
|
|
width: 1.31rem;
|
|
|
- height: .35rem;
|
|
|
|
|
|
|
+ height: $group-height;
|
|
|
border-top: 1px solid #ddd;
|
|
border-top: 1px solid #ddd;
|
|
|
border-bottom: 1px solid #ddd;
|
|
border-bottom: 1px solid #ddd;
|
|
|
vertical-align: middle;
|
|
vertical-align: middle;
|
|
|
border-radius: 0;
|
|
border-radius: 0;
|
|
|
padding: 0 .05rem;
|
|
padding: 0 .05rem;
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
- position: relative;
|
|
|
|
|
- top: .01rem;
|
|
|
|
|
|
|
+ line-height: $group-height;
|
|
|
|
|
+ /* position: relative;
|
|
|
|
|
+ top: .01rem;*/
|
|
|
}
|
|
}
|
|
|
span {
|
|
span {
|
|
|
width: .5rem;
|
|
width: .5rem;
|
|
@@ -437,6 +474,18 @@
|
|
|
line-height: $group-height;
|
|
line-height: $group-height;
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
border: 1px solid #ddd;
|
|
border: 1px solid #ddd;
|
|
|
|
|
+ font-size: .24rem;
|
|
|
|
|
+ &:first-child {
|
|
|
|
|
+ border-top-left-radius: .05rem;
|
|
|
|
|
+ border-bottom-left-radius: .05rem;
|
|
|
|
|
+ }
|
|
|
|
|
+ &:last-child {
|
|
|
|
|
+ border-top-right-radius: .05rem;
|
|
|
|
|
+ border-bottom-right-radius: .05rem;
|
|
|
|
|
+ }
|
|
|
|
|
+ &.disab {
|
|
|
|
|
+ background: #e8e8e8;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
.price-line {
|
|
.price-line {
|
|
@@ -444,6 +493,7 @@
|
|
|
color: #f43938;
|
|
color: #f43938;
|
|
|
margin-top: .2rem;
|
|
margin-top: .2rem;
|
|
|
span {
|
|
span {
|
|
|
|
|
+ margin-right: .06rem;
|
|
|
font-size: .24rem;
|
|
font-size: .24rem;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -463,14 +513,17 @@
|
|
|
border-top: .02rem solid #ccc;
|
|
border-top: .02rem solid #ccc;
|
|
|
.fr {
|
|
.fr {
|
|
|
.fare {
|
|
.fare {
|
|
|
- font-size: .18rem;
|
|
|
|
|
|
|
+ font-size: .24rem;
|
|
|
color: #999;
|
|
color: #999;
|
|
|
margin-right: .15rem;
|
|
margin-right: .15rem;
|
|
|
font-style: normal;
|
|
font-style: normal;
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ vertical-align: middle;
|
|
|
}
|
|
}
|
|
|
.title {
|
|
.title {
|
|
|
font-size: .28rem;
|
|
font-size: .28rem;
|
|
|
- margin-right: .38rem;
|
|
|
|
|
|
|
+ margin-right: .1rem;
|
|
|
|
|
+ vertical-align: middle;
|
|
|
}
|
|
}
|
|
|
.price {
|
|
.price {
|
|
|
font-size: .28rem;
|
|
font-size: .28rem;
|