完成B2B手机端打样管理

components/store/CommodityInfo.vue

@@ -25,7 +25,7 @@
             <span v-text="commodity.code"></span>
           </div>
           <div class="commodity-info-detail">
-            <div class="com-info">
+            <div class="com-info" v-if="commodity.status !== 613">
               <span class="name">价&nbsp;格</span>：
               <span class="money">
                 <span v-if="fragment.currency == 'RMB'">￥</span>
@@ -65,7 +65,7 @@
                 <span>(天)</span>
               </div>
             </div>
-            <div class="com-info form-inline" v-if="commodity.status !== 602 && commodity.status !== 612">
+            <div class="com-info form-inline" v-if="commodity.status !== 602 && commodity.status !== 612 && commodity.status !== 613">
               <span class="name">数&nbsp;量</span>：
               <div class="input-group" style="width: 120px">
                 <div :class="fragment.canSub ? ' input-group-addon operate':'input-group-addon'" @click="fragment.canSub ?subNum():''" :style="!fragment.canSub ?'cursor: not-allowed;':''">-</div>
@@ -95,13 +95,16 @@
                  <span>{{calculate | currencyShort}}</span>
               </span>
             </div>
-            <div class="button" v-if="commodity.status !== 602 && commodity.status !== 612">
+            <div class="button" v-if="commodity.status !== 602 && commodity.status !== 612 && commodity.status !== 613">
               <button class="btn btn-default btn-primary" @click="buyNow(false, commodity)">加入购物车</button>
               <button class="btn btn-default btn-now" @click="buyNow(true, commodity)">立即购买</button>
             </div>
+            <div class="button" v-if="commodity.status === 613 || commodity.status === 602">
+              <button class="btn btn-default btn-primary" @click="immediatelyClick(commodity, $event)">立即询价</button>
+            </div>
             <div class="warn-area" v-if="commodity.status === 602 || commodity.status === 612" v-text="commodity.status === 602 ? '此产品已售罄':'此产品已下架'"></div>
           </div>
-          <div class="price-block">
+          <div class="price-block" v-if="commodity.status !== 613">
             <div class="commodity-price">
               <div class="title">价格梯度</div>
               <div class="table">
@@ -129,6 +132,66 @@
         </div>
       </div>
     </div>
+    <el-dialog
+      title="我要询价"
+      :visible.sync="hasDialog">
+      <div class="form_dialog">
+        <ul class="list-inline">
+          <li class="form-item">
+            <span>品牌：</span>
+            <p v-text="applyObj.brand ? spliceString(applyObj.brand, 90) : '-'">32432</p>
+          </li>
+          <li class="form-item">
+            <span>物料名称：</span>
+            <p v-text="applyObj.prodName ? spliceString(applyObj.prodName, 90) : '-'">32</p>
+          </li>
+          <li class="form-item">
+            <span>型号：</span>
+            <p v-text="applyObj.cmpCode ? spliceString(applyObj.cmpCode, 90) : '-'">32432</p>
+          </li>
+          <li class="form-item">
+            <span>规格：</span>
+            <p v-text="applyObj.spec ? spliceString(applyObj.spec, 90) : '-'">32432</p>
+          </li>
+          <li class="form-item">
+            <span><i>*</i>截止日期：</span>
+            <el-date-picker
+              :class="{'error': !validObj.deadline}"
+              v-model="applyObj.deadline"
+              type="date"
+              :picker-options="pickerOptions"
+              @change="setDeadLineValid"
+              :editable="false"
+              :clearable="true"
+              size="mini">
+            </el-date-picker>
+          </li>
+          <li class="form-item">
+            <span>封装：</span>
+            <input type="text" class="form-control" v-model="applyObj.encapsulation"/>
+          </li>
+          <!--<li class="form-item">-->
+          <!--<span>单价预算：</span>-->
+          <!--<select v-model="applyObj.currency" class="form-control" style="width:40px;">-->
+          <!--<option value="RMB">¥</option>-->
+          <!--<option value="USD">$</option>-->
+          <!--</select>-->
+          <!--<input type="number" v-model="applyObj.unitPrice" class="form-control" :class="{'error': !validObj.unitPrice}"/>-->
+          <!--</li>-->
+          <!--<li class="form-item">-->
+          <!--<span>生产日期：</span>-->
+          <!--<input type="text" class="form-control" v-model="applyObj.produceDate"/>-->
+          <!--</li>-->
+          <li class="form-item">
+            <span>采购数量(PCS)：</span>
+            <input type="number" class="form-control" v-model="applyObj.amount" :class="{'error': !validObj.amount}"/>
+          </li>
+        </ul>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <button @click="authorityInterceptor(baseUrls.userPublishSeek, goPublish)" :disabled="isClick">询价提交</button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -137,7 +200,7 @@
       return {}
     }
     let fragment = {}
-    let prices = commodity.prices[0]
+    let prices = commodity.prices.length > 0 ? commodity.prices[0] : {}
     fragment.num = commodity.minBuyQty
     fragment.prices = prices
 
@@ -174,6 +237,31 @@
     name: 'commodity-info',
     data () {
       return {
+        isClick: false,
+        applyObj: {
+          cmpCode: '',
+          brand: '',
+          unitPrice: '',
+          currency: 'RMB',
+          prodName: '',
+          spec: '',
+          encapsulation: '',
+          produceDate: '',
+          amount: '',
+          deadline: ''
+        },
+        validObj: {
+          unitPrice: true,
+          amount: true,
+          deadline: true
+        },
+        pickerOptions: {
+          disabledDate (time) {
+            // 大于等于今天 小于三个月后
+            return time.getTime() < Date.now() - 1000 * 60 * 60 * 24 || time.getTime() > Date.now() + 1000 * 60 * 60 * 24 * 30 * 3
+          }
+        },
+        hasDialog: false,
         fragment: {
           currency: 'RMB',
           num: 0,
@@ -494,11 +582,278 @@
             }
           })
         }
