|
|
|
@ -1,29 +1,30 @@ |
|
|
|
<template> |
|
|
|
<view> |
|
|
|
<skeleton :loading="skeletonLoading" :row="12" :showAvatar="false" :showTitle="true"> |
|
|
|
<block v-if="$isRight(goods_detail)"> |
|
|
|
<block v-if="isRight(goods_detail)"> |
|
|
|
<!-- 商品图片轮播 --> |
|
|
|
<swiper :current="current" :indicator-dots="goods_detail.banners.length > 1 ? true : false" :circular="true" class="swiper-box" indicator-active-color="#1998FE"> |
|
|
|
<swiper-item v-for="(item, index) in goods_detail.banners" :key="item.id"> |
|
|
|
<image mode="aspectFill" :src="item.cover" style="width: 100%; height: 100%;" @click="lookImg(index)"></image> |
|
|
|
<swiper :current="current" :indicator-dots="goods_detail.product.pictures.length > 1 ? true : false" :circular="true" class="swiper-box" indicator-active-color="#1998FE"> |
|
|
|
<swiper-item v-for="(item, index) in goods_detail.product.pictures" :key="index"> |
|
|
|
<image mode="aspectFill" :src="item" style="width: 100%; height: 100%;" @click="lookImg(index)"></image> |
|
|
|
</swiper-item> |
|
|
|
</swiper> |
|
|
|
<!-- 商品主要信息 --> |
|
|
|
<view class="head-info"> |
|
|
|
<view class="lf-font-32 lf-color-333 lf-font-bold">{{ goods_detail.name }}</view> |
|
|
|
<view class="lf-font-32 lf-color-333 lf-font-bold">{{ goods_detail.product.title }}</view> |
|
|
|
<view class="lf-row-between lf-font-24 lf-m-t-30 lf-p-b-20"> |
|
|
|
<view class="lf-flex price"> |
|
|
|
<lf-price :price="goods_detail.specs[0].selling_price"></lf-price> |
|
|
|
<view class="lf-m-l-20">¥{{ goods_detail.specs[0].original_price }}</view> |
|
|
|
<view v-if="goods_detail.specs[0].cost">{{ goods_detail.specs[0].cost }}</view> |
|
|
|
<lf-price :price="goods_detail.price"></lf-price> |
|
|
|
<view class="lf-m-l-20">¥{{ goods_detail.original_price }}</view> |
|
|
|
<view v-if="goods_detail.cost">{{ goods_detail.cost }}折</view> |
|
|
|
</view> |
|
|
|
<view class="lf-font-24 lf-text-right"> |
|
|
|
<view class="lf-color-gray">{{ goods_detail.specs[0].sold_stock_text }}</view> |
|
|
|
<view class="lf-color-gray">已售 {{ goods_detail.sale }}</view> |
|
|
|
<view class="lf-color-gray">库存 {{ goods_detail.product.stock }}</view> |
|
|
|
<!-- <view class="lf-color-primary">{{ goods_detail.specs[0].stock_text }}</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 class="label-box" v-if="goods_detail.coupon && goods_detail.coupon.length"> |
|
|
|
<view class="label-item" v-for="(item, index) in goods_detail.coupon" :key="index">{{ item.tag }}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- 地址信息 --> |
|
|
|
@ -49,9 +50,9 @@ |
|
|
|
<!-- 商品详情 --> |
|
|
|
<view class="goods-detail"> |
|
|
|
<view class="lf-font-32 lf-font-bold lf-m-b-20">旅游须知</view> |
|
|
|
<rich-text :nodes="formatRichText(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> |
|
|
|
<rich-text :nodes="formatRichText(goods_detail.product.know)"></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> |
|
|
|
<!-- 吸底操作按钮 --> |
|
|
|
@ -97,74 +98,28 @@ |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad(options){ |
|
|
|
this.goods_id = options.id; |
|
|
|
this.goods_id = options.goods_id; |
|
|
|
|
|
|
|
console.log('商品',this.goods_id) |
|
|
|
this.getGoodsDetail(); |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
isRight() { |
|
|
|
return function(val) { |
|
|
|
return this.$shared.isRight(val); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getGoodsDetail(){ |
|
|
|
let that = this; |
|
|
|
this.goods_detail = { |
|
|
|
all_specs: null, |
|
|
|
banners: [], |
|
|
|
category_id: 2, |
|
|
|
content: "<p><img src='http://sky-applet-mall.oss-cn-shenzhen.aliyuncs.com/tinymce/images/156005c5baf40ff51a327f1c34f2975b60dd6a468cdbe.jpg' alt='' width='100%' /></p>", |
|
|
|
content_type: "rich_text", |
|
|
|
cover: "http://sky-applet-mall.oss-cn-shenzhen.aliyuncs.com/images/d1c990182d6cfd6ebf1faf4077f22248.jpg!thumb_300x300_q90", |
|
|
|
created_at: "1625123492", |
|
|
|
deleted_at: null, |
|
|
|
id: 1, |
|
|
|
name: "肯德基精选午餐", |
|
|
|
share_cover: "http://sky-applet-mall.oss-cn-shenzhen.aliyuncs.com/images/d1c990182d6cfd6ebf1faf4077f22248.jpg", |
|
|
|
specs: [{ |
|
|
|
cost: "", |
|
|
|
created_at: "1625470217", |
|
|
|
deleted_at: null, |
|
|
|
goods_id: 1, |
|
|
|
id: 8, |
|
|
|
limit: 10, |
|
|
|
name: "规格3", |
|
|
|
original_price: "111.00", |
|
|
|
original_price_text: "111.00", |
|
|
|
selling_price: "1.00", |
|
|
|
sold_percent: 50, |
|
|
|
sold_percent_text: "已抢50%", |
|
|
|
sold_stock: 110, |
|
|
|
sold_stock_text: "110人购买", |
|
|
|
specs: null, |
|
|
|
state: 1, |
|
|
|
stock: 110, |
|
|
|
stock_text: "库存仅剩110份", |
|
|
|
updated_at: "1625471139" |
|
|
|
}], |
|
|
|
store: { |
|
|
|
address: "广西南宁市青秀区民族大道111号", |
|
|
|
cover: "http://sky-applet-mall.oss-cn-shenzhen.aliyuncs.com/images/b4644c5226918153c0cb372e99e12bed.jpg!thumb_200x200_q90", |
|
|
|
created_at: "1625122973", |
|
|
|
deleted_at: null, |
|
|
|
id: 1, |
|
|
|
intro: null, |
|
|
|
lat: "108.3745472970581", |
|
|
|
lng: "22.813532837581967", |
|
|
|
name: "肯德基连锁餐饮", |
|
|
|
state: 2, |
|
|
|
tel: "18888888888", |
|
|
|
updated_at: "1625537146", |
|
|
|
user_id: 7 |
|
|
|
}, |
|
|
|
store_id: 1, |
|
|
|
tags: ["推荐"], |
|
|
|
updated_at: "1625123492", |
|
|
|
user: {is_collect: 1} |
|
|
|
} |
|
|
|
return; |
|
|
|
this.$http(this.API.API_GOODS_DETAIL, {goods_id: this.goods_id}).then(res => { |
|
|
|
this.$http(this.API.API_ADVICEDETAILS, {id: this.goods_id}).then(res => { |
|
|
|
this.skeletonLoading = false; |
|
|
|
this.goods_detail = res.data; |
|
|
|
this.is_collect = Boolean(res.data.user.is_collect); |
|
|
|
// this.is_collect = Boolean(res.data.user.is_collect) || false; |
|
|
|
}).catch(err => { |
|
|
|
this.skeletonLoading = false; |
|
|
|
setTimeout(() => { |
|
|
|
that.$toBack(); |
|
|
|
this.$toBack(); |
|
|
|
}, 1000); |
|
|
|
}) |
|
|
|
}, |
|
|
|
@ -298,7 +253,8 @@ |
|
|
|
flex-wrap: wrap; |
|
|
|
padding: 30rpx 0 10rpx 0; |
|
|
|
.label-item{ |
|
|
|
width: 156rpx; |
|
|
|
width: 162rpx; |
|
|
|
// padding: 20rpx; |
|
|
|
height: 70rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
border: 2rpx solid #1998FE; |
|
|
|
|
