店铺配置新增功能

src/layout/index.vue

@@ -36,7 +36,7 @@
             </span> -->
               <router-link to="/shop/shop/shop_configuration">
                 <el-dropdown-item>
-                  个人中心
+                  店铺配置
                 </el-dropdown-item>
               </router-link>
               <span @click="dialogVisible = true">
@@ -291,6 +291,7 @@ $top-c-h: 60px;
     .right-menu {
       display: flex;
       align-items: center;
+
       .left_icon {
         font-size: 18px;
         margin-right: 30px;
@@ -319,7 +320,6 @@ $top-c-h: 60px;
       }
 
       .avatar-container {
-        margin-right: 10px;
         display: flex;
         align-items: center;
 

src/views/shop/components/collectMoneyCode.vue

@@ -0,0 +1,49 @@
+<template>
+    <div v-loading="pageLoading">
+        <el-form :model="form" label-position="top">
+            <el-form-item label="门店收款码">
+                <el-image :src="form.paymentQrcode || require('@/assets/images/img_download_error.png')" fit="contain"
+                    style="width: 227px;height: 227px;"></el-image>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="downloadImgHandle(form.paymentQrcode)">下载收款码</el-button>
+                <el-button type="primary" @click="downloadImgHandle(form.paymentQrcode)">下载收款码样式</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+import { tbShopInfo, tbShopInfoPut } from "@/api/user";
+export default {
+    data() {
+        return {
+            pageLoading: false,
+            form: {
+                paymentQrcode: ''
+            }
+        }
+    },
+    mounted() {
+        this.tbShopInfo();
+    },
+    methods: {
+        // 下载图片
+        downloadImgHandle(url) {
+            if (url) window.open(url, '_blank')
+        },
+        // 获取店铺详情
+        async tbShopInfo() {
+            try {
+                this.pageLoading = true
+                const shopId = localStorage.getItem("shopId");
+                const res = await tbShopInfo(shopId);
+                this.pageLoading = false
+                this.form.paymentQrcode = res.paymentQrcode;
+            } catch (error) {
+                console.log(error);
+            }
+        },
+    }
+}
+</script>

src/views/shop/components/shopInfo.vue

@@ -29,6 +29,10 @@
             uploadIndex = 3;
             "></el-image>
         </el-form-item>
+        <el-form-item label="店铺小程序码">
+          <el-image :src="form.smallQrcode || require('@/assets/images/img_download_error.png')" fit="contain"
+            style="width: 80px;height: 80px;" @click="downloadImgHandle(form.smallQrcode)"></el-image>
+        </el-form-item>
         <el-form-item label="联系电话" prop="phone">
           <el-input v-model="form.phone" placeholder="请输入联系电话" style="width: 500px;"></el-input>
         </el-form-item>
@@ -69,10 +73,16 @@
           }" format="HH:mm" value-format="HH:mm">
           </el-time-picker>
           <el-time-picker placeholder="结束时间" v-model="endTime" :picker-options="{
-            selectableRange:'00:00:00 - 23:59:59',
+            selectableRange: '00:00:00 - 23:59:59',
           }" format="HH:mm" value-format="HH:mm">
           </el-time-picker>
         </el-form-item>
+        <el-form-item label="桌位费/位/元">
+          <el-input-number v-model="form.tableFee" :min="0" />
+          <!-- <el-checkbox v-model="form.isTableFee" :label="1">免餐位费</el-checkbox> -->
+          <el-switch v-model="form.isTableFee" :active-value="1" :inactive-value="0" active-text="免餐位费">
+          </el-switch>
+        </el-form-item>
         <el-form-item label="是否开启8折活动">
           <el-switch v-model="form.isOpenYhq" active-value="true" inactive-value="false"></el-switch>
           <!-- <div style="color: #999;">是否允许用户在小程序端支付订单</div> -->
