liedou_uniapp/pages/subPackages/dy/goodsDetail....

<template>
  <view class="page-wrap u-skeleton">
    <!-- 顶部按钮 -->
    <image :style="{'top': `${statusBarHeight}px`}" class="back-btn" src="https://ld.726p.com/ldyx_static/imgs/btn-back.png" @click="onClickToBack" />

    <!-- S 轮播图 -->
    <view class="swiper-wrap">
      <u-swiper
        class="u-skeleton-fillet"
        :list="swiperList"
        height="750"
        mode="round"
        bg-color="transparent"
      />
    </view>
    <!-- E 轮播图 -->

	  <view class="commission-price-view u-skeleton-fillet" v-if="user_level > 1 && goodsItem.commission_price > 0" @click="onClickCommission">猎豆优选专享，下单或分享可获{{goodsItem.commission_price}}元</view>

    <!-- S 商品信息 -->
    <view class="info-wrap con-block">
      <view class="tp-wrap u-skeleton-fillet">
        <view class="lt-wrap">
		      <text class="price-title">{{goodsItem.is_coupon == 1 && goodsItem.coupon_price > 0 ? '券后价' : '' }} ¥</text>
          <text class="price">{{ goodsItem.discount_price }}</text>
          <text class="price-old">￥{{ goodsItem.price }}</text>
        </view>
        <view class="rt-wrap">
			    <view class="salesVolume" v-if="goodsItem.volume > 100">销量{{ $NumberHandle({value:goodsItem.volume,comma:true}) }}+</view>
        </view>
      </view>
      <view class="bm-wrap u-skeleton-fillet">
        <image class="shop-icon" src="https://ld.726p.com/ldyx_static/imgs/icon-dy.png" />
        {{ goodsItem.title }}
      </view>
    </view>
    <!-- E 商品信息 -->

    <!-- S 店铺信息 -->
    <view class="shop-wrap con-block u-skeleton-fillet">
      <view class="lt-wrap">
        <image class="shop-img" :src="goodsItem.shop && goodsItem.shop.pic_path || 'https://ld.726p.com/ldyx_static/imgs/icon-dy.png'" />
      </view>
      <view class="rt-wrap">
        <view class="tp-wrap">
          <text class="shop-name">{{ goodsItem.shop_title }}</text>
          <view class="enter-wrap">
          </view>
        </view>
        <view class="point-wrap">
          <text>宝贝描述 {{ goodsItem.item_score || '-' }}</text>
          <text>服务态度 {{ goodsItem.service_score || '-' }}</text>
          <text>发货速度 {{ goodsItem.delivery_score || '-' }}</text>
        </view>
      </view>
    </view>
    <!-- E 店铺信息 -->

    <!-- S 相关推荐 -->
    <view class="recommend-wrap con-block u-skeleton-fillet">
		  <view class="block-title">相关推荐</view>
      <view class="goods-list-wrap">
        <view v-for="item in recommendList" :key="item.goods_id" class="goods-item-wrap" @click="onClickGoodsItem(item)">
          <image class="goods-img" :src="item.img" />
          <view v-if="user_level > 1 && item.commission_price > 0" class="goods-commission">预估佣金 ￥{{ item.commission_price }}</view>
          <view class="goods-title">{{ item.title }}</view>
          <view class="goods-price">
            <text class="price">￥{{ item.discount_price }}</text>
            <text class="price-old">￥{{ item.price }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- E 相关推荐 -->

    <!-- S 宝贝详情 -->
    <template v-if="goodsItem.detail_pic && goodsItem.detail_pic.length">
      <view class="detail-wrap con-block u-skeleton-fillet">
        <view class="block-title">宝贝详情</view>
        <view class="content">
	        <u-lazy-load v-for="(imgUrl, idx) in goodsItem.detail_pic" :key="idx" class="detail-pic" :image="imgUrl" img-mode="widthFix" />
        </view>
      </view>
    </template>
    <!-- E 宝贝详情 -->

    <!-- 底部按钮 -->
    <view class="footer-wrap u-skeleton-fillet" :style="{ 'padding-bottom': isIphoneX ? '66rpx' : '22rpx' }">
      <view class="btn-collect-wrap" v-if="goodsItem.is_favorites == 1" @click="onClickSetFavorites">
        <image class="btn-collect-img" src="https://ld.726p.com/ldyx_static/imgs/icon-collect-on.png" />
        <text class="btn-collect-text">已收藏</text>
      </view>
      <view class="btn-collect-wrap" v-else @click="onClickSetFavorites">
        <image class="btn-collect-img" src="https://ld.726p.com/ldyx_static/imgs/icon-collect.png" />
        <text class="btn-collect-text">收藏</text>
      </view>
      <!-- 已登录按钮 -->
      <view v-if="isLogin" class="btn-wrap">
        <view class="btn-item lt-btn" @click="onClickFXZQ">
          <text class="btn-text">{{ user_level == 1 ? '分享' : '分享赚钱' }}</text>
        </view>
        <view class="btn-item rt-btn" @click="onClickGWSQ">
          <text class="btn-text">购物省钱</text>
        </view>
      </view>
      <!-- 未登录按钮 -->
      <view v-else class="btn-wrap">
        <view class="btn-item lt-btn" @click="onClickZJGM">
          <text class="btn-text">直接购买</text>
        </view>
        <view class="btn-item rt-btn" @click="onClickFYJGM">
          <text class="btn-text">返佣金购买</text>
        </view>
      </view>
    </view>

    <!-- 回到顶部 -->
    <u-back-top :scroll-top="scrollTop" />

    <!-- 登录提醒 -->
    <loginRemind
      :show="loginRemindShow"
      :wordCommand="goodsItem.url_info&&goodsItem.url_info.dy_password"
      @callback="loginRemindCallback"
    />

    <!--骨架组件-->
		<u-skeleton :loading="skeletonLoading" :animation="true" bgColor="#FFF" />
  </view>
</template>

<script>
	import tbAuthorize from '../../commonMoudle/tbAuthorize.vue'
	import verticalGood from '@/components/verticalGood.vue'
  const app = getApp()
  const $router = app.globalData.$router

  export default {
    components: {
		tbAuthorize,
		verticalGood
	},
    data() {
      return {
        isIphoneX: app.globalData.isIphoneX,
        statusBarHeight: app.globalData.statusBarHeight,
        swiperList: [], // 轮播图列表(image指定图片路径，也可以通过name属性自定义)
        recommendList: [], // 相关推荐列表

        goods_id: '', // 商品id
        goodsParams: {}, // 商品参数（用于获取商品详情的相关参数 前一页面传入）
        goodsItem: { // 商品详情数据
          discount_price: '',
          price: '',
          volume: '',
          title: '',
          coupon_price: '',
          shop: {
            pic_path: '',
            title: '',
            delivery_score: '',
            item_score: '',
            service_score: '',
          },
        },
        isLogin: false, // 是否已登录

        canvasImg: '',
        qrcodeVal: '',
        qrcodeImg: '',
        posterInfo: {},

        user_level: uni.getStorageSync('userInfo') ?
                    uni.getStorageSync('userInfo').user_level : '', // 当前用户等级
        scrollTop: 0,
        loginRemindShow: false,
        loginRemindMask: false,
        skeletonLoading: true,
      };
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
    onShow() {
      // 获取用户登录状态
      this.handleGetUserIsLogin()
      if (uni.getStorageSync('loginPageBack')){
        // 获取商品详情数据
        this.handleGetgoodsItem()
        uni.setStorageSync('loginPageBack',false)
      }
    },
    onLoad(options) {
		  this.loginRemindMask = uni.getStorageSync('loginRemindMask')?true:false;
      const { goods_id = ''} = options

      // 接收前一页面传入的商品参数
      this.goods_id = decodeURIComponent(goods_id)
      this.goodsParams = {
        goods_id: decodeURIComponent(goods_id)
      }
      // 获取商品详情数据
      this.handleGetgoodsItem()
    },
    methods: {
      // 用户浏览信息上报
      async handleUserReport() {
        if (!this.isLogin) return false
        const { goods_id, is_coupon, coupon_price, price, discount_price, commission_rate, coupon_end_time, coupon_start_time, shop_type } = this.goodsItem
		try {
          const url = this.$api.goodsItem_record
          const params = { goods_id, is_coupon, coupon_price, price, discount_price, commission_rate, coupon_end_time, coupon_start_time, shop_type }
          await this.$postJSON(url, params)
        } catch (error) {
          console.log('error => ', error)
        }
      },
      // 获取用户登录状态
      handleGetUserIsLogin() {
        const userInfo = uni.getStorageSync('userInfo') || ''
        const user_id = uni.getStorageSync('user_id') || ''
		this.user_level = uni.getStorageSync('userInfo') ? uni.getStorageSync('userInfo').user_level : ''; // 当前用户等级
        if (userInfo && user_id) {
          this.isLogin = true
        } else {
          this.isLogin = false
        }
      },
      // 获取相关推荐列表
      async handleGetRecommendList() {
        try {
          uni.showLoading({ title: '加载中...', mask: true })
          const url = this.$api_dy.goodsRecommend
          const params = { third_cids: this.goodsItem.third_cid+'' }
          const { data: res = {} } = await this.$postJSON(url, params)
          if (res && res.errno == 0 && Array.isArray(res.rst)) {
            this.recommendList = res.rst.splice(0,3)
          } else {
            uni.showToast({ title: res.err || '操作失败', icon: 'none' })
          }
        } catch (error) {
          console.log('error => ', error)
        } finally {
          uni.hideLoading()
        }
      },
      // 获取商品详情数据
      async handleGetgoodsItem() {
        try {
          uni.showLoading({ title: '加载中...', mask: true })
          const url = this.$api_dy.goodsDetail
          const params = { product_id: this.goods_id }
          const { data: res = {} } = await this.$postJSON(url, params)
          if (res && res.errno == 0 && res.rst) {
            this.goodsItem = { ...res.rst }
            this.swiperList = res.rst.img_list.map(item => ({
              image: item
            }))
            // 用户浏览信息上报
            this.handleUserReport()
            // 获取相关推荐列表
            this.handleGetRecommendList()
          } else {
            uni.showToast({ title: res.err || '操作失败', icon: 'none' })
          }
        } catch (error) {
          console.log('error => ', error)
        } finally {
          this.skeletonLoading = false
          uni.hideLoading()
        }
      },
      // 监听点击"返回"
      onClickToBack() {
		  let pages = getCurrentPages();
		  if(pages.length <= 1){ // 没有上一页，去首页
			  uni.reLaunch({
			    url: '/pages/home/home'
			  });
		  }else {
			  uni.navigateBack()
		  }
      },
      // 监听跳转详情
      onClickGoodsItem(goodsItem) {
		  try{ app.categoryNew_countBuy({type:0,path:'goodsItemTopRecommendAction'}) }catch(e){} ; // 数据上报
        const { goods_id = ''} = goodsItem
        const pages = getCurrentPages()
        const currentPageLength = pages.length
        // 微信小程序 页面栈限制 最多10页
        if (currentPageLength < 10) {
          uni.navigateTo({
			url: `/pages/subPackages/dy/goodsDetail?goods_id=${encodeURIComponent(goods_id)}`
          })
        } else {
          uni.redirectTo({
			url: `/pages/subPackages/dy/goodsDetail?goods_id=${encodeURIComponent(goods_id)}`
          })
        }
      },
      // 监听点击收藏
      onClickSetFavorites() {
        if (!this.isLogin) { // 未登录 => 去登录
          $router.navigateTo({
            url: '/pages/subPackages/login/loginPhone'
          })
        } else {
          this.handleSetFavorites()
        }
      },
      async handleSetFavorites() {
        const { goods_id, is_coupon, discount_price, price, coupon_price, commission_rate, coupon_end_time, coupon_start_time, shop_type } = this.goodsItem
        try {
          uni.showLoading({ title: '加载中...', mask: true })
          const url = this.$api.goodsItem_addFavorites
          const params = { goods_id, is_coupon, discount_price, price, coupon_price, commission_rate, coupon_end_time, coupon_start_time, shop_type }
          const { data: res } = await this.$postJSON(url, params)
          if (res && res.errno == 0) {
            // 设置成功 => 更新状态
            this.handleGetgoodsItem()
          } else {
            uni.showToast({ title: res.err || '操作失败', icon: 'none' })
          }
        } catch (error) {
          console.log('error => ', error)
        } finally {
          uni.hideLoading()
        }
      },
      // 监听点击“分享赚钱” => 判断是否授权(京东商品不需要授权) => 生成图片 => 分享图片
      async onClickFXZQ() {
        $router.navigateTo({
          url: `/pages/subPackages/dy/shareDetail?shop_type=${this.goodsItem.shop_type}&goods_id=${encodeURIComponent(this.goodsItem.goods_id)}`
        })
      },
      // 监听点击“购物省钱” => 判断是否授权(京东商品不需要授权) => 获取口令 => 复制口令
     async onClickGWSQ() {
       uni.setClipboardData({
         data: this.goodsItem.url_info.dy_password,
         success: () => {
           this.$u.toast('抖口令复制成功！请打开抖音APP领券下单~')
         }
       });
      },
      // 监听点击“直接购买” => 获取口令 => 复制口令
      async onClickZJGM() {
        try {
			if(!this.loginRemindMask){
				this.loginRemindShow = true;
			} else {
        uni.setClipboardData({
          data: this.goodsItem.url_info.dy_password,
          success: () => {
            this.$u.toast('抖口令复制成功！请打开抖音APP领券下单~')
          }
        });
			}
        } catch (error) {
          console.log('error => ', error)
        }
      },
      // 监听点击“返佣金购买” => 跳登录页面
      onClickFYJGM() {
        $router.navigateTo({
          url: '/pages/subPackages/login/loginPhone'
        })
      },
      // 监听点击“优惠券”
      onClickCoupon() {
        if (this.isLogin) { // 已登录 => 执行“购物省钱”按钮逻辑
          this.onClickGWSQ()
        } else { // 未登录 => 执行“直接购买”按钮逻辑
          this.onClickZJGM()
        }
      },
      // 监听点击“反佣金”
      onClickCommission() {
        $router.navigateTo({
          url: `/pages/subPackages/my/tqjs`
        })
      },
      // 登录提醒回调
      loginRemindCallback(val){
        this.loginRemindShow = false;
      }
    },
  }
</script>

<style lang="scss" scoped>
@import '@/static/style/goodsDetail.scss';
.detail-pic {
  vertical-align: middle; // 解决图片下边框缝隙问题
  width: 100%;
}
.navigator{
	color: #fff;
	width: 100%;
	text-align: center;
	line-height: 84rpx;
}
</style>