Ver Fonte

新增资源及优化

hwb0 há 3 anos atrás
pai
commit
21a8fbba8a

+ 4 - 1
components/pay-popup/pay-popup.vue

@@ -110,7 +110,10 @@
 					title: '支付中'
 				});
 				if (payIng) return
-				$http.post('/api/v1/mp/user/ticket/order/submit', {}).then(res => {
+				$http.post('/api/v1/mp/user/ticket/order/submit', {
+					suid: uni.getStorageSync('shareUid'),
+					type: uni.getStorageSync('shareType')
+				}).then(res => {
 					uni.hideLoading();
 					payIng = true
 					if (res.code == 0) {

+ 139 - 0
components/share-code/utils/index.js

@@ -0,0 +1,139 @@
+/*
+ * @Description: 公共方法
+ * @Version: 1.0.0
+ * @Autor: hch
+ * @Date: 2021-07-22 00:01:09
+ */
+/**
+ * @description: 绘制正方形(可以定义圆角),并且有图片地址的话填充图片
+ * @param {CanvasContext} ctx canvas上下文
+ * @param {number} x 圆角矩形选区的左上角 x坐标
+ * @param {number} y 圆角矩形选区的左上角 y坐标
+ * @param {number} w 圆角矩形选区的宽度
+ * @param {number} h 圆角矩形选区的高度
+ * @param {number} r 圆角的半径
+ * @param {String} url 图片的url地址
+ */
+export function drawSquarePic(ctx, x, y, w, h, r, url) {
+  ctx.save()
+  ctx.beginPath()
+  // 绘制左上角圆弧
+  ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
+  // 绘制border-top
+  // 画一条线 x终点、y终点
+  ctx.lineTo(x + w - r, y)
+  // 绘制右上角圆弧
+  ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
+  // 绘制border-right
+  ctx.lineTo(x + w, y + h - r)
+  // 绘制右下角圆弧
+  ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
+  // 绘制左下角圆弧
+  ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
+  // 绘制border-left
+  ctx.lineTo(x, y + r)
+  // 填充颜色(需要可以自行修改)
+  ctx.setFillStyle('#ffffff')
+  ctx.fill()
+  // 剪切,剪切之后的绘画绘制剪切区域内进行,需要save与restore 这个很重要 不然没办法保存
+  ctx.clip()
+
+  // 绘制图片
+  return new Promise((resolve, reject) => {
+    if (url) {
+      uni.getImageInfo({
+        src: url,
+        success(res) {
+          ctx.drawImage(res.path, x, y, w, h)
+          ctx.restore() //恢复之前被切割的canvas,否则切割之外的就没办法用
+          ctx.draw(true)
+          resolve()
+        },
+        fail(res) {
+          console.log('fail -> res', res)
+          uni.showToast({
+            title: '图片下载异常',
+            duration: 2000,
+            icon: 'none'
+          })
+        }
+      })
+    } else {
+      ctx.draw(true)
+      resolve()
+    }
+  })
+}
+
+/**
+ * @description: 获取设备信息
+ * @param {type}
+ * @return {type}
+ * @author: hch
+ */
+export function getSystem() {
+  let system = wx.getSystemInfoSync()
+  let scale = system.windowWidth / 375 //按照苹果留 375*667比例 其他型号手机等比例缩放 显示
+  return { w: system.windowWidth, h: system.windowHeight, scale: scale }
+}
+
+/**
+ * @description: 绘制文本时文本的总体高度
+ * @param {Object} ctx canvas上下文
+ * @param {String} text 需要输入的文本
+ * @param {Number} x X轴起始位置
+ * @param {Number} y Y轴起始位置
+ * @param {Number} maxWidth 单行最大宽度
+ * @param {Number} fontSize 字体大小
+ * @param {String} color 字体颜色
+ * @param {Number} lineHeight 行高
+ * @param {String} textAlign 字体对齐方式
+ */
+export function drawTextReturnH(
+  ctx,
+  text,
+  x,
+  y,
+  maxWidth = 375,
+  fontSize = 14,
+  color = '#000',
+  lineHeight = 30,
+  textAlign = 'left'
+) {
+  if (textAlign) {
+    ctx.setTextAlign(textAlign) //设置文本的水平对齐方式  ctx.setTextAlign这个可以兼容百度小程序 ,注意:ctx.textAlign百度小程序有问题
+    switch (textAlign) {
+      case 'center':
+        x = getSystem().w / 2
+        break
+
+      case 'right':
+        x = (getSystem().w - maxWidth) / 2 + maxWidth
+        break
+
+      default:
+        // 左对齐
+        x = (getSystem().w - maxWidth) / 2
+        break
+    }
+  }
+  let arrText = text.split('')
+  let line = ''
+  for (let n = 0; n < arrText.length; n++) {
+    let testLine = line + arrText[n]
+    ctx.font = fontSize + 'px sans-serif' //设置字体大小,注意:百度小程序 用ctx.setFontSize设置字体大小后,计算字体宽度会无效
+    ctx.setFillStyle(color) //设置字体颜色
+    let metrics = ctx.measureText(testLine) //measureText() 方法返回包含一个对象,该对象包含以像素计的指定字体宽度。
+    let testWidth = metrics.width
+    if (testWidth > maxWidth && n > 0) {
+      ctx.fillText(line, x, y)
+      line = arrText[n]
+      y += lineHeight
+    } else {
+      line = testLine
+    }
+  }
+  ctx.fillText(line, x, y)
+  ctx.draw(true) //本次绘制是否接着上一次绘制。即 reserve 参数为 false,则在本次调用绘制之前 native 层会先清空画布再继续绘制;若 reserve 参数为 true,则保留当前画布上的内容,本次调用 drawCanvas 绘制的内容覆盖在上面,默认 false。
+  return y
+}

+ 4 - 0
pages.json

@@ -19,6 +19,8 @@
 		"path": "pages/order/settlement"
 	}, {
 		"path": "pages/login/index"
+	}, {
+		"path": "pages/login/code"
 	}, {
 		"path": "pages/about/index"
 	}, {
@@ -53,6 +55,8 @@
 		"path": "pages/about/notice"
 	}, {
 		"path": "pages/about/rule"
+	}, {
+		"path": "pages/share/index"
 	}],
 	"tabBar": {
 		"custom": true,

+ 1 - 1
pages/about/index.vue

@@ -4,7 +4,7 @@
 		<view class="about">
 			<view class="flex about-logo">
 				<image src="../../static/logo.png" mode=""></image>
-				<view class="edition">v 1.0.8</view>
+				<view class="edition">v 1.0.10</view>
 			</view>
 			<view class="about-action">
 				<u-cell-group :border="false">

+ 2 - 2
pages/core/index.vue

@@ -12,8 +12,8 @@
 					<text v-if="actionInfo.max">-{{ actionInfo.max }}</text>
 					<text>{{ actionInfo.desc }}</text>
 				</view>
-				<u-icon name="arrow-down" color="#333" size="18" v-if="coinShow"></u-icon>
-				<u-icon name="arrow-up" color="#333" size="18" v-else></u-icon>
+				<u-icon name="arrow-up" color="#333" size="18" v-if="coinShow"></u-icon>
+				<u-icon name="arrow-down" color="#333" size="18" v-else></u-icon>
 			</view>
 			<view class="screen-coin-list" v-if="coinShow">
 				<view class="flex screen-coin-list-item" v-for="(item, index) in coinList" :key="index" @click="selectCoin(item, index)">

+ 1 - 1
pages/index/index.vue

@@ -109,7 +109,7 @@
 
 			selectedBanner(item, index) {
 				uni.navigateTo({
-					url: `/pages/ticketBox/detail?id=${ item.boxId }`
+					url: `/pages/ticketBox/detail?boxId=${ item.boxId }`
 				})
 			},
 

+ 0 - 4
pages/login/index.vue

@@ -47,10 +47,6 @@
 			};
 		},
 		
-		onShow() {
-			this.checked = false
-		},
-		
 		methods: {
 			getPhoneNumber(e) {
 				let _this = this

+ 224 - 0
pages/share/index.vue

@@ -0,0 +1,224 @@
+<template>
+	<view>
+		<u-navbar title="分享" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
+
+		<view class="flex invitation">
+			<view class="flex invitation-user">
+				<image src="../../static/bg/share_bg.png" mode="aspectFit"></image>
+				<view class="title">盲票</view>
+				<image class="avatar" :src="avatar" mode=""></image>
+			</view>
+			<view class="invitation-name">{{ userInfo.nickName }}</view>
+			<view class="invitation-name-tip">邀请您一起来刮盲票</view>
+			<view class="flex invitation-code">
+				<image :src="codeUrl" mode="aspectFill"></image>
+			</view>
+			<view class="invitation-code-tip">长按识别二维码</view>
+			<view class="invitation-bottom-tip">盲票,玩的就是有趣</view>
+		</view>
+		<view class="flex btn">
+			<button type="default" open-type="share">分享链接给好友</button>
+			<button type="default" @click="saveImg">保存海报</button>
+		</view>
+
+		<share-code ref="shareCode" :posterData.sync="posterData" />
+	</view>
+</template>
+
+<script>
+	import env from '../../config/env.js'
+	import $http from '@/utils/request.js'
+	import ShareCode from "../../components/share-code/share-code.vue"
+	export default {
+		components: {
+			ShareCode
+		},
+		data() {
+			return {
+				codeUrl: '',
+				userInfo: {},
+				avatar: '',
+				boxId: '',
+				// 图片数据
+				posterData: {
+					poster: {
+						//根据屏幕大小自动生成图片背景大小
+						url: "https://mp-public-test-1307117429.cos.ap-shanghai.myqcloud.com/mp.png", //图片地址
+						r: 15, //圆角半径
+						w: 340, //图片宽度
+						h: 447, //图片高度
+						p: 20 //图片内边距padding
+					},
+					mainImg: {
+						// 头像
+						url: "", //图片地址
+						r: 33, //圆角半径
+						w: 66, //宽度
+						h: 66, //高度
+						mt: 40
+					},
+					title: {
+						// 昵称
+						text: "", //文本
+						fontSize: 26, //字体大小
+						color: "#4F4F4F", //颜色
+						lineHeight: 37, //行高#4F4F4F 100%
+						mt: 30, //margin-top
+						w: 300,
+						align: "center"
+					},
+					codeImg: {
+						// 小程序码
+						url: "", //图片地址
+						w: 124, //宽度
+						h: 124, //高度
+						mt: 20, //margin-top
+						r: 62, //圆角半径
+						mt: 55
+					},
+					tips: [
+
+					]
+				}
+			};
+		},
+
+		onLoad(options) {
+			this.boxId = options.boxId
+		},
+
+		onShow() {
+			this.getUrl()
+			this.getBaseInfo()
+		},
+		methods: {
+			getBaseInfo() {
+				uni.showLoading({
+					title: '加载中'
+				});
+				$http.post('/api/v1/mp/user/getLoginUserinfo', {}).then(res => {
+					uni.hideLoading();
+					if (res.code == 0) {
+						console.log(res);
+						this.userInfo = res.data
+						this.avatar = this.posterData.mainImg.url = env.filePublic + res.data.avatar
+						this.posterData.title.text = res.data.nickName
+					}
+				}).catch(() => {
+					uni.hideLoading();
+				})
+			},
+
+			getUrl() {
+				$http.post('/api/v1/mp/user/share/code/generate', {
+					boxId: this.boxId,
+					type: "1"
+				}).then(res => {
+					this.codeUrl = this.posterData.codeImg.url = env.filePublic + res.data
+				})
+			},
+
+			saveImg() {
+				this.$refs.shareCode.posterShow()
+			},
+		},
+
+		onShareAppMessage(res) {
+			return {
+				title: '分享盲票',
+				path: `/pages/ticketBox/detail?boxId=${ this.boxId }&userId=${ this.userInfo.userId }&type=1`,
+				type: 2,
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.invitation {
+		flex-direction: column;
+		margin: 50rpx 30rpx;
+		padding: 0 0 80rpx;
+		border: 1px solid rgba(236, 236, 236, 100);
+		border-radius: 20rpx;
+		background-color: #FFFFFF;
+
+		&-user {
+			position: relative;
+			width: 100%;
+			margin-bottom: 80rpx;
+
+			image {
+				width: 100%;
+				height: 188rpx;
+				border-top-left-radius: 20rpx;
+				border-top-right-radius: 20rpx;
+			}
+
+			.title {
+				position: absolute;
+				font-size: 52rpx;
+				color: #FFFFFF;
+				top: 20rpx;
+			}
+
+			.avatar {
+				position: absolute;
+				width: 134rpx;
+				height: 134rpx;
+				border-radius: 50%;
+				top: 120rpx;
+			}
+		}
+
+		.invitation-name {
+			font-size: 52rpx;
+			margin-bottom: 40rpx;
+		}
+
+		.invitation-name-tip {
+			font-size: 36rpx;
+			color: rgba(134, 134, 134, 100);
+			margin-bottom: 20rpx;
+		}
+
+		.invitation-code {
+			image {
+				width: 250rpx;
+				height: 250rpx;
+				margin-bottom: 20rpx;
+			}
+		}
+
+		.invitation-code-tip {
+			font-size: 34rpx;
+			color: rgba(181, 181, 181, 100);
+			margin-bottom: 60rpx;
+		}
+
+		.invitation-bottom-tip {
+			font-size: 28rpx;
+		}
+	}
+
+	.tip {
+		text-align: center;
+	}
+
+	.btn {
+		padding: 40rpx 20rpx;
+
+		.ge {
+			height: 40rpx;
+		}
+
+		/deep/ button {
+			line-height: 60rpx;
+			font-size: 28rpx;
+			height: 60rpx;
+			color: #fff;
+			background-color: $uni-bg-color;
+			border: none;
+			border-radius: 8rpx;
+		}
+	}
+</style>

BIN
static/bg/share_bg.png


+ 1 - 1
utils/request.js

@@ -38,7 +38,7 @@ const $http = (url, data, methods) => {
 					uni.navigateTo({
 						url: "/pages/login/index"
 					})	
-				} else if (res.data && res.data.code !== 0 && res.data.code !== 1016 && res.data.code !== 1018 && res.data.code !== 1022) {
+				} else if (res.data && res.data.code !== 0 && res.data.code !== 1016 && res.data.code !== 1018 && res.data.code !== 1023 && res.data.code !== 1022) {
 					uni.showToast({
 						title: res.data.msg || '请求错误,请重试。',
 						icon: 'none',