活字格数服务端API实现
1.数据库表创建
2.列表数据
2.1.创建命令
2.2.传入参数设置
2.3.返回值设置
2.4.标题查询
2.5.分页查询配置
2.6.返回值配置
DIYGW可视化实现移动端功能
首页先把页面要显示模板设计出来，可以参照现有的模板快速实现
1.API修改
改成调用活字格刚才创建列表API实现
2.显示数据绑定
<template>
<view class="container container337782">
<u-form-item :borderBottom="false" v-if="globalData.isshow" class="diygw-col-24 title-clz" labelPosition="top" prop="title">
<u-input @blur="listApi({ title_like: title, refresh: '1' })" placeholder="请输入产品标题" v-model="title"></u-input>
<text @tap="navigateTo" data-type="listApi" :data-title_like="title" class="diy-icon-search" style="color: #363636; font-size: 32rpx"></text>
</u-form-item>
<view v-if="list.total > 0" class="flex flex-wrap diygw-col-24 flex-direction-column">
<view v-for="(item, index) in list.rows" :key="index" class="flex flex-wrap diygw-col-24 flex-direction-column flex4-clz">
<view class="flex flex-wrap diygw-col-0">
<view class="flex flex-wrap diygw-col-0 flex-direction-column">
<image :src="item.img" class="image1-size diygw-image diygw-col-24 image1-clz" mode="widthFix"></image>
</view>
<view class="flex flex-wrap diygw-col-0 flex-direction-column">
<text class="diygw-text-line2 diygw-col-24 text4-clz">
{{ item.title }}
</text>
<text v-if="item.remark" class="diygw-text-line3 diygw-col-24 text5-clz">
{{ item.remark }}
</text>
</view>
</view>
<view class="flex flex-wrap diygw-col-24 justify-end items-center flex2-clz">
<text @tap="navigateTo" data-type="editFunction" :data-index="index" class="diygw-col-0 text6-clz"> 修改 </text>
<text @tap="navigateTo" data-type="delApi" :data-id="item.id" :data-index="index" class="diygw-col-0 text13-clz"> 删除 </text>
</view>
</view>
</view>
<view v-if="globalData.isshow" class="flex flex-wrap diygw-col-24 justify-start diygw-bottom flex3-clz">
<view class="flex flex-wrap diygw-col-24 justify-center items-center green flex20-clz" @tap="navigateTo" data-type="openmodal" data-id="modal">
<text class="flex icon2 diygw-col-0 diy-icon-add"></text>
<text class="diygw-col-0"> 新增分类 </text>
</view>
</view>
<view v-if="globalData.isshow && list.code == 200 && list.total == 0" class="flex flex-wrap diygw-col-24 flex-direction-column items-center flex-clz">
<image src="/static/zwjl.png" class="image-size diygw-image diygw-col-0" mode="widthFix"></image>
<text class="diygw-col-0 text-clz"> 未找到任何数据 </text>
</view>
<view @touchmove.stop.prevent="" v-if="modal" class="diygw-modal basic" :class="modal" style="z-index: 1000000">
<view class="diygw-dialog diygw-dialog-modal basis-lg">
<view class="justify-end diygw-bar">
<view class="content">
{{ form.id ? '编辑分类' : '新增分类' }}
</view>
<view class="action" data-type="closemodal" data-id="modal" @tap="navigateTo">
<text class="diy-icon-close"></text>
</view>
</view>
<view>
<view class="flex diygw-dialog-content">
<u-form :model="form" :rules="formRules" :errorType="['message', 'toast']" ref="formRef" class="flex diygw-form diygw-col-24">
<u-form-item class="diygw-col-24" :required="true" label="分类标题" prop="title">
<u-input placeholder="请输入标题" v-model="form.title"></u-input>
</u-form-item>
<u-form-item :required="true" class="diygw-col-24" label="分类图片" prop="img">
<u-upload :base64="true" width="160" height="160" margin="0" maxCount="1" @on-success="uploadFormImg" @on-remove="delFormImg" action="" v-model="form.img"> </u-upload>
</u-form-item>
<u-form-item class="diygw-col-24" label="多图片" prop="imgs">
<u-upload :base64="true" width="160" height="160" maxCount="6" @on-success="uploadFormImgs" @on-remove="delFormImgs" action="" v-model="form.imgs"> </u-upload>
</u-form-item>
<u-form-item class="diygw-col-24" label="备注" prop="remark">
<u-input
maxlength="200"
height="60px"
class="
"
placeholder="请输入备注"
v-model="form.remark"
type="textarea"
></u-input>
</u-form-item>
<view class="flex diygw-col-24">
<button @tap="navigateTo" data-type="closemodal" data-id="modal" class="diygw-btn red radius flex-sub margin-xs button-button-clz">取消</button>
<button @click="submitForm" class="diygw-btn green radius flex-sub margin-xs button-button-clz">保存</button>
</view>
</u-form>
</view>
</view>
</view>
</view>
<view class="clearfix"></view>
</view>
</template>
<script>
export default {
data() {
return {
//用户全局信息
userInfo: {},
//页面传参
globalOption: {},
//自定义全局变量
globalData: { isshow: false },
listNum: 1,
list: {
ErrCode: 0,
Message: '',
rows: [
{
id: 0,
title: '',
remark: '',
img: null,
imgs: null
}
],
total: 0
},
del: {
code: 200,
msg: '删除成功'
},
title: '',
modal: '',
formRules: {
title: [
{
trigger: ['change', 'blur'],
required: true,
message: '标题不能为空'
}
],
img: [
{
trigger: ['change', 'blur'],
required: true,
message: '请上传图片哟'
}
]
},
form: {
title: '',
img: '',
imgs: [],
remark: ''
}
};
},
onShow() {
this.setCurrentPage(this);
},
onLoad(option) {
if (option) {
this.setData({
globalOption: this.getOption(option)
});
}
this.setCurrentPage(this);
this.init();
},
onReady() {
this.$refs.formRef?.setRules(this.formRules);
},
methods: {
async init() {
await this.listApi();
await this.initResetform();
},
// 列表数据 API请求方法
async listApi(param) {
let thiz = this;
param = param || {};
//如果请求要重置页面，请配置点击附加参数refresh=1 增加判断如输入框回调param不是对象
if (param.refresh || typeof param != 'object') {
this.listNum = 1;
}
//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
let http_url = '/ServerCommand/list';
let http_data = {
pageNum: this.listNum,
pageSize: 10,
title_like: param.title_like || this.title
};
let http_header = {};
let list = await this.$http.post(http_url, http_data, http_header, 'json');
list.rows.forEach((item) => {
item.imgs = !item.imgs ? [] : item.imgs.split(',');
});
let datarows = list.rows;
if (http_data.pageNum == 1) {
this.list = list;
} else if (datarows) {
let rows = this.list.rows.concat(datarows);
list.rows = rows;
this.list = Object.assign(this.list, list);
}
if (datarows && datarows.length > 0) {
this.listNum = this.listNum + 1;
}
this.globalData.isshow = true;
},
// 删除数据 API请求方法
async delApi(param) {
let thiz = this;
param = param || {};
//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
let http_url = '/ServerCommand/del';
let http_data = {
id: param.id || this.item.id,
index: param.index || this.index
};
let http_header = {};
let flag = await this.showModal('是否确定删除该数据');
if (!flag) {
this.showToast('你已取消删');
return;
}
let del = await this.$http.post(http_url, http_data, http_header, 'json');
this.del = del;
if (del.code == 200) {
this.list.rows.splice(param.index, 1);
this.list.total = this.list.rows.length;
this.showToast('删除数据成功');
} else {
this.showToast('删除数据失败', 'error');
}
},
// 修改数据 自定义方法
async editFunction(param) {
let thiz = this;
let index = param && (param.index || param.index == 0) ? param.index : thiz.index || '';
this.form = JSON.parse(JSON.stringify(this.list.rows[param.index]));
this.navigateTo({
type: 'openmodal',
id: 'modal'
});
},
changeFormImg(index, lists) {},
delFormImg(index, lists) {
this.changeFormImg(index, lists);
},
uploadFormImg(res, index, lists) {
this.changeFormImg(index, lists);
},
changeFormImgs(index, lists) {},
delFormImgs(index, lists) {
this.changeFormImgs(index, lists);
},
uploadFormImgs(res, index, lists) {
this.changeFormImgs(index, lists);
},
initResetform() {
this.initform = JSON.stringify(this.form);
//如果想给表单默认初始值，其中row为某一行数据也可能是API返回的结果集，然后给到this.form
//this.form = this.$tools.changeRowToForm(row,this.form)
},
resetForm() {
this.form = JSON.parse(this.initform);
},
async submitForm(e) {
this.$refs.formRef?.setRules(this.formRules);
this.$nextTick(async () => {
let valid = await this.$refs.formRef.validate();
if (valid) {
//保存数据
let param = this.form;
let header = {
'Content-Type': 'application/json'
};
let url = '/ServerCommand/add';
if (this.form.id) {
url = '/ServerCommand/update';
}
uni.showLoading({
title: '正在保存...'
});
param = JSON.parse(JSON.stringify(param));
param.imgs = param.imgs.map((item) => {
return {
img: item
};
});
let res = await this.$http.post(url, param, header, 'json');
uni.hideLoading();
if (res.code == 200) {
//更新列表数据
this.listNum = 1;
this.listApi();
if (this.form.id) {
this.showToast('更新成功');
//关闭窗口
this.navigateTo({
type: 'closemodal',
id: 'modal'
});
} else {
//提示是否继续新增
let flag = await this.showModal('是否继续新增');
if (flag) {
//重置表单
this.resetForm();
} else {
//关闭窗口
this.navigateTo({
type: 'closemodal',
id: 'modal'
});
}
}
} else {
this.showModal(res.msg, '提示', false);
}
} else {
console.log('验证失败');
}
});
}
},
onPullDownRefresh() {
// 列表数据 API请求方法
this.listNum = 1;
this.listApi();
uni.stopPullDownRefresh();
},
onReachBottom() {
// 列表数据 API请求方法
this.listApi();
}
};
</script>
<style lang="scss" scoped>
.title-clz {
background-color: #ffffff;
margin-left: 16rpx;
border-bottom-left-radius: 12rpx;
overflow: hidden;
width: calc(100% - 16rpx - 16rpx) !important;
border-top-left-radius: 12rpx;
margin-top: 16rpx;
border-top-right-radius: 12rpx;
border-bottom-right-radius: 12rpx;
margin-bottom: 16rpx;
margin-right: 16rpx;
}
.flex4-clz {
padding-top: 10rpx;
border-bottom-left-radius: 12rpx;
padding-left: 10rpx;
padding-bottom: 10rpx;
border-top-right-radius: 12rpx;
margin-right: 20rpx;
background-color: #ffffff;
margin-left: 20rpx;
overflow: hidden;
width: calc(100% - 20rpx - 20rpx) !important;
border-top-left-radius: 12rpx;
margin-top: 10rpx;
border-bottom-right-radius: 12rpx;
margin-bottom: 10rpx;
padding-right: 10rpx;
}
.image1-clz {
border-bottom-left-radius: 12rpx;
overflow: hidden;
border-top-left-radius: 12rpx;
border-top-right-radius: 12rpx;
border-bottom-right-radius: 12rpx;
}
.image1-size {
height: 100rpx !important;
width: 100rpx !important;
}
.text4-clz {
padding-top: 10rpx;
padding-left: 10rpx;
font-size: 28rpx !important;
padding-bottom: 10rpx;
padding-right: 10rpx;
}
.text5-clz {
padding-top: 10rpx;
color: #7c7c7c;
padding-left: 10rpx;
padding-bottom: 10rpx;
padding-right: 10rpx;
}
.flex2-clz {
border-top: 2rpx solid #eee;
padding-top: 10rpx;
color: #6b6b6b;
padding-left: 10rpx;
padding-bottom: 10rpx;
padding-right: 10rpx;
}
.text6-clz {
border: 2rpx solid #038af2;
padding-top: 10rpx;
border-bottom-left-radius: 10rpx;
color: #038af2;
padding-left: 20rpx;
padding-bottom: 10rpx;
border-top-right-radius: 10rpx;
margin-right: 10rpx;
background-color: #f0f1ff;
margin-left: 10rpx;
overflow: hidden;
border-top-left-radius: 10rpx;
margin-top: 10rpx;
border-bottom-right-radius: 10rpx;
margin-bottom: 10rpx;
padding-right: 20rpx;
}
.text13-clz {
border: 2rpx solid #ffb08f;
padding-top: 10rpx;
border-bottom-left-radius: 10rpx;
color: #ff592c;
padding-left: 20rpx;
padding-bottom: 10rpx;
border-top-right-radius: 10rpx;
margin-right: 10rpx;
background-color: #fff4f0;
margin-left: 10rpx;
overflow: hidden;
border-top-left-radius: 10rpx;
margin-top: 10rpx;
border-bottom-right-radius: 10rpx;
margin-bottom: 10rpx;
padding-right: 20rpx;
}
.flex3-clz {
padding-top: 16rpx;
border-bottom-left-radius: 0rpx;
color: #747474;
bottom: 0rpx;
padding-left: 16rpx;
padding-bottom: 16rpx;
border-top-right-radius: 20rpx;
background-color: #ffffff;
overflow: hidden;
left: 0rpx;
border-top-left-radius: 20rpx;
border-bottom-right-radius: 0rpx;
padding-right: 16rpx;
}
.flex20-clz {
padding-top: 16rpx;
border-bottom-left-radius: 200rpx;
overflow: hidden;
font-weight: bold;
padding-left: 10rpx;
font-size: 28rpx !important;
padding-bottom: 16rpx;
border-top-left-radius: 200rpx;
border-top-right-radius: 200rpx;
border-bottom-right-radius: 200rpx;
padding-right: 10rpx;
}
.icon2 {
font-size: 40rpx;
}
.flex-clz {
padding-top: 20rpx;
padding-left: 20rpx;
padding-bottom: 20rpx;
padding-right: 20rpx;
}
.image-size {
height: 400rpx !important;
width: 400rpx !important;
}
.text-clz {
color: #969696;
font-size: 28rpx !important;
}
.modal-clz {
z-index: 1000000;
}
.diygw-dialog-modal {
}
.button-button-clz {
margin: 6rpx !important;
}
.container337782 {
padding-bottom: 160rpx;
background-color: #f5f5f5;
}
</style>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
