结算页及购物车修改

pages/mobile/center/user/cart.vue

@@ -8,7 +8,7 @@
               <input type="checkbox" @change="setActive('store', storeIndex)">
             </label>
             <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>
+            <p class="store-name inline-block text-ellipse">卖&nbsp;&nbsp;家：{{item.storeName}}</p>
             <a class="com-mobile-link" @click="linkSaler(item)"><i class="iconfont icon-kefu1"></i>联系卖家</a>
           </div>
           <ul class="goods-list">
@@ -17,33 +17,41 @@
                 <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>
+                <p class="param text-ellipse"><span class="title">品牌：</span>{{goods.goods.brandNameEn || '-'}}</p>
+                <p class="param text-ellipse"><span class="title">类目：</span>{{goods.kiName || '-'}}</p>
+                <p class="param text-ellipse"><span class="title">型号：</span>{{goods.code || '-'}}</p>
+                <p class="param text-ellipse"><span class="title">规格：</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)" :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">
+              <div class="inline-block params param-operate">
+                <p class="param text-ellipse"><span class="title">交期(天)：</span>{{goods.goods.b2cMinDelivery + '-' + goods.goods.b2cMaxDelivery}}</p>
+                <p class="param text-ellipse"><span class="title">单价：</span>{{baseUtils.getPriceByLevel(goods.goods.prices, goods.number, goods.currencyName)}}</p>
+                <p class="param"><span class="title">数量(PCS)：</span>
+                  <span class="input-line inline-block">
+                    <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>
+                  </span>
+                </p>
+                <p class="param text-ellipse"><span class="title">小计：</span><span class="ol-price"><span>{{goods.currencyName | currencyFilter}}</span>{{goods.goods.currentPrice}}</span></p>
+                <!--<div class="price-line">
                   <span>{{goods.currencyName | currencyFilter}}</span>{{goods.goods.currentPrice}}
-                </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>
+        <div class="wrap-select line">
+          <label class="mobile-cart-check" :class="{'active': isAllChecked}">
+            <input type="checkbox" @change="setActive('all')">
+            <span>全选</span>
+          </label>
+          <a class="operate-btn fr" @click="removeInvalidGoods">清空失效产品</a>
+          <a class="operate-btn fr" @click="batchDelete">批量删除</a>
+        </div>
+        <div class="wrap-count line">
+          <!--<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>
@@ -62,6 +70,7 @@
 <script>
   import {RemindBox, PullUp, EmptyStatus} from '~components/mobile/common'
   import {LinkUser} from '~components/mobile/base'
+  import { goodsPurchaseOperate } from '~utils/mixin'
   export default {
     layout: 'mobile',
     middleware: 'authenticated',
@@ -75,9 +84,11 @@
         count: 10,
         allCurrency: 'RMB', // 选定币别
         currentStoreInfo: {},
-        showLink: false
+        showLink: false,
+        isChange: false
       }
     },
