orderInformation.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. <template name="information">
  2. <view class="information-template">
  3. <!-- 订单信息 -->
  4. <view class="information-content">
  5. <view class="information-view num">
  6. <view class="view-num ord">订单编号:{{orderData.orderNo =='undefined' ? '' : orderData.orderNo}}</view>
  7. <view class="view-type bold">{{typeText}}</view>
  8. </view>
  9. <view class="information-view">
  10. <view class="view-num bold">
  11. 订单标识:{{orderData.orderMark =='undefined' ? '' : orderData.orderMark}}
  12. <text class="clipboard" @click="clipboard(orderData.orderMark)">复制</text>
  13. </view>
  14. </view>
  15. <view class="information-view">
  16. <view class="view-num">订单总额:¥{{payTotalFee =='undefined' ? '' : payTotalFee}}</view>
  17. <view class="view-man">余额抵扣:¥{{balancePayFee =='undefined' ? '' : balancePayFee}}</view>
  18. </view>
  19. <view class="information-view">
  20. <view class="view-num" v-if="freePostFlag == '0'">运费:包邮</view>
  21. <view class="view-num" v-if="freePostFlag == '-1'">运费:到付</view>
  22. <view class="view-num" v-if="freePostFlag == '1'">运费:¥{{freight}}</view>
  23. <view class="view-man">经理折扣:¥{{discountFee =='undefined' ? '' : discountFee}}</view>
  24. </view>
  25. <view class="information-view">
  26. <view class="view-num">税费:¥{{expensesOfTaxation == null ? '0.00' : expensesOfTaxation}}</view>
  27. <view class="view-man bold">应付总额:<text class="red">¥{{payableAmount =='undefined' ? '0.00' : payableAmount}}</text></view>
  28. </view>
  29. <view class="information-view">
  30. <view class="view-num">已支付:¥{{receiptAmount == null ? '0.00' : receiptAmount}}</view>
  31. <view class="view-man bold">待付金额:<text class="red">¥{{pendingPayments =='undefined' ? '0.00' : pendingPayments}}</text></view>
  32. </view>
  33. <view class="information-view">
  34. <view class="view-num time">下单时间:{{orderData.orderTime =='undefined' ? '' : orderData.orderTime}}</view>
  35. </view>
  36. </view>
  37. </view>
  38. </template>
  39. <script>
  40. const thorui = require("@/components/clipboard/clipboard.thorui.js")
  41. export default{
  42. name:"information",
  43. props:{
  44. information:{
  45. type:Object
  46. }
  47. },
  48. data() {
  49. return{
  50. orderData:'',
  51. payTotalFee:'',
  52. balancePayFee:'',
  53. freight:'',
  54. discountFee:'',
  55. freePostFlag:'',
  56. payableAmount:'',
  57. pendingPayments:'',
  58. receiptAmount:'',
  59. typeText:'',
  60. expensesOfTaxation:'',
  61. typeTextObject:{
  62. 0:'待确认',
  63. 4:'交易完成',
  64. 5:'订单完成',
  65. 6:'已关闭',
  66. 7:'交易全退',
  67. 77:'交易全退',
  68. 11:'待付款待发货',
  69. 12:'待付款部分发货',
  70. 13:'待付款已发货',
  71. 21:'部分付款待发货',
  72. 22:'部分付款部分发货',
  73. 23:'部分付款已发货',
  74. 31:'已付款待发货',
  75. 32:'已付款部分发货',
  76. 33:'已付款已发货',
  77. 111:'待付款待发货',
  78. }
  79. }
  80. },
  81. created(){
  82. this.initData(this.information)
  83. },
  84. computed: {
  85. },
  86. watch:{
  87. information:{
  88. handler:function(val){
  89. this.initData(val)
  90. },
  91. deep:true//对象内部的属性监听,也叫深度监听
  92. }
  93. },
  94. methods:{
  95. initData(res) {
  96. this.orderData = res;
  97. this.payTotalFee =this.toFiexdFn(res.payTotalFee); //订单总额
  98. this.payableAmount =this.toFiexdFn(res.payableAmount); //应付总额
  99. this.balancePayFee = this.toFiexdFn(res.balancePayFee);
  100. this.discountFee = this.toFiexdFn(res.discountFee);
  101. this.pendingPayments = this.toFiexdFn(res.pendingPayments);
  102. this.receiptAmount = this.toFiexdFn(res.receiptAmount);
  103. this.freePostFlag = res.freePostFlag;
  104. this.freight = this.toFiexdFn(res.freight);
  105. this.expensesOfTaxation = this.toFiexdFn(res.expensesOfTaxation);
  106. Object.keys(this.typeTextObject).forEach(key => {
  107. if(key == res.status){
  108. this.typeText = this.typeTextObject[key]
  109. }
  110. })
  111. },
  112. clipboard(data) {
  113. thorui.getClipboardData(data, (res) => {
  114. // #ifdef H5
  115. if (res) {
  116. this.$util.msg("复制成功",2000);
  117. } else {
  118. this.$util.msg("复制失败",2000);
  119. }
  120. // #endif
  121. })
  122. },
  123. toFiexdFn(n){
  124. let num
  125. if(n==null){
  126. num='0.00'
  127. }else{
  128. num = n.toFixed(2)
  129. }
  130. return num
  131. }
  132. }
  133. }
  134. </script>
  135. <style lang="scss">
  136. .information-template{
  137. width: 100%;
  138. height: auto;
  139. background: #FFFFFF;
  140. float: left;
  141. margin-top: 24rpx;
  142. .information-content{
  143. width: 702rpx;
  144. padding: 20rpx 24rpx;
  145. .information-view{
  146. height: 50rpx;
  147. line-height: 50rpx;
  148. font-size: $font-size-28;
  149. color: $text-color;
  150. margin: 4rpx 0;
  151. display: flex;
  152. view{
  153. flex: 1;
  154. color: $text-color;
  155. text-align: left;
  156. }
  157. .view-num.ord{
  158. color: $color-system;
  159. text-align: left;
  160. flex:3;
  161. font-weight: bold;
  162. }
  163. .view-num.time{
  164. color: #999999;
  165. }
  166. .bold{
  167. font-weight: bold;
  168. }
  169. .red{
  170. color: #FF2A2A;
  171. }
  172. .view-type{
  173. float: right;
  174. text-align: right;
  175. color: #FF2A2A;
  176. flex: 2;
  177. }
  178. .clipboard{
  179. width: 84rpx;
  180. height: 36rpx;
  181. background: linear-gradient(34deg,rgba(255,41,41,1) 0%,rgba(255,109,27,1) 100%);
  182. text-align: center;
  183. font-size: $font-size-24;
  184. color: #FFFFFF;
  185. border-radius: 6rpx;
  186. line-height: 36rpx;
  187. display: inline-block;
  188. margin-left: 42rpx;
  189. }
  190. }
  191. }
  192. }
  193. </style>