remember-word/pages/mine/usamine/index.vue

<template>
  <view>
    <view class="logo">
      <image
        src="../../../static/image/home/fontree.png"
        mode=""
        class="img"
      ></image>
    </view>

    <view class="user-box">
      <u-avatar
        src="https://cdns.fontree.cn/fonchain-main/prod/image/3734/avatar/44f417f8-ea14-45f6-a114-2bb2fee54713.png"
        class="avatar"
        size="75"
        fontSize="18"
        bg-color="#558BF2"
      ></u-avatar>
      <view class="info">
        <view class="blockchain"
          >{{ $t("usa.adress") }}：<a>{{ seriesData.seriesAddress }}</a></view
        >
        <view class="username"
          >{{ $t("usa.remember") }}：{{ seriesData.seriesMem }}
          <view class="check" @click="checkWord">{{
            $t("usa.check")
          }}</view></view
        >
      </view>
    </view>
    <view class="his-title-text">
      <view>{{ $t("usa.hasGet") }}</view>
      <view class="line"></view>
    </view>
    <view class="collectionList" v-if="collectionList">
      <view
        v-for="(item, index) in collectionList"
        :key="index"
        class="list-item"
      >
        <view class="listbox" @click="goDetail(item)">
          <image class="coverImg" :src="item.coverImg"></image>
          <view class="info">
            <view class="name">{{ item.name }}</view>
            <view class="intro">{{ item.intro }}</view>
          </view>
        </view>
      </view>
    </view>
    <u-popup
      :show="show"
      mode="center"
      bgColor="#F5F5F5"
      @close="close"
      @open="open"
      :closeOnClickOverlay="false"
    >
      <view class="content">
        <view class="title">{{ $t("usa.popTitle") }}</view>
        <view class="input-box">
          <view v-if="!showSeriesMem">{{ $t("usa.Password") }}</view>
          <u--input
            v-if="!showSeriesMem"
            style="width: 50%"
            v-model="seriesPwd"
            border="none"
            :type="isShow ? 'text' : 'password'"
            maxlength="6"
            :placeholder="placeholder"
            class="login-input"
          >
            <template slot="suffix">
              <u-icon
                :name="isShow ? 'eye' : 'eye-off'"
                @click="isShow = !isShow"
              ></u-icon> </template
          ></u--input>
          <view v-if="showSeriesMem">{{ seriesMem }}</view>
        </view>
        <view class="btn-group" v-if="!showSeriesMem">
          <u-button
            @click="cancel"
            style="
              background-color: #fdfdfd;
              color: #3e6944;
              box-shadow: 0px 2px 2px 0px #b4b4b4;
              font-weight: bold;
            "
            class="u-button"
            shape="circle"
          >
            {{ $t("usa.cancel") }}
          </u-button>
          <u-button
            @click="confirm"
            style="
              background: linear-gradient(90deg, #489552 0%, #3e6944 100%);
              color: #ffffff;

              font-weight: bold;
            "
            class="u-button"
            shape="circle"
            :loading="loading"
          >
            {{ $t("usa.confirm") }}
          </u-button>
        </view>
        <view class="btn-group" v-else>
          <u-button
            @click="cancel"
            style="
              background-color: #fdfdfd;
              color: #3e6944;
              box-shadow: 0px 2px 2px 0px #b4b4b4;
              font-weight: bold;
            "
            class="u-button"
            shape="circle"
          >
            {{ $t("usa.back") }}
          </u-button>
          <u-button
            @click="backAndCopy"
            style="
              background: linear-gradient(90deg, #489552 0%, #3e6944 100%);
              color: #ffffff;

              font-weight: bold;
            "
            class="u-button"
            shape="circle"
            :loading="loading"
          >
            {{ $t("usa.backAndCopy") }}
          </u-button>
        </view>
      </view>
    </u-popup>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
export default {
  data() {
    return {
      collectionList: [],
      seriesData: {},
      show: false,
      placeholder: "",
      isShow: false,
      seriesPwd: "",
      loading: false,
      seriesMem: "",
      showSeriesMem: false,
    };
  },
  methods: {
    open() {
      // console.log('open');
    },
    close() {
      this.show = false;
      // console.log('close');
    },
    checkWord() {
      this.show = true;
    },
    cancel() {
      this.show = false;
      this.seriesPwd = "";
      this.showSeriesMem = false;
    },
    backAndCopy() {
      uni.setClipboardData({
        data: this.seriesMem,
        success: function () {
          uni.hideToast();
        },
      });
      this.$refs.uToast.show({
        type: "success",
        position: "top",
        message: this.$t("usa.copySuccess"),
        duration: 2000,
        iconUrl: "https://cdn.uviewui.com/uview/demo/toast/success.png",
      });
      this.show = false;
      this.seriesPwd = "";
      this.showSeriesMem = false;
    },
    async confirm() {
      if (!this.seriesPwd) {
        this.$refs.uToast.show({
          type: "error",
          position: "top",
          message: this.$t("usa.warningPwd"),
          duration: 2000,
          iconUrl: "https://cdn.uviewui.com/uview/demo/toast/error.png",
        });
        return;
      }
      this.loading = true;
      let data = {
        seriesUuid: this.seriesData.seriesUuid,
        seriesPwd: this.seriesPwd,
      };
      let res = await this.$api.usa.getSeriesMnemonic(data);
      if (res.status === 0) {
        this.loading = false;
        this.seriesMem = res.data.seriesMem;
        this.showSeriesMem = true;
        console.log(this.seriesMem, this.showSeriesMem);
      } else {
        this.$refs.uToast.show({
          type: "error",
          position: "top",
          message: res.msg,
          duration: 2000,
          iconUrl: "https://cdn.uviewui.com/uview/demo/toast/error.png",
        });
        this.loading = false;
      }
    },
    async getCollectionList() {
      let data = {
        seriesUID: this.seriesData.seriesUuid,
      };
      let res = await this.$api.usa.getMyCollectionList(data);
      if (res.status === 0) {
        this.collectionList = res.data.data;
      } else {
        uni.$u.toast(res.msg);
      }
    },
    // 跳转详情
    goDetail(item) {
      uni.navigateTo({
        url: `/pages/index/detail/detail?collectionUID=${item.collectionUID}`,
      });
    },
  },
  async onShow() {
    this.seriesData = uni.getStorageSync("seriesData");
    this.getCollectionList();
    this.placeholder = this.$t("usa.inputPassword");
  },
};
</script>

<style lang="scss">
page {
  background: url("@/static/image/start/new_bg.png") no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  height: 100vh;
  box-sizing: border-box;
  // border: 1px solid red;696.1123
}
.btn-group {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  .u-button {
    width: 40%;
    height: 40px;
    margin-bottom: 60rpx;
  }
}
.collectionList {
  margin-top: 15px;
  padding: 0 16px;
  overflow-y: scroll;
  height: 55vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .list-item {
    width: 100%;
    height: 96px;
    border-radius: 4px;
    box-shadow: 0px 2px 4px 0px #e4e4e4;
    margin-top: 10px;
    background: #fff;
    border-radius: 4px;
    padding: 12px 16px;
    box-sizing: border-box;
    .listbox {
      display: flex;
      align-items: center; /* Add this line */
      .coverImg {
        width: 72px;
        height: 72px;
        border-radius: 4px;
      }
      .info {
        flex: 1; /* Add this line */
        margin-left: 8px;
        .name {
          font-size: 16px;
          color: #000000;
          // 超出一行显示省略号
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
        .intro {
          font-size: 14px;
          color: #999999;
          margin-top: 4px;
          // 超出两行显示省略号
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}

.logo {
  width: 100vw;
  height: 122rpx;
  background: #ffffff;
  overflow: hidden;

  .img {
    width: 188rpx;
    height: 56rpx;
    margin-top: 36rpx;
    margin-left: 48rpx;
  }
}
.content {
  width: 700rpx;
  height: 500rpx;
  display: flex;
  justify-content: center;
  flex-direction: column;
  .title {
    font-size: 40rpx;
    text-align: center;
    margin: 60rpx 0 0rpx 0;
    color: #699a70;
  }
}
.input-box {
  margin: 80rpx 45rpx 40rpx 45rpx;
  height: 100rpx;
  width: auto;
  box-sizing: border-box;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000000;
  border-radius: 8rpx;
  view {
    margin-left: 30rpx;
    margin-right: 20rpx;
  }
  .login-input {
    padding: 30rpx;
    height: 88rpx;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 0 20rpx;
    /deep/ .uni-input-placeholder {
      padding: 0 20rpx;
    }
    /deep/ .uni-input-input {
      color: #000000;
      padding: 0 20rpx;
      width: auto;
    }
  }
}
.user-box {
  background: #ffffff;
  border-radius: 20rpx;
  height: 210rpx;
  margin: 20rpx 28rpx 20rpx 28rpx;
  padding: 22rpx 20rpx;
  display: flex;
  box-sizing: border-box;
  align-items: center;

  .avatar {
    margin-left: 20rpx;
  }

  .info {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 20rpx;

    .username {
      color: #000000;
      font-size: 24rpx;
      margin-top: 20rpx;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: flex;
      align-items: center;
    }

    .blockchain {
      color: #000000;
      font-size: 24rpx;
      margin-top: 10rpx;
	  display: flex;
      a{
		  // 超出一行显示省略号
		  overflow: hidden;
		  text-overflow: ellipsis;
width: 175px;
		  -webkit-box-orient: vertical;
	  }
    }
    .check {
      color: #3e6944;
      font-size: 24rpx;
      margin-left: 10rpx;
    }
  }
}

.mine-icon {
  background: #ffffff;
  border-radius: 20rpx;
  height: 130rpx;
  margin: 0rpx 28rpx 40rpx 28rpx;
  padding: 20rpx 20rpx;
  display: flex;
  box-sizing: border-box;
  justify-content: space-around;
  align-items: center;

  .value {
    color: #000000;
    font-size: 12px;
  }

  .tag,
  .message,
  .scan,
  .setting {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .message {
    position: relative;

    .point {
      position: absolute;
      z-index: 999;
      left: 35rpx;
      top: 0rpx;
    }
  }

  // .scan {

  // 	width: 60rpx;

  // 	font-size: 20rpx;
  // }
}

.his-title-text {
  font-size: 24rpx;
  margin: 28rpx;
  padding-bottom: 4upx;
  color: #000000;
  display: flex;
  align-items: center;

  & > .line {
    flex: 1;
    height: 0.5rpx;
    background: rgba(0, 0, 0, 0.5);
    margin-left: 80rpx;
  }
}

.his-box {
  margin: 0 8rpx;
  display: flex;
  flex-wrap: wrap;

  .item {
    width: 332rpx;
    height: 418rpx;
    // background: #000000;
    // border-radius: 8rpx;
    overflow: hidden;
    position: relative;
    margin: 20rpx 10rpx 0 18rpx;
    box-sizing: border-box;

    .icon {
      width: 28rpx;
      height: 28rpx;
      position: absolute;
      top: 16rpx;
      right: 18rpx;
      z-index: 10;
    }

    .img {
      width: 100%;
      height: 324rpx;
    }

    .content {
      height: 96rpx;
      width: 100%;
      position: absolute;
      bottom: 0;
      font-size: 32rpx;
      text-align: center;
      line-height: 96rpx;
      background-position: center center;
      background-size: cover !important;
    }

    .contentD {
      background: url("../../../static/image/mine/item-bg1.png") no-repeat;
    }

    .contentC {
      background: url("../../../static/image/mine/item-bg2.png") no-repeat;
    }

    .contentB {
      background: url("../../../static/image/mine/item-bg3.png") no-repeat;
    }

    .contentA {
      background: url("../../../static/image/mine/item-bg4.png") no-repeat;
    }
  }
}

.invite-box {
  text-align: center;
}

.popupLocale-box {
  background: rgba(0, 0, 0, 0.8);
  width: 582rpx;
  overflow: hidden;
  padding: 30rpx 42rpx;

  .content3 {
    background: url("../../../static/image/mine/item-bg3.png") no-repeat;
  }

  .content4 {
    background: url("../../../static/image/mine/item-bg4.png") no-repeat;
  }

  .content {
    height: 96rpx;
    width: 100%;
    background-size: 100% 100%;
    position: absolute;
    bottom: 0;
    font-size: 32rpx;
    text-align: center;
    line-height: 96rpx;
  }
}

.popupLocale-box {
  background: rgba(0, 0, 0, 0.8);
  width: 582rpx;
  overflow: hidden;
  padding: 30rpx 42rpx 0 42rpx;

  .title {
    font-size: 40rpx;
    text-align: center;
    margin-bottom: 40rpx;
  }

  .u-button {
    width: 260rpx;
    height: 56rpx;
    border-radius: 40rpx;
  }

  .item {
    display: flex;
    justify-content: space-between;
    padding: 34rpx 50rpx 38rpx 0;
    // border-bottom: 1px solid #dedede;
    align-items: center;

    .right {
      font-size: 20rpx;

      .tag-btn {
        width: 100rpx;

        /deep/ .u-tag {
          justify-content: center;
        }

        /deep/ .u-tag__text--medium {
          font-size: 20rpx;
          text-align: center;
          height: 40rpx;
          line-height: 40rpx;
        }
      }
    }
  }
}

/deep/ .u-popup__content {
  border-radius: 8rpx;
}

.step-top {
  width: 466rpx;
  padding: 16rpx 40rpx;
  background: #699a70;
  margin: auto;
  text-align: center;
}

.step-box {
  width: 100%;
  margin-top: 26rpx;
  background: #ffffff;
  padding-bottom: 80rpx;

  .title {
    font-size: 40rpx;
    text-align: center;
    margin: 46rpx 0 34rpx 0;
    color: #434343;
  }

  .step-pl {
    text-align: center;
    color: #878787;
    font-size: 28rpx;
  }
}

.verfy-box {
  display: flex;
  justify-content: center;

  .label {
    font-size: 24rpx;
    text-align: left;
    margin-bottom: 20rpx;
    margin-top: 90rpx;
    color: #878787;
  }

  /deep/ .u-code-input__item {
    background: rgba(228, 228, 228, 0.7);
    width: 60rpx !important;
    height: 60rpx !important;
  }
}

.pass-box {
  width: 582rpx;
  height: 484rpx;
  background: #ffffff;

  .title {
    font-size: 40rpx;
    text-align: center;
    margin: 46rpx 0 34rpx 0;
    color: #434343;
  }

  .flex-end {
    margin-top: 70rpx;
    padding: 58rpx;
    text-align: right;
    font-size: 24rpx;
    color: #878787;
  }
}
/deep/ .u-toast__content {
  width: 85%;
  transform: translateY(-291.75px) !important;
}
</style>