根据我们老总的业务需求，迫不得已，我做了这个canvas绘制的海报，感觉基本上可以解决现在海报所遇到的大部分问题了，献给那些没有做过的小伙伴们，话不多说，先上我做的效果
上代码
<style>
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1557815862055'); /* IE9 */
src: url('iconfont.eot?t=1557815862055#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
url('iconfont.woff?t=1557815862055') format('woff'),
url('iconfont.ttf?t=1557815862055') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1557815862055#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-shouye:before {
content: "\e61e";
}
.icon-dingdan:before {
content: "\e64e";
}
.icon-gouwuche:before {
content: "\e601";
}
.icon-guanbi:before {
content: "\e607";
}
.icon-dingdan1:before {
content: "\e64f";
}
.icon-guanbi1:before {
content: "\e61a";
}
.icon-next:before {
content: "\e61b";
}
.detail{
padding-bottom:100rpx;
font-family: "PingFangSC-Medium","PingFang SC","Microsoft YaHei","Helvetica","Tahoma","Arial","微软雅黑";
}
.detail .info{
flex: 1;
padding:50rpx 30rpx 0rpx 30rpx;
background-color:#fff;
margin-bottom: 20rpx;
}
.info-title,.info-price{
font-size:34rpx;
color: #333;
line-height: 44rpx;
text-align: justify;
}
.info-price{
margin:10rpx 0;
display: flex;
font-size:36rpx;
align-items: center;
}
.info-price .price{
flex: 1;
color: #c0293a;
margin-left:20rpx;
}
.info-price .now-price .price-style {
font-size:22rpx;
background:#ffbd0c;
border-radius:5rpx;
color:#000;
font-family:'PingFangSC Regular';
padding:0rpx 10rpx;
line-height:28rpx;
height:28rpx;
margin-left:10rpx;
}
.info-price .old-price{
font-size:24rpx;
color:#ccc;
text-decoration:line-through;
line-height: 40rpx;
font-weight: unset;
}
.info-addr{
font-size:24rpx;
color: #999999;
}
.weui-media-box{
padding:40rpx;
}
.weui-media-box__thumb{
border-radius: 50%;
width:80rpx;
height:80rpx;
margin-right:20rpx;
}
.weui-media-box__title.avator{
margin-bottom:6rpx;
font-weight:normal;
}
.weui-media-box__title{
font-size:28rpx;
margin-bottom:20rpx;
font-weight:bold;
}
.weui-media-box__desc{
font-size:28rpx;
line-height:1.4;
display: block;
}
.weui-media-box_text{
padding: 15rpx;
background-color: #fff;
margin-bottom: 20rpx;
}
.weui-media-box_text.rec{
padding-right:0;
}
.weui-media-box__desc .desc-img{
width:100%;
height:452rpx;
margin-top: 20rpx;
}
.recommend-list{
white-space: nowrap;
overflow-x: auto;
}
.recommend-list .rec-good{
display: inline-block;
width:240rpx;
margin-right:12rpx;
overflow: hidden;
}
.rec-img{
width:80%;
height:160rpx;
display: block;
margin: 40rpx auto;
}
.rec-title{
font-size:24rpx;
white-space: nowrap;
margin-top:20rpx;
}
.rec-info{
line-height:40rpx;
}
.rec-info .rec-price,.rec-info .rec-addr{
display: inline-block;
font-size:24rpx;
white-space: nowrap;
}
.rec-info .rec-price{
color: red;
margin-right:16rpx;
}
.rec-info .rec-addr{
padding-left:12rpx;
border-left:1px solid #999999;
color: #999999;
width:30%;
line-height:24rpx;
}
.detail-footer{
position: fixed;
left:0;
bottom:0;
overflow: hidden;
height:100rpx;
background-color:#FFFFFF;
}
.detail-footer .footer-left{
float: left;
line-height:32rpx;
padding-top:4rpx;
}
.detail-footer{
/*border-top:1px solid #d9d9d9;*/
width:100%;
}
.footer-right{
float: right;
display: inline-block;
}
.footer-right button{
background-color:red;
color:#fff;
text-align:center;
border:none;
font-size:28rpx;
border-radius:0;
width:200rpx;
height:100rpx;
line-height:100rpx;
display:inline-block;
font-size:28rpx;
}
.footer-right .go-cart{
background-color:#ffb03f
}
.detail-footer .footer-left .icon-info,
.info-price .icon-info{
padding:0 6rpx;
display:inline-block;
text-align:center;
}
.detail-footer .footer-left .icon-info image,
.info-price .icon-info image{
width:40rpx;
height:40rpx;
}
.detail-footer .footer-left .icon-info text,
.info-price .icon-info text{
font-size:24rpx;
display: block;
}
.info-price .icon-info text{
font-weight: normal;
}
.info-price .icon-info view{
width:40rpx;
height:40rpx;
}
.action-sheet{
display: block;
width:100%;
height:100%;
position: fixed;
transition:all .5s linear;
background-color: rgba(0,0,0,.6);
left:0;
bottom:-2000rpx;
}
.action-sheet-content{
position: absolute;
left:0;
bottom:0;
background-color: #fff;
width:100%;
}
.pop-good-head{
position: relative;
height: 162rpx;
border-bottom: 2rpx solid #ccc;
color:#c0293a;
}
.pop-good-img{
width:160rpx;
height:160rpx;
position: absolute;
top:-40rpx;
left: 33rpx;
}
.pop-good-price{
font-size: 30rpx;
line-height: 42rpx;
color: #c0293a;
height: 42rpx;
padding-top: 20rpx;
padding-left: 218rpx;
}
.pop-good-close{
position: absolute;
top: 30rpx;
right: 30rpx;
font-size: 32rpx;
line-height: 32rpx;
color: #D1D1D1;
}
.pop-good-content{
padding:20rpx;
}
.good-label{
font-size:24rpx;
margin-bottom:20rpx;
}
.label-sort{
display:inline-block;
height:20rpx;
line-height:20rpx;
text-align:center;
margin-right:20rpx;
margin-bottom:20rpx;
font-size:24rpx;
background-color:#eee;
padding:12rpx 40rpx;
}
.pop-good-footer{
padding:22rpx 30rpx;
font-size: 30rpx;
color: #333333;
line-height: 1;
height: 30rpx;
border-bottom: 2rpx solid #ECECEC;
/* overflow: hidden; */
position: relative;
margin-bottom: 50rpx;
align-items:center;
display:flex;
justify-content:space-between;
}
.pop-good-buynum{
float: left;
font-size:24rpx;
}
.good-oper{
display: inline-block;
float: right;
overflow: hidden;
}
.good-oper text{
float:left;
height:44rpx;
line-height:44rpx;
width:44rpx;
font-size:28rpx;
background-color:#eee;
text-align:center;
color:#666;
}
.good-oper .oper-num{
width:100rpx;
margin:0 6rpx;
}
.pop-good-confirm{
width:100%;
height:80rpx;
line-height:80rpx;
font-size:24rpx;
text-align: center;
background-color: red;
color: #fff;
}
.all-handle{
display: flex;
align-items: center;
}
.all-handle text{
flex: 1;
text-align: center;
}
.all-handle .cart{
background-color:#ffcccc;
color:#e54341;
}
.all-handle .buy{
background-color: #f23030;
color: #fff;
}
.action-sheet-show{
display: block;
width:100%;
height:100%;
position: fixed;
transition:all .5s linear;
background-color: rgba(0,0,0,.6);
left:0;
bottom:0rpx;
z-index: 1000000000;
}
.icon-info button{
height: 52rpx;
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
padding-left:14px;
padding-right:14px;
box-sizing:border-box;
font-size:18px;
text-align:center;
text-decoration:none;
line-height:2.0;
border-radius:5px;
-webkit-tap-highlight-color:transparent;
overflow:hidden;
color:#000000;
background: #fff;
}
button::after{
border: none;
content:"";
color:none;
}
.button-hover{
color:none;
background-color:#fff;
}
.icon-info button image{
width:42rpx;
height: 42rpx;
}
.navigator-hover{
background: #fff;
opacity: 1;
}
.weui-media-box:before{
border-top: none;
}
.footer-right .soldout{
background-color: #ccc;
}
.footer-right .soldout.go-cart{
border-right:1px solid #bbb;
}
.info-summary{
font-size:12px;
color: #999999;
padding-bottom: 30rpx;
text-align: justify;
}
.weui-loadmore_line {
border-top:1px solid #E5E5E5;
margin-top:2em;
margin-bottom: 1em;
}
.weui-loadmore__tips_in-line {
width: 190rpx;
text-align: center;
font-size: 32rpx;
font-weight: 100;
color: #232222;
}
.detail .wepy_navigator.weui-cell.weui-cell_access{
background-color: #fff;
padding: 0 30rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.detail .weui-cell:before{
border-top: none;
}
.detail .weui-cell__bd{
font-size: 30rpx;
color: #333333;
font-weight: 100;
height: 90rpx;
line-height: 90rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.summary{
padding-left: 33rpx;
padding-right: 33rpx;
margin-top:30rpx;
overflow: hidden;
border-bottom: 1px solid #ECECEC;
padding-bottom: 53rpx;
font-size: 26rpx;
color: #333333;
}
.service-title{
text-align: center;
font-size: 32rpx;
padding: 24rpx 0;
border: 1px solid #ddd;
font-weight: bold;
}
.service-content{
padding: 20rpx;
font-size: 24rpx;
}
.service-name{
font-size: 28rpx;
font-weight: bold;
margin-bottom: 20rpx;
}
.service-btn{
background-color: #f23030;
color: #fff;
padding: 24rpx 0;
text-align: center;
}
.no-service{
padding: 20rpx;
font-size: 24rpx;
text-align: center;
}
/* 轮播图按钮 */
.dots{
width:116rpx;
height:30rpx;
background:#fff;
position:absolute;
bottom:20rpx;
font-size: 20rpx;
line-height: 30rpx;
text-align: center;
right: 30rpx;
border-radius: 10rpx;
}
/* 海报样式 */
.shopcode{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0, 0, 0,0.7);
/* background-color: white; */
transition: all 2s ease;
z-index:99999;
box-sizing:border-box;
}
.shopcode .close{
width:50rpx;
height:50rpx;
position:fixed;
z-index:10;
top:50rpx;
right:50rpx;
border-radius: 50%;
background: #fff;
line-height: 44rpx;
text-align: center;
}
.shopcode .close image{
width:30rpx;
height:30rpx;
padding-top: 10rpx;
}
.shopcode .shopbtn{
background: #e64240;
bottom:90px;
width:85%;
left:8%;
height: 80rpx;
border-radius:80rpx;
margin: 0 auto;
color:#fff;
line-height: 80rpx;
font-size:28rpx;
}
.shopContain{
width:672rpx;
height:900rpx;
margin: 37rpx auto;
border-radius:20rpx;
background:white;
padding-bottom: 40rpx;
}
.shopContain .poster-img{
display: block;
width:632rpx;
height: 532rpx;
margin: 20rpx auto;
padding-top: 20rpx;
}
.shopContain .shoptitle{
padding:20rpx;
font-size:26rpx;
}
.shopContain .context{
display: flex;
padding-left: 20rpx;
padding-right: 20rpx;
align-items: center;
}
.shopContain .left{
flex: 1;
}
.shopContain .left .people{
display: flex;
align-items: center;
font-size:26rpx;
color:#666;
}
.shopContain .left .people image{
width:76rpx;
height: 76rpx;
}
.shopContain .left .people text{
margin-left:20rpx;
}
.shopContain .left .price{
font-size:22rpx;
color:#888888;
}
.shopContain .left .price .now-price{
}
.shopContain .left .price .now-price text{
color:#e64240;
font-size:46rpx;
}
.shopContain .left .price .now-price .rmb{
color:#e64240;
font-size:26rpx;
}
.shopContain .left .price .old-price{
}
.shopContain .left .price .old-price text{
text-decoration:line-through;
}
.shopContain .right{
width:160rpx;
}
.shopContain .right image{
width:153rpx;
height: 164rpx;
}
/* 海报转发展示 */
.show-poster{
width:750rpx;
position: fixed;
top:0;
height: 100vh;
transition: all linear 1;
background: rgba(0,0,0,0.7);
}
.show-poster .top{
position: absolute;
width:750rpx;
display: flex;
height: 264rpx;
bottom: 100rpx;
background: #f7f5f5;
}
.show-poster .top .item{
width:50%;
}
.show-poster .top .item .share-btn{
width:128rpx;
margin: 0 auto;
padding: 0;
line-height: 1;
background: #f7f5f5;
}
.show-poster .top .item .img{
width:128rpx;
height: 128rpx;
margin: 0 auto;
margin-top:48rpx;
margin-bottom:20rpx;
background: #fff;
border-radius:12rpx;
}
.show-poster .top .item .img image{
display: block;
margin: 0 auto;
padding-top: 26rpx;
width:74rpx;
height: 74rpx;
}
.show-poster .top .item text{
text-align: center;
font-size: 22rpx;
color:#888888;
display: block;
margin: 0 auto;
}
.show-poster .bottom{
width:750rpx;
height: 100rpx;
font-size: 28rpx;
position: absolute;
bottom: 0;
color:#444;
background: #fff;
line-height: 100rpx;
text-align: center;
}
</style>
<template>
<view class="page" wx:if="{{pageShow == true}}">
<view style="position:relative">
<!--<slide :imgUrls.sync="pictureArray"></slide>-->
<swiper
class="swiper-box"
bindchange="swiperChange"
style="height:{{imgBoxSize}}rpx;"
indicator-color="#ffffff"
indicator-active-color="#FD381E"
autoplay="{{autoplay}}"
interval="{{interval}}"
duration="{{duration}}"
current='{{current}}'
>
<repeat
for="{{pictureArray}}"
index="idx"
item="item"
>
<swiper-item @change="swiperChange">
<image
src="{{item}}"
class="slide-image"
width="100%"
mode="widthFix"
bindload="imageLoad"
style="height:{{imgBoxSize}}rpx;width: 100%;"
/>
</swiper-item>
</repeat>
</swiper>
<view class="dots">
{{current+1}} / {{pictureArray.length}}
</view>
</view>
<view class="detail">
<view class="info">
<view class="info-title">{{goodDetail.title}}</view>
<view class="info-price">
<view class="price">
<view class="now-price"><text>{{goodDetail.price}}元</text><text class='price-style'>{{goodDetail.cate_name}}</text></view>
<view class="old-price">200.00</view>
</view>
<!-- 商品海报 -->
<view class="icon-info">
<button @tap="collection">
<image wx:if="{{iscollection == false}}" src="../../style/img/shoucang.png"></image>
<image wx:else src="../../style/img/select-shoucang.png"></image>
</button>
<text>收藏</text>
</view>
<view class="icon-info">
<button @tap="gomodal">
<image src="/style/images/zhuanfa.png"></image>
</button>
<text>分享</text>
</view>
</view>
<view class="info-summary">{{goodDetail.summary}}</view>
</view>
<view class="wepy_navigator weui-cell weui-cell_access" @tap="showPop('all')" style="margin-bottom:0;border-bottom:1px solid #eee">
<view class="weui-cell__bd">已选：“{{selectNum}}”件</view>
<view class="weui-cell__ft weui-cell__ft_in-access"></view>
</view>
<view class="wepy_navigator weui-cell weui-cell_access" @tap="showPop('service')" style="margin-bottom:20rpx;">
<view class="weui-cell__bd">服务</view>
<view class="weui-cell__ft weui-cell__ft_in-access"></view>
</view>
<view class="weui-media-box weui-media-box_text">
<view class="weui-loadmore weui-loadmore_line">
<view class="weui-loadmore__tips weui-loadmore__tips_in-line">商品详情</view>
</view>
<view class="weui-media-box__desc">
<htmlParser :parserContent.sync="goodDetailContent"/>
</view>
</view>
</view>
<view class="detail-footer">
<view class="footer-left">
<navigator url='/pages/index' class="icon-info" open-type="reLaunch" >
<button>
<!-- <view class="iconfont icon-shouye"></view> -->
<image src='/style/images/shangchenggaikuang.png' class=""></image>
</button>
<text>首页</text>
</navigator>
<navigator url="/pages/shop/order-list" class="icon-info">
<button>
<image src='/style/images/wodewenzhang.png' class=""></image>
</button>
<text>订单</text>
</navigator>
<navigator url="/pages/shop/shopcart" class="icon-info">
<button>
<image src='/style/images/gouwuche.png' class=""></image>
</button>
<text>购物车</text>
</navigator>
</view>
<view class="footer-right">
<button class="{{goodDetail.stock == 0 ? 'soldout go-cart' : 'go-cart'}}" @tap="showPop('cart')">加入购物车</button>
<button class="{{goodDetail.stock == 0 ? 'soldout' : ''}}" @tap="buynow">{{goodDetail.stock == 0 ? '已售罄' :
'立即购买'}}
</button>
</view>
</view>
<view class="{{popIsShow ? 'action-sheet-show' : 'action-sheet'}}"
@tap="cancelPop">
<view class="action-sheet-content" @tap.stop="otherShowPop">
<view wx:if="{{!showService}}">
<view class="pop-good-head">
<image wx:if="{{goodDetail.cover!=''}}" class="pop-good-img"
src="{{commonInfo.imgUrl + goodDetail.cover}}?imageView2/1/w/100/h/100"></image>
<text class="pop-good-price">￥{{goodDetail.price}}</text>
<text class="pop-good-close iconfont icon-guanbi" @tap.stop="cancelPop">
</text>
</view>
<view class="summary">{{goodDetail.summary}}</view>
<view class="pop-good-footer">
<text class="pop-good-buynum">购买数量</text>
<view class="good-oper">
<text class="oper" @tap="reduceNum">-</text>
<text class="oper-num">{{selectNum}}</text>
<text class="oper" @tap="addNum">+</text>
</view>
</view>
<view>
<view wx:if="{{allHandle}}" class="pop-good-confirm all-handle">
<text @tap="goCart" class="cart">加入购物车</text>
<text @tap="buynow" class="buy">立即购买</text>
</view>
<view wx:if="{{!allHandle}}" class="pop-good-confirm" @tap="goCart">确认</view>
</view>
</view>
<view wx:if="{{showService}}">
<view class="service-title">服务</view>
<view class="service-content" wx:if="{{goodDetail.format_service && goodDetail.format_service.length}}">
<view class="service-item" wx:for="{{goodDetail.format_service}}">
<view class="service-name">{{item.service_title}}</view>
<view class="service-detail">{{item.service_content}}</view>
</view>
</view>
<view class="no-service" wx:if="{{!goodDetail.format_service || !goodDetail.format_service.length}}">暂无服务
</view>
<view class="service-btn" @tap.stop="cancelPop">确定</view>
</view>
</view>
</view>
<!-- 分享海报以及转发 -->
<view class="show-poster" wx:if='{{showModal}}' bindtap="leavemodal">
<view class="top" catchtap='openModel'>
<view class="item">
<button class="share-btn" open-type="share">
<view class="img">
<image src='/style/images/poster(1).png'></image>
</view>
<text>微信好友</text>
</button>
</view>
<view class="item" catchtap='showPoster'>
<view class="img">
<image src='/style/images/poster(2).png'></image>
</view>
<text>生成专属海报</text>
</view>
</view>
<view class="bottom" bindtap="leavemodal">
取消
</view>
</view>
<!-- 分享海报 -->
<view class="shopcode" wx:if='{{show_poster}}' catchtap="close_poster">
<!-- 关闭按钮 -->
<!-- <view class="close" catchtap="close_poster" style="position:fixed;top:35px;right:25px;">
<image src="/style/images/close.png" />
</view> -->
<canvas canvas-id="mycanvas" style="width:336px;height:440px;position:fixed;top:16px;left:50%;margin-left:-168px"></canvas>
<button class="shopbtn" style="position:fixed;" catchtap='baocun'>保存到本地</button>
</view>
<!-- 获取用户手机号码 遮罩层 start-->
<!-- login_status==1 已登陆 绑定手机号 -1 已登陆 未绑定手机号 0 未登陆 未绑定手机号 -->
<block wx:if='{{showPhonebind}}'>
<BindPhoneTop></BindPhoneTop>
</block>
</view>
</template>
<script>
import wepy from 'wepy'
import app from '@/utils/app'
import model from '@/model/index'
// import Slide from '@/components/common/slide2' // alias example
import TogglePanel from '@/components/common/togglePanel' // alias example
import htmlParser from '@/components/htmlParser'
import BindPhoneTop from '@/components/bindPhoneTop'
export default class GoodDetail extends wepy.page {
components = {
// slide: Slide,
toggle: TogglePanel,
htmlParser: htmlParser,
BindPhoneTop:BindPhoneTop
}
data = {
showModal: false,
pageShow: false,
iscollection: false,
avator: 'http://img3./it/u=363505133,2085086308&fm=27&gp=0.jpg',
isShow: false,
popIsShow: false,
goodDetail: {},
goodDetailContent: '',
selectNum: 1,
picture: [],
pictureArray: [],
commonInfo: '',
userInfo: '',
shopInfo: '',
detailGoodId: '',
allHandle: false,
showService: false,
// swiper
indicatorDots: true, // 开启小圆点
autoplay: true, // 开启自动轮播
interval: 2000, // 轮播间隔
duration: 1000, // 动画时长
swiperCurrent: 0,
// 所有图片的高度
imgheights: [],
// 图片宽度
imgwidth: 750,
// 默认
current: 0,
imgBoxSize: 0,
showPhonebind:false,
login_status:1,
show_poster:false,
imagePath:'',//海报路径
}
methods = {
// 展示海报
async showPoster(){
const params = {
width:430,
detailGoodId:this.detailGoodId,
userId:wepy.getStorageSync('shopInfo').weid
}
var detail = await model.init('wemall.appcode', params)
var path1 = ''
var path2= ''
var that=this
wx.showLoading()
// wx.downloadFile({
// url: this.pictureArray[0],
// success: function (res) {
// path1=res.tempFilePath
// wx.downloadFile({
// url: wx.getStorageSync('commonInfo').imgUrl+wx.getStorageSync('userInfo').user_info.avatar,
// success: function (ress) {
// path2=ress.tempFilePath
// var path3=wx.getStorageSync('apiDomain')+'api'+detail.data
// wx.downloadFile({
// url: path3,
// success: function (resss) {
// that.createNewImg(path1,path2,resss.tempFilePath)
// that.showModal=false
// that.show_poster=true
// wx.hideLoading()
// },fail:function(fres){
// }
// })
// },fail:function(fres){
// }
// })
// },fail:function(fres){
// }
// })
wx.getImageInfo({ //保存网络图片
src: this.pictureArray[0],
success: (res) =>{
path1=res.path
wx.getImageInfo({ //保存网络图片
src: wx.getStorageSync('commonInfo').imgUrl+wx.getStorageSync('userInfo').user_info.avatar,
success: (ress) =>{
path2=ress.path
var path3=wx.getStorageSync('apiDomain')+'api'+detail.data
console.log(path3,'123456789')
wx.getImageInfo({ //保存网络图片
src: path3,
success: (resss) =>{
console.log(resss,'获取数据')
that.createNewImg(path1,path2,resss.path)
that.showModal=false
that.show_poster=true
wx.hideLoading()
}
})
}
})
}
})
},
// 关闭海报
close_poster(){
this.show_poster=false
},
async collection() {
if(this.login_status==-1){
this.showPhonebind=true
return false
}
let iscollection
if (!this.iscollection) {
iscollection = await model.init('wemall.collection', {
'goods_id': this.detailGoodId,
'mall_id': this.shopInfo.mallid
})
} else {
iscollection = await model.init('wemall.cancelCollection', {'apiUrlSuffix': this.iscollection})
}
wx.showLoading({title:'加载中'})
if (iscollection.code === 200) {
wx.hideLoading()
this.iscollection = (iscollection.data !== true) ? iscollection.data : false
this.$apply()
wx.showModal({
title: '提示',
content: (this.iscollection) ? '收藏成功' : '取消成功',
showCancel: false
})
}
},
showContent() {
if(this.login_status==-1){
this.showPhonebind=true
return false
}
this.isShow = !this.isShow
},
otherShowPop() {
if(this.login_status==-1){
this.showPhonebind=true
return false
}
this.popIsShow = true
},
showPop(param) {
if(this.login_status==-1){
this.showPhonebind=true
return false
}
if (param !== 'service' && this.goodDetail.stock === 0) {
wx.showModal({
title: '提示',
content: '该商品已售空',
showCancel: false
})
return
}
this.showService = (param === 'service')
this.allHandle = (param === 'all')
this.popIsShow = true
},
buynow() {
if(this.login_status==-1){
this.showPhonebind=true
return false
}
if (this.goodDetail.stock === 0) {
return
}
wx.navigateTo({
url: '/pages/shop/confirm-order?orderGoodId=' + this.goodDetail.weid + '&num=' + this.selectNum
})
},
cancelPop() {
if(this.login_status==-1){
this.showPhonebind=true
return false
}
this.popIsShow = false
},
reduceNum() {
if(this.login_status==-1){
this.showPhonebind=true
return false
}
this.selectNum--
if (this.selectNum < 1) {
this.selectNum = 1
wx.showModal({
title: '提示',
content: '数量选择不能小于1',
showCancel: false
})
}
},
addNum() {
if(this.login_status==-1){
this.showPhonebind=true
return false
}
if (this.goodDetail.stock === 0) {
wx.showModal({
title: '提示',
content: '该商品已售空',
showCancel: false
})
return
}
this.selectNum++
if (this.selectNum > this.goodDetail.stock) {
this.selectNum = this.goodDetail.stock
wx.showModal({
title: '提示',
content: '数量选择不能大于库存数',
showCancel: false
})
}
},
async goCart() {
if(this.login_status==-1){
this.showPhonebind=true
return false
}
if (this.goodDetail.stock === 0) {
return
}
var param = {
goods_id: this.goodDetail.weid,
goods_num: this.selectNum
}
var res = await model.init('wemall.add_good_cart', param)
if (res && res.code === 200) {
wx.showToast({
title: '加入购物车成功',
icon: 'success'
})
}else{
wx.showToast({
title: res.message,
icon: 'success'
})
}
this.popIsShow = false
this.$apply()
}
}
// canvas 绘制海报
async createNewImg(path1,path2,path3){
var that=this
var goodDetail=this.goodDetail
var context = wx.createCanvasContext('mycanvas')
context.clearRect(0, 0, 336, 440)
context.setFillStyle("#fff")
context.fillRect(0, 0, 336, 440)
context.drawImage(path1, 9, 10, 318, 267)
context.setFillStyle('#444444')
context.setFontSize(14)
var j=0
var str=goodDetail.title[0]
if(goodDetail.title.length<24){
context.fillText(goodDetail.title, 9, j*20+306,318)
}else {
for(var i =1;i<=goodDetail.title.length;i++){
str+=goodDetail.title[i]
if(i%24==0&&j<2){
if(j==1){
str+='...'
}
context.fillText(str, 9, j*20+306,318)
str=''
j++
}
}
}
context.drawImage(path2, 9, 338, 38, 38)
context.setFontSize(13)
context.setFillStyle('#444444')
context.fillText(wx.getStorageSync('userInfo').user_info.real_name, 60,362,60)
context.setFontSize(12)
context.setFillStyle('#888888')
context.fillText('现价：', 12, 398)
context.setFillStyle('#E64240')
context.setFontSize(12)
context.fillText('￥', 60, 398)
context.setFontSize(23)
context.fillText(goodDetail.price, 75, 398)
context.setFontSize(12)
context.setFillStyle('#888888')
context.fillText('原价：', 12, 416)
context.beginPath()
context.moveTo(74, 412)
context.lineTo(100, 412)
context.stroke()
context.fillText('￥', 60, 416)
context.fillText(goodDetail.price, 75, 416)
context.drawImage(path3, 240, 337, 80, 80)
context.setFontSize(10)
context.setFillStyle('#ccc')
context.fillText('长按查看商品', 245, 426)
context.draw()
this.$apply()
setTimeout(function () {
wx.canvasToTempFilePath({
canvasId: 'mycanvas',
success: function (res) {
console.log(res,'res canvas')
var tempFilePath = res.tempFilePath;
that.imagePath=tempFilePath
},
fail: function (res) {
console.log(res);
}
});
}, 10000)
}
//点击保存到相册
baocun () {
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.setData({
maskHidden: false
})
}
}, fail: function (res) {
console.log(11111)
}
})
}
})
}
// 二维码
async gomodal(){
this.showModal=true
if(this.login_status==-1){
this.showPhonebind=true
return false
}
}
// 打开分享
openModel(){
this.showModal=true
}
// 关闭分享
leavemodal(){
this.showModal=false
}
// 分享
onShareAppMessage(res) {
if (res.from === 'button') {
// 来自页面内转发按钮
console.log(res.target);
}
// return {
// title: this.title,
// path: '/pages/article/detail?id=' + this.detailId + '&title=' + this.title
// };
}
swiperChange(e) {
this.swiperCurrent = e.detail.current
this.current = e.detail.current
this.imgBoxSize = this.imgheights[e.detail.current]
this.$apply()
}
imageLoad(e) {
// 获取图片真实宽度
var imgwidth = e.detail.width
var imgheight = e.detail.height
// 宽高比
var ratio = imgwidth / imgheight
// 计算的高度值
var viewHeight = 750 / ratio
imgheight = Math.floor(viewHeight)
// 把每一张图片的高度记录到数组里
this.imgheights.push(imgheight)
// 取出图片数组中最高的一个值
this.imgBoxSize = this.imgheights[0]
this.$apply()
}
isJSON(str) {
if (typeof str === 'string') {
try {
var obj = JSON.parse(str)
if (typeof obj === 'object' && obj) {
return true
} else {
return false
}
} catch (e) {
return false
}
}
}
async onShow(){
}
async onLoad(params) {
console.log(params);
this.imgheights = []
this.shopInfo = wepy.getStorageSync('shopInfo')
monInfo = wepy.getStorageSync('commonInfo')
this.userInfo = wepy.getStorageSync('userInfo')
this.detailGoodId = params.detailGoodId
// 同步模式下请求接口方式
// const res = await model.init('wemall.select_sell_list');
// 获取商品详情
var detail = await model.init('wemall.get_good_detail', {'apiUrlSuffix': this.detailGoodId})
this.login_status=detail
// 获取用户是否收藏
if (app.empty(this.userInfo.user_info) !== false) {
const iscollection = await model.init('wemall.iscollection', {'apiUrlSuffix': this.detailGoodId})
this.iscollection = (iscollection.data !== 'no') ? iscollection.data : false
}
if (detail.data.service) {
detail.data['format_service'] = JSON.parse(detail.data.service)
}
this.goodDetail = detail.data
// wepy.setNavigationBarTitle({
// title: this.goodDetail.title// 页面标题为路由参数
// })
if (this.goodDetail.picture || this.goodDetail.cover) {
var img = this.goodDetail.picture || this.goodDetail.cover
this.picture = img.split(',')
this.pictureArray = this.picture.map((res) => {
if (!res) return ''
return monInfo.imgUrl + res
})
}
this.goodDetailContent = this.goodDetail.content
this.$apply()
this.$invoke('htmlParser', 'htmlParserNotice')
}
onReady() {
this.pageShow = true
this.$apply()
// 页面渲染完成
};
onShareAppMessage() {
return {
title: this.goodDetail.title,
path: '/pages/shop/gooddetail?detailGoodId=' + this.detailGoodId
}
}
}
</script>
还有一个比较特殊的问题，那就是如果是网上图片，需要给微信公众号上添加对应的图片域名，不然线上的图片是无法保存到本地的
希望能够对你的海报有帮助吧。。。