+      },
+      // 格式化字符串长度
+      spliceString (str, length) {
+        return str && str.length ? this.baseUtils.spliceStr(str, length) : '暂无信息'
+      },
+      // 弹出询价界面
+      immediatelyClick (type, event) {
+        event.stopPropagation()
+        if (!this.user.logged) {
+          this.$router.push('/auth/login?returnUrl=' + window.location.href)
+        } else {
+          this.hasDialog = true
+          this.applyObj.cmpCode = type.code
+          this.applyObj.brand = type.brandNameEn
+          this.applyObj.spec = type.spec
+          this.applyObj.prodName = type.kindNameCn
+        }
+      },
+      // 时间格式化
+      setDeadLineValid: function () {
+        if(this.applyObj.deadline === '') {return ''}
+        this.applyObj.deadline = this.baseUtils.formatDate(this.baseUtils.getFullDay(new Date(this.applyObj.deadline)), 'yyyy-MM-dd hh:mm:ss')
+        this.validObj.deadline = true
+      },
+      // 检查单价预算
+      checkUnitPrice () {
+        this.validObj.unitPrice = this.applyObj.unitPrice === '' ? true : this.applyObj.unitPrice > 0 && this.applyObj.unitPrice < 100000000
+        if (!this.validObj.unitPrice && this.applyObj.unitPrice <= 0) {
+          this.$message.error('单价必须是大于0的数字')
+        }
+        return this.validObj.unitPrice
+      },
+      // 检查采购数量
+      checkAmount () {
+        this.validObj.amount = this.applyObj.amount === '' ? true : this.applyObj.amount > 0 && this.applyObj.amount < 1000000000
+        return this.validObj.amount
+      },
+      // 检查时间是否有输入
+      checkDeadline () {
+        this.validObj.deadline = Boolean(this.applyObj.deadline)
+        return this.validObj.deadline
+      },
+      // 检查各个字段输入正常数据
+      checkAll () {
+        return this.checkDeadline() && this.checkUnitPrice() && this.checkAmount()
+      },
+      emptyForm () {
+        for (let attr in this.applyObj) {
+          this.applyObj[attr] = attr === 'currency' ? 'RMB' : ''
+        }
+      },
+      // 请求询价信息
+      goPublish () {
+        let _this = this
+        this.isClick = true
+        setTimeout(function () {
+          _this.isClick = false
+        }, 1000)
+        if (this.checkAll()) {
+          let inquiry = {}
+          let inquiryItem = {}
+          if (this.user.data.enterprise) {
+            inquiry.enUU = this.user.data.enterprise.uu
+          }
+          let date = new Date()
+          let currency = this.applyObj.unitPrice ? this.applyObj.currency : null
+          inquiry.recorderUU = this.user.data.userUU
+          inquiry.code = 'MALL' + date.getTime()
+          inquiry.date = date
+          inquiry.recorder = this.user.data.userName
+          inquiry.endDate = this.applyObj.deadline
+          inquiry.sourceapp = 'MALL'
+          inquiry.amount = 1
+          inquiryItem.userUU = this.user.data.userUU
+          inquiryItem.source = 'MALL'
+          inquiryItem.userName = this.user.data.userName
+          inquiryItem.userTel = this.user.data.userTel
+          inquiryItem.needquantity = this.applyObj.amount
+          inquiryItem.inbrand = this.applyObj.brand
+          inquiryItem.currency = currency
+          inquiryItem.cmpCode = this.applyObj.cmpCode.toUpperCase()
+          inquiryItem.unitPrice = this.applyObj.unitPrice
+          inquiryItem.produceDate = this.applyObj.produceDate
+          inquiryItem.date = date
+          inquiryItem.endDate = this.applyObj.deadline
+          inquiryItem.encapsulation = this.applyObj.encapsulation
+          inquiryItem.spec = this.applyObj.spec
+          inquiryItem.prodTitle = this.applyObj.prodName
+          let inquiryItems = []
+          inquiryItems.push(inquiryItem)
+          inquiry.inquiryItems = inquiryItems
+          inquiry.currency = this.applyObj.unitPrice ? this.applyObj.currency : null
+          this.$http.post('/inquiry/buyer/save', inquiry)
+            .then(res => {
+              this.$message.success('发布成功')
+              this.hasDialog = false
+              this.emptyForm()
+            }, error => {
+              console.log(error)
+              this.$message.error('发布失败')
+            })
+        } else {
+          if (!this.validObj.deadline) {
+            this.$message.error('截止日期不能为空')
+          } else if (!this.validObj.amount) {
+            this.$message.error('请输入正确的数值')
+          }
+        }
       }
     }
   }
 </script>
