print-web/src/views/merchant/shop/detail/index.vue

<template>
    <el-container>
        <el-main>
            <el-card shadow="never" header="店铺详情" class="borderNone mt10" v-loading="loadingState">
                <fieldset class="layui-elem-field">
                    <legend><el-tag type="danger">小提示</el-tag></legend>
                    <div class="font-s14">除店铺名称，客服电话，营业时间以外，均不可自行修改。若需修改，请到微信服务群联系售后</div>
                </fieldset>
                <el-form ref="dialogForm" :model="formData" :rules="rules" label-width="100px" label-position="top">
                    <el-row :gutter="15">
                        <el-col :span="this.$store.state.global.ismobile?12:8">
                            <el-form-item label="店铺名称" prop="shop_name">
                                <el-input v-model="formData.shop_name" clearable placeholder="请输入"></el-input>
                                <div class="el-form-item-msg"></div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="this.$store.state.global.ismobile?12:8">
                            <el-form-item label="联系电话" prop="shop_mobile">
                                <el-input v-model="formData.shop_mobile" clearable placeholder="请输入"></el-input>
                                <div class="el-form-item-msg"></div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="this.$store.state.global.ismobile?12:8">
                            <el-form-item label="服务到期时间">
                                <el-input v-model="formData.vip_end" disabled clearable placeholder="请输入"></el-input>
                                <div class="el-form-item-msg"></div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="this.$store.state.global.ismobile?12:8">
                            <el-form-item label="营业时间">
                                <el-row :gutter="10">
                                    <el-col :span="11">
                                        <el-time-select v-model="formData.start_at" start="00:00" step="00:01" end="23:59" placeholder="请选择"  style="width: 100%"/>
                                    </el-col>
                                    <el-col :span="2" class="text-center">
                                        <span class="text-gray-500">-</span>
                                    </el-col>
                                    <el-col :span="11">
                                        <el-time-select v-model="formData.end_at" start="00:00" step="00:01" end="23:59" placeholder="请选择"  style="width: 100%"/>
                                    </el-col>
                                </el-row>
                                <div class="el-form-item-msg">营业时间为必选，否则小程序端无法下单</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="this.$store.state.global.ismobile?12:8">
                            <el-form-item label="详细地址" prop="shop_address">
                                <el-input v-model="formData.shop_address" clearable placeholder="请输入"></el-input>
                                <div class="el-form-item-msg"></div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="收款二维码" prop="token">
                                <div class="qrcode">
                                    <el-image
                                        style="width: 100px; height: 100px"
                                        :src="formData.qrcode"
                                        :preview-src-list="[formData.qrcode]"
                                        fit="contain"
                                        :preview-teleported="true"
                                        :hide-on-click-modal="true"
                                    >
                                    </el-image>
                                </div>
                                <div class="qrcode-down">
                                    <el-button type="success" icon="el-icon-download" @click="downloadImage1">下载二维码</el-button>
                                </div>
                                <div class="el-form-item-msg">1.线下收款码支持会员卡支付、微信支付;2.可下载打印后粘贴到店里，实现线下收款</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="店铺公告" prop="shop_notice">
                                <el-input v-model="formData.shop_notice" type="textarea" clearable placeholder="请输入"></el-input>
                                <div class="el-form-item-msg">小程序首页显示</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>
        </el-main>
        <el-footer>
            <el-button type="primary" size="large" :loading="isSaveing" @click="saveForm">保存</el-button>
        </el-footer>
    </el-container>
</template>
<script>
export default{
    data(){
        return {
            formData:{},
            rules:{},
            isSaveing:false,
            loadingState:false
        }
    },
    mounted(){
        this.getData()
    },
    methods:{
        async getData(){
            this.loadingState = true;
            var resp = await this.$API.mShop.detail.get();
            this.loadingState = false;
            if (resp.code == 0) {
                return this.$message.error(resp.msg)
            }
            this.formData = resp.data;
        },
       async saveForm(){
            var validate = await this.$refs.dialogForm.validate().catch(()=>{});
            if(!validate){ return false }
            this.isSaveing = true;
            var resp = await this.$API.mShop.save.post(this.formData);
            this.isSaveing = false;
            if (resp.code == 0) {
                return this.$message.error(resp.msg);
            }
            this.$message.success(resp.msg);
        },
        downloadImage1() {
            // 创建 a 标签
            const link = document.createElement('a')
            // 设置下载属性
            link.href = this.formData.qrcode
            link.download = '店铺收款二维码_' + new Date().getTime() + '.jpg' // 文件名
            // 触发点击
            document.body.appendChild(link)
            link.click()
            // 移除标签
            document.body.removeChild(link)
            this.$message.success('下载成功')
        }
    }
}
</script>

<style>
.font-s14{font-size: 14px;}
.text-center{text-align: center;}
.qrcode{border: 1px solid #ccc;padding: 5px;border-radius: 5px;}
.qrcode img{width: 100%;height: 100%;}
.qrcode-down{width: 100%;margin-top: 10px;}
</style>