Add configurable contact page management
This commit is contained in:
王鹏
@@ -0,0 +1,39 @@
|
||||
package com.ruoyi.web.controller.app;
|
||||
|
||||
import com.ruoyi.app.domain.AppContactPage;
|
||||
import com.ruoyi.app.service.IAppContactService;
|
||||
import com.ruoyi.common.annotation.Log;
|
||||
import com.ruoyi.common.core.controller.BaseController;
|
||||
import com.ruoyi.common.core.domain.AjaxResult;
|
||||
import com.ruoyi.common.enums.BusinessType;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.security.access.prepost.PreAuthorize;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
import org.springframework.web.bind.annotation.PutMapping;
|
||||
import org.springframework.web.bind.annotation.RequestBody;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.RestController;
|
||||
|
||||
@RestController
|
||||
@RequestMapping("/app/contact")
|
||||
public class AppContactController extends BaseController
|
||||
{
|
||||
@Autowired
|
||||
private IAppContactService contactService;
|
||||
|
||||
@PreAuthorize("@ss.hasPermi('app:contact:query')")
|
||||
@GetMapping
|
||||
public AjaxResult getInfo()
|
||||
{
|
||||
return success(contactService.selectAdminContactPage());
|
||||
}
|
||||
|
||||
@PreAuthorize("@ss.hasPermi('app:contact:edit')")
|
||||
@Log(title = "联系页面配置", businessType = BusinessType.UPDATE)
|
||||
@PutMapping
|
||||
public AjaxResult edit(@RequestBody AppContactPage page)
|
||||
{
|
||||
page.setUpdateBy(getUsername());
|
||||
return toAjax(contactService.updateContactPage(page));
|
||||
}
|
||||
}
|
||||
@@ -2,6 +2,7 @@ package com.ruoyi.web.controller.app;
|
||||
|
||||
import com.ruoyi.app.domain.ShuiYinVo;
|
||||
import com.ruoyi.app.mapper.AppPunlicMapper;
|
||||
import com.ruoyi.app.service.IAppContactService;
|
||||
import com.ruoyi.common.core.controller.BaseController;
|
||||
import com.ruoyi.common.core.domain.AjaxResult;
|
||||
import com.ruoyi.system.service.ISysConfigService;
|
||||
@@ -20,6 +21,8 @@ public class PublicController extends BaseController {
|
||||
AppPunlicMapper appPunlicMapper;
|
||||
@Autowired
|
||||
private ISysConfigService configService;
|
||||
@Autowired
|
||||
private IAppContactService contactService;
|
||||
/**
|
||||
* 去水印 key 免费申请联系作者微信：yimoziyuan666
|
||||
* @return
|
||||
@@ -76,4 +79,11 @@ public class PublicController extends BaseController {
|
||||
return map;
|
||||
}
|
||||
|
||||
/** 获取小程序联系页面公开配置。 */
|
||||
@GetMapping(value = "/contact-page")
|
||||
public AjaxResult getContactPage()
|
||||
{
|
||||
return success(contactService.selectPublicContactPage());
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
package com.ruoyi.app.domain;
|
||||
|
||||
import com.ruoyi.common.core.domain.BaseEntity;
|
||||
|
||||
/**
|
||||
* 小程序联系页面联系方式对象 app_contact_item。
|
||||
*/
|
||||
public class AppContactItem extends BaseEntity
|
||||
{
|
||||
private static final long serialVersionUID = 1L;
|
||||
|
||||
private Long id;
|
||||
private String type;
|
||||
private String label;
|
||||
private String value;
|
||||
private String iconUrl;
|
||||
private String qrCodeUrl;
|
||||
/** copy复制，qrcode查看二维码 */
|
||||
private String actionType;
|
||||
/** 0启用，1停用 */
|
||||
private String status;
|
||||
private Integer sort;
|
||||
|
||||
public Long getId() { return id; }
|
||||
public void setId(Long id) { this.id = id; }
|
||||
public String getType() { return type; }
|
||||
public void setType(String type) { this.type = type; }
|
||||
public String getLabel() { return label; }
|
||||
public void setLabel(String label) { this.label = label; }
|
||||
public String getValue() { return value; }
|
||||
public void setValue(String value) { this.value = value; }
|
||||
public String getIconUrl() { return iconUrl; }
|
||||
public void setIconUrl(String iconUrl) { this.iconUrl = iconUrl; }
|
||||
public String getQrCodeUrl() { return qrCodeUrl; }
|
||||
public void setQrCodeUrl(String qrCodeUrl) { this.qrCodeUrl = qrCodeUrl; }
|
||||
public String getActionType() { return actionType; }
|
||||
public void setActionType(String actionType) { this.actionType = actionType; }
|
||||
public String getStatus() { return status; }
|
||||
public void setStatus(String status) { this.status = status; }
|
||||
public Integer getSort() { return sort; }
|
||||
public void setSort(Integer sort) { this.sort = sort; }
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
package com.ruoyi.app.domain;
|
||||
|
||||
import java.util.ArrayList;
|
||||
import java.util.List;
|
||||
import com.ruoyi.common.core.domain.BaseEntity;
|
||||
|
||||
/**
|
||||
* 小程序联系页面配置对象 app_contact_page。
|
||||
*/
|
||||
public class AppContactPage extends BaseEntity
|
||||
{
|
||||
private static final long serialVersionUID = 1L;
|
||||
|
||||
private Long id;
|
||||
private String avatarUrl;
|
||||
private String nickname;
|
||||
private String bio;
|
||||
private String backgroundUrl;
|
||||
private List<AppContactItem> contacts = new ArrayList<>();
|
||||
|
||||
public Long getId() { return id; }
|
||||
public void setId(Long id) { this.id = id; }
|
||||
public String getAvatarUrl() { return avatarUrl; }
|
||||
public void setAvatarUrl(String avatarUrl) { this.avatarUrl = avatarUrl; }
|
||||
public String getNickname() { return nickname; }
|
||||
public void setNickname(String nickname) { this.nickname = nickname; }
|
||||
public String getBio() { return bio; }
|
||||
public void setBio(String bio) { this.bio = bio; }
|
||||
public String getBackgroundUrl() { return backgroundUrl; }
|
||||
public void setBackgroundUrl(String backgroundUrl) { this.backgroundUrl = backgroundUrl; }
|
||||
public List<AppContactItem> getContacts() { return contacts; }
|
||||
public void setContacts(List<AppContactItem> contacts) { this.contacts = contacts; }
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
package com.ruoyi.app.mapper;
|
||||
|
||||
import java.util.List;
|
||||
import com.ruoyi.app.domain.AppContactItem;
|
||||
import com.ruoyi.app.domain.AppContactPage;
|
||||
import org.apache.ibatis.annotations.Param;
|
||||
|
||||
public interface AppContactMapper
|
||||
{
|
||||
AppContactPage selectAppContactPage();
|
||||
|
||||
List<AppContactItem> selectAppContactItemList(@Param("status") String status);
|
||||
|
||||
int upsertAppContactPage(AppContactPage page);
|
||||
|
||||
int deleteAllAppContactItems();
|
||||
|
||||
int insertAppContactItem(AppContactItem item);
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
package com.ruoyi.app.service;
|
||||
|
||||
import com.ruoyi.app.domain.AppContactPage;
|
||||
|
||||
public interface IAppContactService
|
||||
{
|
||||
/** 查询后台维护用的完整配置。 */
|
||||
AppContactPage selectAdminContactPage();
|
||||
|
||||
/** 查询小程序展示用的启用配置。 */
|
||||
AppContactPage selectPublicContactPage();
|
||||
|
||||
/** 保存页面资料及完整联系方式列表。 */
|
||||
int updateContactPage(AppContactPage page);
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
package com.ruoyi.app.service.impl;
|
||||
|
||||
import java.util.ArrayList;
|
||||
import java.util.Date;
|
||||
import java.util.List;
|
||||
import com.ruoyi.app.domain.AppContactItem;
|
||||
import com.ruoyi.app.domain.AppContactPage;
|
||||
import com.ruoyi.app.mapper.AppContactMapper;
|
||||
import com.ruoyi.app.service.IAppContactService;
|
||||
import com.ruoyi.common.exception.ServiceException;
|
||||
import com.ruoyi.common.utils.StringUtils;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.stereotype.Service;
|
||||
import org.springframework.transaction.annotation.Transactional;
|
||||
|
||||
@Service
|
||||
public class AppContactServiceImpl implements IAppContactService
|
||||
{
|
||||
private static final int MAX_CONTACTS = 30;
|
||||
|
||||
@Autowired
|
||||
private AppContactMapper contactMapper;
|
||||
|
||||
@Override
|
||||
public AppContactPage selectAdminContactPage()
|
||||
{
|
||||
return buildContactPage(null);
|
||||
}
|
||||
|
||||
@Override
|
||||
public AppContactPage selectPublicContactPage()
|
||||
{
|
||||
return buildContactPage("0");
|
||||
}
|
||||
|
||||
private AppContactPage buildContactPage(String status)
|
||||
{
|
||||
AppContactPage page = contactMapper.selectAppContactPage();
|
||||
if (page == null)
|
||||
{
|
||||
page = defaultPage();
|
||||
}
|
||||
page.setContacts(contactMapper.selectAppContactItemList(status));
|
||||
return page;
|
||||
}
|
||||
|
||||
@Override
|
||||
@Transactional
|
||||
public int updateContactPage(AppContactPage page)
|
||||
{
|
||||
if (page == null)
|
||||
{
|
||||
throw new ServiceException("页面配置不能为空");
|
||||
}
|
||||
normalizePage(page);
|
||||
List<AppContactItem> contacts = page.getContacts();
|
||||
if (contacts == null)
|
||||
{
|
||||
contacts = new ArrayList<>();
|
||||
page.setContacts(contacts);
|
||||
}
|
||||
if (contacts.size() > MAX_CONTACTS)
|
||||
{
|
||||
throw new ServiceException("联系方式最多可配置" + MAX_CONTACTS + "条");
|
||||
}
|
||||
|
||||
Date now = new Date();
|
||||
page.setId(1L);
|
||||
page.setUpdateTime(now);
|
||||
contactMapper.upsertAppContactPage(page);
|
||||
contactMapper.deleteAllAppContactItems();
|
||||
|
||||
int index = 0;
|
||||
for (AppContactItem item : contacts)
|
||||
{
|
||||
normalizeItem(item, index++);
|
||||
item.setId(null);
|
||||
item.setCreateBy(page.getUpdateBy());
|
||||
item.setUpdateBy(page.getUpdateBy());
|
||||
item.setCreateTime(now);
|
||||
item.setUpdateTime(now);
|
||||
contactMapper.insertAppContactItem(item);
|
||||
}
|
||||
return 1;
|
||||
}
|
||||
|
||||
private void normalizePage(AppContactPage page)
|
||||
{
|
||||
page.setAvatarUrl(trimAndCheck(page.getAvatarUrl(), 500, "头像地址"));
|
||||
page.setNickname(trimAndCheck(page.getNickname(), 100, "昵称"));
|
||||
page.setBio(trimAndCheck(page.getBio(), 500, "个人简介"));
|
||||
page.setBackgroundUrl(trimAndCheck(page.getBackgroundUrl(), 500, "背景图地址"));
|
||||
if (StringUtils.isEmpty(page.getNickname()))
|
||||
{
|
||||
throw new ServiceException("昵称不能为空");
|
||||
}
|
||||
}
|
||||
|
||||
private void normalizeItem(AppContactItem item, int index)
|
||||
{
|
||||
if (item == null)
|
||||
{
|
||||
throw new ServiceException("第" + (index + 1) + "条联系方式不能为空");
|
||||
}
|
||||
item.setType(trimAndCheck(item.getType(), 30, "联系方式类型"));
|
||||
item.setLabel(trimAndCheck(item.getLabel(), 50, "联系方式名称"));
|
||||
item.setValue(trimAndCheck(item.getValue(), 500, "联系方式内容"));
|
||||
item.setIconUrl(trimAndCheck(item.getIconUrl(), 500, "图标地址"));
|
||||
item.setQrCodeUrl(trimAndCheck(item.getQrCodeUrl(), 500, "二维码地址"));
|
||||
if (StringUtils.isEmpty(item.getType()))
|
||||
{
|
||||
item.setType("custom");
|
||||
}
|
||||
if (StringUtils.isEmpty(item.getLabel()))
|
||||
{
|
||||
throw new ServiceException("第" + (index + 1) + "条联系方式名称不能为空");
|
||||
}
|
||||
if (StringUtils.isEmpty(item.getValue()))
|
||||
{
|
||||
throw new ServiceException("第" + (index + 1) + "条联系方式内容不能为空");
|
||||
}
|
||||
if (!"qrcode".equals(item.getActionType()) || StringUtils.isEmpty(item.getQrCodeUrl()))
|
||||
{
|
||||
item.setActionType("copy");
|
||||
}
|
||||
item.setStatus("1".equals(item.getStatus()) ? "1" : "0");
|
||||
if (item.getSort() == null || item.getSort() < 0)
|
||||
{
|
||||
item.setSort((index + 1) * 10);
|
||||
}
|
||||
}
|
||||
|
||||
private String trimAndCheck(String value, int maxLength, String fieldName)
|
||||
{
|
||||
String result = StringUtils.trim(value);
|
||||
if (result != null && result.length() > maxLength)
|
||||
{
|
||||
throw new ServiceException(fieldName + "不能超过" + maxLength + "个字符");
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
private AppContactPage defaultPage()
|
||||
{
|
||||
AppContactPage page = new AppContactPage();
|
||||
page.setId(1L);
|
||||
page.setAvatarUrl("https://img.yidaima.cn/%E5%A4%B4%E5%83%8F/9b889964f97e4d0c8f52f7b9ec0d04da.jpg");
|
||||
page.setNickname("Nan Yin");
|
||||
page.setBio("如果爱意难平，那就把它藏在心底吧！");
|
||||
return page;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<!DOCTYPE mapper
|
||||
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
|
||||
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
|
||||
<mapper namespace="com.ruoyi.app.mapper.AppContactMapper">
|
||||
|
||||
<resultMap type="AppContactPage" id="AppContactPageResult">
|
||||
<result property="id" column="id" />
|
||||
<result property="avatarUrl" column="avatar_url" />
|
||||
<result property="nickname" column="nickname" />
|
||||
<result property="bio" column="bio" />
|
||||
<result property="backgroundUrl" column="background_url" />
|
||||
<result property="createBy" column="create_by" />
|
||||
<result property="createTime" column="create_time" />
|
||||
<result property="updateBy" column="update_by" />
|
||||
<result property="updateTime" column="update_time" />
|
||||
</resultMap>
|
||||
|
||||
<resultMap type="AppContactItem" id="AppContactItemResult">
|
||||
<result property="id" column="id" />
|
||||
<result property="type" column="type" />
|
||||
<result property="label" column="label" />
|
||||
<result property="value" column="contact_value" />
|
||||
<result property="iconUrl" column="icon_url" />
|
||||
<result property="qrCodeUrl" column="qr_code_url" />
|
||||
<result property="actionType" column="action_type" />
|
||||
<result property="status" column="status" />
|
||||
<result property="sort" column="sort" />
|
||||
<result property="createBy" column="create_by" />
|
||||
<result property="createTime" column="create_time" />
|
||||
<result property="updateBy" column="update_by" />
|
||||
<result property="updateTime" column="update_time" />
|
||||
</resultMap>
|
||||
|
||||
<select id="selectAppContactPage" resultMap="AppContactPageResult">
|
||||
select id, avatar_url, nickname, bio, background_url,
|
||||
create_by, create_time, update_by, update_time
|
||||
from app_contact_page
|
||||
where id = 1
|
||||
</select>
|
||||
|
||||
<select id="selectAppContactItemList" resultMap="AppContactItemResult">
|
||||
select id, type, label, contact_value, icon_url, qr_code_url, action_type,
|
||||
status, sort, create_by, create_time, update_by, update_time
|
||||
from app_contact_item
|
||||
<if test="status != null and status != ''">where status = #{status}</if>
|
||||
order by sort asc, id asc
|
||||
</select>
|
||||
|
||||
<insert id="upsertAppContactPage" parameterType="AppContactPage">
|
||||
insert into app_contact_page
|
||||
(id, avatar_url, nickname, bio, background_url, create_by, create_time, update_by, update_time)
|
||||
values
|
||||
(1, #{avatarUrl}, #{nickname}, #{bio}, #{backgroundUrl},
|
||||
#{updateBy}, #{updateTime}, #{updateBy}, #{updateTime})
|
||||
on duplicate key update
|
||||
avatar_url = values(avatar_url), nickname = values(nickname), bio = values(bio),
|
||||
background_url = values(background_url), update_by = values(update_by),
|
||||
update_time = values(update_time)
|
||||
</insert>
|
||||
|
||||
<delete id="deleteAllAppContactItems">
|
||||
delete from app_contact_item
|
||||
</delete>
|
||||
|
||||
<insert id="insertAppContactItem" parameterType="AppContactItem" useGeneratedKeys="true" keyProperty="id">
|
||||
insert into app_contact_item
|
||||
(type, label, contact_value, icon_url, qr_code_url, action_type, status, sort,
|
||||
create_by, create_time, update_by, update_time)
|
||||
values
|
||||
(#{type}, #{label}, #{value}, #{iconUrl}, #{qrCodeUrl}, #{actionType}, #{status}, #{sort},
|
||||
#{createBy}, #{createTime}, #{updateBy}, #{updateTime})
|
||||
</insert>
|
||||
</mapper>
|
||||
9
ruoyi-ui/src/api/app/contact.js
Normal file
9
ruoyi-ui/src/api/app/contact.js
Normal file
@@ -0,0 +1,9 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function getContactConfig() {
|
||||
return request({ url: '/app/contact', method: 'get' })
|
||||
}
|
||||
|
||||
export function updateContactConfig(data) {
|
||||
return request({ url: '/app/contact', method: 'put', data })
|
||||
}
|
||||
270
ruoyi-ui/src/views/app/contact/index.vue
Normal file
270
ruoyi-ui/src/views/app/contact/index.vue
Normal file
@@ -0,0 +1,270 @@
|
||||
<template>
|
||||
<div v-loading="loading" class="app-container contact-config">
|
||||
<el-alert
|
||||
title="这里保存后，小程序会动态展示启用的联系方式；页面导航标题保持现状。"
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
class="page-alert"
|
||||
/>
|
||||
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="96px">
|
||||
<el-card shadow="never" class="config-card">
|
||||
<div slot="header" class="card-header">
|
||||
<div>
|
||||
<div class="card-title">页面资料</div>
|
||||
<div class="card-desc">配置头像、昵称和简介，背景图不上传时使用默认渐变背景。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-row :gutter="28">
|
||||
<el-col :xs="24" :sm="12">
|
||||
<el-form-item label="头像" prop="avatarUrl">
|
||||
<image-upload v-model="form.avatarUrl" :limit="1" :file-size="5" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12">
|
||||
<el-form-item label="顶部背景图" prop="backgroundUrl">
|
||||
<image-upload v-model="form.backgroundUrl" :limit="1" :file-size="8" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="28">
|
||||
<el-col :xs="24" :sm="12">
|
||||
<el-form-item label="昵称" prop="nickname">
|
||||
<el-input v-model.trim="form.nickname" maxlength="100" show-word-limit placeholder="请输入昵称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12">
|
||||
<el-form-item label="个人简介" prop="bio">
|
||||
<el-input v-model.trim="form.bio" maxlength="500" show-word-limit placeholder="请输入个人简介" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" class="config-card">
|
||||
<div slot="header" class="card-header">
|
||||
<div>
|
||||
<div class="card-title">联系方式</div>
|
||||
<div class="card-desc">可新增、删除、启停和排序；未上传图标时小程序会使用对应类型的文字图标。</div>
|
||||
</div>
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="small" @click="addContact">新增联系方式</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :data="form.contacts" border row-key="rowKey" empty-text="暂无联系方式，请点击右上角新增">
|
||||
<el-table-column label="排序" width="90" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-input-number v-model="scope.row.sort" :min="0" :max="9999" :controls="false" size="small" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类型" width="130">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.type" size="small" @change="applyTypePreset(scope.row)">
|
||||
<el-option v-for="item in contactTypes" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="显示名称" min-width="145">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model.trim="scope.row.label" maxlength="50" size="small" placeholder="如：微信" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="联系内容" min-width="220">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model.trim="scope.row.value" maxlength="500" size="small" placeholder="账号、邮箱或网址" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="点击操作" width="130">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.actionType" size="small">
|
||||
<el-option label="复制内容" value="copy" />
|
||||
<el-option label="查看二维码" value="qrcode" :disabled="!scope.row.qrCodeUrl" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="自定义图标" width="112" align="center">
|
||||
<template slot-scope="scope">
|
||||
<image-upload v-model="scope.row.iconUrl" class="compact-uploader" :limit="1" :file-size="2" :is-show-tip="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="二维码" width="112" align="center">
|
||||
<template slot-scope="scope">
|
||||
<image-upload v-model="scope.row.qrCodeUrl" class="compact-uploader" :limit="1" :file-size="5" :is-show-tip="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="90" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch v-model="scope.row.status" active-value="0" inactive-value="1" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="80" align="center" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" class="danger-button" @click="removeContact(scope.$index)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<div class="save-bar">
|
||||
<el-button type="primary" icon="el-icon-check" :loading="saving" @click="submitForm">保存配置</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getContactConfig, updateContactConfig } from '@/api/app/contact'
|
||||
|
||||
export default {
|
||||
name: 'ContactConfig',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
saving: false,
|
||||
rowSequence: 0,
|
||||
contactTypes: [
|
||||
{ label: 'QQ', value: 'qq' },
|
||||
{ label: '微信', value: 'wechat' },
|
||||
{ label: '邮箱', value: 'email' },
|
||||
{ label: '博客/网站', value: 'blog' },
|
||||
{ label: '自定义', value: 'custom' }
|
||||
],
|
||||
form: this.emptyForm(),
|
||||
rules: {
|
||||
nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadConfig()
|
||||
},
|
||||
methods: {
|
||||
emptyForm() {
|
||||
return { id: 1, avatarUrl: '', nickname: '', bio: '', backgroundUrl: '', contacts: [] }
|
||||
},
|
||||
loadConfig() {
|
||||
this.loading = true
|
||||
getContactConfig().then(response => {
|
||||
const data = response.data || this.emptyForm()
|
||||
data.contacts = (data.contacts || []).map(item => this.withRowKey(item))
|
||||
this.form = data
|
||||
}).finally(() => { this.loading = false })
|
||||
},
|
||||
withRowKey(item) {
|
||||
this.rowSequence += 1
|
||||
return Object.assign({
|
||||
id: undefined,
|
||||
type: 'custom',
|
||||
label: '',
|
||||
value: '',
|
||||
iconUrl: '',
|
||||
qrCodeUrl: '',
|
||||
actionType: 'copy',
|
||||
status: '0',
|
||||
sort: this.rowSequence * 10
|
||||
}, item, { rowKey: `contact-${this.rowSequence}` })
|
||||
},
|
||||
addContact() {
|
||||
if (this.form.contacts.length >= 30) {
|
||||
this.$modal.msgWarning('最多可配置30条联系方式')
|
||||
return
|
||||
}
|
||||
this.form.contacts.push(this.withRowKey({ sort: (this.form.contacts.length + 1) * 10 }))
|
||||
},
|
||||
removeContact(index) {
|
||||
this.form.contacts.splice(index, 1)
|
||||
},
|
||||
applyTypePreset(row) {
|
||||
const labels = { qq: 'QQ', wechat: '微信', email: '邮箱', blog: '博客' }
|
||||
if (labels[row.type] && !row.label) row.label = labels[row.type]
|
||||
if (row.type === 'email' || row.type === 'blog') row.actionType = 'copy'
|
||||
},
|
||||
validateContacts() {
|
||||
for (let i = 0; i < this.form.contacts.length; i += 1) {
|
||||
const item = this.form.contacts[i]
|
||||
if (!item.label) return `第${i + 1}条联系方式缺少显示名称`
|
||||
if (!item.value) return `第${i + 1}条联系方式缺少联系内容`
|
||||
if (item.actionType === 'qrcode' && !item.qrCodeUrl) return `第${i + 1}条联系方式选择了二维码操作，但尚未上传二维码`
|
||||
}
|
||||
return ''
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs.form.validate(valid => {
|
||||
if (!valid) return
|
||||
const message = this.validateContacts()
|
||||
if (message) {
|
||||
this.$modal.msgWarning(message)
|
||||
return
|
||||
}
|
||||
this.saving = true
|
||||
const payload = JSON.parse(JSON.stringify(this.form))
|
||||
payload.contacts.forEach(item => { delete item.rowKey })
|
||||
updateContactConfig(payload).then(() => {
|
||||
this.$modal.msgSuccess('保存成功')
|
||||
this.loadConfig()
|
||||
}).finally(() => { this.saving = false })
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.contact-config {
|
||||
padding-bottom: 84px;
|
||||
}
|
||||
.page-alert {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.config-card {
|
||||
margin-bottom: 18px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.card-title {
|
||||
color: #303133;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.card-desc {
|
||||
margin-top: 6px;
|
||||
color: #909399;
|
||||
font-size: 13px;
|
||||
}
|
||||
.danger-button {
|
||||
color: #f56c6c;
|
||||
}
|
||||
.save-bar {
|
||||
position: sticky;
|
||||
z-index: 20;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin: 0 -20px -84px;
|
||||
padding: 14px 24px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
box-shadow: 0 -4px 14px rgba(31, 45, 61, 0.06);
|
||||
}
|
||||
::v-deep .compact-uploader .el-upload--picture-card,
|
||||
::v-deep .compact-uploader .el-upload-list--picture-card .el-upload-list__item {
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
line-height: 58px;
|
||||
margin: 0;
|
||||
}
|
||||
::v-deep .compact-uploader .el-upload-list--picture-card .el-upload-list__item-actions {
|
||||
font-size: 14px;
|
||||
}
|
||||
::v-deep .el-input-number {
|
||||
width: 62px;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.card-header { align-items: flex-start; gap: 16px; }
|
||||
}
|
||||
</style>
|
||||
95
sql/contact_page.sql
Normal file
95
sql/contact_page.sql
Normal file
@@ -0,0 +1,95 @@
|
||||
-- 小程序“关注我们”页面配置及后台菜单。
|
||||
|
||||
CREATE TABLE IF NOT EXISTS `app_contact_page` (
|
||||
`id` bigint NOT NULL COMMENT '配置主键，固定为1',
|
||||
`avatar_url` varchar(500) DEFAULT NULL COMMENT '头像地址',
|
||||
`nickname` varchar(100) NOT NULL COMMENT '昵称',
|
||||
`bio` varchar(500) DEFAULT NULL COMMENT '个人简介',
|
||||
`background_url` varchar(500) DEFAULT NULL COMMENT '背景图地址，为空使用页面渐变背景',
|
||||
`create_by` varchar(64) DEFAULT '' COMMENT '创建者',
|
||||
`create_time` datetime DEFAULT NULL COMMENT '创建时间',
|
||||
`update_by` varchar(64) DEFAULT '' COMMENT '更新者',
|
||||
`update_time` datetime DEFAULT NULL COMMENT '更新时间',
|
||||
PRIMARY KEY (`id`)
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='小程序联系页面配置';
|
||||
|
||||
CREATE TABLE IF NOT EXISTS `app_contact_item` (
|
||||
`id` bigint NOT NULL AUTO_INCREMENT COMMENT '联系方式主键',
|
||||
`type` varchar(30) NOT NULL DEFAULT 'custom' COMMENT '类型：qq/wechat/email/blog/custom',
|
||||
`label` varchar(50) NOT NULL COMMENT '显示名称',
|
||||
`contact_value` varchar(500) NOT NULL COMMENT '联系方式内容',
|
||||
`icon_url` varchar(500) DEFAULT NULL COMMENT '自定义图标地址',
|
||||
`qr_code_url` varchar(500) DEFAULT NULL COMMENT '二维码地址',
|
||||
`action_type` varchar(20) NOT NULL DEFAULT 'copy' COMMENT '操作：copy/qrcode',
|
||||
`status` char(1) NOT NULL DEFAULT '0' COMMENT '状态：0启用，1停用',
|
||||
`sort` int NOT NULL DEFAULT 0 COMMENT '显示排序',
|
||||
`create_by` varchar(64) DEFAULT '' COMMENT '创建者',
|
||||
`create_time` datetime DEFAULT NULL COMMENT '创建时间',
|
||||
`update_by` varchar(64) DEFAULT '' COMMENT '更新者',
|
||||
`update_time` datetime DEFAULT NULL COMMENT '更新时间',
|
||||
PRIMARY KEY (`id`),
|
||||
KEY `idx_app_contact_item_status_sort` (`status`, `sort`)
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='小程序联系方式';
|
||||
|
||||
INSERT INTO `app_contact_page`
|
||||
(`id`, `avatar_url`, `nickname`, `bio`, `background_url`, `create_by`, `create_time`, `update_by`, `update_time`)
|
||||
SELECT
|
||||
1,
|
||||
'https://img.yidaima.cn/%E5%A4%B4%E5%83%8F/9b889964f97e4d0c8f52f7b9ec0d04da.jpg',
|
||||
'Nan Yin', '如果爱意难平，那就把它藏在心底吧！', NULL, 'admin', NOW(), '', NULL
|
||||
WHERE NOT EXISTS (SELECT 1 FROM `app_contact_page` WHERE `id` = 1);
|
||||
|
||||
SET @contact_seed_needed := (SELECT COUNT(*) = 0 FROM `app_contact_item`);
|
||||
|
||||
INSERT INTO `app_contact_item`
|
||||
(`type`, `label`, `contact_value`, `icon_url`, `qr_code_url`, `action_type`, `status`, `sort`, `create_by`, `create_time`)
|
||||
SELECT 'qq', 'QQ', '594458910', NULL, 'https://img.yidaima.cn/feast/qq_qrcode.jpg', 'qrcode', '0', 10, 'admin', NOW()
|
||||
WHERE @contact_seed_needed = 1;
|
||||
|
||||
INSERT INTO `app_contact_item`
|
||||
(`type`, `label`, `contact_value`, `icon_url`, `qr_code_url`, `action_type`, `status`, `sort`, `create_by`, `create_time`)
|
||||
SELECT 'wechat', '微信', 'forfeastcoding', NULL, 'https://img.yidaima.cn/feast/wx_qrcode.jpg', 'qrcode', '0', 20, 'admin', NOW()
|
||||
WHERE @contact_seed_needed = 1;
|
||||
|
||||
INSERT INTO `app_contact_item`
|
||||
(`type`, `label`, `contact_value`, `icon_url`, `qr_code_url`, `action_type`, `status`, `sort`, `create_by`, `create_time`)
|
||||
SELECT 'email', '邮箱', '594458910@qq.com', NULL, NULL, 'copy', '0', 30, 'admin', NOW()
|
||||
WHERE @contact_seed_needed = 1;
|
||||
|
||||
INSERT INTO `app_contact_item`
|
||||
(`type`, `label`, `contact_value`, `icon_url`, `qr_code_url`, `action_type`, `status`, `sort`, `create_by`, `create_time`)
|
||||
SELECT 'blog', '博客', 'http://www.yidaima.cn/', NULL, NULL, 'copy', '0', 40, 'admin', NOW()
|
||||
WHERE @contact_seed_needed = 1;
|
||||
|
||||
SET @contact_parent_id := COALESCE(
|
||||
(SELECT parent_id FROM sys_menu WHERE perms = 'app:resource:list' LIMIT 1),
|
||||
(SELECT parent_id FROM sys_menu WHERE perms = 'app:article:list' LIMIT 1),
|
||||
0
|
||||
);
|
||||
|
||||
SET @contact_order_num := COALESCE(
|
||||
(SELECT MAX(order_num) + 1 FROM sys_menu WHERE parent_id = @contact_parent_id),
|
||||
1
|
||||
);
|
||||
|
||||
INSERT INTO sys_menu
|
||||
(menu_name, parent_id, order_num, path, component, query, is_frame, is_cache,
|
||||
menu_type, visible, status, perms, icon, create_by, create_time, update_by, update_time, remark)
|
||||
SELECT
|
||||
'联系页面配置', @contact_parent_id, @contact_order_num,
|
||||
'contact', 'app/contact/index', '', 1, 0,
|
||||
'C', '0', '0', 'app:contact:query', 'phone', 'admin', NOW(), '', NULL,
|
||||
'维护小程序关注页面资料和联系方式'
|
||||
WHERE NOT EXISTS (SELECT 1 FROM sys_menu WHERE perms = 'app:contact:query');
|
||||
|
||||
SET @contact_menu_id := (
|
||||
SELECT menu_id FROM sys_menu WHERE perms = 'app:contact:query' LIMIT 1
|
||||
);
|
||||
|
||||
INSERT INTO sys_menu
|
||||
(menu_name, parent_id, order_num, path, component, query, is_frame, is_cache,
|
||||
menu_type, visible, status, perms, icon, create_by, create_time, update_by, update_time, remark)
|
||||
SELECT '联系页面修改', @contact_menu_id, 1, '', '', '', 1, 0,
|
||||
'F', '0', '0', 'app:contact:edit', '#', 'admin', NOW(), '', NULL, ''
|
||||
WHERE @contact_menu_id IS NOT NULL
|
||||
AND NOT EXISTS (SELECT 1 FROM sys_menu WHERE perms = 'app:contact:edit');
|
||||
Reference in New Issue
Block a user