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, 'res66666');

      })
    },

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