JP-ChargeTeam51/pages/MyInvoice/editInvoiceTitle.vue

<template>
	<view>
		<u-navbar title="编辑发票抬头">
			<text class="delete" @click="delBtn()" v-if="obj.id&&!invoice">删除</text>
		</u-navbar>

		<u-cell-group>
			<u-cell-item title="抬头类型" required :arrow="false">
					<view class="">
						<u-radio-group v-model="obj.headerType" @change="radioGroupChange">
							<u-radio 
								@change="radioChange" 
								v-for="(item, index) in list" :key="index" 
								:name="item.value"
							
								active-color="#00b962"
							>
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				
			</u-cell-item>
			<u-cell-item title="发票抬头" :arrow="false" required >
				<u-input placeholder="请填写发票抬头" v-model="obj.title" ></u-input>
			</u-cell-item>
			<u-cell-item title="公司税号"  :arrow="false" >
				<u-input placeholder="请填写纳税人识别号" v-model="obj.companyTaxNo" ></u-input>
			</u-cell-item>
			<u-cell-item title="设为默认" required :arrow="false" style="text-align: right;">
				<u-switch v-model="obj.defaultHeader" size="40" active-color="#00e266"></u-switch>
			</u-cell-item>
		</u-cell-group>
		
		<u-button type="success" shape="circle" @click="submit()">提交</u-button>
	</view>


</template>


<script>
	import * as API from '@/apis/invoiceApi.js'
	
export default {
	data() {
		return {
			id:'',
			obj:{
				headerType:"1",
				title:"",
				companyTaxNo:"",
				defaultHeader:"1",
			},
			list: [
				{
					value:'1',
					name: '企业单位',
					disabled: false
				},
				{
					value:'2',
					name: '个人/非企业单位',
					disabled: false
				},
				
			],
			invoice:false,
			checked:false,
			// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			value: '企业单位',
		};
	},
	onLoad(op) {
		if(op.id){
			this.id=op.id;
			this.getInfo();
		}
		if(op.invoice){
			this.invoice=true;
		
		}
		
	},
	methods: {
		delBtn(){
			uni.showLoading({
				title: "加载中",
				mask: true,
			})
			API.deleteInvoiceType({
				invoiceTypeId:this.id
			}).then((res) => {
				uni.navigateBack({
					
				})
				uni.hideLoading()
				
			}).catch(error => {
				uni.showToast({
					title: error,
					icon: "none"
				})
			})
		},
		getInfo(){
			uni.showLoading({
				title: "加载中",
				mask: true,
			})
			
			API.invoiceTypeDetail({
				invoiceTypeId:this.id
			}).then((res) => {
				uni.hideLoading()
				this.obj=res.data.invoiceType
			}).catch(error => {
				uni.showToast({
					title: error,
					icon: "none"
				})
			})
		},
		submit(){
			if(!this.obj.title){
				uni.showToast({
					title:"请填写发票抬头"
				})
				return
			}
			uni.showLoading({
				title: "加载中",
				mask: true,
			})
			API.saveInvoiceType(this.obj).then((res) => {
				uni.navigateBack({
					
				})
				uni.hideLoading()
				
			}).catch(error => {
				uni.showToast({
					title: error,
					icon: "none"
				})
			})
		},
		// 选中某个单选框时，由radio时触发
		radioChange(e) {
			// console.log(e);
		},
		// 选中任一radio时，由radio-group触发
		radioGroupChange(e) {
			// console.log(e);
		}
	}
};
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.delete {
		position: absolute;
		right: 16px;
		color: rgba(238, 49, 56, 100);
		font-size: 12px
	}
	/deep/.u-cell__value{
		text-align: left;
		margin-left: 8%;
		font-size: 16px
	}
		
	/deep/.u-switch{
		margin: auto 0;
		float: right;;
	}
	/deep/.u-btn{
		width: 91.4%;
		margin: 12px auto;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
</style>