buyPromo.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. <template>
  2. <view class=" ">
  3. <view class="font header">
  4. 优惠码价格:{{price}}元/个
  5. </view>
  6. <view class="font header">
  7. <view class="font">
  8. 你要购买的数量:
  9. </view>
  10. <view class="input-two">
  11. <input type="text" class="input" v-model="num" />
  12. </view>
  13. <view class="font3">
  14. </view>
  15. </view>
  16. <view class="font2 header">
  17. <view class="font">
  18. 有效期:
  19. </view>
  20. <view class="input-two">
  21. <input type="text" class="input" v-model="day" />
  22. </view>
  23. <view class="font3">
  24. 天.(最长90天)
  25. </view>
  26. </view>
  27. <view class="font2 header">
  28. 合计:{{num*price}}元
  29. </view>
  30. <view class="button">
  31. <button type="primary" @click="buy()" class="button2">
  32. <p class="p">购买</p>
  33. </button>
  34. </view>
  35. <view class="" style="margin: auto;">
  36. <font class="font1">{{title}}</font>
  37. <image class="img" :src=img mode=""></image>
  38. </view>
  39. </view>
  40. </template>
  41. <script>
  42. export default {
  43. data() {
  44. return {
  45. price:null,
  46. num:'10',
  47. day:'30',
  48. title:'',
  49. img:null
  50. }
  51. },
  52. onLoad() {
  53. },
  54. onShow() {
  55. this.findPrice();
  56. },
  57. methods: {
  58. findPrice(){
  59. uni.request({
  60. url: this.serverurl + '/TPromoCode/findPrice',
  61. method: "GET",
  62. success: (res) => {
  63. this.price = res.data.data;
  64. }
  65. })
  66. },
  67. buy(){
  68. if(this.day>90){
  69. uni.showModal({
  70. content: '有效期不能超过90天',
  71. showCancel: false
  72. });
  73. return null;
  74. }
  75. var p = this.price;
  76. var n = this.num;
  77. var pri = p*n;
  78. if(pri==0){
  79. uni.showModal({
  80. content: '价格为0',
  81. showCancel: false
  82. });
  83. return null;
  84. }
  85. var globalUser = uni.getStorageSync("globalUser");
  86. var id = globalUser.id;
  87. uni.request({
  88. url: this.serverurl + '/TPromoCode/buy?pri='+pri+'&adminId='+id+'&day='+this.day,
  89. method: "GET",
  90. success: (res) => {
  91. var img = res.data.data;
  92. this.title = "请用微信扫码支付";
  93. this.img = img;
  94. }
  95. })
  96. console.log(pri)
  97. }
  98. },
  99. }
  100. </script>
  101. <style>
  102. .header {
  103. display: flex;
  104. flex-direction: row;
  105. justify-content: flex-start;
  106. padding-left: 20upx;
  107. }
  108. .font{
  109. padding-top: 20upx;
  110. height: 70upx;
  111. color: #363D44;
  112. font-size: 36upx;
  113. font-family: "PingFang-SC-Bold";
  114. }
  115. .font2{
  116. padding-top: 40upx;
  117. padding-bottom: 30upx;
  118. height: 70upx;
  119. color: #363D44;
  120. font-size: 36upx;
  121. font-family: "PingFang-SC-Bold";
  122. }
  123. .font3{
  124. padding-left: 30upx;
  125. padding-top: 23upx;
  126. height: 70upx;
  127. color: #363D44;
  128. font-size: 36upx;
  129. font-family: "PingFang-SC-Bold";
  130. }
  131. .input-two {
  132. width: 80upx;
  133. height: 30upx;
  134. padding-top: 23upx;
  135. padding-left: 30upx;
  136. }
  137. .input {
  138. padding-left: 20upx;
  139. background-color: #FFFFFF;
  140. width: 80upx;
  141. height: 30upx;
  142. box-shadow: 0upx 0upx 20upx #D3D3D3;
  143. border-radius: 5upx;
  144. }
  145. .button{
  146. padding-top: 70upx;
  147. margin: auto;
  148. width: 80%;
  149. height: 100upx;
  150. }
  151. .button2{
  152. margin: auto;
  153. width: 80%;
  154. height: 100upx;
  155. }
  156. .p{
  157. padding-top: 2upx;
  158. margin: 0 auto;
  159. font-size: 45upx;
  160. font-family: "PingFang-SC-Bold";
  161. }
  162. .font1{
  163. color: #F4AE1B;
  164. padding-left: 300upx;
  165. padding-top: 100upx;
  166. font-size: 25upx;
  167. font-family: "PingFang-SC-Bold";
  168. }
  169. .img{
  170. height: 650upx;
  171. weight:650upx;
  172. margin: auto;
  173. }
  174. </style>