完成添加会员form表单

src/api/member/index.js

@@ -0,0 +1,15 @@
+import request from "@/utils/request.js";
+
+/**
+ * 查询店铺会员信息
+ * @param {*} params 
+ * @returns 
+ */
+export function queryMembermember(params) {
+    return request({
+        method: "get",
+        url: "member/queryMember",
+        params
+    });
+}
+

src/views/member/index.vue

@@ -4,7 +4,7 @@
             <div class="demo_tabs">
                 <div class="demo_tabs_div">
                     <el-input v-model="firstinput" placeholder="请输入手机号或编号" clearable />
-                    <el-button style="margin-left: 10px;" type="primary" @click="onSubmit">添加</el-button>
+                    <el-button style="margin-left: 10px;" type="primary" @click="memberaddshow = true">添加</el-button>
                 </div>
             </div>
             <el-table :data="tableData" height="90%" style="width: 100%;margin-top: 10px;">
@@ -76,23 +76,10 @@
             </div>
             <div class="orderbox_right_button">
                 <el-button style="width: 100%;" type="primary" @click="recharge = true">会员充值</el-button>
-                <el-button style="width: 100%; margin-top: 10px; margin-left:0px;" type="danger"
+                <el-button style="width: 100%; margin-top: 10px; margin-left:0px;" type="danger">取消</el-button>
-                    @click="onSubmit">取消</el-button>
 
             </div>
         </div>
-        <!-- <el-dialog v-model="stored" title="余额明细" width="500" :before-close="handleClose">
-            <div class="dialog_footer" v-for="(iten, index) in 6" :key="index">
-                <div class="dialog_footer_left">
-                    <span>微信用户</span>
-                    <span>2021-02-22 18:05:53</span>
-                </div>
-                <div class="dialog_footer_right">
-                    <span>19000</span>
-                    <span>26300</span>
-                </div>
-            </div>
-        </el-dialog> -->
         <el-dialog v-model="stored" title="余额明细" width="500" :before-close="handleClose">
             <div class="dialog_footer" v-for="(iten, index) in 6" :key="index">
                 <div class="dialog_footer_left">
@@ -105,6 +92,41 @@
                 </div>
             </div>
         </el-dialog>
+        <el-dialog v-model="memberaddshow" title="添加会员" width="600" :before-close="memberaddshowclose">
+            <el-form ref="formRef" :rules="rules" :model="membrform" label-width="70px" hide-required-asterisk>
+                <el-form-item label="手机号" prop="phone">
+                    <el-input v-model="membrform.phone" />
+                </el-form-item>
+
+                <el-form-item label="生日" prop="date1">
+                    <el-col :span="11">
+                        <el-date-picker v-model="membrform.date1" type="date" placeholder="请选择生日" style="width: 100%" />
+                    </el-col>
+                </el-form-item>
+                <el-form-item label="性别">
+                    <el-radio-group v-model="membrform.resource">
+                        <el-radio label="男" />
+                        <el-radio label="女" />
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="等级">
+                    <el-select v-model="membrform.region" placeholder="请选择等级">
+                        <el-option label="等级1" value="1" />
+                        <el-option label="等级2" value="2" />
+                        <el-option label="等级3" value="3" />
+                        <el-option label="等级4" value="4" />
+                        <el-option label="等级5" value="5" />
+                        <el-option label="等级6" value="6" />
+                        <el-option label="等级7" value="7" />
+                        <el-option label="等级8" value="8" />
+
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-button style="width: 100%;" type="primary" @click="onSubmit">确认</el-button>
+                </el-form-item>
+            </el-form>
+        </el-dialog>
         <el-dialog v-model="recharge" title="会员充值" width="800" :before-close="handlerecharge">
             <div class="recharge_footer">
                 <div class="recharge_footer_item">
@@ -162,27 +184,28 @@
 </template>
 
 <script setup>
-import { ref, reactive, watch } from 'vue'
+import { ref, reactive, watch, onMounted } from 'vue'
 import { useRoute } from "vue-router"
 import { ElMessage } from 'element-plus'
-const route = useRoute()
+import { queryMembermember } from '@/api/member/index.js'
-
+import { useUser } from "@/store/user.js"
+const route = useRoute()//vue-router
+const store = useUser()
 const firstinput = ref('')//搜索输入框
 const stored = ref(false)//储值余额
 const handleClose = () => {
     stored.value = !stored.value
 }
 const recharge = ref(false)//充值
-
+const memberaddshow = ref(true) //添加会员
-const onSubmit = () => {
+const memberaddshowclose = () => {
-    if (firstinput.value) {
+    memberaddshow.value = !memberaddshow.value
-
+}
-    } else {
+const asyncqueryMembermember = async () => {
-        ElMessage({
+    let res = await queryMembermember({
-            message: '请输入订单号查询',
+        shopId: store.userInfo.shopId
-            type: 'warning',
+    })
-        })
+    console.log(res,'1111111')
-    }
 }
 const handlerecharge = () => {
     recharge.value = !recharge.value
@@ -209,6 +232,68 @@ const tableData = [
         address: '1s',
     },
 ]
+const membrform = reactive({ //membrform  添加会员表单
+    phone: '',
+    region: '',
+    date1: '',
+    date2: '',
+    delivery: false,
+    type: [],
+    resource: '',
+    desc: '',
+})
+const formRef = ref(null); //ref  membrform
+const rules = reactive({ // membrform验证
+    phone: [
+        {
+            required: true,
+            message: "请输入11位手机号码",
+            trigger: "blur",
+        },
+    ],
+    date1: [
+        {
+            type: 'date',
+            required: true,
+            message: '请选择生日日期',
+            trigger: 'change',
+        },
+    ],
+    name: [
+        {
+            required: true,
+            message: "请输入登录密码",
+            trigger: "blur",
+        },
+    ],
+});
+const onSubmit = () => {
+    formRef.value.validate(async (valid) => {
+        console.log(valid)
+        if (valid) {
+            // const params = {
+            //     serialNumber: RandomNumBoth(1000, 9999),
+            //     clientType: 'pc',
+            //     loginName: form.phone,
+            //     password: form.password
+            // }
+
+            // store.userlogin(params).then((res) => {
+            //     loading.value = true;
+            //     ElMessage.success("登录成功");
+            //     setTimeout(() => {
+            //         router.replace({
+            //             name: "home",
+            //         });
+            //     }, 1000);
+            // }).catch(err => {
+            //     loading.value = false
+            // });
+        }
+    });
+    console.log(membrform.name)
+    console.log('submit!')
+}
 const moneys = reactive({
     money: ''
 })
@@ -306,6 +391,9 @@ const _handleConfirmKey = () => {
     S = Number(S).toFixed(2);
     this.$emit('confirmEvent', S);    //提交参数
 }
+onMounted(() => {
+      asyncqueryMembermember()
+})
 </script>
 
 <style scoped lang="scss">