1.新增商品编辑

src/views/table/components/tableInfo.vue

@@ -16,21 +16,67 @@
             <span class="t">{{ status[props.tableInfo.status] }}</span>
         </div>
         <div class="place_order">
-            <router-link class="btn" :to="{ name: 'home', query: { table_code: 1 } }">
+            <div class="btn">
                 <div class="top">
                     <el-icon class="icon">
                         <TakeawayBox />
                     </el-icon>
                     <span class="t">点单</span>
                 </div>
-                <span class="tips">开始新订单</span>
-            </router-link>
+                <!-- <span class="tips">开始新订单</span> -->
+                <div class="btn_wrap">
+                    <el-button type="primary" style="width: 100%;" @click="toOrderMeal(1)">直接点单</el-button>
+                </div>
+                <div class="btn_wrap">
+                    <el-button type="primary" style="width: 100%;" @click="toOrderMeal(2)">选择会员点单</el-button>
+                </div>
+            </div>
         </div>
+        <el-dialog :title="`台桌：${props.tableInfo.name} - 选择会员`" v-model="showDialog" width="80%">
+            <el-form inline>
+                <el-form-item>
+                    <el-input placeholder="请输入手机号搜索会员" v-model="tableData.phone" />
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="getMemberList">搜索</el-button>
+                    <el-button @click="resetTable">重置</el-button>
+                </el-form-item>
+            </el-form>
+            <el-table :data="tableData.list" height="300px" border stripe v-loading="tableData.loading">
+                <el-table-column prop="name" label="昵称" width="120px" />
+                <el-table-column prop="telephone" label="手机" width="150px" />
+                <el-table-column prop="code" label="编号" width="120px" />
+                <el-table-column prop="level" label="等级" />
+                <el-table-column prop="levelConsume" label="积分" />
+                <el-table-column prop="amount" label="余额" width="100px">
+                    <template v-slot="scope">
+                        ￥{{ formatDecimal(scope.row.amount) }}
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作" width="120px">
+                    <template v-slot="scope">
+                        <el-button type="primary" @click="toHomeMember(scope.row)">选择</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <el-pagination layout="prev, pager, next, total" background style="margin-top: 20px;"
+                :total="Number(tableData.total)" v-model:current-page="tableData.page"
+                @current-change="getMemberList" />
+        </el-dialog>
     </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import { useUser } from "@/store/user.js"
+import { useGlobal } from '@/store/global.js'
+import { queryMembermember } from '@/api/member/index.js'
+import { formatDecimal } from '@/utils/index.js'
+
+const router = useRouter()
+const global = useGlobal()
+const store = useUser()
 
 const emit = defineEmits(['close'])
 
@@ -52,6 +98,65 @@ const status = ref({
 function close() {
     emit('close')
 }
+
+// 点单
+function toOrderMeal(t) {
+    if (t == 1) {
+        // 直接点单
+        global.setOrderTable(props.tableInfo)
+        router.push({
+            name: 'home',
+        })
+    } else {
+        // 选择会员点单
+        showDialog.value = true
+        getMemberList()
+    }
+}
+
+const showDialog = ref(false)
+const tableData = reactive({
+    phone: '',
+    loading: false,
+    list: [],
+    page: 1,
+    size: 10,
+    total: 0
+})
+
+// 重置表格
+function resetTable() {
+    tableData.phone = ''
+    tableData.page = 1
+    getMemberList()
+}
+
+// 获取会员列表
+async function getMemberList() {
+    try {
+        tableData.loading = true
+        const res = await queryMembermember({
+            shopId: store.userInfo.shopId,
+            phone: tableData.phone,
+            page: tableData.page,
+            pageSize: tableData.size
+        })
+        tableData.loading = false
+        tableData.list = res.list
+        tableData.total = res.total
+    } catch (error) {
+        console.log(error);
+    }
+}
+
+// 选择会员去下单
+function toHomeMember(row) {
+    global.setOrderTable(props.tableInfo)
+    global.setOrderMember(row)
+    router.push({
+        name: 'home',
+    })
+}
 </script>
 
 <style scoped lang="scss">
@@ -104,17 +209,21 @@ function close() {
         display: flex;
         align-items: center;
         justify-content: center;
+        position: relative;
+        overflow: hidden;
 
         .btn {
             display: flex;
+            gap: 10px;
             flex-direction: column;
             align-items: center;
             text-decoration: none;
+            $size: 150px;
 
             .top {
                 background-color: var(--el-color-danger);
-                width: 130px;
-                height: 130px;
+                width: $size;
+                height: $size;
                 display: flex;
                 flex-direction: column;
                 align-items: center;
@@ -135,6 +244,10 @@ function close() {
                 color: #999;
                 padding-top: 6px;
             }
+
+            .btn_wrap {
+                width: $size;
+            }
         }
     }
 }