|
|
<template> <view> <skeleton :loading="skeletonLoading" :row="12" :showAvatar="false" :showTitle="true"> <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="#FE9903"> <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-item> </swiper> <view class="bill-position" @tap='formSubmit()'> <button class="cu-btn1 margin-left-sm lf-font-28 lf-m-20"> 分享海报 </button> </view> <!-- 商品主要信息 --> <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"> <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> </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-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 mode="aspectFill" class="lf-fle shop-img" :src="goods_detail.store.cover" v-if="goods_detail.store.cover"></image> <image mode="aspectFill" class="lf-fle shop-img" src="../../static/center/shop-logo.png" v-else></image> <view class="lf-font-32 lf-m-l-20 lf-line-1" style="max-width: 512rpx;">{{ goods_detail.store.name }}</view> </view> <view @click="makePhoneCall(goods_detail.store.tel)"> <text class="lf-iconfont lf-icon-dianhua lf-font-40" style="color: #3A62FF;"></text> </view> </view> <view class="lf-flex lf-m-t-20" @click="openMap"> <view style="width: 60rpx; height: 60rpx;" class="lf-row-center"> <text class="lf-iconfont lf-icon-dizhi lf-font-40" style="color: #555555;"></text> </view> <view class="lf-m-l-20 lf-font-28" style="color: #555555;">{{ goods_detail.store.address }}</view> </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)" 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> <!-- 修饰专用 --> <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/center/home.png"></image> <view class="lf-m-t-1">首页</view> </view> <view class="lf-flex-column lf-row-center icon-item" @click="$url('/pages/contactService/index')"> <image class="icon-img" src="../../static/center/service.png"></image> <view class="lf-m-t-1">客服</view> </view> <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> <!-- 海报 --> <tki-qrcode v-if="info.avatar" style="visibility: hidden;position: fixed;left: -500rpx;" ref="qrcode" @result="qrR" :val="checkArea" :size="115" unit="px" background="#fff" foreground="#000" pdground="#000" :onval="true" :loadMake="true" :icon="info.avatar" /> <tki-qrcode v-else ref="qrcode"style="visibility: hidden;position: fixed;left: -500rpx;" @result="qrR" :val="checkArea" :size="115" unit="px" background="#fff" foreground="#000" pdground="#000" :onval="true" :loadMake="true" :icon="require('@/static/images/system/payfail.png')" /> <view class="canvas-box"> <canvas style="width: 375px;height: 667px;position:fixed;top:9999px" canvas-id="mycanvas" /> </view> <view class='imagePathBox' v-if="maskHidden == true && imagePath" @click="maskHidden = false "> <image :src="imagePath" class='shengcheng' mode="widthFix"></image> <button class='baocun' @click.stop="saveBill()">保存相册，分享到朋友圈</button> </view> </view></template>
<script> import tkiQrcode from "tki-qrcode"; // 二维码生成器
export default { data(){ return { current: 0, // 轮播下标
goods_id: 0, goods_detail: {}, is_collect: 0, // 1为当前收藏商品了，0为否
skeletonLoading: true, base64Img: '', checkArea: 'Cannot find module', maskHidden: false, info: { avatar: '', nickname: '', id: '', tel: '', tags: [] }, showLogin: true, imagePath: '', userToken: '' } }, components: { tkiQrcode }, computed: { isRight(){ return function(val){ return this.$shared.isRight(val); } } }, onLoad(options){ this.goods_id = options.id; this.getGoodsDetail(); this.getData() }, methods: { //海报开始
//保存头像
saveAvatar() { var that = this wx.saveImageToPhotosAlbum({ filePath: that.info.avatar, success(res) { wx.showModal({ content: '图片已保存到相册，赶紧晒一下吧~', showCancel: false, confirmText: '好的', confirmColor: '#333', success: function(res) { if (res.confirm) { console.log('用户点击确定'); that.maskHidden = false } }, fail: function(res) { that.maskHidden = false console.log(res) } }) }, fail(err) { console.log(err) } }) }, qrR(data) { this.base64Img = data; console.log('base64',this.base64Img) }, getData() { let userinfo = uni.getStorageSync('userinfo') || {}; if (userinfo) { this.info = userinfo console.log('用户数据缓存',this.info) } else { this.$http(this.API.API_USER_CENTER).then(res => { this.info = res.data; console.log('用户数据接口',this.info) }) } }, createNewImg() { var that = this; var context = wx.createCanvasContext('mycanvas'); var path = "../../static/images/bill.png"; context.drawImage(path, 0, 0, 375, 667); //绘制二维码
context.drawImage(that.base64Img, 24, 530,120, 120); //绘制名字
// context.setFontSize(24);
// context.setFillStyle('#fff');
// context.setTextAlign('center');
// context.fillText(name, 34, 620);
context.stroke(); context.draw(); //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
setTimeout(function() { wx.canvasToTempFilePath({ canvasId: 'mycanvas', success: function(res) { that.imagePath = res.tempFilePath; if(that.imagePath) { that.canvasHidden = true that.maskHidden = true } console.log('海报生成成功') console.log(res) console.log('图片链接', that.imagePath) }, fail: function(res) { console.log(res); } }); }, 200); }, saveBill() { var that = this wx.saveImageToPhotosAlbum({ filePath: that.imagePath, success(res) { wx.showModal({ content: '图片已保存到相册，赶紧晒一下吧~', showCancel: false, confirmText: '好的', confirmColor: '#333', success: function(res) { if (res.confirm) { console.log('用户点击确定'); that.maskHidden = false } }, fail: function(res) { that.maskHidden = false } }) } }) }, formSubmit() { var that = this; wx.showToast({ title: '生成海报中...', icon: 'loading', duration: 1000 }); wx.hideToast() that.createNewImg() }, //海报结束
getGoodsDetail(){ let that = this; this.$http(this.API.API_GOODS_DETAIL, {goods_id: this.goods_id}).then(res => { this.skeletonLoading = false; this.goods_detail = res.data; this.is_collect = Boolean(res.data.user.is_collect); }).catch(err => { this.skeletonLoading = false; setTimeout(() => { that.$toBack(); }, 1000); }) }, // 切换商品收藏
switchCollect(){ let userInfo = uni.getStorageSync('userinfo') || {}; if(!userInfo.id || !userInfo.nickname || !userInfo.avatar){ this.$url('/pages/login/index?type=userinfo'); return; } this.$http(this.API.API_COLLECT_DEAL, {goods_id: this.goods_id}).then(res => { this.$msg(res.msg); 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, name: this.goods_detail.store.address }) }, // 跳转到确认下单页面
toAddOrder(){ let goods_id = this.goods_detail.id; let goods_specs_id = this.goods_detail.specs[0].id this.$url('/pages/order/confirm-order?goods_id='+ goods_id +'&goods_specs_id='+ goods_specs_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.name; let imageUrl = goods.share_cover || goods.cover; let path = '/pages/route/index?route=goods_detail&id='+ goods.id; return { title, path, imageUrl } } }</script>
<style> page{ background-color: #f5f5f5; overflow-x: hidden; }</style><style lang="scss" scoped="scoped"> .bill-position { position: absolute; top: 0; right: 0; } .cu-btn1 { position: relative; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0 30rpx; font-size: 28rpx; height: 64rpx; line-height: 1; text-align: center; text-decoration: none; overflow: visible; margin-left: initial; transform: translate(0upx, 0upx); margin-right: initial; background-color: rgba(0, 0, 0, 0.5); color: #FFFFFF; border-radius: 33rpx; } .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;
// 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: #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: 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; &:first-child{ padding-left: 0; } .icon-img{ height: 50rpx; width: 50rpx; } } .btn{ margin: 0; padding: 0; width: 208rpx; height: 80rpx; background-color: #FE9903; color: #FFFFFF; line-height: 80rpx; font-size: 32rpx; border-radius: 42rpx; } } //海报
.bgImg { display: block; width: 100%; height: 366rpx; } .mine { display: block; text-align: center; color: #333; margin-top: 44rpx; } .code { display: block; text-align: center; color: #333; font-size: 76rpx; font-weight: bold; margin-top: 30rpx; } .who { display: block; margin-top: 80rpx; font-size: 32rpx; color: #333; text-align: center; } .inputBox { text-align: center; margin-top: 44rpx; } .input { text-align: center; width: 440rpx; height: 88rpx; border-radius: 44rpx; background: #f5f5f5; font-size: 32rpx; display: inline-block; } .btn { width: 160rpx; height: 88rpx; border-radius: 44rpx; background: rgba(254, 153, 3, 1); color: #333; font-size: 32rpx; display: inline-block; line-height: 88rpx; margin-left: 40rpx; } button[class="btn"]::after { border: 0; } .tishi { display: block; text-align: center; color: #999; margin-top: 30rpx; } .shareText { display: block; text-align: center; color: #333; font-size: 28rpx; margin-top: 100rpx; } .imgBox { text-align: center; width: 100%; margin-top: 60rpx; padding-bottom: 120rpx; } .img { display: inline-block; width: 100%; height: 100%; } .m_l { margin-left: 180rpx; } .zfbtn { display: inline-block; width: 120rpx; height: 120rpx; border-radius: 50%; background: transparent; outline: none; border: 0; padding: 0; } button[class="zfbtn"]::after { border: 0; } button[class="zfbtn m_l"]::after { border: 0; } .imagePathBox { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; } .shengcheng { width: 80%; height: 80%; position: fixed; top: 50rpx; left: 50%; margin-left: -40%; z-index: 10; } .baocun { display: block; width: 80%; height: 80rpx; padding: 0; line-height: 80rpx; text-align: center; position: fixed; bottom: 50rpx; left: 10%; background: rgba(254, 153, 3, 1); color: #fff; font-size: 32rpx; border-radius: 44rpx; } button[class="baocun"]::after { border: 0; }</style>
|
