huangshijie/hios-miniprogram
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

A，增加生成分享图的功能

Browse Source 
U，轮播图不自动滑动
This commit is contained in:
shengliang 2019-12-14 19:16:53 +08:00
parent d5c1d58f3d
commit 366901caea
17 changed files with 824 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app.json
View File

@ -4,6 +4,7 @@
"pages/app-auth/index",
"pages/category/index",
"pages/cart/cart",
"pages/share/index",
"pages/search/search",
"pages/order-check/index",
"pages/goods/goods",

330
components/canvasdrawer/canvasdrawer.js Normal file
View File

@ -0,0 +1,330 @@
/* global Component wx */
Component({
properties: {
painting: {
type: Object,
value: {
view: []
},
observer(newVal, oldVal) {
if (!this.data.isPainting) {
if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
if (newVal && newVal.width && newVal.height) {
this.setData({
showCanvas: true,
isPainting: true
})
this.readyPigment()
}
} else {
if (newVal && newVal.mode !== 'same') {
this.triggerEvent('getImage', {
errMsg: 'canvasdrawer:samme params'
})
}
}
}
}
}
},
data: {
showCanvas: false,
width: 100,
height: 100,
tempFileList: [],
isPainting: false
},
ctx: null,
cache: {},
ready() {
console.log('ready');
wx.removeStorageSync('canvasdrawer_pic_cache')
this.cache = wx.getStorageSync('canvasdrawer_pic_cache') || {}
this.ctx = wx.createCanvasContext('canvasdrawer', this)
},
methods: {
readyPigment() {
const {
width,
height,
views
} = this.data.painting
this.setData({
width,
height
})
const inter = setInterval(() => {
if (this.ctx) {
clearInterval(inter)
this.ctx.clearActions()
this.ctx.save()
this.getImagesInfo(views)
}
}, 100)
},
getImagesInfo(views) {
const imageList = []
for (let i = 0; i < views.length; i++) {
if (views[i].type === 'image') {
imageList.push(this.getImageInfo(views[i].url))
}
}
const loadTask = []
for (let i = 0; i < Math.ceil(imageList.length / 8); i++) {
loadTask.push(new Promise((resolve, reject) => {
Promise.all(imageList.splice(i * 8, 8)).then(res => {
resolve(res)
}).catch(res => {
reject(res)
})
}))
}
Promise.all(loadTask).then(res => {
let tempFileList = []
for (let i = 0; i < res.length; i++) {
tempFileList = tempFileList.concat(res[i])
}
this.setData({
tempFileList
})
this.startPainting()
})
},
startPainting() {
console.log('startPainting');
const {
tempFileList,
painting: {
views
}
} = this.data
console.log(tempFileList)
for (let i = 0, imageIndex = 0; i < views.length; i++) {
// console.log(views[i]);
// console.log(views[i].type);
if (views[i].type === 'image') {
this.drawImage({
...views[i],
url: tempFileList[imageIndex]
})
imageIndex++
} else if (views[i].type === 'text') {
if (!this.ctx.measureText) {
wx.showModal({
title: '提示',
content: '当前微信版本过低，无法使用 measureText 功能，请升级到最新微信版本后重试。'
})
this.triggerEvent('getImage', {
errMsg: 'canvasdrawer:version too low'
})
return
} else {
this.drawText(views[i])
}
} else if (views[i].type === 'rect') {
this.drawRect(views[i])
}
}
console.log('????????为什么');
this.ctx.draw(false, () => {
console.log(this.cache);
wx.setStorageSync('canvasdrawer_pic_cache', this.cache)
const system = wx.getSystemInfoSync().system
if (/ios/i.test(system)) {
this.saveImageToLocal()
} else {
// 延迟保存图片，解决安卓生成图片错位bug。
setTimeout(() => {
this.saveImageToLocal()
}, 800)
}
})
},
drawImage(params) {
console.log('drawImage');
this.ctx.save()
const {
url,
top = 0,
left = 0,
width = 0,
height = 0,
borderRadius = 0,
deg = 0
} = params
// if (borderRadius) {
// this.ctx.beginPath()
// this.ctx.arc(left + borderRadius, top + borderRadius, borderRadius, 0, 2 * Math.PI)
// this.ctx.clip()
// this.ctx.drawImage(url, left, top, width, height)
// } else {
if (deg !== 0) {
this.ctx.translate(left + width / 2, top + height / 2)
this.ctx.rotate(deg * Math.PI / 180)
this.ctx.drawImage(url, -width / 2, -height / 2, width, height)
} else {
this.ctx.drawImage(url, left, top, width, height)
}
// }
this.ctx.restore()
},
drawText(params) {
console.log('drawText');
this.ctx.save()
// console.log('drawText');
const {
MaxLineNumber = 2,
breakWord = false,
color = 'black',
content = '',
fontSize = 16,
top = 0,
left = 0,
lineHeight = 20,
textAlign = 'left',
width,
bolder = false,
textDecoration = 'none'
} = params
this.ctx.beginPath()
this.ctx.setTextBaseline('top')
this.ctx.setTextAlign(textAlign)
this.ctx.setFillStyle(color)
this.ctx.setFontSize(fontSize)
if (!breakWord) {
this.ctx.fillText(content, left, top)
this.drawTextLine(left, top, textDecoration, color, fontSize, content)
} else {
let fillText = ''
let fillTop = top
let lineNum = 1
for (let i = 0; i < content.length; i++) {
fillText += [content[i]]
if (this.ctx.measureText(fillText).width > width) {
if (lineNum === MaxLineNumber) {
if (i !== content.length) {
fillText = fillText.substring(0, fillText.length - 1) + '...'
this.ctx.fillText(fillText, left, fillTop)
this.drawTextLine(left, fillTop, textDecoration, color, fontSize, fillText)
fillText = ''
break
}
}
this.ctx.fillText(fillText, left, fillTop)
this.drawTextLine(left, fillTop, textDecoration, color, fontSize, fillText)
fillText = ''
fillTop += lineHeight
lineNum++
}
}
this.ctx.fillText(fillText, left, fillTop)
this.drawTextLine(left, fillTop, textDecoration, color, fontSize, fillText)
}
this.ctx.restore()
if (bolder) {
this.drawText({
...params,
left: left + 0.3,
top: top + 0.3,
bolder: false,
textDecoration: 'none'
})
}
},
drawTextLine(left, top, textDecoration, color, fontSize, content) {
if (textDecoration === 'underline') {
this.drawRect({
background: color,
top: top + fontSize * 1.2,
left: left - 1,
width: this.ctx.measureText(content).width + 3,
height: 1
})
} else if (textDecoration === 'line-through') {
this.drawRect({
background: color,
top: top + fontSize * 0.6,
left: left - 1,
width: this.ctx.measureText(content).width + 3,
height: 1
})
}
},
drawRect(params) {
this.ctx.save()
const {
background,
top = 0,
left = 0,
width = 0,
height = 0
} = params
this.ctx.setFillStyle(background)
this.ctx.fillRect(left, top, width, height)
this.ctx.restore()
},
getImageInfo(url) {
return new Promise((resolve, reject) => {
if (this.cache[url]) {
resolve(this.cache[url])
} else {
const objExp = new RegExp(/^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/)
if (objExp.test(url)) {
wx.getImageInfo({
src: url,
complete: res => {
// console.log(res.errMsg);
if (res.errMsg === 'getImageInfo:ok') {
this.cache[url] = res.path
resolve(res.path)
} else {
this.triggerEvent('getImage', {
errMsg: 'canvasdrawer:download fail'
})
reject(new Error('getImageInfo fail'))
}
}
})
} else {
this.cache[url] = url
resolve(url)
}
}
})
},
saveImageToLocal() {
// console.log('saveImageToLocal');
const {
width,
height
} = this.data
wx.canvasToTempFilePath({
x: 0,
y: 0,
width,
height,
canvasId: 'canvasdrawer',
complete: res => {
if (res.errMsg === 'canvasToTempFilePath:ok') {
this.setData({
showCanvas: false,
isPainting: false,
tempFileList: []
})
this.triggerEvent('getImage', {
tempFilePath: res.tempFilePath,
errMsg: 'canvasdrawer:ok'
})
} else {
this.triggerEvent('getImage', {
errMsg: 'canvasdrawer:fail'
})
}
}
}, this)
}
}
})

