FitPackageForm.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. <template>
  2. <view class="com-renew-form">
  3. <view class="renew-form">
  4. <view class="renew-top">
  5. <view class="renew-top-name">
  6. 套餐订购
  7. </view>
  8. </view>
  9. <view class="renew-tips">
  10. <view class="text">您当前要订购的是<text class="txt">{{courseInfo.name}}</text>套餐:</view>
  11. </view>
  12. <view class="renew-list">
  13. <view class="list-items">
  14. <block v-for="(it,index) in packageList">
  15. <view class="item " :class="activeIndex==index?'actived':''" @click="onPickLeve(index)">
  16. <view class="tips">{{it.name}}</view>
  17. <view class="item-img">
  18. <image :src="it.icon" class="package-img"></image>
  19. </view>
  20. <view class="item-price">
  21. <view class="price">
  22. <text class="sign">¥</text>{{it.salePrice}}
  23. </view>
  24. </view>
  25. <view class="active" v-if="activeIndex==index">
  26. <uni-icons type="checkbox-filled" size="30"></uni-icons>
  27. </view>
  28. </view>
  29. </block>
  30. </view>
  31. </view>
  32. <view class="renew-btns">
  33. <button class="btn-pay" @click="onBuyOrder">立即支付</button>
  34. </view>
  35. </view>
  36. <view class="letter"></view>
  37. </view>
  38. </template>
  39. <script>
  40. import {
  41. mapState,
  42. mapMutations
  43. } from 'vuex'
  44. export default {
  45. name: "RenewForm",
  46. emits:['onCloseRenew'],
  47. props: {
  48. packageList: {
  49. type: Array,
  50. default: () => {
  51. return [];
  52. }
  53. },
  54. courseInfo:{
  55. type:Object,
  56. default:()=>{
  57. return null;
  58. }
  59. },
  60. },
  61. watch: {
  62. 'packageList': {
  63. handler(newVar, oldVar) {
  64. console.log("newVar", newVar);
  65. },
  66. deep: true,
  67. immediate: true,
  68. }
  69. },
  70. data() {
  71. return {
  72. activeIndex: 0,
  73. };
  74. },
  75. computed: {
  76. ...mapState(['systemInfo', 'store_id', 'userInfo']),
  77. },
  78. onShow() {
  79. },
  80. methods: {
  81. onPickLeve(e) {
  82. this.activeIndex = e;
  83. },
  84. onBuyOrder(e) {
  85. let _this = this;
  86. let packageId = _this.packageList[_this.activeIndex].id;
  87. let par = {
  88. package_id:packageId,
  89. user_id: _this.userInfo.id,
  90. course_id:_this.courseInfo.id,
  91. store_id:_this.store_id,
  92. pay_type: 1,
  93. }
  94. _this.$http.request('fitness/addCourseOrder', {
  95. ...par
  96. }, "", "", true).then(res => {
  97. if (res.code == '200') {
  98. // #ifdef MP-WEIXIN
  99. wx.requestPayment({
  100. timeStamp: res.data.timeStamp,
  101. nonceStr: res.data.nonceStr,
  102. package: res.data.package,
  103. signType: res.data.signType,
  104. paySign: res.data.paySign,
  105. success: (res) => {
  106. uni.showToast({
  107. title:'您已支付成功,现在可以直接提交预约啦',
  108. icon:'success',
  109. success: (e) => {
  110. _this.$emit("onCloseRenew");
  111. }
  112. })
  113. },
  114. fail: (res) => {
  115. uni.showToast({
  116. title:'支付失败',
  117. icon:'error',
  118. success: (e) => {
  119. _this.$emit("onCloseRenew");
  120. }
  121. })
  122. }
  123. })
  124. // #endif
  125. }
  126. }).catch(err => {})
  127. },
  128. }
  129. }
  130. </script>
  131. <style lang="scss">
  132. @import './FitPackageForm.scss'
  133. </style>