remember-word/pages/index/detail/detail.vue

<template>
  <view>
    <navBar
      :navTitle="collectionsDetail.Name"
      :stickyShow="stickyShow"
      :color="'#000000'"
      :backBackGroundColor="'#699A70'"
      v-if="!isActive"
      :sfBack="true"
      @triggerSfBack="back"
    ></navBar>
    <view
      class="fixed-box"
      :style="{ background: !isActive ? '#FFFFFF' : '#000000' }"
    >
      <view class="btn" v-if="!isActive">
        <u-button
          type="primary"
          :text="$t('navbar.back')"
          class="back"
          @click="back"
        ></u-button>
        <u-button
          v-if="this.collectionsDetail.CurrencyType === 'point'"
          type="success"
          :text="'积分制尚未开通'"
          class="buyer"
        ></u-button>

        <u-button
          v-if="this.collectionsDetail.CurrencyType === 'normal'"
          type="success"
          :text="
            this.collectionsDetail.SaleType === 'draw'
              ? '领取'
              : this.collectionsDetail.SaleType === 'normal'
              ? '￥' + price + $t('collection.buy')
              : '仅限渠道购买'
          "
          class="buyer"
          @click="buy"
        ></u-button>
      </view>
      <view class="btn" v-else>
        <u-button
          type="primary"
          :text="$t('navbar.back')"
          class="back-active"
          @click="back"
        ></u-button>
        <u-button type="success" :text="'售罄'" class="sell-out"></u-button>
      </view>
    </view>
    <view v-if="!isActive">
      <view class="top-img">
        <!-- @click="open3D"-->
        <image
          :src="this.collectionsDetail.CollectionImg"
          mode="widthFix"
        ></image>
        <!-- <text class="price" v-if="this.collectionsDetail.Price != 0">￥{{ this.collectionsDetail.Price }}</text> -->
      </view>
      <!-- <view class="title-t">{{ collectionsDetail.Price != 0 ? $t('letter.all') : $t('letter.you') }}</view> -->
      <!-- <view class="info-box" style="padding: 28rpx 32rpx">
			<image src="@/static/image/home/to1.png" class="title-img" v-if="collectionsDetail.Price != 0"></image>
			<image src="@/static/image/home/to.png" class="title-img" v-else></image>
			<image src="@/static/image/home/333.png" class="content-img" mode="widthFix"
				v-if="collectionsDetail.Price != 0"></image>
			<image src="@/static/image/home/222.png" class="content-img" mode="widthFix" v-else></image>
			<view style="text-align: right;">
				<image src="@/static/image/home/from.png" class="from-img"></image>
			</view>
		</view> -->
      <view
        class="title-t"
        :style="{ fontSize: '36rpx', color: '#434343', fontWeight: 600 }"
        >{{ $t("collection.info") }}
      </view>
      <view class="info-box" style="padding: 28rpx 32rpx; background: #ffffff">
        <view class="item">
          <text class="label">{{ $t("collection.name") }}</text>
          <text class="value">{{ this.collectionsDetail.Name || "-" }}</text>
        </view>
        <view class="item">
          <text class="label">{{ $t("collection.type") }}</text>
          <text class="value">{{
            this.collectionsDetail.CollectionType || "-"
          }}</text>
        </view>
        <view class="item">
          <text class="label">{{ $t("collection.size") }}</text>
          <text class="value">{{ this.collectionsDetail.Size || "-" }}</text>
        </view>
        <view class="item">
          <text class="label">{{ $t("collection.specs") }}</text>
          <text class="value">{{ this.collectionsDetail.Specs || "-" }}</text>
        </view>
        <view class="item">
          <text class="label">{{ $t("collection.address") }}</text>
          <text class="value">{{ this.collectionsDetail.Address || "-" }}</text>
        </view>
        <view class="item">
          <text class="label">{{ $t("collection.intro") }}</text>
          <view class="des">{{ this.collectionsDetail.Intro || "-" }}</view>
        </view>
      </view>
      <view
        class="title-t"
        :style="{ fontSize: '36rpx', color: '#434343', fontWeight: 600 }"
        >{{ $t("collection.detail") }}
      </view>
      <view class="detail-info">
        <!-- <view class="title-t">{{$t('collection.sell')}}</view>
			<view class="box">
				<image v-for="item in sellPoint" :key="item" :src="item" mode="widthFix" class="img"></image>
			</view> -->
        <view
          v-if="
            this.CollectionUID !== '372afbef-4d3c-4e06-8fae-2ef1068b0a89' &&
            collDetails.length > 0
          "
          class="title-t"
          >{{ $t("collection.sellDec") }}</view
        >
        <view
          v-if="
            this.CollectionUID !== '372afbef-4d3c-4e06-8fae-2ef1068b0a89' &&
            collDetails.length > 0
          "
          class="box"
        >
          <image
            v-for="item in collDetails"
            :src="item"
            :key="item"
            mode="widthFix"
            class="img"
          ></image>
        </view>
        <view
          v-if="
            this.CollectionUID !== '372afbef-4d3c-4e06-8fae-2ef1068b0a89' &&
            companyInfo.length > 0
          "
          class="title-t"
          >{{ $t("collection.company") }}</view
        >
        <view
          v-if="
            this.CollectionUID !== '372afbef-4d3c-4e06-8fae-2ef1068b0a89' &&
            companyInfo.length > 0
          "
          class="box"
        >
          <image
            v-for="item in companyInfo"
            :src="item"
            :key="item"
            mode="widthFix"
            class="img"
          ></image>
        </view>
        <view v-if="copyright.length > 0" class="title-t">{{
          $t("collection.copyight")
        }}</view>
        <view v-if="copyright.length > 0" lass="box">
          <image
            v-for="item in copyright"
            :src="item"
            :key="item"
            mode="widthFix"
            class="img"
          ></image>
        </view>
        <view v-if="Blockchain.length > 0" class="title-t">{{
          $t("collection.blockchain")
        }}</view>
        <view v-if="Blockchain.length > 0" class="box">
          <image
            v-for="item in Blockchain"
            :src="item"
            :key="item"
            mode="widthFix"
            class="img"
          ></image>
        </view>
      </view>

      <view class="" style="text-align: center; margin-top: 30rpx">
        <image
          src="@/static/image/home/fontree.png"
          mode=""
          class="logo"
        ></image>
      </view>
    </view>
    <view v-else class="active">
      <view class="head">
        <u-button class="back" @click="back"> 返回 </u-button>
        <view>泰丰十周年纪念徽章</view>
      </view>
      <image
        src="@/static/image/home/drawing-board.png"
        mode="scaleToFill"
        class="drawing-board"
      />
    </view>
    <view style="height: 180rpx"></view>
    <u-popup
      :show="showVerfy"
      mode="center"
      @close="closeVerfy"
      bgColor="transparent"
    >
      <view class="popup-box">
        <view class="title">{{ $t("buyVerfy.title") }}</view>
        <view class="">
          <view class="input-box">
            <view class="label">{{ $t("buyVerfy.username") }}：</view>
            <view class="input">
              <u--input
                border="none"
                shape="circle"
                v-model="realName"
                @focus="verfFocus"
              ></u--input>
            </view>
          </view>
          <view class="input-box">
            <view class="label">{{ $t("buyVerfy.idNum") }}：</view>
            <view class="input">
              <u--input
                border="none"
                shape="circle"
                v-model="idNum"
                @focus="verfFocus"
              ></u--input>
            </view>
          </view>
          <view class="flex-end">
            <view class="fl-e" v-if="succes">
              <image
                src="../../../static/image/home/true.png"
                mode=""
                style="width: 30rpx; height: 30rpx; margin-right: 5px"
              ></image>
              <text style="color: #ffffff; font-size: 24rpx">{{
                $t("buyVerfy.suss")
              }}</text>
            </view>
            <view class="fl-e" v-if="err">
              <image
                src="../../../static/image/home/false.png"
                mode=""
                style="width: 30rpx; height: 30rpx; margin-right: 5px"
              ></image>
              <text style="color: #fd343c; font-size: 24rpx">{{
                $t("buyVerfy.error")
              }}</text>
            </view>
          </view>
        </view>
        <u-button
          :text="$t('buyVerfy.done')"
          color="#699A70"
          @click="verifyName"
          style="
			         	'width: 622rpx;
			            height: 56rpx;
			            border-radius: 40rpx;
			            margin-top: 114rpx;'
			          "
        ></u-button>
        <view @click="closeVerfy" class="cancel">{{
          $t("buyVerfy.cancel")
        }}</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      stickyShow: false,
      showVerfy: false,
      CollectionUID: "",
      collectionsDetail: {},
      sellPoint: [],
      collDetails: [],
      companyInfo: [],
      copyright: [],
      Blockchain: [],
      realName: "",
      idNum: "",
      err: false,
      succes: false,
      SeriesName: "",
      isHave: false,
      AirdorpUid: "",
      price: "",
      isActive: false,
      currencyType: "",
      pageParams: {},
    };
  },
  onPageScroll(e) {
    this.stickyShow = e.scrollTop > 5 ? true : false;
  },
  onLoad: function (option) {
    this.pageParams = option;
    this.CollectionUID = option.CollectionUID;
    this.SeriesName = option.SeriesName;
    this.price = option.Price;
    this.isActive = !Object.keys(option).length;
  },
  onShow() {
    this.getCollectionDetail();
  },
  methods: {
    calcRouteParams(obj) {
      if (obj && JSON.stringify(obj) !== "{}") {
        let str = "?";
        for (let key in obj) {
          str += key + "=" + obj[key] + "&";
        }
        return str.slice(0, -1);
      }
      return "";
    },
    open3D() {
      uni.navigateTo({
        url: "/pages/index/detail/open3D/open3D",
      });
    },
    back() {
      let routesRecord = getCurrentPages();
      if (routesRecord.length > 1) {
        this.$common.navigateBack();
      } else {
        uni.reLaunch({
          url: "/pages/index/index",
        });
      }
    },
    async getCollectionDetail() {
      if (this.isActive) return;
      let data = {
        CollectionsUID: this.CollectionUID,
      };
      let res = await this.$api.series.collectionsInfo(data);
      if (res.status === 0) {
        // await this.getPick(res.data.CollectionUID);
        this.collectionsDetail = res.data;
        (this.AllImgList = res.data.CutImg ? JSON.parse(res.data.CutImg) : []),
          this.cutImg();
      } else {
        uni.$u.toast(this.$t("load.failed"));
      }
    },
    async getPick(uid) {
      if (this.isActive) return;
      let parmas = {
        uuid: uid,
      };
      let res = await this.$api.series.userHaveDropNo(parmas);
      if (res.status === 0) {
        console.log(res.data.Hava);
        this.isHave = res.data.Have != 0 ? false : true;
        this.AirdorpUid = res.data.UserAirdorpUid;
      } else {
        this.isHave = false;
      }
    },
    cutImg() {
      this.AllImgList.forEach((v) => {
        if (Array.isArray(v.imgs)) {
          v.imgs = v.imgs.filter((img) => {
            if (img) {
              return img;
            }
          });
        }
        switch (v.label) {
          case "卖点":
            this.sellPoint = v.imgs;
            break;
          case "藏品细节":
            this.collDetails = v.imgs;
            break;
          case "工艺/公司介绍":
            this.companyInfo = v.imgs;
            break;
          case "版权声明":
            this.copyright = v.imgs;
            break;
          case "区块链说明":
            this.Blockchain = v.imgs;
            break;
        }
      });
    },
    buy() {
      // 只有领取和普通购买 才执行下去
      if (
        this.collectionsDetail.CurrencyType === "normal" &&
        ["normal", "draw"].includes(this.collectionsDetail.SaleType)
      ) {
        let token = uni.getStorageSync("mall_token");
        let realName = uni.getStorageSync("mall-user-info")
          ? uni.getStorageSync("mall-user-info").realName
          : "";
        if (!token) {
          uni.$u.toast(this.$t("login.pls"));
          uni.setStorageSync(
            "login-redirect",
            "/pages/index/detail/detail" + this.calcRouteParams(this.pageParams)
          );
          uni.navigateTo({
            url: "/pages/login/login",
          });
        } else if (!realName) {
          this.showVerfy = true;
        } else {
          if (this.collectionsDetail.SaleType === "draw") {
            this.directGet();
            return;
          }
          uni.navigateTo({
            url:
              "/pages/index/comfirm/comfirm?Collection=" +
              encodeURIComponent(JSON.stringify(this.collectionsDetail)),
          });
        }
      }
    },
    async directGet() {
      let data = {
        CollectionsUID: this.collectionsDetail.CollectionUID,
      };
      let res = await this.$api.airdrop.directGet(data);
      if (res.status === 0) {
        uni.$u.toast("领取成功！");
        this.getCollectionDetail();

        let routesRecord = getCurrentPages();
        if (routesRecord.length > 1) {
          let that = this;
          setTimeout(() => {
            that.$common.navigateBack();
          }, 1000);
        } else {
          setTimeout(() => {
            uni.reLaunch({
              url: "/pages/index/index",
            });
          }, 1000);
        }
      } else {
        uni.$u.toast(res.msg);
      }
    },
    async pickUp() {
      let data = {
        UserId: uni.getStorageSync("mall-user-info").ID,
        Uuid: this.AirdorpUid,
      };
      let res = await this.$api.airdrop.getCollection(data);
      if (res.status === 0) {
        this.recive();
      } else {
        uni.$u.toast(res.msg);
      }
    },
    async recive() {
      let data = {
        collectionsUID: this.CollectionUID,
        userAirdropUuid: this.AirdorpUid,
      };
      let res = await this.$api.airdrop.getCollectionStepTwo(data);
      if (res.status === 0) {
        uni.navigateTo({
          url: "/pages/index/payment/reciveOK",
        });
      } else {
        uni.$u.toast(res.msg);
      }
    },
    async verifyName() {
      let data = {
        idNum: this.idNum,
        realName: this.realName,
      };
      if (!data.idNum || !data.realName) {
        return uni.$u.toast("姓名和身份证号不能为空");
      }
      if (!uni.$u.test.idCard(data.idNum)) {
        return uni.$u.toast("身份证号不正确");
      }
      let res = await this.$api.mine.update(data);
      if (res.status === 0) {
        this.succes = true;
        uni.setStorageSync("mall-user-info", res.data);
        setTimeout(() => {
          this.idNum = "";
          this.realName = "";
          this.showVerfy = false;
          this.err = false;
          this.succes = false;
        }, 1000);
      } else {
        this.err = true;
        this.succes = false;
        uni.$u.toast(res.msg);
      }
    },
    verfFocus() {
      this.err = false;
      this.succes = false;
    },
    doneVerfy() {
      this.showVerfy = false;
    },
    closeVerfy() {
      this.showVerfy = false;
    },
  },
};
</script>