-<style scoped>
+<style type="text/scss" lang="scss">
+  .btn-buy-now {
+    background-color: #5078CB;
+    color: #fff;
+    width: 80px;
+    height: 30px;
+    font-size: 12px;
+    border: 1px solid #5078cb;
+    position: relative;
+  }
+  .btn-add-cart {
+    margin-top: 10px;
+    color: #214797;
+    width: 80px;
+    height: 30px;
+    font-size: 12px;
+    background-color: #fff;
+    border: 1px solid #e8e8e8;
+  }
+  .btn-buy-now:hover{
+    background: #214797;
+  }
+  .btn-buy-now.disabled,
+  .btn-buy-now.disabled:focus{
+    background-color: #d1d2d3!important;
+    border: none!important;
+    outline: none;
+    color: #fff!important;
+    cursor: not-allowed;
+  }
+  .el-dialog{
+    width: 680px!important;
+    .el-dialog__header{
+      background: #4290f7;
+      line-height: 40px;
+      padding: 0 20px 0;
+      display:block;
+      .el-dialog__title{
+        color:#fff;
+      }
+      .el-dialog__headerbtn:hover .el-dialog__close, .el-dialog__headerbtn:focus .el-dialog__close{
+        color:#fff;
+      }
+    }
+    .el-dialog__body{
+      padding: 10px 20px;
+    }
+    .el-dialog__footer{
+      text-align: center;
+      button{
+        display:inline-block;
+        background: #3c7cf5;
+        color:#fff;
+        font-size: 14px;
+        line-height: 30px;
+        height:30px;
+        padding:0 10px;
+        box-shadow: none;
+        border: 0;
+        border-radius:5px;
+      }
+    }
+  }
+  .form_dialog{
+    .el-date-editor--date{
+      width: 230px;
+      &.error {
+        input {
+          border: 1px solid #f4645f !important;
+        }
+      }
+    }
+    ul{
+      li{
+        width:50%;
+        font-size: 14px;
+        color:#666;
+        vertical-align: top;
+        margin-bottom:15px;
+        &.form-item {
+          position: relative;
+          p{
+            margin:0;
+            margin-left:80px;
+            word-break: break-all;
+            word-wrap: break-word;
+          }
+          span {
+            float:left;
+            width: 112px;
+            text-align: right;
+            display: inline-block;
+            color:#3c7cf5;
+            i {
+              position: relative;
+              top: 2px;
+              right: 5px;
+              color: #e41515;
+            }
+          }
+          ul {
+            line-height: normal;
+            position: absolute;
+            top: 19px;
+            left: 79px;
+            background: #fff;
+            border: 1px solid #b5b5b5;
+            z-index: 1;
+            max-height: 120px;
+            overflow-y: auto;
+            overflow-x: hidden;
+            border-radius: 3px;
+            width: 114px;
+            font-size: 12px;
+            li {
+              height: 24px;
+              line-height: 24px;
+              cursor: pointer;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              padding: 0 5px;
+              &:hover {
+                background: #ddd;
+              }
+            }
+          }
+          select {
+            width: 40px;
+            position: absolute;
+            height: 20px;
+            background: url('/images/applyPurchase/select.png')no-repeat right;
+            background-position-x: 23px;
+            padding: 0 0 0 7px;
+            border-radius: 0;
+            & + input {
+              padding-left: 45px;
+            }
+          }
+          .el-input {
+            width: 198px;
+          }
+          input {
+            font-size: 14px;
+            width: 198px;
+            height: 20px;
+            line-height: 20px;
+            border-radius: 2px;
+            padding: 0 3px;
+            box-shadow: none;
+            -webkit-box-shadow: none;
+            -moz-box-shadow: none;
+            &.error {
+              border-color: #f4645f!important;
+            }
+          }
+        }
+      }
+    }
+  }
   .container.commodity {
     width: 1190px;
     padding-left: 0;

components/store/home/CommodityList.vue

@@ -181,8 +181,8 @@
               <div v-if="!commodity.attach">—</div>
             </td>
             <td>
-              <buy :item="commodity" v-if="commodity.attach"></buy>
-              <button  v-if="!commodity.attach"
+              <buy :item="commodity" v-if="commodity.status !== 613 && commodity.status !== 602"></buy>
+              <button  v-else
                        style="z-index: 1000;"
                       class="btn btn-primary btn-buy-now"
                       :class="{'disabled': isClick}"

nuxt.config.js

@@ -225,6 +225,7 @@ module.exports = {
     '/sale/apCheck/**': uasUrl,
     '/token**': uasUrl,
     '/authentication**': uasUrl,
-    '/authentication/**': uasUrl
+    '/authentication/**': uasUrl,
+    '/sale/sample/**': uasUrl
   }
 }

pages/mobile/center/vendor/approval/index.vue

@@ -9,10 +9,9 @@
       </div>
     </div>
     <div class="order-nav">
-      <div :class="activeType === 'todo' ? 'active': ''" @click="ChangeList('todo')"><span>全部</span></div>
-      <div :class="activeType === 'todo' ? 'active': ''" @click="ChangeList('todo')"><span>已送样</span></div>
-      <div :class="activeType === 'done' ? 'active' : ''" @click="ChangeList('done')"><span>待送样</span></div>
-      <div :class="activeType === 'end' ? 'active' : ''" @click="ChangeList('end')"><span>已作废</span></div>
+      <div :class="activeType === 'all' ? 'active': ''" @click="ChangeList('all')"><span>全部</span></div>
+      <div :class="activeType === 'agreed' ? 'active': ''" @click="ChangeList('agreed')"><span>合格</span></div>
+      <div :class="activeType === 'refused' ? 'active' : ''" @click="ChangeList('refused')"><span>不合格</span></div>
     </div>
     <div class="search-content search-content2">
       <input type="text" placeholder="单据编号/客户名称/物料名称" v-model="keyword" @keyup.13="searchOrderlist">
@@ -33,34 +32,75 @@
       </base-filter>
     </div>
     <ul class="order-list-wrap" id="b2border-wrapper" v-show="orderList.length > 0">
-      <li v-for="item in orderList" @click="goDetails(item)">
-        <div class="list-title">{{item.enName}}</div>
-        <div class="clearfix list-content">
-          <div class="fl left">
-            <div class="item">
-              <span>单号：</span>
-              <label v-html="item.code" style="color: #333;font-weight: 500"></label>
-            </div>
-            <div class="item">
-              <span>币别：</span>{{item.currency}}
-            </div>
-            <div class="item pric">
-              <span>金额：</span>{{item.sum}}
-            </div>
-            <div class="item">
-              <span>时间：</span>{{item.date | time}}
-            </div>
+      <li v-for="item in orderList">
+        <div class="list-title">
+          <span>{{item.inDate | time}}</span>
+          <span class="leave-active" v-if="item.finalresult && item.finalresult  === '合格'"><i class="fa fa-legal"></i>合格</span>
+          <span class="over-active" v-if="!item.finalresult || item.finalresult  !== '合格'"><i class="fa fa-legal"></i>不合格</span>
+        </div>
+        <div class="list-content">
+          <div class="item">
+            {{item.enterprise.enName}}
           </div>
