为FastAdmin“文明随手拍”插件增加提交姓名和手机号方法

为FastAdmin“文明随手拍”插件增加提交手机号方法

插件名称：文明随手拍
功能介绍：
一款拍照上传系统，基于FastAdmin + ThinkPHP + Uniapp开发，代码简洁，UI清爽，上报不文明，审核，积分奖励，积分商城等功能
插件市场：https://www.fastadmin.net/store/keesuishoupai.html
版本号：2.0.0

方法与步骤：一、修改数据库文件1.给“fa_keesuishoupai_report”数据表添加字段。
打开“fa_keesuishoupai_report”数据表，新增一个“username”字段，参数如下：
字段名：username
类型：VARCHAR
长度值：32
默认：null
排序规则：utf8_general_ci
属性：空
注释：用户名
移动字段：空

再新增一个“mobile”字段，参数如下：
字段名：mobile
类型：VARCHAR
长度值：11
默认：null
排序规则：utf8_general_ci
属性：空
注释：手机号
移动字段：空

二、修改微信小程序端文件
1.修改微信小程序前端页面文件。
修改插件中的uniapp目录内的 submit.vue 文件。

用 “HBuilder X”编辑器，打开 web根目录/addons/keesuishoupai/uniapp/pages/report/submit.vue 文件。
在相应位置添加姓名和手机号输入框，添加后代码如下：

<template>
<view>
<u-form :model="form" ref="uForm">
<view class="u-p-50">
<view class="u-font-40 c-font-bold">个人信息</view>
<view class="u-m-t-20">为了便于我们更好的对具体情况进行核实并答复，请填写您的真实姓名和联系方式，我们对投诉人的信息严格保密！</view>
<u-form-item label="姓名" :border-bottom="false" required label-width="140" prop="username">
<u-input placeholder="请输入姓名" v-model="form.username" />
</u-form-item>
<u-line></u-line>
<u-form-item label="手机号" :border-bottom="false" required label-width="140" prop="mobile">
<u-input placeholder="请输入手机号" v-model="form.mobile" />
</u-form-item>
<u-line></u-line>
<u-gap height="50" bgColor="transparent"></u-gap>
<view class="u-font-40 c-font-bold">事件上报</view>
<view class="u-m-t-20">为推动问题的合适解决，请您的上报的信息保持真实、客观、明确!</view>
<u-form-item label="事件描述" required label-position="top" prop="content">
<u-input v-model="form.content" type="textarea" />
</u-form-item>
<u-form-item label="事件标签" required label-position="top" prop="labels">
<u-radio-group shape="square" v-model="form.labels">
<u-radio v-for="(item, index) in vuex_config.labels" :key="index" :name="item">
{{item}}
</u-radio>
</u-radio-group>
</u-form-item>
<u-form-item label="发生地点" required label-position="top" prop="address">
<u-cell-item class="u-p-0" :border-bottom="false" icon="map-fill"
:title="form.address ? form.address :'点击选择地点'" @click="chooseDizhi" value=""></u-cell-item>
</u-form-item>
<u-form-item label="添加图片" required label-position="top" prop="images">
<u-upload ref="uUpload" :action="vuex_config.upload.uploadurl" :file-list="imageList"
:header="header" :form-data="formdata" @on-uploaded="successUpload" @on-error="errorUpload"
@on-remove="removeUpload" :max-count="9"></u-upload>
</u-form-item>
<u-cell-item class="u-p-l-0 u-p-r-0" hover-class="none" icon="eye" :arrow="false" title="是否公开">
<u-switch slot="right-icon" size="40" v-model="form.isopen"></u-switch>
</u-cell-item>
<view class="u-p-t-50 u-p-b-50">
<u-button type="success" shape="circle" :ripple="true" @click="submit">提交</u-button>
</view>
</view>
</u-form>
</view>
</template>

复制代码

然后修改对应的js代码，适当位置插入姓名和手机和位数判断，添加后代码如下：

