Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

breach_contract_pay.vue 4.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. <template>
  2. <view class="content">
  3. <view @click="confirmPay()" class="ul-item">
  4. <image style="width: 100%; height: 146rpx;" :src="`${$imgUrl}issuance/equity-bg.png`"
  5. mode='scaleToFill'>
  6. </image>
  7. <view class="item-value">
  8. <view class="money">
  9. <text class='unit'>¥</text>
  10. <text>{{ state.deviceLogOutState.cancelAmount }}</text>
  11. </view>
  12. <view class="content">
  13. <view class="title">
  14. 违约金
  15. </view>
  16. </view>
  17. <view class="r-btn">支付</view>
  18. </view>
  19. </view>
  20. </view>
  21. </template>
  22. <script setup lang="ts">
  23. import { reactive, ref, computed } from "vue";
  24. import { onLoad } from "@dcloudio/uni-app";
  25. import { breachContractPaySearch, deviceLogOutStateQuery, breachContractPay, confirmBreachContract } from '@/utils/network/api.js'
  26. import { requestNew } from "@/utils/network/request.js";
  27. import { number } from "echarts";
  28. import { confirm } from '@/utils/utils'
  29. import { logOffConfirm } from './js/log-off.js'
  30. import { deviceStore } from '@/stores/device.js'
  31. const deviceStores = deviceStore()
  32. const state = reactive({
  33. orderNo: '',
  34. vehicleId: '',
  35. isConnectDevice: false, // 是否连接设备
  36. deviceLogOutState: {
  37. cancelAgeLimit: 0, // 注销年限
  38. cancelAmount: 0, // 注销违约金 单位:分
  39. isBlack: false, // 是否存在黑名单
  40. isCancel: false, // 是否需要支付违约金
  41. productName: "" // 产品名称
  42. },
  43. flag: true
  44. })
  45. onLoad(({orderNo, vehicleId, isConnectDevice}) => {
  46. if (orderNo) {
  47. state.orderNo = orderNo
  48. state.vehicleId = vehicleId
  49. state.isConnectDevice = isConnectDevice === '1'
  50. getDeviceLogOutStateQuery()
  51. }
  52. })
  53. const getDeviceLogOutStateQuery = () => {
  54. let option = {
  55. data: {
  56. vehicleId: state.vehicleId,
  57. cardId: deviceStores.deviceInfo.cardId,
  58. obuId: deviceStores.deviceInfo.obuId
  59. },
  60. method: "POST",
  61. showLoading: true,
  62. }
  63. requestNew(deviceLogOutStateQuery, option).then(res => {
  64. state.deviceLogOutState = res
  65. console.log(state.deviceLogOutState)
  66. })
  67. }
  68. const getPayInfo = () => {
  69. let option = {
  70. type: 2,
  71. data: {orderNo: state.orderNo},
  72. method: "POST",
  73. showLoading: true,
  74. }
  75. requestNew(breachContractPaySearch, option).then(res => {
  76. })
  77. }
  78. const confirmPay = () => {
  79. if (!state.flag) return false
  80. let option = {
  81. type: 2,
  82. data: {orderNo: state.orderNo},
  83. method: "POST",
  84. showLoading: true,
  85. }
  86. state.flag = false
  87. requestNew(breachContractPay, option).then(res => {
  88. const data = res;
  89. uni.requestPayment({
  90. provider: "wxpay",
  91. orderInfo: "",
  92. timeStamp: data.timeStamp,
  93. nonceStr: data.nonceStr,
  94. package: data.wxPackage ? data.wxPackage : "",
  95. signType: data.signType,
  96. paySign: data.paySign,
  97. success: (e) => {
  98. console.log("支付成功", res);
  99. let params = {
  100. cardExpireTime: deviceStores.deviceInfo.cardExpireTime,
  101. hasDevice: '',
  102. obuExpireTime: deviceStores.deviceInfo.obuExpireTime,
  103. orderNo: state.orderNo
  104. }
  105. logOffConfirm(params)
  106. },
  107. fail: function (err) {
  108. confirm(err, () => { }, "支付失败", false);
  109. },
  110. });
  111. state.flag = true
  112. }).catch(() => {
  113. state.flag = true
  114. })
  115. }
  116. const confirmLogOut = () => {
  117. }
  118. </script>
  119. <style lang="scss" scoped>
  120. .content{
  121. padding: 32rpx;
  122. }
  123. .ul-item {
  124. display: flex;
  125. align-items: center;
  126. &:nth-child(n+2) {
  127. margin-top: 30rpx;
  128. }
  129. .item-value {
  130. padding: 20rpx;
  131. position: absolute;
  132. display: flex;
  133. align-items: center;
  134. width: 81%;
  135. box-sizing: border-box;
  136. height: 146rpx;
  137. .money {
  138. color: #fff;
  139. font-size: 46rpx;
  140. font-family: SourceHanSansCN, SourceHanSansCN;
  141. font-weight: 400;
  142. flex: 1;
  143. .unit {
  144. font-size: 29rpx;
  145. margin-right: 2rpx;
  146. }
  147. }
  148. .content {
  149. margin-left: 60rpx;
  150. flex: 2;
  151. .title {
  152. font-weight: 400;
  153. font-family: SourceHanSansCN, SourceHanSansCN;
  154. font-size: 36rpx;
  155. color: #2C3246;
  156. }
  157. }
  158. .r-btn {
  159. width: 139rpx;
  160. height: 65rpx;
  161. background: radial-gradient(at 0% 0%, #C6B077 0%, #DFCC96 100%);
  162. border-radius: 33rpx;
  163. font-family: SourceHanSansCN, SourceHanSansCN;
  164. font-weight: 400;
  165. font-size: 26rpx;
  166. color: #FFFFFF;
  167. line-height: 65rpx;
  168. text-align: center;
  169. flex: 1;
  170. }
  171. }
  172. .icon-tip {
  173. width: 100rpx;
  174. height: 100rpx;
  175. }
  176. }
  177. </style>