-          <div class="fr right">
-            <div v-if="activeType === 'todo'" class="todo">
-              待回复
-            </div>
-            <div v-else-if="activeType === 'done'" class="done">
-              已回复
-            </div>
-            <div v-else-if="activeType === 'end'" class="end">
-              已结案
-            </div>
+          <div class="item">
+            <span>单号：</span>
+            <label v-html="item.code" style="color: #3F84F6;font-weight: 500"></label>
+          </div>
+        </div>
+        <div class="list-content">
+          <div class="item">
+            <span>物料型号：</span>
+            <label v-html="item.prodCode || '-'" style="color: #333;font-weight: 500"></label>
+          </div>
+          <div class="item">
+            <span>物料名称：</span>
+            <label v-html="item.prodDetail || '-'" style="color: #333;font-weight: 500"></label>
+          </div>
+          <div class="item">
+            <span>物料规格：</span>
+            <label v-html="item.prodSpec || '-'" style="color: #333;font-weight: 500"></label>
+          </div>
+          <div class="item">
+            <span>样品数量：</span>
+            <label v-html="item.prodUnit || '-'" style="color: #333;font-weight: 500"></label>
+          </div>
+          <div class="item">
+            <span>申请单：</span>
+            <label v-html="item.pscode" style="color: #333;font-weight: 500"></label>
+          </div>
+          <div class="item">
+            <span>附件：</span>
+            <label v-html="item.code" style="color: #333;font-weight: 500"></label>
+          </div>
+          <div class="item">
+            <span>最终认定：</span>
+            <label v-html="item.finalresultremark || '-'" style="color: #333;font-weight: 500"></label>
+          </div>
+          <div class="item">
+            <span>材料：</span>
+            <label v-html="item.material || '-'" style="color: #333;font-weight: 500"></label>
+          </div>
+          <div class="item">
+            <span>材质：</span>
+            <label v-html="item.materialquality || '-'" style="color: #333;font-weight: 500"></label>
+          </div>
+          <div class="item">
+            <span>单重：</span>
+            <label style="color: #333;font-weight: 500">{{item.height || '-'}}g</label>
+          </div>
+        </div>
+        <div class="list-content">
+          <div class="item">
+            <span>研发认定</span>
+            <label v-html="item.height || '-'" style="color: #333;font-weight: 500"></label>
+          </div>
+          <div class="item">
+            <span>IQC认定</span>
+            <label v-html="item.height || '-'" style="color: #333;font-weight: 500"></label>
+          </div>
+          <div class="item">
+            <span>工程认定</span>
+            <label v-html="item.height || '-'" style="color: #333;font-weight: 500"></label>
           </div>
         </div>
       </li>
@@ -107,20 +147,17 @@
             defaultVal: 1
           }
         ],
-        filterParams:{
-          count: 10
-        },
-        filter:{
-          count: 10,
-          sorting: {"createtime":"DESC"},
-          status: '502-406'
-        },
-        activeType: 'todo',
+        activeType: 'all',
         page: 1,
-        // isSearchSearchingMore: false,
         orderList: [],
         keyword: '',
-        allPage: 0
+        allPage: 0,
+        filterParams: {
+          count: 10,
+          endDate: new Date().getTime(),
+          fromDate: null,
+          sorting: {'inDate': 'desc'}
+        },
       }
     },
     created() {
@@ -131,18 +168,13 @@
         if (type === 'date') {
           if (val) {
             this.filterParams.fromDate = val.fromDate
-            this.filter.startMils = val.fromDate
             this.filterParams.toDate = val.toDate
-            this.filter.endMils = val.toDate
           } else {
             this.filterParams.fromDate = null
-            this.filter.startMils = null
             this.filterParams.toDate = null
-            this.filter.endMils = null
           }
         } else {
           this.filterParams[type] = val
-          this.filter[type] = val
         }
         isReload && this.filterRecord()
       },
@@ -152,12 +184,11 @@
           fromDate: '',
           toDate: '',
           type: ''
