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">
								<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="isList = !isList">
									<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">
					<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>
	</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: []
		}
	},
	onLoad(){
		this.getData()
	},
	onShow() {
		this.changeTabbar()
	},
	methods: {
		// 跳转到购买详情页
		toBuy(){
			uni.navigateTo({
				url: '/pages/order/order_confirm?id='+this.setData.packageId+'&strip='+ this.setData.count + '&type='+this.tabStatus
			})
		},

		// 成片/素材
		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
				console.log(res,'res');

			})
		},

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

<style lang="scss" scoped>
.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: 44rpx;
					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: 24rpx;
						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: 48rpx;

				.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;
		}
	}
}
</style>