开始做发票

pages/invoicing/components/card/index.js

@@ -0,0 +1,24 @@
+// pages/invoicing/components/card/index.js
+Component({
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    title: String,
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})

pages/invoicing/components/card/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

pages/invoicing/components/card/index.wxml

@@ -0,0 +1,7 @@
+<!--pages/invoicing/components/card/index.wxml-->
+<view class="cardBox">
+  <view class="title"> {{ title }} </view>
+  <view class="content">
+    <slot />
+  </view>
+</view>

pages/invoicing/components/card/index.wxss

@@ -0,0 +1,17 @@
+/* pages/invoicing/components/card/index.wxss */
+.cardBox {
+  margin-left: 32rpx;
+  margin-right: 32rpx;
+  padding: 2rpx 24rpx 24rpx;
+  background-color: #fff;
+  border-radius: 20rpx;
+}
+
+.title {
+  font-size: 38rpx;
+  font-weight: 600;
+  border-bottom: 1rpx solid #ccc;
+  height: 80rpx;
+  line-height: 80rpx;
+  margin-bottom: 24rpx;
+}

pages/invoicing/index.js

@@ -9,6 +9,7 @@ Page({
     tenement: "",
     ids: [],
     count: 0,
+    show: false,
   },
 
   /**
@@ -33,7 +34,9 @@ Page({
   onShow() {
 
   },
-
+  changeShow() {
+    this.setData({ show: true })
+  },
   /**
    * 生命周期函数--监听页面隐藏
    */

pages/invoicing/index.json

@@ -1,7 +1,12 @@
 {
   "usingComponents": {
     "navigator": "/components/navigator/index",
-    "van-button": "@vant/weapp/button/index"
+    "van-button": "@vant/weapp/button/index",
+    "card": "./components/card/index",
+    "van-radio": "@vant/weapp/radio/index",
+    "van-radio-group": "@vant/weapp/radio-group/index",
+    "van-field": "@vant/weapp/field/index",
+    "van-dialog": "@vant/weapp/dialog/index"
   },
   "navigationStyle": "custom"
 }

pages/invoicing/index.wxml

@@ -1,14 +1,129 @@
 <!--pages/invoicing/index.wxml-->
-<navigator title="1111" canBack="{{true}}" />
+<navigator title="发票开具" canBack="{{true}}" />
 <view class="info">
-  <view class="money"> 发票金额：<text class="moneyNumber"> {{money}} </text>  </view>
+  <view class="money"> 发票金额：<text class="moneyNumber"> ￥ {{money}} </text>  </view>
   <view class="content">发票内容：<text class="contentText">电费</text> </view>
 </view>
-<view class="type"></view>
-
+<view>
+  <card title="发票类型">
+    <van-radio-group disabled="{{true}}"  direction="horizontal">
+      <van-radio name="1" icon-size="30rpx" style="font-size: 32rpx;margin-bottom: 20rpx;">普通电子发票</van-radio>
+      <van-radio name="2" icon-size="30rpx" style="font-size: 32rpx;">增值税专用电子发票</van-radio>
+    </van-radio-group>
+  </card>
+</view>
+<view class="cardWrapper">
+  <card title="发票详情">
+    <van-field
+      value="{{ detail.name }}"
+      label="抬头类型"
+      border="{{ false }}"
+      readonly
+      title-width="132rpx"
+    >
+      <view slot="input" style="margin-top: 16rpx;">
+        <van-radio-group disabled="{{true}}"  direction="horizontal">
+          <van-radio name="1" icon-size="30rpx" style="font-size: 30rpx;margin-bottom: 20rpx;">企业单位</van-radio>
+          <van-radio name="2" icon-size="30rpx" style="font-size: 30rpx;">个人/非企业单位</van-radio>
+        </van-radio-group>
+      </view>
+    
+    </van-field>
+    <van-field
+      value="{{ '河北华昌宝能售电有限公司' }}"
+      label="发票抬头"
+      readonly
+      title-width="132rpx"
+      disabled="{{true}}"
+    />
+    <van-field
+      value="{{ '河北华昌宝能售电有限公司' }}"
+      label="发票税号"
+      readonly
+      title-width="132rpx"
+      disabled="{{true}}"
+    />
+    <van-field
+      value="{{ '河北华昌宝能售电有限公司' }}"
+      label="开户行"
+      readonly
+      title-width="132rpx"
+      disabled="{{true}}"
+    />
+    <van-field
+      value="{{ '河北华昌宝能售电有限公司' }}"
+      label="银行账号"
+      readonly
+      title-width="132rpx"
+      disabled="{{true}}"
+    />
+    <van-field
+      value="{{ '河北华昌宝能售电有限公司' }}"
+      label="地址"
+      readonly
+      title-width="132rpx"
+      disabled="{{true}}"
+    />
+    <van-field
+      value="{{ '河北华昌宝能售电有限公司' }}"
+      label="电话"
+      readonly
+      title-width="132rpx"
+      disabled="{{true}}"
+    />
+    <van-field
+      value="{{ '河北华昌宝能售电有限公司' }}"
+      label="备注说明"
+      title-width="132rpx"
+    />
+  </card>
+</view>
 <view class="content">
 
 </view>
 <view class="submit">
-  <van-button type="info" block> 提交 </van-button>
-</view>
+  <van-button type="info" block bind:click="changeShow"> 立即申请 </van-button>
+</view>
+
+<van-dialog
+  use-slot
+  title="确认开具"
+  show="{{ show }}"
+  show-cancel-button
+>
+  <view class="modalContentWrapper">
+    <van-field
+      value="{{ '河北华昌宝能售电有限公司' }}"
+      label="发票抬头"
+      readonly
+      type="textarea"
+      autosize="{{true}}"
+      title-width="132rpx"
+      border="{{false}}"
+    />
+    <van-field
+      value="{{ 99.99 }}"
+      label="发票金额"
+      readonly
+      title-width="132rpx"
+      border="{{false}}"
+    />
+    <van-field
+      value="{{ '普通发票' }}"
+      label="发票类型"
+      readonly
+      title-width="132rpx"
+      border="{{false}}"
+    />
+    <van-field
+      value="{{ '123456@qq.com' }}"
+      label="邮箱地址"
+      readonly
+      title-width="132rpx"
+      type="textarea"
+      autosize="{{true}}"
+      border="{{false}}"
+    />
+  </view>
+ 
+</van-dialog>

pages/invoicing/index.wxss

@@ -4,6 +4,7 @@
   margin-left: 32rpx;
   margin-right: 32rpx;
   margin-bottom: 40rpx;
+  padding-bottom: 40rpx;
 }
 
 .info {
@@ -29,3 +30,15 @@
 page {
   background-color: var(--transparent-green);
 }
+
+.cardWrapper {
+  margin-top: 30rpx;
+}
+
+.van-cell {
+  padding-left: 0rpx !important;
+  padding-right: 0rpx !important;
+}
+.modalContentWrapper{
+  margin: 20rpx 30rpx;
+}