<style lang="scss">
page {
  background: url("@/static/image/home/new_bg.png?x-oss-process=image/resize,w_750,h_1580")
    no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  height: 100vh;
}

.active {
  position: relative;

  .head {
    position: absolute;
    top: 30rpx;
    left: 26rpx;
    display: flex;
    height: 110rpx;
    align-items: center;
    font-size: 32rpx;
    z-index: 1;

    .back {
      width: 128rpx;
      height: 56rpx;
      color: #ffffff;
      border-radius: 40rpx;
      line-height: 56rpx;
      background: rgba(255, 255, 255, 0.4);
      margin-right: 78rpx;
      border: 0;
    }
  }
}

.drawing-board {
  width: 100%;
  height: 6986rpx;
}

.fixed-box {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 172rpx;
  // background: #3e3e3e;
  background: #ffffff;
  z-index: 10;

  .btn {
    display: flex;
    padding: 42rpx 38rpx;
  }

  .back {
    width: 172rpx;
    height: 56rpx;
    border-radius: 40rpx;
    // background: #efba42;
    background: #efba42;
    border-color: aliceblue;
    margin-right: 30rpx;
  }

  .back-active {
    width: 172rpx;
    height: 56rpx;
    border-radius: 40rpx;
    // background: #efba42;
    background: rgba(255, 255, 255, 0.4);
    border-color: aliceblue;
    margin-right: 30rpx;
    border: 0;
  }

  .buyer {
    width: 484rpx;
    height: 56rpx;
    border-radius: 40rpx;
    // background: #558bf2;
    background: #699a70;
    border-color: aliceblue;
  }

  .sell-out {
    width: 484rpx;
    height: 56rpx;
    border-radius: 40rpx;
    // background: #558bf2;
    background: #fc4947;
    border-color: #fc4947;
  }

  .disBtn {
    width: 484rpx;
    height: 56rpx;
    line-height: 56upx;
    border-radius: 40rpx;
    background: rgba(65, 0, 0, 1);
    border: 1upx #fff solid;
    text-align: center;
  }
}

