Blame view

apps/pages/order/price-change/no-entry-detail.vue 16.1 KB
邱骏 authored
1
<template>
邱骏 authored
2 3
  <LayoutApp ref="layout" :title="title" :isStop="isStopScrollPrevent">
    <div class="order-page" @scroll="checkScroll">
邱骏 authored
4
      <div class="product">
lea guo authored
5 6 7 8 9 10
        <ImgSize
          class="pro-img"
          :src="goodsInfo.goodImg || ''"
          :width="200"
          :height="200"
        ></ImgSize>
邱骏 authored
11
        <div class="pro-info">
lea guo authored
12 13 14 15 16 17
          <p class="pro-name">
            {{ goodsInfo.colorName }}, {{ goodsInfo.sizeName }}码
          </p>
          <p class="stock-info ufo-font">
            最低售价: ¥{{ goodsInfo.leastPrice || "-" }}
          </p>
邱骏 authored
18 19 20
        </div>
      </div>
      <div class="input-container">
lea guo authored
21 22 23 24 25 26 27 28
        <InputUfo
          type="number"
          placeholder="定价需以9结尾.例如1999"
          :maxlength="8"
          class="ipt-number ufo-font"
          v-model="chgPrice"
          @blur="onChange"
        >
邱骏 authored
29 30 31 32
          <span class="prepend" slot="prepend">¥</span>
        </InputUfo>
      </div>
      <div class="earnest-container">
lea guo authored
33 34 35 36 37 38 39 40 41
        <p>需支付保证金:</p>
        <p class="earnest-money">{{ earnestMoney }}</p>
        <i
          class="iconfont iconquestion icon-earnest"
          @click="showEarnestQuestion"
        ></i>
        <p class="desc">
          所有商品必须为国内现货,且承诺36小时内发货,交易成功后将自动退还保证金
        </p>
邱骏 authored
42 43 44
      </div>
      <div class="fee-container">
        <div class="fee-line">
lea guo authored
45 46 47 48 49
          <p class="fee-title">
            平台费用:
            <i class="iconfont iconquestion" @click="showFeeDetail"></i>
          </p>
          <p class="fee-price">{{ platformFee.amount }}</p>
邱骏 authored
50 51 52
        </div>
        <div class="fee-line">
          <p class="fee-title">银行转账费(1%):</p>
lea guo authored
53
          <p class="fee-price">{{ bankTransferFee }}</p>
邱骏 authored
54 55 56
        </div>
        <div class="fee-line total">
          <p class="fee-title">实际收入:</p>
lea guo authored
57
          <p class="fee-price">{{ income }}</p>
邱骏 authored
58 59 60 61 62 63 64
        </div>
      </div>
      <div class="address-container">
        <div class="icon-container">
          <i class="iconfont iconaddress"></i>
        </div>
        <div class="address-info">
lea guo authored
65
          <p class="user-name">{{ userAddress.consignee }}</p>
邱骏 authored
66
          <p class="user-address">
lea guo authored
67
            {{ userAddress.area }} {{ userAddress.address }}
邱骏 authored
68 69
          </p>
          <p class="user-phone">
lea guo authored
70
            {{ userAddress.mobile }}
邱骏 authored
71 72 73
          </p>
        </div>
      </div>
邱骏 authored
74
      <div class="white-space"></div>
邱骏 authored
75 76 77
    </div>
    <div class="submit-container">
      <div class="agree-container">
邱骏 authored
78
        <!--<div class="checkbox">
邱骏 authored
79 80
          <Checkbox :option="labelOption" shape="square" v-model="isAgree"></Checkbox>
        </div>
邱骏 authored
81
        <a @click="showAgreement">卖家协议</a>-->
lea guo authored
82 83 84 85 86
        <OrderCheck
          v-model="isAgree"
          :desc="`卖家协议`"
          :url="agreementURL"
        ></OrderCheck>
邱骏 authored
87
      </div>
邱骏 authored
88
lea guo authored
89
      <div :class="['submit-button', isAgree && calced ? 'active' : '']">
邱骏 authored
90 91
        <button @click="changePrice">提交</button>
      </div>
