|
|
<template> <view> <skeleton :loading="skeletonLoading" :row="12" :showAvatar="false" :showTitle="true"> <block v-if="isRight(goods_detail)"> <!-- 商品图片轮播 --> <swiper :current="current" :autoplay="false" :interval="2500" :indicator-dots="goods_detail.pictures.length > 1 ? true : false" :circular="true" class="swiper-box" indicator-active-color="#1998FE"> <swiper-item v-for="(item, index) in goods_detail.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.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.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.sale }}</view> <view class="lf-color-gray">库存 {{ goods_detail.stock }}</view> <!-- <view class="lf-color-primary">{{ goods_detail.specs[0].stock_text }}</view> --> </view> </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> <!-- 商品详情 --> <view class="goods-detail" v-if="goods_detail.know"> <view class="lf-font-32 lf-font-bold lf-m-b-20">购买须知</view> <rich-text :nodes="formatRichText(goods_detail.know)"></rich-text> </view> <!-- 景区类型 --> <view v-if="goods_detail.product.extends && goods_detail.product && goods_detail.product.type == 2"> <view class="goods-detail" v-if="goods_detail.product.extends.field_2.open_time.node && goods_detail.product.extends.field_2.open_time.summer && goods_detail.product.extends.field_2.open_time.winter"> <view class="lf-font-32 lf-font-bold lf-m-b-20">景区开放时间</view> <view > <u-table> <u-tr v-for="(item,index) in goods_detail.product.extends.field_2.open_time" :key="index"> <u-th>{{item.node}}</u-th> <u-th>{{item.summer}}</u-th> <u-th>{{item.winter}}</u-th> </u-tr> </u-table> </view> </view> <view class="goods-detail" @click="openMap(goods_detail.product.extends.field_2.address,goods_detail.product.extends.field_2.latitude,goods_detail.product.extends.field_2.longitude)"> <view class="lf-font-32 lf-font-bold lf-m-b-20">{{goods_detail.product.extends.field_2.name}}</view> <view class="lf-row-between"> <view class="lf-line-2 lf-font-28 lf-color-333">{{goods_detail.product.extends.field_2.address}}</view> <view class="lf-iconfont lf-icon-dizhi lf-color-blue"></view> </view> </view> <view class="goods-detail" v-if="goods_detail.product.extends.field_2.project"> <view class="lf-font-32 lf-font-bold lf-m-b-20">包含项目</view> <view class="lf-flex-column"> <!-- <view class="lf-row-between lf-m-b-20"> <view class="lf-color-gray lf-font-28">项目名称</view> <view class="lf-color-gray lf-font-28">数量</view> <view class="lf-color-gray lf-font-28">额外费用</view> </view> --> <view v-for="(item,index) in goods_detail.product.extends.field_2.project" :key="index" class="lf-row-between child-tag"> <view class="lf-font-28 lf-color-black lf-flex-1">{{item.name}}</view> <view class="lf-font-28 lf-color-black lf-flex-1" style="text-align: center;">{{item.num}}</view> <view class="lf-font-28 lf-color-black lf-flex-1" style="text-align: right;">{{item.price}}</view> </view> </view> </view> </view> <!-- 餐厅类型 --> <view v-if="goods_detail.product.extends && goods_detail.product && goods_detail.product.type == 3"> <view class="goods-detail"> <view class="lf-font-32 lf-font-bold lf-m-b-20">餐厅开放时间</view> <view > <u-table> <u-tr v-for="(item,index) in goods_detail.product.extends.field_3.open_time" :key="index"> <u-th>{{item.section}}</u-th> <u-th>{{item.time}}</u-th> <u-th>{{item.week}}</u-th> </u-tr> </u-table> </view> </view> <view class="goods-detail" @click="openMap(goods_detail.product.extends.field_3.address,goods_detail.product.extends.field_3.latitude,goods_detail.product.extends.field_3.longitude)"> <view class="lf-font-32 lf-font-bold lf-m-b-20">{{goods_detail.product.extends.field_3.name}}</view> <view class="lf-row-between"> <view class="lf-line-2 lf-font-28 lf-color-333">{{goods_detail.product.extends.field_3.address}}</view> <view class="lf-iconfont lf-icon-dizhi lf-color-blue"></view> </view> </view> <view class="goods-detail"> <view class="lf-font-32 lf-font-bold lf-m-b-20">包含套餐</view> <view class="lf-flex-column"> <view class="lf-row-between child-tag" v-for="(item,index) in goods_detail.product.extends.field_3.package" :key="index"> <view class="lf-color-333 lf-font-28">{{item.name}} {{item.num}}</view> <view class="lf-color-333 lf-font-28">{{item.price}}</view> </view> </view> </view> </view> <!-- 酒店类型 --> <view v-if="goods_detail.product && goods_detail.product.extends && goods_detail.product.type == 1"> <view class="goods-detail" style="padding-bottom: 0;"> <view class="lf-font-32 lf-font-bold lf-m-b-20">酒店设施</view> <view> <view class="label-box1"> <view class="label-item" v-for="(item,index) in goods_detail.product.extends.field_1.tags" :key="index"> {{item.tag}} </view> </view> </view> </view> <view class="goods-detail" v-if="goods_detail.product.extends.field_1" @click="openMap(goods_detail.product.extends.field_1.address,goods_detail.product.extends.field_1.latitude,goods_detail.product.extends.field_1.longitude)"> <view class="lf-font-32 lf-font-bold lf-m-b-20" v-if="goods_detail.product.extends.field_1.name">{{goods_detail.product.extends.field_1.name}}</view> <view class="lf-row-between" v-if="goods_detail.product.extends.field_1.address"> <view class="lf-line-2 lf-font-28 lf-color-333">{{goods_detail.product.extends.field_1.address}}</view> <view class="lf-iconfont lf-icon-dizhi lf-color-blue"></view> </view> </view> </view> <!-- 旅游路线类型 --> <view v-if="goods_detail.product && goods_detail.product.type == 0 && goods_detail.product.extends.field_0.project"> <view class="goods-detail"> <view class="lf-font-32 lf-font-bold lf-m-b-20">包含项目</view> <view class="lf-flex-column"> <!-- <view class="lf-row-between lf-m-b-20"> <view class="lf-color-gray lf-font-28">项目名称</view> <view class="lf-color-gray lf-font-28">数量</view> <view class="lf-color-gray lf-font-28">额外费用</view> </view> --> <view class="lf-row-between child-tag" v-for="(item,index) in goods_detail.product.extends.field_0.project" :key="index" > <view class="lf-font-28 lf-color-black lf-flex-1">{{item.name}}</view> <view class="lf-font-28 lf-color-black lf-flex-1" style="text-align: center;">{{item.num}}</view> <view class="lf-font-28 lf-color-black lf-flex-1" style="text-align: right;">{{item.price}}</view> </view> </view> </view> <view class="goods-detail" v-if="goods_detail.product.extends.field_0.date.end && goods_detail.product.extends.field_0.date.start"> <view class="lf-row-between"> <view class="lf-font-32 lf-font-bold"> 行程时间 </view> <view class="lf-font-28 lf-color-black"> <view>{{goods_detail.product.extends.field_0.date.start}}~{{goods_detail.product.extends.field_0.date.end}}</view> </view> </view> <!-- <zwyCalendar class="lf-m-t-20" type="sign" :startTime="'2021-10-01'" :endTime="'2021-11-01'"/> --> </view> </view> <!-- 公共部分 --> <view class="goods-detail" v-if="goods_detail.content"> <view class="lf-font-32 lf-font-bold lf-m-b-20">商品详情</view> <rich-text :nodes="formatRichText(goods_detail.content)"></rich-text> </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/tabbar/home1.png"></image> <view class="lf-m-t-1">首页</view> </view> <button class="lf-flex-column lf-row-center icon-item" open-type="contact"> <image class="icon-img" src="../../static/center/service.png"></image> <view class="lf-m-t-1">客服</view> </button> <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="btn" @click="toAddOrder">立即购买</button> </view> <!-- 回到顶部 --> <!-- <u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}" :icon-style="{color: '#ffffff'}"></u-back-top> --> <u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top> </block> </skeleton> </view></template>
<script> import zwyCalendar from '@/components/zwy-calendar/zwy-calendar.vue' export default { data(){ return { year: new Date().getFullYear(), // 当前年
month: new Date().getMonth() + 1, // 当前月
current: 0, // 轮播下标
goods_id: 0, goods_detail: {}, is_collect: false, // 1为当前收藏商品了，0为否
skeletonLoading: true } }, components: {zwyCalendar}, onLoad(options){ this.goods_id = options.goods_id || options.id; console.log('商品',this.goods_id) this.getGoodsDetail(); }, computed: { isRight() { return function(val) { return this.$shared.isRight(val); } } }, methods: { // 打开地图
openMap(address,lat,lng){ // let { address, lat, lng } = this.goods_detail?.store || {};
uni.openLocation({ longitude: Number(lng), latitude: Number(lat), scale: 20, name: address }); }, getGoodsDetail(){ 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.is_collect) || false; }).catch(err => { this.skeletonLoading = false; setTimeout(() => { this.$toBack(); }, 1000); }) }, // 切换商品收藏
switchCollect(){ let userInfo = uni.getStorageSync('userinfo') || {}; if(!userInfo.id || !userInfo.nickname || !userInfo.avatar){ this.$url('/pages/login/index?type=userinfo'); return; } if(this.is_collect) { this.$http(this.API.API_DELCOLLECT, {agent_product_id:this.goods_id}).then(res => { this.$msg('取消收藏成功!') this.is_collect = false console.log(res) }) }else { this.$http(this.API.API_ADDCOLLECT, {agent_product_id:this.goods_id}).then(res => { this.$msg('添加收藏成功!') this.is_collect = true console.log(res) }) } }, // 拨打电话
makePhoneCall(phoneStr){ uni.makePhoneCall({ phoneNumber: String(phoneStr) }) }, // 跳转到确认下单页面
toAddOrder(){ let goods_id = this.goods_detail.id; this.$url('/pages/order/confirm_order?goods_id='+ goods_id); }, // 预览图片
lookImg(index){ this.$u.throttle(() => { let goods_banner = this.goods_detail.banners || []; let banners = goods_banner.map(item => item.cover); uni.previewImage({ urls: banners, current: index }) }, 200); }, // 富文本处理
formatRichText(richText){ if(richText != null){ let newRichText= richText.replace(/<img[^>]*>/gi, function(match, capture){ match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, ''); match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, ''); match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, ''); return match; }); newRichText = newRichText.replace(/style="[^"]+"/gi,function(match, capture){ match = match.replace(/width:[^;]+;/gi, 'width:100%;').replace(/width:[^;]+;/gi, 'width:100%;'); return match; }); newRichText = newRichText.replace(/<br[^>]*\/>/gi, ''); newRichText = newRichText.replace(/\<img/gi, '<img style="width:100%;height:auto;display:block;margin:10px 0;"'); return newRichText; }else{ return null; } } }, onShareAppMessage(){ let goods = this.goods_detail; let title = goods.title; let imageUrl = goods.pictures[0] || goods.picture; let path = '/pages/route/index?route=goods_detail&id='+ goods.id; console.log("path", path); return { title, path, imageUrl } } }</script>
<style> page{ background-color: #f5f5f5; overflow-x: hidden; }</style><style lang="scss" scoped="scoped"> .child-tag { margin-bottom: 20rpx; &:last-child { margin-bottom: 0; } } .swiper-box{ width: 750rpx; height: 490rpx; 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;
// margin-right: 22rpx;
// font-weight: bold;
// }
.price>view:nth-of-type(1){ text-decoration: line-through; color: #777777; margin-right: 22rpx; } .price>view:nth-of-type(2){ width: max-content; padding: 0 18rpx; height: 46rpx; background-color: #1998FE; 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: max-content; padding: 20rpx; height: 70rpx; border-radius: 10rpx; border: 2rpx solid #1998FE; display: flex; justify-content: center; align-items: center; font-size: 28rpx; color: #1998FE; margin-right: 20rpx; margin-bottom: 20rpx; } } .label-box1{ min-height: 130rpx; width: 100%; border-top: 1rpx solid #E5E5E5; display: flex; flex-wrap: wrap; padding: 30rpx 0 10rpx 0; .label-item{ width: max-content; padding: 0 10rpx; height: 54rpx; border-radius: 10rpx; border: 2rpx solid #1998FE; display: flex; justify-content: center; align-items: center; font-size: 24rpx; color: #1998FE; background: rgba(25, 152, 254, 0.05); 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: 50%; } } .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{ margin-right: 16rpx; background-color: transparent; margin: 0; line-height: initial; font-size: 28rpx; font-weight: inherit; margin-right: 10rpx; padding: 0; width: 88rpx; position: relative; &:first-child{ padding-left: 0; } .icon-img{ height: 50rpx; width: 50rpx; } } .btn{ margin: 0; padding: 0; width: 208rpx; height: 80rpx; background-color: #1998FE; color: #FFFFFF; line-height: 80rpx; font-size: 32rpx; border-radius: 42rpx; } }</style>
|
