why_in_h5/pages/goods/detail.vue

<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">{{ bdprice }}</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" :class="shopyear_show || talprice_show ? 'item-content-long' : '' ">
        <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">{{new_total}}</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.source[0].source_data.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 class="gdic">
          <text class="gdic-tit">大小</text>
          <text class="gdic-txt">{{item.source_data.metadataFileSize}}</text>
        </view>
        <view class="gdic">
          <text class="gdic-tit">格式</text>
          <text class="gdic-txt">{{item.source_data.metadataFileFormat}}</text>
        </view>
        <view class="gdic">
          <text class="gdic-tit">时间</text>
          <text class="gdic-txt">{{item.source_data.releaseTime}}</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-price">
        <view v-if="shopyear_show" class="">
          <view class="btn-item-year">请输入年限：</view>
          <input class="uni-input btn-item-input" v-model="use_years" maxlength="10" placeholder="请输入年限" v-on:input="ipt()"/>
        </view>
        <view v-if="talprice_show" class="btn-item-addprice" @click="addCart()">
          <text>合计：￥{{addprice}}元</text>
        </view>
      </view>

		  <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 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, // 立即购买显示
        shopcart_str: '加入购物车',
        new_total: 0, // 标的数量
        addprice: 0, // 合计金额
        use_years: '', // 年限
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    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]
            app.goods.contractual_start_time = app.goods.contractual_start_time.split(' ')[0]
            app.goods.contractualtime_end_time = app.goods.contractualtime_end_time.split(' ')[0]
            let imgitem = {"imgurl":app.goods.goods_images}
            app.gdimgs.push(imgitem)
            app.transfer(app.goods.goods_entrust, app.goods.price); //转让
            // 标的的价格
            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
              let footer = document.querySelector('.footer-container');
              // 修改高度值
              footer.style.height = '100px'; // 修改为 200px
            } else {
              app.ears_of = 3
              app.shopcart_show = true
            }
            if (app.goods.goods_entrust == '1') {
              app.shopyear_show = false
            }
            app.goods.source.forEach(item => {
              item.source_data = JSON.parse(item.source_data)
              item.source_data.metadataFileSize = app.FileSize(item.source_data.metadataFileSize)
              item.source_data.releaseTime = item.source_data.releaseTime.split(" ")[0]
            })

            let param ={
              entrust_user_name: res.data.data[0].user.name,
              goods_status: 1
            }
            GoodsApi.soglist(param).then(result2=>{
              app.new_total = result2.data.total
            })
            resolve(res)
          }).catch(reject);
        })
      },
      FileSize(data) {
        if (data === 0) {
          return "0 B";
        }
        var k = 1024;
        var sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"],
            i = Math.floor(Math.log(data) / Math.log(k));
        return (data / Math.pow(k, i)).toPrecision(3) + " " + sizes[i];
      },
      ipt(){
        if (this.use_years) {
          let shopRice = Math.round(parseFloat(this.goods.price * 100 * this.use_years)) / 100;
          this.addprice = shopRice
        } else {
          this.addprice = 0
        }
      },
      // 调整
      goteshop(){
        const app = this
        let spname = this.goods.username
        this.$navTo("pages/goods/list?k="+spname+'&dt='+new Date().getTime())
      },
      // 转让
      transfer(pass_Num,pricets) {
        if (pass_Num == "1") {
          this.shopyear_show = false
          this.addprice = pricets
          this.use_years = 99
        }
      },
      // 添加到购物车
      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.use_years
                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,3000)
        }
      },
      jumpUrl () {
        uni.navigateTo({
          url:'/pages/login/index'
        })
      },
      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 : app.use_years,
        }
        if (app.ears_of === 3) {
          param.use_years = 1
        }
        GoodsApi.addShoppingCa(param).then(res => {
          if (res.resultCode === "00000000") {
            app.$success("加入购物车成功");
            app.shopcart_str = '已加入购物车'
          } else {
            app.$error(res.errMsg);
          }
        }).catch()
      },
	  
      //立即购买
      buyNow() {
        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 {
              let type_status = app.goods.goods_status
              let title_Name = app.goods.goods_name;
              let ears_of = app.ears_of
              let addprice = app.addprice
              if (type_status == 0 || type_status == 5) {

                if (ears_of == '2') {
                  if (addprice) {
                    app.Buy_now()
                  } else {
                    app.$toast('请输入购买年限')
                  }
                }
                if (ears_of == "1") {

                  app.Buy_now()
                }

              } else {
                if (type_status == 5) {
                  app.$toast(title_Name + '正在委托中,无法购买')
                } else {
                  app.$toast(title_Name + '无法购买')
                }
              }
            }
          } else {
            app.$toast('账号未认证，请进行认证！')
            setTimeout(app.jumpMycertinfoUrl,3000)
          }
        } else {
          app.$toast("请先登录")
          setTimeout(app.jumpUrl,3000)
        }
      },
      Buy_now() {
        const app = this
        let param = {
          goods_isli : app.goods.goods_islicode,
          user_isli : uni.getStorageSync("isliCode"),
          is_car : 2, //1：购物车商品；2：不是购物车商品
          use_years : app.use_years ? app.use_years : 0,
        }
        GoodsApi.createOrder(param).then(res => {
          if (res.resultCode === "00000000") {

            // 跳转至付款界面
            uni.navigateTo({url: "/pages/goods/payment/orderPayment?batchcode="+res.data.batchcode+"&img="+app.goods.img+"&time="+new Date().getTime()})
            //this.$navTo('pages/goods/payment/orderPayment', { batchcode:res.data.batchcode, img: app.goods.img, time: new Date().getTime() })
          } else {
            app.$error(res.errMsg);
          }
        }).catch()
      },
      // 跳转到首页
      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>