BJ_web_developers / jy_parkingOS

Commit 7f3bad7f1b372bcb45adff63e5be69ce9365cdf9

Authored by chenbiao
1 parent 9c71fb38

add 发票抬头：查看 编辑 新增； 发票表单结算 填充 确认

Inline Side-by-side
Showing 8 changed files with 603 additions and 2 deletions
common/uni.css
  View file @7f3bad7
@@ -1748,6 +1748,10 @@ checkbox-group label { @@ -1748,6 +1748,10 @@ checkbox-group label {
1748 margin-left: 5px; 1748 margin-left: 5px;
1749 } 1749 }
1750 1750
  1751 +.margin-bottom-5 {
  1752 + margin-bottom: 5px;
  1753 +}
  1754 +
1751 .paddinglr30 { 1755 .paddinglr30 {
1752 padding: 0 30px; 1756 padding: 0 30px;
1753 } 1757 }
@@ -1772,6 +1776,10 @@ checkbox-group label { @@ -1772,6 +1776,10 @@ checkbox-group label {
1772 border-bottom: 1px solid #e5e5e5; 1776 border-bottom: 1px solid #e5e5e5;
1773 } 1777 }
1774 1778
  1779 +.border-bottom-5 {
  1780 + border-bottom: 5px solid #efeff4;
  1781 +}
  1782 +
1775 .pos-rel { 1783 .pos-rel {
1776 position: relative; 1784 position: relative;
1777 } 1785 }
@@ -1780,6 +1788,10 @@ checkbox-group label { @@ -1780,6 +1788,10 @@ checkbox-group label {
1780 position: absolute; 1788 position: absolute;
1781 } 1789 }
1782 1790
  1791 +.display-block {
  1792 + display: block;
  1793 +}
  1794 +
1783 .display-none { 1795 .display-none {
1784 display: none; 1796 display: none;
1785 } 1797 }
@@ -1825,3 +1837,7 @@ checkbox-group label { @@ -1825,3 +1837,7 @@ checkbox-group label {
1825 .fontweightBold { 1837 .fontweightBold {
1826 font-weight: bold; 1838 font-weight: bold;
1827 } 1839 }
  1840 +
  1841 +.color-62c7ee {
  1842 + background-color: #62c7ee !important;
  1843 +}
1828 \ No newline at end of file 1844 \ No newline at end of file
pages.json
  View file @7f3bad7
@@ -186,6 +186,42 @@ @@ -186,6 +186,42 @@
186 } 186 }
187 187
188 } 188 }
  189 + ,{
  190 + "path" : "pages/invoiceTitle/invoiceTitle",
  191 + "style" :
  192 + {
  193 + "navigationBarTitleText": "发票抬头",
  194 + "enablePullDownRefresh": false
  195 + }
  196 +
  197 + }
  198 + ,{
  199 + "path" : "pages/companyMsg/companyMsg",
  200 + "style" :
  201 + {
  202 + "navigationBarTitleText": "详情",
  203 + "enablePullDownRefresh": false
  204 + }
  205 +
  206 + }
  207 + ,{
  208 + "path" : "pages/addTitle/addTitle",
  209 + "style" :
  210 + {
  211 + "navigationBarTitleText": "",
  212 + "enablePullDownRefresh": false
  213 + }
  214 +
  215 + }
  216 + ,{
  217 + "path" : "pages/editTitle/editTitle",
  218 + "style" :
  219 + {
  220 + "navigationBarTitleText": "编辑抬头",
  221 + "enablePullDownRefresh": false
  222 + }
  223 +
  224 + }