邱骏 authored
92
    </div>
邱骏 authored
93
    <!--平台费用问号点击弹框-->
lea guo authored
94 95 96 97 98
    <Modal
      v-model="platformFeeModalVisible"
      :transfer="true"
      cancel-text="我知道了"
    >
邱骏 authored
99 100 101 102
      <div class="fee-dialog-container">
        <p class="modal-title">平台费用</p>

        <p class="fee-line">
邱骏 authored
103
          <span class="fee-title">商品鉴定费</span>
lea guo authored
104
          <span class="fee-price">{{ platformFee.appraiseFee }}</span>
邱骏 authored
105 106
        </p>
        <p class="fee-line">
邱骏 authored
107
          <span class="fee-title">商品包装费</span>
lea guo authored
108
          <span class="fee-price">{{ platformFee.packageFee }}</span>
邱骏 authored
109 110
        </p>
        <p class="fee-line total">
lea guo authored
111 112 113 114
          <span class="fee-title"
            >平台服务费({{ platformFee.goodsPaymentRatePercent }})</span
          >
          <span class="fee-price">{{ platformFee.serviceFee }}</span>
邱骏 authored
115 116 117
        </p>
      </div>
    </Modal>
邱骏 authored
118 119 120 121
  </LayoutApp>
</template>

