推拿小程序前端代码仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

355 lines
6.9 KiB

3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
  1. <template>
  2. <view class="page">
  3. <view class="bg"></view>
  4. <view class="content">
  5. <!-- 导航栏 -->
  6. <navbar title="商品支付" leftClick @leftClick="$utils.navigateBack" bgColor="transparent" color="#fff" />
  7. <!-- 商品详情 -->
  8. <productCard :data="payOrderProduct[0]" size="medium" :readonly="true"></productCard>
  9. <view class="card payment">
  10. <uv-radio-group v-model="payMethod">
  11. <view class="flex payment-item">
  12. <image class="icon" src="../static/createOrder/icon-wx.png" mode="widthFix"></image>
  13. <text class="label">微信支付</text>
  14. <uv-radio :name="0" activeColor="#84A73F" size="39rpx" icon-size="39rpx"/>
  15. </view>
  16. <view class="flex payment-item">
  17. <image class="icon" src="../static/createOrder/icon-account.png" mode="widthFix"></image>
  18. <!-- todo: check -->
  19. <text class="label">账户余额<text class="desc">{{ `(余额:¥${riceInfo.balance || 0}` }}</text></text>
  20. <uv-radio :name="1" activeColor="#84A73F" size="39rpx" icon-size="39rpx"/>
  21. </view>
  22. </uv-radio-group>
  23. </view>
  24. <!-- 优惠券 -->
  25. <view @click="openCoupon" class="card flex coupon">
  26. <image class="icon" src="@/pages_order/static/createOrder/icon-coupon.png" mode="widthFix"></image>
  27. <!-- todo: check is selected coupon -->
  28. <view class="label">优惠券<text v-if="selectedCoupon[0]" class="desc">{{ `满减券:${coupon.vouchersId_dictText}` }}</text></view>
  29. <view v-if="selectedCoupon[0]">
  30. <uv-checkbox-group v-model="selectedCoupon" shape="circle" >
  31. <uv-checkbox :name="1" size="39rpx" icon-size="39rpx" activeColor="#84A73F"></uv-checkbox>
  32. </uv-checkbox-group>
  33. </view>
  34. <template v-else>
  35. <image class="icon-arrow" src="../static/createOrder/icon-arrow.png" mode="widthFix"></image>
  36. </template>
  37. </view>
  38. </view>
  39. <!-- 下单 -->
  40. <view class="flex bar">
  41. <view class="flex count">
  42. <text>合计</text>
  43. <view class="price">
  44. <text class="price-unit">¥</text>
  45. <text>{{ totalPrice }}</text>
  46. </view>
  47. </view>
  48. <view class="btn btn-pay" @click="submit">
  49. 立即支付
  50. </view>
  51. </view>
  52. <!-- 优惠券选择-->
  53. <uv-popup ref="couponPopup" :round="30">
  54. <couponList ref="couponList" height="60vh" :status="0" @select="selectCoupon" />
  55. </uv-popup>
  56. <configPopup ref="popup"></configPopup>
  57. </view>
  58. </template>
  59. <script>
  60. import productCard from '@/components/product/productCard.vue'
  61. import couponList from '@/components/couponList/couponList.vue'
  62. import {
  63. mapState
  64. } from 'vuex'
  65. export default {
  66. components: {
  67. productCard,
  68. couponList
  69. },
  70. data() {
  71. return {
  72. selectedCoupon: [],
  73. num: 1,
  74. coupon: {},
  75. payMethod : 0,
  76. }
  77. },
  78. computed: {
  79. totalPrice() {
  80. let price = 0
  81. this.payOrderProduct.forEach(n => {
  82. price += n.price * (n.num || 1)
  83. })
  84. if (this.coupon.id) {
  85. price -= (this.coupon.money || 0)
  86. }
  87. return Number(price).toFixed(2)
  88. },
  89. ...mapState(['userInfo', 'payOrderProduct']),
  90. },
  91. onLoad(args) {
  92. this.$store.commit('getUserInfo')
  93. },
  94. onShow() {
  95. this.getCouponList()
  96. },
  97. methods: {
  98. //获取优惠券列表
  99. getCouponList() {
  100. this.$refs.couponList.getCouponList()
  101. },
  102. // 打开优惠券选择
  103. openCoupon() {
  104. this.$refs.couponPopup.open('bottom')
  105. },
  106. // 选择优惠券
  107. selectCoupon(e) {
  108. this.coupon = e
  109. this.$refs.couponPopup.close()
  110. this.selectedCoupon = [1]
  111. },
  112. async fetchCreateOrder() {
  113. // todo: check
  114. let params = {
  115. itemId: this.payOrderProduct[0].id,
  116. amount: this.totalPrice,
  117. payType : this.payMethod,
  118. // id: this.payOrderProduct[0].id,
  119. // num: this.payOrderProduct[0].num,
  120. // memberNum : 1,
  121. }
  122. // todo: check
  123. // if (this.coupon.id) {
  124. // data.couponId = this.coupon.id
  125. // }
  126. const res = await this.$fetch('createOrder', params, false)
  127. return res
  128. },
  129. async submit() {
  130. try {
  131. const res = await this.fetchCreateOrder()
  132. if (!res.success) {
  133. return
  134. }
  135. if (this.payMethod == 1) { // 账户余额
  136. } else { // 微信支付
  137. await uni.requestPaymentWxPay(res)
  138. }
  139. uni.showToast({
  140. title: '下单成功',
  141. icon: 'none'
  142. })
  143. setTimeout(uni.redirectTo, 700, {
  144. url: '/pages/index/order'
  145. })
  146. } catch (err) {
  147. }
  148. return
  149. let data = {
  150. 'massageItem.id': this.payOrderProduct[0].id,
  151. // todo: check
  152. amount: this.totalPrice,
  153. // num: this.payOrderProduct[0].num,
  154. // id: this.payOrderProduct[0].id,
  155. // payType : this.payMethod,
  156. // memberNum : 1,
  157. }
  158. // todo: check
  159. // if (this.coupon.id) {
  160. // data.couponId = this.coupon.id
  161. // }
  162. this.$api('createOrder', data, res => {
  163. if (res.code == 200) {
  164. if(this.payMethod == 1){
  165. uni.showToast({
  166. title: '下单成功',
  167. icon: 'none'
  168. })
  169. this.paySuccess(res)
  170. return
  171. }
  172. uni.requestPaymentWxPay(res).then(e => {
  173. uni.showToast({
  174. title: '下单成功',
  175. icon: 'none'
  176. })
  177. this.paySuccess(res)
  178. }).catch(n => {
  179. setTimeout(uni.redirectTo, 700, {
  180. url: '/pages/index/order'
  181. })
  182. })
  183. }
  184. })
  185. },
  186. paySuccess(res){
  187. setTimeout(uni.redirectTo, 700, {
  188. url: '/pages/index/order'
  189. })
  190. },
  191. }
  192. }
  193. </script>
  194. <style scoped lang="scss">
  195. $bar-height: 132rpx;
  196. .page {
  197. overflow: auto;
  198. padding-bottom: calc(#{$bar-height} + env(safe-area-inset-bottom));
  199. background-color: #F5F5F5;
  200. .bg {
  201. width: 100vw;
  202. height: 331rpx;
  203. background-image: linear-gradient(#84A73F, #D8FF8F);
  204. }
  205. .content {
  206. position: absolute;
  207. left: 0;
  208. top: 0;
  209. width: 100vw;
  210. padding: 0 13rpx;
  211. box-sizing: border-box;
  212. }
  213. }
  214. .card {
  215. padding: 22rpx 42rpx 34rpx 41rpx;
  216. color: #000000;
  217. font-size: 28rpx;
  218. .icon {
  219. width: 46rpx;
  220. height: auto;
  221. margin-right: 18rpx;
  222. }
  223. .label {
  224. flex: 1;
  225. }
  226. .desc {
  227. color: #999999;
  228. }
  229. }
  230. .payment {
  231. margin-top: 23rpx;
  232. &-item {
  233. width: 100%;
  234. & + & {
  235. margin-top: 38rpx;
  236. }
  237. }
  238. }
  239. .coupon {
  240. margin-top: 15rpx;
  241. .icon-arrow {
  242. width: 29rpx;
  243. height: auto;
  244. }
  245. }
  246. // 下单
  247. .bar {
  248. position: fixed;
  249. bottom: 0;
  250. left: 0;
  251. width: 100vw;
  252. height: $bar-height;
  253. padding-bottom: env(safe-area-inset-bottom);
  254. background-color: $uni-fg-color;
  255. .count {
  256. flex: 1;
  257. color: #000000;
  258. font-size: 28rpx;
  259. margin-left: 48rpx;
  260. justify-content: flex-start;
  261. .price {
  262. color: #FF2A2A;
  263. font-size: 30rpx;
  264. &-unit {
  265. font-size: 18rpx;
  266. }
  267. }
  268. }
  269. .btn {
  270. border: none;
  271. line-height: 1;
  272. background-color: transparent;
  273. padding: 0;
  274. width: auto;
  275. height: auto;
  276. margin: 0;
  277. &-pay {
  278. margin-right: 41rpx;
  279. padding: 24rpx 137rpx;
  280. color: $uni-text-color-inverse;
  281. font-size: 28rpx;
  282. border-radius: 44rpx;
  283. background-image: linear-gradient(to right, #84A73F, #D8FF8F);
  284. }
  285. }
  286. }
  287. </style>