index.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652
  1. <template>
  2. <view class="content">
  3. <view class="all">
  4. <view class="title">
  5. <!-- <image class="logo" :src="logoImg" mode="heightFix"></image> -->
  6. 高投短视频分销系统
  7. </view>
  8. <!-- 顶部提示语 -->
  9. <!-- <view class="tips">
  10. <view class="tips-title">
  11. <text class="title-text">请选择适合您团队的套餐</text>
  12. <image :src="lineBg" class="line" mode="widthFix"></image>
  13. </view>
  14. <view class="tips-content">
  15. <view class="">不同套餐所享受权益不同,您可按需采购</view>
  16. <view class="flex aic">
  17. <text>有任何疑问请</text>
  18. <text class="cantant">联系客服</text>
  19. </view>
  20. </view>
  21. </view> -->
  22. <!-- 内容 -->
  23. <view class="tabs-wrapper">
  24. <!-- 成片/素材 -->
  25. <view class="tabs">
  26. <view class="tab-item" :class="tabStatus == 0 ? 'select' : ''" @click="tabStatusChange(0)">拍成片
  27. </view>
  28. <view class="tab-item" :class="tabStatus == 1 ? 'select' : ''" @click="tabStatusChange(1)">拍素材
  29. </view>
  30. </view>
  31. <!-- 套餐tabs -->
  32. <view class="tab_menus flex jcsb aic">
  33. <view class="tab-menu-item flex aic" v-for="(item, index) in tabLists" :key="index"
  34. @click="changeTabs(item, index)">
  35. <text :class="tabIndex == index ? 'now_menu' : ''">{{ item }}</text>
  36. <image v-if="index == tabIndex" :src="biaoqianImg"></image>
  37. </view>
  38. </view>
  39. <!-- 套餐内容 -->
  40. <view v-if="setData" class="menu_con" :class="tabIndex == 0 ? 'bg1' : tabIndex == 1 ? 'bg2' : 'bg3'">
  41. <view class="cons">
  42. <view class="menu_title">
  43. <text class="metit">{{ setData.packageName }}</text>
  44. <view class="exmple flex aic" @click="showCase(setData)">
  45. <image class="play" :src="playImg"></image>
  46. <text>案例</text>
  47. </view>
  48. </view>
  49. <view class="amounts">
  50. <view class="now flex aife">
  51. <view class="money flex aife">
  52. <text class="dw fs40">¥</text>
  53. <text class="num">{{ setData.currentPrice }}</text>
  54. <text class="unit">/条</text>
  55. </view>
  56. <view v-if="setData.isLimited" class="limit">限时</view>
  57. </view>
  58. <view class="past flex aic">
  59. <text class="past_text fs28">原价</text>
  60. <text class="past_num fs32">¥{{ setData.originalPrice }}/条</text>
  61. </view>
  62. </view>
  63. <view class="choose">
  64. <view v-for="(item, index) in setData.descriptions" :key="index"
  65. class="choose_item-box flex aic">
  66. <view class="choose_item flex aic">
  67. <image :src="guoxuanImg"></image>
  68. <text>{{ item }}</text>
  69. </view>
  70. <!-- <view v-if="index == 0" class="choose_item-more flex aic" @click="showMoreCase">
  71. <text>查看更多</text>
  72. <image :src="!isList ? moreImg : more_maxdown"></image>
  73. </view> -->
  74. </view>
  75. <!-- <view class="choose_item flex aic">
  76. <image :src="guoxuanImg"></image>
  77. <text>交付周期 3 天</text>
  78. </view>
  79. <view class="choose_item flex aic">
  80. <image :src="guoxuanImg"></image>
  81. <text>交付周期 3 天</text>
  82. </view>
  83. <view class="choose_item flex aic">
  84. <image :src="guoxuanImg"></image>
  85. <text>交付周期 3 天</text>
  86. </view> -->
  87. </view>
  88. </view>
  89. </view>
  90. <!-- 三大套餐对比 -->
  91. <!-- <view v-if="isList" class="menu_tmps" id="caseMore">
  92. <view class="tips">
  93. <view class="tips-title">
  94. <text class="title-text">三大套餐所有内容对比</text>
  95. <image :src="lineBg" class="line" mode="widthFix"></image>
  96. </view>
  97. </view>
  98. <view class="menu_table">
  99. <view class="table-prop flex jcsb aic">
  100. <view class="table-prop-item">内容板块</view>
  101. <view v-for="item in tabLists" :key="item" class="table-prop-item">{{ item }}</view>
  102. </view>
  103. <view v-for="(item, index) in configs" :key="index" class="table-item">
  104. <view class="table-title flex aic jcsb">
  105. <text class="ttitle">{{ item.name }}</text>
  106. <view class="cutout flex aic" @click="item.flag = !item.flag">
  107. <text>{{ !item.flag ? '展开' : '收起' }}</text>
  108. <image :src="!item.flag ? more_mindown : more_minup"></image>
  109. </view>
  110. </view>
  111. <view v-if="item.flag" v-for="(items, indexs) in item.data" :key="indexs"
  112. class="table-content">
  113. <view class="row flex aic jcsb">
  114. <view class="row_name">
  115. <text>{{ items.name }}</text>
  116. </view>
  117. <view v-for="(itm, inx) in items.data" :key="inx" class="row_value">
  118. <image v-if="!itm || itm == ''" :src="emptyImg" class="row_empty"></image>
  119. <text v-else>{{ itm }}</text>
  120. </view>
  121. </view>
  122. </view>
  123. </view>
  124. </view>
  125. </view> -->
  126. </view>
  127. </view>
  128. <view v-if="setData" class="btom bg1">
  129. <view class="btn" :style="{ background: 'url(' + buybtnBg + ')' }" @click="toBuy()">立即购买</view>
  130. </view>
  131. <u-popup mode="center" :show="caseVisible" :closeOnClickOverlay="true" @close="caseVisible = false">
  132. <view class="video-list">
  133. <u-swiper height='400' :list="videoList" indicator indicatorMode="line" circular keyName="url"
  134. :autoplay="false"></u-swiper>
  135. </view>
  136. </u-popup>
  137. </view>
  138. </template>
  139. <script>
  140. import {
  141. home
  142. } from '@/apis/index'
  143. export default {
  144. data() {
  145. return {
  146. logoImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/img_logo.png',
  147. lineBg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_line.png',
  148. biaoqianImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_biaoqian.png',
  149. playImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_play.png',
  150. guoxuanImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_guoxuan.png',
  151. moreImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_more.png',
  152. more_minup: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_more_minup.png',
  153. more_mindown: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_more_mindown.png',
  154. more_maxdown: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_more_maxdown.png',
  155. emptyImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_empty.png',
  156. buybtnBg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_buy.png',
  157. tabStatus: 0, // 成片/素材
  158. tabIndex: 0, // 套餐tabs角标
  159. tabLists: [], // 套餐tabs列表
  160. packagesEntity: [],
  161. setData: {},
  162. isList: false,
  163. configs: [],
  164. caseVisible: false,
  165. videoList: []
  166. }
  167. },
  168. onLoad() {
  169. this.getData()
  170. },
  171. onShow() {
  172. this.changeTabbar()
  173. },
  174. methods: {
  175. showCase(item) {
  176. this.videoList = item.videoUrls
  177. this.caseVisible = true
  178. },
  179. // 跳转到购买详情页
  180. toBuy() {
  181. uni.navigateTo({
  182. url: '/pages/order/order_confirm?id=' + this.setData.packageId + '&strip=' + this.setData
  183. .count + '&type=' + this.tabStatus
  184. })
  185. },
  186. showMoreCase() {
  187. this.isList = !this.isList
  188. if (this.isList) {
  189. uni.createSelectorQuery().select('#caseMore').boundingClientRect(data => {
  190. if (data) {
  191. uni.pageScrollTo({
  192. scrollTop: data.top + uni.getSystemInfoSync().scrollTop + 100,
  193. duration: 300
  194. });
  195. }
  196. }).exec(result => {
  197. });
  198. }
  199. },
  200. // 成片/素材
  201. tabStatusChange(num) {
  202. this.tabStatus = num
  203. this.tabIndex = 0
  204. this.getData()
  205. },
  206. // 套餐tabs角标
  207. changeTabs(data, num) {
  208. this.tabIndex = num
  209. this.setData = this.packagesEntity.find(item => item.packageName === data)
  210. },
  211. // 获取列表
  212. getData() {
  213. home({
  214. type: this.tabStatus
  215. }).then(res => {
  216. this.tabLists = res.packages
  217. this.packagesEntity = res.packagesEntity || []
  218. this.setData = this.packagesEntity[0]
  219. this.configs = res.configs
  220. })
  221. },
  222. // tabbar样式
  223. changeTabbar() {
  224. uni.setTabBarStyle({
  225. color: '#9EA3B1',
  226. selectedColor: '#FFFFFF',
  227. backgroundColor: '#0D121A'
  228. })
  229. }
  230. }
  231. }
  232. </script>
  233. <style lang="scss" scoped>
  234. .title {
  235. font-weight: 600 !important;
  236. }
  237. .content {
  238. width: 100%;
  239. // min-height: 100vh;
  240. background-color: #0D121A;
  241. position: absolute;
  242. top: 0;
  243. bottom: 0;
  244. display: flex;
  245. flex-direction: column;
  246. .all {
  247. flex: 1;
  248. overflow: auto;
  249. padding: 0 24rpx 24rpx;
  250. }
  251. .title {
  252. padding: 16rpx 8rpx;
  253. font-weight: normal;
  254. font-size: 32rpx;
  255. color: #FFFFFF;
  256. .logo {
  257. height: 56rpx;
  258. }
  259. }
  260. .tips {
  261. display: flex;
  262. flex-direction: column;
  263. justify-content: center;
  264. align-items: center;
  265. margin-top: 96rpx;
  266. .tips-title {
  267. display: flex;
  268. flex-direction: column;
  269. align-items: flex-end;
  270. .title-text {
  271. font-weight: bold;
  272. font-size: 40rpx;
  273. color: transparent;
  274. background: linear-gradient(54.35820730218651deg, #00C1FF 0%, #2FFFFC 100%);
  275. -webkit-background-clip: text;
  276. }
  277. .line {
  278. width: 112rpx;
  279. }
  280. }
  281. .tips-content {
  282. font-size: 32rpx;
  283. color: #F8FAFF;
  284. margin-top: 28rpx;
  285. .cantant {
  286. font-weight: 400;
  287. font-size: 32rpx;
  288. color: #00ECFF;
  289. background: linear-gradient(54.35820730218651deg, #00C1FF 0%, #2FFFFC 100%);
  290. -webkit-background-clip: text;
  291. text-decoration: underline;
  292. margin-left: 8rpx;
  293. }
  294. }
  295. }
  296. .tabs-wrapper {
  297. display: flex;
  298. flex-direction: column;
  299. align-items: center;
  300. margin-top: 52rpx;
  301. .tabs {
  302. display: flex;
  303. justify-content: center;
  304. width: 368rpx;
  305. height: 72rpx;
  306. background: rgba($color: #FFF, $alpha: 0.1);
  307. border-radius: 36rpx;
  308. .tab-item {
  309. display: flex;
  310. justify-content: center;
  311. align-items: center;
  312. font-size: 28rpx;
  313. width: 50%;
  314. height: 64rpx;
  315. color: #F6F8FF;
  316. }
  317. }
  318. .select {
  319. background: linear-gradient(144deg, #00C1FF 0%, #2FFFFC 100%);
  320. border-radius: 32rpx;
  321. color: #0D121A !important;
  322. }
  323. .tab_menus {
  324. padding: 64rpx 40rpx 56rpx;
  325. width: 100%;
  326. .tab-menu-item {
  327. color: #9EA3B1;
  328. font-size: 28rpx;
  329. .now_menu {
  330. font-size: 36rpx;
  331. color: #F8FAFF !important;
  332. margin-right: 10rpx;
  333. }
  334. image {
  335. width: 36rpx;
  336. height: 36rpx;
  337. }
  338. }
  339. }
  340. .menu_con {
  341. width: 100%;
  342. border-radius: 24rpx;
  343. border: 2rpx solid rgba(255, 255, 255, 0.12);
  344. margin: 0 24rpx;
  345. padding: 56rpx 32rpx 48rpx;
  346. .cons {
  347. padding: 0 16rpx;
  348. }
  349. .menu_title {
  350. display: flex;
  351. justify-content: space-between;
  352. align-items: center;
  353. .metit {
  354. font-size: 44px;
  355. color: #F8FAFF;
  356. }
  357. .exmple {
  358. width: 156rpx;
  359. height: 64rpx;
  360. background: #0D121A;
  361. border-radius: 12rpx;
  362. display: flex;
  363. align-items: center;
  364. justify-content: center;
  365. font-size: 28rpx;
  366. color: #FFFFFF;
  367. .play {
  368. width: 32rpx;
  369. height: 32rpx;
  370. margin-right: 12rpx;
  371. }
  372. }
  373. }
  374. .amounts {
  375. margin-top: 72rpx;
  376. .now {
  377. .money {
  378. font-size: 32rpx;
  379. color: #FFFFFF;
  380. .dw {
  381. line-height: 40rpx;
  382. }
  383. .num {
  384. font-size: 72rpx;
  385. line-height: 56rpx;
  386. }
  387. .unit {
  388. margin-left: 24rpx;
  389. }
  390. }
  391. .limit {
  392. margin-left: 24px;
  393. width: 72rpx;
  394. height: 40rpx;
  395. background: linear-gradient(144deg, #00C1FF 0%, #2FFFFC 100%);
  396. border-radius: 8rpx;
  397. font-weight: 500;
  398. font-size: 24rpx;
  399. color: #0D121A;
  400. text-align: center;
  401. line-height: 40rpx;
  402. }
  403. }
  404. .past {
  405. color: #BCC0C5;
  406. margin-top: 34rpx;
  407. .past_text {
  408. margin-right: 8rpx;
  409. }
  410. }
  411. }
  412. .choose {
  413. margin-top: 64rpx;
  414. flex-wrap: wrap;
  415. display: flex;
  416. align-items: center;
  417. justify-content: space-between;
  418. .choose_item-box {
  419. height: 70rpx;
  420. white-space: nowrap;
  421. image {
  422. width: 48rpx;
  423. height: 48rpx;
  424. margin-right: 24rpx;
  425. }
  426. text {
  427. color: #F8FAFF;
  428. font-size: 28rpx;
  429. white-space: nowrap;
  430. }
  431. .choose_item {
  432. flex-wrap: nowrap;
  433. text {
  434. white-space: nowrap;
  435. }
  436. }
  437. }
  438. .choose_item-more {
  439. text {
  440. font-size: 28rpx;
  441. background: linear-gradient(54.35820730218651deg, #00C1FF 0%, #2FFFFC 100%);
  442. color: transparent;
  443. -webkit-background-clip: text;
  444. }
  445. image {
  446. width: 32rpx;
  447. height: 32rpx;
  448. margin-left: 12rpx;
  449. }
  450. }
  451. .choose_item-box:nth-child(1) {
  452. margin-top: 0;
  453. }
  454. }
  455. }
  456. .menu_tmps {
  457. width: 100%;
  458. .menu_table {
  459. background: linear-gradient(180deg, rgba(9, 155, 255, 0.12) 0%, rgba(66, 121, 192, 0.08) 100%);
  460. border-radius: 24rpx;
  461. border: 2rpx solid #003849;
  462. margin-top: 48px;
  463. .table-prop {
  464. padding: 36rpx 40rpx;
  465. color: #F8FAFF;
  466. font-size: 24rpx;
  467. border-bottom: #1D3A4A 2rpx solid;
  468. }
  469. .table-item {
  470. padding: 40rpx;
  471. font-size: 24rpx;
  472. border-bottom: #1D3A4A 2rpx solid;
  473. .table-title {
  474. .ttitle {
  475. background: linear-gradient(311.670791165708deg, #00C1FF 0%, #2FFFFC 100%);
  476. -webkit-background-clip: text;
  477. color: transparent;
  478. }
  479. .cutout {
  480. text {
  481. background: linear-gradient(54.35820730218651deg, #00C1FF 0%, #2FFFFC 100%);
  482. -webkit-background-clip: text;
  483. color: transparent;
  484. }
  485. image {
  486. width: 32rpx;
  487. height: 32rpx;
  488. margin-left: 8rpx;
  489. }
  490. }
  491. }
  492. .table-content {
  493. margin-top: 40rpx;
  494. color: #FFFFFF;
  495. .row {
  496. margin-top: 40rpx;
  497. width: 100%;
  498. .row_name {
  499. // white-space: nowrap;
  500. width: 20%;
  501. display: flex;
  502. flex-direction: column;
  503. text:nth-child(2) {
  504. font-size: 20rpx;
  505. text-align: center;
  506. }
  507. }
  508. .row_value {
  509. width: 15%;
  510. text-align: center;
  511. display: flex;
  512. justify-content: center;
  513. }
  514. .row_empty {
  515. width: 32rpx;
  516. height: 32rpx;
  517. }
  518. }
  519. .row:nth-child(1) {
  520. margin-top: 0;
  521. }
  522. }
  523. }
  524. .table-item:last-child {
  525. border: none;
  526. }
  527. }
  528. }
  529. }
  530. .bg1 {
  531. background: linear-gradient(180deg, rgba(99, 113, 235, 0.2) 0%, rgba(94, 108, 228, 0.08) 100%);
  532. }
  533. .bg2 {
  534. background: linear-gradient(180deg, rgba(31, 113, 227, 0.2) 0%, rgba(31, 113, 227, 0.08) 100%);
  535. }
  536. .bg3 {
  537. background: linear-gradient(180deg, rgba(0, 161, 205, 0.2) 0%, rgba(0, 161, 205, 0.08) 100%);
  538. }
  539. .btom {
  540. flex-shrink: 1;
  541. padding: 24rpx 32rpx;
  542. .btn {
  543. background-size: 100% 100% !important;
  544. width: 100%;
  545. height: 84rpx;
  546. text-align: center;
  547. line-height: 84rpx;
  548. font-weight: bold;
  549. font-size: 32rpx;
  550. color: #0D121A;
  551. }
  552. }
  553. }
  554. .u-popup {
  555. flex: 0;
  556. z-index: 999;
  557. }
  558. .video-list {
  559. margin: 0rpx auto;
  560. height: 800rpx;
  561. width: 600rpx;
  562. background-color: #000;
  563. }
  564. </style>