|
|
<template> <view style="overflow-x: hidden;"> <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' && $isRight(seckill.seckill.end_left_time)" style="z-index: 999;"> <view>距离结束还剩余</view> <view v-if="$isRight(seckill.seckill.end_left_time)"> <countdown-time :day="seckill.seckill.end_left_time[0]" :hour="seckill.seckill.end_left_time[1]" :minute="seckill.seckill.end_left_time[2]" :second="seckill.seckill.end_left_time[3]" color="white" splitorColor="white" > </countdown-time> </view> </view> <view class="seckill-box" v-if="type == 'seckill' && $isRight(seckill.seckill.start_left_time)" style="z-index: 999;"> <view>距离开始还剩余</view> <view v-if="$isRight(seckill.seckill.start_left_time)"> <countdown-time :day="seckill.seckill.start_left_time[0]" :hour="seckill.seckill.start_left_time[1]" :minute="seckill.seckill.start_left_time[2]" :second="seckill.seckill.start_left_time[3]" color="white" splitorColor="white" > </countdown-time> </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="seckill.seckill_price || 0" v-else-if="type == 'seckill'"></lf-price> <lf-price :iftext="false" :price="goods_detail.sell_price || 0" v-else></lf-price> <button class="share-btn" open-type="share"> <text class="lf-iconfont icon-fenxiang lf-font-40"></text> </button> </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"> <text v-if="brand_detail.express && !brand_detail.pick_self">可邮寄</text> <text v-else-if="!brand_detail.express && brand_detail.pick_self">可自提</text> <text v-else-if="brand_detail.express && brand_detail.pick_self">可自提/可邮寄</text> </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; padding-left: 20rpx;"> <text class="lf-color-222 lf-font-26" v-for="(item, index) in coupons" :key="index">{{ item.title }}; </text> </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> <!-- 商品选择规格 --> <block v-if="$isRight(goods_stock.specs)"> <view class="bg-white"> <view class="cu-bar padding-lr" @click="shoot(3)" v-if="type == 'point'"> <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 class="cu-bar padding-lr" @click="shoot(2)" v-else> <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> </block> <!-- 店铺信息 --> <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="widthFix" 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="makePhoneCall(brand_detail.tel)"> <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" v-if="brand_detail.goods.length!=0"> <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="goods_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"> <button 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> </button> <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> <block v-if="$isRight(car_num)"> <view class="angle-mark" v-if="car_num<99">{{car_num || 0}}</view> <view class="angle-mark" v-else>99+</view> </block> </button> </view> <view v-if="type == 'seckill'"> <button class="btn" style="width: 349rpx;" @click="shoot(2)">立即秒杀</button> </view> <view v-else-if="type == 'point'"> <button class="btn" style="width: 349rpx;" @click="shoot(3)">立即兑换</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> <!-- 分享生成海报时弹出 --> <view class="share-img-box" :class="share_img ? 'cur' : ''"> <view class="imgs-box"> <view class="img"> <image mode="widthFix" :src="shareImg"></image> </view> <view class="text"> 保存图片后，可分享到朋友圈 </view> <view class="save" :style="'background: ' + config.mainColor" @tap="downImg"> 保存图片 </view> <!-- <i class="iconfont icon-delete" @tap="changeImg"></i> --> <text class="lf-iconfont icon-status-error" @tap="changeImg" ></text> </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> --> <image class="goods-img" :src="getSpecImage"></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 countdownTime from '@/components/uni-countdown/uni-countdown.vue'; import Bigc from '@/common/js/bigc.js'; export default { components: { countdownTime }, data(){ return { current: 0, // 轮播下标
goods_id: 0, goods_detail: {}, is_collect: false, // 1为当前收藏商品了，0为否
skeletonLoading: false, pictures: [], show_popup: false, // 是否显示选规格模态框
click_type: null, // 当前点击的是加入购物车[1]还是立即购买[2]
type: 'mail', // 页面显示类型，mail普通可邮寄商品，point积分商品，seckill秒杀商品
time: 0, goods_stock: { specs: {}, stores: {} }, seckill: {}, // 秒杀商品的信息
brand_detail: {}, token: '', coupons: [], // 优惠
goods_num: 1, is_date_finish: false, car_num: 0, goods_content: '', shareImg: '', share_img: false, show_share: false, config: {mainColor: '#15716e'} } }, computed: { showGoodsSpecPrice(){ let goods_detail = this.goods_detail; let stores = this.goods_stock.stores; let specs = this.goods_stock.specs; if(!this.$isRight(specs[1])){ return `￥${goods_detail.min_price} - ￥${goods_detail.max_price}`; } let spec_current_1 = specs[1].spec_current; let spec_current_2 = specs[2].spec_current; if(specs[1].spec_current != null && specs[2].spec_current != null){ let id_1 = specs[1].list[spec_current_1].id; let id_2 = specs[2].list[spec_current_2].id; if(id_1 < id_2){ let id_3 = id_2; id_2 = id_1; id_1 = id_3; } return "￥"+ stores[id_2 +'-'+ id_1].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; }, getSpecImage(){ let specs = this.goods_stock.specs; let img = ''; for(let i in specs){ if(specs[i].spec_current != null){ img = specs[i].list[specs[i].spec_current].spec_img; } } if(!img){ img = this.goods_detail.img; } return img; } }, onLoad(options){ console.log("options", options) this.token = this.$cookieStorage.get('user_token'); this.goods_id = options.id; this.getNewdetail(); this.getGoodsStock(); // 获取商品库存、规格信息
this.getcarNum() }, methods: { getcarNum() { this.$http .get({ api: 'api/shopping/cart/count', header: { Authorization: this.$cookieStorage.get('user_token') }, }) .then(res => { if (res.data.code == 200) { if(res.data.data == null) { this.car_num = 0; }else { this.car_num = res.data.data; } } }) .catch(() => { wx.showModal({ content: '请求失败', showCancel: false }); }); }, // 切换商品收藏
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(){ if(this.is_date_finish){ return this.$msg('活动已结束'); } let goods_detail = this.goods_detail; let specs = this.goods_stock.specs; let stores = this.goods_stock.stores; let par = {}; let have_specs = ''; let no_specs = ''; if(this.$isRight(specs)){ let s_id_1 = 1; let s_id_2 = 2; for(let i in specs){ if(specs[i].label_key == 'size'){ s_id_1 = 1; } if(specs[i].label_key == 'color'){ s_id_2 = 2; } } let spec_current_1 = specs[s_id_1].spec_current; let spec_current_2 = specs[s_id_2].spec_current; let id_1 = specs[s_id_1].list[spec_current_1].id; let id_2 = specs[s_id_2].list[spec_current_2].id; if(id_1 > id_2){ let id_3 = id_2; id_2 = id_1; id_1 = id_3; } par = { attributes: { color: specs[s_id_2].list[specs[s_id_2].spec_current].value, com_id: goods_detail.id, img: goods_detail.img, size: specs[s_id_1].list[specs[s_id_1].spec_current].value, sku: goods_detail.goods_no +'-'+ specs[s_id_1].list[specs[s_id_1].spec_current].value }, id: stores[id_1 +'-'+ id_2].id, product_id: stores[id_1 +'-'+ id_2].id, price: stores[id_1 +'-'+ id_2].price, store_count: stores[id_1 +'-'+ id_2].store, market_price: goods_detail.market_price, name: goods_detail.name, qty: this.goods_num } have_specs = stores[id_1 +'-'+ id_2].id; }else{ par = { attributes: { com_id: goods_detail.id, img: goods_detail.img }, id: goods_detail.id, product_id: goods_detail.id, price: goods_detail.sell_price, store_count: goods_detail.store_nums, market_price: goods_detail.market_price, name: goods_detail.name, qty: this.goods_num } no_specs = goods_detail.id; } // 秒杀商品
if(this.$isRight(this.seckill)){ delete par.product_id; par.seckill_goods_id = this.seckill.item_id; par.seckill_item_id = this.seckill.id; par.price = this.seckill.seckill_price; par.total = new Bigc(this.goods_num).times(this.seckill.seckill_price).round(2, 0); } 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'}) this.getcarNum() }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())
}else if(this.click_type == 3) { let params = {}; if(have_specs) { uni.hideLoading() this.$url('/pages/order/pointconfirm/confirm?quantity='+this.goods_num+'&product_id='+have_specs+'&goods_type=0') }else { uni.hideLoading() this.$url('/pages/order/pointconfirm/confirm?quantity='+this.goods_num+'&goods_id='+no_specs+'&goods_type=0') } } }, // 点击页面分享按钮
shareGraphic(){ // this.getCreateShareImg();
this.getShearImg(); }, // 获取分享图片
getShearImg() { wx.showLoading({ title: "生成中", mask: true }); this.$http.get({ api: 'api/distribution/createMiniShareImg', header: { Authorization: this.token }, data: { goods_id: this.goods_id } }).then(res => { if (res.statusCode == 200) { res = res.data; if (res.status) { this.setData({ shareImg: res.data.image }); setTimeout(() => { this.changeImg(); }, 100) } else { wx.showModal({ content: res.message || '请求失败', showCancel: false }); } } else { wx.showModal({ content: '请求失败', showCancel: false }); } wx.hideLoading(); this.changeShare(); }).catch(rej => { wx.showModal({ content: '内部错误', showCancel: false }); wx.hideLoading(); this.changeShare(); }); }, // 弹出图片
changeImg() { this.share_img = !this.share_img; }, // 弹出分享
changeShare() { this.setData({ show_share: !this.show_share }); }, // 下载图片
downImg() { if (this.shareImg) { wx.showLoading({ title: '正在下载', mask: true }); this.$http.dowloadFile({ api: this.shareImg }).then(res => { if (res.statusCode == 200) { wx.getSetting({ success: ret => { // 如果之前没有授权
if (!ret.authSetting['scope.writePhotosAlbum']) { wx.authorize({ scope: 'scope.writePhotosAlbum', success: rej => { this.saveImg(res.tempFilePath); }, // 用户拒绝授权
fail: ret => { // this.setData({
// is_refused: true
// });
wx.hideLoading(); uni.showModal({ title: '温馨提示', content: '由于您拒绝授权，保存图片失败！', showCancel: false }) } }); } else { this.saveImg(res.tempFilePath); } } }); } else { wx.hideLoading(); wx.showToast({ title: '下载图片失败', icon: 'none' }); } }, err => {}); } }, // 保存图片
saveImg(path) { wx.saveImageToPhotosAlbum({ filePath: path, success: res => { wx.hideLoading(); wx.showToast({ title: '保存图片成功', icon: 'success' }); }, fail: rej => { wx.hideLoading(); wx.showToast({ title: '保存图片失败', icon: 'none' }); } }); }, //请求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); if(res.data.status){ 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; this.goods_content = this.formatRichText(goods_detail.content); let type = 'mail'; if(this.$isRight(goods_detail.is_largess)){ type = 'point'; } if(this.$isRight(meta.seckill)){ type = 'seckill'; this.seckill = meta.seckill; let currentDate = this.$shared.recordTime(); this.time = new Date(meta.seckill.ends_at).getTime() - new Date(currentDate).getTime() } if(type != 'point'){ this.getBrandDetail(goods_detail.brand_id); } if(this.$isRight(meta.discounts)){ this.coupons = meta.discounts.coupons; } this.type = type; }else{ this.$msg(res.data.message || '网络繁忙请稍后再试').then(() => { this.$toBack(); }) } }).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); }, // 倒计时结束
dateFinish(){ this.is_date_finish = true; }, // 富文本处理
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; } }, setData: function (obj) { let that = this; let keys = []; let val, data; Object.keys(obj).forEach(function (key) { keys = key.split('.'); val = obj[key]; data = that.$data; keys.forEach(function (key2, index) { if (index + 1 == keys.length) { that.$set(data, key2, val); } else { if (!data[key2]) { that.$set(data, key2, {}); } } data = data[key2]; }); }); } }, 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"> .angle-mark{ position: absolute; right: 4rpx; top: 4rpx; width: 40rpx; height: 40rpx; background-color: #15716E; border-radius: 50%; font-size: 20rpx; display: flex; justify-content: center; align-items: center; color: #FFFFFF; } //商品上去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; color: #555555; &:first-child{ padding-left: 0; } .icon-img{ height: 50rpx; width: 50rpx; font-size: 40rpx; line-height: 1; color: #555555; } } .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{ min-width: 122rpx; max-width: max-content; 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; margin-bottom: 20rpx; padding: 0 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; } } //分享到朋友圈弹出
.share-img-box { background:rgba(0,0,0,.8); position: fixed; bottom: 0; width: 100%; height: 0; z-index: 50; transition:all .3s linear; .imgs-box { background: #F3F3F3; border-radius: 10px; margin:20px; overflow: hidden; .img{ box-shadow:0px 4px 8px 0px rgba(155,155,155,0.5); border-radius: 6px; margin: 30px; box-sizing: border-box; image{ display: block; width: 100%; } } .text { text-align: center; margin-top: 22px; font-size: 12px; color: #9B9B9B; } .save { background: #15716e; height: 44px; line-height: 44px; color: #ffffff; text-align: center; border-radius: 10px; margin: 10px 20px; } i{ position: absolute; top: 0px; right: 0px; color: #CCCCCC; font-size: 30px; } } &.cur{ height: 100%; } } .share-btn{ margin: 0; padding: 0; line-height: 1; background-color: transparent; }</style>
|
