You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
278 lines
7.1 KiB
278 lines
7.1 KiB
<template>
|
|
<view>
|
|
<!-- 商品图片轮播 -->
|
|
<swiper :current="current" :indicator-dots="true" :circular="true" class="swiper-box">
|
|
<swiper-item v-for="item in goods_detail.banners" :key="item.id">
|
|
<image :src="item.cover" style="width: 100%; height: 100%;"></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>¥{{ goods_detail.specs[0].selling_price }}</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>
|
|
<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>
|
|
<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"></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)">
|
|
<u-icon name="phone" color="#3A62FF" size="46"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="lf-flex lf-m-t-20" @click="openMap">
|
|
<u-icon name="map-fill" size="60"></u-icon>
|
|
<view class="lf-m-l-20 lf-font-32">{{ goods_detail.store.address }}</view>
|
|
</view>
|
|
</view>
|
|
<!-- 商品详情 -->
|
|
<view class="goods-detail">
|
|
<view class="lf-font-32 lf-font-bold lf-m-b-20">商品详情</view>
|
|
<image class="goods-img" :src="item" v-for="(item, index) in goods_detail.content" :key="index"></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'})">
|
|
<u-icon name="home" size="50"></u-icon>
|
|
<view class="lf-m-t-1">首页</view>
|
|
</view>
|
|
<view class="lf-flex-column lf-row-center icon-item" @click="$url('/pages/contactService/index')">
|
|
<u-icon name="server-fill" size="50"></u-icon>
|
|
<view class="lf-m-t-1">客服</view>
|
|
</view>
|
|
<view class="lf-flex-column lf-row-center icon-item" @click="switchCollect">
|
|
<u-icon name="heart-fill" size="50" color="#FF0000" v-if="is_collect"></u-icon>
|
|
<u-icon name="heart" size="50" v-else></u-icon>
|
|
<view class="lf-m-t-1">{{ is_collect ? '已收藏' : '收藏' }}</view>
|
|
</view>
|
|
<button class="lf-flex-column lf-row-center icon-item" open-type="share">
|
|
<u-icon name="share" size="50"></u-icon>
|
|
<view class="lf-m-t-1">分享</view>
|
|
</button>
|
|
</view>
|
|
<button class="btn" @click="addCart">立即抢购</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data(){
|
|
return {
|
|
current: 0, // 轮播下标
|
|
goods_id: 0,
|
|
goods_detail: {},
|
|
is_collect: 0 // 1为当前收藏商品了，0为否
|
|
}
|
|
},
|
|
onLoad(options){
|
|
this.goods_id = options.id;
|
|
this.getGoodsDetail();
|
|
},
|
|
methods: {
|
|
getGoodsDetail(){
|
|
this.$http(this.API.API_GOODS_DETAIL, {goods_id: this.goods_id}).then(res => {
|
|
console.log("res", res);
|
|
this.goods_detail = res.data;
|
|
this.is_collect = Boolean(res.data.user.is_collect);
|
|
})
|
|
},
|
|
// 切换商品收藏
|
|
switchCollect(){
|
|
this.$http(this.API.API_COLLECT_DEAL, {goods_id: this.goods_id}).then(res => {
|
|
console.log("res", res);
|
|
this.is_collect = Boolean(res.data.user.is_collect);
|
|
})
|
|
},
|
|
// 拨打电话
|
|
makePhoneCall(phoneStr){
|
|
uni.makePhoneCall({
|
|
phoneNumber: String(phoneStr)
|
|
})
|
|
},
|
|
// 打开地图
|
|
openMap(){
|
|
return;
|
|
uni.openLocation({
|
|
longitude: 108.36637,
|
|
latitude: 22.817746,
|
|
scale: 18
|
|
})
|
|
},
|
|
// 立即抢购加入购物车
|
|
addCart(){
|
|
// this.$http(this.API.).then(res => {
|
|
|
|
// })
|
|
}
|
|
},
|
|
onShareAppMessage(){
|
|
let goods = this.goods_detail;
|
|
let title = goods.name;
|
|
let imageUrl = goods.cover;
|
|
let path = '/pages/route/index';
|
|
|
|
return {
|
|
title,
|
|
path,
|
|
imageUrl
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page{
|
|
background-color: #f5f5f5;
|
|
overflow-x: hidden;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped="scoped">
|
|
.swiper-box{
|
|
width: 750rpx;
|
|
height: 520rpx;
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.head-info{
|
|
width: 750rpx;
|
|
height: auto;
|
|
box-sizing: border-box;
|
|
padding: 0 32rpx;
|
|
padding-top: 20rpx;
|
|
background-color: #FFFFFF;
|
|
.price>view:nth-of-type(1){
|
|
color: #FF0000;
|
|
font-size: 40rpx;
|
|
margin-right: 22rpx;
|
|
}
|
|
.price>view:nth-of-type(2){
|
|
text-decoration: line-through;
|
|
color: #777777;
|
|
margin-right: 22rpx;
|
|
}
|
|
.price>view:nth-of-type(3){
|
|
width: max-content;
|
|
padding: 0 18rpx;
|
|
height: 46rpx;
|
|
background-color: #FE9903;
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #FFFFFF;
|
|
}
|
|
.label-box{
|
|
min-height: 130rpx;
|
|
width: 100%;
|
|
border-top: 1rpx solid #E5E5E5;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 30rpx 0 10rpx 0;
|
|
.label-item{
|
|
width: 156rpx;
|
|
height: 70rpx;
|
|
border-radius: 10rpx;
|
|
border: 2rpx solid #FE9903;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
color: #FE9903;
|
|
margin-right: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.address-box{
|
|
width: 750rpx;
|
|
height: auto;
|
|
box-sizing: border-box;
|
|
background-color: #FFFFFF;
|
|
padding: 32rpx;
|
|
margin-top: 20rpx;
|
|
.shop-img{
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border-radius: 10rpx;
|
|
background-color: #EEEEEE;
|
|
}
|
|
}
|
|
|
|
.goods-detail{
|
|
width: 750rpx;
|
|
height: auto;
|
|
background-color: #FFFFFF;
|
|
padding: 32rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 20rpx;
|
|
.goods-img{
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.extra{
|
|
width: 100%;
|
|
height: 120rpx;
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
.fixed-bottom{
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: #FFFFFF;
|
|
width: 100%;
|
|
height: auto;
|
|
padding: 0 32rpx;
|
|
border-top: 1rpx solid #e5e5e5;
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
.icon-item{
|
|
padding: 0 14rpx;
|
|
margin-right: 16rpx;
|
|
background-color: transparent;
|
|
margin: 0;
|
|
line-height: initial;
|
|
font-size: 28rpx;
|
|
font-weight: inherit;
|
|
&:first-child{
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
.btn{
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 208rpx;
|
|
height: 80rpx;
|
|
background-color: #FE9903;
|
|
color: #FFFFFF;
|
|
line-height: 80rpx;
|
|
font-size: 32rpx;
|
|
border-radius: 42rpx;
|
|
}
|
|
}
|
|
</style>
|