frontend-app/pages/rwa_package/rwa/rwa.vue

<template>
  <view class="content top-view">
    <TopSafe bgColor="rgba(0,0,0,0)"></TopSafe>
    <Header
      bgColor="rgba(0,0,0,0)"
      color="#fff"
      title="数字积分兑换"
      style="min-height: 88rpx"
    />
    <view class="top-panel">
      <text class="text-24 text-white" style="margin-top: 24rpx">股东行权</text>
      <text class="text-88 text-white text-bold" style="margin-top: 24rpx"
        >{{ curData ? curData.curAmount : 0 }}
        <text class="text-44 text-white">数字积分(TBC)</text>
      </text>
      <view class="btn-view">
        <view class="left-btn" @click="onLeft">
          <up-image
            src="/pages/rwa_package/static/rwa/tx.png"
            style="margin-right: 5rpx; margin-top: 2rpx"
            width="18"
            height="18"
            bgColor="#f1f6ff00"
          />
          <text
            class="text-zi text-32"
            style="margin-left: 5rpx; line-height: 1.2"
            >兑换</text
          >
        </view>
        <view class="right-btn" @click="onRight">
          <up-image
            src="/pages/rwa_package/static/rwa/jl.png"
            style="margin-right: 5rpx; margin-top: 2rpx"
            width="18"
            height="18"
            bgColor="#f1f6ff00"
          />
          <text
            class="text-white text-32"
            style="margin-left: 5rpx; line-height: 1.2"
            >记录</text
          >
        </view>
      </view>
    </view>
    <view class="bottom-panel">
      <view class="bottom-head-view">
        <text class="text-32 text-bold text-gray">股东账户</text>
      </view>
      <view class="bottom-list">
        <view class="list-box" v-if="dataList.length">
          <AccountItemTwo
            :dataItem="item"
            @jie="onJie"
            @select="onSelect"
            v-for="(item, index) in dataList"
            :key="index"
          ></AccountItemTwo>
        </view>
        <view class="add-address" @click="onAdd">
          <up-image
            src="/pages/rwa_package/static/rwa/add.png"
            style="margin-right: 5rpx; margin-top: 2rpx"
            width="12"
            height="12"
            bgColor="#f1f6ff00"
          />
          <text
            class="text-zi text-32"
            style="margin-left: 5rpx; line-height: 1.2"
            >券商登记地址</text
          >
        </view>
        <!-- <view class="no-box" v-else>
					<up-image src="https://static.tbmall.xin/static/kzt.png" width="100" height="100"
						bgColor="#f1f6ff00"></up-image>
					<text class="text-32 text-fu1" style="margin-top:32rpx">暂无账户数据～</text>
				</view> -->
      </view>
    </view>

    <ShuTips :itemShow="tipsShow" @close="onClose" @ok="onOk"></ShuTips>
    <up-toast ref="uToastRef"></up-toast>

    <u-popup :show="addAddressShow" mode="bottom" bgColor="transparent">
      <view class="add-address-item">
        <view class="select-head">
          <view></view>
          <text class="text-28 text-fu1">复制地址</text>
          <u-icon
            name="close"
            color="#333"
            size="16"
            @click="addAddressShow = false"
          ></u-icon>
        </view>
        <view class="select-box" @click="copyData(selectAddress.address)">
          <view class="select-box-one"> {{ selectAddress.address }} </view>
          <up-image
            src="/static/common/copy.png"
            width="17"
            height="17"
            bgColor="#f1f6ff00"
            style="margin-top: 8rpx"
          ></up-image>
        </view>

        <view class="add-address-tip">
          <up-image
            src="/pages/rwa_package/static/tips.png"
            width="16"
            height="16"
            bgColor="#f1f6ff00"
            style="margin-right: 8rpx"
          />
          复制链接到浏览器修改！
        </view>
      </view>
    </u-popup>
      <qiaobao-assistant page-key="pages/rwa_package/rwa/rwa" title="账户服务" />
</view>
</template>

<script>
import {
  getExchUsers,
  unbindExchUsers,
  getAcctBalance,
} from "@/api/finance.js";
import { copyData } from "@/utils/index.js";
import { TOKEN_NAME, getStorageFun } from "@/utils/auth.js";
import TopSafe from "@/components/common/top-safe.nvue";
import Header from "@/components/common/header.vue";
import ShuTips from "@/pages/rwa_package/account/components/shu-tips.vue";
import AccountItemTwo from "@/pages/rwa_package/account/components/account-item-two.vue";

