优化新增串口

src/components/leftMenu.vue

@@ -180,12 +180,12 @@ const menus = ref([
         }
 
         &.more {
-            margin-top: 50px;
+            margin-top: 200px;
         }
 
         .icon {
             color: #999;
-            font-size: 26px;
+            font-size: 22px;
             margin-bottom: 4px;
         }
 

src/components/payCard/payCard.vue

@@ -125,9 +125,9 @@ async function confirmOrder() {
                 default:
                     break;
             }
+            payLoading.value = false
             ElMessage.success('支付成功')
             emit('paySuccess')
-            payLoading.value = false
         }
     } catch (error) {
         console.log(error)

src/components/payCard/scanModal.vue

@@ -1,51 +1,53 @@
 <!-- 扫码弹窗 -->
 
 <template>
-    <el-dialog title="扫码支付" width="800" v-model="dialogVisible" @open="reset">
-        <div class="content">
-            <div class="left">
-                <el-image :src="icon"></el-image>
-            </div>
-            <div class="right" v-if="!userPayWait">
-                <div class="amount">
-                    <span class="t">扫码支付</span>
-                    <span class="n">{{ props.amount }}</span>
+    <div class="dialog">
+        <el-dialog title="扫码支付" width="600" v-model="dialogVisible" @open="reset">
+            <div class="content">
+                <div class="left">
+                    <el-image :src="icon" style="width: 60px;height: 60px;"></el-image>
                 </div>
-                <div class="input">
-                    <el-input ref="inputRef" v-model="scanCode"
-                        style="height: calc(var(--el-component-size-large) + 20px);" placeholder="请扫描付款码"
-                        @keydown.enter="enterHandle" clearable></el-input>
-                </div>
-                <div class="number_warp">
-                    <div class="item" v-for="item in 9" :key="item" @click="inputHandle(item)">{{ item }}</div>
-                    <div class="item disabled">.</div>
-                    <div class="item" @click="inputHandle(0)">0</div>
-                    <div class="item" @click="delHandle">
-                        <el-icon>
-                            <CloseBold />
-                        </el-icon>
+                <div class="right" v-if="!userPayWait">
+                    <div class="amount">
+                        <span class="t">扫码支付</span>
+                        <span class="n">{{ props.amount }}</span>
+                    </div>
+                    <div class="input">
+                        <el-input ref="inputRef" v-model="scanCode"
+                            style="height: calc(var(--el-component-size-large) + 20px);" placeholder="请扫描付款码"
+                            @keydown.enter="enterHandle" clearable></el-input>
+                    </div>
+                    <div class="number_warp">
+                        <div class="item" v-for="item in 9" :key="item" @click="inputHandle(item)">{{ item }}</div>
+                        <div class="item disabled">.</div>
+                        <div class="item" @click="inputHandle(0)">0</div>
+                        <div class="item" @click="delHandle">
+                            <el-icon>
+                                <CloseBold />
+                            </el-icon>
+                        </div>
+                    </div>
+                    <div class="btn">
+                        <el-button type="primary" style="width: 100%;" v-loading="loading"
+                            @click="submitHandle">立即支付</el-button>
                     </div>
                 </div>
-                <div class="btn">
-                    <el-button type="primary" style="width: 100%;" v-loading="loading"
-                        @click="submitHandle">立即支付</el-button>
+                <div class="pay_wait" v-else>
+                    <div class="loading" v-loading="loading" element-loading-text="用户支付中..."></div>
+                    <div class="btn">
+                        <el-button type="primary" style="width: 100%;" v-loading="checkPayStatusLoading"
+                            @click="checkPayStauts">
+                            <span v-if="!checkPayStatusLoading">查询用户支付状态</span>
+                            <span v-else>查询中...</span>
+                        </el-button>
+                    </div>
+                    <div class="btn">
+                        <el-button style="width: 100%;" @click="resetScanCode">重新扫码</el-button>
+                    </div>
                 </div>
             </div>
-            <div class="pay_wait" v-else>
-                <div class="loading" v-loading="loading" element-loading-text="用户支付中..."></div>
-                <div class="btn">
-                    <el-button type="primary" style="width: 100%;" v-loading="checkPayStatusLoading"
-                        @click="checkPayStauts">
-                        <span v-if="!checkPayStatusLoading">查询用户支付状态</span>
-                        <span v-else>查询中...</span>
-                    </el-button>
-                </div>
-                <div class="btn">
-                    <el-button style="width: 100%;" @click="resetScanCode">重新扫码</el-button>
-                </div>
-            </div>
-        </div>
-    </el-dialog>
+        </el-dialog>
+    </div>
 </template>
 
 <script setup>
@@ -86,11 +88,14 @@ async function submitHandle() {
             orderId: props.orderId,
             authCode: scanCode.value
         })
