|
|
<template> <view> <lf-nav title="商品详情" titleColor="#fff" :spreadOut="false" :showIcon="true" bgColor="transparent"></lf-nav> <skeleton :loading="skeletonLoading" :row="12" :showAvatar="false" :showTitle="true"> <block> <!-- 商品图片轮播 --> <swiper :current="current" :indicator-dots="pictures.length > 1" :circular="true" class="swiper-box" indicator-active-color="#1998FE"> <swiper-item v-for="(item, index) in pictures" :key="index"> <image mode="aspectFill" :src="item" style="width: 100%; height: 100%;" @click="lookImg(index)"></image> <view class="seckill-box" v-if="type == 'seckill'"> <view>距离结束还剩余</view> <view> <countdown-timer :time="time" :autoStart="true"> <template v-slot="{hour, minute, second}"> <view class="lf-flex"> <view>{{ hour >= 10 ? hour : "0" + hour }}</view> <view>时</view> <view>{{ minute >= 10 ? minute : "0" + minute }}</view> <view>分</view> <view>{{ second >= 10 ? second : "0" + second }}</view> <view>秒</view> </view> </template> </countdown-timer> </view> </view> </swiper-item> </swiper> <!-- 商品主要信息 --> <view class="head-info"> <view class="lf-row-between"> <view v-if="type == 'point'"> <text class="lf-font-48 lf-color-primary lf-font-bold">{{ goods_detail.redeem_point }}</text> <text class="lf-font-28 lf-color-777 lf-m-l-10">个兑换</text> </view> <lf-price :iftext="false" :price="goods_detail.sell_price || 0" v-else></lf-price> <text class="lf-iconfont icon-fenxiang lf-font-40" @click="shareGraphic()"></text> </view> <view class="lf-row-between lf-font-24 lf-m-t-20 lf-p-b-20"> <view class="lf-font-bold lf-font-32 lf-color-222">{{ goods_detail.name }}</view> </view> <view class="lf-row-between lf-font-24 lf-p-b-30"> <view class="lf-font-28 lf-color-777 lf-row-between">可自提/可邮寄</view> </view> </view> <!-- 商品优惠 --> <block v-if="coupons && coupons.length"> <self-line></self-line> <view class="bg-white" > <view class="cu-bar padding-lr"> <view class="lf-flex"> <text class="lf-color-777 lf-font-28">优惠</text> <view style="width: 580rpx;"> <view class="lf-color-222 lf-font-26 lf-m-l-30" v-for="(item, index) in coupons" :key="index">{{ item.title }} </view> </view> </view> <view> <text class="lf-font-24 lf-color-777 lf-iconfont icon-xiangyou"></text> </view> </view> </view> </block> <self-line></self-line> <!-- 服务tags --> <block v-if="goods_detail.tags.length"> <view class="bg-white"> <view class="cu-bar padding-lr"> <view class="lf-flex"> <text class="lf-color-777 lf-font-28">服务</text> <view style="width: 600rpx;flex-wrap: wrap;display: flex;margin-top: 32rpx;"> <view class="lf-m-l-30" v-for="(tagItem, tagIndex) in goods_detail.tags" :key="tagIndex"> <text class="lf-iconfont icon-xuanzhong lf-font-30" style="color: #15716E;"></text> <text class="lf-m-l-10 lf-font-26 lf-color-black">{{ tagItem }}</text> </view> </view> </view> <view> <text class="lf-font-24 lf-color-777 lf-iconfont icon-xiangyou"></text> </view> </view> </view> </block> <!-- 商品选择规格 --> <view class="bg-white"> <view class="cu-bar padding-lr" @click="shoot(2)"> <view class="lf-flex"> <text class="lf-color-777 lf-font-28">选择</text> <text class="lf-color-222 lf-font-26 lf-m-l-30">{{ showSpec }}</text> </view> <view> <text class="lf-font-24 lf-color-777 lf-iconfont icon-xiangyou"></text> </view> </view> </view> <self-line></self-line> <!-- 店铺信息 --> <view v-if="type != 'point'"> <view class="user-top"> <view class="lf-row-between lf-w-100"> <view class="lf-flex" @click="$url('/pages/shop/shopdetail?id='+ brand_detail.id)"> <view class="tag-father"> <image :src="brand_detail.logo" mode="aspectFill" class="head-img"></image> </view> <view class="lf-flex-column lf-m-l-20"> <text class="lf-font-28 lf-color-black lf-font-bold">{{ brand_detail.name }}</text> <view class="lf-font-24 lf-color-777"> <text class="lf-iconfont icon-dizhi lf-font-24 lf-color-primary"></text> <text class="lf-m-l-10">{{ brand_detail.floor }}</text> </view> </view> </view> <!-- <view> <button class="head-btn" @click="$url('/pages/user/my/chatonline')"> <text class="lf-iconfont icon-kefuhdpi lf-font-24"></text> <text class="lf-m-l-10">客服</text> </button> </view> --> </view> </view> <scroll-view class="scroll-view" :scroll-x="true"> <view class="scroll-content"> <view class="goods-item" v-for="(item, index) in brand_detail.goods" :key="index" @click="$url('/pages/shop/goodsdetail?id='+ item.id)"> <image class="goods-img" :src="item.img"></image> <view class="goods-info"> <view class="lf-line-1">{{ item.name }}</view> <view>￥{{ item.sell_price }}</view> </view> </view> <view class="goods-item" @click="$url('/pages/shop/shopdetail?id='+ brand_detail.id)"> <view class="more-box"> <text>查看更多</text> <text class="lf-iconfont icon--2 lf-text-vertical"></text> </view> </view> </view> </scroll-view> </view> <!-- 商品详情 --> <view class="goods-detail"> <view class="lf-font-32 lf-font-bold lf-m-b-20">商品详情</view> <rich-text :nodes="formatRichText(goods_detail.content)"></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" open-type="contact"> <text class="lf-iconfont icon-pinglun- icon-img"></text> <view class="lf-m-t-1">客服</view> </view> --> <view class="lf-flex-column lf-row-center icon-item" @click="switchCollect"> <text class="lf-iconfont icon-shoucang2 icon-img lf-color-price" v-if="is_collect"></text> <text class="lf-iconfont icon-shoucang11 icon-img" v-else></text> <view class="lf-m-t-1">{{ is_collect ? '已收藏' : '收藏' }}</view> </view> <button class="lf-flex-column lf-row-center icon-item" @click="$url('/pages/store/cart/cart')"> <text class="lf-iconfont icon-gouwulan icon-img"></text> <view class="lf-m-t-1">购物车</view> </button> </view> <view v-if="type == 'seckill'"> <button class="btn" style="width: 349rpx;">立即秒杀</button> </view> <view v-else-if="type == 'point'"> <button class="btn" style="width: 349rpx;">立即兑换</button> </view> <view class="lf-flex" v-else> <button class="btn1" @click="shoot(1)">加入购物车</button> <button class="btn lf-m-l-15" @click="shoot(2)">立即购买</button> </view> </view> <!-- 加入购物车、立即购买模态框选规格 --> <u-popup v-model="show_popup" mode="bottom" :round="true" borderRadius="20"> <view class="popup-content"> <!-- 商品信息及关闭按钮 --> <view class="popup-head"> <view class="lf-flex"> <image class="goods-img" :src="goods_detail.img"></image> <view class="goods-info"> <view class="price">{{ showGoodsSpecPrice }}</view> <view class="goods-name">{{ goods_detail.name }}</view> </view> </view> <view @click="show_popup = false"> <text class="lf-iconfont icon-cuo lf-font-50"></text> </view> </view> <!-- 规格 --> <view v-for="(value, key) in goods_stock.specs" :key="key"> <view class="spec-title">{{ value.label }}</view> <view class="lf-flex-wrap"> <view :class="{ 'spec-item': true, 'spec-active': value.spec_current === index}" @click="activeSpec(key, index)" v-for="(item, index) in value.list" :key="index">{{ item.value }} </view> </view> </view> <!-- 数量 --> <view class="lf-row-between lf-m-t-40"> <view class="lf-font-28 lf-color-555">数量</view> <view class="lf-flex"> <view class="num-btn" @click="changeNum('less')"> <text class="lf-iconfont icon-jian1 lf-font-30"></text> </view> <view> <input class="input" :value="goods_num" :disabled="true" /> </view> <view class="num-btn lf-text-right" @click="changeNum('add')"> <text class="lf-iconfont icon-jia lf-font-30"></text> </view> </view> </view> <!-- 操作按钮 --> <button class="comfirm-btn" @click="specConfirm">{{ click_type == 1 ? '加入购物车' : '立即购买' }}</button> </view> </u-popup> <!-- 回到顶部 --> <u-back-top :scroll-top="pageScrollTop"></u-back-top> </block> </skeleton> </view></template>
<script> import countdownTimer from '@/components/countdown-timer/countdown-timer'; export default { components: { countdownTimer }, data(){ return { current: 0, // 轮播下标
goods_id: 0, goods_detail: {}, is_collect: false, // 1为当前收藏商品了，0为否
skeletonLoading: false, pictures: [], show_popup: false, // 是否显示选规格模态框
spec_current: null, // 规格下标
click_type: null, // 当前点击的是加入购物车[1]还是立即购买[2]
type: 'mail', // 页面显示类型，mail普通可邮寄商品，point积分商品，seckill秒杀商品
time: new Date('2021/09/8 14:15:00').getTime() - new Date('2021/09/8 13:10:00').getTime(), goods_stock: { specs: {}, stores: {} }, seckill: {}, // 秒杀商品的信息
brand_detail: {}, token: '', coupons: [], // 优惠
goods_num: 1 } }, computed: { showGoodsSpecPrice(){ let goods_detail = this.goods_detail; let stores = this.goods_stock.stores; let specs = this.goods_stock.specs; let specId = 1; if(!this.$isRight(specs[specId])){ return `￥${goods_detail.min_price} - ￥${goods_detail.max_price}`; } let spec_current = specs[specId].spec_current; if(specs[specId].spec_current != null){ let id = specs[specId].list[spec_current].id; return "￥"+ stores[specId +'-'+ id].price; }else{ return `￥${goods_detail.min_price} - ￥${goods_detail.max_price}`; } }, showSpec(){ let specs = this.goods_stock.specs; let str = ''; for(let i in specs){ if(specs[i].spec_current != null){ str += specs[i].list[specs[i].spec_current].value +';'; } } if(str == ''){ str = '请选择规格' } return str; } }, onLoad(options){ console.log("options", options) this.token = this.$cookieStorage.get('user_token'); this.goods_id = options.id; this.getNewdetail(); this.getGoodsStock(); // 获取商品库存、规格信息
}, methods: { // 切换商品收藏
switchCollect(){ if(!this.token){ this.$url('/pages/login/index'); return; } this.addCollcet() }, //收藏
addCollcet() { this.$http.post({ api: 'api/collect/create', data: { type:'jc_goods', collect_id: this.goods_detail.id, }, header: { Authorization: this.token } }).then(res => { this.$msg(res.data.data); this.getNewdetail(); }).catch(err => { console.log("====", err); }) }, // 加入购物车和立即购买
shoot(type){ this.click_type = type; if(this.$isRight(this.goods_stock.specs)){ this.show_popup = true; }else{ this.confirm(); } }, // 选规格提交
specConfirm(){ let specs = this.goods_stock.specs; let flag = true; for(let i in specs){ if(specs[i].spec_current == null){ flag = false; } } if(flag){ this.confirm(); }else{ this.$msg('您未选完整规格') } }, // 商品选规格
activeSpec(key, index){ let obj = this.goods_stock.specs; if(obj[key]['spec_current'] == index){ obj[key]['spec_current'] = null; }else{ obj[key]['spec_current'] = index; } this.$set(this.goods_stock, 'specs', obj); }, // 商品加减
changeNum(type){ if(type == 'add'){ if(this.goods_num < 10){ this.goods_num++; } }else if(type == 'less'){ if(this.goods_num > 1){ this.goods_num--; } } }, // 跳转至下单页TODO
confirm(){ let goods_detail = this.goods_detail; let specs = this.goods_stock.specs; let stores = this.goods_stock.stores; let par = { attributes: { color: specs[2].list[specs[2].spec_current].value, com_id: goods_detail.id, img: goods_detail.img, size: specs[1].list[specs[1].spec_current].value, sku: goods_detail.goods_no +'-'+ specs[1].list[specs[1].spec_current].value }, id: stores[1 +'-'+ specs[1].list[specs[1].spec_current].id].id, product_id: stores[1 +'-'+ specs[1].list[specs[1].spec_current].id].id, market_price: goods_detail.market_price, name: goods_detail.name, price: stores[1 +'-'+ specs[1].list[specs[1].spec_current].id].price, qty: this.goods_num, store_count: stores[1 +'-'+ specs[1].list[specs[1].spec_current].id].store } uni.showLoading({ title: '正在提交' }) this.show_popup = false; if(this.click_type == 1){ // 加入购物车
this.$http.post({ api: 'api/shopping/cart', data: {"0": par}, header: { Authorization: this.token } }).then(res => { if(res.data.code == 200){ this.$msg('加入购物车成功', {icon: 'success'}) }else{ this.$msg('加入购物车失败', {icon: 'error'}) } uni.hideLoading() }).catch(err => uni.hideLoading()) }else if(this.click_type == 2){ // 直接结算
this.$cookieStorage.set('order_confirm', par); uni.hideLoading(); this.$url('/pages/order/confirm/confirm'); // this.$http.post({
// api: 'api/shopping/order/checkout',
// data: par,
// header: {
// Authorization: this.token
// }
// }).then(res => {
// if(res.data.code == 200){
// this.$url('/pages/order/confirm/confirm');
// }else{
// this.$msg('提交失败', {icon: 'error'})
// }
// uni.hideLoading()
// }).catch(err => uni.hideLoading())
} }, // 点击页面分享按钮
shareGraphic(){ this.getCreateShareImg(); }, //请求h5的图片接口
getCreateShareImg(){ wx.showLoading({ title:"生成中", mask:true }) let origin = window.location.origin; let share_url = origin+'/pages/store/detail/detail'; this.$http.get({ api:'api/distribution/createH5ShareImg', data:{ goods_id:this.id, share_url:share_url } }).then(res=>{ res = res.data; if(res.status){ this.qr_code_image = res.data.image; if(this.qr_code_image){ this.share_gaphic =!this.share_gaphic; this.is_toggle_share = false; } } else{ wx.showModal({ content: res.message || '请求失败，请重试', showCancel: false }); } wx.hideLoading() }).catch(rej=>{ wx.hideLoading() wx.showModal({ content: rej.message || '内部错误，请重试', showCancel: false }); }) }, // 商品详情
getNewdetail(){ this.$http.get({ api: 'api/store/detail/'+ this.goods_id, header: { Authorization: this.token } }).then(res => { console.log("===---", res); let meta = res.data.meta; let goods_detail = res.data.data; this.goods_detail = goods_detail; this.pictures = [res.data.data.img]; this.is_collect = Boolean(res.data.data.is_collect) || false; let type = 'mail'; if(this.$isRight(goods_detail.is_largess)){ type = 'point'; } if(this.$isRight(meta.seckill)){ type = 'seckill'; this.seckill = meta.seckill; } if(type != 'point'){ this.getBrandDetail(goods_detail.brand_id); } if(this.$isRight(meta.discounts)){ this.coupons = meta.discounts.coupons; } this.type = type; }).catch(err => { console.log("====", err); }) }, // 获取商家信息
getBrandDetail(brand_id){ this.$http.get({ api: 'api/brand/detail', data: { brand_id: brand_id }, header: { Authorization: this.token } }).then(res => { this.brand_detail = res.data.data; }) }, // 获取商品库存信息
getGoodsStock(){ this.$http.get({ api: `api/store/detail/${this.goods_id}/stock` }).then(res => { let data = res.data.data; for(let i in data.specs){ data.specs[i].spec_current = null; } this.goods_stock = data; }) }, // 拨打电话
makePhoneCall(phoneStr){ uni.makePhoneCall({ phoneNumber: String(phoneStr) }) }, // 打开地图 PS.暂时用不到
openMap(){ let { address, lat, lng } = this.goods_detail?.store || {}; uni.openLocation({ longitude: Number(lat), latitude: Number(lng), scale: 20, name: address }); }, // 预览图片
lookImg(index){ this.$u.throttle(() => { let banners = this.pictures; 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.name; let imageUrl = goods.share_cover || goods.cover || goods.img; let path = '/pages/route/index?route=detail&id='+ goods.id; return { title, path, imageUrl } } }</script>
<style> page{ background-color: #f5f5f5; overflow-x: hidden; }</style><style lang="scss" scoped="scoped"> //商品上去scrollview部分
.scroll-view{ height: 310rpx; width: 100%; // margin-top: 20rpx;
padding: 0 30rpx 30rpx 30rpx; background-color: white; .scroll-content{ display: flex; width: 100%; .goods-item{ margin-right: 15rpx; width: 180rpx; } .goods-img{ width: 180rpx; height: 180rpx; background-color: #EEEEEE; } .goods-info{ text-align: center; color: #222222; &>view:nth-child(1n){ font-size: 24rpx; } &>view:nth-child(2n){ font-size: 28rpx; font-weight: bold; text-align: left; color: #F63434; } } .more-box{ width: 180rpx; height: 180rpx; background-color: #EEEEEE; text-align: center; line-height: 180rpx; font-size: 24rpx; } } } //scrollview结束
.tag-father { position: relative; } .head-tag { color: white; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 24rpx; width: 36rpx; height: 36rpx; border-radius: 50%; background-color: #15716E; border: 1rpx solid #FFFFFF; position: absolute; left: 76rpx; top: 86rpx; z-index: 99; } .qzone-img { width: 220rpx; height: 220rpx; border-radius: 10rpx; margin-right: 12rpx; &:nth-child(3n) { margin-right: 0; } &:nth-child(n + 4) { margin-top: 12rpx; } } .user-top { background-color: #F3F8F8; padding: 30rpx; display: flex; align-items: center; background-color: white; } .head-img { width: 80rpx; height: 80rpx; border-radius: 50%; } .head-btn { display: flex; width: max-content; height: 45rpx; background: white; border: 2rpx solid #15716E; align-items: center; font-size: 22rpx; color: #15716E; justify-content: space-between; border-radius: 35rpx; padding: 10rpx!important; } .swiper-box{ width: 750rpx; height: 750rpx; background-color: #FFFFFF; position: relative; .seckill-box{ position: absolute; bottom: 0; left: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 32rpx; width: 100%; height: 77rpx; background-color: #15716E; color: #FFFFFF; font-size: 26rpx; } } .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; } } } .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: 110rpx; 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{ text-align: center; 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; font-size: 40rpx; line-height: 1; } } .btn1{ margin: 0; width: max-content; height: 80rpx; background-color: rgba(21, 113, 110, 0.1); color: #15716E; line-height: 80rpx; font-size: 32rpx; padding: 0 20rpx; border-radius: 42rpx; font-size: 26rpx; border: 2rpx solid #15716E; } .btn{ margin: 0; padding: 0 20rpx; width: max-content; height: 80rpx; background-color: #15716E; color: #FFFFFF; line-height: 80rpx; font-size: 26rpx; border-radius: 42rpx; } } .popup-content{ height: max-content; width: 750rpx; background: #FFFFFF; border-radius: 20rpx 20rpx 0rpx 0rpx !important; padding: 40rpx 32rpx; max-height: 80vh; overflow-y: scroll; .popup-head{ display: flex; justify-content: space-between; .goods-img{ width: 150rpx; height: 150rpx; border-radius: 2rpx; margin-right: 20rpx; } .goods-info{ width: 400rpx; height: 150rpx; display: flex; flex-direction: column; justify-content: space-around; .price{ font-size: 48rpx; font-weight: bold; color: #F63434; line-height: 1; } .goods-name{ font-size: 32rpx; color: #222222; line-height: 1.4; } } } .spec-title{ font-size: 28rpx; color: #555555; margin-top: 40rpx; margin-bottom: 20rpx; } .spec-item{ width: 142rpx; height: 64rpx; border-radius: 33rpx; border: 2rpx solid #555555; font-size: 28rpx; color: #555555; display: flex; justify-content: center; align-items: center; margin-right: 20rpx; &:nth-child(4n){ margin-right: 0rpx; } &:nth-child(n+5){ margin-top: 20rpx; } } .spec-active{ border: none; background-color: #15716E; color: #FFFFFF; } .input{ width: 40rpx; height: 45rpx; border-radius: 2rpx; background-color: #F3F8F7; text-align: center; } .num-btn{ width: 36rpx; } .comfirm-btn{ width: 550rpx; height: 100rpx; background: #15716E; border-radius: 50rpx; color: #FFFFFF; line-height: 100rpx; margin-top: 62rpx; } }</style>
|
