开始做开票信息编辑

pages/invoiceList/components/info/index.js

@@ -1,4 +1,5 @@
-import { getInvoiceInfoList } from "../../../../service/invoice"
+import { getInvoiceInfo, updateInvoiceInfo } from "../../../../service/invoice"
+import { alertInfo, alertSuccess } from "../../../../utils/index";
 
 // pages/invoiceList/components/info/index.js
 Component({
@@ -11,20 +12,92 @@ Component({
   },
   lifetimes: {
     attached() {
-      getInvoiceInfoList()
+      this.getDetail();
     }
   },
   /**
    * 组件的初始数据
    */
   data: {
-
+    detail: { name: wx.getStorageSync('tenement')?.name,  },
+    formData: {headerType: 0,},
+    editType: "detail"
   },
 
   /**
    * 组件的方法列表
    */
   methods: {
-
+    async getDetail() {
+      const { code, message, data } = await getInvoiceInfo()
+      
+      this.setData({ detail: {...data, },editType: 'detail', formData: {} })
+    },
+    changeEditType() {
+      this.setData({ editType: 'edit', formData: this.data.detail })
+    },
+    cancelEdit() {
+      this.setData({ editType: 'detail', formData: {} })
+    },
+    onChangeType(e) {
+      const { formData } = this.data;
+      this.setData({ formData: {...formData, type: e.detail} })
+    },
+    onChangeHeaderType(e) {
+      const { formData } = this.data;
+      this.setData({ formData: {...formData, headerType: e.detail} })
+    },
+    onChangeText(e) {
+      const { name } = e.currentTarget.dataset;
+      const { formData } = this.data;
+      this.setData({ formData: {...formData, [name]: e.detail} })
+    },
+    async submit() {
+      const { formData } = this.data;
+      const { tin, address, phone, bank, account, email, type, headerType, name } = formData;
+      if (type !== 0 && type !== 1) {
+        alertInfo("请选择发票类型");
+        return;
+      }
+      if (headerType !== 0 && headerType !== 1) {
+        alertInfo("请选择抬头类型");
+        return;
+      }
+      if (headerType === 1) {
+        if (!name) {
+          alertInfo("请输入发票抬头")
+          return
+        }
+      }
+      if (!email || !/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(email)) {
+        alertInfo("邮箱格式不正确")
+        return;
+      }
+      if (headerType === 0) {
+        if (!tin) {
+          alertInfo("请输入发票税号")
+          return;
+        }
+        // if (!address) {
+        //   alertInfo("请输入地址")
+        //   return;
+        // }
+        if (!phone) {
+          alertInfo("请输入电话")
+          return;
+        }
+        if (!bank) {
+          alertInfo("请输入开户行")
+          return;
+        }
+        if (!account) {
+          alertInfo("请输入银行账号")
+          return;
+        }
+      }
+      const { code, message } = await updateInvoiceInfo(formData)
+      alertSuccess("编辑成功")
+      this.getDetail()
+    }
   }
 })

pages/invoiceList/components/info/index.json

@@ -1,4 +1,11 @@
 {
   "component": true,
-  "usingComponents": {}
+  "usingComponents": {
+    "card": "/components/card/index",
+    "van-icon": "@vant/weapp/icon/index",
+    "van-field": "@vant/weapp/field/index",
+    "van-radio": "@vant/weapp/radio/index",
+    "van-radio-group": "@vant/weapp/radio-group/index",
+    "van-button": "@vant/weapp/button/index"
+  }
 }

pages/invoiceList/components/info/index.wxml

@@ -1,2 +1,240 @@
 <!--pages/invoiceList/components/info/index.wxml-->
-<text>pages/invoiceList/components/info/index.wxml</text>
+<view class="cardWrapper">
+  <card title="发票详情">
+    <view 
+      slot="operate" 
+      class="cardOperate"
+      wx:if="{{editType === 'detail'}}"
+      bind:tap="changeEditType"
+    > 
+      <van-icon name="edit" /> 
+      <view class="editContent">修改</view> 
+    </view>
+    
+    <view slot="content">
+      <van-field
+        label="发票类型"
+        readonly="{{editType === 'detail'}}"
+        autosize="{{true}}"
+        type="textarea"
+        custom-style="padding-left: 0; padding-right: 0;"
+        title-width="132rpx"
+        border="{{ editType === 'detail' ? false : true }}"
+      >
+        <view slot="input" style="margin-top: 16rpx;" wx:if="{{editType === 'edit'}}">
+          <van-radio-group direction="horizontal" value="{{formData.type}}" bind:change="onChangeType">
+            <van-radio name="{{0}}" icon-size="30rpx" style="font-size: 30rpx;margin-bottom: 20rpx;">普通电子</van-radio>
+            <van-radio name="{{1}}" icon-size="30rpx" style="font-size: 30rpx;">增值税专用电子</van-radio>
+          </van-radio-group>
+        </view>
+        
+        <view wx:else slot="input" style="margin-top: -10rpx;"> 
+          <view wx:if="{{formData.type === 0}}"> 普通电子发票 </view>
+          <view wx:elif="{{formData.type === 1}}"> 增值税专用电子发票 </view>
+          <view wx:else>-</view>
+        </view>
+      </van-field>
+      <van-field
+        label="抬头类型"
+        readonly="{{editType === 'detail'}}"
+        autosize="{{true}}"
+        type="textarea"
+        custom-style="padding-left: 0; padding-right: 0;"
+        title-width="132rpx"
+        border="{{ editType === 'detail' ? false : true }}"
+      >
+        <view slot="input" style="margin-top: 16rpx;" wx:if="{{editType === 'edit'}}">
+          <van-radio-group direction="horizontal"  bind:change="onChangeHeaderType">
+            <van-radio name="{{0}}" icon-size="30rpx" style="font-size: 30rpx;margin-bottom: 20rpx;">企业单位</van-radio>
+            <van-radio name="{{1}}" icon-size="30rpx" style="font-size: 30rpx;">个人/非企业单位</van-radio>
+          </van-radio-group>
+        </view>
+        <view 
+          wx:else  
+          slot="input" 
+          style="margin-top: -10rpx;"
+        > 
+          <view wx:if="{{formData.headerType === 0}}"> 企业单位 </view>
+          <view wx:elif="{{formData.headerType === 1}}"> 个人/非企业单位 </view>
+          <view wx:else>-</view>
+        </view>
+      </van-field>
+      <van-field
+        value="{{detail.name}}"
+        label="发票抬头"
+        custom-style="padding-left: 0; padding-right: 0;"
+        readonly="{{editType === 'detail'}}"
+        disabled="{{editType === 'edit' && formData.headerType !== 1}}"
+        autosize="{{true}}"
+        type="textarea"
+        title-width="132rpx"
+        bind:change="onChangeText"
+        data-name="name"
+        bind:change="onChangeText"
+        border="{{ editType === 'detail' ? false : true }}"
+      >
+        <view 
+          wx:if="{{editType === 'detail' && !detail.name}}"  
+          slot="input" 
+        > 
+          <view>-</view>
+        </view>
+      </van-field>
+      <van-field
+        value="{{detail.tin}}"
+        label="发票税号"
+        wx:if="{{formData.headerType === 0}}"
+        placeholder="{{editType === 'edit' ? '请输入发票税号' : ''}}"
+        custom-style="padding-left: 0; padding-right: 0;"
+        readonly="{{editType === 'detail'}}"
+        autosize="{{true}}"
+        type="textarea"
+        title-width="132rpx"
+        bind:change="onChangeText"
+        data-name="tin"
+        border="{{ editType === 'detail' ? false : true }}"
+      >
+        <view 
+          wx:if="{{editType === 'detail' && !detail.tin}}"  
+          slot="input" 
+        > 
+          <view>-</view>
+        </view>
+      </van-field>
+      <van-field
+        value="{{detail.bank}}"
+        label="开户行"
+        wx:if="{{formData.headerType === 0}}"
+        placeholder="{{editType === 'edit' ? '请输入开户行' : ''}}"
+        custom-style="padding-left: 0; padding-right: 0;"
+        readonly="{{editType === 'detail'}}"
+        autosize="{{bank}}"
+        type="textarea"
+        title-width="132rpx"
+        border="{{ editType === 'detail' ? false : true }}"
+        bind:change="onChangeText"
+        data-name="bank"
+      >
+        <view 
+          wx:if="{{editType === 'detail' && !detail.bank}}"  
+          slot="input" 
+        > 
+          <view>-</view>
+        </view>
+      </van-field>
+      <van-field
+        value="{{detail.account}}"
+        label="银行账号"
+        wx:if="{{formData.headerType === 0}}"
+        placeholder="{{editType === 'edit' ? '请输入银行账号' : ''}}"
+        custom-style="padding-left: 0; padding-right: 0;"
+        readonly="{{editType === 'detail'}}"
+        autosize="{{true}}"
+        type="textarea"
+        title-width="132rpx"
+        border="{{ editType === 'detail' ? false : true }}"
+        bind:change="onChangeText"
+        data-name="account"
+      >
+        <view 
+          wx:if="{{editType === 'detail' && !detail.account}}"  
+          slot="input" 
+        > 
+          <view>-</view>
+        </view>
+      </van-field>
+      <van-field
+        value="{{detail.address}}"
+        label="地址"
+        wx:if="{{formData.headerType === 0}}"
+        placeholder="{{editType === 'edit' ? '请输入地址' : ''}}"
+        custom-style="padding-left: 0; padding-right: 0;"
+        readonly="{{editType === 'detail'}}"
+        autosize="{{true}}"
+        type="textarea"
+        title-width="132rpx"
+        border="{{ editType === 'detail' ? false : true }}"
+        bind:change="onChangeText"
+        data-name="address"
+      >
+        <view 
+          wx:if="{{editType === 'detail' && !detail.address}}"  
+          slot="input" 
+        > 
+          <view>-</view>
+        </view>
+      </van-field>
+      <van-field
+        value="{{detail.phone}}"
+        label="电话"
+        wx:if="{{formData.headerType === 0}}"
+        placeholder="{{editType === 'edit' ? '请输入电话' : ''}}"
+        custom-style="padding-left: 0; padding-right: 0;"
+        readonly="{{editType === 'detail'}}"
+        autosize="{{true}}"
+        type="textarea"
+        title-width="132rpx"
+        border="{{ editType === 'detail' ? false : true }}"
+        bind:change="onChangeText"
+        data-name="phone"
+      >
+        <view 
+          wx:if="{{editType === 'detail' && !detail.phone}}"  
+          slot="input" 
+        > 
+          <view>-</view>
+        </view>
+      </van-field>
+      <van-field
+        value="{{detail.remark}}"
+        label="备注"
+        placeholder="{{editType === 'edit' ? '请输入备注' : ''}}"
+        custom-style="padding-left: 0; padding-right: 0;"
+        readonly="{{editType === 'detail'}}"
+        autosize="{{true}}"
+        type="textarea"
+        title-width="132rpx"
+        border="{{ editType === 'detail' ? false : true }}"
+        bind:change="onChangeText"
+        data-name="remark"
+      >
+        <view 
+          wx:if="{{editType === 'detail' && !detail.remark}}"  
+          slot="input" 
+        > 
+          <view>-</view>
+        </view>
+      </van-field>
+    </view>
+  </card>
+</view>
+<view class="cardWrapper" style="margin-bottom: 40rpx;">
+  <card title="接收信息">
+    <view slot="content"> 
+      <van-field
+        value="{{detail.email}}"
+        label="电子邮箱"
+        custom-style="padding-left: 0; padding-right: 0;"
+        readonly="{{editType === 'detail'}}"
+        autosize="{{true}}"
+        type="textarea"
+        title-width="132rpx"
+        border="{{ editType === 'detail' ? false : true }}"
+        bind:change="onChangeText"
+        data-name="email"
+      >
+        <view 
+          wx:if="{{editType === 'detail' && !detail.email}}"  
+          slot="input" 
+        > 
+          <view>-</view>
+        </view>
+      </van-field>
+    </view>
+  </card>
+</view>
+
+<view class="submit" wx:if="{{editType === 'edit'}}">
+  <van-button block class="cancelEdit" bind:click="cancelEdit">取消编辑</van-button>
+  <van-button type="info" block class="save" bind:click="submit">保存</van-button>
+</view>

pages/invoiceList/components/info/index.wxss

@@ -1 +1,34 @@
-/* pages/invoiceList/components/info/index.wxss */
+/* pages/invoiceList/components/info/index.wxss */
+.cardOperate {
+  display: flex;
+  align-items: center;
+  font-size: 32rpx;
+}
+
+.cardWrapper {
+  margin-top: 30rpx;
+}
+
+.editContent {
+  margin-left: 20rpx;
+}
+
+.van-cell {
+  padding-left: 0rpx !important;
+  padding-right: 0rpx !important;
+}
+
+.submit {
+  margin: 32rpx;
+  margin-bottom: 50rpx;
+  display: flex;
+  align-items: center;
+}
+
+.cancelEdit, .save {
+  flex: 1;
+}
+
+.cancelEdit {
+  margin-right: 40rpx;
+}