.

src/main/nine-space/src/components/product/HashCode.vue

@@ -0,0 +1,120 @@
+<template>
+    <van-collapse-item name="hashCode" class="goods-info">
+        <template #title>
+            <div class="page-title"><img src="../../assets/icon-lianshangxinxi(3).png" alt="" />链上信息</div>
+        </template>
+        <div class="page-text" v-if="info.txHash">
+            <div class="text-info">
+                <span class="text1">Hash地址：</span>
+                <span class="van-ellipsis">{{ info.txHash }}</span>
+                <img @click="copy(info.txHash)" src="../../assets/svgs/copy_icon.svg" alt="" />
+            </div>
+            <div class="text-info">
+                <span class="text1">区块高度： </span> <span>{{ info.blockNumber }}</span>
+            </div>
+            <div class="text-info">
+                <span class="text1">令牌ID： </span>
+                <span class="van-ellipsis">{{ info.tokenId }}</span>
+                <img @click="copy(info.tokenId)" src="../../assets/svgs/copy_icon.svg" alt="" />
+            </div>
+        </div>
+        <div v-else class="textName">铸造者未设置</div>
+    </van-collapse-item>
+</template>
+
+<script>
+export default {
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
+    },
+    methods: {
+        copy(text) {
+            this.$copyText(text).then(
+                e => {
+                    this.$toast.success('复制成功');
+                    console.log(e);
+                },
+                e => {
+                    this.$toast('复制失败');
+                    console.log(e);
+                }
+            );
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+/deep/.goods-info {
+    .van-cell {
+        // padding: 0 0;
+        &::after {
+            content: none;
+        }
+    }
+}
+.page-title {
+    // padding: 0 16px;
+    font-size: @font2;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 28px;
+    span {
+        color: @text3;
+        font-size: @font1;
+    }
+}
+
+.page-title {
+    font-size: @font2;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 24px;
+    display: flex;
+    align-items: center;
+    &:not(:first-child) {
+        padding-top: 16px;
+    }
+    img {
+        width: 18px;
+        height: 18px;
+        margin-right: 6px;
+    }
+}
+.page-text {
+    font-size: @font2;
+    color: #ffffff;
+    line-height: 28px;
+    word-break: break-all;
+    // margin-top: 10px;
+    // p {
+    //     font-size: @font2;
+    //     color: #ffffff;
+    //     line-height: 28px;
+    //     // margin-top: 10px;
+    //     word-break: break-all;
+    // }
+
+    .text-info {
+        .flex();
+        .text1 {
+            min-width: 80px;
+        }
+        .van-ellipsis {
+            width: 200px;
+        }
+
+        img {
+            width: 18px;
+            height: 18px;
+            flex-shrink: 0;
+            margin-left: 5px;
+        }
+    }
+}
+</style>