增加banner图片裁切功能

src/views/proof/Index.vue

 <template>
   <div class="proof-list">
+    <van-image src="@/assets/addproof.png" width="50px" fit="contain" class="add-proof"></van-image>
     <header>
       <span style="font-size:18px;font-weight:500;">存证列表</span>
       <div @click="showFilterPicker = true">
         <common-svg name="shaixuan"></common-svg>
         <span>筛选</span>
-      </div> 
+      </div>
     </header>
     <van-list
       v-model="loading"
@@ -328,11 +329,17 @@ export default class Index extends Vue {
 </script>
 <style scoped lang="scss">
   .proof-list{
+    position: relative;
     box-sizing: border-box;
     padding: 11px 14px;
     background: #F9FBFF;
     margin-bottom: $tabHeight;
   }
+  .add-proof{
+    position: fixed;
+    right: 20px;
+    bottom: 60px;
+  }
   header{
     display: flex;
     justify-content: space-between;

src/views/proof/components/AddBanner.vue

@@ -5,8 +5,9 @@
       position="bottom" 
       :close-on-click-overlay="false"
       :style="{height: '100%'}">
-       <label>
-        <input type="file" name="img"  @change="change" style="display:none;">
+      <input type="file" name="img" @change="change" id="input123" style="display:none;">
+      <h5-cropper :option="option" hide-input @getFile="getFile" ref="cropper"></h5-cropper>
+      <label for="input123">
          <div class="add">
             <common-svg name="Droptheelements" width="33px" height="33px"></common-svg>
             <div style="color:#EBEBEB;font-size: 14px;">增加Banner图</div>
@@ -24,10 +25,12 @@
             />
          </div>
        </div>
-       <div>1、最多可添加四张banner图
-              2、建议350（宽）x140（高）的比例
-              3、最大限制2M
-              4、文件类型：PNG/JPG/GIF（无动态化）</div>
+       <ul style="text-align:left;padding:12px;color:#818181;font-size:12px;">
+         <li>1、最多可添加四张banner图</li>
+         <li>2、建议350（宽）x140（高）的比例</li>
+         <li>3、最大限制2M</li>
+         <li>4、文件类型：PNG/JPG/GIF（无动态化）</li>
+       </ul>
       <div class="btn-group">
         <div class="left" @click="save">仅保存</div>
         <div class="right" @click="saveAndChain">保存并上链</div>
@@ -37,6 +40,7 @@
 <script lang="ts">
 import { Component, Prop, Watch, Vue, Emit } from 'vue-property-decorator';
 import { Button, Field, Popup, Image } from 'vant';
+import H5Cropper from 'vue-cropper-h5';
 import { Getter } from 'vuex-class';
 import { TemplateDataItem } from '@/const/interface';
 import { Route } from 'vue-router';
@@ -46,6 +50,7 @@ import { Route } from 'vue-router';
     [Field.name]: Field,
     [Popup.name]: Popup,
     [Image.name]: Image,
+    H5Cropper,
   },
 })
 export default class AddBanner extends Vue {
@@ -55,7 +60,9 @@ export default class AddBanner extends Vue {
   private banners!: string[];
   private imgs: any[]  = [];
   private show: boolean = true;
-  private option: any = {};
+  private option: any = {
+    fixedNumber: [35,14],
+  };
   @Watch('banners', { immediate: true, deep: true })
   private async onChange(newVal: [], oldVal: []) {
     if (newVal.length <= 0) {
@@ -69,14 +76,18 @@ export default class AddBanner extends Vue {
   private del(index: number) {
     this.imgs.splice(index, 1);
   }
-  private change(e: any) {
-    const input = e.target;
-    const files = input.files;
-    if (files && files[0]) {
-      this.$api.file.upload(files[0]).then((res: any) => {
+  private getFile(file: any) {
+    this.$api.file.upload(file).then((res: any) => {
         this.imgs.push(res);
-      });
+    });
+  }
+  private change(e: any) {
+    if (this.imgs.length >= 4) {
+      this.$toast("最多上传4张banner图");
+      return;
     }
+    (this.$refs.cropper as any).loadFile(e.target.files[0]);
+    e.target.value = '';
   }
   get hashs() {
     return this.imgs.map( (img: any) => img.hash );
@@ -93,6 +104,9 @@ export default class AddBanner extends Vue {
 </script>
 <style scoped lang="scss">
   .addBanner{
+    .upbtn{
+      height: 0;
+    }
     .add{
       position:relative;
       display: flex;

src/views/proof/components/AddBaseinfo.vue

+<template>
+    <van-popup
+     class="add-baseinfo"
+     v-model="show"
+      position="bottom" 
+      :close-on-click-overlay="false"
+      :style="{height: '80%'}">
+       <van-field v-model="proofName"></van-field>
+    </van-popup>
+</template>
+<script lang="ts">
+import { Component, Prop, Watch, Vue, Emit } from 'vue-property-decorator';
+import { Button, Field, Popup, Image } from 'vant';
+import { Getter } from 'vuex-class';
+import { TemplateDataItem } from '@/const/interface';
+import { Route } from 'vue-router';
+@Component({
+  components: {
+    [Button.name]: Button,
+    [Field.name]: Field,
+    [Popup.name]: Popup,
+    [Image.name]: Image,
+  },
+})
+export default class AddBaseinfo extends Vue {
+  private proofName: string = '';
+}
+</script>
+<style scoped lang="scss">
+  .addBanner{
+    .add{
+      position:relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      height: 170px;
+      text-align: center;
+      background: #353535;
+      color: #FFFFFF;
+    }
+    .preview{
+      display: grid;
+      grid-template-columns: repeat(auto-fill, 70px);
+      gap: 10px;
+      padding: 17px;
+    }
+    .btn-group{
+      .left,.right{
+        flex: auto;
+      }
+      .left{
+        width:160px;
+        height:40px;
+        line-height: 40px;
+        border-radius:4px;
+        border:1px solid rgba(238,238,238,1);
+      }
+      .right{
+        margin-left: 10px;
+        width:160px;
+        height:40px;
+        line-height: 40px;
+        background:linear-gradient(360deg,rgba(93,123,246,1) 0%,rgba(108,122,254,1) 100%);
+        box-shadow:0px 2px 10px 0px rgba(63,121,254,0.4);
+        border-radius:4px;
+        color: #FFFFFF;
+      }
+    }
+  }
+</style>
\ No newline at end of file

src/views/userCenter/Recharge.vue

@@ -48,12 +48,14 @@
       </p>
     </section>
     <section class="confirm-recharge" v-if="confirm">
-        <div class="box">
-            <div>确认付款</div>
-            <div>{{price}}</div>
-            <div>{{chainTimes}}</div>
-            <div>微信支付</div>
-            <a :href="payUrl">立即充值</a>
+        <div class="box" style="text-align:center;">
+            <div style="color:#353535;font-size:20px;">确认付款</div>
+            <div style="color:#353535;font-size: 40px;">{{price}}</div>
+            <div style="color:#B6B7B9;font-size: 16px;">{{chainTimes}}</div>
+            <div>{{method === 0? '支付宝支付': '微信支付'}}</div>
+            <a :href="payUrl" style="background:linear-gradient(180deg,rgba(70,103,250,1) 0%,rgba(91,119,244,1) 100%);
+box-shadow:0px 2px 15px 0px rgba(63,121,254,0.42);width:200px;height:40px;line-height:40px;
+border-radius:4px;">立即充值</a>
         </div>
     </section>
   </div>

src/views/userCenter/RechargeRecord.vue

 <template>
   <div class="recharge-record">
-      <p>充值记录</p>
+      <p style="font-weight:500;">充值记录</p>
       <ul>
         <li class="item" v-for="{id, name, chain_times, pay_time} in recordList" :key="id">
           <div>{{name}}</div>