File: /var/www/dk/wp-content/themes/food/food-admin/page-food-banner.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>Banner</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;
}
.update-nag, #wpfooter {
display: none;
}
</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_banner"
:loading="loading">
<template slot="banner_url" slot-scope="row">
<img style="width: 200px;height: auto;" :src="row.banner_url">
</template>
<span slot="status" slot-scope="text, record">
{{ record.status == '1' ? '啟用' : '停用' }}
</span>
<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">banner 搜索</span>
<a-select
show-search
:value="select_value"
placeholder="Select users"
style="width: 50%"
:default-active-first-option="false"
:show-arrow="false"
:filter-option="false"
:not-found-content="null"
@search="fetchUserFunc"
@change="handleChange"
>
<a-select-option v-for="d in select_data" :key="d.value">
{{ d.text }}
</a-select-option>
</a-select>
</p>
<p class="item">
<span class="label required">banner图片 *</span>
<a-input :maxLength="400" v-model="info.banner_url" disabled></a-input>
</p>
<p class="item">
<span class="label required">banner類型 *</span>
<a-select v-model="info.banner_type" style="width: 200px;">
<!-- <a-select-option value="0">-->
<!-- Mall Mall Channel 主頁-->
<!-- </a-select-option>-->
<!-- <a-select-option value="1">-->
<!-- Mall Mall Channel 專區-->
<!-- </a-select-option>-->
<!---->
<!-- <a-select-option value="2">-->
<!-- Biz Road Show 主頁-->
<!-- </a-select-option>-->
<!-- <a-select-option value="3">-->
<!-- Biz Road Show 專區-->
<!-- </a-select-option>-->
<a-select-option value="4">
Medical Media 主頁
</a-select-option>
<a-select-option value="5">
Medical Media 專區
</a-select-option>
</a-select>
</p>
<p class="item">
<span class="label">banner链接</span>
<a-input :maxLength="400" v-model="info.banner_link"></a-input>
</p>
<p class="item">
<span class="label">是否啟用</span>
<a-switch checked-children="啟用" un-checked-children="停用" :checked="info.status=='1'"
@change="statusChange"/>
</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: 'banner图片',
key: 'banner_url',
scopedSlots: {customRender: 'banner_url'},
},
{
title: 'banner链接',
dataIndex: 'banner_link',
key: 'banner_link',
},
{
title: 'banner類型',
dataIndex: 'banner_type_name',
key: 'banner_type',
filters: [
{
text: '主頁',
value: '0',
},
{
text: '食品頁',
value: '1',
}, {
text: 'Biz Road Show 主頁',
value: '2',
},
{
text: 'Biz Road Show 專區',
value: '3',
}, {
text: 'Medical Media 主頁',
value: '4',
},
{
text: 'Medical Media 專區',
value: '5',
}
],
onFilter: (value, record) => record.banner_type == value,
sortDirections: ['descend'],
},
{
title: '是否啟用',
key: 'status',
filters: [
{
text: '停用',
value: 0,
},
{
text: '啟用',
value: 1,
}
],
onFilter: (value, record) => record.status == value,
sortDirections: ['descend'],
scopedSlots: {customRender: 'status'}
}, {
title: '更新时间',
key: 'utime',
dataIndex: 'utime'
},
{
title: '',
key: 'action',
scopedSlots: {customRender: 'action'}
}
];
new Vue({
el: "#app",
created() {
this.get_banner()
},
data: {
columns,
loading: false,
a_banner: [],
visible: false,
pagination: {
defaultPageSize: 5
},
info: {
id: 0,
banner_url: "",
banner_link: "",
banner_type: "0",
status: "1"
},
lastFetchId: 0,
select_value: '',
select_data: [],
fetching: false,
status_checked: false,
},
methods: {
updateModel(info) {
this.info = {
id: info.id,
banner_url: info.banner_url,
banner_link: info.banner_link,
banner_type: info.banner_type,
status: info.status
}
this.visible = true
},
addModel() {
this.info = {
id: 0,
banner_url: "",
banner_link: "",
banner_type: "0",
status: '1'
}
this.visible = true
},
async handleOk() {
let res = await axios({
method: 'post',
url: '/api/',
data: Qs.stringify({
module: 'banner',
action: 'u_banner',
...this.info
})
});
if (res.status == 200) {
let data = res.data;
if (data.rc == 0) {
this.select_value = '';
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: 'banner',
action: 'get_banner',
backend_server: '1'
})
});
if (res.status == 200) {
let data = res.data;
if (data.rc == 0) {
this.a_banner = data.res
}
}
},
fetchUserFunc(value) {
console.log('banner search str : ', value);
// console.log('fetching user', this.select_value);
if ('' == value) {
return
}
this.lastFetchId += 1;
const fetchId = this.lastFetchId;
this.select_data = [];
this.fetching = true;
let _this = this
// antd.message.loading({content: 'Loading...', key: this.lastFetchId});
// fetch('https://randomuser.me/api/?results=5&post_title=' + value)
fetch('http://dk.smart1space.site/api/?module=banner&action=r_attachment&post_title=' + value)
.then(response => response.json())
.then(body => {
antd.message.success({content: 'Loaded!', key: this.lastFetchId, duration: 2});
if (fetchId !== this.lastFetchId) {
// for fetch callback order
return;
}
// const data = body.results.map(user => ({
// text: `${user.name.first} ${user.name.last}`,
// value: user.login.username,
// }));
// console.log('fetching res', body.res);
const data = body.res.map(item => ({
text: item.post_title,
value: item.guid,
}));
// console.log('fetching back data', data);
// console.log('fetching data[0] text', data[0].text);
console.log('fetching data[0] value', data[0].value);
_this.$set(_this, 'select_data', data);
_this.fetching = false;
});
},
handleChange(select_value) {
this.info.banner_url = select_value
let value_key = this.select_data.find(item => item.value == select_value)
Object.assign(this, {
select_value: value_key,
select_data: [],
fetching: false,
});
},
statusChange(v) {
this.info.status = this.info.status == '1' ? '0' : '1';
},
}
})
</script>
</body>
</html>