File: /var/www/dk/wp-content/themes/food/food-admin/page-food-fb-img.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x5-fullscreen" content="true">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="telephone=no" name="format-detection" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<meta name="full-screen" content="yes">
<title>FOOD ADMIN</title>
<meta name="description" content="">
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/food-app/css/antd.min.css">
<script src="<?php bloginfo('template_directory'); ?>/food-app/js/qs.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/food-app/js/vue.min.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/food-app/js/httpVueLoader.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/food-app/js/moment.min.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/food-app/js/antd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<style>
body {
background-color: #fff;
padding-top: 20px;
padding-right: 20px;
}
.new-pmaster-modal .item {
display: flex;
align-items: center;
justify-content: space-between;
}
.new-pmaster-modal .item .required {
font-weight: 600;
}
.new-pmaster-modal .item .label {
min-width: 160px;
}
.ant-message {
top: 50px;
}
</style>
<app id="app">
<div style="display: flex;align-items: center;">
<a-button style="margin-left: auto;" @click="addModel()" type="primary">新增</a-button>
</div>
<a-table style="margin-top: 20px;" :columns="columns" :pagination="pagination" :data-source="a_fb_img" :loading="loading">
<template slot="fb_url" slot-scope="row">
<img style="width: 200px;height: auto;" :src="row.fb_url">
</template>
<span slot="action" slot-scope="record">
<a @click="updateModel(record)">修改</a>
</span>
</a-table>
<a-modal :width="800" v-model="visible" title="修改" :footer="null">
<div class="new-pmaster-modal">
<a-row>
<a-col>
<p class="item">
<span class="label required">FB图片 *</span>
<a-input :maxLength="400" v-model="info.fb_url"></a-input>
</p>
<p class="item">
<span class="label">描述內容</span>
<a-input :maxLength="400" v-model="info.fb_text"></a-input>
</p>
</a-col>
</a-row>
<p style="text-align:right">
<a-button @click="handleOk" type="primary" :loading="loading"
>提交</a-button
>
</p>
</div>
</a-modal>
</div>
<script>
const columns = [
{
title: 'ID',
dataIndex: 'id',
key: 'id',
},
{
title: 'FB图片',
key: 'fb_url',
scopedSlots: { customRender: 'fb_url' },
},
{
title: '描述内容',
key: 'fb_text',
dataIndex: 'fb_text'
},
{
title: '更新时间',
key: 'utime',
dataIndex: 'utime'
},
{
title: '',
key: 'action',
scopedSlots: { customRender: 'action' }
}
];
new Vue({
el: "#app",
created() {
this.get_banner()
},
data: {
columns,
loading: false,
a_fb_img: [],
visible: false,
pagination: {
defaultPageSize: 5
},
info: {
id: 0,
fb_url: "",
fb_text: ""
}
},
methods: {
updateModel(info) {
this.info = {
id: info.id,
fb_url: info.fb_url,
fb_text: info.fb_text
}
this.visible = true
},
addModel() {
this.info = {
id: 0,
fb_url: "",
fb_text: ""
}
this.visible = true
},
async handleOk() {
let res = await axios({
method: 'post',
url: '/api/',
data: Qs.stringify({
module: 'fb',
action: 'u_fb_img',
...this.info
})
});
if(res.status == 200) {
let data = res.data;
if(data.rc == 0) {
antd.message.success('success');
this.get_banner()
this.visible = false
}
}
},
async get_banner() {
let res = await axios({
method: 'post',
url: '/api/',
data: Qs.stringify({
module: 'fb',
action: 'get_fb_img'
})
});
if(res.status == 200) {
let data = res.data;
if(data.rc == 0) {
this.a_fb_img = data.res
}
}
}
}
})
</script>
</body>
</html>