You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
290 lines
10 KiB
290 lines
10 KiB
1 month ago
|
<template>
|
||
|
|
<div class="site-setting-wrap pagePadding min-flex-right">
|
||
|
|
<div class="siteMessage flex-common" id="siteMessage1">
|
||
|
|
<h3>基础信息</h3>
|
||
|
|
<el-form :model="siteForm" :rules="siteFormrules" ref="siteForm">
|
||
|
|
<div class="flex-wrap">
|
||
|
|
<div class="flex-left">
|
||
|
|
<div class="qqCode-wrap right">
|
||
|
|
<div class="flex">医生照片
|
||
|
|
<img class="labelImg" src="@/assets/form_qua_ic.svg" alt="">
|
||
|
|
</div>
|
||
|
|
<el-upload class="avatar-uploader upload-demo" accept=".jpg,.png"
|
||
|
|
action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileList"
|
||
|
|
:on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleAvatarSuccess"
|
||
|
|
:before-upload="beforeAvatarUpload">
|
||
|
|
<hover-button button-text="重新上传" :default-icon="require('../assets/upLoad_grey.svg')"
|
||
|
|
:hover-icon="require('../assets/upLoad_active.svg')" default-text-color="#23242B"
|
||
|
|
hover-text-color="#006AFF" @click="btnClick" />
|
||
|
|
<div slot="tip" class="el-upload__tip desc">支持png、jpg格式，尺寸32PX*32PX</div>
|
||
|
|
</el-upload>
|
||
|
|
</div>
|
||
|
|
<GuipInput ref="GuipInput" column="column" label="医生姓名" v-model="siteForm.company_name"
|
||
|
|
prop="company_name" placeholder="请输入" />
|
||
|
|
</div>
|
||
|
|
<div class="flex-line"></div>
|
||
|
|
<div class="flex-right">
|
||
|
|
<GuipInput ref="GuipInput" column="column" label="身份证号码" v-model="siteForm.company_address"
|
||
|
|
prop="company_address" placeholder="请输入" />
|
||
|
|
<GuipInput ref="GuipInput" column="column" label="手机号码" v-model="siteForm.phone"
|
||
|
|
prop="company_phone" placeholder="常用手机号" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-form>
|
||
|
|
<GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm')" />
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="siteMessage flex-common" id="siteMessage2">
|
||
|
|
<h3>个人介绍</h3>
|
||
|
|
<el-form :model="siteForm1" :rules="siteFormrules1" ref="siteForm1">
|
||
|
|
<div class="flex-wrap">
|
||
|
|
<div class="flex-left">
|
||
|
|
<GuipFormItem column="column" class="" label="一句话介绍">
|
||
|
|
<GuipTextarea slot="formDom" v-model="form.description" prop="description" width="100%"
|
||
|
|
height="56px" placeholder="请输入描述内容" maxlength="14" show-word-limit />
|
||
|
|
</GuipFormItem>
|
||
|
|
<GuipFormItem column="column" class="" label="详细介绍">
|
||
|
|
<GuipTextarea slot="formDom" v-model="form.detailDesc" prop="description" width="100%"
|
||
|
|
height="86px" autosize placeholder="请输入描述内容" maxlength="不限" show-word-limit />
|
||
|
|
</GuipFormItem>
|
||
|
|
</div>
|
||
|
|
<div class="flex-line"></div>
|
||
|
|
<div class="flex-right">
|
||
|
|
<GuipFormItem column="column" label="个人标签">
|
||
|
|
<div slot="formLeft" class="form-top-icon"> </div>
|
||
|
|
<span slot="formRight" class="desc">展示给患者，体现您的专业性</span>
|
||
|
|
<GuipSelect slot="formDom" v-model="form.tags" multiple :options="options_payword"
|
||
|
|
placeholder="点击选择">
|
||
|
|
</GuipSelect>
|
||
|
|
|
||
|
|
</GuipFormItem>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-form>
|
||
|
|
<GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm1')" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import store from '../store';
|
||
|
|
import { mapState } from 'vuex';
|
||
|
|
import HoverButton from '@/components/HoverButton.vue';
|
||
|
|
import GuipFormItem from '@/components/GuipFormItem.vue';
|
||
|
|
import GuipInput from '@/components/GuipInput.vue';
|
||
|
|
import GuipTextarea from '@/components/GuipTextarea.vue';
|
||
|
|
import GroupFormBtns from '@/components/GroupFormBtns.vue';
|
||
|
|
import GuipSelect from '@/components/GuipSelect.vue';
|
||
|
|
// import {setHighActive} from '@/utils/common';
|
||
|
|
export default {
|
||
|
|
// 站点设置
|
||
|
|
name: '',
|
||
|
|
props: [''],
|
||
|
|
components: {
|
||
|
|
GuipFormItem,
|
||
|
|
HoverButton,
|
||
|
|
GuipInput,
|
||
|
|
GuipSelect,
|
||
|
|
GuipTextarea,
|
||
|
|
GroupFormBtns
|
||
|
|
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
fileList: [
|
||
|
|
{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }
|
||
|
|
],
|
||
|
|
options_payword: [{
|
||
|
|
value: '选项1',
|
||
|
|
label: '黄金糕'
|
||
|
|
}, {
|
||
|
|
value: '选项2',
|
||
|
|
label: '双皮奶'
|
||
|
|
}, {
|
||
|
|
value: '选项3',
|
||
|
|
label: '蚵仔煎'
|
||
|
|
}, {
|
||
|
|
value: '选项4',
|
||
|
|
label: '龙须面'
|
||
|
|
}, {
|
||
|
|
value: '选项5',
|
||
|
|
label: '北京烤鸭'
|
||
|
|
}],
|
||
|
|
siteForm: {
|
||
|
|
company_name: '',
|
||
|
|
company_address: '',
|
||
|
|
company_phone: '',
|
||
|
|
site_alias: '',
|
||
|
|
},
|
||
|
|
form: {
|
||
|
|
description: '',
|
||
|
|
detailDesc: '',
|
||
|
|
tags:''
|
||
|
|
},
|
||
|
|
siteFormrules: {
|
||
|
|
site_alias: [
|
||
|
|
{ required: true, message: '请输入站点简称', trigger: 'blur' }
|
||
|
|
]
|
||
|
|
},
|
||
|
|
siteForm1: {
|
||
|
|
domain_set: '',
|
||
|
|
domain_source: '平台免费域名',
|
||
|
|
},
|
||
|
|
siteForm2: {
|
||
|
|
zhifubao_pay: '',
|
||
|
|
weixin_pay: '',
|
||
|
|
},
|
||
|
|
siteFormrules1: {
|
||
|
|
domain_source: [
|
||
|
|
{ required: true, message: '请输入站点简称', trigger: 'blur' }
|
||
|
|
]
|
||
|
|
},
|
||
|
|
domain_source: [
|
||
|
|
{ label: '平台免费域名', value: '平台免费域名', selectedLabel: "平台免费域名" },
|
||
|
|
{ label: '我自己有域名', value: '我自己有域名', selectedLabel: "我自己有域名" },
|
||
|
|
],
|
||
|
|
options_weixin_null: {
|
||
|
|
label: '暂无收款账号',
|
||
|
|
value: '暂时没有收款账号，我想稍后配置',
|
||
|
|
desc: '暂无收款账号，稍后配置'
|
||
|
|
},
|
||
|
|
select_placeholder_weixin: '暂无收款账号，稍后配置',
|
||
|
|
selectedItemWeixin: {},//微信收款方式
|
||
|
|
options_weixin: [],
|
||
|
|
options_zhifubao: [],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
store.commit('SET_PAGETITLE', '基本设置');
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
btnClick() {
|
||
|
|
},
|
||
|
|
handleRemove(file, fileList) {
|
||
|
|
console.log(file, fileList);
|
||
|
|
},
|
||
|
|
handlePreview(file) {
|
||
|
|
console.log(file);
|
||
|
|
},
|
||
|
|
// 上传图片
|
||
|
|
handleAvatarSuccess(res, file) {
|
||
|
|
this.imageUrl1 = URL.createObjectURL(file.raw);
|
||
|
|
},
|
||
|
|
beforeAvatarUpload(file) {
|
||
|
|
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
|
||
|
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
||
|
|
|
||
|
|
if (!isJPG) {
|
||
|
|
this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
|
||
|
|
}
|
||
|
|
if (!isLt2M) {
|
||
|
|
this.$message.error('上传头像图片大小不能超过 2MB!');
|
||
|
|
}
|
||
|
|
return isJPG && isLt2M;
|
||
|
|
},
|
||
|
|
changeNormalWeixin() {
|
||
|
|
|
||
|
|
},
|
||
|
|
changeSelectWeixin(item, flag) {
|
||
|
|
if (flag) {
|
||
|
|
this.select_placeholder_weixin = this.options_weixin_null.desc;
|
||
|
|
return
|
||
|
|
}
|
||
|
|
this.selectedItem = { ...item };
|
||
|
|
console.log(this.selectedItem, 'this.selectedItem====');
|
||
|
|
},
|
||
|
|
// 销售渠道
|
||
|
|
domain_radioChange(type) {
|
||
|
|
console.log(type, '--');
|
||
|
|
},
|
||
|
|
onSwitchChange(data) {
|
||
|
|
console.log(data, '---');
|
||
|
|
},
|
||
|
|
submitForm(form) {
|
||
|
|
console.log(this.$refs[form], '-----');
|
||
|
|
this.$refs[form].validate((valid) => {
|
||
|
|
console.log(this[form], '======formxinxi');
|
||
|
|
if (valid) {
|
||
|
|
alert('提交成功!');
|
||
|
|
} else {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
cancelClick() {
|
||
|
|
console.log('quxiao');
|
||
|
|
},
|
||
|
|
confirmClick(type) {
|
||
|
|
console.log(type, '确认');
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="scss">
|
||
|
|
.siteMessage {
|
||
|
|
border-radius: 4px;
|
||
|
|
transition: all .5s;
|
||
|
|
border: 1px solid transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.addStore {
|
||
|
|
margin-top: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.qqCode-wrap {
|
||
|
|
margin-bottom: 14px;
|
||
|
|
|
||
|
|
.labelImg {
|
||
|
|
opacity: .7;
|
||
|
|
margin-left: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.avatar-uploader {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: flex-start;
|
||
|
|
justify-content: flex-start;
|
||
|
|
margin: 12px 0 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.avatar-desc {
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.site-setting-wrap {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#siteMessage2 {
|
||
|
|
margin: 12px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.domain-wrap {
|
||
|
|
.domain-item {
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.domain-item p:last-child {
|
||
|
|
padding-left: 23px;
|
||
|
|
color: #8A9099;
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
text-align: left;
|
||
|
|
line-height: 18px;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.domain-box {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: flex-start;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|