<script>
122 123 124 125 126 127 128 129 130
import LayoutApp from '../../../components/layout/layout-app';
import ScrollView from '../../../components/layout/scroll-view';
import ImgSize from '../../../components/img-size';
import { createNamespacedHelpers } from 'vuex';
import InputUfo from './components/input-ufo';
import { Checkbox } from 'cube-ui';
import { get } from 'lodash';
import Modal from './components/modal';
import OrderCheck from '../components/confirm/agree';
lea guo authored
131
132
const { mapState, mapActions } = createNamespacedHelpers('order/priceChange');
邱骏 authored
133
// orderCode = 1233499619151
邱骏 authored
134
export default {
135
  name: 'noEntryDetail',
lea guo authored
136 137 138 139 140 141 142 143 144
  components: {
    OrderCheck,
    Modal,
    InputUfo,
    ScrollView,
    LayoutApp,
    ImgSize,
    Checkbox
  },
邱骏 authored
145 146
  data() {
    return {
147
      title: '调价',
lea guo authored
148
      agreementURL:
149
        'https://activity.yoho.cn/feature/3187.html?share_id=5851&title=ufo-%E5%8D%96%E5%AE%B6%E5%8D%8F%E8%AE%AE&nodownload=1',
邱骏 authored
150 151
      platformFeeModalVisible: false,
      platformFee: {
152 153 154 155 156 157
        amount: '-¥0',
        appraiseFee: '¥0.00',
        packageFee: '¥0.00',
        serviceFee: '¥0.00',
        goodsPaymentRatePercent: '0.00%',
        payChannelPercentage: '0.00%'
邱骏 authored
158
      },
159 160 161 162
      bankTransferFee: '-¥0',
      income: '¥0',
      errorTip: '',
      chgPrice: '',
邱骏 authored
163
      calced: false,
164
      earnestMoney: '¥0',
lea guo authored
165 166
      // 保证金
      earnestPrice: 0,
邱骏 authored
167 168
      isAgree: false,
      labelOption: {
169
        label: '我已阅读并同意'
邱骏 authored
170
      },
邱骏 authored
171 172
      time: 15000,
      isStopScrollPrevent: false // 是否停止layout阻止滚动事件
邱骏 authored
173 174
    };
  },
lea guo authored
175
  asyncData({ store, router }) {
176
    return store.dispatch('order/priceChange/fetchOrder', {
lea guo authored
177 178
      orderCode: router.params.orderCode
    });
邱骏 authored
179 180 181
  },
  mounted() {
    // this.fetchOrder({orderCode: this.$route.params.orderCode});
邱骏 authored
182
    // this.inputChange = debounce(this.onChange.bind(this), 500);
邱骏 authored
183 184
  },
  computed: {
185
    ...mapState(['noEntryOrderInfo']),
邱骏 authored
186 187 188 189 190 191
    goodsInfo() {
      return this.noEntryOrderInfo.goodsInfo || {};
    },
    userAddress() {
      return this.noEntryOrderInfo.userAddress || {};
    }
邱骏 authored
192 193
  },
  watch: {
邱骏 authored
194
    chgPrice() {
邱骏 authored
195
      this.calced = false;
邱骏 authored
196
      this.platformFee = {
197 198 199 200 201 202
        amount: '-¥0',
        appraiseFee: '¥0.00',
        packageFee: '¥0.00',
        serviceFee: '¥0.00',
        goodsPaymentRatePercent: '0.00%',
        payChannelPercentage: '0.00%'
邱骏 authored
203
      };
204 205 206
      this.bankTransferFee = '-¥0';
      this.income = '¥0';
      this.earnestMoney = '¥0';
lea guo authored
207
      this.earnestPrice = 0;
邱骏 authored
208
    }
邱骏 authored
209
  },
210 211 212 213
  beforeRouteLeave(from, to, next) {
    this.clearData();
    next();
  },
邱骏 authored
214
  methods: {
lea guo authored
215
    ...mapActions([
216 217 218
      'fetchOrder',
      'postNoEntryCalcPrice',
      'postNoEntryChangePrice'
lea guo authored
219
    ]),
邱骏 authored
220 221 222 223
    checkPrice(price) {
      let valid = false;

      if (!price) {
224
        this.errorTip = '没有价格';
邱骏 authored
225 226
        return false;
      } else if (!/^\d+$/.test(price)) {
227
        this.errorTip = '价格只能为正整数';
邱骏 authored
228
      } else if (!/9$/.test(price)) {
229
        this.errorTip = '出售价格必须以9结尾';
邱骏 authored
230
      } else {
231
        this.errorTip = '';
邱骏 authored
232 233 234 235 236
        valid = true;
      }
      console.log(this.errorTip, valid);
      return valid;
    },
lea guo authored
237 238
    changePrice() {
      // 点击提交按钮
邱骏 authored
239 240
      if (this.isAgree && this.calced) {
        this.$createDialog({
241 242
          type: 'confirm',
          content: '重新出售后本次出售保证金原路返回',
邱骏 authored
243
          confirmBtn: {
244
            text: '我再想想',
邱骏 authored
245
            active: true,
lea guo authored
246
            disabled: false
邱骏 authored
247 248
          },
          cancelBtn: {
249
            text: '重新出售',
邱骏 authored
250 251 252 253 254 255
            active: false,
            disabled: false
          },
          onCancel: () => {
            this.onPriceChangeConfirm({
              price: this.chgPrice,
lea guo authored
256
              earnestPrice: this.earnestPrice,
邱骏 authored
257
              skup: this.goodsInfo.skup
邱骏 authored
258 259 260 261
            });
          }
        }).show();
      }
邱骏 authored
262 263 264 265
    },
    async calcPrice(price) {
      const result = await this.postNoEntryCalcPrice({
        price: price,
邱骏 authored
266
        skup: this.goodsInfo.skup
邱骏 authored
267 268 269 270 271
      });

      console.log(result);

      if (result && result.code === 200) {
272 273 274 275 276
        this.platformFee = get(result, 'data.platformFee', '');
        this.bankTransferFee = get(result, 'data.bankTransferFee', '');
        this.income = '¥' + get(result, 'data.income', '');
        this.earnestMoney = '¥' + get(result, 'data.earnestMoney', '');
        this.earnestPrice = get(result, 'data.earnestMoney', 0);
邱骏 authored
277 278 279 280 281 282 283 284 285
        this.calced = true;
      } else {
        if (result.message) {
          this.errorTip = result.message;
        }
        this.calced = false;

        this.$createToast({
          txt: this.errorTip,
286
          type: 'txt'
邱骏 authored
287 288 289
        }).show();
      }
    },
lea guo authored
290 291
    onChange(price) {
      // 价格改变时(文本框离开焦点)
邱骏 authored
292 293 294 295 296
      if (this.checkPrice(price)) {
        this.calcPrice(price);
      } else {
        this.$createToast({
          txt: this.errorTip,
297
          type: 'txt'
邱骏 authored
298 299 300
        }).show();
      }
    },
lea guo authored
301 302
    showFeeDetail() {
      // 显示平台费用详情
邱骏 authored
303
      this.platformFeeModalVisible = true;
邱骏 authored
304 305
    },
lea guo authored
306 307
    showEarnestQuestion() {
      // 跳转保证金说明页
308
      console.log('showEarnest');
lea guo authored
309
      this.$xianyu.goXianyuNewPage({ url: this.agreementURL });
邱骏 authored
310 311 312 313 314 315 316 317
    },

    /**
     * 点提交后的弹出框确认
     * @param price
     * @param skup
     * @returns {Promise<void>}
     */
lea guo authored
318
    async onPriceChangeConfirm({ price, earnestPrice, skup }) {
邱骏 authored
319
      const that = this;
邱骏 authored
320 321 322 323 324
      const result = await this.postNoEntryChangePrice({
        price,
        skup
      });
邱骏 authored
325
      if (result.code === 200 && result.data.orderCode) {
邱骏 authored
326 327 328 329 330
        this.reportYas('XY_UFO_SALE_ORD', {
          ORD_NUM: result.data.orderCode,
          PRD_ID: result.data.productId,
          PRD_SKU: result.data.skup
        });
邱骏 authored
331 332 333
        console.log(result);
        this.$createOrderPayType({
          orderCode: result.data.orderCode,
lea guo authored
334
          price: parseFloat(`${earnestPrice}`).toFixed(2),
335
          desc: '保证金',
邱骏 authored
336
          extra: JSON.stringify({
337
            type: 'sell',
邱骏 authored
338
            reportType: 'sell',
邱骏 authored
339
            back: {
340
              name: 'InSaleOrderList'
邱骏 authored
341 342
            },
            forward: {
343
              name: 'SellPayOk',
邱骏 authored
344 345 346 347 348
              query: {
                orderCode: result.data.orderCode
              }
            }
          }),
邱骏 authored
349
          onCloseAction() {
邱骏 authored
350
            that.clearData();
邱骏 authored
351
            that.$router.replace({
352
              name: 'sellOrderDetail',
邱骏 authored
353
              params: {
354
                owner: 'sell',
邱骏 authored
355
                code: result.data.orderCode
邱骏 authored
356 357 358 359 360 361
              }
            });
          }
        }).show();
      } else {
        this.$createToast({
362 363
          txt: result.message || '调价失败',
          type: 'txt'
邱骏 authored
364 365 366 367
        }).show();
      }

      // console.log(result);
邱骏 authored
368
    },
邱骏 authored
369 370 371 372 373 374 375 376
    reportYas(name, params) {
      this.$store.dispatch('reportYas', {
        params: {
          appop: name,
          param: params
        }
      });
    },
lea guo authored
377 378
    clearData() {
      // 清空数据状态
邱骏 authored
379
      // console.log(this.$router);
邱骏 authored
380 381
      this.platformFeeModalVisible = false;
      this.platformFee = {
382 383 384 385 386 387
        amount: '-¥0',
        appraiseFee: '¥0.00',
        packageFee: '¥0.00',
        serviceFee: '¥0.00',
        goodsPaymentRatePercent: '0.00%',
        payChannelPercentage: '0.00%'
邱骏 authored
388
      };
389 390 391 392
      this.bankTransferFee = '-¥0';
      this.income = '¥0';
      this.errorTip = '';
      this.chgPrice = '';
邱骏 authored
393
      this.calced = false;
394
      this.earnestMoney = '¥0';
邱骏 authored
395
      this.isAgree = false;
邱骏 authored
396 397 398
    },
    checkScroll(e) {
      if (e.currentTarget.scrollTop > 0) {
邱骏 authored
399
        this.isStopScrollPrevent = true;
邱骏 authored
400
      } else {
401
        e.stopPropagation();
邱骏 authored
402
        this.isStopScrollPrevent = false;
邱骏 authored
403
      }
邱骏 authored
404
    }
邱骏 authored
405 406 407 408
  }
};
</script>
邱骏 authored
409
<style lang='scss' scoped>
lea guo authored
410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432
.order-page {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  -webkit-font-smoothing: antialiased;

  .title {
    line-height: 82px;
    font-size: 68px;
    font-weight: bold;
    padding: 2px 40px 0 40px;
  }

  .product {
    margin: 20px auto;
    padding: 0 30px;
    height: 200px;
    display: flex;
邱骏 authored
433
lea guo authored
434 435
    .pro-img {
      width: 200px;
邱骏 authored
436
      height: 200px;
lea guo authored
437
      overflow: hidden;
邱骏 authored
438
      display: flex;
lea guo authored
439 440 441 442 443 444 445 446 447 448 449 450
      align-items: center;

      img {
        width: 100%;
        height: auto;
      }
    }

    .pro-info {
      padding: 64px 40px 0 40px;
      line-height: 32px;
      overflow: hidden;
邱骏 authored
451
lea guo authored
452 453 454
      .pro-name {
        font-size: 24px;
        color: #444;
邱骏 authored
455
        overflow: hidden;
lea guo authored
456 457 458
        white-space: nowrap;
        text-overflow: ellipsis;
      }
邱骏 authored
459
lea guo authored
460 461 462 463 464
      .stock-info {
        position: relative;
        color: #000;
        margin-top: 24px;
        font-size: 28px;
邱骏 authored
465 466
      }
lea guo authored
467 468 469 470 471 472 473 474
      .stock-text {
        text-indent: 128px;
        font-size: 28px;
        font-weight: 600;
        line-height: 44px;
      }
    }
  }
邱骏 authored
475
lea guo authored
476 477 478 479 480 481 482
  .input-container {
    position: relative;
    display: block;
    width: 690px;
    margin: 0 auto;
    overflow: hidden;
  }
邱骏 authored
483
lea guo authored
484 485 486 487 488 489 490
  .ipt-number {
    /deep/ .prepend {
      width: 40px;
      margin-left: 20px;
      text-align: left;
    }
  }
邱骏 authored
491
lea guo authored
492 493 494 495 496 497 498 499 500
  .earnest-container {
    width: 690px;
    margin: 10px auto;
    border-bottom: 1px solid #f0f0f0;

    p {
      display: inline-block;
      font-size: 28px;
      line-height: 60px;
邱骏 authored
501 502
    }
lea guo authored
503 504
    .earnest-money {
      color: #c94353;
邱骏 authored
505 506
    }
lea guo authored
507 508 509 510 511
    .desc {
      font-size: 24px;
      color: #999;
      line-height: 32px;
      padding-bottom: 30px;
邱骏 authored
512 513
    }
lea guo authored
514 515 516 517 518 519
    .icon-earnest {
      font-size: 28px;
      color: #999;
      margin-left: 20px;
    }
  }
邱骏 authored
520
lea guo authored
521 522 523 524 525
  .fee-container {
    width: 690px;
    margin: 40px auto 20px auto;
    overflow: hidden;
    border-bottom: 1px solid #f0f0f0;
邱骏 authored
526
lea guo authored
527 528 529 530 531
    .fee-line {
      margin-bottom: 20px;
      color: #999;
      font-size: 28px;
      display: flex;
邱骏 authored
532
lea guo authored
533 534
      .fee-title {
        width: 50%;
邱骏 authored
535
      }
邱骏 authored
536
lea guo authored
537 538 539
      .fee-price {
        width: 50%;
        text-align: right;
邱骏 authored
540
      }
邱骏 authored
541
lea guo authored
542 543
      &.total {
        margin-bottom: 40px;
邱骏 authored
544 545

        .fee-title {
lea guo authored
546
          color: #000;
邱骏 authored
547 548 549
        }

        .fee-price {
lea guo authored
550
          color: #c94353;
邱骏 authored
551
        }
lea guo authored
552
      }
邱骏 authored
553
lea guo authored
554 555
      .iconquestion {
        font-size: 28px;
邱骏 authored
556 557
      }
    }
lea guo authored
558
  }
邱骏 authored
559
lea guo authored
560 561 562 563 564
  .white-space {
    position: relative;
    width: 100%;
    height: 180px;
  }
邱骏 authored
565
lea guo authored
566 567 568 569 570 571 572 573 574 575 576 577 578
  .address-container {
    position: relative;
    width: 690px;
    margin: 40px auto 40px auto;
    overflow: hidden;

    .icon-container {
      position: absolute;
      width: 100px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
邱骏 authored
579
lea guo authored
580
      .iconfont {
邱骏 authored
581
        position: absolute;
lea guo authored
582 583 584
        font-size: 40px;
        font-weight: 500;
        color: #000;
邱骏 authored
585
      }
lea guo authored
586
    }
邱骏 authored
587
lea guo authored
588 589 590
    .address-info {
      overflow: hidden;
      padding: 0 0 20px 100px;
邱骏 authored
591
lea guo authored
592 593 594 595 596 597
      .user-name {
        font-size: 32px;
        font-weight: 500;
        line-height: 36px;
        margin-bottom: 10px;
      }
邱骏 authored
598
lea guo authored
599 600 601 602 603 604
      .user-address {
        font-size: 24px;
        color: #999;
        line-height: 30px;
        margin-bottom: 10px;
      }
邱骏 authored
605
lea guo authored
606 607 608 609
      .user-phone {
        font-size: 28px;
        font-weight: bold;
        line-height: 32px;
邱骏 authored
610 611 612
      }
    }
  }
lea guo authored
613
}
邱骏 authored
614
lea guo authored
615 616 617
/deep/ .modal-content {
  width: 570px;
}
邱骏 authored
618
lea guo authored
619 620
.fee-dialog-container {
  width: 100%;
邱骏 authored
621
lea guo authored
622 623 624 625 626
  .modal-title {
    line-height: 120px;
    text-align: center;
    font-size: 28px;
  }
邱骏 authored
627
lea guo authored
628 629 630 631 632
  .fee-line {
    margin-bottom: 20px;
    color: #000;
    font-size: 28px;
    display: flex;
邱骏 authored
633
lea guo authored
634 635 636
    .fee-title {
      width: 55%;
    }
邱骏 authored
637
lea guo authored
638 639 640
    .fee-price {
      width: 45%;
      text-align: right;
邱骏 authored
641 642
    }
  }
lea guo authored
643 644 645 646 647 648 649 650
}

