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.

188 lines
3.7 KiB

9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
  1. <!-- 抽奖弹框 -->
  2. <template>
  3. <view class="prizeDraw">
  4. <uni-popup ref="popup">
  5. <view class="popup-content">
  6. <view class="title">{{ $t('page.prizeDraw.title') }}</view>
  7. <view class="project">
  8. <view class="img-box">
  9. <image :src="orderInfo.image" mode="widthFix"></image>
  10. </view>
  11. <view class="project-base">
  12. <view class="project-name">{{ orderInfo.subTitle }}</view>
  13. </view>
  14. </view>
  15. <view class="todoy-info">
  16. <view class="todoy-info-main">
  17. <view class="today-info-l">
  18. <view class="today-income">{{ $t('page.prizeDraw.recharge') }}</view>
  19. <div class="money">
  20. <text class="number">{{ orderInfo.price }}</text>
  21. <text class="unit">{{ $store.state.unit }}</text>
  22. </div>
  23. </view>
  24. <div class="booking-info-r">
  25. <view class="booking-income">{{ $t('page.prizeDraw.commission') }}</view>
  26. <div class="booking-data">
  27. <text class="number">{{ orderInfo.giveMoney + $store.state.unit }}</text>
  28. </div>
  29. </div>
  30. </view>
  31. </view>
  32. <view class="order-time">
  33. <view class="title">{{ $t('page.prizeDraw.time') }}</view>
  34. <div class="content">{{ orderInfo.createTime }}</div>
  35. </view>
  36. <view class="order-number">
  37. <div class="title">{{ $t('page.prizeDraw.number') }}</div>
  38. <div class="content">{{ orderInfo.id }}</div>
  39. </view>
  40. <div @click="orderPay" class="submit">{{ $t('page.prizeDraw.submit') }}</div>
  41. </view>
  42. </uni-popup>
  43. </view>
  44. </template>
  45. <script>
  46. export default {
  47. data() {
  48. return {
  49. type: 'center',
  50. orderInfo : {},
  51. userInfo : {}, //用户信息
  52. }
  53. },
  54. methods: {
  55. toggle(order) {
  56. this.getUserInfo()
  57. this.orderInfo = order
  58. this.$refs.popup.open(this.type)
  59. },
  60. //用户点击确定按钮(创建订单)
  61. orderPay(){
  62. this.$emit('orderPay',this.orderInfo.id)
  63. },
  64. //获取用户信息
  65. getUserInfo() {
  66. this.request('userInfo').then(res => {
  67. if (res.code == 200) {
  68. this.userInfo = res.result.userInfo
  69. }
  70. })
  71. },
  72. //关闭
  73. close(){
  74. this.$refs.popup.close(this.type)
  75. }
  76. },
  77. }
  78. </script>
  79. <style lang="scss" scoped>
  80. .prizeDraw {
  81. .popup-content {
  82. width: 700rpx;
  83. margin: 0rpx auto;
  84. background: white;
  85. border-radius: 20rpx;
  86. box-sizing: border-box;
  87. padding: 20rpx;
  88. .title {
  89. font-size: 32rpx;
  90. }
  91. .project {
  92. display: flex;
  93. align-items: center;
  94. flex-wrap: wrap;
  95. min-height: 150rpx;
  96. .img-box {
  97. display: flex;
  98. align-items: center;
  99. width: 150rpx;
  100. height: 150rpx;
  101. margin-right: 2%;
  102. overflow: hidden;
  103. border-radius: 10rpx;
  104. image {
  105. border-radius: 10rpx;
  106. width: 100%;
  107. }
  108. }
  109. .project-base {
  110. width: 73%;
  111. }
  112. }
  113. }
  114. .todoy-info {
  115. box-sizing: border-box;
  116. height: 140rpx;
  117. .todoy-info-main {
  118. display: flex;
  119. flex-wrap: wrap;
  120. height: 100%;
  121. // background-color: rgba(0, 208, 234, 0.1);
  122. border-radius: 20rpx;
  123. margin: 20rpx 0rpx;
  124. box-sizing: border-box;
  125. padding: 0rpx 30rpx;
  126. .today-info-l,
  127. .booking-info-r {
  128. display: flex;
  129. flex-direction: column;
  130. justify-content: center;
  131. width: 50%;
  132. font-size: 28rpx;
  133. .today-income,
  134. .booking-income {
  135. // color: #8e8e98;
  136. }
  137. .money,
  138. .booking-data {
  139. font-weight: bold;
  140. margin-top: 10rpx;
  141. }
  142. }
  143. }
  144. }
  145. .order-time,
  146. .order-number {
  147. display: flex;
  148. justify-content: space-between;
  149. margin-top: 30rpx;
  150. font-size: 30rpx;
  151. }
  152. .submit{
  153. height: 80rpx;
  154. border-radius: 100rpx;
  155. background-color: #f33;
  156. color: white;
  157. font-size: 30rpx;
  158. display: flex;
  159. justify-content: center;
  160. align-items: center;
  161. margin-top: 30rpx;
  162. }
  163. }
  164. </style>