店铺详情修改

2024-09-18 16:27:53 +08:00
parent 4a6de0a22b
commit d13405ee3f
7 changed files with 983 additions and 10 deletions
--- a/pages/shopSetUp/shopQRcode.vue
+++ b/pages/shopSetUp/shopQRcode.vue
@@ -0,0 +1,142 @@
+<template>
+	<view class="page-wrapper">
+		<view class="content">
+			<view class="title">门店收款码</view>
+			<view ref="qrcode" class="qrcode">
+				<up-qrcode :size="vdata.size" @result="result" val="uview-plus"></up-qrcode> 
+			</view>
+			<view class="bom">
+				<view @click="download">下载收款码</view>
+				<view>下载收款码样式</view>
+			</view>
+		</view>
+		
+	
+	</view>
+</template>
+
+<script setup>
+import { reactive, ref, onMounted  } from 'vue';
+import { onShow  } from '@dcloudio/uni-app';
+import ak from '@/commons/utils/ak.js';
+import { getShopList } from '@/http/yskApi/shop.js'
+
+const vdata = reactive({
+	size: 0,
+	qrcodeUrl: null,
+});
+
+onShow(() => {
+	// getshopList()
+
+})
+onMounted(() => {
+	// getshopList()
+	let query = uni.createSelectorQuery().in(this);
+	   query.select('.qrcode').boundingClientRect(data => {
+	    if (data) {
+			vdata.size = data.width
+	    }
+	   }).exec();
+})
+
+
+let result = (e) => {
+	// console.log(e)
+	vdata.qrcodeUrl = e;
+}
+
+let download = () => {
+	 // 这里是获取到的图片base64编码
+	getUrlBase64(vdata.qrcodeUrl).then(base64 => {
+	        let elink = document.createElement('a')
+	        elink.href = base64
+	        const timedate = Date.parse(new Date())
+	        elink.download = `创意模板${timedate}.png`
+	        elink.click()
+		})
+}
+
+ let getUrlBase64 = (url) => {
+      return new Promise(resolve => {
+        let canvas = document.createElement('canvas')
+        let ctx = canvas.getContext('2d')
+        let img = new Image()
+        img.crossOrigin = 'Anonymous' //允许跨域
+        img.src = url
+        img.onload = function() {
+          canvas.height = 300
+          canvas.width = 300
+          ctx.drawImage(img, 0, 0, 300, 300)
+          let dataURL = canvas.toDataURL('image/png')
+          canvas = null
+          resolve(dataURL)
+        }
+      })
+}
+
+</script>
+<style lang="scss" scoped>
+.page-wrapper {
+	min-height: calc(100vh - 90rpx);
+	padding: 48rpx 52rpx;
+	box-sizing: border-box;
+	
+	.content{
+		width: 100%;
+		background-color: #fff;
+		border-radius: 40rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: 64rpx 0;
+		box-sizing: border-box;
+		.title{
+			font-weight: bold;
+			font-size: 40rpx;
+			color: #333333;
+		}
+		.qrcode{
+			width: 416rpx;
+			height: 416rpx;
+			margin-top: 50rpx;
+			border: 2rpx solid #333;
+			padding: 15rpx;
+			box-sizing: border-box;
+			border-radius: 20rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+		::v-deep .u-qrcode,::v-deep .u-qrcode__content,::v-deep .u-qrcode__canvas{
+			width: 100%!important;
+			height: 100%!important;
+			
+		}
+		.bom{
+			display: flex;
+			margin-top: 110rpx;
+			view{
+				width: 218rpx;
+				height: 64rpx;
+				line-height: 64rpx;
+				text-align: center;
+				font-weight: 500;
+				font-size: 28rpx;
+				color: #318AFE;
+				border-radius: 8rpx;
+			}
+			view:nth-child(1){
+				color: #318AFE;
+				border: 2rpx solid #318AFE;
+				margin-right: 80rpx;
+			}
+			view:nth-child(2){
+				color: #7074A0;
+				border: 2rpx solid #7074A0;
+			}
+		}
+	}
+	
+}
+</style>