TmOct5/barter-app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

更新员工工作台商品详情

Browse Source
This commit is contained in:
zhangmanman
2021-09-16 17:50:51 +08:00
parent 071a96f245
commit 2a10a0dcec
18 changed files with 9402 additions and 4417 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
pages/goods/attestation.vue Normal file
View File

@@ -0,0 +1,186 @@
<template>
<view class="GoodsAuthentication">
<view class="authenticationTop">区块链溯源码：{{info.token}}</view>
<!-- 商品认证 商品和服务 -->
<view class="authenticationItem">
<view class="authenticationItemTitle">商品认证</view>
<view class="authenticationItemcontent" v-if="info.goods">
<view class="authenticationItemcontentItem">
<view class="title">{{info.goods.type ===1?'商品名称':'项目名称'}}: </view>
<view class="content">{{info.goods.name || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem" v-if="info.goods.type ===1">
<view class="title">生产批次：</view>
<view class="content">{{info.goods.batch || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem" v-if="info.goods.type ===2" >
<view class="title">项目分类：</view>
<view class="content">{{info.goods.category || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem" v-if="info.goods.type ===1">
<view class="title">规格：</view>
<view class="content">{{info.goods.skus[0].unit || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem">
<view class="title">数量：</view>
<view class="content">{{info.goods.skus[0].stock || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem">
<view class="title">售价：</view>
<view class="content">{{info.goods.skus[0].price || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem" v-if="info.goods.type ===1">
<view class="title">生产日期：</view>
<view class="content">{{info.goods.producted_at || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem" >
<view class="title">{{info.goods.type ===1?'保质期':'有效期'}}：</view>
<view class="content">{{info.goods.expiried_at || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem" v-if="info.goods.type ===1">
<view class="title">生产厂家：</view>
<view class="content">{{info.goods.product_name || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem" v-if="info.goods.type ===1">
<view class="title">生产地：</view>
<view class="content">{{info.goods.product_address || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem" >
<view class="title">供应商：</view>
<view class="content">{{info.goods.skus[0].price || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem" >
<view class="title">经营许可证：</view>
<view class="content">{{info.goods.lisence || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem" >
<view class="title">实物照片：</view>
<image class="img" v-if="info.goods.cover" :src="info.goods.cover" @click="priveImg(info.goods.cover)" mode="aspectFill" />
<view class="content" v-else>暂无数据</view>
</view>
</view>
</view>
<!-- 企业认证 （商品和服务通用） -->
<view class="authenticationItem">
<view class="authenticationItemTitle">企业认证</view>
<view class="authenticationItemcontent" v-if="info.certification">
<view class="authenticationItemcontentItem" >
<view class="title">企业名称：</view>
<view class="content">{{info.certification.name || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem">
<view class="title">企业地址：</view>
<view class="content">{{info.certification.address || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem">
<view class="title">统一信用代码：</view>
<view class="content">{{info.certification.certification.code || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem">
<view class="title">行业：</view>
<view class="content">{{info.certification.industry.title || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem">
<view class="title">经营范围：</view>
<view class="content">{{info.certification.range || '暂无数据'}}</view>
</view>
<view class="authenticationItemcontentItem">
<view class="title">联系电话：</view>
<u-icon name="phone-fill" v-if='info.certification.contack' @click="call(info.certification.contact)"
color="#2979ff" label-color="#2979ff" label-size="26" :label='info.certification.contact' />
<view class="content" v-else> 暂无数据 </view>
</view>
<view class="authenticationItemcontentItem">
<view class="title">营业执照：</view>
<image class="img" v-if='info.certification.certification.license' :src="info.certification.certification.license" @click="priveImg(info.certification.certification.license)" mode="aspectFill" />
<view class="content" v-else>暂无数据</view>
</view>
</view>
</view>
<!-- 弹窗提示喽 -->
<u-toast ref="uToast" />
</view>
</template>
<script>
import { managesAttestation } from '@/apis/interfaces/goods'
export default {
data() {
return {
info: ''
}
},
created() {
managesAttestation(this.$Route.query.id).then(res=>{
console.log(res)
this.info = res
})
},
methods: {}
}
</script>
<style lang="scss" scoped>
page {
background-color: #F7F7F7;
}
.GoodsAuthentication {
padding: 30rpx;
.authenticationTop {
width: 100%;
padding: 20rpx 50rpx;
background-color: #c82626;
font-size: 26rpx;
color: #fff;
border-radius: 60rpx;
word-break: break-all;
text-align: center;
}
// 商品认证
.authenticationItem{
width: 100%;
min-height: 300rpx;
margin-top: 20rpx;
.authenticationItemTitle{
font-size: 30rpx;
color: #333333;
font-weight: 600;
padding: 30rpx 20rpx;
}
.authenticationItemcontent{
width: 100%;
min-height: 500rpx;
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;
.authenticationItemcontentItem{
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
padding: 20rpx 0;
font-size: 24rpx;
.title{
width: 180rpx;
}
.content{
text-overflow: ellipsis;
width: calc( 100% - 180rpx);
}
.img{
width: 340rpx;
height: 200rpx;
}
}
}
}
}
</style>

117
pages/goods/chain.vue Normal file
View File

@@ -0,0 +1,117 @@
<template>
<view class="GoodsChain">
<image src="https://e-chain.cnskl.com/storage/imageresource/chain-bg.png" class='chainBg' />
<view class="chain-content">
<view class="chain-center">
<image src="/static/images/service-logi.png" mode="aspectFill" class="logo" />
<view class="name">易品新境区块链溯源证书</view>
<view class="no">区块链溯源证书：{{info.token}}</view>
<view class="content">
<view class="con-item">兹证明：</view>
<view class="con-item" v-if="info.company">
{{info.company.name}}，产品符合溯源规范，认证内容如下：特授权其产品在易品新境区块链溯源商城出售！
</view>
<view class="con-item">交易哈希: {{info.hash}}</view>
<view class="con-item">区块链高度: {{info.height}}</view>
</view>
<view class="date" v-if="info.applied_at">授权时间: {{info.applied_at}}</view>
<view class="date">有效期至: {{info.ended_at}}</view>
<view class="companyInfo">易品新境区块链有限公司</view>
</view>
</view>
<!-- 弹窗提示喽 -->
<u-toast ref="uToast" />
</view>
</template>
<script>
import { managesChain } from '@/apis/interfaces/goods'
export default {
data() {
return {
info: ''
}
},
created() {
managesChain(this.$Route.query.id).then(res=>{
this.info = res
})
},
methods: {}
}
</script>
<style lang="scss" scoped>
page {
background-color: #F7F7F7;
}
.GoodsChain {
background-color:fff;
width: 100%;
min-height: 100vh;
position: relative;
z-index: 1;
.chainBg{
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
}
.chain-content{
width: 100%;
height: 100vh;
z-index: 2;
padding: 18vh 10vw 15vh 10vw ;
box-sizing: border-box;
position: relative;
z-index: 3;
.chain-center{
width: 100%;
height: 100%;
.logo{
width: 160rpx;
height: 160rpx;
border-radius: 50%;
position: relative;
margin-left: -80rpx;
left: 50%;
margin-bottom: 20rpx;
border: solid rgba($color: #fff, $alpha: .3) 10rpx;
}
.name{
font-size: 40rpx;
font-weight: bold;
text-align: center;
}
.no{
font-size: 26rpx;
font-weight: bold;
text-align: center;
margin-top: 10rpx;
}
.content{
margin-top: 60rpx;
font-size: 28rpx;
padding: 0 20rpx;
.con-item{
margin-bottom: 30rpx;
word-break: break-all;
}
}
.date{
text-align: right;
margin-bottom: 10rpx;
padding-right: 20rpx;
}
.companyInfo{
text-align: right;
margin-bottom: 40rpx;
padding-right: 20rpx;
}
}
}
}
</style>

55
pages/goods/details.vue
View File

@@ -45,15 +45,15 @@
<view class="openbtn" @click="onOpenWechat">进店<image class="openbtn-img" src="../../static/icons/equity_arrow_right.png" mode="aspectFill"></image></view>
</view>
<view class="tooSee">
<view class="tooSee-label">
<view class="tooSee-label" @click="$Router.push({name: 'GoodsChain', params: {id: goodsObj.goods_id}})">
区块链证书
<image class="tooSee-label-img" src="../../static/icons/equity_arrow_right.png" mode="aspectFill"></image>
</view>
<view class="tooSee-label">
<view class="tooSee-label" @click="$Router.push({name: 'GoodsAttestation', params: {id: goodsObj.goods_id}})">
商品认证
<image class="tooSee-label-img" src="../../static/icons/equity_arrow_right.png" mode="aspectFill"></image>
</view>
<view class="tooSee-label">
<view class="tooSee-label" @click="$Router.push({name: 'GoodstracedTo', params: {id: goodsObj.goods_id}})">
商品溯源
<image class="tooSee-label-img" src="../../static/icons/equity_arrow_right.png" mode="aspectFill"></image>
</view>
@@ -129,7 +129,7 @@
{{item.time.interval}}
</view>
</view>
<view class="coupons-right">
<view class="coupons-right" @click="drawCoupons(item.coupon_id)">
领取
</view>
</view>
@@ -166,7 +166,7 @@
</template>
<script>
import { goods } from '@/apis/interfaces/goods'
import { goods, managesCoupons } from '@/apis/interfaces/goods'
import userAuth from '@/public/userAuth'
export default {
data() {
@@ -181,7 +181,6 @@
},
created() {
goods(this.$Route.query.id || 16).then(res=>{
console.log(res.coupons)
this.loding = false
this.goodsObj = res
this.identity = res.identity.id || ''
@@ -235,6 +234,14 @@
})
},
// 领取优惠券
drawCoupons(id){
console.log(id)
managesCoupons(id).then(res=>{
console.log(res)
})
},
// 选择优惠券-显示
couponsOpne(){
this.$refs.couponsPopup.open('bottom')
@@ -305,8 +312,8 @@
font-size: 24rpx;
border-radius: 50rpx;
padding: 0 10rpx;
height: 38rpx;
line-height: 38rpx;
height: 34rpx;
line-height: 36rpx;
margin: 6rpx 10rpx 0 0;
}
}
@@ -342,33 +349,36 @@
background-color: #fef2f2;
color: #e1293f;
border-radius: 8rpx;
border: 2rpx solid #e7e2df;
padding: $padding - 10;
border: 1rpx solid #ffe5e5;
padding: $padding - 15;
box-sizing: border-box;
display: flex;
position: relative;
margin-bottom: $margin - 10;
.coupon-list {
font-size: 24rpx;
font-size: 22rpx;
.coupon-label {
display: inline-block;
border: 2rpx solid #e1293f;
border: 1rpx solid #e998a1;
border-radius: 50rpx;
padding: 4rpx 15rpx;
padding: 0 15rpx;
height: 34rpx;
line-height: 34rpx;
margin-right: $margin - 10;
}
}
.coupon-btn {
position: absolute;
right: $padding - 10;
top: $padding - 10;
font-size: 28rpx;
right: $padding - 20;
top: 0;
line-height: 60rpx;
font-size: 24rpx;
display: flex;
font-weight: 700;
.coupon-btn-img {
width: 30rpx;
height: 30rpx;
margin-top: 6rpx;
width: 22rpx;
height: 22rpx;
margin: 20rpx 0 0 4rpx;
}
}
}
@@ -402,7 +412,7 @@
background: #F8F8F8;
border-radius: $radius/2;
padding: $padding;
min-height: 160rpx;
min-height: 220rpx;
.logo{
position: absolute;
left: $margin;
@@ -697,4 +707,9 @@
line-height: 44rpx;
}
}
.serve-cont {
height: 40vh;
overflow-y: scroll;
}
</style>

199
pages/goods/tracedTo.vue Normal file
View File

@@ -0,0 +1,199 @@
<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() {
console.log(this.$Route.query.id)
managesTracedTo(this.$Route.query.id).then(res=>{
console.log(res)
this.list = res.list
this.info = res
})
},
methods: {}
}
</script>
<style lang="scss" scoped>
page {
background-color: #F7F7F7;
}
.GoodsAuthentication {
padding: 30rpx;
.authenticationTop {
width: 100%;
padding: 20rpx 50rpx;
background-color: #c82626;
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>