-        },
-          this.filter = {
-            keyword: '',
-            startMils: '',
-            endMils: ''
-          }
+        }
+      },
+      filterRecord () {
+        this.page = 1
+        this.getResource(true)
       },
       onSelectAction (selectObj) {
         this.setSelect(selectObj.key, selectObj.value, true)
@@ -165,32 +196,21 @@
       onValueAction (selectObj) {
         this.setSelect(selectObj.key, selectObj.value, false)
       },
-      goDetails(item) {
-        this.$router.push('/mobile/order/orderbtob_details?id=' + item.id)
-      },
       getResource(Reset) {
-        // this.isSearchSearchingMore = false
-        this.$http.get('/sale/orders/info/nosearch', {params: {
-            _state: this.activeType,
-            count: 10,
-            page: this.page,
-            searchFilter: {'fromDate': 1293811200000, 'endDate': new Date().getTime(), 'keyword': this.keyword},
-            sorting: {date: 'desc', id: 'desc'}
-          }}).then(res => {
-          if (Reset) {
-            this.orderList = []
-          }
-          res.data.content.forEach(item => {
-            item.sum = 0
-            item.orderItems.forEach(order => {
-              item.sum += order.qty * order.price
-            })
+        if (this.activeType !== 'all') {
+          this.filterParams._state = this.activeType
+        }
+        this.filterParams.page = this.page
+        this.filterParams.keyword = this.keyword
+        this.$http.get('/sale/sample/approval/info/search', {params: this.filterParams})
+          .then(res => {
+            if (Reset) {
+              this.orderList = []
+            }
+            this.orderList.push(...res.data.content)
+            this.allPage = Math.floor(res.data.totalElement / 10)
+            console.log(this.orderList)
           })
-          this.orderList.push(...res.data.content)
-          this.allPage = Math.floor(res.data.totalElement / 10)
-          // this.isSearchSearchingMore = true
-          console.log(this.orderList)
-        })
       },
       ChangeList(_tp) {
         this.activeType = _tp
@@ -209,7 +229,7 @@
       RemindBox, PullUp, ModalWrapper, BaseFilter
     },
     filters: {
-      time: function(time) {
+      timeDay: function(time) {
         if (typeof time === 'number') {
           if (!time) {
             return '无'
@@ -241,7 +261,6 @@
     background: #f1f3f6;
     margin: 1.26rem 0 0.98rem 0;
     height: calc(100vh - 1.26rem - 0.98rem);
-    /*padding-bottom: 0.96rem;*/
     .filters-wrap{
       background: #fff;
       margin: 0 auto .13rem;
@@ -278,7 +297,7 @@
         height: 0.82rem;
         line-height: 0.82rem;
         display: inline-block;
-        width: 25%;
+        width: 33.3%;
         text-align: center;
         font-size: .28rem;
         color: #666;
@@ -298,13 +317,9 @@
         width: 7.1rem;
         border: 1px solid #376ff3;
       }
-      span {
-        /*height: .46rem;*/
-        /*line-height: .46rem;*/
-      }
     }
     .order-list-wrap {
-      height: calc(100vh - 1.26rem - 0.96rem - 0.84rem - 1rem - 0.92rem);
+      height: calc(90vh - 1.26rem - 0.96rem - 0.84rem - 1rem - 0.92rem);
       overflow-y: scroll;
       margin-top: 0.2rem;
       li {
@@ -314,55 +329,47 @@
         border-radius: 0.04rem;
         border: 1px solid #e4e4e4;
         padding: 0 0.24rem;
+        .over-active{
+          @include lineHeight(.4rem);
+          padding:.05rem;
+          margin:0 .5rem;
+          background: #F0AD4E;
+          color:#fff;
+          border-radius:.05rem;
+        }
+        .leave-active{
+          @include lineHeight(.4rem);
+          padding:.05rem;
+          margin:0 .5rem;
+          background: #15B262;
+          color:#fff;
+          border-radius:.05rem;
+        }
         .list-title {
           @include lineHeight(0.91rem);
           @include overFlowHidden();
           font-size: 0.28rem;
           color: #3a3a3a;
-          border-bottom: 1px solid #d3d3d3;
+        }
+        .list-bottom{
+          @include lineHeight(1rem);
+          text-align: center;
+          font-size: 0.26rem;
+          color: #333;
         }
         .list-content {
-          margin-top: 0.23rem;
-          padding-bottom: 0.28rem;
-          .left {
-            border-right: dashed 1px #9f9f9f;
-            width: 4.6rem;
-            .item {
-              font-size: 0.28rem;
-              color: #333;
-              @include overFlowHidden();
-              margin-bottom: 0.15rem;
-              span {
-                color: #666;
-              }
-              &.pric {
-                color: #e6353d;
-              }
+          border-top: 1px solid #d3d3d3;
+          padding-top: 0.23rem;
+          .item {
+            font-size: 0.28rem;
+            color: #333;
+            @include overFlowHidden();
+            margin-bottom: 0.15rem;
+            span {
+              color: #666;
             }
-          }
-          .right {
-            div {
-              width: 1.7rem;
-              height: 0.47rem;
-              line-height: 0.47rem;
-              font-size: 0.28rem;
-              text-align: center;
-              border-radius: 0.04rem;
-              margin-top: 0.7rem;
-              &.todo {
-                border: 1px solid #3e82f5;
-                background: #3e82f5;
-                color: #fff;
-              }
-              &.done {
-                border: 1px solid #3e82f5;
-                color: #3e82f5;
-              }
-              &.end {
-                background: #cccccc;
-                border: 1px solid #cccccc;
-                color: #fff;
-              }
+            &.pric {
+              color: #e6353d;
             }
           }
         }

pages/mobile/center/vendor/index.vue

@@ -56,7 +56,7 @@
           </nuxt-link>
           <nuxt-link tag="li" to="/mobile/center/vendor/invoice">
             <img src="/images/mobile/center/user/invoice_icon.png" alt="">
-            <p>发票管理</p>
+            <p>开票管理</p>
           </nuxt-link>
           <nuxt-link tag="li" to="/mobile/center/vendor/material?providerType=enterprise">
             <img src="/images/mobile/center/vendor/material.png" alt="">

pages/mobile/center/vendor/sample/index.vue

@@ -9,13 +9,13 @@
       </div>
     </div>
     <div class="order-nav">
-      <div :class="activeType === 'todo' ? 'active': ''" @click="ChangeList('todo')"><span>全部</span></div>
-      <div :class="activeType === 'todo' ? 'active': ''" @click="ChangeList('todo')"><span>已送样</span></div>
-      <div :class="activeType === 'done' ? 'active' : ''" @click="ChangeList('done')"><span>待送样</span></div>
-      <div :class="activeType === 'end' ? 'active' : ''" @click="ChangeList('end')"><span>已作废</span></div>
+      <div :class="activeType === 'all' ? 'active': ''" @click="ChangeList('all')"><span>全部</span></div>
+      <div :class="activeType === 'done' ? 'active': ''" @click="ChangeList('done')"><span>已送样</span></div>
+      <div :class="activeType === 'todo' ? 'active' : ''" @click="ChangeList('todo')"><span>待送样</span></div>
+      <div :class="activeType === 'invalid' ? 'active' : ''" @click="ChangeList('invalid')"><span>已作废</span></div>
     </div>
     <div class="search-content search-content2">
-      <input type="text" placeholder="单据编号/客户名称/物料名称" v-model="keyword" @keyup.13="searchOrderlist">
+      <input type="text" placeholder="单据编号/客户名称/物料名称" v-model="filterParams.keyword" @keyup.13="searchOrderlist">
       <span @click="searchOrderlist">
           <i class="iconfont icon-sousuo"></i>
       </span>
@@ -33,36 +33,99 @@
       </base-filter>
     </div>
     <ul class="order-list-wrap" id="b2border-wrapper" v-show="orderList.length > 0">
-      <li v-for="item in orderList" @click="goDetails(item)">
-        <div class="list-title">{{item.enName}}</div>
-        <div class="clearfix list-content">
-          <div class="fl left">
-            <div class="item">
-              <span>单号：</span>
-              <label v-html="item.code" style="color: #333;font-weight: 500"></label>
-            </div>
-            <div class="item">
-              <span>币别：</span>{{item.currency}}
-            </div>
-            <div class="item pric">
-              <span>金额：</span>{{item.sum}}
-            </div>
-            <div class="item">
-              <span>时间：</span>{{item.date | time}}
-            </div>
+      <li v-for="item in orderList" @click="lookItem(item)">
+        <div class="list-title">
+          <span v-if="!isUnread(item.id)" style="color:#15B262;margin-right:.5rem;">已读</span>
+          <span v-if="isUnread(item.id)" style="color:#DE4545;margin-right:.5rem;">未读</span>
+          <span>{{item.proofing.date | time}}</span>
+          <span class="leave-active" v-if="item.status === 400 && !(item.qty > (item.sendQty || 0))">已送样</span>
+          <span class="over-active" v-if="item.status === 315">已作废</span>
+          <span class="leave-active" v-if="item.status === 400 && item.qty > (item.sendQty || 0)">部分送样</span>
+        </div>
+        <div class="list-content">
+          <div class="item">
+            {{item.proofing.enterprise.enName}}
           </div>
-          <div class="fr right">
-            <div v-if="activeType === 'todo'" class="todo">
-              待回复
-            </div>
-            <div v-else-if="activeType === 'done'" class="done">
-              已回复
-            </div>
-            <div v-else-if="activeType === 'end'" class="end">
-              已结案
-            </div>
+          <div class="item">
+            <span>流水号：</span>
+            <label v-html="item.proofing.code" style="color: #3F84F6;font-weight: 500"></label>
+          </div>
+        </div>
+        <div class="list-content">
+          <div class="item">
+            <span>物料编码：</span>
+            <label v-html="item.proofing.product.code || '-'" style="color: #333;font-weight: 500"></label>
+          </div>
+          <div class="item">
+            <span>物料名称：</span>
+            <label v-html="item.proofing.product.title || '-'" style="color: #333;font-weight: 500"></label>
+          </div>
+          <div class="item">
+            <span>物料规格：</span>
+            <label v-html="item.proofing.product.spec || '-'" style="color: #333;font-weight: 500"></label>
+          </div>
+          <div class="item">
+            <span>环保要求：</span>
+            <label v-html="item.proofing.envrequiry" style="color: #333;font-weight: 500"></label>
+          </div>
+          <div class="item">
+            <span>数量：</span>
+            <label v-html="item.qty" style="color: #333;font-weight: 500"></label>
+            <label v-html="item.proofing.product.unit" style="color: #333;font-weight: 500"></label>
+          </div>
+          <div class="item">
+            <span>是否收费：</span>
+            <!--<label v-html="item.code" style="color: #333;font-weight: 500"></label>-->
+          </div>
+          <div class="item">
+            <span>单价：</span>
+            <label v-html="item.proofing.isCharge === '是' ? '是' : '否'" style="color: #333;font-weight: 500"></label>
+          </div>
+          <div class="item">
+            <span>需求日期：</span>
+            <label style="color: #333;font-weight: 500">{{item.proofing.delivery | timeDay}}</label>
+            <a style="margin-left:1rem;color:#15B262;" @click="dropClick(item, $event)">送样信息<i class="fa fa-fw fa-angle-down"></i></a>
           </div>
+          <template  v-if="item.isDrop">
+            <div v-for="(send, key) in item.sends" style="padding: .2rem;">
+              <div class="item">
+                <span>序号：</span>
+                <label style="color: #333;font-weight: 500">{{key + 1}}</label>
+              </div>
+              <div class="item">
+                <span>送样时间：</span>
+                <label style="color: #333;font-weight: 500">{{send.date | time}}</label>
+              </div>
+              <div class="item">
+                <span>送样人：</span>
+                <label style="color: #333;font-weight: 500">{{send.recorder}}</label>
+              </div>
+              <div class="item">
+                <span>送样单号：</span>
+                <label style="color: #333;font-weight: 500">{{send.code}}</label>
+              </div>
+              <div class="item">
+                <span>送样数量：</span>
+                <label style="color: #333;font-weight: 500">{{send.sendQty}}</label>
+              </div>
+              <div class="item">
+                <span>采购单价：</span>
+                <label style="color: #333;font-weight: 500">{{send.puprice | toFixedNum}}</label>
+              </div>
+              <div class="item">
+                <span>最小包装量：</span>
+                <label style="color: #333;font-weight: 500">{{send.minQty}}</label>
+              </div>
+              <div class="item">
+                <span>最小订购量：</span>
+                <label style="color: #333;font-weight: 500">{{send.minBuyQty}}</label>
+              </div>
+            </div>
+          </template>
         </div>
+        <!--<div class="list-bottom">-->
+          <!--<span><i class="fa fa-paper-plane fa-lg fa-fw"></i>送样</span>-->
+        <!--</div>-->
       </li>
     </ul>
     <div v-if="orderList.length === 0" class="com-none-state">
@@ -75,6 +138,58 @@
              :page="page"
              :FixedEl="true"
              @pullUpAction="getMoreSearch"></pull-up>
+    <modal-wrapper :showModal="showModal" :title="'客户打样申请详情'" @closeAction="showModal = false">
+      <div class="btob_invoice_modal">
+        <div class="btob_invoice_modal_title">
+          <span>单据信息</span>
+          <span class="block" v-if="modalObj.status === 401">待送样</span>
+          <span class="block" v-if="modalObj.status === 400 && !(modalObj.qty > (modalObj.sendQty || 0))">已送样</span>
+          <span class="block" v-if="modalObj.status === 400 && modalObj.qty > (modalObj.sendQty || 0)">部分送样</span>
+          <span class="block" v-if="modalObj.status === 315">已作废</span>
+        </div>
+        <div class="btob_invoice_modal_content">
+          <div><span>单据编号：</span>{{modalObj.proofing && modalObj.proofing.code}}</div>
+          <div><span>日期：</span>{{modalObj.proofing && modalObj.proofing.date | time}}</div>
+          <div><span>客户：</span>{{modalObj.proofing && modalObj.proofing.enterprise.enName}}</div>
+          <div><span>需求数：</span>{{modalObj.qty}}</div>
+          <div><span>交货日期：</span>{{modalObj.proofing && modalObj.proofing.delivery | time}}</div>
+          <div><span>送样申请人：</span>{{modalObj.proofing && modalObj.proofing.user.userName}}</div>
+          <div><span>备注：</span>{{modalObj.proofing && modalObj.proofing.remark || '无'}}</div>
+        </div>
+        <div class="btob_invoice_modal_title">
+          <span>物料信息</span>
+        </div>
+        <div class="btob_invoice_modal_content">
+          <div><span>物料名称：</span>{{modalObj.proofing && modalObj.proofing.product.title}}</div>
+          <div><span>物料型号：</span>{{modalObj.proofing && modalObj.proofing.product.code}}</div>
+          <div><span>物料规格：</span>{{modalObj.proofing && modalObj.proofing.product.spec}}</div>
+          <div><span>环保要求：</span>{{modalObj.proofing && modalObj.proofing.envrequiry || '无'}}</div>
+        </div>
+        <div class="btob_invoice_modal_title" v-if="modalObj.status !== 401 && modalObj.sends && modalObj.sends.length > 0">
+          <span>明细清单</span>
+        </div>
+        <div class="btob_invoice_modal_content btob_invoice_modal_content2" v-if="modalObj.status !== 401" v-for="(item, index) in modalObj.sends">
+          <div><span>序号：</span>{{index + 1}}</div>
+          <div><span>单号：</span>{{item.code}}</div>
+          <div><span>送样时间：</span>{{item.date | time}}</div>
+          <div v-if="!isUser"><span>采购单价：</span>{{item.puprice | toFixedNum}} {{item.currency}}</div>
+          <div><span>送样数量：</span>{{item.sendQty || '-'}}</div>
+          <div><span>交货周期：</span>{{item.delivery || '-'}}</div>
+          <div><span>送样人：</span>{{item.recorder || '-'}}</div>
+          <div v-if="item.minQty"><span>最小包装量：</span>{{item.minQty}}</div>
+          <div v-if="item.minBuyQty"><span>最小订购量：</span>{{item.minBuyQty}}</div>
+          <div v-if="item.vendSpec"><span>生产厂型号：</span>{{item.vendSpec}}</div>
+          <div v-if="item.brand"><span>品牌：</span>{{item.brand}}</div>
+          <div v-if="item.weight"><span>单重：</span>{{item.weight}}</div>
+          <div v-if="item.material"><span>材料：</span>{{item.material}}</div>
+          <div v-if="item.materialQuality"><span>材质：</span>{{item.materialQuality}}</div>
+          <div v-if="item.minBuyQty"><span>产地：</span>{{item.minBuyQty}}</div>
+          <div v-if="item.addressMark"><span>产地标识：</span>{{item.addressMark}}</div>
+          <div v-if="item.ratio"><span>口水料比例：</span>{{item.ratio}}</div>
+          <div v-if="item.attachs.length > 0"><span>附件：</span>{{item.attachs}}</div>
+        </div>
+      </div>
+    </modal-wrapper>
   </div>
 </template>
 
@@ -107,42 +222,51 @@
             defaultVal: 1
           }
         ],
-        filterParams:{
-          count: 10
-        },
-        filter:{
-          count: 10,
-          sorting: {"createtime":"DESC"},
-          status: '502-406'
+        filterParams: {
+          keyword: ''
         },
-        activeType: 'todo',
+        unreadCode: '',
+        activeType: 'all',
         page: 1,
-        // isSearchSearchingMore: false,
         orderList: [],
-        keyword: '',
-        allPage: 0
+        allPage: 0,
+        modalObj: {},
+        showModal: false,
+        isUser: false
       }
     },
     created() {
       this.getResource()
+      this.getUnreadIds()
+      this.getHasUser()
     },
     methods: {
+      lookItem(bill) {
+        this.showModal = true
+        this.$http.get(`/sale/sample/${bill.id}/send`)
+          .then(res => {
+            this.modalObj = bill
+            this.modalObj.sends = res.data
+          })
+      },
+      isUnread (id) {
+        for (let i in this.unreadCode) {
+          if (id === this.unreadCode[i]) {
+            return true
+          }
+        }
+      },
       setSelect (type, val, isReload) {
         if (type === 'date') {
           if (val) {
             this.filterParams.fromDate = val.fromDate
-            this.filter.startMils = val.fromDate
             this.filterParams.toDate = val.toDate
-            this.filter.endMils = val.toDate
           } else {
             this.filterParams.fromDate = null
-            this.filter.startMils = null
             this.filterParams.toDate = null
-            this.filter.endMils = null
           }
         } else {
           this.filterParams[type] = val
-          this.filter[type] = val
         }
         isReload && this.filterRecord()
       },
@@ -150,14 +274,12 @@
         this.filterParams = {
           keyword: '',
           fromDate: '',
-          toDate: '',
-          type: ''
-        },
-          this.filter = {
-            keyword: '',
-            startMils: '',
-            endMils: ''
-          }
+          toDate: ''
+        }
+      },
+      filterRecord () {
+        this.page = 1
+        this.getResource(true)
       },
       onSelectAction (selectObj) {
         this.setSelect(selectObj.key, selectObj.value, true)
@@ -165,31 +287,46 @@
       onValueAction (selectObj) {
         this.setSelect(selectObj.key, selectObj.value, false)
       },
-      goDetails(item) {
-        this.$router.push('/mobile/order/orderbtob_details?id=' + item.id)
+      getHasUser () {
+        this.$http.get('/account/role/isUser').then(res => {
+          this.isUser = res.data.isUser
+        })
+      },
+      dropClick (item, event) {
+        event.stopPropagation()
+        this.$http.get(`/sale/sample/${item.id}/send`)
+          .then(res => {
+            this.orderList.forEach(value => {
+              if (item.id === value.id) {
+                value.isDrop = !value.isDrop
+                item.sends = res.data
+              }
+            })
+          })
+        console.log(item)
+      },
+      getUnreadIds () {
+        this.$http.get('/sale/sample/getUnreadIds')
+          .then(res => {
+            this.unreadCode = res.data.content
+          })
       },
       getResource(Reset) {
-        // this.isSearchSearchingMore = false
-        this.$http.get('/sale/orders/info/nosearch', {params: {
-            _state: this.activeType,
+        this.$http.get('/sale/sample/info/search', {params: {
+            _state: this.activeType !== 'all' ? this.activeType : null,
             count: 10,
             page: this.page,
-            searchFilter: {'fromDate': 1293811200000, 'endDate': new Date().getTime(), 'keyword': this.keyword},
-            sorting: {date: 'desc', id: 'desc'}
+            searchFilter: this.filterParams,
+            sorting: {'proofingDate': 'desc'}
           }}).then(res => {
           if (Reset) {
             this.orderList = []
           }
-          res.data.content.forEach(item => {
-            item.sum = 0
-            item.orderItems.forEach(order => {
-              item.sum += order.qty * order.price
-            })
+          res.data.content.forEach(value => {
+            value.isDrop = false
           })
           this.orderList.push(...res.data.content)
           this.allPage = Math.floor(res.data.totalElement / 10)
-          // this.isSearchSearchingMore = true
-          console.log(this.orderList)
         })
       },
       ChangeList(_tp) {
@@ -209,7 +346,7 @@
       RemindBox, PullUp, ModalWrapper, BaseFilter
     },
     filters: {
-      time: function(time) {
+      timeDay: function(time) {
         if (typeof time === 'number') {
           if (!time) {
             return '无'
@@ -221,6 +358,9 @@
             return year + '-' + month + '-' + day
           }
         }
+      },
+      toFixedNum: function (num) {
+        return num ? parseFloat(num).toFixed(2) : '-'
       }
     }
   }
@@ -304,7 +444,7 @@
       }
     }
     .order-list-wrap {
-      height: calc(100vh - 1.26rem - 0.96rem - 0.84rem - 1rem - 0.92rem);
+      height: calc(90vh - 1.26rem - 0.96rem - 0.84rem - 1rem - 0.92rem);
       overflow-y: scroll;
       margin-top: 0.2rem;
       li {
@@ -319,50 +459,42 @@
           @include overFlowHidden();
           font-size: 0.28rem;
           color: #3a3a3a;
-          border-bottom: 1px solid #d3d3d3;
+          .over-active{
+            @include lineHeight(.4rem);
+            padding:.05rem;
+            margin:0 .5rem;
+            background: #989A9C;
+            color:#fff;
+            border-radius:.05rem;
+          }
+          .leave-active{
+            @include lineHeight(.4rem);
+            padding:.05rem;
+            margin:0 .5rem;
+            background: #15B262;
+            color:#fff;
+            border-radius:.05rem;
+          }
+        }
+        .list-bottom{
+          @include lineHeight(1rem);
+          text-align: center;
+          font-size: 0.26rem;
+          color: #333;
         }
         .list-content {
-          margin-top: 0.23rem;
-          padding-bottom: 0.28rem;
-          .left {
-            border-right: dashed 1px #9f9f9f;
-            width: 4.6rem;
-            .item {
-              font-size: 0.28rem;
-              color: #333;
-              @include overFlowHidden();
-              margin-bottom: 0.15rem;
-              span {
-                color: #666;
-              }
-              &.pric {
-                color: #e6353d;
-              }
+          padding-top: 0.23rem;
+          border-top: 1px solid #d3d3d3;
+          .item {
+            font-size: 0.28rem;
+            color: #333;
+            @include overFlowHidden();
+            margin-bottom: 0.15rem;
+            span {
+              color: #666;
             }
-          }
-          .right {
-            div {
-              width: 1.7rem;
-              height: 0.47rem;
-              line-height: 0.47rem;
-              font-size: 0.28rem;
-              text-align: center;
-              border-radius: 0.04rem;
-              margin-top: 0.7rem;
-              &.todo {
-                border: 1px solid #3e82f5;
-                background: #3e82f5;
-                color: #fff;
-              }
-              &.done {
-                border: 1px solid #3e82f5;
-                color: #3e82f5;
-              }
-              &.end {
-                background: #cccccc;
-                border: 1px solid #cccccc;
-                color: #fff;
-              }
+            &.pric {
+              color: #e6353d;
             }
           }
         }
@@ -371,5 +503,44 @@
     .com-none-state{
       background: #f1f3f6
     }
+    .btob_invoice_modal {
+      padding: 0 0.24rem;
+      .btob_invoice_modal_title {
+        line-height: 0.72rem;
+        border-top:1px solid #D3D3D3;
+        border-bottom:1px solid #D3D3D3;
+        span {
+          font-size: 0.28rem;
+          color: #3F84F6;
+          border-left: 0.06rem solid #3F84F6;
+          padding-left: 0.15rem;
+          height: 0.18rem;
+          &.block{
+            float:right;
+            border:none;
+          }
+        }
+        &:nth-child(1) {
+          border-top: 0;
+        }
+      }
+      .btob_invoice_modal_content {
+        @include overFlowHidden();
+        padding-top: 0.15rem;
+        font-size: 0.28rem;
+        color: #151515;
+        line-height: 0.5rem;
+        padding-bottom: 0.15rem;
+        span {
+          color: #666666;
+        }
+        &.btob_invoice_modal_content2 {
+          border-bottom:1px solid #D3D3D3;
+          &:nth-last-of-type(1) {
+            border-bottom: 0px
+          }
+        }
+      }
+    }
   }
 </style>