.submit-container {
  width: 100%;
  height: 180px;
  position: fixed;
  bottom: 0;
  z-index: 9;
邱骏 authored
651
lea guo authored
652
  .agree-container {
邱骏 authored
653
    width: 100%;
lea guo authored
654 655
    border-top: 1px solid #f0f0f0;
    background-color: #fff;
邱骏 authored
656
lea guo authored
657 658 659 660 661
    a {
      display: inline-block;
      text-decoration: underline;
      color: #64ad88;
    }
邱骏 authored
662
lea guo authored
663 664 665
    .checkbox {
      display: inline-block;
    }
邱骏 authored
666
lea guo authored
667 668 669
    /deep/ .cube-checkbox-wrap {
      padding: 10px 0;
      color: #999;
邱骏 authored
670
lea guo authored
671 672
      .cube-checkbox-label {
        font-size: 0.6rem;
邱骏 authored
673 674 675
      }
    }
lea guo authored
676 677 678 679
    /deep/ .cube-checkbox_checked .cube-checkbox-ui i {
      color: #0c2b48;
    }
  }
邱骏 authored
680
lea guo authored
681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699
  .submit-button {
    position: relative;
    width: 100%;
    height: 100px;
    background-color: #fff;

    button {
      display: block;
      width: 670px;
      height: 88px;
      border-radius: 60px;
      margin: 0 auto;
      color: #fff;
      background-color: #ccc;
      border: none;
    }

    &.active button {
      background-color: #0c2b48;
邱骏 authored
700 701
    }
  }
lea guo authored
702
}
邱骏 authored
703
</style>