3
components/canvasdrawer/canvasdrawer.json Normal file
View File

@ -0,0 +1,3 @@
{
"component": true
}

1
components/canvasdrawer/canvasdrawer.wxml Normal file
View File

@ -0,0 +1 @@
<canvas canvas-id="canvasdrawer" style="width:{{width}}px;height:{{height}}px;" class="board" wx:if="{{showCanvas}}"></canvas>

4
components/canvasdrawer/canvasdrawer.wxss Normal file
View File

@ -0,0 +1,4 @@
.board {
position: fixed;
top: 2000rpx;
}

6
config/api.js
View File

@ -1,4 +1,5 @@
const ApiRootUrl = 'http://localhost:8360/api/';
const ApiRootUrl = 'http://localhost:8300/api/';
// const ApiRootUrl = 'http://192.168.0.103:8300/api/';
// const ApiRootUrl = 'https://www.hiolabs.com/api/';
module.exports = {
@ -22,6 +23,7 @@ module.exports = {
GoodsCount: ApiRootUrl + 'goods/count', //统计商品总数
GoodsDetail: ApiRootUrl + 'goods/detail', //获得商品的详情
GoodsList: ApiRootUrl + 'goods/list', //获得商品列表
GoodsShare: ApiRootUrl + 'goods/goodsShare', //获得商品的详情
SaveUserId: ApiRootUrl + 'goods/saveUserId',
// 收货地址
AddressDetail: ApiRootUrl + 'address/addressDetail', //收货地址详情
@ -50,4 +52,6 @@ module.exports = {
ShowSettings: ApiRootUrl + 'settings/showSettings',
SaveSettings: ApiRootUrl + 'settings/save',
SettingsDetail: ApiRootUrl + 'settings/userDetail',
GetBase64: ApiRootUrl + 'qrcode/getBase64', //获取商品详情二维码
};

24
pages/cart/cart.js
View File

@ -19,15 +19,11 @@ Page({
startX: 0, //开始坐标
startY: 0,
hasCartGoods: 0
},
onLoad: function() {
},
onReady: function() {
// 页面渲染完成
},
onShow: function() {
// 页面显示
@ -43,19 +39,14 @@ Page({
},
onHide: function() {
// 页面隐藏
},
onUnload: function() {
// 页面关闭
},
toIndexPage: function() {
wx.switchTab({
url: '/pages/index/index',
});
// wx.redirectTo({
// url: '/pages/payResult/payResult?status=1&orderId=192'
// });
},
getCartList: function() {
let that = this;
@ -80,7 +71,6 @@ Page({
checkedAllStatus: that.isCheckedAll()
});
});
},
isCheckedAll: function() {
//判断购物车商品已全选
@ -143,7 +133,7 @@ Page({
}
},
updateCart: function (itemIndex,productId, number, id) {
updateCart: function(itemIndex, productId, number, id) {
let that = this;
util.request(api.CartUpdate, {
productId: productId,
@ -158,8 +148,7 @@ Page({
let cartItem = that.data.cartGoods[itemIndex];
cartItem.number = number;
that.getCartNum();
}
else{
} else {
util.showErrorToast('库存不足了')
}
that.setData({
@ -175,24 +164,19 @@ Page({
util.showErrorToast('删除左滑试试')
}
let number = (cartItem.number - 1 > 1) ? cartItem.number - 1 : 1;
// cartItem.number = number;
this.setData({
cartGoods: this.data.cartGoods,
});
this.updateCart(itemIndex,cartItem.product_id, number, cartItem.id);
},
clicknone: function() {
this.updateCart(itemIndex, cartItem.product_id, number, cartItem.id);
},
addNumber: function(event) {
let itemIndex = event.target.dataset.itemIndex;
let cartItem = this.data.cartGoods[itemIndex];
let number = Number(cartItem.number) + 1;
// cartItem.number = number;
this.setData({
cartGoods: this.data.cartGoods,
});
this.updateCart(itemIndex,cartItem.product_id, number, cartItem.id);
this.updateCart(itemIndex, cartItem.product_id, number, cartItem.id);
},
getCartNum: function() {
util.request(api.CartGoodsCount).then(function(res) {

56
pages/goods/goods.js
View File

@ -9,6 +9,7 @@ Page({
id: 0,
goods: {},
gallery: [],
galleryImages:[],
specificationList: [],
productList: [],
cartGoodsCount: 0,
@ -27,6 +28,39 @@ Page({
goodsNumber: 0,
loading: 0,
current: 0,
showShareDialog:0,
},
hideDialog: function (e) {
let that = this;
that.setData({
showShareDialog: false,
});
},
shareTo:function(){
let userInfo = wx.getStorageSync('userInfo');
if (userInfo == '') {
util.loginNow();
return false;
} else {
this.setData({
showShareDialog: !this.data.showShareDialog,
});
}
},
createShareImage: function () {
let id = this.data.id;
wx.navigateTo({
url: '/pages/share/index?goodsid=' + id
})
},
previewImage: function (e) {
let current = e.currentTarget.dataset.src;
let that = this;
wx.previewImage({
current: current, // 当前显示图片的http链接
urls: that.data.galleryImages // 需要预览的图片http链接列表
})
},
saveUserId: function(e) {
let formId = e.detail.formId;
@ -68,7 +102,7 @@ Page({
onShareAppMessage: function(res) {
let id = this.data.id;
let name = this.data.goods.name;
let image = this.data.goods.primary_pic_url;
let image = this.data.goods.list_pic_url;
let userId = this.data.userId;
return {
title: name,
@ -101,6 +135,10 @@ Page({
checkedSpecText: '请选择规格和数量'
});
}
let galleryImages = [];
for (const item of res.data.gallery) {
galleryImages.push(item.img_url);
}
that.setData({
goods: res.data.info,
goodsNumber: res.data.info.goods_number,
@ -108,8 +146,9 @@ Page({
specificationList: res.data.specificationList,
productList: res.data.productList,
checkedSpecPrice: res.data.info.retail_price,
galleryImages: galleryImages,
});
var checkedSpecPrice = res.data.info.retail_price;
wx.setStorageSync('goodsImage', res.data.info.https_pic_url);
}
wx.hideLoading();
});
@ -229,7 +268,6 @@ Page({
return;
}
let checkedProduct = checkedProductArray[0];
if (checkedProduct.goods_number < this.data.number) {
//找不到对应的product信息，提示没有库存
this.setData({
@ -276,11 +314,17 @@ Page({
});
},
onLoad: function(options) {
let id = 0;
var scene = decodeURIComponent(options.scene);
if (scene != 'undefined') {
id = scene;
} else {
id = options.id;
}
this.setData({
id: parseInt(options.id), // 这个是商品id
valueId: parseInt(options.id),
id: id, // 这个是商品id
valueId: id,
});
},
onShow: function() {
let userInfo = wx.getStorageSync('userInfo');

31
pages/goods/goods.wxml
View File

@ -13,9 +13,9 @@
</view>
</view>
<block wx:if="{{gallery.length > 0}}">
<swiper bindchange="bindchange" class="banner banner-style1" indicator-dots="{{false}}" autoplay="{{true}}" current="{{current}}" circular="{{true}}" interval="4000" duration="1000" display-multiple-items="1">
<swiper bindchange="bindchange" class="banner banner-style1" indicator-dots="{{false}}" autoplay="{{false}}" current="{{current}}" circular="{{true}}" interval="4000" duration="1000" display-multiple-items="1">
<swiper-item class="item" wx:for="{{gallery}}" wx:key="{{item.id}}">
<image src="{{item.img_url}}" class="slide-image" mode="aspectFill" />
<image bindtap="previewImage" data-src="{{item.img_url}}" src="{{item.img_url}}" class="slide-image" mode="aspectFill" />
</swiper-item>
</swiper>
</block>
@ -31,10 +31,10 @@
<view class='goods-intro'>{{goods.goods_brief}}</view>
</view>
<view class='r'>
<button class='share' hover-class="none" open-type='share'>
<view bindtap="shareTo" class='share'>
<image class='icon' src='http://lucky-icon.meiweiyuxian.com/hio/share.png'></image>
<view class='text'>分享</view>
</button>
</view>
</view>
</view>
<view class='price-info'>
@ -92,7 +92,7 @@
<view class='spec-item'>
<view class='name'>{{specificationList.name}}</view>
<view class="values">
<view class="value {{item.checked ? 'selected' : ''}} {{item.goods_number <=0?'out-stock':''}}" bindtap="{{item.goods_number <=0?'':'clickSkuValue'}}" wx:for="{{specificationList.valueList}}" wx:key="{{item.id}}" data-value-id="{{item.id}}" data-index="{{index}}" data-name-id="{{item.specification_id}}">{{item.value}}</view>
<view class="value {{item.checked ? 'selected' : ''}} {{item.goods_number <=0?'out-stock':''}}" bindtap="clickSkuValue" wx:for="{{specificationList.valueList}}" wx:key="{{item.id}}" data-value-id="{{item.id}}" data-index="{{index}}" data-name-id="{{item.specification_id}}">{{item.value}}</view>
</view>
</view>
<view class="number-item">
@ -147,5 +147,24 @@
<view class="cart-empty">商品已下架</view>
</block>
</view>
<view class="dialog {{ showShareDialog ? 'dialog_show' : '' }}">
<view class="dialog-mask2" bindtap="hideDialog"></view>
<view class="dialog-fixed dialog-share">
<view class="share-wrap">
<view class='content'>
<view class="share-block">
<button class='block share-btn' hover-class="none" open-type='share'>
<image class="img" src="http://lucky-icon.meiweiyuxian.com/hio/weixin.png"></image>
<view class="text">发给好友/发到微信群</view>
</button>
<view class="block" catchtap="createShareImage">
<image class="img" src="http://lucky-icon.meiweiyuxian.com/hio/pyq.png"></image>
<view class="text">保存分享图发朋友圈</view>
</view>
</view>
</view>
</view>
<view class="cancel" bindtap="hideDialog">取消</view>
</view>
</view>
</view>

139
pages/goods/goods.wxss
View File

@ -524,9 +524,6 @@
width: 30%;
line-height: 100rpx;
color: #192841;
background: -webkit-linear-gradient(left, #fdbb43, #ff347d); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, #fdbb43, #ff347d); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, #fdbb43, #ff347d); /* Firefox 3.6 - 15 *//* background: linear-gradient(to right, #131313, #000); 标准的语法（必须放在最后） */
background: linear-gradient(to right, #f8cd4e, #fae277); /* 标准的语法（必须放在最后） */
font-size: 28rpx;
text-align: center;
@ -884,4 +881,140 @@
button::after {
border-radius: 0;
border: none;
}
.dialog_show .dialog-mask2 {
display: block;
}
.dialog-share .share-wrap {
background: #fafafa;
display: flex;
flex-direction: column;
padding: 30rpx;
width: 100%;
box-sizing: border-box;
}
.dialog-fixed {
position: fixed;
bottom: 0;
width: 100%;
transform: translateY(150%);
transition: all 0.4s ease;
z-index: 33;
display: flex;
flex-direction: column;
align-items: center;
}
.dialog_show .dialog-share {
transform: translateY(0);
background: #e0e0e0;
}
.dialog_show .dialog-mask {
display: block;
}
.dialog_show .dialog-mask2 {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
background: rgba(0, 0, 0, 0.5);
display: none;
}
.dialog_show .dialog-mask2 {
display: block;
}
.dialog-share .share-wrap {
background: #fafafa;
display: flex;
flex-direction: column;
padding: 30rpx;
width: 100%;
box-sizing: border-box;
}
.dialog-share .cancel {
padding: 30rpx;
color: #333;
text-align: center;
font-size: 30rpx;
background: #fafafa;
width: 100%;
box-sizing: border-box;
margin-top: 12rpx;
}
.share-wrap .top {
border-bottom: 1rpx solid #f1f1f1;
font-size: 28rpx;
color: #111;
text-align: center;
padding-bottom: 30rpx;
}
.share-wrap .top .img {
width: 50rpx;
height: 50rpx;
}
.share-wrap .content {
display: flex;
flex-direction: column;
}
.share-wrap .content .tip {
font-size: 26rpx;
color: #666;
text-align: center;
padding: 30rpx 0;
}
.share-wrap .content .share-block {
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 4rpx;
}
.share-wrap .content .share-block .block {
/* border: 1rpx solid #f0f0f0; */
display: flex;
flex-direction: column;
align-items: center;
padding: 32rpx;
margin: 0 20rpx 0 0;
background: #fff;
border-radius: 20rpx;
box-shadow: 2rpx 2rpx 5rpx #f1f1f1;
}
.share-wrap .content .share-block .block.share-btn::after {
border: 1rpx solid #f0f0f0;
}
.share-wrap .content .share-block .block:last-child {
margin-right: 0;
}
.share-wrap .content .share-block .block .img {
width: 50rpx;
height: 50rpx;
margin-bottom: 20rpx;
}
.share-wrap .content .share-block .block .text {
text-align: center;
color: #555;
font-size: 26rpx;
height: 40rpx;
line-height: 40rpx;
}

2
pages/index/index.wxml
View File

@ -10,7 +10,7 @@
<text class="txt">搜索, 共{{goodsCount}}款好物</text>
</view>
<view class='banner-wrap' wx:if="{{show_banner && banner.length > 0}}">
<swiper class="banner" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
<swiper class="banner" indicator-dots="true" autoplay="{{false}}" interval="3000" duration="1000">
<swiper-item wx:for="{{banner}}" wx:key="{{item.id}}">
<navigator wx:if="{{item.link_type == 0}}" url="/pages/goods/goods?id={{item.goods_id}}">
<image src="{{item.image_url}}" background-size="cover"></image>

1
pages/order-check/index.js
View File

@ -113,7 +113,6 @@ Page({
goodsCount: res.data.goodsCount,
outStock: res.data.outStock
});
let goods = res.data.checkedGoodsList;
wx.setStorageSync('addressId', addressId);
if (res.data.outStock == 1) {

197
pages/share/index.js Normal file
View File

@ -0,0 +1,197 @@
var util = require('../../utils/util.js');
var api = require('../../config/api.js');
const app = getApp()
const fsm = wx.getFileSystemManager();
const FILE_BASE_NAME = 'tmp_base64src'; //自定义文件名
Page({
data: {
painting: {},
shareImage: '',
goodsUrl: '',
goods: {},
},
getQrcode: function(id) {
let that = this;
util.request(api.GetBase64, {
goodsId: id
}, 'POST').then(function(res) {
if (res.errno === 0) {
that.getQrcodeJpg(res.data);
}
});
},
getQrcodeJpg(code) {
let that = this;
let promise = new Promise((resolve, reject) => {
const filePath = `${wx.env.USER_DATA_PATH}/temp_image.jpeg`;
const buffer = wx.base64ToArrayBuffer(code);
wx.getFileSystemManager().writeFile({
filePath,
data: buffer,
encoding: 'binary',
success() {
that.getGoodsInfo(filePath);
},
fail() {
reject(new Error('ERROR_BASE64SRC_WRITE'));
},
});
});
},
onLoad(options) {
wx.showLoading({
title: '图片生成中',
})
let goodsid = options.goodsid;
let goodsUrl = wx.getStorageSync('goodsImage');
this.setData({
goodsid: goodsid,
goodsUrl: goodsUrl
})
this.getQrcode(goodsid);
},
onShow: function() {
},
getGoodsInfo: function (qrcodeUrl) {
let id = this.data.goodsid;
let that = this;
util.request(api.GoodsShare, {
id: id
}).then(function(res) {
if (res.errno === 0) {
console.log(res.data);
that.setData({
goods: res.data,
});
that.eventDraw(qrcodeUrl);
}
});
},
eventDraw(qrcodeUrl) {
let that = this;
let goodsUrl = that.data.goodsUrl;
let goods = that.data.goods;
that.setData({
painting: {
width: 375,
height: 667,
background:'#fff',
clear: true,
views: [
{
type: 'rect',
top: 0,
left: 0,
width: 375,
height: 667,
background:'#fff'
},
{
type: 'rect',
top: 40,
left: 40,
width: 305,
height: 305,
background: '#f1f1f1'
},
{
type: 'image',
url: goodsUrl,
top: 35,
left: 35,
width: 305,
height: 305,
},
{
type: 'text',
content: goods.name,
fontSize: 18,
lineHeight: 22,
color: '#383549',
textAlign: 'left',
top: 360,
left: 35,
width: 305,
MaxLineNumber: 2,
breakWord: true,
// bolder: true
},
{
type: 'text',
content: '¥',
fontSize: 18,
lineHeight: 16,
color: '#e93237',
textAlign: 'left',
top: 420,
left: 35,
width: 40,
MaxLineNumber: 1,
// breakWord: true,
// bolder: true
},
{
type: 'text',
content: goods.retail_price,
fontSize: 30,
lineHeight: 30,
color: '#e93237',
textAlign: 'left',
top: 410,
left: 50,
width: 200,
MaxLineNumber: 1,
// breakWord: true,
// bolder: true
},
{
type: 'image',
url: qrcodeUrl,
top: 470,
left: 127.5,
width: 120,
height: 120
},
{
type: 'text',
content: '长按识别小程序',
fontSize: 16,
color: '#383549',
textAlign: 'center',
top: 610,
left: 187.5,
lineHeight: 20,
MaxLineNumber: 1,
breakWord: true,
width: 200
}
]
}
})
},
eventSave() {
wx.saveImageToPhotosAlbum({
filePath: this.data.shareImage,
success(res) {
wx.showToast({
title: '保存图片成功',
icon: 'success',
duration: 2000
})
}
})
},
eventGetImage(event) {
wx.hideLoading()
const {
tempFilePath,
errMsg
} = event.detail
console.log(errMsg);
if (errMsg === 'canvasdrawer:ok') {
this.setData({
shareImage: tempFilePath
})
}
}
})

6
pages/share/index.json Normal file
View File

@ -0,0 +1,6 @@
{
"navigationBarTitleText": "生成分享图",
"usingComponents": {
"canvasdrawer": "/components/canvasdrawer/canvasdrawer"
}
}

8
pages/share/index.wxml Normal file
View File

@ -0,0 +1,8 @@
<!--index.wxml-->
<view class="container">
<image src="{{shareImage}}" class="share-image"></image>
<canvasdrawer painting="{{painting}}" class="canvasdrawer" bind:getImage="eventGetImage" />
<view class="btn-wrap">
<button class="btn" bindtap="eventSave">保存到本地</button>
</view>
</view>

52
pages/share/index.wxss Normal file
View File

@ -0,0 +1,52 @@
page {
background: #f1f1f1;
height: 100%;
}
.container {
background: #f1f1f1;
height: 100%;
position: relative;
padding-top: 40rpx;
box-sizing: border-box;
}
.btn-wrap{
width: 100%;
height: 120rpx;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
bottom: 0;
padding: 20rpx 30rpx;
box-sizing: border-box;
}
.btn-wrap .btn{
height: 90rpx;
width: 100%;
color: #192841;
background: linear-gradient(to right, #f8cd4e, #fae277);
text-align: center;
line-height: 90rpx;
margin: 0;
font-size: 28rpx;
}
.btn-wrap .btn::after{
border: none;
}
.share-image {
width: 580rpx;
height: 1032rpx;
margin: 0 auto;
/* border: 1px solid black; */
}
button {
margin-top: 20rpx;
color: #695233;
}

2
pages/ucenter/index/index.wxss
View File

@ -63,7 +63,7 @@ page {
align-items: center;
margin: 0 30rpx;
padding: 30rpx 0;
border-bottom: 1rpx solid #f1f1f1;
/* border-bottom: 1rpx solid #f1f1f1; */
}
.head-wrap .no-login-avatar {