|
|
@@ -0,0 +1,387 @@
|
|
|
+<template>
|
|
|
+ <div class="orderbtob_details_wrapper">
|
|
|
+ <div class="mobile-header">
|
|
|
+ <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
|
|
|
+ <p>订单详情</p>
|
|
|
+ </div>
|
|
|
+ <div class="orderbtob_details_content">
|
|
|
+ <div class="orderbtob_details_top">
|
|
|
+ <div class="item">
|
|
|
+ <span class="name">客户：</span>
|
|
|
+ {{listInfo.inquiry.enterprise && listInfo.inquiry.enterprise.enName}}
|
|
|
+ </div>
|
|
|
+ <div class="item clearfix">
|
|
|
+ <span class="name fl">收货地址：</span>
|
|
|
+ <span class="fl" style="width: 5.2rem">{{listInfo.inquiry.ship}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <span class="name">订单号：</span>
|
|
|
+ {{listInfo.inquiry.code}}
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <span class="name">单据时间：</span>
|
|
|
+ {{listInfo.inquiry.date | time}}
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <span class="name">备注：</span>
|
|
|
+ {{listInfo.remark || '无'}}
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <span class="name">币别：</span>
|
|
|
+ {{listInfo.currency}}
|
|
|
+ </div>
|
|
|
+ <!--<div class="item">-->
|
|
|
+ <!--<span class="name">金额：</span>-->
|
|
|
+ <!--{{listInfo.sum}}-->
|
|
|
+ <!--</div>-->
|
|
|
+ </div>
|
|
|
+ <div class="orderbtob_details_middle">
|
|
|
+ <div class="list">
|
|
|
+ <template v-if="listInfo.status === 200">
|
|
|
+ <div class="item clearfix">
|
|
|
+ <span class="name">交货周期：</span>
|
|
|
+ <input type="number" class="dateinput" v-model="listInfo.leadtime" >天
|
|
|
+ </div>
|
|
|
+ <div class="item clearfix">
|
|
|
+ <span class="name">最小起订：</span>
|
|
|
+ <input type="number" class="dateinput" v-model="listInfo.minOrderQty" >PCS
|
|
|
+ </div>
|
|
|
+ <div class="item clearfix">
|
|
|
+ <span class="name">最小包装：</span>
|
|
|
+ <input type="number" class="dateinput" v-model="listInfo.minPackQty">PCS
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="item clearfix">
|
|
|
+ <span class="name">交货周期：</span>
|
|
|
+ <span>{{listInfo.leadtime}}天</span>
|
|
|
+ </div>
|
|
|
+ <div class="item clearfix">
|
|
|
+ <span class="name">最小起订：</span>
|
|
|
+ <span>{{listInfo.minOrderQty}}PCS</span>
|
|
|
+ </div>
|
|
|
+ <div class="item clearfix">
|
|
|
+ <span class="name">最小包装：</span>
|
|
|
+ <span>{{listInfo.minPackQty}}PCS</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="item clearfix" style="position: relative">
|
|
|
+ <span class="fl name">分段报价：</span>
|
|
|
+ <ul class="fl table">
|
|
|
+ <li class="li_title clearfix">
|
|
|
+ <div class="fl fisrt">段数</div>
|
|
|
+ <div class="fl">分段数量</div>
|
|
|
+ <div class="fl" >分段单价</div>
|
|
|
+ </li>
|
|
|
+ <li class="li_content clearfix" v-for="(item, index) in listInfo.replies">
|
|
|
+ <div class="fl fisrt">{{index + 1}}</div>
|
|
|
+ <div class="fl" v-if="index === 0">
|
|
|
+ <input type="number" value="0" disabled readonly />
|
|
|
+ </div>
|
|
|
+ <div class="fl" v-if="index !== 0">
|
|
|
+ <input type="number" value="item.lapQty" />
|
|
|
+ </div>
|
|
|
+ <div class="fl" >
|
|
|
+ <input type="number" v-model="item.price" readonly="listInfo.status !== 200"/>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <div class="posixicon">
|
|
|
+ <i class="iconfont icon-add" @click="addItem()"></i>
|
|
|
+ <i class="iconfont icon-minus" @click="deleteItem()"></i>
|
|
|
+ </div>
|
|
|
+ </ul>
|
|
|
+ <div style="clear:both"></div>
|
|
|
+ <div class="replayBtn" @click="Replay(item)" v-if="listInfo.status === 200">
|
|
|
+ 报价
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { RemindBox } from '~components/mobile/common'
|
|
|
+ export default {
|
|
|
+ name: 'seek_btob_details',
|
|
|
+ layout: 'mobileActivity',
|
|
|
+ middleware: 'authenticated',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ listInfo: {
|
|
|
+ inquiry: {
|
|
|
+
|
|
|
+ },
|
|
|
+ replies: [{
|
|
|
+ lapQty: 0,
|
|
|
+ price: ''
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ token: '',
|
|
|
+ collectResult: '',
|
|
|
+ timeoutCount: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getInitInfo()
|
|
|
+ this._getToken()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ addItem() {
|
|
|
+ this.listInfo.replies.push({
|
|
|
+ lapQty: '',
|
|
|
+ price: ''
|
|
|
+ })
|
|
|
+ },
|
|
|
+ deleteItem() {
|
|
|
+ if (this.listInfo.replies.length === 1) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.listInfo.replies.splice(this.listInfo.replies.length - 1, 1)
|
|
|
+ },
|
|
|
+ Replay() {
|
|
|
+ if (this.listInfo.leadtime === '') {
|
|
|
+ this._iniFo('交货周期不能为空')
|
|
|
+ return
|
|
|
+ } else if (this.listInfo.minOrderQty === '') {
|
|
|
+ this._iniFo('最小起订量不能为空')
|
|
|
+ return
|
|
|
+ } else if (this.listInfo.minPackQty === '') {
|
|
|
+ this._iniFo('最小包装不能为空')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let replies = []
|
|
|
+ // 判断分段数是否合法
|
|
|
+ let valid = true
|
|
|
+ let validLapQty = 0
|
|
|
+ this.listInfo.replies.forEach(function (r, i) {
|
|
|
+ if ((i > 0 ? r.lapQty : 1) || r.price) {
|
|
|
+ replies.push(r)
|
|
|
+ }
|
|
|
+ // 直接比较是字符串比较，需要先转换再比较 2017年9月7日 15:05:51
|
|
|
+ if (i > 0 && parseInt(r.lapQty) <= parseInt(this.listInfo.replies.replies[i - 1].lapQty) || r.lapQty == null) {
|
|
|
+ valid = false
|
|
|
+ validLapQty = r.lapQty
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (!valid) {
|
|
|
+ if (validLapQty) {
|
|
|
+ this._iniFo('分段' + validLapQty + '小于等于了上一分段数，不能保存！')
|
|
|
+ } else {
|
|
|
+ this._iniFo('分段数量不合法，不能保存！')
|
|
|
+ }
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.listInfo.replies = replies
|
|
|
+ this.$http.post(`/sale/inquiry/items/${this.$route.query.id}/reply?token=${this.token}`, this.listInfo).then(res => {
|
|
|
+ this._iniFo('报价成功')
|
|
|
+ this.getInitInfo()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ _iniFo(str) {
|
|
|
+ this.collectResult = str
|
|
|
+ this.timeoutCount++
|
|
|
+ },
|
|
|
+ getInitInfo() {
|
|
|
+ this.$http.get(`/sale/inquiry/${this.$route.query.id}/info/mobile`).then(res => {
|
|
|
+ if (!res.data.replies[0].price || res.data.replies[0].price === '') {
|
|
|
+ res.data.replies[0].price = ''
|
|
|
+ }
|
|
|
+ this.listInfo = res.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ _getToken() {
|
|
|
+ this.$http.get('/token?userType=sale').then(res => {
|
|
|
+ this.token = res.data.token
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ RemindBox
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ time: function(time) {
|
|
|
+ if (typeof time === 'number') {
|
|
|
+ if (!time) {
|
|
|
+ return '无'
|
|
|
+ } else {
|
|
|
+ let d = new Date(time)
|
|
|
+ let year = d.getFullYear()
|
|
|
+ let month = d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : '' + (d.getMonth() + 1)
|
|
|
+ let day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate()
|
|
|
+ return year + '-' + month + '-' + day
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .orderbtob_details_wrapper {
|
|
|
+ background: #f5f5f5;
|
|
|
+ .mobile-header{
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ z-index: 10;
|
|
|
+ width:100%;
|
|
|
+ height:.88rem;
|
|
|
+ line-height: .88rem;
|
|
|
+ /*border-bottom:.01rem solid #ccc;*/
|
|
|
+ background: #3e82f5;
|
|
|
+ padding:0 .2rem 0 .1rem;
|
|
|
+ color:#fff;
|
|
|
+ }
|
|
|
+ .mobile-header p{
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ font-size:.36rem;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0;
|
|
|
+ width: 6rem;
|
|
|
+ padding-left: 1rem;
|
|
|
+ }
|
|
|
+ .mobile-header a{
|
|
|
+ font-size:.28rem;
|
|
|
+ color:#fff;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ .mobile-header a i{
|
|
|
+ font-size: .48rem;
|
|
|
+ margin-right: -.1rem;
|
|
|
+ }
|
|
|
+ .orderbtob_details_content {
|
|
|
+ margin-top: 0.9rem;
|
|
|
+ padding: 0.2rem;
|
|
|
+ .orderbtob_details_top {
|
|
|
+ background: #3f84f6;
|
|
|
+ border-radius: 0.07rem;
|
|
|
+ border: solid 0.01rem #e3e5e8;
|
|
|
+ padding: 0.24rem 0.2rem 0.14rem;
|
|
|
+ .item {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ margin-bottom: 0.1rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .orderbtob_details_middle {
|
|
|
+ margin-top: 0.2rem;
|
|
|
+ .list {
|
|
|
+ border: solid 1px #e3e5e8;
|
|
|
+ border-radius: 0.07rem;
|
|
|
+ overflow: hidden;
|
|
|
+ color: #333;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ padding: 0.24rem 0.2rem;
|
|
|
+ margin-bottom: 0.2rem;
|
|
|
+ background: #fff;
|
|
|
+ .item {
|
|
|
+ margin-bottom: 0.1rem;
|
|
|
+ line-height: 0.5rem;
|
|
|
+ }
|
|
|
+ .ovrflow {
|
|
|
+ width: 5.2rem;
|
|
|
+ line-height: 0.5rem
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ color: #666;
|
|
|
+ width: 1.4rem;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ .dateinput {
|
|
|
+ width: 3.49rem;
|
|
|
+ height: .5rem;
|
|
|
+ line-height: .5rem;
|
|
|
+ border: 1px solid #aeaeae;
|
|
|
+ font-size: .26rem;
|
|
|
+ vertical-align: middle;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 0;
|
|
|
+ margin-right: 0.05rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .replayBtn {
|
|
|
+ width: 6.59rem;
|
|
|
+ height: 0.77rem;
|
|
|
+ background-color: #3f84f6;
|
|
|
+ border-radius: 0.08rem;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ line-height: 0.77rem;
|
|
|
+ color: #ffffff;
|
|
|
+ overflow: hidden;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 0.2rem
|
|
|
+ }
|
|
|
+ .table {
|
|
|
+ width: 4.52rem;
|
|
|
+ background-color: #f3f3f3;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ .li_title {
|
|
|
+ border: 1px solid #c5c5c5;
|
|
|
+ div {
|
|
|
+ width: 1.87rem;
|
|
|
+ text-align: center;
|
|
|
+ border-right: 1px solid #c5c5c5;
|
|
|
+ &:last-child {
|
|
|
+ border-right: 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .fisrt {
|
|
|
+ width: 0.74rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .li_content {
|
|
|
+ border: 1px solid #c5c5c5;
|
|
|
+ background: #fff;
|
|
|
+ border-top: 0px;
|
|
|
+ div {
|
|
|
+ width: 1.87rem;
|
|
|
+ text-align: center;
|
|
|
+ border-right: 1px solid #c5c5c5;
|
|
|
+ &:last-child {
|
|
|
+ border-right: 0
|
|
|
+ }
|
|
|
+ input {
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 0.5rem;
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .fisrt {
|
|
|
+ width: 0.74rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom {
|
|
|
+ font-size: 0.2rem;
|
|
|
+ color: #999;
|
|
|
+ border-top: 1px solid #aeaeae;
|
|
|
+ padding-top: 0.1rem;
|
|
|
+ }
|
|
|
+ .noborder{
|
|
|
+ border: 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .icon-add {
|
|
|
+ color: #00d300;
|
|
|
+ font-size: 0.4rem
|
|
|
+ }
|
|
|
+ .icon-minus {
|
|
|
+ color: #cacaca;
|
|
|
+ font-size: 0.4rem;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .posixicon {
|
|
|
+ position: absolute;
|
|
|
+ right: 0.3rem;
|
|
|
+ width: 0.4rem;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
shenjunjie