freight.vue 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <template name="freight">
  2. <view class="freight-template">
  3. <!-- 运费信息 -->
  4. <view class="invoice-freight">
  5. <view class="freight-left">
  6. 运费<text class="iconfont icon-yunfeishuoming" @click="showTip"></text>
  7. </view>
  8. <view class="freight-right">
  9. <text>{{freightText}}</text>
  10. </view>
  11. </view>
  12. </view>
  13. </template>
  14. <script>
  15. export default{
  16. name:"freight",
  17. props:{
  18. freightData:{
  19. type:Object
  20. }
  21. },
  22. data() {
  23. return{
  24. freightText:'',
  25. }
  26. },
  27. created(){
  28. this.initData(this.freightData)
  29. },
  30. computed: {
  31. },
  32. methods:{
  33. initData(res) {
  34. switch(res.freePostFlag){
  35. case 0:
  36. this.freightText = '包邮';break
  37. case 1:
  38. this.freightText = res.freePostFlag;break
  39. case -1:
  40. this.freightText = '到付';break
  41. }
  42. },
  43. showTip(){
  44. this.$emit('showFreightAlert');
  45. },
  46. }
  47. }
  48. </script>
  49. <style lang="scss">
  50. .freight-template{
  51. width: 100%;
  52. height: auto;
  53. background: #FFFFFF;
  54. float: left;
  55. margin-top: 24rpx;
  56. .invoice-freight{
  57. width: 702rpx;
  58. padding: 0 24rpx;
  59. height: 86rpx;
  60. line-height: 86rpx;
  61. font-size: $font-size-28;
  62. color: $text-color;
  63. background: #FFFFFF;
  64. float: left;
  65. font-weight: bold;
  66. .freight-left{
  67. float: left;
  68. .icon-yunfeishuoming{
  69. height: 100%;
  70. padding:15rpx;
  71. color: $color-system;
  72. font-weight: normal;
  73. }
  74. }
  75. .freight-right{
  76. float: right;
  77. color: #2A81FF;
  78. }
  79. }
  80. }
  81. </style>