|
|
|
@ -1,99 +1,100 @@ |
|
|
|
<template> |
|
|
|
<view> |
|
|
|
<block v-if="isRight(goods_detail)"> |
|
|
|
<!-- 商品图片轮播 --> |
|
|
|
<swiper :current="current" :indicator-dots="true" :circular="true" class="swiper-box" indicator-active-color="#FE9903"> |
|
|
|
<swiper-item v-for="(item, index) in goods_detail.banners" :key="item.id"> |
|
|
|
<image :src="item.cover" style="width: 100%; height: 100%;" @click="lookImg(index)"></image> |
|
|
|
<!-- <image :src="item.cover" mode="aspectFit"></image> --> |
|
|
|
</swiper-item> |
|
|
|
</swiper> |
|
|
|
<!-- 商品主要信息 --> |
|
|
|
<view class="head-info"> |
|
|
|
<view class="lf-font-40">{{ goods_detail.name }}</view> |
|
|
|
<view class="lf-row-between lf-font-24 lf-m-t-30 lf-p-b-20"> |
|
|
|
<view class="lf-flex price"> |
|
|
|
<view class="lf-font-bold"> |
|
|
|
<text class="lf-font-24">¥</text> |
|
|
|
<text class="lf-font-42">{{ goods_detail.specs[0].selling_price }}</text> |
|
|
|
<skeleton :loading="skeletonLoading" :row="12" :showAvatar="false" :showTitle="true"> |
|
|
|
<block v-if="isRight(goods_detail)"> |
|
|
|
<!-- 商品图片轮播 --> |
|
|
|
<swiper :current="current" :indicator-dots="true" :circular="true" class="swiper-box" indicator-active-color="#FE9903"> |
|
|
|
<swiper-item v-for="(item, index) in goods_detail.banners" :key="item.id"> |
|
|
|
<image :src="item.cover" style="width: 100%; height: 100%;" @click="lookImg(index)"></image> |
|
|
|
<!-- <image :src="item.cover" mode="aspectFit"></image> --> |
|
|
|
</swiper-item> |
|
|
|
</swiper> |
|
|
|
<!-- 商品主要信息 --> |
|
|
|
<view class="head-info"> |
|
|
|
<view class="lf-font-40">{{ goods_detail.name }}</view> |
|
|
|
<view class="lf-row-between lf-font-24 lf-m-t-30 lf-p-b-20"> |
|
|
|
<view class="lf-flex price"> |
|
|
|
<view class="lf-font-bold"> |
|
|
|
<text class="lf-font-24">¥</text> |
|
|
|
<text class="lf-font-42">{{ goods_detail.specs[0].selling_price }}</text> |
|
|
|
</view> |
|
|
|
<view>¥{{ goods_detail.specs[0].original_price }}</view> |
|
|
|
<view v-if="goods_detail.specs[0].cost">{{ goods_detail.specs[0].cost }}</view> |
|
|
|
</view> |
|
|
|
<view class="lf-font-24"> |
|
|
|
<view class="lf-color-gray">{{ goods_detail.specs[0].sold_stock_text }}</view> |
|
|
|
<view class="lf-color-primary">{{ goods_detail.specs[0].stock_text }}</view> |
|
|
|
</view> |
|
|
|
<view>¥{{ goods_detail.specs[0].original_price }}</view> |
|
|
|
<view v-if="goods_detail.specs[0].cost">{{ goods_detail.specs[0].cost }}</view> |
|
|
|
</view> |
|
|
|
<view class="lf-font-24"> |
|
|
|
<view class="lf-color-gray">{{ goods_detail.specs[0].sold_stock_text }}</view> |
|
|
|
<view class="lf-color-primary">{{ goods_detail.specs[0].stock_text }}</view> |
|
|
|
<view class="label-box" v-if="goods_detail.tags && goods_detail.tags.length"> |
|
|
|
<view class="label-item" v-for="(item, index) in goods_detail.tags" :key="index">{{ item }}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="label-box" v-if="goods_detail.tags && goods_detail.tags.length"> |
|
|
|
<view class="label-item" v-for="(item, index) in goods_detail.tags" :key="index">{{ item }}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- 地址信息 --> |
|
|
|
<view class="address-box"> |
|
|
|
<view class="lf-font-32 lf-font-bold">适用门店</view> |
|
|
|
<view class="lf-m-t-20 lf-row-between"> |
|
|
|
<view class="lf-flex"> |
|
|
|
<image class="lf-fle shop-img" :src="goods_detail.store.cover" v-if="goods_detail.store.cover"></image> |
|
|
|
<image class="lf-fle shop-img" src="../../static/center/shop-logo.png" v-else></image> |
|
|
|
<view class="lf-font-32 lf-m-l-20" style="max-width: 512rpx;">{{ goods_detail.store.name }}</view> |
|
|
|
<!-- 地址信息 --> |
|
|
|
<view class="address-box"> |
|
|
|
<view class="lf-font-32 lf-font-bold">适用门店</view> |
|
|
|
<view class="lf-m-t-20 lf-row-between"> |
|
|
|
<view class="lf-flex"> |
|
|
|
<image class="lf-fle shop-img" :src="goods_detail.store.cover" v-if="goods_detail.store.cover"></image> |
|
|
|
<image class="lf-fle shop-img" src="../../static/center/shop-logo.png" v-else></image> |
|
|
|
<view class="lf-font-32 lf-m-l-20" style="max-width: 512rpx;">{{ goods_detail.store.name }}</view> |
|
|
|
</view> |
|
|
|
<view @click="makePhoneCall(goods_detail.store.tel)"> |
|
|
|
<text class="lf-iconfont lf-icon-dianhua lf-font-40" style="color: #3A62FF;"></text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view @click="makePhoneCall(goods_detail.store.tel)"> |
|
|
|
<text class="lf-iconfont lf-icon-dianhua lf-font-40" style="color: #3A62FF;"></text> |
|
|
|
<view class="lf-flex lf-m-t-20" @click="openMap"> |
|
|
|
<view style="width: 60rpx; height: 60rpx;" class="lf-row-center"> |
|
|
|
<text class="lf-iconfont lf-icon-dizhi lf-font-40" style="color: #000000;"></text> |
|
|
|
</view> |
|
|
|
<view class="lf-m-l-20 lf-font-28">{{ goods_detail.store.address }}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="lf-flex lf-m-t-20" @click="openMap"> |
|
|
|
<view style="width: 60rpx; height: 60rpx;" class="lf-row-center"> |
|
|
|
<text class="lf-iconfont lf-icon-dizhi lf-font-40" style="color: #000000;"></text> |
|
|
|
</view> |
|
|
|
<view class="lf-m-l-20 lf-font-28">{{ goods_detail.store.address }}</view> |
|
|
|
<!-- 商品详情 --> |
|
|
|
<view class="goods-detail"> |
|
|
|
<view class="lf-font-32 lf-font-bold lf-m-b-20">商品详情</view> |
|
|
|
<rich-text :nodes="goods_detail.content" v-if="goods_detail.content_type == 'rich_text'"></rich-text> |
|
|
|
<image class="goods-img" :src="item" v-for="(item, index) in goods_detail.content" :key="index" v-if="goods_detail.content_type == 'img'"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- 商品详情 --> |
|
|
|
<view class="goods-detail"> |
|
|
|
<view class="lf-font-32 lf-font-bold lf-m-b-20">商品详情</view> |
|
|
|
<rich-text :nodes="goods_detail.content" v-if="goods_detail.content_type == 'rich_text'"></rich-text> |
|
|
|
<image class="goods-img" :src="item" v-for="(item, index) in goods_detail.content" :key="index" v-if="goods_detail.content_type == 'img'"></image> |
|
|
|
</view> |
|
|
|
<!-- 修饰专用 --> |
|
|
|
<view class="extra"></view> |
|
|
|
<!-- 吸底操作按钮 --> |
|
|
|
<view class="lf-row-between fixed-bottom"> |
|
|
|
<view class="lf-flex lf-p-t-10 lf-p-b-10"> |
|
|
|
<view class="lf-flex-column lf-row-center icon-item" @click="$url('/pages/index/index', {type: 'switch'})"> |
|
|
|
<image class="icon-img" src="../../static/center/home.png"></image> |
|
|
|
<view class="lf-m-t-1">首页</view> |
|
|
|
</view> |
|
|
|
<view class="lf-flex-column lf-row-center icon-item" @click="$url('/pages/contactService/index')"> |
|
|
|
<image class="icon-img" src="../../static/center/service.png"></image> |
|
|
|
<view class="lf-m-t-1">客服</view> |
|
|
|
</view> |
|
|
|
<view class="lf-flex-column lf-row-center icon-item" @click="switchCollect"> |
|
|
|
<image class="icon-img" src="../../static/center/collect-active.png" v-if="is_collect"></image> |
|
|
|
<image class="icon-img" src="../../static/center/collect.png" v-else></image> |
|
|
|
<view class="lf-m-t-1">{{ is_collect ? '已收藏' : '收藏' }}</view> |
|
|
|
<!-- 修饰专用 --> |
|
|
|
<view class="extra"></view> |
|
|
|
<!-- 吸底操作按钮 --> |
|
|
|
<view class="lf-row-between fixed-bottom"> |
|
|
|
<view class="lf-flex lf-p-t-10 lf-p-b-10"> |
|
|
|
<view class="lf-flex-column lf-row-center icon-item" @click="$url('/pages/index/index', {type: 'switch'})"> |
|
|
|
<image class="icon-img" src="../../static/center/home.png"></image> |
|
|
|
<view class="lf-m-t-1">首页</view> |
|
|
|
</view> |
|
|
|
<view class="lf-flex-column lf-row-center icon-item" @click="$url('/pages/contactService/index')"> |
|
|
|
<image class="icon-img" src="../../static/center/service.png"></image> |
|
|
|
<view class="lf-m-t-1">客服</view> |
|
|
|
</view> |
|
|
|
<view class="lf-flex-column lf-row-center icon-item" @click="switchCollect"> |
|
|
|
<image class="icon-img" src="../../static/center/collect-active.png" v-if="is_collect"></image> |
|
|
|
<image class="icon-img" src="../../static/center/collect.png" v-else></image> |
|
|
|
<view class="lf-m-t-1">{{ is_collect ? '已收藏' : '收藏' }}</view> |
|
|
|
</view> |
|
|
|
<button class="lf-flex-column lf-row-center icon-item" open-type="share"> |
|
|
|
<image class="icon-img" src="../../static/center/share.png"></image> |
|
|
|
<view class="lf-m-t-1">分享</view> |
|
|
|
</button> |
|
|
|
</view> |
|
|
|
<button class="lf-flex-column lf-row-center icon-item" open-type="share"> |
|
|
|
<image class="icon-img" src="../../static/center/share.png"></image> |
|
|
|
<view class="lf-m-t-1">分享</view> |
|
|
|
</button> |
|
|
|
<button class="btn" @click="toAddOrder">立即抢购</button> |
|
|
|
</view> |
|
|
|
<button class="btn" @click="toAddOrder">立即抢购</button> |
|
|
|
</view> |
|
|
|
</block> |
|
|
|
</block> |
|
|
|
</skeleton> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
let time = null; |
|
|
|
|
|
|
|
export default { |
|
|
|
data(){ |
|
|
|
return { |
|
|
|
current: 0, // 轮播下标 |
|
|
|
goods_id: 0, |
|
|
|
goods_detail: {}, |
|
|
|
is_collect: 0 // 1为当前收藏商品了,0为否 |
|
|
|
is_collect: 0, // 1为当前收藏商品了,0为否 |
|
|
|
skeletonLoading: true |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
@ -112,11 +113,13 @@ |
|
|
|
let that = this; |
|
|
|
this.$http(this.API.API_GOODS_DETAIL, {goods_id: this.goods_id}).then(res => { |
|
|
|
console.log("res", res); |
|
|
|
this.skeletonLoading = false; |
|
|
|
this.goods_detail = res.data; |
|
|
|
this.is_collect = Boolean(res.data.user.is_collect); |
|
|
|
}).catch(err => { |
|
|
|
this.skeletonLoading = false; |
|
|
|
that.$msg(err.msg); |
|
|
|
time = setTimeout(() => { |
|
|
|
setTimeout(() => { |
|
|
|
that.$toBack(); |
|
|
|
}, 1000); |
|
|
|
}) |
|
|
|
|