-
+
+
diff --git a/src/page/Cash/App.vue b/src/page/Cash/App.vue
new file mode 100644
index 0000000..edee392
--- /dev/null
+++ b/src/page/Cash/App.vue
@@ -0,0 +1,171 @@
+
+
+
+
@@ -263,7 +281,7 @@ onMounted(() => {
overflow: hidden;
.question-bg {
- @include pos(750px, 100%, 0px, 50%);
+ @include pos(750px, 4500px, 0px, 50%);
transform: translateY(-50%);
background: linear-gradient(135deg, #f6d365, #fda085);
}
diff --git a/src/components/Result.vue b/src/components/Result.vue
index 0117fd7..0317831 100644
--- a/src/components/Result.vue
+++ b/src/components/Result.vue
@@ -18,6 +18,7 @@ const bgPic = computed(() => {
const mbti = ref(userStore.MBTI);
+
console.log("mbti", mbti.value);
const changBg = (event, number) => {
@@ -27,7 +28,7 @@ const changBg = (event, number) => {
debounceTap(
e,
() => {
- console.log("bgId", bgId.value);
+ // console.log("bgId", bgId.value);
},
0.3
);
@@ -36,15 +37,25 @@ const changBg = (event, number) => {
const createPoster = (event) => {
let e = event.target
debounceTap(e, () => {
- let saveImg = posterCreate(
- { width: 750, height: 1450 },
+ // 海报生成
+ posterCreate(
+ { width: 750, height: 1450 }, //海报尺寸
+ // 海报素材，按顺序依次渲染
[
- new URL(`@/assets/images/result/bg-2.jpg`, import.meta.url).href,
- new URL(`@/assets/images/qa/question.png`, import.meta.url).href,
- new URL(`@/assets/images/qa/showResult-btn.png`, import.meta.url).href
+ {
+ src: new URL(`@/assets/images/result/bg-2.jpg`, import.meta.url).href,
+ pos: { w: 750, h: 1624, x: 0, y: 0 }
+ },
+ {
+ src: new URL(`@/assets/images/qa/question.png`, import.meta.url).href,
+ pos: { w: 250, h: 1624, x: 0, y: 0 }
+ },
+ {
+ src: new URL(`@/assets/images/qa/showResult-btn.png`, import.meta.url).href,
+ pos: { w: 250, h: 124, x: 0, y: 0 }
+ },
]
)
- console.log('saveImg', saveImg);
}, 0.4)
}
@@ -65,6 +76,7 @@ const createPoster = (event) => {
![]()
+ ![]()
+
+
+
+
diff --git a/src/page/Share/main.js b/src/page/Cash/main.js
similarity index 53%
rename from src/page/Share/main.js
rename to src/page/Cash/main.js
index cbd0249..68a1b10 100644
--- a/src/page/Share/main.js
+++ b/src/page/Cash/main.js
@@ -1,14 +1,12 @@
import { createApp } from 'vue'
import App from './App.vue'
-import { createPinia } from "pinia"
-// import h5plugin from '@/plugins';
-import { wxShare } from '@/plugins/wxshare';
+import { wxShare } from '@/plugins/wxshare'
+import 'vant/lib/index.css';
+
const app = createApp(App)
-// 定义引入图片地址的全局方法
-app.config.globalProperties.imgUrl = (url) => {
- return new URL(`./assets/images/${url}`, import.meta.url).href
-}
+
+
// 初始化我的方法
// app.config.globalProperties.myPlugin = h5plugin
@@ -19,6 +17,6 @@ wxShare({
link: '/index.html',
})
-app.use(createPinia())
+
app.mount('#app')
console.log('Mode:', import.meta.env.VITE_MODE);
diff --git a/src/page/Home/App.vue b/src/page/Home/App.vue
index 2e89cfc..3a0da48 100644
--- a/src/page/Home/App.vue
+++ b/src/page/Home/App.vue
@@ -82,91 +82,99 @@ onMounted(() => {
let code = getQueryString('code')
console.log('code:', code);
- if (code) {
- getUserInfo({ code: code }).then(
- res => {
- if (res.code == 0) {
- console.log('我的信息：', res.data);
- userStore.updateToken(res.data.authorization)
- createBGM();
- // 开始加载组件
- showLoad.value = true
- return
- } else {
- console.log('hhhh');
- authorize({ scopeType: 1 }).then(
- res => {
- if (res.code == 0) {
- console.log('重定向地址：', res.data);
- location.replace(res.data)
- }
+ let dev = import.meta.env.VITE_MODE
+ if (dev != 'dev') {
+ if (code) {
+ getUserInfo({ code: code }).then(
+ res => {
+ if (res.code == 0) {
+ console.log('我的信息：', res.data);
+ userStore.updateToken(res.data.authorization)
+ createBGM();
+ // 开始加载组件
+ showLoad.value = true
+ return
+ } else {
+ console.log('hhhh');
+ authorize({ scopeType: 1 }).then(
+ res => {
- // 活动已结束：6001
- if (res.code == '6001') {
+ if (res.code == 0) {
+ console.log('重定向地址：', res.data);
+ location.replace(res.data)
+ }
+
+ // 活动已结束：6001
+ if (res.code == '6001') {
+ Toast.fail({
+ message: res.msg,
+ duration: 0,
+ forbidClick: true
+ })
+ return
+ }
+
+ // 活动未开启：6002
+ if (res.code == '6002') {
+ Toast({
+ message: res.msg,
+ duration: 0,
+ icon: 'flag-o',
+ forbidClick: true
+ })
+ return
+ }
+
+ // 其余情况
Toast.fail({
message: res.msg,
duration: 0,
forbidClick: true
})
- return
}
+ )
+ }
- // 活动未开启：6002
- if (res.code == '6002') {
- Toast({
- message: res.msg,
- duration: 0,
- icon: 'flag-o',
- forbidClick: true
- })
- return
- }
- // 其余情况
- Toast.fail({
- message:res.msg,
- duration:0,
- forbidClick:true
- })
- }
- )
}
+ )
+ } else {
+ authorize({ scopeType: 1 }).then(
+ res => {
+ if (res.code == 0) {
+ console.log('重定向地址：', res.data);
+ location.replace(res.data)
+ }
- }
- )
+ // 活动已结束：6001
+ if (res.code == '6001') {
+ Toast.fail({
+ message: '活动已结束',
+ duration: 0,
+ forbidClick: true
+ })
+ }
+
+ // 活动未开启：6002
+ if (res.code == '6002') {
+ Toast({
+ message: '活动未开始',
+ duration: 0,
+ icon: 'flag-o',
+ forbidClick: true
+ })
+ }
+ }
+ )
+ }
} else {
- authorize({ scopeType: 1 }).then(
- res => {
-
- if (res.code == 0) {
- console.log('重定向地址：', res.data);
- location.replace(res.data)
- }
-
- // 活动已结束：6001
- if (res.code == '6001') {
- Toast.fail({
- message: '活动已结束',
- duration: 0,
- forbidClick: true
- })
- }
-
- // 活动未开启：6002
- if (res.code == '6002') {
- Toast({
- message: '活动未开始',
- duration: 0,
- icon: 'flag-o',
- forbidClick: true
- })
- }
- }
- )
+ showLoad.value = true
}
+
+
});
diff --git a/src/page/Share/App.vue b/src/page/Share/App.vue
deleted file mode 100644
index bcf80f6..0000000
--- a/src/page/Share/App.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
+
+
+
+
+
+
+
+ ¥{{ money }}元
+
+
+
+
+ 暂无中奖记录
+ 前往参与活动
+ share
-
-
-
-
-
diff --git a/src/plugins/index.js b/src/plugins/index.js
index f79c41d..71ddbd2 100644
--- a/src/plugins/index.js
+++ b/src/plugins/index.js
@@ -1,6 +1,7 @@
// 常用的方法
import gsap from 'gsap'
import { Howl, Howler } from 'howler';
+import { Toast } from 'vant';
import { createVNode, render } from 'vue'
@@ -433,10 +434,16 @@ export function mostValue(arr) {
// 海报生成
export function posterCreate(option, imageArr) {
+ let posterUrl = ''
const { width, height } = option
+ Toast.loading({
+ message: '海报生成中',
+ duration: 0,
+ forbidClick: true
+ })
- let mycanvas = document.createElement('canvas'), // 创建一个canvas画布元素
- ctx = mycanvas.getContext('2d');
+ let mycanvas = document.createElement('canvas') // 创建一个canvas画布元素
+ let ctx = mycanvas.getContext('2d')
mycanvas.width = width; //设置canvas的宽
mycanvas.height = height; //设置canvas的高
@@ -449,46 +456,28 @@ export function posterCreate(option, imageArr) {
img.onload = () => {
resolve(img)
};
- img.src = item;
+ img.src = item.src;
});
loader_p.push(_p);
})
- // imageArr.forEach((ev, index) => {
- // const _p = new Promise(resolve => {
- // const img = new Image();
- // img.crossOrigin = 'Anonymous'
- // img.onload = () => {
- // resolve(img)
- // };
- // img.src = ev;
- // });
- // loader_p.push(_p);
- // });
-
//Promise的.all方法，当所有预加载的图像加载好的回调函数
Promise.all(loader_p)
- .then(img_Arr => {
- const poster = img_Arr[0]; //声明一个对象替代刚刚加载的资源
- console.log('======开始绘制海报======)');
- console.log('daihui:', img_Arr);
- // 画海报
- ctx.drawImage(poster, 0, 0, mycanvas.width, mycanvas.height); //原生canvas的绘制图片方法，直接百度搜索 `js drawImage`查看方法的参数
- // 画签文
- // ctx.fillStyle = '#524426'; //原生canvas的绘制文字方法,属性类似css，确定好文字颜色、粗细、字号、字体、对齐方式
- // ctx.font = 'bold 28px arial'; // normal bold
- // ctx.textAlign = 'start'; //type2
- // ctx.rotate(-8 * Math.PI / 180);
- // ctx.fillText('@' + this.userName, 40, this.tHeight); //绘制文字
+ .then(imgList => {
+ console.log('海报数组：', imgList);
+ imgList.map((item, index) => {
+ console.log('item', imageArr[index].pos);
+ ctx.drawImage(item, imageArr[index].pos.x, imageArr[index].pos.y, imageArr[index].pos.w, imageArr[index].pos.h); //原生canvas的绘制图片方法，直接百度搜索 `js drawImage`查看方法的参数
+ })
//海报绘制完 ，转成图片对象
return mycanvas.toDataURL('image/jpeg', 1);
-
})
.then(baseURL => {
//返回的图片地址，就是最后海报的地址，可以放在DOM显示
- console.log('海报生成完毕 that.posterIsInit', baseURL);
- // let img = document.querySelector('#pic')
- // img.src = baseURL
- // return baseURL
+ let posterImg = document.querySelector('#poster')
+ posterImg.src = baseURL
+ setTimeout(() => Toast.success({ message: '已成功' }), 500)
})
+
+ return posterUrl
}
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 7a13276..e519923 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -38,9 +38,9 @@ export default defineConfig(({ command, mode }) => {
}
},
{
- filename: 'share',
- entry: '/src/page/Share/main.js',
- template: 'share.html',
+ filename: 'cash',
+ entry: '/src/page/Cash/main.js',
+ template: 'cash.html',
injectOptions: {
data: {
title: '分享页',
@@ -61,7 +61,7 @@ export default defineConfig(({ command, mode }) => {
verbose: true, // 默认即可
disable: false, //开启压缩(不禁用)，默认即可
deleteOriginFile: false, //删除源文件
- threshold: 10240, //压缩前最小文件大小
+ threshold: 10240, //压缩前最小文件大小:10k
algorithm: 'gzip', //压缩算法
ext: '.gz', //文件类型
})
@@ -115,7 +115,7 @@ export default defineConfig(({ command, mode }) => {
},
},
// 公共基础路径：构建生产环境时自动载入cdn路径
- base: mode == 'production' ? env.VITE_CDN + env.VITE_FOLDER + '/' : './',
+ base: './',
// 打包配置
build: {
assetsPublicPath: './',
@@ -125,8 +125,8 @@ export default defineConfig(({ command, mode }) => {
terserOptions: {
compress: {
//生产环境时移除打印日志
- drop_console: mode == 'production' ? true : false,
- drop_debugger: mode == 'production' ? true : false,
+ // drop_console: mode == 'production' ? true : false,
+ // drop_debugger: mode == 'production' ? true : false,
},
},