新增充值页

vue/gold-system/src/views/recharge/addRecharge.vue

@@ -1,15 +1,93 @@
-<script>
-    
+<script setup>
+    import { reactive } from 'vue';
+    import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+
 </script>
 
 <template>
-    <el-form :model="form" label-width="auto" style="max-width: 600px">
-        <el-form-item label="Activity name">
-          <el-input v-model="form.name" />
-        </el-form-item>
-    </el-form>
+  <div>
+    新增充值
+  </div>
+  <el-form :model="form" label-width="auto" style="max-width: 600px">
+    <el-form-item label="精网号">
+      <el-input  style="width: 240px;"/>
+      <el-button type="primary" @click="handleClick">查询</el-button>
+    </el-form-item>
+    <el-form-item label="活动名称">
+      <el-select v-model="value" placeholder="请选择" style="width: 240px">
+        <el-option
+          
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="充值金币">
+      <el-input  style="width: 200px;"/>
+      <p>免费金币</p>
+      <el-input style="width: 200px" disabled placeholder="Please input"/>
+    </el-form-item>
+    <el-form-item label="充值金额">
+      <el-select v-model="value" placeholder="货币名称" style="width: 240px">
+        <el-option
+
+        />
+      </el-select>
+      <el-input  style="width: 200px;"/>
+    </el-form-item>
+    <el-form-item label="收款方式">
+      <el-select v-model="value" placeholder="请选择" style="width: 240px">
+        <el-option
+
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="交款时间">
+      <el-date-picker
+        v-model="value1"
+        type="datetime"
+        placeholder="Select date and time"
+      />
+    </el-form-item>
+    <el-form-item label="交款凭证">
+      <el-upload
+      class="avatar-uploader"
+      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+      :show-file-list="false"
+      :on-success="handleAvatarSuccess"
+      :before-upload="beforeAvatarUpload"
+    >
+      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+    </el-upload>
+    </el-form-item>
+    <el-form-item label="备注">
+      <el-input
+    v-model="textarea"
+    style="width: 240px"
+    :rows="2"
+    type="textarea"
+    placeholder="Please input"
+  />
+    </el-form-item>
+    <el-form-item label="提交人">
+      <el-input style="width: 200px" disabled placeholder="Please input"/>
+    </el-form-item>
+  </el-form>
+  <div class="dialog-footer">
+    <el-button @click="closeAddActivityVisible">取消</el-button>
+    <el-button type="primary" @click="closeAddActivityVisible">
+        提交
+    </el-button>
+</div>
 </template>
 
-<style>
+<style scoped>
+  p{
+    margin: 0px;
+  }
+  .el-form-item {
+  margin-left: 50px;
 
+}
 </style>