[内网]文化云交易前端H5
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

429 lines
13 KiB

<template>
<view v-show="!isLoading" class="container">
<!-- 商品图片轮播 -->
<!-- <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">
<!-- 价格、销量 -->
<view class="info-item info-item__top dis-flex flex-x-between flex-y-end">
<view class="block-left dis-flex flex-y-center">
<!-- 商品售价 -->
<text class="floor-price__samll">¥</text>
<text class="floor-price">{{ goods.price }}</text>
<!-- 会员价标签 -->
<view v-if="goods.is_user_grade" class="user-grade">
<text>会员价</text>
</view>
<!-- 划线价 -->
<text v-if="goods.line_price_min > 0" class="original-price">¥{{ goods.line_price_min }}</text>
</view>
<view class="block-right dis-flex">
<!-- 销量 -->
<view class="goods-sales">
<text>销量:{{ goods.sale_count }}件</text>
</view>
</view>
</view>
<!-- 标题、分享 -->
<view class="info-item info-item__name dis-flex flex-y-center">
<view class="goods-name flex-box">
<text class="twoline-hide">{{ goods.goods_name }}</text>
</view>
</view>
</view>
<view v-if="!isLoading" class="bdcontent m-top20">
<view class="item-title-tab">
<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>
<!-- 标的信息 -->
<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">{{goods.contractual_start_time}} - {{goods.contractualtime_end_time}}</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" 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>
<!-- 协议弹框 -->
<whpop v-model="showPopup" :maskCloseAble="true" :mkey="murl"></whpop>
<!-- 底部选项卡 -->
<view class="footer-fixed">
<view class="footer-container">
<view class="foo-item-fast">
<!-- 进入店铺 -->
<view class="btn-item btn-item-main" @click="goteshop()">
<text>进入店铺</text>
</view>
</view>
<!-- 操作按钮 -->
<view class="foo-item-btn">
<view class="btn-wrapper">
<view v-if="shopcart_show" class="btn-item btn-item-deputy" @click="addCart()">
<text>{{shopcart_str}}</text>
</view>
<view v-if="purchase_show" class="btn-item btn-item-main" @click="buyNow()">
<text>立即购买</text>
</view>
</view>
</view>
</view>
</view>
<!-- 店铺详情 -->
<view class="dpxq" style="display: none;">
<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 {
// 正在加载
isLoading: true,
// 当前商品goods_islicode
gislicode: null,
// 商品详情
goods: {},
// 商品相册
gdimgs:[],
// 标的价格
bdprice:'',
// 购物车总数量
cartTotal: 0,
// 显示/隐藏SKU弹窗
showSkuPopup: false,
// 模式 1:都显示 2:只显示购物车 3:只显示立即购买
skuMode: 1,
tab: [
{
key: 1,
title: '标的信息',
},
{
key: 2,
title: '委托方信息',
},
{
key: 3,
title: '资源信息',
},
],
tabKey: 1,
showPopup: false, // 协议展示
murl: '', // 协议标识
ears_of: null, // 判断转让
shopcart_show: false, // 购物车显示
shopyear_show: false, // 输入购买年限显示
talprice_show: false, // 合计显示
purchase_show: false, // 立即购买显示
shopyear_num: '', // 立即购买显示
shopcart_str: '加入购物车'
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
// 记录商品ID
this.gislicode = options.gislicode
// 加载页面数据
this.onRefreshPage()
},
methods: {
// 切换内容
changeTab(key) {
this.tabKey = key
},
// 刷新页面数据
onRefreshPage() {
const app = this
app.isLoading = true
Promise.all([app.getGoodsDetail()])
.finally(() => app.isLoading = false)
},
// 获取商品信息
getGoodsDetail() {
const app = this
return new Promise((resolve, reject) => {
//console.log(app.gislicode)
// 继续使用搜索商品的接口
let sodata ={goods_islicode:app.gislicode}
GoodsApi.soglist(sodata).then(res=>{
app.goods = res.data.data[0]
let imgitem = {"imgurl":app.goods.goods_images}
app.gdimgs.push(imgitem)
// 标的的价格
if(app.goods.username == "中国数字文化集团有限公司" ||
app.goods.username == "国家图书馆出版社有限公司" ||
app.goods.username == "深圳国夏文化数字科技有限公司"){
app.bdprice = "可议价(如需议价请拨打电话:0755-88266899)"
}else{
app.bdprice = '¥'+app.goods.price
}
if (
app.goods.username != '中国数字文化集团有限公司' &&
app.goods.username != '国家图书馆出版社有限公司' &&
app.goods.username != '深圳国夏文化数字科技有限公司'
) {
app.ears_of = app.goods.goods_entrust
app.shopcart_show = true
app.shopyear_show = true
app.talprice_show = true
app.purchase_show = true
} else {
app.ears_of = 3
app.shopcart_show = true
}
if (app.goods.goods_entrust == '1') {
app.shopyear_show = false
}
resolve(res)
}).catch(reject);
})
},
// 调整
goteshop(){
const app = this
let spname = this.goods.username
this.$navTo("pages/goods/list?k="+spname+'&dt='+new Date().getTime())
},
// 添加到购物车
addCart(){
const app = this
let accessToken = uni.getStorageSync("AccessToken")
if (accessToken) {
let isliCode = uni.getStorageSync("isliCode")
if (isliCode) {
let userType = uni.getStorageSync("userType")
if (userType === '0') {
app.$toast('个人认证账号不能加入购物车')
} else {
if (app.ears_of === 2) {
let shopyear_num = app.shopyear_num
if (shopyear_num === 0 || shopyear_num === '') {
app.$error('购买年限只能输入整数')
} else {
app.shop_goods()
}
}
if (app.ears_of === 3 || app.ears_of === 1) {
app.shop_goods()
}
}
} else {
app.$toast('账号未认证,请进行认证!')
setTimeout(app.jumpMycertinfoUrl,3000)
}
} else {
app.$toast("请先登录")
setTimeout(app.jumpUrl('/pages/login/index'),3000)
}
},
jumpMycertinfoUrl (url) {
uni.navigateTo({
url:'/pages/user/mycertinfo/mycertinfo'
})
},
// 发送加入购物车请求
shop_goods() {
const app = this
let param = {
goods_isli : app.goods.goods_islicode,
user_isli : uni.getStorageSync("isliCode"),
use_years : 0,
}
if (app.ears_of === 3) {
param.use_years = 1
}
GoodsApi.addShoppingCa(param).then(res => {
console.log(res)
if (res.resultCode === "00000000") {
app.$success("加入购物车成功");
app.shopcart_str = '已加入购物车'
} else {
app.$error(res.errMsg);
}
}).catch()
},
//立即购买
buyNow(){
this.$toast("buy now")
},
// 跳转到首页
onTargetHome(e) {
this.$navTo('pages/index/index')
},
// 阅读注册协议和隐私
gotopage(str){
this.murl = str
this.showPopup = ! this.showPopup
},
},
/**
* 分享当前页面
*/
onShareAppMessage() {
const app = this
// 构建页面参数
const params = app.$getShareUrlParams({
goodsId: app.goodsId,
})
return {
title: app.goods.goods_name,
path: `/pages/goods/detail?${params}`
}
},
/**
* 分享到朋友圈
* 本接口为 Beta 版本,暂只在 Android 平台支持,详见分享到朋友圈 (Beta)
* https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
*/
onShareTimeline() {
const app = this
// 构建页面参数
const params = app.$getShareUrlParams({
goodsId: app.goodsId,
})
return {
title: app.goods.goods_name,
path: `/pages/goods/detail?${params}`
}
}
}
</script>
<style lang="scss" scoped>
page {
background: #fafafa;
}
.bgimg{
width: 100%;
height: auto;
text-align: center;
}
@import "./detail.scss";
</style>