|
|
|
@ -3,9 +3,11 @@ |
|
|
|
<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 :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> |
|
|
|
<image mode="aspectFill" :src="item.cover" style="width: 100%; height: 100%;" |
|
|
|
@click="lookImg(index)"></image> |
|
|
|
</swiper-item> |
|
|
|
</swiper> |
|
|
|
<view class="bill-position" @tap='formSubmit()'> |
|
|
|
@ -28,7 +30,8 @@ |
|
|
|
</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 class="label-item" v-for="(item, index) in goods_detail.tags" :key="index">{{ item }} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- 地址信息 --> |
|
|
|
@ -36,9 +39,12 @@ |
|
|
|
<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> |
|
|
|
<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> |
|
|
|
@ -48,30 +54,36 @@ |
|
|
|
<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 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> |
|
|
|
<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'})"> |
|
|
|
<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')"> |
|
|
|
<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-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> |
|
|
|
@ -84,17 +96,11 @@ |
|
|
|
</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> |
|
|
|
<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> |
|
|
|
@ -107,7 +113,6 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import tkiQrcode from "tki-qrcode"; // 二维码生成器 |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
@ -128,12 +133,11 @@ |
|
|
|
}, |
|
|
|
showLogin: true, |
|
|
|
imagePath: '', |
|
|
|
userToken: '' |
|
|
|
userToken: '', |
|
|
|
wxCode: '', |
|
|
|
onceCode: '' |
|
|
|
} |
|
|
|
}, |
|
|
|
components: { |
|
|
|
tkiQrcode |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
isRight() { |
|
|
|
return function(val) { |
|
|
|
@ -144,53 +148,43 @@ |
|
|
|
onLoad(options) { |
|
|
|
this.goods_id = options.id; |
|
|
|
this.getGoodsDetail(); |
|
|
|
this.getData() |
|
|
|
this.getWxCode() |
|
|
|
}, |
|
|
|
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 |
|
|
|
} |
|
|
|
getWxCode() { |
|
|
|
uni.request({ |
|
|
|
url: 'http://dev-gxsky.com/api/salesman/qrcode', //仅为示例，并非真实接口地址。 |
|
|
|
data: { |
|
|
|
scene: 'route=goods&id=2&pt=2', |
|
|
|
page: 'pages/route/index', |
|
|
|
width: '2800' |
|
|
|
}, |
|
|
|
fail: function(res) { |
|
|
|
that.maskHidden = false |
|
|
|
console.log(res) |
|
|
|
method: 'POST', |
|
|
|
success: (res) => { |
|
|
|
this.wxCode = res.data.data.base_url |
|
|
|
if (this.wxCode) { |
|
|
|
this.getwxCodeImg() |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
fail(err) { |
|
|
|
console.log(err) |
|
|
|
} |
|
|
|
}) |
|
|
|
}); |
|
|
|
}, |
|
|
|
qrR(data) { |
|
|
|
this.base64Img = data; |
|
|
|
console.log('base64',this.base64Img) |
|
|
|
//海报开始 |
|
|
|
//保存头像 |
|
|
|
getwxCodeImg() { |
|
|
|
var imgSrc = this.wxCode; //base64编码 |
|
|
|
var save = wx.getFileSystemManager(); |
|
|
|
var number = Math.random(); |
|
|
|
save.writeFile({ |
|
|
|
filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.jpg', |
|
|
|
data: imgSrc, |
|
|
|
encoding: 'base64', |
|
|
|
success: res => { |
|
|
|
this.onceCode = wx.env.USER_DATA_PATH + '/pic' + number + '.jpg' |
|
|
|
}, |
|
|
|
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) |
|
|
|
}) |
|
|
|
fail: err => { |
|
|
|
console.log(err) |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
createNewImg() { |
|
|
|
var that = this; |
|
|
|
@ -198,7 +192,9 @@ |
|
|
|
var path = "../../static/images/bill.png"; |
|
|
|
context.drawImage(path, 0, 0, 375, 667); |
|
|
|
//绘制二维码 |
|
|
|
context.drawImage(that.base64Img, 24, 530,120, 120); |
|
|
|
var number = Math.random(); |
|
|
|
let wxcode = that.onceCode |
|
|
|
context.drawImage(wxcode, 24, 530, 120, 120); |
|
|
|
//绘制名字 |
|
|
|
// context.setFontSize(24); |
|
|
|
// context.setFillStyle('#fff'); |
|
|
|
@ -262,7 +258,9 @@ |
|
|
|
//海报结束 |
|
|
|
getGoodsDetail() { |
|
|
|
let that = this; |
|
|
|
this.$http(this.API.API_GOODS_DETAIL, {goods_id: this.goods_id}).then(res => { |
|
|
|
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); |
|
|
|
@ -280,7 +278,9 @@ |
|
|
|
this.$url('/pages/login/index?type=userinfo'); |
|
|
|
return; |
|
|
|
} |
|
|
|
this.$http(this.API.API_COLLECT_DEAL, {goods_id: this.goods_id}).then(res => { |
|
|
|
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); |
|
|
|
}) |
|
|
|
@ -328,11 +328,13 @@ |
|
|
|
return match; |
|
|
|
}); |
|
|
|
newRichText = newRichText.replace(/style="[^"]+"/gi, function(match, capture) { |
|
|
|
match = match.replace(/width:[^;]+;/gi, 'width:100%;').replace(/width:[^;]+;/gi, 'width:100%;'); |
|
|
|
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;"'); |
|
|
|
newRichText = newRichText.replace(/\<img/gi, |
|
|
|
'<img style="width:100%;height:auto;display:block;margin:10px 0;"'); |
|
|
|
return newRichText; |
|
|
|
} else { |
|
|
|
return null; |
|
|
|
@ -366,6 +368,7 @@ |
|
|
|
top: 0; |
|
|
|
right: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.cu-btn1 { |
|
|
|
position: relative; |
|
|
|
display: inline-flex; |
|
|
|
@ -386,6 +389,7 @@ |
|
|
|
color: #FFFFFF; |
|
|
|
border-radius: 33rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.swiper-box { |
|
|
|
width: 750rpx; |
|
|
|
height: 520rpx; |
|
|
|
@ -399,6 +403,7 @@ |
|
|
|
padding: 0 32rpx; |
|
|
|
padding-top: 20rpx; |
|
|
|
background-color: #FFFFFF; |
|
|
|
|
|
|
|
// .price>view:nth-of-type(1){ |
|
|
|
// color: #FF0000; |
|
|
|
// margin-right: 22rpx; |
|
|
|
@ -409,6 +414,7 @@ |
|
|
|
color: #777777; |
|
|
|
margin-right: 22rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.price>view:nth-of-type(2) { |
|
|
|
width: max-content; |
|
|
|
padding: 0 18rpx; |
|
|
|
@ -420,6 +426,7 @@ |
|
|
|
align-items: center; |
|
|
|
color: #FFFFFF; |
|
|
|
} |
|
|
|
|
|
|
|
.label-box { |
|
|
|
min-height: 130rpx; |
|
|
|
width: 100%; |
|
|
|
@ -427,6 +434,7 @@ |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
padding: 30rpx 0 10rpx 0; |
|
|
|
|
|
|
|
.label-item { |
|
|
|
width: 156rpx; |
|
|
|
height: 70rpx; |
|
|
|
@ -450,6 +458,7 @@ |
|
|
|
background-color: #FFFFFF; |
|
|
|
padding: 32rpx; |
|
|
|
margin-top: 20rpx; |
|
|
|
|
|
|
|
.shop-img { |
|
|
|
width: 60rpx; |
|
|
|
height: 60rpx; |
|
|
|
@ -464,6 +473,7 @@ |
|
|
|
padding: 32rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
margin-top: 20rpx; |
|
|
|
|
|
|
|
.goods-img { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
@ -488,6 +498,7 @@ |
|
|
|
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; |
|
|
|
@ -498,14 +509,17 @@ |
|
|
|
margin-right: 10rpx; |
|
|
|
padding: 0; |
|
|
|
width: 88rpx; |
|
|
|
|
|
|
|
&:first-child { |
|
|
|
padding-left: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.icon-img { |
|
|
|
height: 50rpx; |
|
|
|
width: 50rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.btn { |
|
|
|
margin: 0; |
|
|
|
padding: 0; |
|
|
|
|
