billHistoryDetail.vue 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329
  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 align_center" v-if="billInfo.billStatus == 'UNSETTLE'">
  55. <navigator style="flex:1;" :url="'/pages/sales/billHistoryEdit?billId=' + verifySn" hover-class="none">
  56. <view style="color:#00aaff;">编辑</view>
  57. </navigator>
  58. <view class="flex" style="width: 78%;">
  59. <u-button type="warning" shape="circle" @click="openPaymentModal">确认收款</u-button>
  60. <u-button type="primary" shape="circle" :loading="btnLoading" @click="submitOrder" :custom-style="customStyle">再次发送对账单</u-button>
  61. </view>
  62. </view>
  63. <view class="footer" v-else>
  64. <u-button type="primary" shape="circle" :loading="btnLoading" @click="submitOrder" :custom-style="customStyle">再次发送对账单</u-button>
  65. </view>
  66. <!-- 确认收款弹窗 -->
  67. <u-popup v-model="showPayment" mode="center" :border-radius="20" width="82%">
  68. <view class="slot-content">
  69. <view style="padding:50rpx 40rpx 20rpx;">
  70. <u-form :model="form" ref="uForm" :label-width="150" :rules="rules" :label-style="{color:'#999'}">
  71. <u-form-item :border-bottom ="false" label="总单数:" prop="num">23</u-form-item>
  72. <u-form-item :border-bottom ="false" label="结算方式:" prop="settleType">
  73. <u-input type="text" placeholder="请选择结算方式" :disabled="true" :height="60" v-model="form.settleType" @click="settleShow = true"/>
  74. <u-icon :name="settleShow?'arrow-right':'arrow-down'" color="#e0e0e0" size="26"></u-icon>
  75. </u-form-item>
  76. <u-form-item :border-bottom ="false" label="待收金额:" prop="num">¥23</u-form-item>
  77. <u-form-item :border-bottom ="false" label="折让金额:" prop="money"><u-input type="number" placeholder="请输入实际收款金额(最多2位小数)" :border="true" :height="60" v-model="form.money"/></u-form-item>
  78. </u-form>
  79. </view>
  80. <view class="costText">折让后金额</view>
  81. <view class="costText1">¥520</view>
  82. <view class="paymentFooter flex algin-center">
  83. <view @click="showPayment = false">取消</view>
  84. <view @click="handlePay">确定</view>
  85. </view>
  86. </view>
  87. </u-popup>
  88. <u-select v-model="settleShow" :list="settleList" @confirm="confirmSettle"></u-select>
  89. <!-- 分享询问弹窗 -->
  90. <u-modal v-model="shareShow" :show-cancel-button="true" :content="shareContent" @confirm="handleShare" @cancel="shareShow = false;btnLoading = false;"></u-modal>
  91. </view>
  92. </template>
  93. <script>
  94. import billList from './billListComponent.vue';
  95. import { findBySn, insert } from '@/api/verify.js';
  96. import getDate from '@/libs/getDate.js';
  97. import { toThousands } from '@/libs/tools.js'
  98. export default {
  99. components: { billList },
  100. data() {
  101. return {
  102. customStyle: {
  103. backgroundColor: this.$config('primaryColor'),
  104. color: '#fff'
  105. },
  106. verifySn: '',
  107. billInfo: null,
  108. billArr: [],
  109. timeInfo: '',
  110. btnLoading: false,
  111. shareShow: false,
  112. isShowEdit:false,//编辑
  113. settleShow:false,//结算方式
  114. shareContent: `是否同意发送对账单给微信好友?`,
  115. toThousands,
  116. showPayment:false,
  117. form:{
  118. money:'',
  119. settleType:''
  120. },
  121. settleList:[
  122. {
  123. value: '1',
  124. label: '江'
  125. },
  126. {
  127. value: '2',
  128. label: '湖'
  129. }
  130. ],
  131. rules: {
  132. money: [
  133. {
  134. required: true,
  135. message: '请输入实际收款金额',
  136. trigger: ['change','blur'],
  137. }
  138. ]
  139. }
  140. };
  141. },
  142. onReady() {
  143. uni.setNavigationBarColor({
  144. frontColor: '#ffffff',
  145. backgroundColor: this.$config('primaryColor')
  146. });
  147. },
  148. onLoad(options) {
  149. if (options && options.billId) {
  150. this.verifySn = options.billId;
  151. this.loadData({ verifySn: options.billId });
  152. }
  153. },
  154. computed: {
  155. //经销商信息
  156. userData() {
  157. return this.$store.state.vuex_userData;
  158. }
  159. },
  160. methods: {
  161. loadData(ajaxData) {
  162. let that = this;
  163. findBySn(ajaxData).then(res => {
  164. if (res.status == 200) {
  165. that.billInfo = res.data;
  166. that.billArr = res.data.detailList;
  167. let timeobj = getDate.editDay(res.data.bizBeginDate, res.data.bizEndDate);
  168. that.timeInfo = timeobj.starttime + '~' + timeobj.endtime;
  169. that.$nextTick(() => {
  170. that.$refs.billBox.setData(res.data.detailList);
  171. });
  172. }
  173. });
  174. },
  175. // 打开确认收款弹窗
  176. openPaymentModal(){
  177. this.showPayment = true
  178. this.$nextTick(()=>{
  179. this.$refs.uForm.setRules(this.rules);
  180. })
  181. },
  182. //结算方式
  183. confirmSettle(e){
  184. this.form.settleType = e[0].label
  185. },
  186. submitOrder() {
  187. //发送对账单
  188. this.shareShow = true;
  189. },
  190. //确认收款
  191. handlePay(){
  192. this.$refs.uForm.validate(valid => {
  193. if (valid) {
  194. console.log('验证通过');
  195. } else {
  196. console.log('验证失败');
  197. }
  198. });
  199. },
  200. // 分享图文
  201. handleShare() {
  202. let jumpUrl = getApp().globalData.baseUrl.replace('qpls-md/','')
  203. let url = jumpUrl+'dzd/index.html?' + this.userData.orgSn + '&' + this.verifySn;
  204. if (uni.getSystemInfoSync().platform == 'ios') {
  205. uni.share({
  206. provider: 'weixin',
  207. scene: 'WXSceneSession',
  208. type: 0,
  209. href: url,
  210. title: this.billInfo.customer.customerName + '的对账单',
  211. summary: '共' + this.billInfo.settleAmount + '元,请您查阅',
  212. imageUrl: '../../static/logo.png',
  213. success: function(res) {
  214. console.log('success:' + JSON.stringify(res));
  215. },
  216. fail: function(err) {
  217. console.log('fail:' + JSON.stringify(err));
  218. }
  219. });
  220. } else {
  221. uni.shareWithSystem({
  222. summary: this.billInfo.customer.customerName + '您好,您有一个对账单共' + this.billInfo.settleAmount + '元,请您查阅',
  223. href: url,
  224. success() {
  225. console.log('调取微信列表成功,分享不一定成功');
  226. },
  227. fail() {
  228. console.log('分享失败');
  229. }
  230. });
  231. }
  232. }
  233. }
  234. };
  235. </script>
  236. <style lang="scss" scoped>
  237. .content {
  238. height: 100vh;
  239. width: 100%;
  240. box-sizing: border-box;
  241. .b_head {
  242. background-color: #fff;
  243. .head_list {
  244. padding: 14rpx 20rpx;
  245. border-bottom: 1rpx solid #f8f8f8;
  246. text {
  247. &:first-child {
  248. color: $uni-text-color-grey;
  249. display: inline-block;
  250. width: 160rpx;
  251. }
  252. }
  253. }
  254. }
  255. .b_detail {
  256. margin: 6rpx 0;
  257. background-color: #fff;
  258. padding: 20rpx;
  259. box-sizing: border-box;
  260. .detail_list {
  261. margin-bottom: 10rpx;
  262. &:last-child {
  263. margin-bottom: 0rpx;
  264. }
  265. .detail_box::after {
  266. content: ';';
  267. color: $uni-text-color-grey;
  268. }
  269. .detail_box {
  270. text {
  271. &:first-child {
  272. color: $uni-text-color-grey;
  273. }
  274. &:last-child {
  275. color: $uni-color-warning;
  276. font-weight: 600;
  277. }
  278. }
  279. }
  280. }
  281. }
  282. .detail_con {
  283. flex-grow: 1;
  284. overflow: auto;
  285. background-color: #fff;
  286. }
  287. .footer {
  288. width: 100%;
  289. box-sizing: border-box;
  290. padding: 10rpx 20rpx;
  291. background: #fff;
  292. }
  293. }
  294. // 确认收款弹窗
  295. .slot-content{
  296. .u-form-item{
  297. line-height:0 !important;
  298. }
  299. .paymentFooter{
  300. border-top:1rpx solid #eee;
  301. view{
  302. width: 50%;
  303. text-align:center;
  304. padding:26rpx 0;
  305. }
  306. }
  307. .paymentFooter view:last-child{
  308. color:#007aff;
  309. border-left:1rpx solid #eee;
  310. }
  311. .costText {
  312. text-align: center;
  313. color: $uni-text-color-grey;
  314. font-size: 22rpx;
  315. }
  316. .costText1 {
  317. text-align: center;
  318. font-weight: bold;
  319. color: $uni-color-error;
  320. font-size: 36rpx;
  321. line-height: 60rpx;
  322. padding-bottom: 30rpx;
  323. }
  324. }
  325. </style>