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">夏日去撒野旅游计划～</view>
                        <view class="date">2024.10.28 10:00</view>
                        <view class="address">成都市东丽湖露营地32号</view>
                    </view>
                    <view class="price"><text>总计</text>¥800.00</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="个人" label="个人"></uv-radio>
                    <uv-radio name="企业" label="个人"></uv-radio>
                </uv-radio-group>
            </view>
            <view class="iptInfo">
                <uv-form-item label="企业名称" labelWidth="180rpx" :customStyle="aa" borderBottom>
                    <uv-input placeholder="请输入内容" fontSize="29rpx" color="#fff" v-model="enterpriseName" border="none"></uv-input>
                </uv-form-item>
                <uv-form-item label="企业名称" labelWidth="180rpx" :customStyle="aa" borderBottom>
                    <uv-input placeholder="请输入内容" fontSize="29rpx" color="#fff" v-model="enterpriseName" border="none"></uv-input>
                </uv-form-item>
                <uv-form-item label="企业名称" labelWidth="180rpx" :customStyle="aa" borderBottom>
                    <uv-input placeholder="请输入内容" fontSize="29rpx" color="#fff" v-model="enterpriseName" border="none"></uv-input>
                </uv-form-item>
            </view>
            <view style="padding: 65rpx 35rpx;">
                <uv-button @click="toInvoiceRecords" :custom-style="customStyle" type="primary" shape="circle" color="#381615" text="申请"></uv-button>
            </view>
        </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 {
                radioValue: '香蕉',
                enterpriseName: '',
                aa: {
                    color: '#f40'
                }
			}
		},
		methods: {
            toInvoiceRecords() {
                uni.navigateTo({
                    url: '/pages_order/invoiceRecords'
                })
            }
		}
	}
</script>
<style scoped lang="scss">
.invoiceIssuance {
    // margin-bottom: 500rpx;
    .content {
        .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>