+    mixins: [goodsPurchaseOperate],
     components: {
       RemindBox,
       PullUp,
@@ -94,29 +105,16 @@
         handler: function (val) {
           let tmpVal = this.baseUtils.deepCopy(val)
 //          this.cartList = []
+          if (this.isChange) {
+            this.cartList = []
+          }
           tmpVal.content.forEach(item => {
             let current = this.cartList.find(objItem => {
               return objItem.storeUuid === item.storeUuid
             })
             item.$active = false
             // 初始化购买数量及状态
-            let goodsItem = item.goods
-            let pack = goodsItem.perQty || goodsItem.minPackQty
-            if (goodsItem.breakUp) {
-              goodsItem.purchaseNumber = goodsItem.minBuyQty
-              goodsItem.canSub = false
-              goodsItem.canAdd = goodsItem.purchaseNumber < goodsItem.reserve
-            } else {
-              if (pack >= goodsItem.minBuyQty) {
-                goodsItem.purchaseNumber = pack
-              } else {
-                let max = Math.max(pack, goodsItem.minBuyQty)
-                goodsItem.purchaseNumber = max + max % pack
-              }
-              goodsItem.canSub = false
-              goodsItem.canAdd = goodsItem.purchaseNumber + goodsItem.minPackQty <= goodsItem.reserve
-            }
-            goodsItem.currentPrice = Number((this.baseUtils.getPriceByLevel(goodsItem.prices, goodsItem.purchaseNumber, goodsItem.currencyName) * goodsItem.purchaseNumber).toFixed(6))
+            this.initGoodsStatus(item.goods)
             if (!current) {
               this.cartList.push({
                 storeName: item.storeName,
@@ -258,96 +256,6 @@
         })
         this.isAllChecked = activeFlag
       },
-      onPurchaseNumberInput: function (goods) {
-        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))
-//        console.log(goods.goods.currentPrice)
-      },
-      checkPurchaseNumber: function (goods) {
-        if ((/^[\d]*$/).test(goods.goods.purchaseNumber)) {
-          this.changeNum(goods.goods.purchaseNumber, goods)
-        } else {
-          this.setRemindText('请输入整数')
-          goods.goods.purchaseNumber = goods.goods.minBuyQty
-        }
-      },
-      setGoods: function (type, goods) {
-        if (type === 'set') {
-          this.checkPurchaseNumber(goods)
-        } else {
-          let isAdd = type === 'add'
-          let pack = goods.goods.perQty || goods.goods.minPackQty
-          let newNum = 0
-          if (goods.goods.breakUp) {
-            newNum = isAdd ? goods.goods.purchaseNumber + 1 : goods.goods.purchaseNumber - 1
-          } else {
-            newNum = isAdd ? goods.goods.purchaseNumber + pack : goods.goods.purchaseNumber - pack
-          }
-          this.changeNum(newNum, goods)
-        }
-      },
-      changeNum: function (newNum, goods) {
-        let pack = goods.goods.perQty || goods.goods.minPackQty
-        let buy = goods.goods.minBuyQty
-        let reserve = goods.goods.reserve
-        let breakUp = goods.goods.breakUp
-        if (!newNum && newNum !== 0) {
-          goods.goods.purchaseNumber = buy
-        } else {
-          newNum = parseInt(newNum)
-          if (breakUp) {
-            if (newNum < buy) {
-              this.setRemindText('最小起订量为' + buy)
-              goods.goods.purchaseNumber = buy
-              goods.goods.canSub = false
-              goods.goods.canAdd = true
-            } else if (newNum > reserve) {
-              this.setRemindText('库存不足')
-              goods.goods.purchaseNumber = reserve
-              goods.goods.canAdd = false
-              goods.goods.canSub = true
-            } else {
-              goods.goods.canSub = true
-              goods.goods.canAdd = true
-              goods.goods.purchaseNumber = newNum
-              newNum === buy && (goods.goods.canSub = false)
-              newNum === reserve && (goods.goods.canAdd = false)
-            }
-          } else {
-            if (newNum < buy) {
-              this.setRemindText('最小起订量为' + buy)
-              goods.goods.purchaseNumber = buy
-              goods.goods.canSub = false
-              if (newNum > reserve) {
-                this.setRemindText('库存不足')
-                goods.goods.purchaseNumber = reserve - (reserve % pack)
-                goods.goods.canAdd = false
-              }
-            } else if (newNum > reserve) {
-              goods.goods.canSub = true
-              goods.goods.canAdd = false
-              this.setRemindText('库存不足')
-              goods.goods.purchaseNumber = reserve - (reserve % pack)
-            } else {
-              goods.goods.canSub = true
-              goods.goods.canAdd = true
-              let remainder = newNum % pack
-              if (remainder !== 0) {
-//                console.log(this.fragment.num)
-                this.setRemindText('不支持拆包且包装量为' + pack)
-                // 这个直接赋值的，应该给这个值进行判断(Math.floor(newNum / pack) + 1) * pack
-                let res = (Math.floor(newNum / pack) + 1) * pack
-                goods.goods.purchaseNumber = res > reserve ? Math.floor(newNum / pack) * pack : res
-              } else {
-                goods.goods.purchaseNumber = newNum
-              }
-              newNum === buy && (goods.goods.canSub = false)
-              newNum === reserve && (goods.goods.canAdd = false)
-            }
-          }
-        }
-        this.onPurchaseNumberInput(goods)
-      },
       onPullUpAction: function () {
         this.page++
         this.reloadList()
@@ -398,13 +306,47 @@
       linkSaler (item) {
         this.currentStoreInfo = item.enterprise
         this.showLink = true
+      },
+      removeInvalidGoods () {
+        let arr = []
+        this.allActiveObj.forEach(item => {
+          if (item.status === 1) {
+            arr.push(item.id)
+          }
+        })
+        if (!arr.length) {
+          this.setRemindText('购物车内目前没有失效的产品')
+        } else {
+          this.doDelete(arr, '成功清除购物车内的无效产品')
+        }
+      },
+      batchDelete () {
+        if (!this.allActiveObj.length) {
+          this.setRemindText('请选择要删除的商品')
+        } else {
+          let arr = []
+          this.allActiveObj.forEach(item => {
+            arr.push(item.id)
+          })
+          this.doDelete(arr, '删除成功')
+        }
+      },
+      doDelete (idArr, successStr) {
+        this.$http.delete(`/trade/cart/deleteById?ids=${JSON.stringify(idArr)}`).then(res => {
+          this.isChange = true
+          this.page = 1
+          this.reloadList()
+          this.setRemindText(successStr)
+        }, err => {
+          this.setRemindText(err.response.data || '系统错误')
+        })
       }
     }
   }
 </script>
 <style lang="scss" scoped>
   .mobile-cart {
-    bottom: 2rem;
+    bottom: 3.02rem;
     &.empty-mobile-cart {
       bottom: .98rem;
     }
@@ -439,25 +381,23 @@
             border-top: 1px solid #e4e4e4;
             .params {
               margin-left: .17rem;
+              width: 3.03rem;
               .param {
-                width: 3.65rem;
                 margin-top: .22rem;
                 &:first-child {
                   margin-top: 0;
                 }
-                span {
+                .title {
                   color: #666;
                 }
               }
             }
-            .fr {
-              width: 2.6rem;
-              text-align: center;
+            .param-operate {
+              width: 3.23rem;
               .input-line {
                 $group-height: .4rem;
-                margin-top: .52rem;
                 input {
-                  width: 1.31rem;
+                  width: .91rem;
                   height: $group-height;
                   border-top: 1px solid #ddd;
                   border-bottom: 1px solid #ddd;
@@ -470,9 +410,9 @@
                   top: .01rem;*/
                 }
                 span {
-                  width: .5rem;
+                  width: .35rem;
                   height: $group-height;
-                  line-height: $group-height;
+                  line-height: .38rem;
                   text-align: center;
                   border: 1px solid #ddd;
                   font-size: .24rem;
@@ -489,7 +429,7 @@
                   }
                 }
               }
-              .price-line {
+              /*.price-line {
                 font-size: .32rem;
                 color: #f43938;
                 margin-top: .2rem;
@@ -497,7 +437,7 @@
                   margin-right: .06rem;
                   font-size: .24rem;
                 }
-              }
+              }*/
             }
           }
         }
@@ -506,21 +446,24 @@
     .buy-wrap {
       position: fixed;
       bottom: .98rem;
-      height: 1.02rem;
-      line-height: 1.02rem;
-      padding-left: .27rem;
       background: #fff;
       width: 100%;
-      border-top: .02rem solid #ccc;
-      .fr {
-        .fare {
+      .line {
+        border-top: .02rem solid #ccc;
+        height: 1.02rem;
+        line-height: 1.02rem;
+        padding-left: .27rem;
+      }
+      .wrap-count {
+       /* .fare {
           font-size: .24rem;
           color: #999;
           margin-right: .15rem;
           font-style: normal;
           display: inline-block;
           vertical-align: middle;
-        }
+        }*/
+        text-align: right;
         .title {
           font-size: .28rem;
           margin-right: .1rem;
@@ -548,9 +491,31 @@
           text-align: center;
           font-size: .28rem;
           color: #fff;
-          background: #fc2706;
+          background: #3f84f6;
+        }
+      }
+      .wrap-select {
+        padding-right: .15rem;
+        .operate-btn {
+          display: inline-block;
+          font-size: .26rem;
+          padding: .16rem .12rem;
+          color: #3f84f6;
+          border: 1px solid #3f84f6;
+          margin-left: .28rem;
+          border-radius: .04rem;
+          line-height: normal;
+          margin-top: .16rem;
         }
       }
     }
+    .ol-price {
+      font-size: .28rem;
+      color: #f43938 !important;
+      span {
+        color: #f43938 !important;
+        font-size: .24rem;
+      }
+    }
   }
 </style>

pages/mobile/center/user/pay/_orderId.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="mobile-content mobile-content-long mobile-pay">
-    <div class="pay-head" @click="openAddrModal">
+    <!--<div class="pay-head" @click="openAddrModal">
       <template v-if="selectedAddress && selectedAddress.name">
         <p class="info">
           {{selectedAddress.name}}&nbsp;&nbsp;&nbsp;{{selectedAddress.tel}}
@@ -14,35 +14,44 @@
       <template v-else>
         <div class="no-addr">暂无收货地址信息</div>
       </template>
-    </div>
+    </div>-->
     <ul class="pay-store-list">
       <li class="ps-item" v-for="item in orderData">
-        <p class="ps-store-name">{{item.storeName}}
-          <a class="com-mobile-link" @click="linkSaler(item)"><i class="iconfont icon-kefu1"></i>联系卖家</a>
+        <p class="ps-store-name">
+          <span class="inline-block text-ellipse seller-name"><span>卖&nbsp;&nbsp;家：</span>{{item.storeName}}&nbsp;<i class="iconfont icon-arrow-right"></i></span>
+          <a class="com-mobile-link" @click.stop="linkSaler(item)"><i class="iconfont icon-kefu1"></i>联系卖家</a>
         </p>
-        <div class="ps-goods-info clearfix"  @click="showDetailList(item.goods)">
-          <div class="fl">
-            <!--<span class="inline-block arrow" @click="goodsScroll('left')">
-            <i class="iconfont icon-xiangzuo"></i>
-            </span>-->
-            <ul class="ps-goods-list">
-              <li class="inline-block" v-for="goods in item.goods">
-                <div class="ps-goods-item text-ellipse" :class="{'pg-item-long': item.goods.length === 1}"><span>品牌：</span>{{goods.brName || '-'}}</div>
-                <div class="ps-goods-item text-ellipse" :class="{'pg-item-long': item.goods.length === 1}"><span>类目：</span>{{goods.kiName || '-'}}</div>
-                <div class="ps-goods-item text-ellipse" :class="{'pg-item-long': item.goods.length === 1}"><span>型号：</span>{{goods.cmpCode || '-'}}</div>
-                <div class="ps-goods-item text-ellipse" :class="{'pg-item-long': item.goods.length === 1}"><span>规格：</span>{{goods.spec || '-'}}</div>
-              </li>
-            </ul>
-            <span class="inline-block arrow" @click="goodsScroll('right')">
-            <i class="iconfont icon-xiangyou"></i>
-          </span>
-          </div>
-          <div class="fr">
-            <p class="price text-ellipse"><span>{{payData.currency | currencyFilter}}</span>{{item.goodsPrice}}</p>
-            <p class="count text-ellipse">共{{item.goods.length || 0}}件产品</p>
+        <div class="ps-goods-info"  @click="showDetailList(item.goods)">
+          <ul class="ps-goods-list">
+            <li class="inline-block" v-for="goods in (item.$expand && item.goods.length > 3 ? item.goods : item.goods.slice(0, 3))">
+              <div class="clearfix" style="padding: .31rem .25rem;">
+                <div class="fl">
+                  <div class="ps-goods-item text-ellipse"><span>品牌：</span>{{goods.brName || '-'}}</div>
+                  <div class="ps-goods-item text-ellipse"><span>类目：</span>{{goods.kiName || '-'}}</div>
+                  <div class="ps-goods-item text-ellipse"><span>型号：</span>{{goods.cmpCode || '-'}}</div>
+                  <div class="ps-goods-item text-ellipse"><span>规格：</span>{{goods.spec || '-'}}</div>
+                </div>
+                <div class="fr">
+                  <div class="ps-goods-item text-ellipse"><span>交期(天)：</span>{{goods.goodsHistory.b2cMinDelivery + '-' +  goods.goodsHistory.b2cMaxDelivery}}</div>
+                  <div class="ps-goods-item text-ellipse"><span>单价：</span>{{baseUtils.getPriceByLevel(goods.goods.prices, goods.goods.purchaseNumber, goods.currencyName)}}</div>
+                  <div class="ps-goods-item text-ellipse"><span>起拍：</span>{{goods.minBuyQty}}</div>
+                  <div class="ps-goods-item"><span>数量(PCS)：</span>
+                    <span class="input-line inline-block">
+                    <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>
+                  </span>
+                  </div>
+                </div>
+              </div>
+              <div class="single-count text-ellipse"><span class="pay-price-title inline-block">小计：</span><span class="ol-price"><span>{{goods.currencyName | currencyFilter}}</span>{{goods.goods.currentPrice}}</span></div>
+            </li>
+          </ul>
+          <div class="show-more-psgoods" v-if="item.goods.length > 3 && !item.$expand" @click="item.$expand = true">
+            查看更多 <i class="iconfont icon-arrow-down"></i>
           </div>
         </div>
-        <div class="ps-operate-line" @click="showRuleSet(item.storeid)">
+       <!-- <div class="ps-operate-line" @click="showRuleSet(item.storeid)">
           <span class="title">配送方式</span>
           <div class="fr">
             <div class="inline-block">
@@ -52,8 +61,15 @@
             </div>
             <i class="iconfont icon-xiangyou" v-if="fareRule[item.storeid] && fareRule[item.storeid][0]"></i>
           </div>
-        </div>
-        <div class="ps-operate-line ps-operate-takeself" v-if="checkShowTakeSelf(item)" @click="showTakeSelfSet(item.storeid)">
+        </div>-->
+     <!--   <div class="ps-operate-line">
+          <span class="title">物流选择</span>
+          <div class="fr">
+            <div class="delivery-select active inline-block">最省钱</div>
+            <div class="delivery-select inline-block">最快</div>
+          </div>
+        </div>-->
+        <!--<div class="ps-operate-line ps-operate-takeself" v-if="checkShowTakeSelf(item)" @click="showTakeSelfSet(item.storeid)">
           <span class="title">自提点</span>
           <div class="fr">
             <div class="inline-block">
@@ -66,46 +82,73 @@
             </div>
           </div>
         </div>
-        <div class=""></div>
         <div class="ps-operate-line">
           <span class="title">订单备注</span>
           <input type="text" v-model="item.remark" placeholder="选填：填写内容需和卖家协商确认">
+        </div>-->
+        <div class="ps-operate-line ps-fare">
+          <div class="text-ellipse">
+            <span class="pay-price-title inline-block">运费：</span><span class="ol-price" v-if="item.fare"><span v-if="item.fare.fare > 0">{{item.fare.currencyName | currencyFilter}}</span>{{item.fare.fare}}</span>
+            <span class="ol-price" v-else>0</span>
+          </div>
+          <div class="text-ellipse">
+             <span class="pay-price-title inline-block">手续费：</span><span class="ol-price"><span>{{payData.currency | currencyFilter}}</span>0.00</span>
+            <!--（<span class="ol-price fare"><span>{{payData.currency | currencyFilter}}</span>{{getPoundage(item)}}</span>）-->
+            <span class="inline-block tag">减免</span>
+            <i class="fa fa-exclamation-circle"></i>
+          </div>
         </div>
         <div class="ps-operate-line ps-price">
-          <span class="inline-block text-ellipse">
-             运费：<span class="ol-price" v-if="item.fare"><span v-if="item.fare.fare > 0">{{item.fare.currencyName | currencyFilter}}</span>{{item.fare.fare || 0}}</span>
-          </span>
-          <span class="inline-block text-ellipse">
-             店铺合计：<span class="ol-price"><span>{{payData.currency | currencyFilter}}</span>{{item.goodsFarePrice || 0}}</span>
-          </span>
+          <span class="pay-price-title inline-block">店铺合计：</span>
+          <span class="ol-price"><span>{{payData.currency | currencyFilter}}</span>
+          {{item.goodsFarePrice || 0}}</span>
         </div>
       </li>
     </ul>
-    <div class="ps-operate-line pay-operate">
-      <span class="title">支付方式</span>
-      <div class="fr">
-        <span>线下支付</span>
-        <!--<i class="iconfont icon-xiangyou"></i>-->
+    <div class="ps-operate-line ps-address" @click="openAddrModal">
+      <div class="inline-block">
+        <template v-if="selectedAddress && selectedAddress.name">
+          <p class="addr">
+            <span class="addr-title inline-block">收货地址：</span>
+            <span class="inline-block area">{{selectedAddress.area + selectedAddress.detailAddress}}</span>
+          </p>
+          <p class="text-ellipse info">
+            <span class="info-name">收货人：</span>{{selectedAddress.name}}
+            <span class="info-phone">电话：</span>{{selectedAddress.tel}}
+          </p>
+        </template>
+        <template v-else>
+          <p class="no-addr">暂无收货地址信息</p>
+        </template>
       </div>
+      <i class="iconfont icon-xiangyou inline-block"></i>
     </div>
     <div class="ps-operate-line pay-invoice" @click="openInvoiceModal">
-      <span class="title">开具发票</span>
+      <span class="title">发票信息：</span>
       <div class="fr">
-        <div class="inline-block" :style="!selectedInvoice ? 'line-height: unset;' : ''">
+        <p class="inline-block text-ellipse">
           <template v-if="selectedInvoice">
-            <span>{{selectedInvoice.head}}</span>
-            <span>{{selectedInvoice.kind === 1205 ? '增值税专用发票' : '增值税普通发票'}}</span>
+            <span class="inv-head inline-block text-ellipse">{{selectedInvoice.head}}</span>
+            <span class="inv-type inline-block">({{selectedInvoice.kind === 1205 ? '专用发票' : '普通发票'}})</span>
           </template>
           <template v-else>
             <span>暂不开具发票</span>
           </template>
-        </div>
+        </p>
         <i class="iconfont icon-xiangyou"></i>
       </div>
     </div>
+    <div class="ps-operate-line pay-operate">
+      <span class="title">支付方式</span>
+      <div class="fr">
+        <span>线下支付</span>
+        <!--<i class="iconfont icon-xiangyou"></i>-->
+      </div>
+    </div>
     <div class="buy-wrap">
       <div class="fr">
-        <span class="title">实付：</span><span class="ol-price price inline-block text-ellipse"><span>{{payData.currency | currencyFilter}}</span>{{allOrderPrice}}</span>
+        <span class="title">实付：</span><span class="ol-price price inline-block text-ellipse"><span>{{payData.currency | currencyFilter}}</span>
+        {{allPriceNew}}</span>
         <button class="buy-btn" @click="confirmOrder">提交订单</button>
       </div>
     </div>
@@ -119,7 +162,7 @@
     <!-- 联系卖家弹框end -->
 
     <!-- 产品清单弹框start -->
-    <modal-wrapper :showModal="showModal"
+    <!--<modal-wrapper :showModal="showModal"
                    :title="'产品清单'"
                    @closeAction="showModal = false">
       <ul class="cGoods-list">
@@ -144,7 +187,7 @@
           </div>
         </li>
       </ul>
-    </modal-wrapper>
+    </modal-wrapper>-->
     <!-- 产品清单弹框end -->
 
     <!-- 选择配送方式弹框start -->
@@ -157,7 +200,7 @@
             <input type="checkbox">
             <span>{{cdr.method | deliveryRuleFilter}}</span>
           </label>
-          <div class="fr" v-if="cdr.fare && cdr.fare > 0">运费：<span class="ol-price"><span>{{cdr.currencyName | currencyFilter}}</span>{{cdr.fare}}</span></div>
+          <div class="fr" v-if="cdr.fare && cdr.fare > 0">运费：<span class="ol-price"><span>{{cdr.currencyName | currencyFilter}}</span>{{cdr.fare || 0}}</span></div>
         </li>
       </ul>
     </bottom-modal-wrapper>
@@ -262,6 +305,7 @@
 <script>
   import { LinkUser, ModalWrapper, BottomModalWrapper } from '~components/mobile/base'
   import { RemindBox } from '~components/mobile/common'
+  import { goodsPurchaseOperate } from '~utils/mixin'
   export default {
     layout: 'mobile',
     middleware: 'authenticated',
@@ -295,6 +339,7 @@
         currentTakeSelfStoreId: ''
       }
     },
+    mixins: [goodsPurchaseOperate],
     components: {
       LinkUser,
       ModalWrapper,
@@ -335,7 +380,7 @@
 //        // 默认选择第三方配送  --1301第三方配送 --卖家配送  --1303上门自提
 //        invoices.deliverytype = 1301
 //        return invoices
-        return this.$store.state.userCenter.list.pay.data
+        return this.baseUtils.deepCopy(this.$store.state.userCenter.list.pay.data)
       },
       addressData () {
         return this.$store.state.userCenter.list.address.data
@@ -367,6 +412,18 @@
           })
         })
         return arr
