billHistoryDetail.vue 6.0 KB

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