个人中心-我的账户

ant-design-vue-jeecg/src/views/shopping/pages/gerenzhongxin.vue

@@ -50,6 +50,77 @@
         </a-sub-menu>
 
       </a-menu>
+      <div class="mall" v-if="current[0] == 'mail'">
+        <div style="width: 1002px;margin: 0 auto">
+          <a-form-model
+            ref="ruleForm"
+            :model="form"
+            :rules="rules"
+            :label-col="labelCol"
+            :wrapper-col="wrapperCol"
+          >
+            <a-form-model-item label="性别" prop="region">
+              <a-select v-model="form.region" placeholder="请选择性别">
+                <a-select-option value="shanghai">
+                  女士
+                </a-select-option>
+                <a-select-option value="beijing">
+                  先生
+                </a-select-option>
+              </a-select>
+            </a-form-model-item>
+            <a-form-model-item label="姓名" prop="desc">
+              <a-input placeholder="请输入姓名" v-model="form.desc"  />
+            </a-form-model-item>
+            <a-form-model-item label="地区" prop="desc">
+              <a-input placeholder="请选择地区" v-model="form.desc"  />
+            </a-form-model-item>
+
+            <a-form-model-item label="电话" prop="desc">
+              <a-input placeholder="请输入电话" v-model="form.desc"  />
+            </a-form-model-item>
+
+            <a-form-model-item label="出生日期" required prop="date1">
+              <a-date-picker
+                v-model="form.date1"
+                show-time
+                type="date"
+                placeholder="请选择出生日期"
+                style="width: 100%;"
+              />
+            </a-form-model-item>
+            <a-form-model-item label="电子邮箱" prop="desc">
+              <a-input placeholder="请输入电子邮箱" v-model="form.desc"  />
+            </a-form-model-item>
+            <a-form-model-item label="1" prop="type">
+              <a-checkbox value="1" name="type">
+                我已阅读并同意黄淮服装定制商城的销售条款和个人信息处理规则
+              </a-checkbox>
+              <a-checkbox value="2" name="type">
+                我同意按照《个人信息处理规则》告知的内容跨境提供本人的个人信息
+              </a-checkbox>
+            </a-form-model-item>
+          </a-form-model>
+          <div class="d-flex btnDiv">
+            <div type="primary" style="width: 100%;margin-bottom: 10px" class="dialogButton primary   f_12">修改信息</div>
+          </div>
+          <a @click="show" class="xgmm"> 更改密码?</a>
+          <a-modal v-model="visible1" title="更改密码" @ok="handleOk" @cancel="handleCancel">
+            <a-form-model
+              ref="ruleForm1"
+              :model="form1"
+              :rules="rules"
+            >
+              <a-form-model-item label="当前密码" prop="desc">
+                <a-input placeholder="请输入当前密码" v-model="form.desc"  />
+              </a-form-model-item>
+              <a-form-model-item label="新密码" prop="desc">
+                <a-input placeholder="请输入新密码" v-model="form.desc"  />
+              </a-form-model-item>
+            </a-form-model>
+          </a-modal>
+        </div>
+      </div>
       <div class="orderList" >
         <div class="item" v-for="(item,index) in allOrders" :key="index">
           <div class="top d-flex">
@@ -158,7 +229,48 @@
           findgoods: "/sys/user/findgoods"
 
         },
-
+        labelCol: { span: 3 },
+        wrapperCol: { span: 21 },
+        other: '',
+        form: {
+          name: '',
+          region: undefined,
+          date1: undefined,
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: '',
+        },
+        form1: {
+          name: '',
+          region: undefined,
+          date1: undefined,
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: '',
+        },
+        rules: {
+          name: [
+            { required: true, message: 'Please input Activity name', trigger: 'blur' },
+            { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
+          ],
+          region: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
+          date1: [{ required: true, message: 'Please pick a date', trigger: 'change' }],
+          type: [
+            {
+              type: 'array',
+              required: true,
+              message: 'Please select at least one activity type',
+              trigger: 'change',
+            },
+          ],
+          resource: [
+            { required: true, message: 'Please select activity resource', trigger: 'change' },
+          ],
+          desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }],
+        },
+        visible1: false,
 
       };
     },
@@ -175,6 +287,29 @@
       }
     },
     methods: {
+      handleCancel(e) {
+        this.visible1 = false;
+      },
+      show() {
+        this.visible1 = true;
+      },
+      handleOk(e) {
+        console.log(e);
+        this.visible1 = false;
+      },
+      onSubmit() {
+        this.$refs.ruleForm.validate(valid => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      resetForm() {
+        this.$refs.ruleForm.resetFields();
+      },
       getallgoods(){
         getAction(this.url.findgoods).then((res) => {
           if(res.success) {
@@ -258,6 +393,24 @@
 </script>
 <style lang="less" scoped>
   @import '../assets/common.css';
+  .btnDiv{
+    justify-content: space-around;
+    .dialogButton {
+      width: 240px;
+      height: 40px;
+      text-align: center;
+      line-height: 40px;
+      transition: all 0.2s;
+    }
+    .primary {
+      background: #1b1b1b;
+      border: 2px solid #1b1b1b;
+      color: #e5dfd9;
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
   .bg{
     width: 100%;
     height: 250px;
@@ -359,5 +512,18 @@
       }
     }
   }
+  .mall{
+    padding: 50px 100px;
+    .ant-checkbox-wrapper + .ant-checkbox-wrapper{
+      margin-left: 0;
+    }
+    .xgmm{
+      color: #1b1b1b;
+      transition: all 0.32s;
+      &:hover{
+        opacity: 0.8;
+      }
+    }
+  }
 </style>