.top-img {
  background-size: contain;
  width: 660rpx;
  height: 660rpx;
  border-radius: 8rpx;
  margin: 44rpx 44rpx 32rpx 46rpx;
  position: relative;

  .price {
    font-size: 48rpx;
    position: absolute;
    bottom: 10rpx;
    right: 30upx;
    // left: 50%;
    // transform: translateX(-50%);
  }

  image {
    width: 100%;
    height: 100%;
  }
}

/* .box-item {
		// background: rgba(255, 255, 255, 0.3);
		// background: rgba(11, 0, 0, 0.4);
		// margin: 0 44rpx 0 46rpx;
		image {
			width: 100%;
			display: block;
			// height: 198rpx;
		}
	} */

.detail-info {
  // background: rgba(0, 0, 0, 0.8);
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8rpx;
  margin: 30rpx;
  padding: 23rpx;

  .box {
    // margin: 0 44rpx 0 46rpx;
    margin-bottom: 46rpx;
    // background: url('@/static/image/home/bg-info.png') no-repeat; // rgba(255, 255, 255, 0.3);
    border-radius: 15rpx;
    // padding: 38rpx 32rpx;
    position: relative;
    overflow: hidden;

    .img {
      width: 100%;
      display: block;
    }
  }
}

.title-t {
  text-align: center;
  margin: 40rpx 0 30rpx 0;
  color: #494949;
}

