popularize-front/pages_order/invoiceIssuance.vue

<template>
	<view class="invoiceIssuance">
        <view class="head-box"></view>
		<Navbar title="申请开票" :autoBack="true" :bgColor="bgColor" leftIconSize="18px" height="100rpx" :leftIconColor="leftIconColor" :titleStyle="{color:fontColor}" />
        <view class="content contentPosition_">
            <view class="info cardStyle_">
                <view class="left">
                    <image src="https://img0.baidu.com/it/u=4274003247,920124130&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1031" alt="">
                </view>
                <view class="right">
                    <view class="detailed">
                        <view class="title">{{activityItem.title}}</view>
                        <view class="date">{{activityItem.startTime}}</view>
                        <view class="address">{{activityItem.address}}</view>
                    </view>
                    <view class="price"><text>总计</text>¥{{activityItem.price}}</view>
                </view>
            </view>
            <view class="choice">
                <uv-radio-group
                    siz="300"
                    labelSize="25rpx"
                    iconSize="25rpx"
                    v-model="radioValue" 
                    placement="column" 
                    shape="square"
                    labelColor="#fff"
                    activeColor="#FF4546"
                    iconPlacement="right">
                        <uv-radio name="0" label="个人"></uv-radio>
                        <uv-radio name="1" label="企业"></uv-radio>
                </uv-radio-group>
            </view>
            <view class="iptInfo" v-if="radioValue">
                    <uv-form-item :label="radioValue === '0' ? '姓名' : '企业名称'" labelWidth="180rpx" borderBottom>
                        <uv-input placeholder="请输入内容" fontSize="29rpx" color="#fff" v-model="invoicingInfo.name" border="none"></uv-input>
                    </uv-form-item>
                    <uv-form-item :label="radioValue === '0' ? '身份证号' : '税号'" labelWidth="180rpx" borderBottom>
                        <uv-input placeholder="请输入内容" fontSize="29rpx" color="#fff" v-model="invoicingInfo.no" border="none"></uv-input>
                    </uv-form-item>
                    <uv-form-item label="邮箱" labelWidth="180rpx" borderBottom>
                        <uv-input placeholder="请输入内容" fontSize="29rpx" color="#fff" v-model="invoicingInfo.emil" border="none"></uv-input>
                    </uv-form-item>
            </view>
            <view style="padding: 0 35rpx 65rpx;">
                <uv-button @click="toInvoiceRecords" :custom-style="customStyle" type="primary" shape="circle" color="#381615" text="申请"></uv-button>
            </view>
            <uv-toast ref="toast"></uv-toast>
        </view>
	</view>
</template>

<script>
    import Navbar from '@/pages/components/Navbar.vue'
    import { globalMixin } from '../pages/mixins/globalMixin';
	export default{
        mixins: [globalMixin],
        components:{
            Navbar
		},
		data() {
			return {
                orderId: '',
                radioValue: '0',
                invoicingInfo: {
                    name: '',
                    no: '',
                    emil: ''
                },
				activityItem:{}
			}
		},
        onLoad({orderId}) {
            this.orderId = orderId
			console.log("发票标识："+orderId)
			this.toOrderDetails("orderId");
        },
		methods: {
			//查询订单详情信息
			toOrderDetails(orderId) {
				this.$api('orderInfo',{orderId:this.orderId},res=>{
					if(res.code == 200) {
						this.activityItem = res.result.orderDetails
					}
				})
			},
            toInvoiceRecords() {
                let params = {}
                params = this.invoicingInfo;
                params.orderId = this.orderId
                console.log(params);
                this.$api('invoice', params, res=> {
                    if (res.code == 200) {
						this.$refs.toast.show({
							type: 'success',
							message: res.result
						})
						setTimeout(uni.redirectTo, 800, {
							url: '/pages_order/invoiceRecords'
						})
					}
                })
                
            }
		}
	}
</script>
<style scoped lang="scss">
.invoiceIssuance {
    .content {
		margin-top: 40rpx;
        .info {
            margin: 10rpx 32rpx 0rpx;
            border-radius: 26rpx;
        }
        .choice {
            /deep/.uv-radio-group {
                margin: 32px 32rpx 40rpx;
                .uv-radio {
                    color: #fff;
                    padding: 45rpx 35rpx;
                    background: $uni-color-card-background;
                    border-radius: 26rpx;
                    margin-bottom: 16rpx;
                }
                .uv-radio__icon-wrap {
                    width: 32rpx!important;
                    height: 32rpx!important;
                }
            }
        }
        .iptInfo {
            background: $uni-color-card-background;
            padding: 41rpx 46rpx 60rpx;
            margin: 32px 32rpx 40rpx;
            border-radius: 26rpx;
            /deep/.uv-form-item__body__left__content__label {
                color: #fff!important;
                font-size: 32rpx;
            }
        }
    }
}

</style>