123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403 |
- <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>
|