@@ -251,6 +261,10 @@ export default {
     this.tbShopInfo();
   },
   methods: {
+    // 下载图片
+    downloadImgHandle(url) {
+      if (url) window.open(url, '_blank')
+    },
     onSearchResult(res) {
       this.locationSearchList = res;
       this.amapOptions.center = [res[0].lng, res[0].lat];

src/views/shop/components/shopMode.vue

@@ -0,0 +1,69 @@
+<template>
+    <div v-loading="pageLoading">
+        <el-form :model="form" label-position="top">
+            <el-form-item label="经营模式「单选」">
+                <el-radio-group v-model="form.registerType">
+                    <el-radio label="munchies">快餐版（先支付后下单）</el-radio>
+                    <el-radio label="restaurant">餐饮版（先下单后支付）</el-radio>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item label="就餐模式「多选」">
+                <el-checkbox-group v-model="form.eatModel">
+                    <el-checkbox label="dine-in">堂食自取</el-checkbox>
+                    <el-checkbox label="take-out">允许打包</el-checkbox>
+                </el-checkbox-group>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" :loading="loading" @click="submitHandle">保存</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+import { tbShopInfo, tbShopInfoPut } from "@/api/user";
+export default {
+    data() {
+        return {
+            pageLoading: false,
+            loading: false,
+            form: {
+                id: localStorage.getItem("shopId"),
+                registerType: 'munchies',
+                eatModel: ['dine-in']
+            }
+        }
+    },
+    mounted() {
+        this.tbShopInfo();
+    },
+    methods: {
+        // 提交修改
+        async submitHandle() {
+            try {
+                this.loading = true
+                const res = await tbShopInfoPut(this.form)
+                this.loading = false
+                this.$message.success('修改成功')
+                this.tbShopInfo()
+            } catch (error) {
+                this.loading = false
+                console.log(error);
+            }
+        },
+        // 获取店铺详情
+        async tbShopInfo() {
+            try {
+                this.pageLoading = true
+                const shopId = localStorage.getItem("shopId");
+                const res = await tbShopInfo(shopId);
+                this.form.registerType = res.registerType;
+                this.form.eatModel = res.eatModel;
+                this.pageLoading = false
+            } catch (error) {
+                console.log(error);
+            }
+        },
+    }
+}
+</script>

src/views/shop/shop_configuration.vue

@@ -2,13 +2,14 @@
     <div class="app-container">
         <el-tabs v-model="activeName" type="card">
             <el-tab-pane label="店铺信息" name="1"></el-tab-pane>
+            <el-tab-pane label="经营模式" name="8"></el-tab-pane>
             <el-tab-pane label="基础配置" name="2"></el-tab-pane>
             <!-- <el-tab-pane label="通知配置" name="3"></el-tab-pane> -->
             <el-tab-pane label="安全设置" name="4"></el-tab-pane>
             <el-tab-pane label="店铺装修" name="5"></el-tab-pane>
-            <el-tab-pane label="跳转小程序" name="6" v-if="shopId==1"></el-tab-pane>
+            <el-tab-pane label="跳转小程序" name="6" v-if="shopId == 1"></el-tab-pane>
             <el-tab-pane label="通知中心" name="7"></el-tab-pane>
-            
+            <el-tab-pane label="店铺收款码" name="9"></el-tab-pane>
         </el-tabs>
         <shopInfo v-if="activeName == 1" />
         <shopSetting v-if="activeName == 2" />
@@ -17,7 +18,8 @@
         <extend v-if="activeName == 5" />
         <goxcx v-if="activeName == 6" />
         <notifications v-if="activeName == 7" />
-        
+        <ShopMode v-if="activeName == 8" />
+        <CollectMoneyCode v-if="activeName == 9" />
     </div>
 </template>
 
@@ -29,16 +31,24 @@ import securitySetting from './components/securitySetting'
 import extend from './components/extend'
 import goxcx from './components/goxcx'
 import notifications from './notifications/index.vue'
+import ShopMode from './components/shopMode.vue'
+import CollectMoneyCode from './components/collectMoneyCode.vue'
 export default {
     components: {
         shopInfo,
         shopSetting,
-        notice,securitySetting,extend,goxcx,notifications
+        notice,
+        securitySetting,
+        extend,
+        goxcx,
+        notifications,
+        ShopMode,
+        CollectMoneyCode
     },
     data() {
         return {
             activeName: '1',
-            shopId:localStorage.getItem('shopId')
+            shopId: localStorage.getItem('shopId')
         }
     }
 }