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 1748 margin-left: 5px;
1749 1749 }
1750 1750  
  1751 +.margin-bottom-5 {
  1752 + margin-bottom: 5px;
  1753 +}
  1754 +
1751 1755 .paddinglr30 {
1752 1756 padding: 0 30px;
1753 1757 }
... ... @@ -1772,6 +1776,10 @@ checkbox-group label {
1772 1776 border-bottom: 1px solid #e5e5e5;
1773 1777 }
1774 1778  
  1779 +.border-bottom-5 {
  1780 + border-bottom: 5px solid #efeff4;
  1781 +}
  1782 +
1775 1783 .pos-rel {
1776 1784 position: relative;
1777 1785 }
... ... @@ -1780,6 +1788,10 @@ checkbox-group label {
1780 1788 position: absolute;
1781 1789 }
1782 1790  
  1791 +.display-block {
  1792 + display: block;
  1793 +}
  1794 +
1783 1795 .display-none {
1784 1796 display: none;
1785 1797 }
... ... @@ -1825,3 +1837,7 @@ checkbox-group label {
1825 1837 .fontweightBold {
1826 1838 font-weight: bold;
1827 1839 }
  1840 +
  1841 +.color-62c7ee {
  1842 + background-color: #62c7ee !important;
  1843 +}
1828 1844 \ No newline at end of file
... ...
pages.json
  View file @7f3bad7
... ... @@ -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 226 "globalStyle": {
191 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 42 <text class="color-black">备注：</text>
43 43 <text class="color-black">111</text>
44 44 </view>
45   -
  45 +
46 46 <view class="uni-icon pos-abs icon-arrowright uni-icon-arrowright">
47 47 </view>
48 48 </view>
... ... @@ -154,7 +154,10 @@
154 154 }
155 155 },
156 156 detailClick() {
  157 + uni.navigateTo({
  158 + url: '../invoiceTitle/invoiceTitle'
157 159  
  160 + });
158 161 },
159 162 // 全选
160 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 44 </view>
45 45 <view class="index-title">卡券管理</view>
46 46 </view>
47   - <view class="flex-item">
  47 + <view class="flex-item" @click="toInvoicePage">
48 48 <view class="">
49 49 <image src="../../static/me/me-fapao.png" class="index-icon"></image>
50 50 </view>
... ... @@ -77,6 +77,12 @@
77 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>
... ...