[商城整个模块，及个人中心相应的模块调整]
This commit is contained in:
229
pages/goods/tracedTo.vue
Normal file
229
pages/goods/tracedTo.vue
Normal file
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<view class="GoodsAuthentication">
|
||||
<view class="authenticationTop" v-if='list.length>0'>区块链溯源码：{{info.token}}</view>
|
||||
<!-- 进度条 -->
|
||||
<view v-if='list.length>0' class='timeAxis'>
|
||||
<view class="box-top" v-for="(item,index) in list" :key="index">
|
||||
<view class="left-box-top"><span>商品交易</span>{{item.blockTime}}</view> <!-- 左边 -->
|
||||
<view class="line" :class="{active:true,none:index==(list.length-1)}">
|
||||
<!-- 中线 -->
|
||||
<view class="dot" :class="{active:true}"></view><!-- 圆点 -->
|
||||
</view>
|
||||
|
||||
<!-- 右边 -->
|
||||
<view class="right-box-top">
|
||||
<view class="authenticationItem">
|
||||
<view class="authenticationItemcontent">
|
||||
<view class="authenticationItemcontentItem" v-if="item.goods">
|
||||
<view class="title">名称：</view>
|
||||
<view class="content">{{item.goods.name}}</view>
|
||||
</view>
|
||||
<view class="authenticationItemcontentItem" v-if="item.goods">
|
||||
<view class="title">规格：</view>
|
||||
<view class="content">{{item.goods.skus[0].unit}}</view>
|
||||
</view>
|
||||
<view class="authenticationItemcontentItem">
|
||||
<view class="title">购买数量：</view>
|
||||
<view class="content">{{item.amount}}</view>
|
||||
</view>
|
||||
<view class="authenticationItemcontentItem">
|
||||
<view class="title">区块链高度：</view>
|
||||
<view class="content">{{item.height}}</view>
|
||||
</view>
|
||||
<view class="authenticationItemcontentItem">
|
||||
<view class="title">交易哈希：</view>
|
||||
<view class="content">{{item.hash}}</view>
|
||||
</view>
|
||||
<view class="zhushi">注释：{{item.note}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<no-list v-if="list.length === 0" name='no-chain' txt="没有任何数据哦~" />
|
||||
<!-- 弹窗提示喽 -->
|
||||
<u-toast ref="uToast" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
managesTracedTo
|
||||
} from '@/apis/interfaces/goods'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: '',
|
||||
info: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
managesTracedTo(this.$Route.query.id).then(res => {
|
||||
this.list = res.list
|
||||
this.info = res
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
priveImg(img) {
|
||||
uni.previewImage({
|
||||
current: img, // 当前显示图片的http链接
|
||||
urls: [img] // 需要预览的图片http链接列表
|
||||
})
|
||||
},
|
||||
call(phone) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: phone,
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #F7F7F7;
|
||||
}
|
||||
|
||||
.GoodsAuthentication {
|
||||
padding: 30rpx;
|
||||
|
||||
.authenticationTop {
|
||||
width: 100%;
|
||||
padding: 20rpx 50rpx;
|
||||
background-color: $main-color;
|
||||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
border-radius: 60rpx;
|
||||
word-break: break-all;
|
||||
text-align: center;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
// 商品认证
|
||||
.authenticationItem {
|
||||
width: 100%;
|
||||
min-height: 300rpx;
|
||||
|
||||
.authenticationItemTitle {
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
font-weight: 600;
|
||||
padding: 30rpx 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.timeAxis {
|
||||
margin-top: 60rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.box-top {
|
||||
width: 100%;
|
||||
min-height: 120rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.left-box-top {
|
||||
width: 124rpx;
|
||||
text-align: center;
|
||||
color: #cacaca;
|
||||
font-size: 22rpx;
|
||||
padding-top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
|
||||
span {
|
||||
font-size: 28rpx;
|
||||
// font-weight: bold;
|
||||
color: #333;
|
||||
padding-bottom: 10rpx;
|
||||
padding-right: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 2rpx;
|
||||
background-color: rgba(228, 231, 237, 1);
|
||||
margin: 0 20rpx 0 20rpx;
|
||||
padding-top: 0;
|
||||
|
||||
.dot {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
background-color: rgba(228, 231, 237, 1);
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
left: -10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.right-box-top {
|
||||
flex: 1;
|
||||
width: calc(100% - 170rpx);
|
||||
padding: 0 0 20rpx 0;
|
||||
|
||||
// 商品认证
|
||||
.authenticationItem {
|
||||
width: 100%;
|
||||
|
||||
.authenticationItemcontent {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
border: solid rgba(200, 38, 0, .05) 6rpx;
|
||||
box-shadow: 2rpx 2rpx 20rpx 0rpx rgba(200, 38, 0, .051);
|
||||
padding: 10rpx 20rpx;
|
||||
|
||||
.zhushi {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
padding: 10rpx 0;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.authenticationItemcontentItem {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
padding: 12rpx 0;
|
||||
font-size: 26rpx;
|
||||
|
||||
.title {
|
||||
width: 160rpx;
|
||||
}
|
||||
|
||||
.content {
|
||||
text-overflow: ellipsis;
|
||||
width: calc(100% - 180rpx);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 220rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
//激活元素
|
||||
.active {
|
||||
background-color: #c82626 !important;
|
||||
}
|
||||
|
||||
// 隐藏元素
|
||||
.none {
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user