index.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. <template>
  2. <view class="container p-bottom">
  3. <!-- 清单列表 -->
  4. <view class="m-top20">
  5. <view v-for="(item, index) in storeRule" :key="index" class="checkout_list">
  6. <view class="flow-shopList dis-flex">
  7. <view class="flow-list-right flex-box">
  8. <text class="goods-name twolist-hidden">预存¥{{ item.store }} 到账 ¥{{ item.upStore }}</text>
  9. <view class="flow-list-cont dis-flex flex-x-between flex-y-center">
  10. <text class="small">X{{ item.num }} </text>
  11. <text class="flow-cont">¥{{ item.amount.toFixed(2) }}</text>
  12. </view>
  13. </view>
  14. </view>
  15. </view>
  16. <view class="flow-num-box b-f">
  17. <text>共{{ totalNum }}张,合计:</text>
  18. <text class="flow-money col-m">¥{{ totalAmount.toFixed(2) }}</text>
  19. </view>
  20. </view>
  21. <!-- 支付方式 -->
  22. <view class="pay-method flow-all-money b-f m-top20">
  23. <view class="flow-all-list dis-flex">
  24. <text class="flex-five">支付方式</text>
  25. </view>
  26. <!-- 微信支付 -->
  27. <view class="pay-item dis-flex flex-x-between" @click="handleSelectPayType(PayTypeEnum.WECHAT.value)">
  28. <view class="item-left dis-flex flex-y-center">
  29. <view class="item-left_icon wechat">
  30. <text class="iconfont icon-weixinzhifu"></text>
  31. </view>
  32. <view class="item-left_text">
  33. <text>{{ PayTypeEnum.WECHAT.name }}</text>
  34. </view>
  35. </view>
  36. <view class="item-right col-m" v-if="curPayType == PayTypeEnum.WECHAT.value">
  37. <text class="iconfont icon-duihao"></text>
  38. </view>
  39. </view>
  40. </view>
  41. <!-- 买家留言 -->
  42. <view class="flow-all-money b-f m-top20">
  43. <view class="ipt-wrapper">
  44. <textarea v-model="remark" rows="3" maxlength=100 placeholder="买家留言 (选填,100字以内)" type="text"></textarea>
  45. </view>
  46. </view>
  47. <!-- 提交订单 -->
  48. <view class="flow-fixed-footer b-f m-top10">
  49. <view class="dis-flex chackout-box">
  50. <view class="chackout-left pl-12">
  51. <view class="col-amount-do">应付金额:¥{{ totalAmount.toFixed(2) }}</view>
  52. <view class="col-amount-view">实得金额:¥{{ getTotalAmount.toFixed(2) }}</view>
  53. </view>
  54. <view class="chackout-right" @click="onSubmitOrder()">
  55. <view class="flow-btn f-32" :class="{ disabled }">提交订单</view>
  56. </view>
  57. </view>
  58. </view>
  59. </view>
  60. </template>
  61. <script>
  62. import * as Verify from '@/utils/verify'
  63. import * as CouponApi from '@/api/coupon'
  64. import * as SettlementApi from '@/api/settlement'
  65. import PayTypeEnum from '@/common/enum/order/PayType'
  66. import { wxPayment } from '@/utils/app'
  67. export default {
  68. data() {
  69. return {
  70. // 枚举类
  71. PayTypeEnum,
  72. // 当前页面参数
  73. options: {},
  74. // 当前选中的支付方式
  75. curPayType: PayTypeEnum.WECHAT.value,
  76. // 买家留言
  77. remark: '',
  78. // 禁用submit按钮
  79. disabled: false,
  80. // 按钮禁用
  81. disabled: false,
  82. couponId: 0,
  83. selectNum: "",
  84. storeRule: [],
  85. totalAmount: 0,
  86. getTotalAmount: 0,
  87. totalNum: 0
  88. }
  89. },
  90. /**
  91. * 生命周期函数--监听页面加载
  92. */
  93. onLoad(options) {
  94. this.options = options
  95. this.couponId = options.couponId
  96. this.selectNum = options.selectNum
  97. },
  98. /**
  99. * 生命周期函数--监听页面显示
  100. */
  101. onShow() {
  102. // 获取当前订单信息
  103. this.getCouponDetail()
  104. },
  105. methods: {
  106. // 获取卡券信息
  107. getCouponDetail() {
  108. const app = this
  109. return new Promise((resolve, reject) => {
  110. CouponApi.detail(app.couponId)
  111. .then(result => {
  112. app.initData()
  113. app.couponInfo = result.data
  114. let ruleItem = app.couponInfo.inRule.split(",")
  115. let selected = app.selectNum.split(",")
  116. ruleItem.forEach(function(item, index) {
  117. let rule = item.split("_")
  118. let num = selected[index]
  119. let amount = parseFloat(rule[0]) * num
  120. app.totalAmount += parseFloat(amount)
  121. app.getTotalAmount += parseFloat(rule[1] * num)
  122. app.totalNum += parseInt(num)
  123. if (num > 0) {
  124. app.storeRule.push({"store": parseFloat(rule[0]), "num": parseInt(num), "amount": parseFloat(amount), "upStore": parseFloat(rule[1])})
  125. }
  126. })
  127. resolve(result)
  128. })
  129. .catch(err => reject(err))
  130. })
  131. },
  132. initData() {
  133. this.storeRule = [],
  134. this.totalAmount = 0,
  135. this.getTotalAmount = 0,
  136. this.totalNum = 0
  137. },
  138. // 选择支付方式
  139. handleSelectPayType(value) {
  140. this.curPayType = value
  141. },
  142. // 订单提交
  143. onSubmitOrder() {
  144. const app = this
  145. if (app.disabled) {
  146. app.$toast('请勿重复提交订单哦');
  147. return false
  148. }
  149. // 表单验证
  150. if (!app.onVerifyFrom()) {
  151. return false
  152. }
  153. // 按钮禁用
  154. app.disabled = true
  155. // 请求api
  156. SettlementApi.submit(app.couponId, app.selectNum, "prestore", app.remark, 0, 0, 0, "", 0, 0, 0, "", "JSAPI")
  157. .then(result => app.onSubmitCallback(result))
  158. .catch(err => {
  159. if (err.result) {
  160. const errData = err.result.data
  161. if (errData.isCreated) {
  162. app.navToMyOrder(errData.orderInfo.id)
  163. return false
  164. }
  165. }
  166. app.disabled = false
  167. })
  168. },
  169. // 订单提交成功后回调
  170. onSubmitCallback(result) {
  171. const app = this
  172. // 发起微信支付
  173. if (result.data.payType == PayTypeEnum.WECHAT.value) {
  174. wxPayment(result.data.payment)
  175. .then(() => app.$success('支付成功'))
  176. .catch(err => app.$error('支付失败'))
  177. .finally(() => {
  178. app.disabled = false
  179. app.navToMyOrder(result.data.orderInfo.id)
  180. })
  181. }
  182. // 余额支付
  183. if (result.data.payType == PayTypeEnum.BALANCE.value) {
  184. app.$success('支付成功')
  185. app.disabled = false
  186. app.navToMyOrder(result.data.orderInfo.id)
  187. }
  188. },
  189. // 跳转到我的订单(等待1秒)
  190. navToMyOrder(orderId) {
  191. setTimeout(() => {
  192. this.$navTo('pages/order/detail?orderId='+orderId)
  193. }, 1000)
  194. },
  195. // 表单验证
  196. onVerifyFrom() {
  197. const app = this
  198. if (app.hasError) {
  199. app.$toast(app.errorMsg)
  200. return false
  201. }
  202. return true
  203. },
  204. }
  205. }
  206. </script>
  207. <style lang="scss" scoped>
  208. @import "./style.scss";
  209. </style>