actionDetail.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396
  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" v-if="!detail.partake">
  6. <view class="if-tit">
  7. 购买7万元宏根蒂品牌红酒成为
  8. </view>
  9. <view class="if-level">
  10. 品牌经纪人
  11. </view>
  12. <view class="if-status">
  13. {{userInfo.level > 0 ?'您已满足参与条件': '您未满足参与条件'}}
  14. </view>
  15. <view class="add-btn" :class="{'cant': userInfo.level == 0}" @click="add()">
  16. 立即参与
  17. </view>
  18. </view>
  19. <view v-else-if="detail.partake.out_id == detail.id">
  20. <view class="flex" >
  21. <image class="action_icon" src="../../static/img/action_left_icon.png" mode="widthFix"></image>
  22. <view class="text-white action_title">
  23. 参与进度
  24. </view>
  25. <image class="action_icon" src="../../static/img/action_right_icon.png" mode="widthFix"></image>
  26. </view>
  27. <view class="jj margin-t-20">
  28. <view class="dqyj">
  29. 当前业绩量: {{(detail.partake.money*1).toFixed(2)}}
  30. </view>
  31. <view class="show-jdt">
  32. <image src="../../static/img/action_bg.png" mode="" style="width: 601rpx;"></image>
  33. <view class="jdt">
  34. <view class="jdt-wrap">
  35. <view class="jdt-wc" :style="{'width': detail.partake.money == 0? '0%':(detail.partake.money*1 >= detail.partake.number*1 ? '100%': (((detail.partake.money*1)/(detail.partake.number*1)*100).toFixed(2) + '%')) }">
  36. </view>
  37. </view>
  38. </view>
  39. <view class="jdt-tit">
  40. 达标业绩量:{{(detail.partake.number*1).toFixed(2)}}
  41. </view>
  42. </view>
  43. </view>
  44. </view>
  45. <view class="jj" v-else>
  46. <view class="if-tit">
  47. 购买7万元宏根蒂品牌红酒成为
  48. </view>
  49. <view class="if-level">
  50. 品牌经纪人
  51. </view>
  52. <view class="if-status">
  53. {{userInfo.level > 0 ?'您已满足参与条件': '您未满足参与条件'}}
  54. </view>
  55. <view class="add-btn cant" @click="addn()" >
  56. 立即参与
  57. </view>
  58. </view>
  59. </view>
  60. <view class="add-recoed flex">
  61. <view class="add-left">
  62. <image src="../../static/icon/time.png" mode="widthFix"></image>参与记录
  63. </view>
  64. <view class="add-left add-right" @click="goDetail()">
  65. 查看详情<image src="../../static/icon/write-go.png" mode="widthFix"></image>
  66. </view>
  67. </view>
  68. <view class="jj-wrap">
  69. <view class="jj-tit">
  70. 活动说明
  71. </view>
  72. <view class="jj" v-html="detail.content"></view>
  73. </view>
  74. <view class="" style="height: 60rpx;">
  75. </view>
  76. </view>
  77. </template>
  78. <script>
  79. import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
  80. import empty from '@/components/empty';
  81. import {
  82. getActionDetail,
  83. addAction
  84. } from '@/api/index.js'
  85. import {
  86. getUser
  87. } from '@/api/user.js'
  88. export default {
  89. components: {
  90. uniLoadMore,
  91. empty
  92. },
  93. data() {
  94. return {
  95. userInfo: {
  96. },
  97. detail: {}
  98. }
  99. },
  100. onLoad(opt) {
  101. this.id = opt.id
  102. this.getUser()
  103. },
  104. onShow() {
  105. },
  106. onReachBottom() {
  107. },
  108. onReady() {
  109. },
  110. onBackPress() {
  111. uni.switchTab({
  112. url: '/pages/index/index'
  113. })
  114. return true;
  115. },
  116. methods: {
  117. goDetail() {
  118. uni.navigateTo({
  119. url: '/pages/index/addList'
  120. })
  121. },
  122. getUser() {
  123. getUser().then(res => {
  124. this.userInfo = res.data
  125. this.getActionDetail()
  126. })
  127. },
  128. getActionDetail() {
  129. let that = this
  130. getActionDetail({
  131. uid: that.userInfo.uid
  132. }, that.id).then(res => {
  133. console.log(res);
  134. that.detail = res.data
  135. })
  136. },
  137. add() {
  138. uni.showLoading({
  139. title: '报名中',
  140. mask: true
  141. });
  142. addAction({
  143. out_id: this.id
  144. }).then(res => {
  145. uni.hideLoading()
  146. this.getActionDetail()
  147. }).catch(() => {
  148. uni.hideLoading()
  149. })
  150. },
  151. addn() {
  152. uni.showModal({
  153. title: '提示',
  154. content: '您当前已有参与中的活动,无法再参加该活动。',
  155. showCancel:false
  156. })
  157. }
  158. }
  159. }
  160. </script>
  161. <style lang="scss">
  162. page {
  163. height: auto;
  164. min-height: 100%;
  165. background-color: #fdd717;
  166. }
  167. .add-if {
  168. width: 693rpx;
  169. margin: 20rpx auto;
  170. border: 3rpx solid #FED888;
  171. background: linear-gradient(0deg, #FF9805, #FFB606);
  172. border-radius: 20rpx;
  173. padding: 20rpx;
  174. .action_title {
  175. font-size: 44rpx;
  176. }
  177. .action_icon {
  178. height: 22rpx;
  179. width: 46rpx;
  180. }
  181. .if-tit {
  182. font-size: 43rpx;
  183. font-weight: bold;
  184. text-align: center;
  185. color: #6B4216;
  186. }
  187. .if-level {
  188. width: 274rpx;
  189. height: 76rpx;
  190. border: 2rpx solid #6B4216;
  191. border-radius: 14rpx;
  192. text-align: center;
  193. line-height: 76rpx;
  194. font-size: 37rpx;
  195. font-weight: bold;
  196. color: #6B4216;
  197. margin: 40rpx auto 30rpx;
  198. }
  199. .if-status {
  200. font-size: 26rpx;
  201. font-weight: 500;
  202. color: #666666;
  203. text-align: center;
  204. }
  205. .add-btn {
  206. width: 366rpx;
  207. height: 80rpx;
  208. background: linear-gradient(0deg, #FFB605, #FFD778);
  209. border-radius: 40rpx;
  210. line-height: 80rpx;
  211. font-size: 36rpx;
  212. font-weight: 500;
  213. color: #6B4216;
  214. text-align: center;
  215. margin: 30rpx auto 20rpx;
  216. &.bg-gray {
  217. color: #FFFFFF;
  218. }
  219. }
  220. }
  221. .add-recoed {
  222. width: 693rpx;
  223. height: 104rpx;
  224. border: 3rpx solid #FED888;
  225. background: linear-gradient(0deg, #FF9805, #FFB606);
  226. border-radius: 35rpx;
  227. margin: 20rpx auto;
  228. padding: 0 32rpx;
  229. .add-left {
  230. display: flex;
  231. align-items: center;
  232. image {
  233. width: 38rpx;
  234. margin: 0 15rpx 0 0;
  235. }
  236. font-size: 36rpx;
  237. font-weight: bold;
  238. color: #FFFFFF;
  239. }
  240. .add-right {
  241. font-size: 30rpx;
  242. font-weight: 500;
  243. color: #FFFFFF;
  244. image {
  245. width: 15rpx;
  246. margin: 0 0 0 15rpx;
  247. }
  248. }
  249. }
  250. .action-wrap {
  251. width: 704rpx;
  252. height: 330rpx;
  253. margin: 20rpx auto;
  254. image {
  255. width: 704rpx;
  256. height: 330rpx;
  257. border-radius: 20rpx;
  258. }
  259. }
  260. .jj-wrap {
  261. width: 693rpx;
  262. // height: 100rpx;
  263. padding: 49rpx 0 29rpx;
  264. border: 3rpx solid #FED888;
  265. background: linear-gradient(0deg, #FF9805, #FFB606);
  266. border-radius: 35rpx;
  267. margin: auto;
  268. .jj-tit {
  269. margin-bottom: 20rpx;
  270. font-size: 44rpx;
  271. font-weight: bold;
  272. color: #FFFFFF;
  273. text-align: center;
  274. position: relative;
  275. &::before {
  276. content: '';
  277. position: absolute;
  278. bottom: 0;
  279. left: 0;
  280. right: 0;
  281. margin: auto;
  282. width: 418rpx;
  283. height: 13rpx;
  284. background: linear-gradient(0deg, #FFCA4E, #F3F4AB);
  285. border-radius: 6rpx;
  286. }
  287. }
  288. }
  289. .jj {
  290. background-color: #fff;
  291. width: 653rpx;
  292. margin: auto;
  293. border-radius: 20rpx;
  294. border: 3px solid #FCE791;
  295. padding: 20rpx;
  296. }
  297. .top-img {
  298. width: 750rpx;
  299. }
  300. .cant {
  301. background: #D3D3D3 !important;
  302. color: #fff !important;
  303. }
  304. .dqyj {
  305. font-size: 32rpx;
  306. font-weight: bold;
  307. color: #6B4216;
  308. padding: 35rpx 0;
  309. text-align: center;
  310. }
  311. .show-jdt {
  312. position: relative;
  313. height: 120rpx;
  314. image {
  315. height: 120rpx;
  316. }
  317. .jdt-tit {
  318. font-size: 17rpx;
  319. font-weight: bold;
  320. color: #B3703D;
  321. text-align: right;
  322. padding-right: 20rpx;
  323. position: absolute;
  324. bottom: 10rpx;
  325. right: 0;
  326. }
  327. .jdt {
  328. position: absolute;
  329. bottom: 47rpx;
  330. left: 0;
  331. right: 0;
  332. margin: auto;
  333. width: 577rpx;
  334. height: 28rpx;
  335. background: #B3703D;
  336. border: 2rpx solid #FFFFFF;
  337. box-shadow: 4rpx 9rpx 5rpx 0px rgba(0,0,0,0.32);
  338. border-radius: 14rpx;
  339. display: flex;
  340. justify-content: center;
  341. align-items: center;
  342. .jdt-wrap {
  343. width: 555rpx;
  344. height: 10rpx;
  345. border-radius: 5rpx;
  346. background: #bbb;
  347. position: relative;
  348. .jdt-wc {
  349. height: 10rpx;
  350. background: linear-gradient(0deg, #ECCF97, #FFF7E0, #EBCD93);
  351. border-radius: 5rpx;
  352. }
  353. }
  354. }
  355. }
  356. </style>