Merge branch 'master' of https://gitee.com/longyears/xietang-answer-h5

xietang-answer-h5/pages.json

@@ -22,9 +22,9 @@
     {
       "path": "pages/certificate/certificate"
     },
-	{
+    {
-	  "path": "pages/record/index"
+      "path": "pages/record/index"
-	}
+    }
   ],
   "globalStyle": {
     "navigationBarTextStyle": "black",

xietang-answer-h5/pages/certificate/certificate.vue

@@ -1,47 +1,52 @@
 <template>
-  <view class="page" :style="isRotate ? { 'background': '#333' } : ''">
+  <view class="page">
     <view ref="certificate"
           id="certificate"
-          class="certificate"
+          class="certificate">
-          :style="isRotate ? { 'transform': 'rotate(90deg)' + 'scale(' + scale + ',' + scale + ')' } : ''"
-          @click="imgClick">
       <template v-if="imgData">
         <img class="bkg" :src="imgData" alt="">
       </template>
       <template v-else>
-        <img class="bkg" :src="certificate" alt="">
+        <img class="bkg-sun" :src="require('@/static/certificate1/bkg-sun.png')" alt="">
+        <img class="bkg-shuibaxian" :src="require('@/static/certificate1/bkg-shuibaxian.png')" alt="">
 
-        <img class="icon1" :src="icon1" alt="">
+        <view class="icons">
-        <img class="title" :src="title" alt="">
+          <img class="icon1" :src="require('@/static/certificate1/icon1.png')" alt="">
-
+          <img class="icon2" :src="require('@/static/certificate1/icon2.png')" alt="">
-        <view class="no">
-          <view>
-            证书编号：
-          </view>
-          <view>
-            {{ no }}
-          </view>
         </view>
 
+        <img class="title" :src="require('@/static/certificate1/title.png')" alt="">
+
+<!--        <view class="no">-->
+<!--          <view>-->
+<!--            证书编号：-->
+<!--          </view>-->
+<!--          <view>-->
+<!--            {{ no }}-->
+<!--          </view>-->
+<!--        </view>-->
+
         <view class="text">
           <view class="text__name">{{ userInfo.name || 'xx' }} 同志:</view>
 
           <view class="text__content">
-            在2023-2024年度斜塘街道基层党员冬训答题活动中表现优异，特发此证。
+            在2023-2024年度斜塘街道基层党员冬训答题活动中荣获
           </view>
 
+          <img class="text__icon3" :src="require('@/static/certificate1/icon3.png')" alt="">
+
           <view class="text__date">
-            中共苏州工业园区斜塘街道工作委员会 <br>{{ nowDate }}
+            {{ nowDate }}
           </view>
         </view>
       </template>
     </view>
 
-    <view class="operate" :style="isRotate ? { 'opacity': 0 } : ''">
+    <view class="operate">
-		<view class="operate-item" @click="back">
+      <view class="operate-item" @click="back">
-		  <u-image :src='backs' :fade="false" width="100rpx" height="100rpx" color="#000" size="100rpx"></u-image>
+        <u-image :src='backs' :fade="false" width="100rpx" height="100rpx" color="#000" size="100rpx"></u-image>
-		  <view class="operate-item__text">返回</view>
+        <view class="operate-item__text">返回</view>
-		</view>
+      </view>
       <view class="operate-item" @click="isShare = true">
         <u-icon name="share-square" color="#000" size="100rpx"></u-icon>
         <view class="operate-item__text">分享</view>
@@ -74,19 +79,19 @@ export default {
       isRotate: false,
       scale: 1,
       imgData: '',
-	  certificate:require("../../static/certificate/certificate.png"),
+      certificate:require("../../static/certificate/certificate.png"),
-	  icon1:require("../../static/certificate/icon1.png"),
+      icon1:require("../../static/certificate/icon1.png"),
-	  title:require("../../static/certificate/title.png"),
+      title:require("../../static/certificate/title.png"),
-	  toShare:require("../../static/toShare.png"),
+      toShare:require("../../static/toShare.png"),
-	  backs:require("../../static/back.jpg")
+      backs:require("../../static/back.jpg")
     };
   },
   methods: {
-	back(){
+    back(){
-		uni.redirectTo({
+      uni.redirectTo({
-			url:'/pages/me/me'
+        url:'/pages/me/me'
-		})
+      })
-	},
+    },
     getUserInfo () {
       this.util.request({
         api: '/api/mobile/user/show',
@@ -169,10 +174,10 @@ export default {
   },
   computed: {
     nowDate () {
-       return this.converToDate(new Date())
+      return this.converToDate(new Date())
     },
     no () {
-       return `${new Date().getFullYear()}${this.userInfo.id ? this.userInfo.id.toString().padStart(6, '0') : '000000'}`
+      return `${new Date().getFullYear()}${this.userInfo.id ? this.userInfo.id.toString().padStart(6, '0') : '000000'}`
     }
   },
   onLoad() {
@@ -185,17 +190,33 @@ export default {
 .page {
   width: 100vw;
   height: 100vh;
-  display: flex;
+  background: #fae3e2;
-  align-items: center;
-  justify-content: center;
   transition: all 1s;
 }
 .certificate {
-  width: 100%;
+  width: 100vw;
+  height: 100vh;
   transition: all 1s;
-  background: #fbe6e8;
+  background: #fae3e2;
 
   position: relative;
+  .bkg-sun {
+    width: 100vw;
+    height: 100vh;
+    object-fit: cover;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .bkg-shuibaxian {
+    width: 100vw;
+    object-fit: contain;
+
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
   .bkg {
     width: 100%;
     object-fit: contain;
@@ -204,62 +225,67 @@ export default {
     position: relative;
   }
 
-  .icon1 {
+  .icons {
-    width: 47rpx;
+    display: flex;
-    object-fit: contain;
+    align-items: center;
 
-    position: absolute;
+    padding: 8.1vh 0 0 182rpx;
-    z-index: 1;
+    .icon1 {
-    top: 12.6%;
+      width: 173rpx;
-    left: calc(50% - 47rpx / 2);
+      object-fit: contain;
+
+    }
+    .icon2 {
+      width: 150rpx;
+      object-fit: contain;
+
+      margin-left: 63rpx;
+    }
   }
   .title {
-    width: 202rpx;
+    width: 386rpx;
     object-fit: contain;
+    display: block;
 
-    z-index: 1;
+    margin: 1vh auto 0 auto;
-    position: absolute;
-    top: 24.8%;
-    left: calc(50% - 202rpx / 2);
-  }
-  .no {
-    display: flex;
-    word-break: keep-all;
-    font-size: 20rpx;
-    color: #6b4e22;
-
-    z-index: 1;
-    position: absolute;
-    right: 75rpx;
-    top: 14.2%;
   }
   .text {
     color: #6b4e22;
     font-weight: 500;
 
-    z-index: 1;
+    padding-left: 77rpx;
-    position: absolute;
+    padding-right: 64rpx;
-    top: 42%;
+    padding-top: 1.46vh;
-    left: 94rpx;
+    position: relative;
-    right: 89rpx;
 
     &__name {
-      font-size: 32rpx;
+      font-size: 37rpx;
-      line-height: 38rpx;
+      line-height: 41rpx;
+      font-weight: 500;
     }
     &__content {
-      font-size: 24rpx;
+      font-size: 37rpx;
-      text-indent: 48rpx;
+      text-indent: 74rpx;
+      line-height: 60rpx;
+      font-weight: 500;
 
-      padding-top: 3.5%;
+      padding-top: 2.4vh;
+    }
+    &__icon3 {
+      display: block;
+      width: 260rpx;
+      object-fit: contain;
+
+      margin: 2.6vh auto 0 auto;
+      position: relative;
+      z-index: 3;
     }
     &__date {
-      font-size: 20rpx;
+      font-size: 24rpx;
-      line-height: 30rpx;
       word-break: keep-all;
       text-align: right;
 
-      padding-top: 6.8%;
+      padding-top: 3.2vh;
     }
   }
 }
@@ -267,7 +293,7 @@ export default {
   width: 100%;
   display: flex;
   justify-content: center;
-  transition: all 1s;
+  animation: fade-in 1s 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 
   position: fixed;
   bottom: 30rpx;

xietang-answer-h5/pages/certificate_old/certificate_old.vue

@@ -0,0 +1,413 @@
+<template>
+  <view class="page" :style="isRotate ? { 'background': '#333' } : ''">
+    <view ref="certificate"
+          id="certificate"
+          class="certificate"
+          :style="isRotate ? { 'transform': 'rotate(90deg)' + 'scale(' + scale + ',' + scale + ')' } : ''"
+          @click="imgClick">
+      <template v-if="imgData">
+        <img class="bkg" :src="imgData" alt="">
+      </template>
+      <template v-else>
+        <img class="bkg" :src="certificate" alt="">
+
+        <img class="icon1" :src="icon1" alt="">
+        <img class="title" :src="title" alt="">
+
+        <view class="no">
+          <view>
+            证书编号：
+          </view>
+          <view>
+            {{ no }}
+          </view>
+        </view>
+
+        <view class="text">
+          <view class="text__name">{{ userInfo.name || 'xx' }} 同志:</view>
+
+          <view class="text__content">
+            在2023-2024年度斜塘街道基层党员冬训答题活动中表现优异，特发此证。
+          </view>
+
+          <view class="text__date">
+            中共苏州工业园区斜塘街道工作委员会 <br>{{ nowDate }}
+          </view>
+        </view>
+      </template>
+    </view>
+
+    <view class="operate" :style="isRotate ? { 'opacity': 0 } : ''">
+		<view class="operate-item" @click="back">
+		  <u-image :src='backs' :fade="false" width="100rpx" height="100rpx" color="#000" size="100rpx"></u-image>
+		  <view class="operate-item__text">返回</view>
+		</view>
+      <view class="operate-item" @click="isShare = true">
+        <u-icon name="share-square" color="#000" size="100rpx"></u-icon>
+        <view class="operate-item__text">分享</view>
+      </view>
+      <view class="operate-item" @click="save">
+        <u-icon name="download" color="#000" size="100rpx"></u-icon>
+        <view class="operate-item__text">保存</view>
+      </view>
+
+    </view>
+
+    <transition name="share-pop" enter-active-class="fade-in" leave-to-class="fade-out">
+      <view class="share_cover" v-show="isShare" @click="isShare = false">
+        <image :src="toShare" class="share_cover_arrow"></image>
+        <view class="share_cover_word">
+          请点击右上角将它发送给指定朋友或分享到朋友圈
+        </view>
+      </view>
+    </transition>
+  </view>
+</template>
+
+<script>
+import html2canvas from "html2canvas";
+export default {
+  data() {
+    return {
+      isShare: false,
+      userInfo: {},
+      isRotate: false,
+      scale: 1,
+      imgData: '',
+	  certificate:require("../../static/certificate/certificate.png"),
+	  icon1:require("../../static/certificate/icon1.png"),
+	  title:require("../../static/certificate/title.png"),
+	  toShare:require("../../static/toShare.png"),
+	  backs:require("../../static/back.jpg")
+    };
+  },
+  methods: {
+	back(){
+		uni.redirectTo({
+			url:'/pages/me/me'
+		})
+	},
+    getUserInfo () {
+      this.util.request({
+        api: '/api/mobile/user/show',
+        method: 'GET',
+        utilSuccess: (res) => {
+          console.log(res)
+          this.userInfo = res;
+
+          this.$nextTick(() => {
+            this.domToImg()
+          })
+        },
+        utilFail: (res) => {
+          this.util.toast(res)
+        }
+      })
+    },
+
+    imgClick () {
+      if (this.scale === 1) {
+        this.getScaleRat()
+      }
+      this.isRotate = !this.isRotate
+    },
+
+    domToImg () {
+      const dom = document.querySelector('#certificate')
+      html2canvas(dom, {
+        width: dom.clientWidth, //dom 原始宽度
+        height: dom.clientHeight,
+        scrollY: 0,
+        scrollX: 0,
+        useCORS: true,
+      }).then(cnv => {
+        this.imgData = cnv.toDataURL('image/png', 1)
+      })
+    },
+
+    getScaleRat () {
+      this.$nextTick(() => {
+        const { width, height } = this.$refs['certificate']?.$el?.getBoundingClientRect()
+        const { innerWidth, innerHeight } = window
+        console.log(innerWidth, height)
+        this.scale = innerWidth / height
+      })
+    },
+
+    converToDate (date) {
+      let chinese = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
+      let y = date.getFullYear().toString();
+      let m = (date.getMonth()+1).toString();
+      let d = date.getDate().toString();
+      let result = "";
+      for (let i = 0; i < y.length; i++) {
+        result += chinese[y.charAt(i)];
+      }
+      result += "年";
+      if (m.length === 2) {
+        if (m.charAt(0) === "1") {
+          result += ("十" + chinese[m.charAt(1)] + "月");
+        }
+      } else {
+        result += (chinese[m.charAt(0)] + "月");
+      }
+      if (d.length === 2) {
+        result += (chinese[d.charAt(0)] + "十" + chinese[m.charAt(1)] + "日");
+      } else {
+        result += (chinese[d.charAt(0)] + "日");
+      }
+      return result;
+    },
+
+
+    save() {
+      uni.showToast({
+        title: "请长按分享图片进行保存或者分享",
+        icon: "none"
+      })
+    }
+  },
+  computed: {
+    nowDate () {
+       return this.converToDate(new Date())
+    },
+    no () {
+       return `${new Date().getFullYear()}${this.userInfo.id ? this.userInfo.id.toString().padStart(6, '0') : '000000'}`
+    }
+  },
+  onLoad() {
+    this.getUserInfo()
+  }
+}
+</script>
+
+<style lang="scss">
+.page {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 1s;
+}
+.certificate {
+  width: 100%;
+  transition: all 1s;
+  background: #fbe6e8;
+
+  position: relative;
+  .bkg {
+    width: 100%;
+    object-fit: contain;
+
+    z-index: 0;
+    position: relative;
+  }
+
+  .icon1 {
+    width: 47rpx;
+    object-fit: contain;
+
+    position: absolute;
+    z-index: 1;
+    top: 12.6%;
+    left: calc(50% - 47rpx / 2);
+  }
+  .title {
+    width: 202rpx;
+    object-fit: contain;
+
+    z-index: 1;
+    position: absolute;
+    top: 24.8%;
+    left: calc(50% - 202rpx / 2);
+  }
+  .no {
+    display: flex;
+    word-break: keep-all;
+    font-size: 20rpx;
+    color: #6b4e22;
+
+    z-index: 1;
+    position: absolute;
+    right: 75rpx;
+    top: 14.2%;
+  }
+  .text {
+    color: #6b4e22;
+    font-weight: 500;
+
+    z-index: 1;
+    position: absolute;
+    top: 42%;
+    left: 94rpx;
+    right: 89rpx;
+
+    &__name {
+      font-size: 32rpx;
+      line-height: 38rpx;
+    }
+    &__content {
+      font-size: 24rpx;
+      text-indent: 48rpx;
+
+      padding-top: 3.5%;
+    }
+    &__date {
+      font-size: 20rpx;
+      line-height: 30rpx;
+      word-break: keep-all;
+      text-align: right;
+
+      padding-top: 6.8%;
+    }
+  }
+}
+.operate {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  transition: all 1s;
+
+  position: fixed;
+  bottom: 30rpx;
+
+  &-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    &__text {
+      font-size: 26rpx;
+    }
+  }
+  .operate-item + .operate-item {
+    margin-left: 80rpx;
+  }
+}
+
+
+.share_cover {
+  background: rgba(0, 0, 0, 0.8);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 100vh;
+  width: 100vw;
+  z-index: 100000;
+
+  .share_cover_word {
+    color: #FFFFFF;
+    font-size: 48rpx;
+    width: 60%;
+    margin: 400rpx auto;
+    text-align: center;
+    line-height: 40px;
+
+  }
+
+  .share_cover_arrow {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 300rpx;
+    height: 400rpx;
+  }
+}
+.share {
+  min-height: 100vh;
+  overflow-y: scroll;
+
+  padding: 278rpx 0;
+  z-index: 2;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+
+  &-mask {
+    background: rgba(0, 0, 0, 0.4);
+
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  &-page {
+    width: fit-content;
+    overflow: scroll;
+
+    transform: translate(-50%, -50%);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    right: 0;
+
+    &>image {
+      width: 520rpx;
+      height: auto;
+      display: block;
+      border: 6rpx solid #F8E3CF;
+      box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(19, 1, 2, 0.71);
+
+      margin: auto;
+    }
+
+    &__btn {
+      display: flex;
+      justify-content: center;
+
+      padding-top: 52rpx;
+
+      &>view {
+        width: 230rpx;
+        height: 66rpx;
+        background: linear-gradient(0deg, #EFC495, #E9BC8A);
+        border-radius: 34rpx;
+        text-align: center;
+        font-weight: 400;
+        line-height: 66rpx;
+        font-size: 26rpx;
+        letter-spacing: 8rpx;
+        color: #C93E31;
+      }
+
+      &--share {
+
+        margin-right: 60rpx;
+      }
+    }
+  }
+}
+.fade-in {
+  animation: fade-in 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.fade-out {
+  animation: fade-out .8s ease-out both;
+}
+
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+</style>