.info-box {
  margin: 0 44rpx 0 46rpx;
  margin-bottom: 46rpx;
  // background: rgba(255, 255, 255, 0.3);
  background: rgba(11, 0, 0, 0.3);
  // background: url('@/static/image/home/bg-info.png') no-repeat;
  border-radius: 8rpx;
  // padding: 38rpx 32rpx;
  position: relative;

  .title-img {
    width: 300upx;
    height: 50upx;
    margin-bottom: 32upx;
  }

  .content-img {
    width: 100%;
    display: block;
    object-fit: contain;
  }

  .from-img {
    width: 356upx;
    height: 44upx;
    margin-top: 20upx;
  }

  .item {
    display: flex;
    margin-bottom: 20rpx;
    font-size: 20rpx;

    .label {
      padding-right: 40rpx;
      width: 130rpx;
      color: #434343;
      font-size: 20rpx;
    }

    .value {
      color: #878787;
    }

    .des {
      width: 450rpx;
      /* display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden; */
      word-break: break-all;
      white-space: normal;
      color: #878787;
    }
  }

  .img {
    width: 100%;
    display: block;
  }
}

.logo {
  margin-top: 10rpx;
  width: 202rpx;
  height: 56rpx;
}

.popup-box {
  background: #ffffff;
  height: 842rpx;
  width: 698rpx;
  overflow: hidden;
  padding: 30rpx 38rpx;
  box-sizing: border-box;

  .title {
    font-size: 40rpx;
    text-align: center;
    margin-top: 96rpx;
    margin-bottom: 152rpx;
    color: #434343;
  }

  .input-box {
    display: flex;
    align-items: center;
    padding-bottom: 34rpx;

    .label {
      font-size: 22rpx;
      color: #699a70;
    }

    .input {
      background-color: rgba(135, 135, 135, 0.5);
      width: 515rpx;
      height: 60rpx;
      border-radius: 40rpx;
      display: flex;
      align-items: center;
      box-sizing: border-box;

      /deep/ .input-placeholder {
        font-size: 24rpx;
      }

      /deep/ .uni-input-input {
        font-size: 24rpx;
        padding: 0 20rpx;
        color: #fff;
      }
    }
  }

  .flex-end {
    padding: 0 34rpx 34rpx 38rpx;
    display: flex;
    justify-content: flex-end;

    .fl-e {
      display: flex;
      align-items: center;
    }
  }

  .cancel {
    color: #878787;
    font-size: 32rpx;
    margin-top: 30rpx;
    text-align: center;
  }
}
</style>