5 changed files with 295 additions and 95 deletions
Split View
Diff Options
-
+6 -6components/product/productItem.vue
-
+4 -3pages/index/center.vue
-
+216 -0pages_order/mine/promotion - 副本.vue
-
+65 -86pages_order/mine/promotion.vue
-
+4 -0store/store.js
+ 6
- 6
components/product/productItem.vue
View File
+ 4
- 3
pages/index/center.vue
View File
+ 216
- 0
pages_order/mine/promotion - 副本.vue
View File
| @ -0,0 +1,216 @@ | |||
| <template> | |||
| <view class="promotion"> | |||
| <navbar title="二维码" | |||
| bgColor="#E3441A" | |||
| color="#fff" | |||
| leftClick @leftClick="$utils.navigateBack" /> | |||
| <view class="promotion-card"> | |||
| <image :src="userInfo.headImage" mode="aspectFill" | |||
| class="headImage"></image> | |||
| <image style="width: 100%;" :src="imagePath" mode="widthFix"></image> | |||
| <!-- <view class="invitation-code">加油站: {{ title }}</view> --> | |||
| <canvas id="myCanvas" type="2d" canvas-id="firstCanvas1"></canvas> | |||
| <view class="uni-color-btn" | |||
| @click="preservationImg(imagePath)">保存二维码</view> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import { mapState } from 'vuex' | |||
| export default { | |||
| name: 'Promotion', | |||
| computed: { | |||
| ...mapState(['userInfo']), | |||
| }, | |||
| data() { | |||
| return { | |||
| url: '', | |||
| title: '', | |||
| baseUrl: 'https://image.hhlm1688.com/', | |||
| canvas: {}, | |||
| imagePath: '', | |||
| } | |||
| }, | |||
| onShow() { | |||
| this.getQrCode() | |||
| this.$store.commit('getUserInfo') | |||
| }, | |||
| methods: { | |||
| getQrCode() { | |||
| this.$api('getInviteCode', res => { | |||
| if (res.code == 200) { | |||
| this.url = res.result.url | |||
| this.title = res.result.name | |||
| this.draw() | |||
| } | |||
| }) | |||
| }, | |||
| draw() { | |||
| uni.showLoading({ | |||
| title: "拼命绘画中..." | |||
| }) | |||
| wx.createSelectorQuery() | |||
| .select('#myCanvas') // 绘制的canvas的id | |||
| .fields({ | |||
| node: true, | |||
| size: true | |||
| }) | |||
| .exec((res) => { | |||
| const canvas = res[0].node | |||
| // 渲染上下文 | |||
| const ctx = canvas.getContext('2d') | |||
| // Canvas 画布的实际绘制宽高 | |||
| const width = res[0].width | |||
| const height = res[0].height | |||
| // 初始化画布大小 | |||
| const dpr = wx.getWindowInfo().pixelRatio | |||
| //根据dpr调整 | |||
| // dpr 2 4 | |||
| // 3 6 | |||
| let Ratio = dpr * 2 | |||
| console.log("bug", dpr) | |||
| canvas.width = width * dpr | |||
| canvas.height = height * dpr | |||
| this.canvas = canvas | |||
| ctx.scale(dpr, dpr) | |||
| ctx.clearRect(0, 0, width, height) | |||
| ctx.fillStyle = '#fff' | |||
| ctx.fillRect(0, 0, canvas.width, canvas.height) | |||
| //用户图片 | |||
| // const image = canvas.createImage() | |||
| // image.onload = () => { | |||
| // ctx.drawImage(image, 30, 18, 40, 40) | |||
| // } | |||
| // image.src = '/public/img/wechar_1.png' | |||
| // image.src = this.userInfo.headImage | |||
| ctx.fillStyle = 'black' | |||
| ctx.font = '22px PingFangSC-regular'; | |||
| // 绘制用户姓名 | |||
| // let nickName = this.userInfo.nickName || '绘制用户姓名' | |||
| // ctx.fillText(nickName, canvas.width / Ratio - nickName.length * 11, 40); | |||
| // ctx.font = '18px PingFangSC-regular'; | |||
| // 绘制欢迎语 | |||
| let s = this.title || '' | |||
| ctx.fillText(s, canvas.width / Ratio - s.length * 11, 50); | |||
| //二维码图片 | |||
| const coderImage = canvas.createImage() | |||
| coderImage.src = this.baseUrl + this.url | |||
| coderImage.onload = () => { | |||
| ctx.drawImage(coderImage, | |||
| canvas.width / Ratio - 240 / 2, 100, 240, 240) | |||
| } | |||
| // 绘制完成后存储路径 | |||
| setTimeout(() => { | |||
| wx.canvasToTempFilePath({ | |||
| x: 0, | |||
| y: 0, | |||
| width: this.canvas.width, | |||
| height: this.canvas.height, | |||
| canvas, | |||
| success: (res) => { | |||
| var tempFilePath = res.tempFilePath; | |||
| this.imagePath = tempFilePath | |||
| uni.hideLoading() | |||
| } | |||
| }); | |||
| }, 600); | |||
| }) | |||
| }, | |||
| back() { | |||
| uni.navigateBack(-1) | |||
| }, | |||
| async preservationImg(img) { | |||
| await this.$authorize('scope.writePhotosAlbum') | |||
| this.imgApi(img); | |||
| }, | |||
| imgApi(image) { | |||
| /* 获取图片的信息 */ | |||
| uni.getImageInfo({ | |||
| src: image, | |||
| success: function(image) { | |||
| /* 保存图片到手机相册 */ | |||
| uni.saveImageToPhotosAlbum({ | |||
| filePath: image.path, | |||
| success: function() { | |||
| uni.showModal({ | |||
| title: '保存成功', | |||
| content: '图片已成功保存到相册', | |||
| showCancel: false | |||
| }); | |||
| }, | |||
| complete(res) { | |||
| console.log(res); | |||
| } | |||
| }); | |||
| } | |||
| }); | |||
| }, | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .promotion { | |||
| width: 100%; | |||
| height: 100vh; | |||
| background-color: $uni-color; | |||
| .promotion-card { | |||
| width: 90%; | |||
| margin: 140rpx auto 0rpx auto; | |||
| box-shadow: 0rpx 0rpx 15rpx rgba(0, 0, 0, .2); | |||
| border-radius: 40rpx; | |||
| padding: 40rpx 30rpx; | |||
| box-sizing: border-box; | |||
| background-color: #fff; | |||
| position: relative; | |||
| padding-top: 100rpx; | |||
| .headImage{ | |||
| position: absolute; | |||
| height: 180rpx; | |||
| width: 180rpx; | |||
| border-radius: 50%; | |||
| top: -80rpx; | |||
| left: 50%; | |||
| transform: translate(-50%); | |||
| border: 10rpx solid #fff; | |||
| box-shadow: 0 0 10rpx 10rpx #00000013; | |||
| } | |||
| } | |||
| } | |||
| #myCanvas { | |||
| position: fixed; | |||
| left: 100%; | |||
| /* visibility: hidden */ | |||
| /* visibility: hidden; */ | |||
| /* margin-top: 100rpx; */ | |||
| margin: 68rpx auto; | |||
| width: 750rpx; | |||
| height: 750rpx; | |||
| /* line-height: 20px; */ | |||
| background-color: rgba(255, 255, 255, 1); | |||
| text-align: center; | |||
| } | |||
| </style> | |||