<script>
export default {
data() {
return {
form: {
username: '',
mobile: '',
content: '',
labels: '',
address: '',
lat: 0,
lng: 0,
images: null,
isopen: false
},
imageList: [],
header: {},
formdata: {},
rules: {
username: [{
required: true,
min: 2,
message: '姓名不应低于2个字',
trigger: 'blur,change'
}],
mobile: [{
required: true,
message: '请输入手机号',
trigger: ['change', 'blur'],
},
{
// 自定义验证函数，见上说明
validator: (rule, value, callback) => {
// 上面有说，返回true表示校验通过，返回false表示不通过
// uni.$u.test.mobile()就是返回true或者false的
return uni.$u.test.mobile(value);
},
message: '手机号码不正确',
// 触发器可以同时用blur和change
trigger: ['change', 'blur'],
}
],
content: [{
required: true,
min: 10,
message: '事件描述不少于10个字',
trigger: 'blur,change'
}],
labels: [{
required: true,
message: '请选择事件标签',
trigger: 'blur,change'
}],
address: [{
required: true,
message: '请选择地理位置',
trigger: 'blur,change'
}],
images: [{
required: true,
message: '请上传图片',
trigger: 'blur,change'
}]
},
};
},
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
onReady() {
this.$refs.uForm.setRules(this.rules);
this.header = {
token: this.vuex_token || '',
uid: this.vuex_user.id || 0
}
let isObj = this.$u.test.object(this.vuex_config.upload.multipart)
if (isObj) {
this.formdata = this.vuex_config.upload.multipart;
}
},
methods: {
submit() {
this.$refs.uForm.validate(valid => {
if (valid) {
this.$refs.uUpload.upload();
this.$u.api.submitReport(this.form).then(res => {
this.$u.toast(res.msg);
if (res.code) {
setTimeout(() => {
this.$u.route({
type: 'redirectTo',
url: '/pages/user/report/list'
})
}, 1500);
}
});
}
});
},
chooseDizhi() {
let that = this;
uni.chooseLocation({
success: function(res) {
that.form['address'] = res.address;
that.form['lat'] = res.latitude;
that.form['lng'] = res.longitude;
},
fail: function(res) {
uni.getSetting({
success(setting) {
if (setting.authSetting != undefined && !setting.authSetting[
'scope.userLocation']) {
uni.showModal({
content: "检测到您没打开获取位置权限，是否去设置打开？",
confirmText: "确认",
cancelText: "取消",
success: (modal) => {
if (modal.confirm) {
uni.openSetting()
}
}
})
}
}
})
}
})
},
successUpload(e) {
this.uploadChanges(e)
},
removeUpload(index, lists, name) {
this.uploadChanges(lists)
},
errorUpload(e) {
this.$u.toast('上传失败了！');
},
uploadChanges(e) {
let urls = [];
e.map(item => {
//编辑时，已存在的，response不存在
if (!item.response) {
urls.push(item.url)
} else if (item.response.code) {
urls.push(item.response.data.url);
}
});
let value = urls.join(',');
this.form.images = value;
},
}
};
</script>

复制代码

修改好后，最后发布微信小程序，生成新成小程序代码。

三、修改服务器端文件
共需要修改如下4个文件：
/public/assets/js/backend/keesuishoupai/report.js  后端“事件上报”栏目表格顶端增加“手机号”列
/application/admin/controller/keesuishoupai/Report.php  后端“事件上报”栏目表格中“手机号”列能显示手机号
/application/admin/view/keesuishoupai/report/show.html  后端“事件上报”栏目“查看”操作能显示“手机号”
/application/admin/lang/zh-cn/keesuishoupai/report.php  后端“事件上报”栏目表格顶端的“mobile”英文列名显示为中文“手机号”

1.修改web后端report.js文件。
用 “HBuilder X”编辑器，打开 web根目录/public/assets/js/backend/keesuishoupai/report.js文件。

在相应位置添加如下代码：

{field: 'username', title: __('Username'), operate: 'LIKE'},
{field: 'mobile', title: __('Mobile'), operate: 'LIKE'},

复制代码

在表格中增加“username”和“mobile”两显示列。

2.修改web后端Report.php文件。
用 “HBuilder X”编辑器，打开 web根目录/application/admin/controller/keesuishoupai/Report.php文件。查找如下代码：

$row->visible(['id','user_id','level','content','images','isopen','address','status','solvetime']);

复制代码

此段代码修改为：

$row->visible(['id','user_id','level','username','mobile','content','images','isopen','address','status','solvetime']);

复制代码

3.修改web后端show.html 文件。
用 “HBuilder X”编辑器，打开 web根目录/application/admin/view/keesuishoupai/report/show.html 文件。
在相应位置添加如下代码：

<tr>
<td>姓名</td>
<td> {$row.username|htmlentities}</td>
</tr>
<tr>
<td>手机号</td>
<td> {$row.mobile|htmlentities}</td>
</tr>

复制代码

4.修改web后端report.php文件。
用 “HBuilder X”编辑器，打开 web根目录/application/admin/lang/zh-cn/keesuishoupai/report.php文件。
在相应位置添加如下代码：

'Username' => '姓名',
'Mobile' => '手机号',

复制代码