billHistoryDetail.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. <template>
  2. <view class="content flex flex_column" v-if="billInfo">
  3. <view class="b_head">
  4. <view class="head_list">
  5. <text>分享时间</text>
  6. <text>{{ billInfo.createDate }}</text>
  7. </view>
  8. <view class="head_list" v-if="billArr.customer">
  9. <text>客户名称</text>
  10. <text>{{ billInfo.customer.customerName }}</text>
  11. </view>
  12. <view class="head_list">
  13. <text>对账周期</text>
  14. <text>{{ timeInfo || '--' }}</text>
  15. </view>
  16. <view class="head_list">
  17. <text>付款状态</text>
  18. <text>{{ billInfo.billStatus != 'UNSETTLE' ? '未付款' : billInfo.settleStyleSnDictValue ? '已付款(' + billInfo.settleStyleSnDictValue + ')' : '已付款' }}</text>
  19. </view>
  20. </view>
  21. <view class="b_detail">
  22. <view class="detail_list u-flex">
  23. <view class="detail_box">
  24. <text>总单数:</text>
  25. <text>{{ billInfo.detailNum }}</text>
  26. </view>
  27. <view class="detail_box">
  28. <text>待收金额合计:</text>
  29. <text>{{ billInfo.totalAmount }}</text>
  30. </view>
  31. </view>
  32. <view class="detail_list u-flex">
  33. <view class="detail_box">
  34. <text>折让金额:</text>
  35. <text>{{ billInfo.discountAmount }}</text>
  36. </view>
  37. <view class="detail_box">
  38. <text>折让后待收金额:</text>
  39. <text>{{ billInfo.settleAmount }}</text>
  40. </view>
  41. </view>
  42. </view>
  43. <view class="detail_con"><billList ref="billBox" :list="billArr"></billList></view>
  44. <view class="footer" v-if="billInfo.billStatus != 'UNSETTLE'">
  45. <u-button type="primary" :loading="btnLoading" @click="submitOrder" :custom-style="customStyle" shape="circle">再次发送对账单</u-button>
  46. </view>
  47. <!-- 分享询问弹窗 -->
  48. <u-modal v-model="shareShow" :content="shareContent" @confirm="handleShare" @cancel="shareShow = false"></u-modal>
  49. </view>
  50. </template>
  51. <script>
  52. import billList from './billListComponent.vue';
  53. import { findBySn, insert } from '@/api/verify.js';
  54. import getDate from '@/libs/getDate.js';
  55. export default {
  56. components: { billList },
  57. data() {
  58. return {
  59. customStyle: {
  60. backgroundColor: this.$config('primaryColor'),
  61. color: '#fff',
  62. verifySn: ''
  63. },
  64. billInfo: null,
  65. billArr: [],
  66. timeInfo: '',
  67. btnLoading: false,
  68. shareShow: false
  69. };
  70. },
  71. onReady() {
  72. uni.setNavigationBarColor({
  73. frontColor: '#ffffff',
  74. backgroundColor: this.$config('primaryColor')
  75. });
  76. },
  77. onLoad(options) {
  78. if (options && options.billId) {
  79. this.verifySn = options.billId;
  80. this.loadData({ verifySn: options.billId });
  81. }
  82. },
  83. computed: {
  84. //经销商信息
  85. userData() {
  86. return this.$store.state.vuex_userData;
  87. }
  88. },
  89. methods: {
  90. loadData(ajaxData) {
  91. let that = this;
  92. findBySn(ajaxData).then(res => {
  93. if (res.status == 200) {
  94. that.billInfo = res.data;
  95. that.billArr = res.data.detailList;
  96. let timeobj = getDate.editDay(res.data.bizBeginDate, res.data.bizEndDate);
  97. that.timeInfo = timeobj.starttime + '~' + timeobj.endtime;
  98. that.$nextTick(() => {
  99. that.$refs.billBox.setData(res.data.detailList);
  100. });
  101. }
  102. });
  103. },
  104. submitOrder() {
  105. //发送对账单
  106. this.shareShow = true;
  107. },
  108. // 分享图文
  109. handleShare() {
  110. let url = 'http://p.iscm.360arrow.com/dzd/index.html?userSn=' + this.userData.orgSn + '&verifySn=' + this.verifySn + '&name=' + this.userData.orgName;
  111. if (uni.getSystemInfoSync().platform == 'ios') {
  112. uni.share({
  113. provider: 'weixin',
  114. scene: 'WXSceneSession',
  115. type: 0,
  116. href: url,
  117. title: this.billInfo.customer.customerName,
  118. summary: '共' + this.billInfo.settleAmount + '元,请您查阅',
  119. imageUrl: '../../static/logo.png',
  120. success: function(res) {
  121. console.log('success:' + JSON.stringify(res));
  122. },
  123. fail: function(err) {
  124. console.log('fail:' + JSON.stringify(err));
  125. }
  126. });
  127. } else {
  128. uni.shareWithSystem({
  129. summary: this.billInfo.customer.customerName + '您好,您有一个对账单共' + this.billInfo.settleAmount + '元,请您查阅',
  130. href: url,
  131. success() {
  132. console.log('调取微信列表成功,分享不一定成功');
  133. },
  134. fail() {
  135. console.log('分享失败');
  136. }
  137. });
  138. }
  139. }
  140. }
  141. };
  142. </script>
  143. <style lang="scss" scoped>
  144. .content {
  145. height: 100vh;
  146. width: 100%;
  147. .b_head {
  148. background-color: #fff;
  149. .head_list {
  150. padding: 14rpx 20rpx;
  151. border-bottom: 1rpx solid #f8f8f8;
  152. text {
  153. &:first-child {
  154. color: $uni-text-color-grey;
  155. display: inline-block;
  156. width: 160rpx;
  157. }
  158. }
  159. }
  160. }
  161. .b_detail {
  162. margin: 6rpx 0;
  163. background-color: #fff;
  164. padding: 20rpx;
  165. box-sizing: border-box;
  166. .detail_list {
  167. margin-bottom: 10rpx;
  168. &:last-child {
  169. margin-bottom: 0rpx;
  170. }
  171. .detail_box::after {
  172. content: ';';
  173. color: $uni-text-color-grey;
  174. }
  175. .detail_box {
  176. text {
  177. &:first-child {
  178. color: $uni-text-color-grey;
  179. }
  180. &:last-child {
  181. color: $uni-color-warning;
  182. font-weight: 600;
  183. }
  184. }
  185. }
  186. }
  187. }
  188. .detail_con {
  189. flex-grow: 1;
  190. overflow: auto;
  191. background-color: #fff;
  192. }
  193. .footer {
  194. padding: 10rpx 20rpx;
  195. background: #fff;
  196. margin-top: 20rpx;
  197. }
  198. }
  199. </style>