cardBag.vue 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. <template>
  2. <view class="container">
  3. <navbar :config="config" backColor="#999999"></navbar>
  4. <view class="card-list">
  5. <view class="item u-FFF" v-for="(item,index) in list" :key="item.id">
  6. <image :src="imgUrl+'/cardBag.png'"></image>
  7. <view class="position-ab">
  8. <view class="u-flex-center-sb pd30">
  9. <view>
  10. <view class="u-font20"><text>¥</text><text class="font52 u-ml5 u-mr5">{{item.money}}</text>元 </view>
  11. <view class="u-font24 u-flex-center"><text class="u-text400">购买此卡送</text><text
  12. class="u-font30 u-DAC6A1">{{item.append}}</text>元</view>
  13. </view>
  14. <view class="btn" v-if="ispay">
  15. <button class="u-font24" @click="buyCard(item.id)">立即购买</button>
  16. </view>
  17. </view>
  18. </view>
  19. </view>
  20. <nodata v-if="noData" :config="{top:15,content:'暂无卡包~'}"></nodata>
  21. </view>
  22. <uniPopup type="bottom" ref="payOpen">
  23. <view class="u-bg-fff pay-select">
  24. <radio-group>
  25. <label class="u-flex-center-sb" @click="payWay(1)">
  26. <view class="u-flex-center">
  27. <image class="img60" :src="imgUrl+'/weChat2.png'"></image>
  28. <view class="u-ml20 u-font28 u-181818">微信支付</view>
  29. </view>
  30. <view>
  31. <radio value="1" checked />
  32. </view>
  33. </label>
  34. <!-- <label class="u-flex-center-sb u-mt30 " @click="payWay(2)">
  35. <view class="u-flex-center">
  36. <image class="img60" src="@/static/alipay.png"></image>
  37. <view class="u-ml20 u-font28 u-181818">支付宝支付</view>
  38. </view>
  39. <view>
  40. <radio value="2" />
  41. </view>
  42. </label> -->
  43. </radio-group>
  44. </view>
  45. <view class="pay-btn">
  46. <button class="u-btn-two" @click="submitPay">
  47. 去付款
  48. </button>
  49. </view>
  50. </uniPopup>
  51. </view>
  52. </template>
  53. <script>
  54. import uniPopup from "@/components/uni-popup/uni-popup.vue";
  55. let app = getApp()
  56. export default {
  57. components: {
  58. uniPopup,
  59. },
  60. data() {
  61. return {
  62. config: {
  63. back: true, //false是tolbar页面 是则不写
  64. title: '一卡通',
  65. color: '#1A1A1A',
  66. //背景颜色;参数一:透明度(0-1);参数二:背景颜色(array则为线性渐变,string为单色背景)
  67. backgroundColor: [1, "#fff"],
  68. statusBarFontColor: '#1A1A1A'
  69. },
  70. list: [],
  71. noData: false,
  72. payStatus: 1,
  73. selectId: null,
  74. imgUrl: this.$mConfig.staticUrl,
  75. ispay: app.globalData.openPay
  76. }
  77. },
  78. onLoad() {
  79. this.getRefillcardlist()
  80. },
  81. methods: {
  82. payWay(e) {
  83. this.payStatus = e;
  84. },
  85. submitPay() {
  86. let data = {
  87. refill_card_id: this.selectId,
  88. pay_mode: this.payStatus, //* 1:微信 * 2:支付宝
  89. }
  90. this.$http.post('/order/refillcard/buy', data)
  91. .then(res => {
  92. if (res && res.code == 200) {
  93. let target = res.data.data
  94. if (this.payStatus == 1) {
  95. uni.requestPayment({
  96. provider: 'wxpay',
  97. timeStamp: target.timeStamp,
  98. nonceStr: target.nonceStr,
  99. package: target.package,
  100. signType: target.signType,
  101. paySign: target.paySign,
  102. // orderInfo: {
  103. // appid: "wx54fd6fb89a3018e9",
  104. // noncestr: target.nonceStr,
  105. // package: "Sign=WXPay",
  106. // partnerid: "",
  107. // prepayid: "",
  108. // timestamp: target.timeStamp,
  109. // sign: target.paySign,
  110. // },
  111. success: (res) => {
  112. this.$mUtil.toast('购买成功')
  113. this.$refs.payOpen.close();
  114. // setTimeout(()=>{
  115. // uni.switchTab({
  116. // url:'/pages/index/my'
  117. // })
  118. // },1000)
  119. },
  120. fail: function(err) {
  121. console.log('fail:' + JSON.stringify(err));
  122. }
  123. });
  124. } else {
  125. uni.requestPayment({
  126. provider: 'alipay',
  127. orderInfo: target.prePayOrderInfo,
  128. success: (res) => {
  129. this.$mUtil.toast('购买成功')
  130. setTimeout(() => {
  131. uni.redirectTo({
  132. url: '/pages/index/my'
  133. })
  134. }, 1000)
  135. },
  136. fail: function(err) {
  137. console.log('fail:' + JSON.stringify(err));
  138. }
  139. });
  140. }
  141. }
  142. })
  143. },
  144. getRefillcardlist() {
  145. this.$http.get('/refill/card/list')
  146. .then(res => {
  147. if (res && res.code == 200) {
  148. this.list = res.list
  149. if (res.list.length == 0) {
  150. this.noData = true
  151. } else {
  152. this.noData = false
  153. }
  154. } else {
  155. this.noData = false
  156. }
  157. })
  158. },
  159. buyCard(id) {
  160. this.selectId = id
  161. this.$refs.payOpen.open();
  162. }
  163. }
  164. }
  165. </script>
  166. <style lang="scss">
  167. radio {
  168. transform: scale(0.7);
  169. }
  170. .pay-select {
  171. margin-top: 66rpx;
  172. border-radius: 18rpx 18rpx 0 0;
  173. padding: 48rpx 38rpx;
  174. }
  175. .img60 {
  176. width: 60rpx;
  177. height: 60rpx;
  178. }
  179. .pay-btn {
  180. padding: 80rpx 30rpx 20rpx 30rpx;
  181. padding-top: 80rpx;
  182. background: #fff;
  183. padding-bottom: 20px;
  184. button {
  185. background-color: #0B844A;
  186. color: #ffffff;
  187. }
  188. }
  189. .font52 {
  190. font-size: 52rpx;
  191. }
  192. .pd30 {
  193. padding: 30rpx 45rpx;
  194. }
  195. /* 文本溢出隐藏 */
  196. .u-text400 {
  197. display: block;
  198. max-width: 300rpx;
  199. overflow: hidden;
  200. white-space: nowrap;
  201. text-overflow: ellipsis;
  202. }
  203. .card-list {
  204. padding: 35rpx 15rpx 80rpx;
  205. .item {
  206. position: relative;
  207. image {
  208. width: 100%;
  209. height: 180rpx;
  210. }
  211. .position-ab {
  212. position: absolute;
  213. top: 0rpx;
  214. width: 100%;
  215. }
  216. .btn button {
  217. width: 149rpx;
  218. height: 50rpx;
  219. line-height: 50rpx;
  220. color: #0B844A;
  221. background: #ffffff;
  222. border-radius: 25rpx;
  223. }
  224. }
  225. }
  226. </style>