+      },
+      allPriceNew () {
+        let allOrderPrice = 0
+        this.orderData.forEach((item, index) => {
+          item.goodsPrice = this.getTotalPrice(item) // 总价
+          // 包含运费的价格
+//          item.goodsFarePrice = this.baseUtils.priceFixed(item.goodsPrice + (item.fare && item.fare.fare ? item.fare.fare : 0))
+          item.goodsFarePrice = item.goodsPrice
+//          this.$set(item, 'goodsFarePrice', item.goodsPrice)
+          allOrderPrice += item.goodsPrice
+        })
+        return allOrderPrice
       }
 //      // 选择自提点的列表统计
 //      showTakeSelfList () {
@@ -390,6 +447,8 @@
     methods: {
       initOrderData () {
         this.payData.orderDetails.forEach(item => {
+          item.goods = item.goodsHistory
+          this.initGoodsStatus(item.goods, item.number)
           let current = this.orderData.find(objItem => {
             return objItem.storeid === item.storeid
           })
@@ -398,7 +457,10 @@
               storeName: item.storeName,
               storeid: item.storeid,
               supEnUU: item.supEnUU,
-              goods: [item]
+              goods: [item],
+              $expand: false,
+              goodsFarePrice: 0,
+              goodsPrice: 0
             })
           } else {
             current.goods.push(item)
@@ -430,17 +492,21 @@
           item.fare = this.fareRule[item.storeid] && this.fareRule[item.storeid].length ? this.fareRule[item.storeid][0] : {}
           item.goodsPrice = this.getTotalPrice(item) // 总价
           // 包含运费的价格
-          item.goodsFarePrice = this.baseUtils.priceFixed(item.goodsPrice + (item.fare && item.fare.fare ? item.fare.fare : 0))
+//          item.goodsFarePrice = this.baseUtils.priceFixed(item.goodsPrice + (item.fare && item.fare.fare ? item.fare.fare : 0))
+          item.goodsFarePrice = item.goodsPrice
           this.allOrderPrice += item.goodsFarePrice
         })
       },
       getTotalPrice (storeItem) {
         let price = 0
         storeItem.goods.forEach(item => {
-          price += item.price
+          price += item.goods.currentPrice
         })
         return Number(price.toFixed(6))
       },
