index.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977
  1. <template>
  2. <view class="vote-detail">
  3. <!-- 活动查询 -->
  4. <view class="title">
  5. <image style="width: 158rpx;height: 158rpx;border-radius: 50%; " :src="voteDetail.logo" mode="">
  6. </image>
  7. <text class="title-text">{{voteDetail.project_name}}</text>
  8. <text class="title-btn">{{voteDetail.activity.title}}</text>
  9. </view>
  10. <!-- 分割线 -->
  11. <view style="width: 92%; height: 2rpx; background-color:#F0F0F0;margin: 40rpx auto; "></view>
  12. <!-- 排名 -->
  13. <view class="rank">
  14. <view class="vote-detail-btn">
  15. <view class="vote-detail-btn-item">
  16. <text class="vote-detail-btn-item-num">{{voteDetail.project_no}}</text>
  17. <text class="vote-detail-btn-item-text">编号</text>
  18. </view>
  19. <view style="width: 2rpx;height: 52rpx;background-color: #ccc;"></view>
  20. <view class="vote-detail-btn-item">
  21. <text class="vote-detail-btn-item-num"
  22. v-if="voteDetail.ticket_num>=0">{{voteDetail.ticket_num + voteDetail.virtual_ticket_num}}</text>
  23. <text class="vote-detail-btn-item-text">票数</text>
  24. </view>
  25. <view style="width: 2rpx;height: 52rpx;background-color: #ccc;"></view>
  26. <view class="vote-detail-btn-item">
  27. <text class="vote-detail-btn-item-num">{{voteDetail.rank}}</text>
  28. <text class="vote-detail-btn-item-text">排名</text>
  29. </view>
  30. <view style="width: 2rpx;height: 52rpx;background-color: #ccc;"></view>
  31. <view class="vote-detail-btn-item">
  32. <text class="vote-detail-btn-item-num">{{voteDetail.next_rank_ticket_num}}</text>
  33. <text class="vote-detail-btn-item-text">距上名</text>
  34. </view>
  35. </view>
  36. </view>
  37. <!-- 轮播图 -->
  38. <view style="background-color: #f9f9f9;">
  39. <view class="swiper">
  40. <view class="home-swiper">
  41. <uni-swiper-dot :mode="mode" :info="info" :current="current1" :dots-styles="dotsStyles">
  42. <swiper class="swiper-box" @change="change1" circular>
  43. <swiper-item v-for="(item ,index) in info" :key="index" v-if="resource_type == 1 ">
  44. <view class="swiper-item">
  45. <image style="width: 100%;height:576rpx; border-radius: 12rpx; " :src="item.img"
  46. mode="aspectFill"></image>
  47. </view>
  48. </swiper-item>
  49. <swiper-item v-if="resource_type == 2 ">
  50. <view class="swiper-item">
  51. <video id="myVideo" ref="myVideo"
  52. style="width: 100%; height: 576rpx;border-radius: 12rpx; " :src="video_url"
  53. controls :enable-progress-gesture="false">
  54. </video>
  55. </view>
  56. </swiper-item>
  57. </swiper>
  58. </uni-swiper-dot>
  59. </view>
  60. </view>
  61. <!-- 投票 -->
  62. <view class="btn" @click="goVote(activity_project_id)">
  63. <view v-if="spending || isStart" class="btn-vote"
  64. :class="spending?'btn-vote': isStart?'btn-vote-fasle' :'' ">
  65. <text>{{voteDetail.activity.vote_name}}</text>
  66. </view>
  67. <view class="btn-vote-fasle" v-if="isEnd">
  68. <text>投票结束</text>
  69. </view>
  70. </view>
  71. <!-- 帮我拉票 -->
  72. <view class="help">
  73. <!-- <view class="help-btn" @click="getPoster">
  74. <text>帮我拉票</text>
  75. </view> -->
  76. <view class="help-btn" @click="showPoster">
  77. <text>帮我拉票</text>
  78. </view>
  79. </view>
  80. <movable-area class="movableArea">
  81. <movable-view class="movableView" direction="all" x="630rpx" y="700rpx">
  82. <view class="img-IHg" @click="goJoin">
  83. <image style="width: 84rpx; height: 84rpx;border-radius: 50%; " :src="indexVipImg" mode=""></image>
  84. </view>
  85. </movable-view>
  86. </movable-area>
  87. <!-- 分割线 -->
  88. <view style="width: 92%; height: 2rpx; background-color:#F0F0F0;margin: 64rpx auto; "></view>
  89. <!-- 介绍 -->
  90. <view class="introduce">
  91. <view class="introduce-title">
  92. <text>参赛介绍</text>
  93. </view>
  94. <view class="introduce-text">
  95. <u-parse :content="voteDetail.intro"></u-parse>
  96. </view>
  97. </view>
  98. <!-- 预约 -->
  99. <view class="reserve">
  100. <view class="reserve-left" @click="goSwiperSmall">
  101. <image style="width: 36rpx;height: 36rpx; margin-right: 10rpx;" src="/static/icon/reserve02.png"
  102. mode=""></image>
  103. <text>预约</text>
  104. </view>
  105. <view class="reserve-right" @click="goJoinActivity">
  106. <image style="width: 44rpx;height: 44rpx; margin-right: 10rpx;border-radius: 50%; " :src="voteVipImg"
  107. mode=""></image>
  108. <text>加入IHG会员</text>
  109. </view>
  110. </view>
  111. </view>
  112. <!-- 弹出层 -->
  113. <uni-popup ref="popup" type="center">
  114. <view class="pop">
  115. <view class="title"><text>{{pupopSuccess? "投票成功" : "票数不足"}}</text></view>
  116. <view class="img" v-if="is_prize==0">
  117. <image :src="voteDetail.activity.success_img"></image>
  118. </view>
  119. <view class="img" v-if="is_prize==1">
  120. <image :src="voteDetail.activity.success_img"></image>
  121. </view>
  122. <view class="textfont">
  123. <text v-if="!isVoteNum && is_prize==0">今日投票数已用完
  124. {{!isVoteNum&&!is_vip&&vipRewardTicketNum ? `点击 加入IHG会员 可享受额外${vipRewardTicketNum}票` : ""}}</text>
  125. <text v-if="isVoteNum && is_prize==0 ">今日投票数还有 {{userCanVoteNum}} 次
  126. 点击再次投票可再次为本项目投票也可为其他项目投票</text>
  127. <text v-if="is_prize==1">恭喜你中奖了!
  128. 获得了{{prizeProduct}}{{prizeProduct.indexOf('积分')==-1?',请尽快领取':''}}</text>
  129. </view>
  130. <view class="btn">
  131. <view v-if="is_prize==0" class="cancel"
  132. @click="isVoteNum?goVote(activity_project_id,true):closeVote()">
  133. <text>{{isVoteNum?'再次投票':'关闭'}}</text>
  134. </view>
  135. <view v-if="is_prize==0" class="download" @click="isVoteNum||is_vip?goOtherItem():goJoinActivity()">
  136. <text>{{isVoteNum||is_vip||!vipRewardTicketNum?'其他项目':'加入IHG会员' }}</text>
  137. </view>
  138. <view v-if="is_prize==1" class="cancel" @click="closeVote">
  139. <text>关闭</text>
  140. </view>
  141. <view v-if="is_prize==1" class="download" @click="goConvert(prizeProduct.indexOf('积分')==-1)">
  142. <text>{{prizeProduct.indexOf('积分')==-1?'去兑换':'去查看'}}</text>
  143. </view>
  144. </view>
  145. </view>
  146. </uni-popup>
  147. <Poster :activity_project_id='activity_project_id' ref="poster" :name="voteDetail.project_name" :title="voteDetail.activity.title"/>
  148. <!-- 弹出层/核销码 -->
  149. <uni-popup ref="dialogPanel" type="center">
  150. <view class="pop">
  151. <view class="title"><text>识别下方二维码即可购买</text></view>
  152. <view style="margin-left:30rpx;width: 580rpx;height: 2rpx;background: #F0F0F0;"></view>
  153. <view class="img">
  154. <image :src="jump_config" mode="aspectFit"/>
  155. </view>
  156. <view class="btn">
  157. <view class="cancel" @click="$refs.dialogPanel.close()"><text>取消</text></view>
  158. <view class="download" @click="saveImg"><text>保存图片</text></view>
  159. </view>
  160. </view>
  161. </uni-popup>
  162. </view>
  163. </template>
  164. <script>
  165. // import HchPoster from "@/components/hch-poster/hch-poster.vue"
  166. import Poster from "./poster.vue";
  167. export default {
  168. components:{Poster},
  169. data() {
  170. return {
  171. //vip图标
  172. indexVipImg:'',
  173. voteVipImg:'',
  174. //活动加入vip跳转
  175. jump_type_vip_Activity: '',
  176. jump_config_vip_Activity: {},
  177. //图标跳转h5,小程序,其他页面
  178. jump_type_vip: '',
  179. jump_config_vip: {},
  180. //加入会员广告配置
  181. advise: '',
  182. is_vip: false,
  183. pupopSuccess: true,
  184. pupopWidth: 590,
  185. pupopHeight: 788,
  186. //一定要注意像素密度的问题,这里使用的固定数值
  187. pixelRatio: 3, //屏幕像数密度
  188. inviteQR: '', //动态二维码
  189. posterImg: '', //最后生成的海报
  190. //二维码
  191. codeImg: '',
  192. //投票是否中奖,1中奖,0未中奖
  193. is_prize: '',
  194. //中奖礼物
  195. prizeProduct: '',
  196. //banner视频路径
  197. video_url: '',
  198. //banner图展示视频或者图片
  199. resource_type: '',
  200. //跳转h5和小程序
  201. jump_type: '',
  202. jump_config: 'https://zhengda.oss-cn-chengdu.aliyuncs.com/ihg/images/微信截图_20221219162756.png',
  203. //跳转vip小程序获得投票数
  204. vipRewardTicketNum: '',
  205. //活动id
  206. sourceId: '',
  207. //活动可以使用的投票数
  208. userCanVoteNum: '',
  209. isVoteNum: false,
  210. //判断活动是否正在进行中
  211. spending: false,
  212. //判断活动是否开始
  213. isStart: false,
  214. //判断活动是否结束
  215. isEnd: false,
  216. //活动开始时间
  217. startTime: '',
  218. //活动结束时间
  219. endTime: "",
  220. // 活动项目id
  221. activity_project_id: '',
  222. // 活动项目详情
  223. voteDetail: '',
  224. //轮播图
  225. info: [],
  226. dotsStyles: {
  227. backgroundColor: 'rgba(255, 255, 255, .3)',
  228. border: '1px rgba(255, 255, 255, .3) solid',
  229. color: '#fff',
  230. selectedBackgroundColor: 'rgba(255, 255, 255, 1)',
  231. selectedBorder: '1px rgba(255, 255, 255, 1) solid'
  232. },
  233. //指示点显示位置
  234. current1: 0,
  235. mode: 'dot',
  236. throttle:false
  237. }
  238. },
  239. onReady: function(res) {
  240. if(!this.$store.getters.userInfo){
  241. uni.navigateTo({
  242. url: '/pages/login/login'
  243. })
  244. return;
  245. }
  246. this.videoContext = uni.createVideoContext('myVideo')
  247. },
  248. onUnload() {
  249. uni.$emit('refreshVoteNum');
  250. },
  251. onLoad(op) {
  252. this.activity_project_id = op.id
  253. this.getDetail(op.id)
  254. this.admin = this.$store.getters.userInfo
  255. this.advise = this.$store.getters.allset.add_member
  256. //vip图标
  257. this.indexVipImg = this.advise.value.index_page
  258. this.jump_type_vip = this.advise.value.index_jump_type
  259. if( this.jump_type_vip == 1){
  260. this.jump_config_vip = this.advise.value.index_h5_url
  261. }else if(this.jump_type_vip == 2){
  262. this.jump_config_vip.appid = this.advise.value.index_appid
  263. this.jump_config_vip.path = this.advise.value.index_path
  264. }else if(this.jump_type_vip == 3){
  265. this.jump_config_vip =this.advise.value.index_other_path
  266. }
  267. //活动投票跳转vip
  268. this.voteVipImg = this.advise.value.vote_activity
  269. this.jump_type_vip_Activity = this.advise.value.vote_activity_jump_type
  270. if( this.jump_type_vip_Activity == 1){
  271. this.jump_config_vip_Activity = this.advise.value.vote_activity_h5_url
  272. }else if(this.jump_type_vip_Activity == 2){
  273. this.jump_config_vip_Activity.appid = this.advise.value.vote_activity_appid
  274. this.jump_config_vip_Activity.path = this.advise.value.vote_activity_path
  275. }else if(this.jump_type_vip_Activity == 3){
  276. this.jump_config_vip_Activity =this.advise.value.vote_activity_other_path
  277. }
  278. },
  279. watch: {
  280. vipRewardTicketNum: {
  281. handler(newName, oldName) {
  282. // console.log(newName, '--->监听')
  283. },
  284. immediate: true,
  285. deep: true
  286. }
  287. },
  288. methods: {
  289. shareing() {
  290. uni.showLoading({
  291. title: "海报生成中...",
  292. mask: true
  293. })
  294. // this.inviteQR = this.codeImg
  295. // this.createPoster();
  296. },
  297. //去兑换页面
  298. goConvert(isConvert=true) {
  299. this.$utils.jump({
  300. jump_type: 4,
  301. jump_config: '/pages/my/prize/prize'
  302. })
  303. },
  304. //视频自动播放
  305. openVideoPlay() {
  306. this.videoContext.play()
  307. },
  308. //隐藏
  309. handleCancel() {
  310. console.log('取消审生成海报');
  311. },
  312. //生产海报
  313. getPoster() {
  314. this.$refs.hchPoster.posterShow()
  315. },
  316. // 切换轮播图指示点
  317. change1(e) {
  318. this.current1 = e.detail.current;
  319. },
  320. getDetail(id,callback) {
  321. this.$api.active.getActiveProjectDetail({
  322. activity_project_id: id
  323. }).then(res => {
  324. if (res.code == 0) {
  325. this.voteDetail = res.data
  326. this.startTime = res.data.activity.start_time.replace(/-/g, "/")
  327. // “yyyy-MM-dd-hh-mm-ss”.replace(/-/g,"/")
  328. this.endTime = res.data.activity.end_time.replace(/-/g, "/")
  329. this.cancelTime(this.startTime, this.endTime)
  330. //活动可以使用的投票数
  331. this.userCanVoteNum = res.data.user_can_vote_num
  332. if (this.userCanVoteNum > 0) {
  333. this.isVoteNum = true
  334. } else {
  335. this.isVoteNum = false
  336. }
  337. this.sourceId = res.data.id
  338. //跳转vip小程序获得投票数
  339. this.vipRewardTicketNum = res.data.activity.vip_reward_ticket_num
  340. // this.info =JSON.parse( res.data.img_urls)
  341. this.info = JSON.parse(res.data.img_urls).map(item => {
  342. return {
  343. img: item
  344. }
  345. })
  346. //跳转h5和小程序
  347. this.jump_type = res.data.jump_type,
  348. this.jump_config = res.data.jump_config
  349. //banner展示视频或者图片
  350. this.resource_type = res.data.resource_type
  351. this.video_url = res.data.video_url
  352. uni.getStorage({
  353. key: `is_vip_${this.voteDetail.id}`,
  354. success: (data)=> {
  355. this.is_vip = data.data === 1 ? true : false;
  356. !this.is_vip && callback && callback();
  357. },
  358. fail:()=>{
  359. this.is_vip = false;
  360. }
  361. });
  362. //视频自动播放
  363. this.openVideoPlay()
  364. // //海报图片
  365. // this.posterData.mainImg = res.data.share_img
  366. // this.codeImg = res.data.qrcode_url
  367. }
  368. })
  369. },
  370. //轮播图跳转h5或者小程序和内部页面
  371. goSwiperSmall() {
  372. if(this.jump_type==3 && this.jump_config.substr(0, 7) != '/pages/'){
  373. console.log(this.jump_config)
  374. this.$refs.dialogPanel.open()
  375. }else{
  376. this.$utils.jump({
  377. jump_type: this.jump_type,
  378. jump_config: this.jump_config
  379. })
  380. }
  381. },
  382. cancelTime(i, j) {
  383. let nowtime = new Date() //获取当前时间
  384. let startime = new Date(i) //活动开始时间
  385. let endtime = new Date(j); //活动结束时间
  386. let lefttime = endtime.getTime() - nowtime.getTime() //距离结束时间的毫秒数
  387. let spendtime = nowtime.getTime() - startime.getTime() //距离结束时间的毫秒数
  388. if (lefttime > 0 && spendtime > 0) {
  389. //活动进行中
  390. this.spending = true
  391. } else if (lefttime < 0) {
  392. //活动结束
  393. this.isEnd = true
  394. } else if (spendtime < 0) {
  395. //活动未开始
  396. this.isStart = true
  397. }
  398. },
  399. // 打开弹出层
  400. openVote(mode = true) {
  401. this.pupopSuccess = mode
  402. this.$refs.popup.open()
  403. },
  404. // 关闭弹出层
  405. closeVote() {
  406. this.is_prize = false
  407. this.$refs.popup.close()
  408. },
  409. //再次投票
  410. voteAgain(id) {
  411. this.goVote(id, true)
  412. },
  413. //跳转其他项目
  414. goOtherItem() {
  415. uni.navigateBack()
  416. },
  417. //获取当前页面路径
  418. getPageUrl() {
  419. const pages = getCurrentPages();
  420. if (pages.length == 1) {
  421. const currentPage = pages[0];
  422. let pageUrl = `/${currentPage.route}`;
  423. return pageUrl
  424. } else {
  425. const currentPage = pages[pages.length - 1];
  426. let pageUrl = `/${currentPage.route}`;
  427. return pageUrl
  428. }
  429. },
  430. // 跳转其他小程序
  431. goJoinActivity(){
  432. let _this = this
  433. this.jumpHAppID(this.jump_type_vip_Activity, this.jump_config_vip_Activity)
  434. },
  435. goJoin() {
  436. let _this = this
  437. this.jumpHAppID(this.jump_type_vip, this.jump_config_vip)
  438. },
  439. // 跳转其他小程序
  440. jumpHAppID(id, urls) {
  441. if (id == 1) {
  442. const url = urls; // 跳转的外链
  443. const navtitle = 'H5'; // 这个标题是你自己可以设置的
  444. uni.navigateTo({
  445. // 跳转到webview页面
  446. url: `/pages/webview/webview?url=${url}&nav=${navtitle}`,
  447. success: () => {
  448. console.log('成功')
  449. },
  450. fail: (e) => {
  451. console.log(e, "失败")
  452. }
  453. });
  454. } else if (id == 2) {
  455. let _this = this
  456. let obj = urls;
  457. console.log(obj, '----->obj');
  458. wx.navigateToMiniProgram({
  459. appId: `${obj.appid}`, //appid
  460. path: `${obj.path}`, //path
  461. extraData: { //参数
  462. foo: 'bar'
  463. },
  464. // envVersion: 'develop', //开发版develop 开发版 trial 体验版 release 正式版
  465. success(res) {
  466. const page = _this.getPageUrl()
  467. let user_id = ''
  468. if (_this.admin != null) {
  469. user_id = _this.admin.id
  470. } else {
  471. user_id = 0
  472. }
  473. _this.$api.my.userMemberAdd({
  474. user_id,
  475. page,
  476. })
  477. //增加票数
  478. _this.$api.my.userJoinVip({
  479. source_type: 1,
  480. source_id: _this.sourceId
  481. }).then(res => {
  482. if(res.code == 0){
  483. uni.setStorage({
  484. key: `is_vip_${_this.voteDetail.id}`,
  485. data: 1,
  486. });
  487. _this.is_vip = true
  488. _this.closeVote()
  489. }
  490. })
  491. // 打开成功
  492. },
  493. fail(e) {
  494. console.log(e, '失败')
  495. }
  496. })
  497. } else if (id == 3) {
  498. uni.redirectTo({
  499. url: urls,
  500. fail: (err) => {
  501. uni.reLaunch({
  502. url: urls
  503. })
  504. }
  505. })
  506. }
  507. },
  508. // 跳转其他小程序
  509. // goJoin() {
  510. // this.$utils.jumpJoinVip().then( _=>{
  511. // const page = this.getPageUrl()
  512. // let user_id = ''
  513. // if (this.admin != null) {
  514. // user_id = this.admin.id
  515. // } else {
  516. // user_id = 0
  517. // }
  518. // this.$api.my.userMemberAdd({
  519. // user_id,
  520. // page,
  521. // })
  522. // //增加票数
  523. // this.$api.my.userJoinVip({
  524. // source_type: 1,
  525. // source_id: this.sourceId
  526. // }).then(res => {
  527. // console.log(res)
  528. // uni.setStorage({
  529. // key: `is_vip_${this.voteDetail.id}`,
  530. // data: 1,
  531. // });
  532. // this.is_vip = true
  533. // this.closeVote()
  534. // })
  535. // })
  536. // },
  537. // 投票
  538. goVote(id, again = false) {
  539. if(this.throttle) return;
  540. this.throttle = true;
  541. again && this.closeVote();
  542. this.$api.active.vote({
  543. activity_project_id: id
  544. }).then(res => {
  545. this.throttle =false
  546. if (res.code == 0) {
  547. this.is_prize = res.data.is_prize
  548. if (this.is_prize == 1) {
  549. this.prizeProduct = res.data?.product?.name ? res.data.product.name : `${res.data.integral}积分`
  550. }
  551. this.getDetail(this.activity_project_id, this.openVote())
  552. } else if(res.code === 2){
  553. if(!this.is_vip){
  554. this.openVote(false)
  555. }else{
  556. uni.showToast({
  557. icon: 'none',
  558. title: res.msg
  559. })
  560. }
  561. } else {
  562. uni.showToast({
  563. icon: 'none',
  564. title: res.msg?res.msg:"暂无权限"
  565. })
  566. }
  567. }).catch(err => {
  568. this.throttle =false
  569. uni.showToast({
  570. icon: 'error',
  571. title: '投票失败'
  572. })
  573. })
  574. },
  575. //帮我拉票
  576. showPoster(){
  577. /**
  578. * 注意这里的图片接口好像有问题 .activity.cover_img信息
  579. * 报错内容:{"errMsg":"getImageInfo:fail invalid"}
  580. * 可能是图片域名不在微信开发者白名单
  581. * 添加不校验规则依然报错
  582. * 核实后取消下方注释即可
  583. */
  584. this.$refs.poster.show({
  585. name: this.voteDetail.project_name,
  586. title: this.voteDetail.activity.title,
  587. imgUrl: this.voteDetail.share_img,
  588. qrcodeUrl: this.voteDetail.qrcode_url,
  589. })
  590. console.log(this.voteDetail)
  591. },
  592. saveImg(){
  593. uni.getImageInfo({
  594. src: this.jump_config,
  595. success:(res)=>{
  596. uni.saveImageToPhotosAlbum({
  597. filePath: res.path,
  598. success(_) {
  599. uni.showToast({
  600. title: '已保存到相册',
  601. icon: 'success',
  602. duration: 2000
  603. })
  604. },
  605. fail(err){
  606. console.log(err)
  607. }
  608. })
  609. }
  610. })
  611. }
  612. }
  613. }
  614. </script>
  615. <style lang="scss" scoped>
  616. $pageColor:#F9F9F9;
  617. $bgColor:#FFFFFF;
  618. @mixin flexlayout {
  619. display: flex;
  620. align-items: center;
  621. justify-content: center;
  622. }
  623. page {
  624. height: 100% !important;
  625. background: #F9F9F9 !important;
  626. }
  627. .vote-detail {
  628. height: 100%;
  629. background: #F9F9F9;
  630. }
  631. .reserve {
  632. // position: fixed;
  633. // bottom: 0;
  634. width: 100%;
  635. height: 148rpx;
  636. padding: 0 30rpx;
  637. background-color: #fff;
  638. display: flex;
  639. align-items: center;
  640. justify-content: space-between;
  641. font-size: 30rpx;
  642. color: #fff;
  643. font-weight: bold;
  644. .reserve-left {
  645. width: 204rpx;
  646. height: 92rpx;
  647. background: linear-gradient(270deg, #FF6200 0%, #FF9342 100%);
  648. border-radius: 12rpx;
  649. display: flex;
  650. align-items: center;
  651. justify-content: center;
  652. }
  653. .reserve-right {
  654. width: 466rpx;
  655. height: 92rpx;
  656. background: linear-gradient(270deg, #FF6200 0%, #FF9342 100%);
  657. border-radius: 12rpx;
  658. display: flex;
  659. align-items: center;
  660. justify-content: center;
  661. }
  662. }
  663. .introduce {
  664. padding: 0 30rpx;
  665. margin-bottom: 102rpx;
  666. .introduce-title {
  667. font-size: 32rpx;
  668. font-weight: bold;
  669. color: #333;
  670. display: flex;
  671. align-items: center;
  672. justify-content: center;
  673. }
  674. .introduce-text {
  675. margin-top: 44rpx;
  676. // line-height: 40rpx;
  677. // color: #333333;
  678. // font-size: 28rpx;
  679. }
  680. }
  681. .help {
  682. padding: 0 30rpx;
  683. margin-top: 30rpx;
  684. position: relative;
  685. .help-btn {
  686. height: 108rpx;
  687. background: #F9F9F9;
  688. border-radius: 14rpx;
  689. border: 2rpx solid #FF6200;
  690. display: flex;
  691. align-items: center;
  692. justify-content: center;
  693. color: #FF6200;
  694. font-weight: bold;
  695. font-size: 30rpx;
  696. }
  697. .img-IHg {
  698. width: 84rpx;
  699. height: 84rpx;
  700. background-color: #fff;
  701. box-shadow: 0px 8rpx 24rpx 0px rgba(220, 222, 229, 0.4);
  702. border-radius: 50%;
  703. display: flex;
  704. align-items: center;
  705. justify-content: center;
  706. position: fixed;
  707. // top: -28rpx;
  708. // right: 14rpx;
  709. top: 1030rpx;
  710. right: 30rpx;
  711. z-index: 99;
  712. }
  713. }
  714. .btn {
  715. padding: 0 30rpx;
  716. margin-top: 48rpx;
  717. .btn-vote {
  718. height: 108rpx;
  719. background: linear-gradient(338deg, #FF6200 0%, #FF9D4F 100%);
  720. border-radius: 12rpx;
  721. display: flex;
  722. align-items: center;
  723. justify-content: center;
  724. color: #FFFFFF;
  725. font-size: 30rpx;
  726. font-weight: bold;
  727. }
  728. .btn-vote-fasle {
  729. height: 108rpx;
  730. background: #CCCCCC;
  731. border-radius: 12rpx;
  732. display: flex;
  733. align-items: center;
  734. justify-content: center;
  735. color: #FFFFFF;
  736. font-size: 30rpx;
  737. font-weight: bold;
  738. }
  739. }
  740. .swiper {
  741. padding: 0 30rpx;
  742. margin-top: 64rpx;
  743. }
  744. .home-swiper {
  745. height: 576rpx;
  746. .swiper-box {
  747. height: 576rpx;
  748. }
  749. }
  750. .title {
  751. padding-top: 30rpx;
  752. display: flex;
  753. flex-direction: column;
  754. align-items: center;
  755. justify-content: center;
  756. .title-text {
  757. margin: 32rpx 0 16rpx;
  758. font-size: 40rpx;
  759. font-weight: bold;
  760. color: #333;
  761. }
  762. .title-btn {
  763. color: #FF6200;
  764. font-size: 28rpx;
  765. }
  766. }
  767. .rank {
  768. padding: 0 30rpx;
  769. }
  770. .vote-detail-btn {
  771. height: 190rpx;
  772. background-color: #fff;
  773. box-shadow: 0px 20rpx 40rpx 0px rgba(220, 222, 229, 0.4);
  774. border-radius: 16rpx;
  775. display: flex;
  776. align-items: center;
  777. justify-content: space-around;
  778. .vote-detail-btn-item {
  779. display: flex;
  780. flex-direction: column;
  781. align-items: center;
  782. justify-content: space-between;
  783. font-size: 28rpx;
  784. color: #333;
  785. .vote-detail-btn-item-num {
  786. font-size: 44rpx;
  787. font-weight: bold;
  788. }
  789. .vote-detail-btn-item-text {
  790. margin-top: 20rpx;
  791. }
  792. }
  793. }
  794. .pop {
  795. width: 640rpx;
  796. height: 740rpx;
  797. background: #FFFFFF;
  798. border-radius: 20rpx;
  799. padding-top: 32rpx;
  800. box-sizing: border-box;
  801. .title {
  802. @include flexlayout();
  803. margin-bottom: 32rpx;
  804. text {
  805. font-size: 34rpx;
  806. font-family: PingFangSC-Medium, PingFang SC;
  807. font-weight: 500;
  808. color: #000;
  809. }
  810. }
  811. .img {
  812. margin-left: 48rpx;
  813. width: 544rpx;
  814. height: 306rpx;
  815. background: $bgColor;
  816. border-radius: 12rpx;
  817. @include flexlayout();
  818. margin-bottom: 32rpx;
  819. image {
  820. width: 100%;
  821. height: 100%;
  822. border-radius: 10rpx;
  823. }
  824. }
  825. .textfont {
  826. margin-left: 30rpx;
  827. margin-bottom: 40rpx;
  828. @include flexlayout();
  829. width: 572rpx;
  830. height: 106rpx;
  831. text {
  832. text-align: center;
  833. font-size: 34rpx;
  834. font-weight: 400;
  835. color: #828282;
  836. }
  837. }
  838. .btn {
  839. width: 100%;
  840. height: 110rpx;
  841. padding: 0;
  842. display: flex;
  843. align-items: center;
  844. .cancel {
  845. @include flexlayout();
  846. width: 50%;
  847. height: 100%;
  848. border-top: #E5E5E5 solid 1rpx;
  849. border-right: #E5E5E5 solid 1rpx;
  850. text {
  851. font-size: 32rpx;
  852. font-family: PingFangSC-Medium, PingFang SC;
  853. font-weight: 500;
  854. color: #666666;
  855. }
  856. }
  857. .download {
  858. border-top: #E5E5E5 solid 1rpx;
  859. // border-left:#E5E5E5 solid 0.3rpx;
  860. @include flexlayout();
  861. height: 100%;
  862. width: 50%;
  863. text {
  864. font-size: 32rpx;
  865. font-family: PingFangSC-Medium, PingFang SC;
  866. font-weight: 500;
  867. color: #FF7119;
  868. }
  869. }
  870. }
  871. }
  872. .movableArea {
  873. position: fixed;
  874. top: 0;
  875. left: 0;
  876. width: 100%;
  877. height: 100%;
  878. pointer-events: none; //设置area元素不可点击,则事件便会下移至页面下层元素
  879. .movableView {
  880. pointer-events: auto; //可以点击
  881. width: 84rpx;
  882. height: 84rpx;
  883. padding: 0 30rpx;
  884. .img-IHg {
  885. width: 84rpx;
  886. height: 84rpx;
  887. background-color: #fff;
  888. box-shadow: 0px 8rpx 24rpx 0px rgba(220, 222, 229, 0.4);
  889. border-radius: 50%;
  890. display: flex;
  891. align-items: center;
  892. justify-content: center;
  893. }
  894. }
  895. }
  896. </style>