189 ], 225 ],
190 "globalStyle": { 226 "globalStyle": {
191 "navigationBarTextStyle": "black", 227 "navigationBarTextStyle": "black",
pages/addTitle/addTitle.vue 0 → 100644
  View file @7f3bad7
  1 +<template>
  2 + <view>
  3 + <uni-section title="抬头类型" type="line">
  4 + <view class="uni-list">
  5 + <radio-group @change="radioChange">
  6 + <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
  7 + <view>
  8 + <radio :value="item.value" :checked="index === current" />
  9 + </view>
  10 + <view style="flex: 1;">{{item.name}}</view>
  11 + </label>
  12 + </radio-group>
  13 + </view>
  14 + </uni-section>
  15 + <uni-section title="发票详情" type="line">
  16 + <view class="paddinglr30">
  17 + <!-- 基础用法，不包含校验规则 -->
  18 + <uni-forms ref="baseForm" :rules="rules" :modelValue="baseFormData">
  19 + <uni-forms-item label="发票抬头" name="invoicetitle" required>
  20 + <uni-easyinput v-model="baseFormData.invoicetitle" placeholder="请输入发票抬头" />
  21 + </uni-forms-item>
  22 + <uni-forms-item label="纳税人识别号" name="userId" required>
  23 + <uni-easyinput v-model="baseFormData.userId" placeholder="请输入纳税人识别号" />
  24 + </uni-forms-item>
  25 + <uni-forms-item label="注册地址">
  26 + <uni-easyinput v-model="baseFormData.address" placeholder="请输入注册地址" />
  27 + </uni-forms-item>
  28 + <uni-forms-item label="注册电话">
  29 + <uni-easyinput v-model="baseFormData.telphone" placeholder="请输入注册电话" />
  30 + </uni-forms-item>
  31 + <uni-forms-item label="开户行">
  32 + <uni-easyinput v-model="baseFormData.bank" placeholder="请输入开户行" />
  33 + </uni-forms-item>
  34 + <uni-forms-item label="开户账号">
  35 + <uni-easyinput v-model="baseFormData.bankAccount" placeholder="请输入开户账号" />
  36 + </uni-forms-item>
  37 + <uni-forms-item label="电子邮箱" name="email" required>
  38 + <uni-easyinput v-model="baseFormData.email" placeholder="请输入电子邮箱" />
  39 + </uni-forms-item>
  40 + <uni-forms-item label="备注">
  41 + <uni-easyinput type="textarea" v-model="baseFormData.remark" placeholder="备注" />
  42 + </uni-forms-item>
  43 + <uni-section title="纸质票邮寄方式" type="line">
  44 + <uni-forms-item label="邮寄地址" name="emsAdress" required="">
  45 + <uni-easyinput v-model="baseFormData.emsAdress" placeholder="请输入邮寄地址" />
  46 + </uni-forms-item>
  47 + <uni-forms-item label="联系人">
  48 + <uni-easyinput v-model="baseFormData.emsUsername" placeholder="请输入联系人" />
  49 + </uni-forms-item>
  50 + <uni-forms-item label="联系方式">
  51 + <uni-easyinput v-model="baseFormData.emsTel" placeholder="请输入联系方式" />
  52 + </uni-forms-item>
  53 + </uni-section>
  54 + </uni-forms>
  55 +
  56 + </view>
  57 + </uni-section>
  58 + <view class="paddinglr30 margin-top-30 uni-common-mb">
  59 + <button type="primary" @click="submit('baseForm')">确认</button>
  60 + </view>
  61 + </view>
  62 +</template>
  63 +
  64 +<script>
  65 + export default {
  66 + data() {
  67 + return {
  68 + items: [{
  69 + value: '1',
  70 + name: '个人'
  71 + },
  72 + {
  73 + value: '2',
  74 + name: '企业'
  75 + },
  76 + {
  77 + value: '3',
  78 + name: '非企业性单位'
  79 + },
  80 + ],
  81 + current: 0,
  82 + baseFormData: {
  83 + invoicetitle: '',
  84 + userId: '',
  85 + address: '',
  86 + telphone: '',
  87 + bank: '',
  88 + bankAccount: '',
  89 + email: '',
  90 + remark: '',
  91 + emsAdress: '',
  92 + emsUsername: '',
  93 + emsTel: '',
  94 + },
  95 + // 校验规则
  96 + rules: {
  97 + invoicetitle: {
  98 + rules: [{
  99 + required: true,
  100 + errorMessage: '发票抬头不能为空'
  101 + }]
  102 + },
  103 + userId: {
  104 + rules: [{
  105 + required: true,
  106 + errorMessage: '纳税人识别号不能为空'
  107 + }, {
  108 + format: 'number',
  109 + errorMessage: '纳税人识别号只能输入数字'
  110 + }]
  111 + },
  112 + email: {
  113 + rules: [{
  114 + required: true,
  115 + errorMessage: '电子邮箱不能为空'
  116 + }, ]
  117 + },
  118 + emsAdress: {
  119 + rules: [{
  120 + required: true,
  121 + errorMessage: '邮寄地址不能为空'
  122 + }, ]
  123 + },
  124 + },
  125 + };
  126 + },
  127 + onLoad() {},
  128 +
  129 + onReady() {
  130 + // 设置自定义表单校验规则，必须在节点渲染完毕后执行
  131 + this.$refs.baseForm.setRules(this.rules)
  132 + },
  133 +
  134 + methods: {
  135 + radioChange: function(evt) {
  136 + for (let i = 0; i < this.items.length; i++) {
  137 + if (this.items[i].value === evt.detail.value) {
  138 + this.current = i;
  139 + break;
  140 + }
  141 + }
  142 + },
  143 + submit(ref) {
  144 + this.$refs[ref].validate().then(res => {
  145 + console.log('success', res);
  146 + uni.showToast({
  147 + title: `校验通过`
  148 + })
  149 + }).catch(err => {
  150 + console.log('err', err);
  151 + })
  152 + }
  153 + },
  154 + }
  155 +</script>
  156 +
  157 +<style lang="scss">
  158 +
  159 +</style>
pages/billing/billing.vue
  View file @7f3bad7
@@ -42,7 +42,7 @@ @@ -42,7 +42,7 @@
42 <text class="color-black">备注：</text> 42 <text class="color-black">备注：</text>
43 <text class="color-black">111</text> 43 <text class="color-black">111</text>
44 </view> 44 </view>
45 - 45 +
46 <view class="uni-icon pos-abs icon-arrowright uni-icon-arrowright"> 46 <view class="uni-icon pos-abs icon-arrowright uni-icon-arrowright">
47 </view> 47 </view>
48 </view> 48 </view>
@@ -154,7 +154,10 @@ @@ -154,7 +154,10 @@
154 } 154 }
155 }, 155 },
156 detailClick() { 156 detailClick() {
  157 + uni.navigateTo({
  158 + url: '../invoiceTitle/invoiceTitle'
157 159
  160 + });
158 }, 161 },
159 // 全选 162 // 全选
160 changeAll: function(e) { 163 changeAll: function(e) {
pages/companyMsg/companyMsg.vue 0 → 100644
  View file @7f3bad7
  1 +<template>
  2 + <view>
  3 + <view class="paddinglr30 bg-white uni-text margin-bottom-5">
  4 + <view class="jy-fix-height34">
  5 + <text class="color-black">抬头类型：</text>
  6 + <text class="color-black">公司</text>
  7 + </view>
  8 + </view>
  9 + <uni-section title="发票详情" type="line">
  10 + <view class="uni-list">
  11 + <view class="uni-list-cell jy-fix-height34">
  12 + <view class="uni-list-cell-left">
  13 + <text class="is-required">*</text>发票抬头:
  14 + </view>
  15 + <view class="uni-list-cell-db">
  16 + 中兴智能交通股份有限公司
  17 + </view>
  18 + </view>
  19 + <view class="uni-list-cell jy-fix-height34">
  20 + <view class="uni-list-cell-left">
  21 + <text class="is-required">*</text>纳税人识别号:
  22 + </view>
  23 + <view class="uni-list-cell-db">
  24 + 123333
  25 + </view>
  26 + </view>
  27 + <view class="uni-list-cell">
  28 + <view class="uni-list-cell-left jy-fix-height34">
  29 + 注册地址:
  30 + </view>
  31 + <view class="uni-list-cell-db uni-ellipsis-2">
  32 + 北京市海淀区玲珑路中关村产业园北京市海淀区玲珑路中关村产业园
  33 + </view>
  34 + </view>
  35 + <view class="uni-list-cell jy-fix-height34">
  36 + <view class="uni-list-cell-left">
  37 + 注册电话:
  38 + </view>
  39 + <view class="uni-list-cell-db">
  40 + 123
  41 + </view>
  42 + </view>
  43 + <view class="uni-list-cell">
  44 + <view class="uni-list-cell-left jy-fix-height34">
  45 + 开户行:
  46 + </view>
  47 + <view class="uni-list-cell-db uni-ellipsis-2">
  48 + 北京市海淀区玲珑路中关村产业园北京市海淀区玲珑路中关村产业园
  49 + </view>
  50 + </view>
  51 + <view class="uni-list-cell jy-fix-height34">
  52 + <view class="uni-list-cell-left">
  53 + 开户账号:
  54 + </view>
  55 + <view class="uni-list-cell-db">
  56 + 1123村产业园
  57 + </view>
  58 + </view>
  59 + <view class="uni-list-cell jy-fix-height34">
  60 + <view class="uni-list-cell-left">
  61 + <text class="is-required">*</text>电子邮箱:
  62 + </view>
  63 + <view class="uni-list-cell-db">
  64 + 1123@qq.com
  65 + </view>
  66 + </view>
  67 + <view class="uni-list-cell jy-fix-height34">
  68 + <view class="uni-list-cell-left">
  69 + 备注:
  70 + </view>
  71 + <view class="uni-list-cell-db">
  72 + 备注
  73 + </view>
  74 + </view>
  75 + </view>
  76 + </uni-section>
  77 +
  78 + <uni-section title="纸质票邮寄方式" type="line">
  79 + <view class="uni-list">
  80 + <view class="uni-list-cell">
  81 + <view class="uni-list-cell-left jy-fix-height34">
  82 + 邮寄地址:
  83 + </view>
  84 + <view class="uni-list-cell-db uni-ellipsis-2">
  85 + 北京市海淀区玲珑路中关村产业园北京市海淀区玲珑路中关村产业园
  86 + </view>
  87 + </view>
  88 + <view class="uni-list-cell jy-fix-height34">
  89 + <view class="uni-list-cell-left">
  90 + 联系人:
  91 + </view>
  92 + <view class="uni-list-cell-db">
  93 + 中兴智能交通股份有限公司
  94 + </view>
  95 + </view>
  96 + <view class="uni-list-cell jy-fix-height34">
  97 + <view class="uni-list-cell-left">
  98 + 联系方式:
  99 + </view>
  100 + <view class="uni-list-cell-db">
  101 + 13113131212
  102 + </view>
  103 + </view>
  104 + </view>
  105 + </uni-section>
  106 + </view>
  107 +</template>
  108 +
  109 +<script>
  110 + export default {
  111 + data() {
  112 + return {
  113 +
  114 + };
  115 + }
  116 + }
  117 +</script>
  118 +
  119 +<style lang="scss">
  120 +
  121 +</style>
pages/editTitle/editTitle.vue 0 → 100644
  View file @7f3bad7
  1 +<template>
  2 + <view>
  3 + <uni-section title="抬头类型" type="line">
  4 + <view class="uni-list">
  5 + <radio-group @change="radioChange">
  6 + <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
  7 + <view>
  8 + <radio :value="item.value" :checked="index === current" />
  9 + </view>
  10 + <view style="flex: 1;">{{item.name}}</view>
  11 + </label>
  12 + </radio-group>
  13 + </view>
  14 + </uni-section>
  15 + <uni-section title="发票详情" type="line">
  16 + <view class="paddinglr30">
  17 + <!-- 包含校验规则 -->
  18 + <uni-forms ref="baseForm" :rules="rules" :modelValue="baseFormData">
  19 + <uni-forms-item label="发票抬头" name="invoicetitle" required>
  20 + <uni-easyinput v-model="baseFormData.invoicetitle" placeholder="请输入发票抬头" />
  21 + </uni-forms-item>
  22 + <uni-forms-item label="电子邮箱" name="email" required>
  23 + <uni-easyinput v-model="baseFormData.email" placeholder="请输入电子邮箱" />
  24 + </uni-forms-item>
  25 + <uni-forms-item label="备注">
  26 + <uni-easyinput type="textarea" v-model="baseFormData.remark" placeholder="备注" />
  27 + </uni-forms-item>
  28 + <uni-section title="纸质票邮寄方式" type="line">
  29 + <uni-forms-item label="邮寄地址" name="emsAdress" required="">
  30 + <uni-easyinput v-model="baseFormData.emsAdress" placeholder="请输入邮寄地址" />
  31 + </uni-forms-item>
  32 + <uni-forms-item label="联系人">
  33 + <uni-easyinput v-model="baseFormData.emsUsername" placeholder="请输入联系人" />
  34 + </uni-forms-item>
  35 + <uni-forms-item label="联系方式">
  36 + <uni-easyinput v-model="baseFormData.emsTel" placeholder="请输入联系方式" />
  37 + </uni-forms-item>
  38 + </uni-section>
  39 + </uni-forms>
  40 +
  41 + </view>
  42 + </uni-section>
  43 + <view class="paddinglr30 margin-top-30 uni-common-mb">
  44 + <button type="primary" @click="submit('baseForm')">确认</button>
  45 + </view>
  46 + </view>
  47 +</template>
  48 +
  49 +<script>
  50 + export default {
  51 + data() {
  52 + return {
  53 + items: [{
  54 + value: '1',
  55 + name: '个人'
  56 + },
  57 + {
  58 + value: '2',
  59 + name: '企业'
  60 + },
  61 + {
  62 + value: '3',
  63 + name: '非企业性单位'
  64 + },
  65 + ],
  66 + current: 0,
  67 + baseFormData: {
  68 + invoicetitle: '',
  69 + email: '',
  70 + remark: '',
  71 + emsAdress: '',
  72 + emsUsername: '',
  73 + emsTel: '',
  74 + },
  75 + // 校验规则
  76 + rules: {
  77 + invoicetitle: {
  78 + rules: [{
  79 + required: true,
  80 + errorMessage: '发票抬头不能为空'
  81 + }]
  82 + },
  83 + email: {
  84 + rules: [{
  85 + required: true,
  86 + errorMessage: '电子邮箱不能为空'
  87 + }, ]
  88 + },
  89 + emsAdress: {
  90 + rules: [{
  91 + required: true,
  92 + errorMessage: '邮寄地址不能为空'
  93 + }, ]
  94 + },
  95 + },
  96 + };
  97 + },
  98 + onLoad() {},
  99 +
  100 + onReady() {
  101 + // 设置自定义表单校验规则，必须在节点渲染完毕后执行
  102 + this.$refs.baseForm.setRules(this.rules)
  103 + },
  104 +
  105 + methods: {
  106 + radioChange: function(evt) {
  107 + for (let i = 0; i < this.items.length; i++) {
  108 + if (this.items[i].value === evt.detail.value) {
  109 + this.current = i;
  110 + break;
  111 + }
  112 + }
  113 + },
  114 + submit(ref) {
  115 + this.$refs[ref].validate().then(res => {
  116 + console.log('success', res);
  117 + uni.showToast({
  118 + title: `校验通过`
  119 + })
  120 + }).catch(err => {
  121 + console.log('err', err);
  122 + })
  123 + }
  124 + },
  125 + }
  126 +</script>
  127 +
  128 +<style lang="scss">
  129 +
  130 +</style>
pages/index/index.vue
  View file @7f3bad7
@@ -44,7 +44,7 @@ @@ -44,7 +44,7 @@
44 </view> 44 </view>
45 <view class="index-title">卡券管理</view> 45 <view class="index-title">卡券管理</view>
46 </view> 46 </view>
47 - <view class="flex-item"> 47 + <view class="flex-item" @click="toInvoicePage">
48 <view class=""> 48 <view class="">
49 <image src="../../static/me/me-fapao.png" class="index-icon"></image> 49 <image src="../../static/me/me-fapao.png" class="index-icon"></image>
50 </view> 50 </view>
@@ -77,6 +77,12 @@ @@ -77,6 +77,12 @@
77 url: '../setting/setting' 77 url: '../setting/setting'
78 78
79 }); 79 });
  80 + },
  81 + toInvoicePage() {
  82 + uni.navigateTo({
  83 + url: '../invoiceClaim/invoiceClaim'
  84 +
  85 + });
80 } 86 }
81 } 87 }
82 } 88 }
pages/invoiceTitle/invoiceTitle.vue 0 → 100644
  View file @7f3bad7
  1 +<template>
  2 + <view>
  3 + <view>
  4 +
  5 + <view class="uni-list">
  6 + <radio-group @change="titleChange">
  7 + <label class="display-block border-bottom-5" v-for="(item, index) in items" :key="item.value">
  8 + <view class="elec-card bg-white">
  9 + <view class="elec-card-left float-left">
  10 + <view class="elec-card-msg">黄石肯特科技发展有限公司</view>
  11 + <view class="elec-card-msg">发票类型:公司</view>
  12 + </view>
  13 + <view class="elec-card-right float-right">
  14 + <button class="mini-btn color-62c7ee" type="primary" size="mini">去使用</button>
  15 + </view>
  16 + </view>
  17 + <view class="uni-list-cell uni-list-cell-pd">
  18 + <view>
  19 + <radio :value="item.value" :checked="index === current" />
  20 + </view>
  21 + <view style="flex:1;">默认抬头</view>
  22 + <view>
  23 + <button class="mini-btn margin-left-5" type="primary" size="mini"
  24 + @click="detailLookBtn">查看</button>
  25 + <button class="mini-btn margin-left-5" type="default" size="mini"
  26 + @click="detailEditBtn">编辑</button>
  27 + <button class="mini-btn margin-left-5" type="warn" size="mini"
  28 + @click="detailDelBtn">删除</button>
  29 + </view>
  30 + </view>
  31 + </label>
  32 + </radio-group>
  33 + </view>
  34 + <view class="billing-all">
  35 + <button type="primary" class="title-submit" @click="addInvoiceTitle">添加发票抬头</button>
  36 + </view>
  37 + </view>
  38 + </view>
  39 +</template>
  40 +
  41 +<script>
  42 + export default {
  43 + data() {
  44 + return {
  45 + items: [{
  46 + value: '1',
  47 + checked: 'true'
  48 +
  49 + },
  50 + {
  51 + value: '2'
  52 +
  53 + },
  54 + {
  55 + value: '3'
  56 +
  57 + },
  58 + ],
  59 + current: 0,
  60 + };
  61 + },
  62 + methods: {
  63 + titleChange: function(evt) {
  64 + for (let i = 0; i < this.items.length; i++) {
  65 + if (this.items[i].value === evt.detail.value) {
  66 + this.current = i;
  67 + break;
  68 + }
  69 + }
  70 + },
  71 + detailLookBtn() {
  72 + uni.navigateTo({
  73 + url: '../companyMsg/companyMsg'
  74 + });
  75 + },
  76 + detailEditBtn() {
  77 + uni.navigateTo({
  78 + url: '../editTitle/editTitle'
  79 + });
  80 + },
  81 + detailDelBtn() {
  82 +
  83 + },
  84 + addInvoiceTitle() {
  85 + uni.navigateTo({
  86 + url: '../addTitle/addTitle'
  87 + });
  88 + },
  89 + }
  90 + }
  91 +</script>
  92 +
  93 +<style lang="scss">
  94 + .elec-card {
  95 + width: 100%;
  96 + height: 64upx;
  97 + padding: 22upx 30upx;
  98 +
  99 + border-bottom: 1px solid #e5e5e5;
  100 + }
  101 +
  102 + .elec-card-left {
  103 + width: 70%;
  104 + height: 64upx;
  105 +
  106 + }
  107 +
  108 + .elec-card-right {
  109 + width: 30%;
  110 + height: 64upx;
  111 + line-height: 64upx;
  112 + }
  113 +
  114 + .elec-card-msg {
  115 + line-height: 32upx;
  116 + color: rgba(0, 0, 0, .7);
  117 +
  118 + }
  119 +
  120 + .billing-all {
  121 + position: fixed;
  122 + bottom: 0;
  123 + left: 0;
  124 + width: 100%;
  125 + height: 46px;
  126 + line-height: 46px;
  127 + // font-size: 24px;
  128 +
  129 + }
  130 +</style>