+      getPoundage (item) {
+        return this.baseUtils.priceFixed((item.goodsFarePrice || item.goodsPrice) * 0.00453)
+      },
       linkSaler (item) {
         this.$http.get(`/basic/enterprise/${item.supEnUU}/info`).then(res => {
           this.currentStoreInfo = res.data
@@ -613,7 +679,6 @@
         let param = {
           orderid: this.baseUtils.enidfilter(arr.join('-'))
         }
-        console.log(param)
         // 跳转至付款页面
         console.log('订单已存在，直接跳转至付款页面')
         this.$router.push(`/mobile/center/user/doPay/${encodeURIComponent(param.orderid)}`)
@@ -702,7 +767,7 @@
         this.payData.orderDetails.forEach(item => {
           orderDetails.push({
             id: item.id,
-            number: item.number,
+            number: item.goods.purchaseNumber,
             taxUnitprice: item.taxUnitprice,
             remark: item.remark,
             goodsnumber: item.goodsnumber,
@@ -805,69 +870,77 @@
           padding: 0 .25rem;
           font-size: .28rem;
           text-align: left;
+          .seller-name {
+            max-width: 5rem;
+            position: relative;
+            padding-right: .2rem;
+            span {
+              color: #666;
+            }
+            i {
+              position: absolute;
+              right: 0;
+              font-size: .32rem;
+              color: #bebebe;
+            }
+          }
         }
         .ps-goods-info {
-          background: #f0f0f0;
-          .fl {
-            padding: 0 .29rem 0 .1rem;
-            position: relative;
-            .ps-goods-list {
-              width: 4.5rem;
-              height: 100%;
-              padding: .22rem 0;
-              overflow-x: auto;
-              white-space: nowrap;
-              li {
-                border-right: 1px solid #969696;
-                .ps-goods-item {
-                  width: 2.25rem;
-                  padding-left: .12rem;
-                  font-size: .24rem;
-                  &.pg-item-long {
-                    width: 4.5rem;
-                  }
-                  span {
-                    color: #666;
-                  }
+          border-top: 1px solid #e4e4e4;
+          border-bottom: 1px solid #e4e4e4;
+          .ps-goods-list {
+            background: #f9f9f8;
+            height: 100%;
+            li {
+              border-bottom: 1px solid #e4e4e4;
+              width: 100%;
+              .fl {
+                margin-right: .23rem;
+                width: 3.49rem;
+              }
+              .fr {
+                width: 3.2rem;
+                .ol-price {
+                  font-size: .26rem;
                 }
               }
-            }
-            .arrow {
-              position: absolute;
-              height: 100%;
-              color: #666;
-              background: #dfdfdf;
-              padding-top: .66rem;
-              top: 0;
-              &:first-child {
-                left: 0;
+              .ps-goods-item {
+                font-size: .28rem;
+                > span {
+                  color: #666;
+                }
               }
-              &:last-child {
-                right: 0;
+              .single-count {
+                height: .61rem;
+                line-height: .61rem;
+                background: #ebebeb;
+                font-size: .28rem;
+                color: #666;
+                text-align: right;
+                padding: 0 .21rem 0 .25rem;
+                .ol-price {
+                  font-size: .26rem;
+                }
               }
             }
           }
-          .fr {
-            width: 2.6rem;
+          .show-more-psgoods {
+            height: .67rem;
+            line-height: .67rem;
+            font-size: .24rem;
+            color: #999;
             text-align: center;
-            .price {
-              color: #f43938;
-              font-size: .32rem;
-              margin-top: .44rem;
-              padding-right: .05rem;
-              span {
-                font-size: .24rem;
-              }
-            }
-            .count {
-              font-size: .28rem;
-              font-weight: bold;
-              margin-top: .2rem;
+            i {
+              font-size: .24rem;
+              color: #999;
             }
           }
         }
       }
     }
+    .pay-price-title {
+      float: left;
+    }
     .ps-operate-line {
       height: .89rem;
       line-height: .89rem;
@@ -880,18 +953,40 @@
           line-height: normal;
           text-align: right;
           span {
-            font-size: .27rem;
             color: #666;
-            &:first-child {
+           /* &:first-child {
               color: #333;
               font-weight: bold;
               display: block;
-            }
+            }*/
             &.red {
               color: $red-text;
             }
           }
         }
+        .delivery-select {
+          width: 1.54rem;
+          height: .5rem;
+          line-height: .5rem;
+          text-align: center;
+          border: 1px solid #a1a1a1;
+          color: #999;
+          background: url('/images/mobile/center/user/delivery.png') no-repeat;
+          background-size: .2rem .2rem;
+          background-position: 1.3rem .25rem;
+          border-radius: .03rem;
+          margin-left: .56rem;
+          &:first-child {
+            margin-left: 0;
+          }
+          &.active {
+            background: url('/images/mobile/center/user/delivery-active.png') no-repeat;
+            background-size: .2rem .2rem;
+            background-position: 1.3rem .25rem;
+            color: #3e85f7;
+            border-color: #3e85f7;
+          }
+        }
         i {
           color: #bebebe;
           margin-left: .14rem;
@@ -908,11 +1003,79 @@
         padding-right: .31rem;
         .inline-block {
           font-size: .26rem;
-          max-width: 64%;
-          &:first-child {
-            max-width: 32%;
-            margin-right: .18rem;
+        }
+      }
+      &.ps-fare {
+        line-height: .43rem;
+        font-size: .24rem;
+        .text-ellipse {
+          text-align: right;
+          color: #333;
+          .ol-price {
+            font-size: .22rem;
+            span {
+              font-size: .22rem;
+            }
+          }
+          .fare {
+            text-decoration: line-through;
+            color: #666!important;
+          }
+          i {
+            font-size: .28rem;
+            color: #adacac;
+          }
+          .tag {
+            height: .25rem;
+            line-height: .25rem;
+            width: .48rem;
+            font-size: .22rem;
+            color: #fff;
+            background: #15b262;
+            border-radius: .02rem;
+            text-align: center;
+            margin-left: .14rem;
+            margin-right: .06rem;
+            position: relative;
+            top: -.02rem;
+          }
+        }
+      }
+      &.ps-address {
+        height: auto;
+        line-height: unset;
+        padding: .25rem 0;
+        position: relative;
+        padding-left: .21rem;
+        border-bottom: .11rem solid #f1f3f7;
+        > div {
+          width: 6.76rem;
+          padding-right: .26rem;
+          p {
+            font-size: .28rem;
+          }
+        }
+        i {
+          color: #bebebe;
+        }
+        .addr {
+          margin-bottom: .33rem;
+          .area {
+            width: 5rem;
+            word-break: break-all;
+            padding-left: .2rem;
+          }
+        }
+        .info {
+          .info-name {
+            margin-right: .46rem;
           }
+          .info-phone {
+            margin-left: .5rem;
+          }
+        }
+        .no-addr {
+          text-align: center;
         }
       }
       &.pay-operate {
@@ -932,21 +1095,20 @@
       &.pay-invoice {
         border-bottom: .11rem solid #f1f3f7;
         .fr {
-          padding-top: 0;
-          .inline-block {
-            vertical-align: top;
-          }
+          font-size: .28rem;
           i {
             float: right;
           }
-          span {
-            font-size: .28rem;
-            color: #333;
-            font-weight: normal !important;
-            max-width: 5rem;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
+          p {
+            position: relative;
+            bottom: .06rem;
+          }
+          .inv-head {
+            max-width: 4rem;
+          }
+          .inv-type {
+            font-size: .24rem;
+            color: #999;
           }
         }
       }
@@ -965,7 +1127,7 @@
       }
     }
     .ol-price {
-      color: #f43938;
+      color: #f43938 !important;
       font-size: .32rem;
       span {
         font-size: .24rem;
@@ -1000,7 +1162,7 @@
           text-align: center;
           font-size: .28rem;
           color: #fff;
-          background: #fc2706;
+          background: #3f84f6;
         }
       }
     }
@@ -1150,5 +1312,40 @@
         }
       }
     }
+    .input-line {
+      $group-height: .4rem;
+      input {
+        width: .91rem;
+        height: $group-height;
+        border-top: 1px solid #ddd;
+        border-bottom: 1px solid #ddd;
+        vertical-align: middle;
+        border-radius: 0;
+        padding: 0 .05rem;
+        text-align: center;
+        line-height: $group-height;
+        /*  position: relative;
+          top: .01rem;*/
+      }
+      span {
+        width: .35rem;
+        height: $group-height;
+        line-height: .38rem;
+        text-align: center;
+        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;
+        }
+      }
+    }
   }
 </style>

utils/mixin.js

@@ -115,3 +115,119 @@ export const sayPriceReplace = {
     }
   }
 }
+
+/*
+* 商品购买数量操作
+* */
+export const goodsPurchaseOperate = {
+  methods: {
+    initGoodsStatus (goodsItem, purchaseNumber) {
+      let pack = goodsItem.perQty || goodsItem.minPackQty
+      if (goodsItem.breakUp) {
+        goodsItem.purchaseNumber = purchaseNumber || goodsItem.minBuyQty
+        goodsItem.canSub = false
+        goodsItem.canAdd = goodsItem.purchaseNumber < goodsItem.reserve
+      } else {
+        if (pack >= goodsItem.minBuyQty) {
+          goodsItem.purchaseNumber = purchaseNumber || pack
+        } else {
+          let max = Math.max(pack, goodsItem.minBuyQty)
+          goodsItem.purchaseNumber = purchaseNumber || (max + max % pack)
+        }
+        goodsItem.canSub = false
+        goodsItem.canAdd = goodsItem.purchaseNumber + goodsItem.minPackQty <= goodsItem.reserve
+      }
+      goodsItem.currentPrice = Number((this.baseUtils.getPriceByLevel(goodsItem.prices, goodsItem.purchaseNumber, goodsItem.currencyName) * goodsItem.purchaseNumber).toFixed(6))
+    },
+    onPurchaseNumberInput: function (goods) {
+      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))
+//        console.log(goods.goods.currentPrice)
+    },
+    checkPurchaseNumber: function (goods) {
+      if ((/^[\d]*$/).test(goods.goods.purchaseNumber)) {
+        this.changeNum(goods.goods.purchaseNumber, goods)
+      } else {
+        this.setRemindText('请输入整数')
+        goods.goods.purchaseNumber = goods.goods.minBuyQty
+      }
+    },
+    setGoods: function (type, goods) {
+      if (type === 'set') {
+        this.checkPurchaseNumber(goods)
+      } else {
+        let isAdd = type === 'add'
+        let pack = goods.goods.perQty || goods.goods.minPackQty
+        let newNum = 0
+        if (goods.goods.breakUp) {
+          newNum = isAdd ? goods.goods.purchaseNumber + 1 : goods.goods.purchaseNumber - 1
+        } else {
+          newNum = isAdd ? goods.goods.purchaseNumber + pack : goods.goods.purchaseNumber - pack
+        }
+        this.changeNum(newNum, goods)
+      }
+    },
+    changeNum: function (newNum, goods) {
+      let pack = goods.goods.perQty || goods.goods.minPackQty
+      let buy = goods.goods.minBuyQty
+      let reserve = goods.goods.reserve
+      let breakUp = goods.goods.breakUp
+      if (!newNum && newNum !== 0) {
+        goods.goods.purchaseNumber = buy
+      } else {
+        newNum = parseInt(newNum)
+        if (breakUp) {
+          if (newNum < buy) {
+            this.setRemindText('最小起订量为' + buy)
+            goods.goods.purchaseNumber = buy
+            goods.goods.canSub = false
+//              goods.goods.canAdd = true
+          } else if (newNum > reserve) {
+            this.setRemindText('库存不足')
+            goods.goods.purchaseNumber = reserve
+            goods.goods.canAdd = false
+//              goods.goods.canSub = true
+          } else {
+            goods.goods.canSub = true
+            goods.goods.canAdd = true
+            goods.goods.purchaseNumber = newNum
+            newNum === buy && (goods.goods.canSub = false)
+            newNum === reserve && (goods.goods.canAdd = false)
+          }
+        } else {
+          if (newNum < buy) {
+            this.setRemindText('最小起订量为' + buy)
+            goods.goods.purchaseNumber = buy
+            goods.goods.canSub = false
+            if (newNum > reserve) {
+              this.setRemindText('库存不足')
+              goods.goods.purchaseNumber = reserve - (reserve % pack)
+              goods.goods.canAdd = false
+            }
+          } else if (newNum > reserve) {
+            goods.goods.canSub = true
+            goods.goods.canAdd = false
+            this.setRemindText('库存不足')
+            goods.goods.purchaseNumber = reserve - (reserve % pack)
+          } else {
+            goods.goods.canSub = true
+            goods.goods.canAdd = true
+            let remainder = newNum % pack
+            if (remainder !== 0) {
+//                console.log(this.fragment.num)
+              this.setRemindText('不支持拆包且包装量为' + pack)
+              // 这个直接赋值的，应该给这个值进行判断(Math.floor(newNum / pack) + 1) * pack
+              let res = (Math.floor(newNum / pack) + 1) * pack
+              goods.goods.purchaseNumber = res > reserve ? Math.floor(newNum / pack) * pack : res
+            } else {
+              goods.goods.purchaseNumber = newNum
+            }
+            newNum === buy && (goods.goods.canSub = false)
+            newNum === reserve && (goods.goods.canAdd = false)
+          }
+        }
+      }
+      this.onPurchaseNumberInput(goods)
+    }
+  }
+}