对接购物车

src/views/login.vue

@@ -15,11 +15,14 @@
           <span class="t2">收银、库存、营销、支付等业务一体化解决方案</span>
         </div>
         <el-form ref="formRef" :model="form" :rules="rules" label-position="top" hide-required-asterisk>
-          <el-form-item label="商户号" prop="merchantName">
-            <el-input v-model="form.merchantName" placeholder="请输入注册商户号"></el-input>
+          <el-form-item>
+            <el-radio-group v-model="form.loginType">
+              <el-radio-button label="商户" :value="0"></el-radio-button>
+              <el-radio-button label="员工" :value="1"></el-radio-button>
+            </el-radio-group>
           </el-form-item>
-          <el-form-item label="手机号码" prop="loginName">
-            <el-input v-model="form.loginName" placeholder="请输入11位手机号码"></el-input>
+          <el-form-item label="用户名" prop="username">
+            <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
           </el-form-item>
           <el-form-item label="登录密码" prop="password">
             <el-input v-model="form.password" :type="passwordType" placeholder="请输入登录密码">
@@ -33,6 +36,16 @@
               </template>
             </el-input>
           </el-form-item>
+          <el-form-item label="验证码" prop="code">
+            <div class="code_wrap">
+              <div class="ipt" style="flex: 1;">
+                <el-input v-model="form.code" placeholder="请输入验证码" style="width: 100%;"></el-input>
+              </div>
+              <el-image :src="codeUrl" style="width: 150px;height: 40px;border-radius: 4px;background-color: #fff;"
+                fit="contain" @click="captchaAjax" v-loading="codeUrlLoading"
+                element-loading-spinner="Loading"></el-image>
+            </div>
+          </el-form-item>
           <!-- <el-form-item>
             <div style="width: 100%; display: flex; justify-content: flex-end">
               <router-link :to="{ name: 'register' }">
@@ -71,38 +84,34 @@ import { RandomNumBoth } from "@/utils";
 import useStorage from "@/utils/useStorage";
 import { douyincheckIn } from "@/api/group";
 import { useUser } from "@/store/user.js";
-import { useSocket } from "@/store/socket.js";
 import { useGlobal } from '@/store/global.js'
-import { useShop } from '@/store/shop.js'
+import { useGoods } from '@/store/goods.js'
+
+import { captcha } from '@/api/account.js'
+
 const global = useGlobal()
 
-const shopInfo = useShop()
-
 const store = useUser();
-const socket = useSocket();
+const goodsStore = useGoods()
 
 const router = useRouter();
 const formRef = ref(null);
 const loading = ref(false);
 const passwordType = ref('password')
 
+const codeUrl = ref('')
+const codeUrlLoading = ref(false)
+
 const form = reactive({
-  serialNumber: RandomNumBoth(1000, 9999),
-  clientType: "pc",
-  merchantName: "",
-  loginName: "",
-  password: "",
+  username: "18888888888",
+  password: "123456",
+  code: "",
+  uuid: "",
+  loginType: 0, // 0: 商户 1: 员工
 });
 
 const rules = reactive({
-  merchantName: [
-    {
-      required: true,
-      message: " ",
-      trigger: "blur",
-    },
-  ],
-  loginName: [
+  username: [
     {
       required: true,
       message: " ",
@@ -116,6 +125,13 @@ const rules = reactive({
       trigger: "blur",
     },
   ],
+  code: [
+    {
+      required: true,
+      message: " ",
+      trigger: "blur",
+    },
+  ],
 });
 
 // 提交
@@ -127,25 +143,26 @@ const submitHandle = () => {
         .userlogin(form)
         .then(async (res) => {
           // 登录成功后保存商户号
-          useStorage.set('merchantLoginAccount', form.merchantName)
+          // useStorage.set('merchantLoginAccount', form.username)
           ElMessage.success("登录成功");
-          socket.init();
-          await shopInfo.queryShopInfo()
+          goodsStore.initGoods()
           setTimeout(() => {
             router.replace({
               name: "home",
             });
           }, 1000);
-          const douyin = await douyincheckIn({
-            token: res.token,
-            loginName: res.loginName,
-            clientType: 'pc'
-          })
-          useStorage.set('douyin', douyin.userInfo)
-          global.updateData(true)
+          // const douyin = await douyincheckIn({
+          //   token: res.token,
+          //   loginName: res.loginName,
+          //   clientType: 'pc'
+          // })
+          // useStorage.set('douyin', douyin.userInfo)
+          // global.updateData(true)
         })
         .catch((err) => {
           loading.value = false;
+          // 重新获取验证码
+          captchaAjax()
         });
     }
   });
@@ -159,9 +176,27 @@ const logout = () => {
     .catch(() => { });
 };
 
+// 获取验证码
+async function captchaAjax() {
+  try {
+    codeUrlLoading.value = true
+    const res = await captcha()
+    codeUrl.value = res.code
+    form.uuid = res.uuid
+  } catch (error) {
+    console.log(error);
+  }
+  setTimeout(() => {
+    codeUrlLoading.value = false
+  }, 500);
+}
+
+
 onMounted(() => {
   global.updateData(false)
 
+  captchaAjax()
+
   let merchantLoginAccount = useStorage.get('merchantLoginAccount')
   if (merchantLoginAccount) {
     form.merchantName = merchantLoginAccount
@@ -227,4 +262,15 @@ onMounted(() => {
   justify-content: center;
   align-items: center;
 }
+
+.code_wrap {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  .code_img {
+    flex: 1;
+  }
+}
 </style>