index.vue 16 KB

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