fanxing-shop/pages/index/index.vue

<template>
	<view class="content">
		<view class="all">
			<view class="title">
				<!-- <image class="logo" :src="logoImg" mode="heightFix"></image> -->
				高投短视频分销系统
			</view>

			<!-- 顶部提示语 -->
			<!-- <view class="tips">
        <view class="tips-title">
          <text class="title-text">请选择适合您团队的套餐</text>
          <image :src="lineBg" class="line" mode="widthFix"></image>
        </view>
        <view class="tips-content">
          <view class="">不同套餐所享受权益不同，您可按需采购</view>
          <view class="flex aic">
            <text>有任何疑问请</text>
            <text class="cantant">联系客服</text>
          </view>
        </view>
      </view> -->

			<!-- 内容 -->
			<view class="tabs-wrapper">

				<!-- 成片/素材 -->
				<view class="tabs">
					<view class="tab-item" :class="tabStatus == 0 ? 'select' : ''" @click="tabStatusChange(0)">拍成片
					</view>
					<view class="tab-item" :class="tabStatus == 1 ? 'select' : ''" @click="tabStatusChange(1)">拍素材
					</view>
				</view>

				<!-- 套餐tabs -->
				<view class="tab_menus flex jcsb aic">
					<view class="tab-menu-item flex aic" v-for="(item, index) in tabLists" :key="index"
						@click="changeTabs(item,index)">
						<text :class="tabIndex == index ? 'now_menu' : ''">{{ item }}</text>
						<image v-if="index == tabIndex" :src="biaoqianImg"></image>
					</view>
				</view>

				<!-- 套餐内容 -->
				<view class="menu_con" :class="tabIndex == 0 ? 'bg1' : tabIndex == 1 ? 'bg2' : 'bg3'">
					<view class="cons">
						<view class="menu_title">
							<text class="metit">{{ setData.packageName }}</text>
							<view class="exmple flex aic" @click="showCase(setData)">
								<image class="play" :src="playImg"></image>
								<text>案例</text>
							</view>
						</view>
						<view class="amounts">
							<view class="now flex aife">
								<view class="money flex aife">
									<text class="dw fs40">¥</text>
									<text class="num">{{ setData.currentPrice }}</text>
									<text class="unit">/条</text>
								</view>
								<view class="limit">限时</view>
							</view>
							<view class="past flex aic">
								<text class="past_text fs28">原价</text>
								<text class="past_num fs32">¥{{ setData.originalPrice }}/条</text>
							</view>
						</view>
						<view class="choose">
							<view v-for="(item, index) in setData.descriptions" :key="index"
								class="choose_item-box flex aic jcsb">
								<view class="choose_item flex aic">
									<image :src="guoxuanImg"></image>
									<text>{{ item }}</text>
								</view>
								<view v-if="index == 0" class="choose_item-more flex aic" @click="showMoreCase">
									<text>查看更多</text>
									<image :src="!isList?moreImg:more_maxdown"></image>
								</view>
							</view>
							<!-- <view class="choose_item flex aic">
                <image :src="guoxuanImg"></image>
                <text>交付周期 3 天</text>
              </view>
              <view class="choose_item flex aic">
                <image :src="guoxuanImg"></image>
                <text>交付周期 3 天</text>
              </view>
              <view class="choose_item flex aic">
                <image :src="guoxuanImg"></image>
                <text>交付周期 3 天</text>
              </view> -->
						</view>
					</view>
				</view>

				<!-- 三大套餐对比 -->
				<view v-if="isList" class="menu_tmps" id="caseMore">
					<view class="tips">
						<view class="tips-title">
							<text class="title-text">三大套餐所有内容对比</text>
							<image :src="lineBg" class="line" mode="widthFix"></image>
						</view>
						<!-- <view class="tips-content">适用于TikTok、亚马逊、YouTub、INS</view> -->
					</view>
					<view class="menu_table">
						<view class="table-prop flex jcsb aic">
							<view class="table-prop-item">内容板块</view>
							<view v-for="item in tabLists" :key="item" class="table-prop-item">{{ item }}</view>
							<!-- <view class="table-prop-item">B类套餐</view>
              <view class="table-prop-item">C类套餐</view> -->
						</view>
						<view v-for="(item, index) in configs" :key="index" class="table-item">
							<view class="table-title flex aic jcsb">
								<text class="ttitle">{{ item.name }}</text>
								<view class="cutout flex aic" @click="item.flag=!item.flag">
									<text>{{ !item.flag ? '展开' : '收起' }}</text>
									<image :src="!item.flag?more_mindown:more_minup"></image>
								</view>
							</view>
							<view v-if="item.flag" v-for="(items, indexs) in item.data" :key="indexs"
								class="table-content">
								<view class="row flex aic jcsb">
									<view class="row_name">
										<text>{{ items.name }}</text>
									</view>
									<view v-for="(itm,inx) in items.data" :key="inx" class="row_value">
										<image v-if="!itm || itm == ''" :src="emptyImg" class="row_empty"></image>
										<text v-else>{{ itm }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="btom bg1">
			<view class="btn" :style="{ background: 'url(' + buybtnBg + ')' }" @click="toBuy()">立即购买</view>
		</view>
		<u-popup mode="center" :show="caseVisible" :closeOnClickOverlay="true" @close="caseVisible=false">
			<view class="video-list">
				<u-swiper height='400' :list="videoList" indicator indicatorMode="line" circular keyName="url"
					:autoplay="false"></u-swiper>

			</view>

		</u-popup>


	</view>
</template>

<script>
	import {
		home
	} from '@/apis/index'


	export default {
		data() {
			return {
				logoImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/img_logo.png',
				lineBg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_line.png',
				biaoqianImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_biaoqian.png',
				playImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_play.png',
				guoxuanImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_guoxuan.png',
				moreImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_more.png',
				more_minup: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_more_minup.png',
				more_mindown: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_more_mindown.png',
				more_maxdown: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_more_maxdown.png',
				emptyImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_empty.png',
				buybtnBg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_buy.png',
				tabStatus: 0, // 成片/素材
				tabIndex: 0, // 套餐tabs角标
				tabLists: [], // 套餐tabs列表
				packagesEntity: [],
				setData: {},
				isList: false,
				configs: [],
				caseVisible: false,
				videoList:[]
			}
		},
		onLoad() {
			this.getData()
		},
		onShow() {
			this.changeTabbar()
		},
		methods: {
			showCase(item) {
				this.videoList=item.videoUrls
				this.caseVisible = true
			},
			// 跳转到购买详情页
			toBuy() {
				
				uni.navigateTo({
					url: '/pages/order/order_confirm?id=' + this.setData.packageId + '&strip=' + this.setData
						.count + '&type=' + this.tabStatus
				})
			},
			showMoreCase() {
				this.isList = !this.isList
				if (this.isList) {
					uni.createSelectorQuery().select('#caseMore').boundingClientRect(data => {
						if (data) {
							uni.pageScrollTo({
								scrollTop: data.top + uni.getSystemInfoSync().scrollTop + 100,
								duration: 300
							});
						}
					}).exec(result=>{
						console.log('滚动',result);
					});
					
				}
			},

			// 成片/素材
			tabStatusChange(num) {
				this.tabStatus = num
				this.getData()
			},
			// 套餐tabs角标
			changeTabs(data, num) {
				this.tabIndex = num
				this.setData = this.packagesEntity.find(item => item.packageName === data)
			},
			// 获取列表
			getData() {
				home({
					type: this.tabStatus
				}).then(res => {
					this.tabLists = res.packages
					this.packagesEntity = res.packagesEntity
					this.setData = this.packagesEntity[0]
					this.configs = res.configs

				})
			},

			// tabbar样式
			changeTabbar() {
				uni.setTabBarStyle({
					color: '#9EA3B1',
					selectedColor: '#FFFFFF',
					backgroundColor: '#0D121A'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		font-weight: 600 !important;
	}

	.content {
		width: 100%;
		// min-height: 100vh;
		background-color: #0D121A;
		position: absolute;
		top: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;

		.all {
			flex: 1;
			overflow: auto;
			padding: 0 24rpx 24rpx;

		}

		.title {
			padding: 16rpx 8rpx;
			font-weight: normal;
			font-size: 32rpx;
			color: #FFFFFF;

			.logo {
				height: 56rpx;
			}
		}

		.tips {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-top: 96rpx;

			.tips-title {
				display: flex;
				flex-direction: column;
				align-items: flex-end;

				.title-text {
					font-weight: bold;
					font-size: 40rpx;
					color: transparent;
					background: linear-gradient(54.35820730218651deg, #00C1FF 0%, #2FFFFC 100%);
					-webkit-background-clip: text;
				}

				.line {
					width: 112rpx;
				}
			}

			.tips-content {
				font-size: 32rpx;
				color: #F8FAFF;
				margin-top: 28rpx;

				.cantant {
					font-weight: 400;
					font-size: 32rpx;
					color: #00ECFF;
					background: linear-gradient(54.35820730218651deg, #00C1FF 0%, #2FFFFC 100%);
					-webkit-background-clip: text;
					text-decoration: underline;
					margin-left: 8rpx;
				}
			}
		}

		.tabs-wrapper {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 52rpx;

			.tabs {
				display: flex;
				justify-content: center;
				width: 368rpx;
				height: 72rpx;
				background: rgba($color: #FFF, $alpha: 0.1);
				border-radius: 36rpx;

				.tab-item {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					width: 50%;
					height: 64rpx;
					color: #F6F8FF;
				}
			}

			.select {
				background: linear-gradient(144deg, #00C1FF 0%, #2FFFFC 100%);
				border-radius: 32rpx;
				color: #0D121A !important;
			}

			.tab_menus {
				padding: 64rpx 40rpx 56rpx;
				width: 100%;

				.tab-menu-item {
					color: #9EA3B1;
					font-size: 28rpx;

					.now_menu {
						font-size: 36rpx;
						color: #F8FAFF !important;
						margin-right: 10rpx;
					}

					image {
						width: 36rpx;
						height: 36rpx;
					}
				}

			}


			.menu_con {
				width: 100%;
				border-radius: 24rpx;
				border: 2rpx solid rgba(255, 255, 255, 0.12);
				margin: 0 24rpx;
				padding: 56rpx 32rpx 48rpx;

				.cons {
					padding: 0 16rpx;
				}

				.menu_title {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.metit {
						font-size: 44px;
						color: #F8FAFF;
					}

					.exmple {
						width: 156rpx;
						height: 64rpx;
						background: #0D121A;
						border-radius: 12rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						color: #FFFFFF;

						.play {
							width: 32rpx;
							height: 32rpx;
							margin-right: 12rpx;
						}
					}
				}

				.amounts {
					margin-top: 72rpx;

					.now {
						.money {
							font-size: 32rpx;
							color: #FFFFFF;

							.dw {
								line-height: 40rpx;
							}

							.num {
								font-size: 72rpx;
								line-height: 56rpx;
							}

							.unit {
								margin-left: 24rpx;
							}
						}

						.limit {
							margin-left: 24px;
							width: 72rpx;
							height: 40rpx;
							background: linear-gradient(144deg, #00C1FF 0%, #2FFFFC 100%);
							border-radius: 8rpx;
							font-weight: 500;
							font-size: 24rpx;
							color: #0D121A;
							text-align: center;
							line-height: 40rpx;
						}
					}

					.past {
						color: #BCC0C5;
						margin-top: 34rpx;

						.past_text {
							margin-right: 8rpx;
						}
					}
				}

				.choose {
					margin-top: 64rpx;

					.choose_item-box {
						margin-top: 16rpx;

						image {
							width: 48rpx;
							height: 48rpx;
							margin-right: 24rpx;
						}

						text {
							color: #F8FAFF;
							font-size: 28rpx;
						}
					}

					.choose_item-more {
						text {
							font-size: 28rpx;
							background: linear-gradient(54.35820730218651deg, #00C1FF 0%, #2FFFFC 100%);
							color: transparent;
							-webkit-background-clip: text;
						}

						image {
							width: 32rpx;
							height: 32rpx;
							margin-left: 12rpx;
						}
					}

					.choose_item-box:nth-child(1) {
						margin-top: 0;
					}
				}
			}

			.menu_tmps {
				width: 100%;

				.menu_table {
					background: linear-gradient(180deg, rgba(9, 155, 255, 0.12) 0%, rgba(66, 121, 192, 0.08) 100%);
					border-radius: 24rpx;
					border: 2rpx solid #003849;
					margin-top: 48px;

					.table-prop {
						padding: 36rpx 40rpx;
						color: #F8FAFF;
						font-size: 24rpx;
						border-bottom: #1D3A4A 2rpx solid;
					}

					.table-item {
						padding: 40rpx;
						font-size: 24rpx;
						border-bottom: #1D3A4A 2rpx solid;

						.table-title {
							.ttitle {
								background: linear-gradient(311.670791165708deg, #00C1FF 0%, #2FFFFC 100%);
								-webkit-background-clip: text;
								color: transparent;
							}

							.cutout {
								text {
									background: linear-gradient(54.35820730218651deg, #00C1FF 0%, #2FFFFC 100%);
									-webkit-background-clip: text;
									color: transparent;
								}

								image {
									width: 32rpx;
									height: 32rpx;
									margin-left: 8rpx;
								}
							}
						}

						.table-content {
							margin-top: 40rpx;
							color: #FFFFFF;

							.row {
								margin-top: 40rpx;
								width: 100%;

								.row_name {
									white-space: nowrap;
									width: 15%;
									display: flex;
									flex-direction: column;

									text:nth-child(2) {
										font-size: 20rpx;
										text-align: center;
									}
								}

								.row_value {
									width: 15%;
									text-align: center;
									display: flex;
									justify-content: center;
								}

								.row_empty {
									width: 32rpx;
									height: 32rpx;
								}
							}

							.row:nth-child(1) {
								margin-top: 0;
							}
						}
					}

					.table-item:last-child {
						border: none;
					}
				}
			}
		}

		.bg1 {
			background: linear-gradient(180deg, rgba(99, 113, 235, 0.2) 0%, rgba(94, 108, 228, 0.08) 100%);
		}

		.bg2 {
			background: linear-gradient(180deg, rgba(31, 113, 227, 0.2) 0%, rgba(31, 113, 227, 0.08) 100%);
		}

		.bg3 {
			background: linear-gradient(180deg, rgba(0, 161, 205, 0.2) 0%, rgba(0, 161, 205, 0.08) 100%);
		}

		.btom {
			flex-shrink: 1;
			padding: 24rpx 32rpx;

			.btn {
				background-size: 100% 100% !important;
				width: 100%;
				height: 84rpx;
				text-align: center;
				line-height: 84rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #0D121A;
			}
		}
	}

	.u-popup {
		flex: 0;
		z-index: 999;
	}

	.video-list {
		margin: 0rpx auto;
		height: 800rpx;
		width: 600rpx;
		background-color: #000;
	}
</style>