xioayue
/
why_in_h5
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化标的信息详情页面

master
wanghongjun 2 years ago
parent
2026c12166
commit
6a6ceeeeff
2 changed files with 142 additions and 105 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      pages/goods/detail.scss
  2. 233
      pages/goods/detail.vue

14
pages/goods/detail.scss
View File

@ -59,6 +59,9 @@
.info-item__name .goods-name {
font-size: 30rpx;
.twoline-hide {
white-space: normal;
}
}
/* 商品分享 */
@ -124,11 +127,15 @@
color: #3c3c3c;
.item-title{
padding: 26rpx 30rpx;
padding: 26rpx 50rpx;
font-size: 36rpx;
font-weight: 600;
border-bottom: #eee solid 2rpx;
display: inline-block;
}
.item-title-text {
border-bottom: #000000 solid 4rpx;
}
.item-content{
padding: 20rpx 26rpx;
@ -148,6 +155,11 @@
&-txt{
color: #808080;
white-space: normal;
.atxt {
color: red;
text-decoration: underline;
}
}
}
}

233
pages/goods/detail.vue
View File

@ -38,110 +38,105 @@
</view>
<!-- 标的信息 -->
<view v-if="!isLoading" class="bdcontent m-top20">
<view class="item-title b-f">
<text>标的信息</text>
<view class="item-title b-f" v-for="items in tab" @click="changeTab(items.key)">
<text :class="{'item-title-text': tabKey === items.key}">{{items.title}}</text>
</view>
<view class="item-content b-f">
<view class="gdic">
<text class="gdic-tit">标的名称</text>
<text class="gdic-txt">{{goods.goods_name}}</text>
</view>
<view class="gdic">
<text class="gdic-tit">标的ISLI标志码</text>
<text class="gdic-txt">{{goods.goods_islicode}}</text>
</view>
<view class="gdic">
<text class="gdic-tit">标的类型</text>
<text class="gdic-txt">{{goods.goods_type==1?'文化资源数据':'文化数字内容'}}</text>
</view>
<view class="gdic">
<text class="gdic-tit">交易方式</text>
<text class="gdic-txt">{{goods.goods_entrust==1?'转让':'授权'}}</text>
</view>
<view class="gdic">
<text class="gdic-tit">权益</text>
<text class="gdic-txt">{{goods.goods_ownership_str}}</text>
</view>
<view class="gdic">
<text class="gdic-tit">委托类型</text>
<text class="gdic-txt">{{goods.contractual_period==1?'永久性委托':(goods.contractual_period==2?'一次性委托':'阶段性委托')}}</text>
</view>
<view class="gdic">
<text class="gdic-tit">收费类型</text>
<text class="gdic-txt">{{goods.charges_type==1?'免费':'付费'}}</text>
</view>
<view class="gdic">
<text class="gdic-tit">标的价款</text>
<text class="gdic-txt">{{bdprice}}</text>
</view>
</view>
</view>
<!-- 委托方信息 -->
<view v-if="!isLoading" class="bdcontent m-top20">
<view class="item-title b-f">
<text>委托方信息</text>
<!-- 标的信息 -->
<view class="item-content b-f" v-if="tabKey === 1">
<view class="gdic">
<text class="gdic-tit">标的名称</text>
<text class="gdic-txt">{{goods.goods_name}}</text>
</view>
<view class="gdic">
<text class="gdic-tit">标的ISLI标志码</text>
<text class="gdic-txt">{{goods.goods_islicode}}</text>
</view>
<view class="gdic">
<text class="gdic-tit">标的类型</text>
<text class="gdic-txt">{{goods.goods_type==1?'文化资源数据':'文化数字内容'}}</text>
</view>
<view class="gdic">
<text class="gdic-tit">交易方式</text>
<text class="gdic-txt">{{goods.goods_entrust==1?'转让':'授权'}}</text>
</view>
<view class="gdic">
<text class="gdic-tit">权益</text>
<text class="gdic-txt">{{goods.goods_ownership_str}}</text>
</view>
<view class="gdic">
<text class="gdic-tit">委托类型</text>
<text class="gdic-txt">{{goods.contractual_period==1?'永久性委托':(goods.contractual_period==2?'一次性委托':'阶段性委托')}}</text>
</view>
<view class="gdic">
<text class="gdic-tit">收费类型</text>
<text class="gdic-txt">{{goods.charges_type==1?'免费':'付费'}}</text>
</view>
<view class="gdic">
<text class="gdic-tit">委托起止日</text>
<text class="gdic-txt">{{bdprice}}</text>
</view>
<view class="gdic">
<text class="gdic-tit">免责条款</text>
<text class="gdic-txt">
<text class="atxt" @click="gotopage('escapeclause')">点击查看免责条款</text>
</text>
</view>
</view>
<view class="item-content b-f">
<view class="gdic">
<text class="gdic-tit">联合推荐方</text>
<text class="gdic-txt">深圳国夏文化数字科技有限公司</text>
</view>
<view class="gdic">
<text class="gdic-tit">交易主体唯一标志码</text>
<text class="gdic-txt">{{goods.user_islicode}}</text>
</view>
<view class="gdic">
<text class="gdic-tit">认证类型</text>
<text class="gdic-txt">{{goods.user.authType}}</text>
</view>
<view class="gdic">
<text class="gdic-tit">认证状态</text>
<text class="gdic-txt">{{goods.user.state=='0'?'认证中':(goods.user.state=='1'?'认证成功':'认证失败')}}</text>
</view>
<view class="gdic">
<text class="gdic-tit">标的数量</text>
<text class="gdic-txt">{{goods.goods_ownership_str}}</text>
</view>
<view class="gdic">
<text class="gdic-tit">店铺详情</text>
<text class="gdic-txt">{{goods.username}}</text>
</view>
<view class="gdic">
<text class="gdic-tit">渠道机构</text>
<text class="gdic-txt">{{goods.copyrightOwner}}</text>
</view>
</view>
</view>
<!-- 资源信息 -->
<view v-if="!isLoading || goods.source" class="bdcontent m-top20">
<view class="item-title b-f">
<text>资源信息</text>
<!-- 委托方信息 -->
<view class="item-content b-f" v-else-if="tabKey === 2">
<view class="gdic">
<text class="gdic-tit">联合推荐方</text>
<text class="gdic-txt">深圳国夏文化数字科技有限公司</text>
</view>
<view class="gdic">
<text class="gdic-tit">交易主体唯一标志码</text>
<text class="gdic-txt">{{goods.user_islicode}}</text>
</view>
<view class="gdic">
<text class="gdic-tit">认证类型</text>
<text class="gdic-txt">{{goods.user.authType}}</text>
</view>
<view class="gdic">
<text class="gdic-tit">认证状态</text>
<text class="gdic-txt">{{goods.user.state=='0'?'认证中':(goods.user.state=='1'?'认证成功':'认证失败')}}</text>
</view>
<view class="gdic">
<text class="gdic-tit">标的数量</text>
<text class="gdic-txt">{{goods.goods_ownership_str}}</text>
</view>
<view class="gdic">
<text class="gdic-tit">店铺详情</text>
<text class="gdic-txt">{{goods.username}}</text>
</view>
<view class="gdic">
<text class="gdic-tit">渠道机构</text>
<text class="gdic-txt">{{goods.copyrightOwner}}</text>
</view>
</view>
<!-- 资源信息 -->
<view class="item-content b-f" v-else-if="tabKey === 3" v-for="(item,index) in goods.source" >
<view class="gdic">
<text class="gdic-tit">资源类型</text>
<text class="gdic-txt">{{item.source_type}}</text>
</view>
<view class="gdic">
<text class="gdic-tit">资源所有人</text>
<text class="gdic-txt">{{item.registrant}}</text>
</view>
<view class="gdic">
<text class="gdic-tit">服务机构编码</text>
<text class="gdic-txt">{{item.servicecode}}</text>
</view>
<view class="gdic">
<text class="gdic-tit">资源编码</text>
<text class="gdic-txt">{{item.sourceIdentify}}</text>
</view>
</view>
<view class="item-content b-f" v-for="(item,index) in goods.source">
<view class="gdic">
<text class="gdic-tit">资源类型</text>
<text class="gdic-txt">{{item.source_type}}</text>
</view>
<view class="gdic">
<text class="gdic-tit">资源所有人</text>
<text class="gdic-txt">{{item.registrant}}</text>
</view>
<view class="gdic">
<text class="gdic-tit">服务机构编码</text>
<text class="gdic-txt">{{item.servicecode}}</text>
</view>
<view class="gdic">
<text class="gdic-tit">资源编码</text>
<text class="gdic-txt">{{item.sourceIdentify}}</text>
</view>
</view>
</view>
<!-- 协议弹框 -->
<whpop v-model="showPopup" :maskCloseAble="true" :mkey="murl"></whpop>
<!-- 底部选项卡 -->
<view class="footer-fixed">
@ -177,14 +172,18 @@
<view class="xqbtn" @click="goteshop()">进入店铺</view>
</view>
</view>
</template>
<script>
import * as GoodsApi from '@/api/goods'
import whpop from "../login/components/WhPopup";
export default {
components: {
// Shortcut,
'whpop': whpop,
},
data() {
return {
@ -194,16 +193,33 @@
gislicode: null,
// 商品详情
goods: {},
// 商品相册
gdimgs:[],
// 标的价格
bdprice:'',
// 商品相册
gdimgs:[],
// 标的价格
bdprice:'',
// 购物车总数量
cartTotal: 0,
// 显示/隐藏SKU弹窗
showSkuPopup: false,
// 模式 1:都显示 2:只显示购物车 3:只显示立即购买
skuMode: 1
skuMode: 1,
tab: [
{
key: 1,
title: '标的信息',
},
{
key: 2,
title: '委托方信息',
},
{
key: 3,
title: '资源信息',
},
],
tabKey: 1,
showPopup: false, // 协议展示
murl: '', // 协议标识
}
},
@ -218,6 +234,10 @@
},
methods: {
// 切换内容
changeTab(key) {
this.tabKey = key
},
// 刷新页面数据
onRefreshPage() {
@ -274,6 +294,11 @@
this.$navTo('pages/index/index')
},
// 阅读注册协议和隐私
gotopage(str){
this.murl = str
this.showPopup = ! this.showPopup
},
},
/**

Write Preview
Loading…
Cancel
Save