export default {
  components: { Header, TopSafe, ShuTips, AccountItemTwo },
  data() {
    return {
      dataList: [],
      tipsShow: false,
      curData: null,
      addAddressShow: false,
      selectAddress: {
        address: `https://taddr.alpha-group.top?token=${getStorageFun(
          TOKEN_NAME
        )}`,
      },
    };
  },
  onLoad(option) {},
  onShow() {
    this.acctBalance();
    this.exchUsers();
  },
  methods: {
    copyData,
    exchUsers() {
      getExchUsers({ name: "WALLET" }).then((res) => {
        if (res && res.bizcode === 100) {
          this.dataList = res.data.entitys ? res.data.entitys : [];
        }
      });
    },
    onJie(item) {
      let params = {
        accountId: item.id,
      };
      unbindExchUsers(params).then((resp) => {
        if (resp && resp.bizcode === 100) {
          this.$refs.uToastRef.show({
            type: "success",
            message: "解绑成功",
          });

          this.exchUsers();
        }
      });
    },
    onRight() {
      uni.navigateTo({
        url: "/pages/rwa_package/rwa_withdrawal_log/rwa_withdrawal_log?back=rwa",
      });
    },
    onLeft() {
      this.tipsShow = true;
    },
    onClose() {
      this.tipsShow = false;
    },
    onOk(index) {
      if (index == 0) {
        uni.navigateTo({
          url: "/pages/rwa_package/account/shu",
        });
      } else if (index == 1) {
        uni.navigateTo({
          url: "/pages/rwa_package/rwa_withdrawal/rwa_withdrawal",
        });
      }
      this.onClose();
    },
    acctBalance() {
      getAcctBalance().then((resp) => {
        if (resp && resp.bizcode === 100) {
          this.curData = null;
          resp.data.forEach((item) => {
            if (item.categoty == "vcoin") {
              this.curData = item;
            }
          });
        }
      });
    },
    onAdd() {
      this.addAddressShow = true;
    },
    onSelect(item) {
      // this.selectAddress = item;
      // this.addAddressShow = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.top-view {
  background: linear-gradient(90deg, $app-zt-color, #ae61fa);
  .bottom-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 418rpx - 32rpx - var(--status-bar-height));
    background-color: #fff;
    border-radius: 24rpx 24rpx 0 0;
    padding: 0 32rpx 32rpx;
    margin-top: 32rpx;
    box-sizing: border-box;
    .bottom-head-view {
      width: 100%;
      height: 88rpx;
      min-height: 88rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .bottom-list {
      width: 100%;
      height: calc(100% - 88rpx);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      .no-box {
        width: 100%;
        margin-top: 100rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
    .add-address {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 12rpx;
      border: 1px solid #e3e3e3;
      color: #7934f6;
      font-size: 28rpx;
      height: 120rpx;
      margin-top: 26rpx;
    }
  }

  .top-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: calc(330rpx + var(--status-bar-height));
    padding: 0 32rpx;
    box-sizing: border-box;

    .btn-view {
      width: 100%;
      height: 88rpx;
      min-height: 88rpx;
      margin-top: 32rpx;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .left-btn {
        width: 48%;
        height: 100%;
        background-color: #fff;
        align-items: center;
        justify-content: center;
        display: flex;
        border-radius: 16rpx;
      }
      .right-btn {
        width: 48%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0);
        border: 2rpx solid #fff;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
        display: flex;
        border-radius: 16rpx;
      }
    }
  }
}

.add-address-item {
  width: 100%;
  min-height: 588rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 32rpx 24rpx;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 24rpx 24rpx 0 0;
  .select-box {
    width: 100%;
    height: 80rpx;
    background: rgba(121, 52, 246, 0.05);
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32rpx;
    box-sizing: border-box;
    margin-top: 32rpx;
    position: relative;
    font-size: 28rpx;
    color: #7934f6;

    .select-icon {
      position: absolute;
      right: 28rpx;
    }

    .select-box-one {
      overflow: hidden; /* 1. 超出隐藏   */
      white-space: nowrap; /* 2. 不换行     */
      text-overflow: ellipsis; /* 3. 省略号     */
      width: 590rpx;
    }
  }

  .add-address-tip {
    width: 100%;
    display: flex;
    font-size: 24rpx;
    color: #666;
    margin-top: 24rpx;
  }
  .select-head {
    width: 100%;
    height: 88rpx;
    min-height: 88rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
</style>