<template>
  <view
    style="
      height: 100vh;
      overflow: hidden;
      width: 100vw;
      font-family: 'pingfang';
    "
  >
    <scroll-view
      scroll-y="true"
      style="width: 100%; height: 100%"
      @scroll="scroll"
    >
      <view
        style="height: 700rpx; position: relative; z-index: 1"
        :style="{ opacity: 100 - boxOption + '%' }"
      >
        <u-swiper
          :list="imgsList"
          :effect3d="false"
          :height="700"
          :interval="5000"
          :border-radius="0"
          @click="previewImage"
          name="url"
          v-if="active == 1"
        ></u-swiper>
        <view
          style="background-color: #111; height: 700rpx; position: relative"
          v-if="active == 0"
        >
          <video
            id="myVideo"
            :src="detailData.VideoUrl"
            style="width: 100%; height: 100%"
            :controls="controls"
            :show-center-play-btn="false"
            :show-fullscreen-btn="false"
            @fullscreenchange="videoControl"
            object-fit="fill"
          ></video>
          <view
            @click="enlarge"
            style="
              position: absolute;
              left: 50%;
              top: 50%;
              margin-top: -49rpx;
              margin-left: -49rpx;
              width: 98rpx;
              height: 98rpx;
              border-radius: 20rpx;
              background-color: rgba(255, 255, 255, 0.4);
              display: flex;
              align-items: center;
              justify-content: center;
            "
          >
            <!-- 播放按钮 -->
            <image
              src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616471847000_345.png"
              style="width: 37rpx; height: 44rpx"
              mode=""
            ></image>
          </view>
        </view>
        <view
          style="
            width: 100px;
            height: 50rpx;
            position: absolute;
            background-color: rgba(255, 255, 255, 0.6);
            border-radius: 50rpx;
            left: 50%;
            bottom: 80px;
            margin-left: -50px;
          "
          v-if="detailData.VideoUrl != ''"
        >
          <u-tabs
            bg-color="rgba(0,0,0,0)"
            :is-scroll="false"
            name="Name"
            :list="typeList"
            :active-color="mainColor"
            :current="active"
            @change="changeHandler"
            :show-bar="true"
            :bold="false"
            height="50"
            duration="0"
            font-size="24"
            :activeFontSize="24"
            :typeStyle="2"
          >
          </u-tabs>
        </view>
        <view
          v-if="imgsList.length > 0"
          style="
            height: 50rpx;
            position: absolute;
            background-color: rgba(0, 0, 0, 0.6);
            border-radius: 50rpx;
            left: 30rpx;
            bottom: 80px;
            color: #fff;
            padding: 0 18rpx;
            display: flex;
            align-items: center;
          "
        >
          <u-icon
            name="photo-o"
            size="26"
            color="#FFF"
            style="margin-right: 6rpx"
          ></u-icon>
          <text style="font-size: 22rpx; font-family: pingfang">{{
            imgsList.length
          }}</text>
        </view>
        <view
          @click="goback"
          :style="[titleStyle, { opacity: '100% !important' }]"
          style="position: fixed; top: 0; left: 0; padding-left: 6rpx"
        >
          <u-icon
            name="arrow-left"
            size="44"
            color="#FFF"
            style="margin-top: 22rpx"
          ></u-icon>
        </view>
      </view>
      <view class="kotra-title" :style="[titleStyle]">
        <view @click="goback">
          <u-icon name="arrow-left" size="44"></u-icon>
        </view>
        <view style="flex: 1; margin-left: 30rpx; text-align: left">{{
          detailData.CarrierName
        }}</view>
      </view>
      <view style="position: relative; z-index: 2">
        <view
          style="
            position: relative;
            top: -70px;
            border-top-left-radius: 30px;
            border-top-right-radius: 30px;
            height: 900px;
            background-color: #fff;
            padding: 40rpx;
          "
        >
          <view
            style="display: flex; align-items: flex-start; margin-bottom: 30rpx"
          >
            <view style="flex: 1">
              <view style="font-size: 42rpx; color: #1f1f1f; font-weight: 600">
                {{ detailData.CarrierName }}
              </view>
              <view
                style="margin-top: 16rpx; display: flex; align-items: center"
              >
                <u-tag
                  :text="ProjectType"
                  mode="dark"
                  size="mini"
                  :bg-color="mainColor"
                />
                <view class="carriertag" v-if="detailData.FirstStoreTest === 1">
                  <view class="carriertagsub1">首店</view>
                  <view class="carriertagsub2">试验场</view>
                </view>
              </view>
            </view>
            <!-- 关注 -->
            <view
              style="
                width: 86px;
                height: 86px;
                margin-left: 12rpx;
                margin-right: -40rpx;
              "
              @click="follow"
            >
              <image
                v-if="detailData.CollectId == 0"
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616480343000_509.png"
                style="width: 100%; height: 100%"
              ></image>
              <image
                v-if="detailData.CollectId > 0"
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616480343000_370.png"
                style="width: 100%; height: 100%"
              ></image>
            </view>
          </view>
          <!-- //奖章 -->
          <view class="MedalBox" v-if="detailData.listEnroll.length > 0">
            <view
              v-for="(item, index) in detailData.listEnroll"
              :key="index"
              class="MedalBoxItem"
            >
              <image
                :src="item.MedalImageBig"
                mode="heightFix"
                style="height: 100%"
              />
            </view>
          </view>
          <!-- 首店数量 -->
          <view
            class="FirstShopBox"
            v-if="detailData.FirstShopNumList.length > 0"
          >
            <view
              v-for="(item, index) in detailData.FirstShopNumList"
              :key="index"
              class="FirstShopBoxItem"
              v-if="item.Num > 0"
            >
              <view
                style="
                  width: 100%;
                  font-size: 34rpx;
                  font-weight: bold;
                  color: #f60027;
                  margin-bottom: 20rpx;
                "
                >{{ item.Num }}</view
              >
              <view style="width: 100%; font-size: 24rpx; color: #a4a4a4">{{
                item.Name
              }}</view>
            </view>
          </view>
          <view
            style="
              display: flex;
              align-items: center;
              margin-bottom: 30rpx;
              font-weight: 500;
            "
          >
            <view style="flex: 1; font-size: 26rpx; color: #a4a4a4">
              <text style="width: 156rpx; text-align: right">去年业绩：</text>
              <text
                style="color: #f30329; font-weight: bold"
                v-if="detailData.YeJi > 0"
                >{{ detailData.YeJi }}w</text
              >
              <text
                style="color: #f30329; font-weight: bold"
                v-if="detailData.YeJi <= 0"
                >/</text
              >
            </view>
            <view style="flex: 1; font-size: 26rpx; color: #a4a4a4">
              <text style="width: 156rpx; text-align: right">商业体量：</text>
              <text style="color: #f30329; font-weight: bold"
                >{{ detailData.CarrierSize }}万㎡</text
              >
            </view>
          </view>
          <view
            style="
              display: flex;
              align-items: center;
              margin-bottom: 30rpx;
              font-weight: 500;
            "
          >
            <view style="flex: 1; font-size: 26rpx; color: #a4a4a4">
              <text style="width: 156rpx; text-align: right">商业层数：</text>
              <text style="color: #f30329; font-weight: bold">{{
                detailData.LayersNum
              }}</text>
            </view>
            <view style="flex: 1; font-size: 26rpx; color: #a4a4a4">
              <text style="width: 156rpx; text-align: right">车位数量：</text>
              <text
                style="color: #f30329; font-weight: bold"
                v-if="detailData.CarNum > 0"
                >{{ detailData.CarNum }}</text
              >
              <text
                style="color: #f30329; font-weight: bold"
                v-if="detailData.CarNum <= 0"
                >/</text
              >
            </view>
          </view>
          <view
            style="
              display: flex;
              align-items: center;
              margin-bottom: 30rpx;
              font-weight: 500;
            "
          >
            <view style="flex: 1; font-size: 26rpx; color: #a4a4a4">
              <text style="width: 156rpx; text-align: right">开业时间：</text>
              <text style="color: #f30329; font-weight: bold">{{
                detailData.CreateDate.slice(0, 10)
              }}</text>
            </view>
            <view style="flex: 1; font-size: 26rpx; color: #a4a4a4">
              <text style="width: 156rpx; text-align: right">店铺数量：</text>
              <text style="color: #f30329; font-weight: bold">{{
                detailData.ShopNum
              }}</text>
            </view>
          </view>
          <view
            style="
              display: flex;
              align-items: center;
              margin-bottom: 30rpx;
              font-weight: 500;
            "
          >
            <view style="flex: 1; font-size: 26rpx; color: #a4a4a4">
              <text style="width: 156rpx; text-align: right">可租面积：</text>
              <text
                style="color: #f30329; font-weight: bold"
                v-if="detailData.AreaRequirement > 0"
                >{{ detailData.AreaRequirement }}万㎡</text
              >
            </view>
            <view style="flex: 1; font-size: 26rpx; color: #a4a4a4">
              <text style="width: 156rpx; text-align: right">经营面积：</text>
              <text
                style="color: #f30329; font-weight: bold"
                v-if="detailData.BuiltUpArea > 0"
                >{{ detailData.BuiltUpArea }}万㎡</text
              >
            </view>
          </view>
          <view
            style="
              font-size: 26rpx;
              color: #a4a4a4;
              margin-bottom: 30rpx;
              font-weight: 500;
            "
          >
            <text
              style="width: 128rpx; text-align: right; display: inline-block"
              >开发商：</text
            >
            <text style="color: #1f1f1f; font-weight: bold">{{
              detailData.Developers
            }}</text>
          </view>
          <view
            style="
              font-size: 26rpx;
              color: #a4a4a4;
              margin-bottom: 30rpx;
              font-weight: 500;
            "
          >
            <text style="width: 156rpx; text-align: right">地铁站点：</text>
            <text
              style="color: #1f1f1f; font-weight: bold"
              v-if="detailData.CarrierMetroList != null"
              >{{ detailData.CarrierMetroList[0].MetroNum }}号线{{
                detailData.CarrierMetroList[0].MetroName
              }},&nbsp;{{ detailData.CarrierMetroList[0].Distance }}</text
            >
            <text
              style="color: #1f1f1f; font-weight: bold"
              v-if="detailData.CarrierMetroList == null"
              >暂无地铁新线</text
            >
          </view>
          <view style="display: flex; align-items: center">
            <view
              style="
                width: 146rpx;
                height: 150rpx;
                background: #ffffff;
                box-shadow: 0px 4px 30px 0px rgba(167, 167, 167, 0.39);
                border-radius: 20px;
                display: flex;
                align-items: center;
                padding: 10rpx;
              "
            >
              <image
                :src="detailData.Logo"
                style="width: 100%; height: auto"
                mode="widthFix"
              ></image>
            </view>
            <view
              @click="goMap(detailData.Address, LatAndLon.lon, LatAndLon.lat)"
              style="
                flex: 1;
                padding-left: 34rpx;
                background: rgba(252, 42, 76, 0.05);
                height: 95rpx;
                display: flex;
                align-items: center;
              "
            >
              <image
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616480343000_382.png"
                style="width: 27rpx; height: 33rpx; margin-right: 26rpx"
              ></image>
              <view
                style="
                  width: 366rpx;
                  font-size: 30rpx;
                  color: #1f1f1f;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  font-weight: 600;
                "
              >
                <!-- 武侯区科华中路 2 号 -->{{ detailData.Address }}</view
              >
              <u-icon
                name="arrow"
                size="22"
                color="#C2C2D1"
                style="margin: 0 30rpx 0 20rpx"
              ></u-icon>
            </view>
          </view>
          <view
            style="
              height: 1px;
              background: #333f53;
              opacity: 0.1;
              margin: 60rpx 0;
            "
          ></view>
          <view style="margin-bottom: 83rpx; text-align: right">
            <view style="text-align: left">
              <image
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/zhaoyinyouhui.png"
                style="width: auto; height: 78rpx"
                mode="heightFix"
              ></image>
            </view>
            <view
              style="
                display: inline-block;
                padding: 32rpx 26rpx;
                width: 505rpx;
                min-height: 148rpx;
                background: #ffffff;
                box-shadow: 0px 4rpx 30rpx 0px rgba(167, 167, 167, 0.15);
                border-radius: 20rpx;
                margin-top: -30rpx;
              "
            >
              <text
                style="
                  font-size: 26rpx;
                  color: #1f1f1f;
                  line-height: 38rpx;
                  font-weight: 600;
                "
                ><!--招引优惠-->{{ detailData.Discount }}</text
              >
            </view>
          </view>
          <view style="margin-bottom: 83rpx; text-align: right">
            <view style="text-align: left">
              <image
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/titleall.png"
                style="width: auto; height: 78rpx"
                mode="heightFix"
              ></image>
            </view>
            <view
              style="
                display: inline-block;
                padding: 32rpx 26rpx;
                width: 505rpx;
                min-height: 148rpx;
                background: #ffffff;
                box-shadow: 0px 4rpx 30rpx 0px rgba(167, 167, 167, 0.15);
                border-radius: 20rpx;
                margin-top: -30rpx;
              "
            >
              <text
                style="
                  font-size: 26rpx;
                  color: #1f1f1f;
                  line-height: 38rpx;
                  font-weight: 600;
                "
                ><!--首发、首展、首秀政策-->{{ detailData.StartingInfo }}</text
              >
            </view>
          </view>

          <!-- <view style="margin-bottom: 83rpx; text-align: right">
            <view style="text-align: left">
              <image
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/shoufa.png"
                style="width: auto; height: 78rpx"
                mode="heightFix"
              ></image>
            </view>
            <view
              style="
                display: inline-block;
                padding: 32rpx 26rpx;
                width: 505rpx;
                min-height: 148rpx;
                background: #ffffff;
                box-shadow: 0px 4rpx 30rpx 0px rgba(167, 167, 167, 0.15);
                border-radius: 20rpx;
                margin-top: -30rpx;
              "
            >
              <text
                style="
                  font-size: 26rpx;
                  color: #1f1f1f;
                  line-height: 38rpx;
                  font-weight: 600;
                "
                >{{ detailData.StartingInfo }}</text
              >
              首发政策
            </view>
          </view>
          <view style="margin-bottom: 83rpx; text-align: right">
            <view style="text-align: left">
              <image
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/shouxiu.png"
                style="width: auto; height: 78rpx"
                mode="heightFix"
              ></image>
            </view>
            <view
              style="
                display: inline-block;
                padding: 32rpx 26rpx;
                width: 505rpx;
                min-height: 148rpx;
                background: #ffffff;
                box-shadow: 0px 4rpx 30rpx 0px rgba(167, 167, 167, 0.15);
                border-radius: 20rpx;
                margin-top: -30rpx;
              "
            >
              <text
                style="
                  font-size: 26rpx;
                  color: #1f1f1f;
                  line-height: 38rpx;
                  font-weight: 600;
                "
                >{{ detailData.FirstShow }}</text
              >
              首秀政策
            </view>
          </view>
          <view style="margin-bottom: 83rpx; text-align: right">
            <view style="text-align: left">
              <image
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/shouzhan.png"
                style="width: auto; height: 78rpx"
                mode="heightFix"
              ></image>
            </view>
            <view
              style="
                display: inline-block;
                padding: 32rpx 26rpx;
                width: 505rpx;
                min-height: 148rpx;
                background: #ffffff;
                box-shadow: 0px 4rpx 30rpx 0px rgba(167, 167, 167, 0.15);
                border-radius: 20rpx;
                margin-top: -30rpx;
              "
            >
              <text
                style="
                  font-size: 26rpx;
                  color: #1f1f1f;
                  line-height: 38rpx;
                  font-weight: 600;
                "
                >{{ detailData.FirstExhibition }}</text
              >
              首展政策
            </view>
          </view>-->
          <view style="margin-bottom: 83rpx; text-align: right">
            <view style="text-align: left">
              <image
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616480343000_409.png"
                style="width: auto; height: 78rpx"
                mode="heightFix"
              ></image>
            </view>

            <view
              style="
                display: inline-block;
                padding: 32rpx 26rpx;
                width: 505rpx;
                height: 148rpx;
                background: #ffffff;
                box-shadow: 0px 4rpx 30rpx 0px rgba(167, 167, 167, 0.15);
                border-radius: 20rpx;
                margin-top: -30rpx;
              "
            >
              <text
                style="
                  font-size: 26rpx;
                  color: #1f1f1f;
                  line-height: 38rpx;
                  font-weight: 600;
                "
                ><!--业态规划-->{{ detailData.CarrierPlan }}</text
              >
            </view>
          </view>
          <view style="margin-bottom: 83rpx; text-align: right">
            <view style="text-align: left">
              <image
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616480343000_16.png"
                style="width: 425rpx; height: auto"
                mode="widthFix"
              ></image>
            </view>
            <view
              style="
                display: inline-block;
                padding: 32rpx 26rpx;
                width: 505rpx;
                min-height: 148rpx;
                background: #ffffff;
                box-shadow: 0px 4rpx 30rpx 0px rgba(167, 167, 167, 0.15);
                border-radius: 20rpx;
                margin-top: -30rpx;
              "
            >
              <text
                style="
                  font-size: 26rpx;
                  color: #1f1f1f;
                  line-height: 38rpx;
                  font-weight: 600;
                "
                ><!--招引目标-->{{ detailData.CarrierTarget }}</text
              >
            </view>
          </view>
          <view style="margin-bottom: 83rpx; text-align: right">
            <view style="text-align: left">
              <image
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616480343000_452.png"
                style="width: auto; height: 78rpx"
                mode="heightFix"
              ></image>
            </view>
            <view
              style="
                display: inline-block;
                padding: 32rpx 26rpx;
                width: 505rpx;
                min-height: 148rpx;
                background: #ffffff;
                box-shadow: 0px 4rpx 30rpx 0px rgba(167, 167, 167, 0.15);
                border-radius: 20rpx;
                margin-top: -30rpx;
              "
            >
              <text
                style="
                  font-size: 26rpx;
                  color: #1f1f1f;
                  line-height: 38rpx;
                  font-weight: 600;
                "
                ><!--总体定位-->{{ detailData.Location }}</text
              >
            </view>
          </view>
          <view style="margin-bottom: 83rpx; text-align: right">
            <view style="text-align: left">
              <image
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616480343000_223.png"
                style="width: auto; height: 78rpx"
                mode="heightFix"
              ></image>
            </view>
            <view
              style="
                display: inline-block;
                padding: 32rpx 26rpx;
                width: 505rpx;
                min-height: 148rpx;
                background: #ffffff;
                box-shadow: 0px 4rpx 30rpx 0px rgba(167, 167, 167, 0.15);
                border-radius: 20rpx;
                margin-top: -30rpx;
              "
            >
              <text
                style="
                  font-size: 26rpx;
                  color: #1f1f1f;
                  line-height: 38rpx;
                  font-weight: 600;
                "
                ><!--目标人群-->{{ detailData.Crowd }}</text
              >
            </view>
          </view>
          <view
            style="margin-bottom: 83rpx; text-align: right; position: relative"
          >
            <view style="text-align: left">
              <image
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/zaitirongyu.png"
                style="width: auto; height: 78rpx"
                mode="heightFix"
              ></image>
            </view>
            <view
              style="
                display: inline-block;
                padding: 32rpx 26rpx;
                width: 505rpx;
                min-height: 148rpx;
                background: #ffffff;
                box-shadow: 0px 4rpx 30rpx 0px rgba(167, 167, 167, 0.15);
                border-radius: 20rpx;
                margin-top: -30rpx;
                display: flex;
                flex-wrap: wrap;
                position: absolute;
                top: 44rpx;
                left: 160rpx;
              "
              ><!--载体荣誉-->
              <!-- <text
                style="
                  font-size: 26rpx;
                  color: #1f1f1f;
                  line-height: 38rpx;
                  font-weight: 600;
                "
                >{{ detailData.Crowd }}</text
              > -->
              <view
                v-for="(item, index) in detailData.HonorList"
                :key="index"
                class="HonorItem"
              >
                <image :src="item" mode="heightFix" style="height: 100%" />
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      id: 0,
      imgsList: [],
      typeList: [
        {
          Id: 0,
          Name: "视频",
        },
        {
          Id: 1,
          Name: "图片",
        },
      ],
      ProjectType: "",
      boxOption: 0,
      navsOption: 0,
      titleStyle: {},
      active: 0,
      mainColor: "",
      likeStatus: false,
      controls: false, //显示默认控件
      LatAndLon: {
        lon: "",
        lat: "",
      },
      detailData: {
        CreateDate: "",
      },
    };
  },
  onShareTimeline() {
    //朋友圈
    let uid = uni.getStorageSync("mall_UserInfo")
      ? uni.getStorageSync("mall_UserInfo").UserId
      : 0;
    if (uid == 0) {
      uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
    }
    let SmallShopId = uni.getStorageSync("mall_UserInfo")
      ? uni.getStorageSync("mall_UserInfo").SmallShopId
      : 0;
    if (SmallShopId == 0) {
      //如果微店id为0 去找所属微店id
      SmallShopId = uni.getStorageSync("mall_UserInfo")
        ? uni.getStorageSync("mall_UserInfo").UserSmallShopId
        : 0;
    }
    let Up = uni.getStorageSync("mall_UserInfo")
      ? uni.getStorageSync("mall_UserInfo").UserPageType
      : 0;
    return {
      title: this.detailData.CarrierName ? this.detailData.CarrierName : "",
      query:
        "user_id=" +
        uid +
        "&SmallShopId=" +
        SmallShopId +
        "&Up=" +
        Up +
        "&id=" +
        this.id +
        "&type=" +
        this.ProjectType,
      imageUrl:
        this.detailData.BannerList && this.detailData.BannerList.length > 0
          ? this.detailData.BannerList[0]
          : "",
    };
  },
  onShareAppMessage(res) {
    //朋友
    let uid = uni.getStorageSync("mall_UserInfo")
      ? uni.getStorageSync("mall_UserInfo").UserId
      : 0;
    if (uid == 0) {
      uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
    }
    let SmallShopId = uni.getStorageSync("mall_UserInfo")
      ? uni.getStorageSync("mall_UserInfo").SmallShopId
      : 0;
    if (SmallShopId == 0) {
      //如果微店id为0 去找所属微店id
      SmallShopId = uni.getStorageSync("mall_UserInfo")
        ? uni.getStorageSync("mall_UserInfo").UserSmallShopId
        : 0;
    }
    let Up = uni.getStorageSync("mall_UserInfo")
      ? uni.getStorageSync("mall_UserInfo").UserPageType
      : 0;
    return {
      title: this.detailData.CarrierName ? this.detailData.CarrierName : "",
      path:
        "/pages/index/index?user_id=" +
        uid +
        "&SmallShopId=" +
        SmallShopId +
        "&Up=" +
        Up +
        "&id=" +
        this.id +
        "&type=" +
        this.ProjectType +
        "&JumpType=16",
      imageUrl:
        this.detailData.BannerList && this.detailData.BannerList.length > 0
          ? this.detailData.BannerList[0]
          : "",
    };
  },
  onLoad(options) {
    this.id = options.id;
    this.ProjectType = options.type;
    let that = this;
    uni.getSystemInfo({
      success(res) {
        that.titleStyle = {
          height: "45px",
          paddingTop: `${res.statusBarHeight}px`,
          opacity: "0%",
        };
      },
    });
    this.mainColor = this.$uiConfig.mainColor;
  },
  methods: {
    changeHandler(i) {
      this.active = i;
    },
    previewImage(i) {
      console.log(i);
      uni.previewImage({
        urls: this.detailData.BannerList,
        current: i,
        longPressActions: {
          itemList: ["发送给朋友", "保存图片", "收藏"],
          success: function (data) {},
          fail: function (err) {
            console.log(err.errMsg);
          },
        },
      });
    },
    scroll(e) {
      this.boxOption = Math.floor((e.detail.scrollTop - 50) / 1.5);
      this.titleStyle.opacity =
        (e.detail.scrollTop - 100 < 0
          ? 0
          : Math.floor(e.detail.scrollTop - 100)) + "%";
      this.$forceUpdate();
    },
    goback() {
      uni.navigateBack({
        delta: 1,
      });
    },
    goMap(name, lon, lat) {
      // let endPoint = JSON.stringify({ //终点
      // 	name,
      // 	'location': {
      // 		lng,
      // 		lat
      // 	}
      // })

      // wx.navigateToMiniProgram({
      // 	appId: 'wx7643d5f831302ab0', //要打开的小程序 appId
      // 	path: 'pages/multiScheme/multiScheme?endLoc=' + endPoint, //打开的页面路径，如果为空则打开首页
      // 	fail: function() {
      // 		wx.showToast({
      // 			icon: 'none',
      // 			title: '打开失败，请重试'
      // 		})
      // 	}
      // })
      wx.openLocation({
        latitude: lat,
        longitude: lon,
        scale: 18,
        name,
        // address:"武侯区科华中路 2 号",
        success: (res) => {
          // console.log(res)
        },
        fail: (err) => {
          // console.log(err)
        },
      });
    },
    enlarge(file) {
      // 全屏
      this.videoContext = uni.createVideoContext("myVideo");
      this.videoContext.requestFullScreen({
        direction: 0,
      });
    },
    videoControl(e) {
      if (e.detail.fullScreen == false) {
        this.videoContext.stop();
        this.controls = false;
      } else {
        this.videoContext.play();
        this.controls = true;
      }
    },
    // 获取详情
    getDetail() {
      let parms = {
        url: "/api/AppletTrade/GetCarrierDetails",
        data: { ID: this.id },
      };
      this.request2(parms, (res) => {
        if (res.resultCode == 1) {
          this.detailData = res.data;
          this.imgsList = [];
          if (res.data.VideoUrl == "") {
            this.active = 1;
          }
          if (Array.isArray(res.data.BannerList)) {
            res.data.BannerList.map((e) => {
              let obj = {
                url: e,
              };
              this.imgsList.push(obj);
            });
          }
          if (res.data.LatAndLon != null && res.data.LatAndLon.length > 0) {
            let LatLon = res.data.LatAndLon.split(",");
            this.LatAndLon.lat = parseFloat(LatLon[0]);
            this.LatAndLon.lon = parseFloat(LatLon[1]);
          }
        }
      });
    },
    // 关注与取消关注
    follow() {
      console.log("follow");
      let that = this;
      let parms = {
        url: "/api/AppletTrade/GetCollect",
        data: {
          SourceId: this.id,
          Id: this.detailData.CollectId,
          Type: 1,
        },
      };
      this.request2(parms, (res) => {
        if (res.resultCode == 1) {
          that.getDetail();
        }
      });
    },
  },
  mounted() {
    this.getDetail();
  },
};
</script>

<style>
.kotra-title {
  line-height: 45px !important;
  font-size: 16px;
  text-align: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  color: #111;
  box-sizing: content-box;
  z-index: 5;
  display: flex;
  align-items: center;
  background-color: #f6f6f6;
  padding-left: 6rpx;
}
.MedalBox {
  background: #f0f0f0;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 15rpx;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30rpx;
}
.MedalBoxItem {
  width: 30%;
  height: 135rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
}
.FirstShopBox {
  margin-bottom: 30rpx;
  display: flex;
  flex-wrap: wrap;
}
.FirstShopBoxItem {
  width: 33.33%;
  height: 140rpx;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
.HonorItem {
  height: 150rpx;
  border-radius: 20rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
}
.carriertag {
  width: 145rpx;
  height: 40rpx;
  background: #fff;
  border-radius: 8rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 30rpx;
  overflow: hidden;
}
.carriertagsub1 {
  width: 65rpx;
  height: 40rpx;
  background: #1f1f1f;
  border-radius: 4rpx 0rpx 0rpx 4rpx;
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.carriertagsub2 {
  width: 81rpx;
  height: 40rpx;
  background: #d0aa7b;
  border-radius: 0px 4rpx 4rpx 0rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #111111;
}
</style>
