diff --git a/pages/index/index.nvue b/pages/index/index.nvue index baa260d..b6b33ed 100644 --- a/pages/index/index.nvue +++ b/pages/index/index.nvue @@ -286,7 +286,7 @@ const otherList = [{ { icon: "/static/image/other/certificate/certificate.png", name: "证书", - path: "/pages/other/certificate/graduate" + path: "/pages/other/certificate/index" }, { icon: "/static/image/other/silkBanner/silkBanner.png", diff --git a/pages/other/certificate/graduate.vue b/pages/other/certificate/graduate.vue index f3fc549..50ad082 100644 --- a/pages/other/certificate/graduate.vue +++ b/pages/other/certificate/graduate.vue @@ -3,14 +3,12 @@ - - {{ item }} - 此功能不具备真实性,仅供娱乐 @@ -555,6 +553,7 @@ proxy } = getCurrentInstance(); const data = reactive({ + styleType:0, type: 0, graduate: { type: 0, @@ -599,14 +598,14 @@ textCssLeft: 'text-align: left;', textCssCenter: 'text-align: center;', typeList: [ - '毕业证书样式1', - '毕业证书样式2', + '样式一',//毕业证书 + '样式二',//毕业证书 '情侣证', '分手证', - '奖状样式1', - '奖状样式2', - '女神证', - '男神证', + '样式一',//奖状样式 + '样式二',//奖状样式 + '样式一',//女神证 + '样式二',//男神证 ] }) @@ -614,9 +613,39 @@ const showEditPopup = ref(false); const editForm = ref({}); onLoad((option) => { - uni.showLoading({ - title: "生成中" - }) + data.styleType=option.styleType||0 + if(data.styleType==0){ + data.typeList=[ + '样式一',//毕业证书 + '样式二',//毕业证书 + ] + setType(0) + }else if(data.styleType==1){ + data.typeList=['情侣证',] + data.type=2 + setType(0) + }else if(data.styleType==2){ + data.typeList=['分手证',] + data.type=3 + setType(0) + }else if(data.styleType==3){ + data.typeList=[ + '样式一',//奖状样式 + '样式二',//奖状样式 + ] + data.type=4 + setType(0) + }else{ + data.type=6 + data.typeList=[ + '样式一',//女神证 + '样式二',//男神证 + ] + setType(0) + } + // uni.showLoading({ + // title: "生成中" + // }) // 进入毕业证书页面埋点 proxy.$apiUserEvent('all', { type: 'event', @@ -624,10 +653,10 @@ prefix: '.uni.other.', value: "证书" }) - let graduateData = uni.getStorageSync("graduateData") - if (graduateData) { - data.graduate = graduateData - } + // let graduateData = uni.getStorageSync("graduateData") + // if (graduateData) { + // data.graduate = graduateData + // } uni.$on("editFormPhoto", (info) => { data.code = "" if(data.type==2||data.type==3){ @@ -715,6 +744,17 @@ }) function setType(index) { + if(data.styleType==0){ + + }else if(data.styleType==1){ + index+=2 + }else if(data.styleType==2){ + index+=3 + }else if(data.styleType==3){ + index+=4 + }else{ + index+=6 + } uni.showLoading({ title: "生成中" }) @@ -803,7 +843,20 @@ editForm.value.icon = '/static/image/other/certificate/graduate/icon1.png'; } } - + const getType = (index) => { + switch (Number(data.styleType)) { + case 0: + return index + case 1: + return index + 2 + case 2: + return index + 3 + case 3: + return index + 4 + default: + return index + 6 + } + } function successImage(e) { data.code = e uni.hideLoading() @@ -1291,33 +1344,29 @@ box-shadow: 0 2rpx 6rpx rgba(7, 140, 193, 0.3); } - .footer-btn { + .footer-box { + position: fixed; + left: 0; + bottom: 16px; width: 100vw; - overflow-x: auto; - white-space: nowrap; - - .footer-box { - display: inline-flex; - padding: 10rpx 0; - - .btn { - padding: 8rpx 10rpx; - background: #FFFFFF; - border-radius: 12px; - text-align: center; - margin: 0 24rpx; - color: #767676; - font-size: 12px; - // border: 2px solid #FFFFFF; - min-width: 120rpx; - } - - .active { - color: #1777FF; - // border: 2px solid #1777FF; - } + display: flex; + justify-content: center; + .btn { + font-size: 18px; + color: #767676; + width: 94px; + height: 50px; + line-height: 50px; + background: #FFFFFF; + border-radius: 8px 8px 8px 8px; + background: #FFFFFF; + text-align: center; + margin: 0 24rpx; + color: #767676; + } + .active { + color: #1777FF; + border: 2px solid #1777FF; } - - } \ No newline at end of file diff --git a/pages/other/certificate/index.vue b/pages/other/certificate/index.vue index 194908c..2151971 100644 --- a/pages/other/certificate/index.vue +++ b/pages/other/certificate/index.vue @@ -1,57 +1,129 @@ - + + + .card-grid { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + + .card { + width: 48%; + background-color: #fff; + border-radius: 20rpx; + padding: 20rpx; + margin-bottom: 20rpx; + align-items: center; + box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05); + display: flex; + align-items: center; + flex-direction: column; + } +.title{ + font-size: 14px; + color: #1A1A1A; + line-height: 14px; +} + .card-img { + width: 130px; + height: 80px; + /* border-radius: 8px 8px 8px 8px; */ + margin-top: 21px; + margin-bottom: 18px; + } + + + .card-btn { + width: 68px; + height: 28px; + background: linear-gradient(327deg, #1777FF 0%, #17CDFF 100%); + border-radius: 8px 8px 8px 8px; + font-size: 12px; + color: #FFFFFF; + display: flex; + align-items: center; + justify-content: center; + } + button{ + padding: 0; + margin: 0; + border: none; + } + \ No newline at end of file diff --git a/pages/other/silkBanner/silkBanner.vue b/pages/other/silkBanner/silkBanner.vue index 737edc3..198aaf3 100644 --- a/pages/other/silkBanner/silkBanner.vue +++ b/pages/other/silkBanner/silkBanner.vue @@ -3,16 +3,16 @@ - - - - {{ item }} - + + + 样式一 - - - + + + 此功能不具备真实性,仅供娱乐 @@ -27,46 +27,46 @@ :css="`width:351px;height:460px;background-image: url('/static/image/other/silkBanner/banner1.png');position: relative;`"> - + - - + + - + - + - + - + - + - + - + - + - + - - + + - + @@ -80,22 +80,22 @@ :css="`width:351px;height:460px;background-image: url('/static/image/other/silkBanner/banner2.png');position: relative;`"> - + - - + + - + - + - + @@ -191,14 +191,16 @@ // 返回对应 type 的数据,如果没有则返回默认 type 1 return banners[type] || banners[1] } - function mergeBanner(raw,type) { + + function mergeBanner(raw, type) { return Object.assign(defaultBanner(type), raw && typeof raw === 'object' ? raw : {}) } const data = reactive({ + isShow:false, type: 0, - banner: mergeBanner(null,0), - shuaxing: true, + banner: mergeBanner(null, 0), + shuaxing: false, navbar: { title: "锦旗", bgColor: '#EDEDED', @@ -206,13 +208,13 @@ width: 800, height: 600, code: '', - textCss: 'text-align: center;font-weight: bold;word-spacing: 50px;letter-spacing: 20px;word-spacing: 20px;font-family: "SimSun", "宋体", sans-serif;width:10px;color:#FFDD6D;font-size:10px; mix-blend-mode: overlay;', - - textCss1: 'font-weight: bold;word-spacing: 50px;letter-spacing: 20px;word-spacing: 20px;font-family: "SimSun", "宋体", sans-serif;color:#FFDD6D;font-size:20px; mix-blend-mode: overlay;', - textCss2: 'font-weight: bold;word-spacing: 50px;letter-spacing: 20px;word-spacing: 20px;font-family: "SimSun", "宋体", sans-serif;color:#FFDD6D;font-size:80px; mix-blend-mode: overlay;', - textCss3: 'text-align: center;width:351px;font-weight: bold;word-spacing: 50px;letter-spacing: 20px;word-spacing: 20px;font-family: "SimSun", "宋体", sans-serif;color:#FFDD6D;font-size:30px; mix-blend-mode: overlay;', - textCss4: 'text-align: center;width:20px;font-weight: bold;word-spacing: 50px;letter-spacing: 20px;word-spacing: 20px;font-family: "SimSun", "宋体", sans-serif;color:#FFDD6D;font-size:40px; mix-blend-mode: overlay;', - textFont:'font-family:"certificate";', + textCss: 'text-align: center;font-weight: 400;word-spacing: 50px;letter-spacing: 20px;word-spacing: 20px;width:10px;color:#FFDD6D;font-size:10px; mix-blend-mode: overlay;', + + textCss1: 'font-weight: 400;word-spacing: 50px;letter-spacing: 20px;word-spacing: 20px;color:#FFDD6D;font-size:20px; mix-blend-mode: overlay;', + textCss2: 'font-weight: 400;word-spacing: 50px;letter-spacing: 20px;word-spacing: 20px;color:#FFDD6D;font-size:80px; mix-blend-mode: overlay;', + textCss3: 'text-align: center;width:351px;font-weight: 400;word-spacing: 50px;letter-spacing: 20px;word-spacing: 20px;color:#FFDD6D;font-size:30px; mix-blend-mode: overlay;', + textCss4: 'text-align: center;width:20px;font-weight: 400;word-spacing: 50px;letter-spacing: 20px;word-spacing: 20px;color:#FFDD6D;font-size:40px; mix-blend-mode: overlay;', + textFont: 'font-family:"certificate2";', typeList: ['样式1', '样式2'] }) @@ -226,28 +228,32 @@ // 进入锦旗页面埋点 proxy.$apiUserEvent('all', { type: 'event', - key: 'certificate', + key: 'silkBanner', prefix: '.uni.other.', value: "锦旗" }) - data.banner = mergeBanner(uni.getStorageSync("silkBanner"+data.type),data.type) + data.banner = mergeBanner(uni.getStorageSync("silkBanner" + data.type), data.type) const config = uni.getStorageSync('config') console.log("---config---", config); const font = config.config['client.uniapp.font'] - console.log("字体地址信息", font.certificate); + console.log("字体地址信息", font.certificate2); // Font loading logic - const fontUrl = font.certificate; - const fontName = 'certificate'; + const fontUrl = font.certificate2; + const fontName = 'certificate2'; const loadFont = (path) => { uni.loadFontFace({ family: fontName, source: `url("${path}")`, success() { + data.isShow=true + data.shuaxing=true console.log('字体加载成功'); }, fail(err) { + data.isShow=true + data.shuaxing=true console.error('字体加载失败', err); } }); @@ -272,7 +278,7 @@ tempFilePath: res.tempFilePath, success: (saveRes) => { const savedPath = saveRes.savedFilePath; - uni.setStorageSync('certificate_font_path', savedPath); + uni.setStorageSync('certificate2_font_path', savedPath); console.log("字体保存路径", savedPath); loadFont(savedPath); }, @@ -303,13 +309,12 @@ onReachBottom(() => { }) - function setType(index) { uni.showLoading({ title: "生成中" }) data.type = index - data.banner = mergeBanner(uni.getStorageSync("silkBanner"+data.type),data.type) + data.banner = mergeBanner(uni.getStorageSync("silkBanner" + data.type), data.type) } function successImage(e) { @@ -323,7 +328,7 @@ } // 打开编辑弹窗 function edit() { - editForm.value = mergeBanner(JSON.parse(JSON.stringify(data.banner)),data.type) + editForm.value = mergeBanner(JSON.parse(JSON.stringify(data.banner)), data.type) showEditPopup.value = true; } @@ -338,11 +343,11 @@ title: "生成中" }) data.shuaxing = false - data.banner = mergeBanner(editForm.value,data.type) + data.banner = mergeBanner(editForm.value, data.type) setTimeout(() => { data.shuaxing = true }, 100) - uni.setStorageSync("silkBanner"+data.type, data.banner) + uni.setStorageSync("silkBanner" + data.type, data.banner) // 关闭弹窗 showEditPopup.value = false; } @@ -618,7 +623,7 @@ .popup-title { font-size: 32rpx; - font-weight: bold; + font-weight: 400; color: #333; } @@ -641,7 +646,7 @@ .section-title { font-size: 28rpx; - font-weight: bold; + font-weight: 400; color: #333; margin-bottom: 20rpx; display: block; @@ -682,7 +687,7 @@ .form-total-input { background-color: #f9f9f9; color: #ff6b35; - font-weight: bold; + font-weight: 400; } /* 上传图片样式 */ @@ -758,7 +763,7 @@ padding: 18rpx 60rpx; border-radius: 50rpx; font-size: 26rpx; - font-weight: bold; + font-weight: 400; box-shadow: 0 3rpx 10rpx rgba(7, 66, 193, 0.3); transition: all 0.3s ease; text-align: center; @@ -769,39 +774,33 @@ transform: translateY(-2rpx); box-shadow: 0 4rpx 12rpx rgba(7, 72, 193, 0.4); } - .btn-save-image:active { transform: translateY(0); box-shadow: 0 2rpx 6rpx rgba(7, 140, 193, 0.3); } - - .footer-btn { + .footer-box { + position: fixed; + left: 0; + bottom: 16px; width: 100vw; - overflow-x: auto; - white-space: nowrap; - - .footer-box { - display: inline-flex; - padding: 10rpx 0; - - .btn { - padding: 8rpx 10rpx; - background: #FFFFFF; - border-radius: 12px; - text-align: center; - margin: 0 24rpx; - color: #767676; - font-size: 12px; - // border: 2px solid #FFFFFF; - min-width: 120rpx; - } - - .active { - color: #1777FF; - // border: 2px solid #1777FF; - } + display: flex; + justify-content: center; + .btn { + font-size: 18px; + color: #767676; + width: 94px; + height: 50px; + line-height: 50px; + background: #FFFFFF; + border-radius: 8px 8px 8px 8px; + background: #FFFFFF; + text-align: center; + margin: 0 24rpx; + color: #767676; + } + .active { + color: #1777FF; + border: 2px solid #1777FF; } - - } \ No newline at end of file diff --git a/static/image/other/certificate/certificate1.png b/static/image/other/certificate/certificate1.png new file mode 100644 index 0000000..3d40be9 Binary files /dev/null and b/static/image/other/certificate/certificate1.png differ diff --git a/static/image/other/certificate/certificate2.png b/static/image/other/certificate/certificate2.png new file mode 100644 index 0000000..85c06cd Binary files /dev/null and b/static/image/other/certificate/certificate2.png differ diff --git a/static/image/other/certificate/certificate3.png b/static/image/other/certificate/certificate3.png new file mode 100644 index 0000000..04b33c0 Binary files /dev/null and b/static/image/other/certificate/certificate3.png differ diff --git a/static/image/other/certificate/certificate4.png b/static/image/other/certificate/certificate4.png new file mode 100644 index 0000000..a0d86ba Binary files /dev/null and b/static/image/other/certificate/certificate4.png differ diff --git a/static/image/other/certificate/certificate5.png b/static/image/other/certificate/certificate5.png new file mode 100644 index 0000000..76f38b8 Binary files /dev/null and b/static/image/other/certificate/certificate5.png differ diff --git a/static/image/other/certificate/certificate6.png b/static/image/other/certificate/certificate6.png new file mode 100644 index 0000000..0027542 Binary files /dev/null and b/static/image/other/certificate/certificate6.png differ