actionDetail.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. <template>
  2. <view class="content">
  3. <image v-if="detail.pics" :src="detail.pics.split(',')[1]" mode="widthFix" class="top-img"></image>
  4. <view class="add-if">
  5. <view class="jj">
  6. <view class="if-tit">
  7. 购买7万元宏根蒂品牌红酒成为
  8. </view>
  9. <view class="if-level">
  10. 品牌经纪人
  11. </view>
  12. <view v-if="!detail.partake" class="if-status">
  13. {{userInfo.level > 0 ?'您已满足参与条件': '您未满足参与条件'}}
  14. </view>
  15. <view class="add-btn" v-if="!detail.partake" :class="{'cant': userInfo.level == 0}" @click="add()">
  16. 立即参与
  17. </view>
  18. <view class="add-btn bg-gray" v-else >
  19. 已参与
  20. </view>
  21. </view>
  22. </view>
  23. <view class="add-recoed flex">
  24. <view class="add-left">
  25. <image src="../../static/icon/time.png" mode="widthFix"></image>参与记录
  26. </view>
  27. <view class="add-left add-right" @click="goDetail()">
  28. 查看详情<image src="../../static/icon/write-go.png" mode="widthFix"></image>
  29. </view>
  30. </view>
  31. <view class="jj-wrap">
  32. <view class="jj-tit">
  33. 活动说明
  34. </view>
  35. <view class="jj" v-html="detail.content"></view>
  36. </view>
  37. <view class="" style="height: 60rpx;">
  38. </view>
  39. </view>
  40. </template>
  41. <script>
  42. import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
  43. import empty from '@/components/empty';
  44. import {
  45. getActionDetail,
  46. addAction
  47. } from '@/api/index.js'
  48. import { getUser } from '@/api/user.js'
  49. export default {
  50. components: {
  51. uniLoadMore,
  52. empty
  53. },
  54. data() {
  55. return {
  56. userInfo: {
  57. },
  58. detail: {}
  59. }
  60. },
  61. onLoad(opt) {
  62. this.id = opt.id
  63. this.getUser()
  64. },
  65. onShow() {
  66. },
  67. onReachBottom() {
  68. },
  69. onReady() {
  70. },
  71. methods: {
  72. goDetail() {
  73. uni.navigateTo({
  74. url: '/pages/index/addList'
  75. })
  76. },
  77. getUser() {
  78. getUser().then(res => {
  79. this.userInfo = res.data
  80. this.getActionDetail()
  81. })
  82. },
  83. getActionDetail() {
  84. let that = this
  85. getActionDetail({
  86. },that.id).then(res => {
  87. that.detail = res.data
  88. })
  89. },
  90. add() {
  91. uni.showLoading({
  92. title: '报名中',
  93. mask: true
  94. });
  95. addAction({
  96. out_id: this.id
  97. }).then(res => {
  98. uni.hideLoading()
  99. }).catch(()=>{
  100. uni.hideLoading()
  101. })
  102. }
  103. }
  104. }
  105. </script>
  106. <style lang="scss">
  107. page {
  108. height: auto;
  109. min-height: 100%;
  110. background-color: #fdd717;
  111. }
  112. .add-if {
  113. width: 693rpx;
  114. margin: 20rpx auto;
  115. border: 3rpx solid #FED888;
  116. background: linear-gradient(0deg, #FF9805, #FFB606);
  117. border-radius: 20rpx;
  118. padding: 20rpx;
  119. .if-tit {
  120. font-size: 43rpx;
  121. font-weight: bold;
  122. text-align: center;
  123. color: #6B4216;
  124. }
  125. .if-level {
  126. width: 274rpx;
  127. height: 76rpx;
  128. border: 2rpx solid #6B4216;
  129. border-radius: 14rpx;
  130. text-align: center;
  131. line-height: 76rpx;
  132. font-size: 37rpx;
  133. font-weight: bold;
  134. color: #6B4216;
  135. margin:40rpx auto 30rpx;
  136. }
  137. .if-status {
  138. font-size: 26rpx;
  139. font-weight: 500;
  140. color: #666666;
  141. text-align: center;
  142. }
  143. .add-btn {
  144. width: 366rpx;
  145. height: 80rpx;
  146. background: linear-gradient(0deg, #FFB605, #FFD778);
  147. border-radius: 40rpx;
  148. line-height: 80rpx;
  149. font-size: 36rpx;
  150. font-weight: 500;
  151. color: #6B4216;
  152. text-align: center;
  153. margin: 30rpx auto 20rpx;
  154. &.bg-gray{
  155. color: #FFFFFF;
  156. }
  157. }
  158. }
  159. .add-recoed {
  160. width: 693rpx;
  161. height: 104rpx;
  162. border: 3rpx solid #FED888;
  163. background: linear-gradient(0deg, #FF9805, #FFB606);
  164. border-radius: 35rpx;
  165. margin: 20rpx auto;
  166. padding: 0 32rpx;
  167. .add-left {
  168. display: flex;
  169. align-items: center;
  170. image {
  171. width: 38rpx;
  172. margin: 0 15rpx 0 0;
  173. }
  174. font-size: 36rpx;
  175. font-weight: bold;
  176. color: #FFFFFF;
  177. }
  178. .add-right {
  179. font-size: 30rpx;
  180. font-weight: 500;
  181. color: #FFFFFF;
  182. image {
  183. width: 15rpx;
  184. margin: 0 0 0 15rpx;
  185. }
  186. }
  187. }
  188. .action-wrap {
  189. width: 704rpx;
  190. height: 330rpx;
  191. margin: 20rpx auto;
  192. image {
  193. width: 704rpx;
  194. height: 330rpx;
  195. border-radius: 20rpx;
  196. }
  197. }
  198. .jj-wrap {
  199. width: 693rpx;
  200. // height: 100rpx;
  201. padding: 49rpx 0 29rpx;
  202. border: 3rpx solid #FED888;
  203. background: linear-gradient(0deg, #FF9805, #FFB606);
  204. border-radius: 35rpx;
  205. margin: auto;
  206. .jj-tit {
  207. margin-bottom: 20rpx;
  208. font-size: 44rpx;
  209. font-weight: bold;
  210. color: #FFFFFF;
  211. text-align: center;
  212. position: relative;
  213. &::before {
  214. content: '';
  215. position: absolute;
  216. bottom: 0;
  217. left: 0;
  218. right: 0;
  219. margin: auto;
  220. width: 418rpx;
  221. height: 13rpx;
  222. background: linear-gradient(0deg, #FFCA4E, #F3F4AB);
  223. border-radius: 6rpx;
  224. }
  225. }
  226. }
  227. .jj {
  228. background-color: #fff;
  229. width: 653rpx;
  230. margin: auto;
  231. border-radius: 20rpx;
  232. border: 3px solid #FCE791;
  233. padding: 20rpx;
  234. }
  235. .top-img {
  236. width: 750rpx;
  237. }
  238. .cant {
  239. background: #D3D3D3 !important;
  240. color: #fff !important;
  241. }
  242. </style>