+        loading.value = false
+        scanCode.value = ''
         emits('success')
     } catch (error) {
         if (error.code === '100015') {
             userPayWait.value = true
         } else {
+            loading.value = false
             console.log(error)
         }
     }
@@ -168,7 +173,7 @@ defineExpose({
 </script>
 
 <style scoped lang="scss">
-:deep(.el-dialog__body) {
+.dialog :deep(.el-dialog__body) {
     padding: 0 !important;
 }
 
@@ -176,7 +181,7 @@ defineExpose({
     display: flex;
 
     .left {
-        width: 300px;
+        width: 200px;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -185,7 +190,7 @@ defineExpose({
 
     .right {
         flex: 1;
-        padding: 0 var(--el-font-size-base);
+        padding: var(--el-font-size-base);
 
         .amount {
             display: flex;
@@ -209,11 +214,11 @@ defineExpose({
         }
 
         .number_warp {
-            --h: 40px;
+            --h: 50px;
             display: grid;
             grid-template-columns: 1fr 1fr 1fr;
             grid-template-rows: var(--h) var(--h) var(--h) var(--h);
-            gap: var(--el-font-size-base);
+            gap: 8px;
 
             .item {
                 background-color: #dddddd;

src/components/skuModal.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-dialog :title="goods.name" width="800" v-model="dialogVisible">
+    <el-dialog :title="goods.name" width="500" v-model="dialogVisible">
         <div class="header">选择规格</div>
         <div v-loading="loading">
             <div class="row" v-for="(item, index) in goods.tbProductSpec.specList" :key="index">
@@ -147,8 +147,9 @@ function show(item, t = 'shop') {
                         break;
                     case 'cart':
                         // 如果从购物车选择规格需要做选中效果
+                        const skus = goods.value.skuName.split(',')
                         arr.push({
-                            active: goods.value.skuName.includes(val),
+                            active: !!skus.find(item => item === val),
                             name: val
                         })
                         break;

src/views/home/index.vue

@@ -293,11 +293,14 @@ async function queryCartAjax() {
 // 获取取餐码
 async function createCodeAjax() {
   try {
-    const res = await createCode({
-      shopId: store.userInfo.shopId
-    })
-    masterId.value = res.code
-    // masterId.value = '#8'
+    if (process.env.VITE_DEV_SERVER_URL) {
+      masterId.value = '#8'
+    } else {
+      const res = await createCode({
+        shopId: store.userInfo.shopId
+      })
+      masterId.value = res.code
+    }
     queryCartAjax()
   } catch (error) {
     console.log(error)
@@ -430,10 +433,10 @@ onMounted(() => {
             align-items: center;
 
             .icon_item {
-              $size: 40px;
+              $size: 30px;
               width: $size;
               height: $size;
-              border-radius: 6px;
+              border-radius: 4px;
               background-color: #e2e2e2;
               display: flex;
               align-items: center;
@@ -460,8 +463,8 @@ onMounted(() => {
     align-items: center;
 
     .selected {
-      width: 20px;
-      height: 20px;
+      width: 16px;
+      height: 16px;
       display: flex;
       align-items: center;
       position: relative;