Browse Source

feat:开票信息确认

DaMoWang 3 years ago
parent
commit
15f6527fe6
2 changed files with 112 additions and 6 deletions
  1. 3 3
      src/app.scss
  2. 109 3
      src/pagesB/invoice/editinvoice.vue

+ 3 - 3
src/app.scss

@@ -28,9 +28,9 @@ view, text, div {word-break: break-all;color:#333;font-family: "SourceHanSansSC-
 /* CDN 服务仅供平台体验和调试使用,平台不承诺服务的稳定性,企业客户需下载字体包自行发布使用并做好备份。 */
 @font-face {
     font-family: 'iconfont';  /* Project id 3748689 */
-    src: url('//at.alicdn.com/t/c/font_3748689_26h36xgou4i.woff2?t=1671707382001') format('woff2'),
-         url('//at.alicdn.com/t/c/font_3748689_26h36xgou4i.woff?t=1671707382001') format('woff'),
-         url('//at.alicdn.com/t/c/font_3748689_26h36xgou4i.ttf?t=1671707382001') format('truetype');
+    src: url('//at.alicdn.com/t/c/font_3748689_ko4q3vq3k8a.woff2?t=1672035098208') format('woff2'),
+         url('//at.alicdn.com/t/c/font_3748689_ko4q3vq3k8a.woff?t=1672035098208') format('woff'),
+         url('//at.alicdn.com/t/c/font_3748689_ko4q3vq3k8a.ttf?t=1672035098208') format('truetype');
   }
 .iconfont {
     font-family: "iconfont" !important;

+ 109 - 3
src/pagesB/invoice/editinvoice.vue

@@ -6,7 +6,7 @@
     <div class="tit">发票详情</div>
     <div class="formBar">
         <div class="form-item flex_r flex_jb">
-            <div class="label">抬头类型</div>
+            <div class="label">发票类型</div>
             <div class="input">增值税电子普通发票</div>
         </div>
         <div class="form-item flex_r flex_jb">
@@ -44,13 +44,49 @@
             <input class="input" placeholder="请填写手机号码" :value="userinfo.mobile" disabled/>
         </div>
     </div>
-    <div class="submitBtn">提交</div>
+    <div class="submitBtn" @click="onsubmitBtn">提交</div>
+    <uni-popup ref="uniPopup" type="bottom">
+        <div class="uniPopup_Box">
+            <div class="Popup_tit">开票信息确认</div>
+            <div class="closeBtn iconfont" @click="closeBtn">&#xe609;</div>
+            <div class="infoLi">
+                <div class="info-item flex_r flex_jb">
+                    <div class="label">发票抬头</div>
+                    <div class="input">增值税电子普通发票</div>
+                </div>
+                <div class="info-item flex_r flex_jb">
+                    <div class="label">税号</div>
+                    <div class="input">增值税电子普通发票</div>
+                </div>
+                <div class="info-item flex_r flex_jb">
+                    <div class="label">价税合计</div>
+                    <div class="input">增值税电子普通发票</div>
+                </div>
+                <div class="info-item flex_r flex_jb">
+                    <div class="label">电子邮箱</div>
+                    <div class="input">增值税电子普通发票</div>
+                </div>
+                <div class="info-item flex_r flex_jb">
+                    <div class="label">手机号码</div>
+                    <div class="input">增值税电子普通发票</div>
+                </div>
+            </div>
+            <div class="btn-bar flex_r flex_jb">
+                <div class="btn-item">重置</div>
+                <div class="btn-item confirm">确认</div>
+            </div>
+        </div>
+    </uni-popup>
   </div>
 </template>
 <script>
+import uniPopup from "@/components/uni-popup/uni-popup.vue";
 import { get, post } from "@/request/api.js";
 export default {
   name: "editinvoice",
+  components: {
+    uniPopup,
+  },
   data() {
     return {
             type: 1,
@@ -68,7 +104,15 @@ export default {
   onLaunch() {},
   onShow() {},
   onHide() {},
-  methods: {},
+  methods: {
+    onsubmitBtn(){
+        this.$refs.uniPopup.open();
+    },
+    // 点击关闭弹窗
+    closeBtn() {
+      this.$refs.uniPopup.close();
+    },
+  },
   computed: {},
   watch: {},
 };
@@ -140,4 +184,66 @@ page {
         bottom: 46rpx;
     }
 }
+.uniPopup_Box{
+    min-height: 60vh;
+    background: #fff;
+    border-radius: 36rpx 36rpx 0 0;
+    padding: 0 36rpx 36rpx;
+    position: relative;
+    .Popup_tit{
+        font-size: 32rpx;
+        font-weight: bold;
+        padding: 30rpx 0;
+        text-align: center;
+    }
+    .closeBtn{
+        position: absolute;
+        right: 30rpx;
+        top: 26rpx;
+        font-size: 43rpx;
+        color: #555;
+    }
+    .infoLi{
+        padding: 20rpx 36rpx;
+        background: #FAFAFA;
+        border-radius: 16rpx;
+        .info-item{
+            margin-bottom: 26rpx;
+            font-size: 30rpx;
+            &:last-child{
+                margin-bottom: 0;
+            }
+            .label{
+                width: 140rpx;
+                color: #333;
+                text-align: justify;
+                text-align-last: justify;
+            }
+            .input{
+                width: calc(100% - 140rpx);
+                text-align: right;
+                color: #666;
+            }
+        }
+    }
+    .btn-bar{
+        width: calc(100% - 72rpx);
+        height: 80rpx;
+        line-height: 80rpx;
+        border-radius: 40rpx;
+        position: absolute;
+        bottom: 36rpx;
+        left: 36rpx;
+        border: 1px solid #18bb88;
+        .btn-item{
+            width: 50%;
+            text-align: center;
+        }
+        .confirm{
+            background: #18bb88;
+            color: #fff;
+            border-radius: 0 40rpx 40rpx 0;
+        }
+    }
+}
 </style>