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

标的详情

master
453530270@qq.com 2 years ago
parent
4bcb0b08a7
commit
6c725f2987
4 changed files with 177 additions and 36 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. 2
      pages/goods/components/SlideImage.vue
  2. 36
      pages/goods/detail.scss
  3. 161
      pages/goods/detail.vue
  4. 8
      pages/index/components/goods.vue

2
pages/goods/components/SlideImage.vue
View File

@ -15,7 +15,7 @@
<!-- 轮播图片 -->
<swiper-item v-for="(item, index) in images" :key="index" @click="onPreviewImages(index)">
<view class="slide-image">
<image class="image" :draggable="false" :src="item.preview_url"></image>
<image class="image" :draggable="false" :src="item.imgurl"></image>
</view>
</swiper-item>
</swiper>

36
pages/goods/detail.scss
View File

@ -117,6 +117,42 @@
font-size: 28rpx;
}
// 标的信息
.bdcontent {
//parent style
line-height: 1.4;
color: #3c3c3c;
.item-title{
padding: 26rpx 30rpx;
font-size: 36rpx;
font-weight: 600;
border-bottom: #eee solid 2rpx;
}
.item-content{
padding: 20rpx 26rpx;
// font-size: 30rpx;
.gdic{
display: flex;
flex-direction: row;
padding: 10rpx 0 10rpx 0rpx;
border-bottom: #eee solid 2rpx;
white-space: nowrap;
&-tit{
margin-right: 12rpx;
padding-right: 10rpx;
}
&-txt{
color: #808080;
}
}
}
}
// 底部操作栏
.footer-fixed {
position: fixed;

161
pages/goods/detail.vue
View File

@ -1,8 +1,11 @@
<template>
<view v-show="!isLoading" class="container">
<!-- 商品图片轮播 -->
<SlideImage v-if="!isLoading" :video="goods.video" :videoCover="goods.videoCover" :images="goods.goods_images" />
<!-- <SlideImage v-if="!isLoading" :video="goods.video" :videoCover="goods.videoCover" :images="gdimgs" /> -->
<!-- 标的主图 -->
<view class="bgimg">
<image class="image" :src="goods.goods_image" mode="widthFix" />
</view>
<!-- 商品信息 -->
<view v-if="!isLoading" class="goods-info m-top20">
<!-- 价格、销量 -->
@ -10,7 +13,7 @@
<view class="block-left dis-flex flex-y-center">
<!-- 商品售价 -->
<text class="floor-price__samll">￥</text>
<text class="floor-price">{{ goods.goods_price_min }}</text>
<text class="floor-price">{{ goods.price }}</text>
<!-- 会员价标签 -->
<view v-if="goods.is_user_grade" class="user-grade">
<text>会员价</text>
@ -21,7 +24,7 @@
<view class="block-right dis-flex">
<!-- 销量 -->
<view class="goods-sales">
<text>销量：{{ goods.goods_sales }}件</text>
<text>销量：{{ goods.sale_count }}件</text>
</view>
</view>
</view>
@ -47,28 +50,109 @@
</view>
</view>
<!-- 标的信息 -->
<view v-if="!isLoading" class="bdcontent m-top20">
<view class="item-title b-f">
<text>标的信息</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>
<!-- 商品SKU弹窗 -->
<SkuPopup v-if="!isLoading" v-model="showSkuPopup" :skuMode="skuMode" :goods="goods" @addCart="onAddCart" />
<!-- 委托方信息 -->
<view v-if="!isLoading" class="bdcontent m-top20">
<view class="item-title b-f">
<text>委托方信息</text>
</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>
<!-- 标的评价 -->
<Comment v-if="!isLoading" :goods-id="goodsId" :limit="2" />
</view>
</view>
<!-- 标的描述 -->
<view v-if="!isLoading" class="goods-content m-top20">
<!-- 资源信息 -->
<view v-if="!isLoading" class="bdcontent m-top20">
<view class="item-title b-f">
<text>标的描述</text>
<text>资源信息</text>
</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>
<block v-if="goods.content != ''">
<view class="goods-content__detail b-f">
<mp-html :content="goods.content" />
</view>
</block>
<empty v-else tips="亲，暂无描述" />
</view>
<!-- 快捷导航 -->
<!-- <shortcut bottom="120rpx" /> -->
</view>
</template>
@ -93,10 +177,14 @@
return {
// 正在加载
isLoading: true,
// 当前商品ID
goodsId: null,
// 当前商品goods_islicode
gislicode: null,
// 商品详情
goods: {},
// 商品相册
gdimgs:[],
// 标的价格
bdprice:'',
// 购物车总数量
cartTotal: 0,
// 显示/隐藏SKU弹窗
@ -111,7 +199,7 @@
*/
onLoad(options) {
// 记录商品ID
this.goodsId = parseInt(options.goodsId)
this.gislicode = options.gislicode
// 加载页面数据
this.onRefreshPage()
},
@ -122,7 +210,7 @@
onRefreshPage() {
const app = this
app.isLoading = true
Promise.all([app.getGoodsDetail(), app.getCartTotal()])
Promise.all([app.getGoodsDetail()])
.finally(() => app.isLoading = false)
},
@ -130,12 +218,24 @@
getGoodsDetail() {
const app = this
return new Promise((resolve, reject) => {
GoodsApi.detail(app.goodsId)
.then(result => {
app.goods = result.data.detail
console.log(app.gislicode)
// 继续使用搜索商品的接口
let sodata ={goods_islicode:app.gislicode}
GoodsApi.soglist(sodata).then(res=>{
this.goods = res.data.data[0]
let imgitem = {"imgurl":this.goods.goods_images}
this.gdimgs.push(imgitem)
// 标的的价格
if(this.goods.username == "中国数字文化集团有限公司" ||
this.goods.username == "国家图书馆出版社有限公司" ||
this.goods.username == "深圳国夏文化数字科技有限公司"){
this.bdprice = "可议价(如需议价请拨打电话:0755-88266899)"
}else{
this.bdprice = '￥'+this.goods.price
}
resolve(result)
})
.catch(reject)
}).catch(reject);
})
},
@ -218,5 +318,10 @@
}
</style>
<style lang="scss" scoped>
.bgimg{
width: 100%;
height: auto;
text-align: center;
}
@import "./detail.scss";
</style>

8
pages/index/components/goods.vue
View File

@ -3,7 +3,7 @@
<view class="diy-goods">
<view class="goods-list display__list column__2">
<scroll-view>
<view class="goods-item" v-for="(dataItem, index) in dataList.data" :key="index" @click="onTargetGoods(dataItem.goods_id)">
<view class="goods-item" v-for="(dataItem, index) in dataList.data" :key="index" @click="onTargetGoods(dataItem.goods_islicode)">
<!-- 多列商品 -->
<block>
<!-- 标的图片 -->
@ -18,7 +18,7 @@
<!-- 标的价格 && 销量-->
<view class="detail-price oneline-hide">
<text class="goods-price f-30 col-m">￥ {{ dataItem.price }}</text>
<text class="sale-count col-9 f-24">销量：110 {{ dataItem.sale_count }}</text>
<text class="sale-count col-9 f-24">销量：{{ dataItem.sale_count }}</text>
</view>
<!-- 标的所有者的信息 -->
<view class="detail-owner oneline-hide">
@ -62,8 +62,8 @@
/**
* 跳转商品详情页
*/
onTargetGoods(goodsId) {
this.$navTo(`pages/goods/detail`, { goodsId })
onTargetGoods(gislicode) {
this.$navTo(`pages/goods/detail`, { gislicode })
}
}

Write Preview
Loading…
Cancel
Save