|
|
@@ -0,0 +1,258 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-card class="box-card">
|
|
|
+
|
|
|
+ <div slot="header" class="header clearfix">
|
|
|
+ <span>基本信息</span>
|
|
|
+ </div>
|
|
|
+ <el-form ref="form" :model="form" label-width="80px">
|
|
|
+
|
|
|
+ <el-form-item label="订单编号">
|
|
|
+ <div class="order-number">
|
|
|
+ <span>未生成</span>
|
|
|
+ <span>订单编号: 7r99r40048</span>
|
|
|
+ <button>待提交</button>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="订单用户">
|
|
|
+ <el-input v-model="form.user" placeholder="请输入用户uid"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="订单名称">
|
|
|
+ <el-input v-model="form.name" placeholder="请输入订单名称,尽量遵循命名规则"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="订单类型">
|
|
|
+ <el-select v-model="value" placeholder="请选择订单类型">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="交易类型">
|
|
|
+ <el-select v-model="value" placeholder="请选择交易类型">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="订单金额" placeholder="请输入实际金额">
|
|
|
+ <el-input v-model="form.user"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="交易类型">
|
|
|
+ <el-radio v-model="radio" label="1">收入</el-radio>
|
|
|
+ <el-radio v-model="radio" label="2">支出</el-radio>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="收支类型">
|
|
|
+ <el-select v-model="value" placeholder="请选择支付方式">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="支付编码">
|
|
|
+ <el-input v-model="form.user" placeholder="请输入支付编号,选填"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card class="box-card">
|
|
|
+
|
|
|
+ <div slot="header" class="header clearfix">
|
|
|
+ <span>其他信息(选填)</span>
|
|
|
+ </div>
|
|
|
+ <el-form ref="form" :model="form" label-width="80px">
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="关联项目">
|
|
|
+ <el-select v-model="value" placeholder="请选择项目类型">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="项目ID">
|
|
|
+ <el-select v-model="value" placeholder="请输入项目ID">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-form-item label="关联订单">
|
|
|
+ <el-input v-model="form.user" placeholder="请输入平台订单编号"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="外部备注">
|
|
|
+ <el-input v-model="form.name" placeholder="请输入用户可见的备注信息"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="内部备注">
|
|
|
+ <el-input type="textarea" v-model="form.name" placeholder="请输入仅内部可见的备注信息,必填"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-form ref="form" :model="form" style="padding: 20px;">
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <el-button class="save-btn" type="primary">保存</el-button>
|
|
|
+ <el-button class="cancel-btn">取消</el-button>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <el-button class="comfirm-btn" type="primary">确认提交订单</el-button>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {
|
|
|
+ user: '',
|
|
|
+ name: '',
|
|
|
+ },
|
|
|
+ options: [{
|
|
|
+ value: '选项1',
|
|
|
+ label: '黄金糕'
|
|
|
+ }, {
|
|
|
+ value: '选项2',
|
|
|
+ label: '双皮奶'
|
|
|
+ }, {
|
|
|
+ value: '选项3',
|
|
|
+ label: '蚵仔煎'
|
|
|
+ }, {
|
|
|
+ value: '选项4',
|
|
|
+ label: '龙须面'
|
|
|
+ }, {
|
|
|
+ value: '选项5',
|
|
|
+ label: '北京烤鸭'
|
|
|
+ }],
|
|
|
+ value: '',
|
|
|
+ radio: '1'
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .box-card {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #222222;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .clearfix:before,
|
|
|
+ .clearfix:after {
|
|
|
+ display: table;
|
|
|
+ content: "";
|
|
|
+ }
|
|
|
+
|
|
|
+ .clearfix:after {
|
|
|
+ clear: both
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-number {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-number span:first-child {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-number span:nth-child(2) {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-number button {
|
|
|
+ margin-left: 7px;
|
|
|
+ height: 22px;
|
|
|
+ border: 1px solid #3C95FF;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #308EFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-select {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ textarea {
|
|
|
+ width: 100%;
|
|
|
+ height: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .save-btn {
|
|
|
+ width: 100px;
|
|
|
+ height:40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cancel-btn {
|
|
|
+ margin-left: 10px;
|
|
|
+ width: 100px;
|
|
|
+ height:40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .comfirm-btn {
|
|
|
+ width: 210px;
|
|
|
+ height:40px;
|
|
|
+ }
|
|
|
+</style>
|