File: /var/www/dk/wp-content/themes/food/demo_html/a_select.html
<!DOCTYPE html>
<html lang="zh">
<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="">
<script src="https://cdn.tailwindcss.com"></script>
<!-- <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>-->
<link rel="stylesheet" href="http://dk.smart1space.site/wp-content/themes/food/food-app/css/antd.min.css">
<script src="http://dk.smart1space.site/wp-content/themes/food/food-app/js/qs.js"></script>
<script src="http://dk.smart1space.site/wp-content/themes/food/food-app/js/vue.min.js"></script>
<script src="http://dk.smart1space.site/wp-content/themes/food/food-app/js/httpVueLoader.js"></script>
<script src="http://dk.smart1space.site/wp-content/themes/food/food-app/js/moment.min.js"></script>
<script src="http://dk.smart1space.site/wp-content/themes/food/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_banner"
:loading="loading">
<template slot="banner_url" slot-scope="row">
<img style="width: 200px;height: auto;" :src="row.banner_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">banner图片 选择</span>
<!-- info.banner_url-->
<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>
</a-col>
</a-row>
<p style="text-align:right">
<a-button @click="handleOk" type="primary" :loading="loading"
>提交
</a-button
>
</p>
</div>
</a-modal>
<main class=" w-100 py-[0.2rem] md:w-[768px] md:mx-auto xl:w-[1280px]">
<section class="text-gray-600 body-font relative">
<div class="container px-5 py-24 mx-auto flex sm:flex-nowrap flex-wrap">
<div class="lg:w-2/3 md:w-1/2 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative">
<div class="rounded-sm overflow-hidden absolute inset-0">
<video controls>
<source src="http://mac.jmwebseo.cn/video/%E7%99%BE%E4%B8%87%E7%BA%A7%E9%AB%98%E5%B9%B6%E5%8F%91WebRTC%E6%B5%81%E5%AA%92%E4%BD%93%E6%9C%8D%E5%8A%A1%E5%99%A8%E8%AE%BE%E8%AE%A1%E4%B8%8E%E5%BC%80%E5%8F%91/%E7%AC%AC1%E7%AB%A0%20%E8%AF%BE%E7%A8%8B%E5%AF%BC%E5%AD%A6%E4%B8%8E%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9C/1-2%20%E5%AF%BC%E5%AD%A6.mp4"
type="video/mp4">
您的浏览器不支持Video标签。
</video>
</div>
<div class="bg-white relative flex flex-wrap py-6 pt-4 rounded shadow-md">
<div class="lg:w-1/4 px-6">
<div class="border border-gray-200 p-6 rounded-lg">
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">
<svg fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
</svg>
</div>
<h2 class="text-lg text-gray-900 font-medium title-font mb-2">Shooting Stars</h2>
<p class="leading-relaxed text-base">Fingerstache flexitarian street art </p>
</div>
</div>
<div class="lg:w-1/4 px-6">
<div class="border border-gray-200 p-6 rounded-lg">
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">
<svg fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
</svg>
</div>
<h2 class="text-lg text-gray-900 font-medium title-font mb-2">Shooting Stars</h2>
<p class="leading-relaxed text-base">Fingerstache flexitarian street art </p>
</div>
</div>
<div class="lg:w-1/2 px-6 mt-4 lg:mt-0">
<h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs">EMAIL</h2>
<a class="text-indigo-500 leading-relaxed">example@email.com</a>
<h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs mt-4">PHONE</h2>
<p class="leading-relaxed">123-456-7890</p>
</div>
</div>
</div>
<div class="lg:w-1/3 md:w-1/2 bg-white flex flex-col md:ml-auto w-full md:py-8 mt-8 md:mt-0">
<h2 class="text-gray-900 text-lg mb-1 font-medium title-font">Feedback</h2>
<p class="leading-relaxed mb-5 text-gray-600">Post-ironic portland shabby chic echo park, banjo
fashion
axe</p>
<div class="flex flex-wrap -m-4">
<div class=" md:w-1/2 p-4">
<div class="border border-gray-200 p-6 rounded-lg">
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">
<svg fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
</svg>
</div>
<h2 class="text-lg text-gray-900 font-medium title-font mb-2">Shooting Stars</h2>
<p class="leading-relaxed text-base">Fingerstache flexitarian street art 8-bit waist co,
subway tile poke farm.</p>
</div>
</div>
<div class=" md:w-1/2 p-4">
<div class="border border-gray-200 p-6 rounded-lg">
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">
<svg fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
<circle cx="6" cy="6" r="3"></circle>
<circle cx="6" cy="18" r="3"></circle>
<path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12"></path>
</svg>
</div>
<h2 class="text-lg text-gray-900 font-medium title-font mb-2">The Catalyzer</h2>
<p class="leading-relaxed text-base">Fingerstache flexitarian street art 8-bit waist co,
subway tile poke farm.</p>
</div>
</div>
<div class=" md:w-1/2 p-4">
<div class="border border-gray-200 p-6 rounded-lg">
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">
<svg fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</div>
<h2 class="text-lg text-gray-900 font-medium title-font mb-2">Neptune</h2>
<p class="leading-relaxed text-base">Fingerstache flexitarian street art 8-bit waist co,
subway tile poke farm.</p>
</div>
</div>
<div class=" md:w-1/2 p-4">
<div class="border border-gray-200 p-6 rounded-lg">
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">
<svg fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
<path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1zM4 22v-7"></path>
</svg>
</div>
<h2 class="text-lg text-gray-900 font-medium title-font mb-2">Melanchole</h2>
<p class="leading-relaxed text-base">Fingerstache flexitarian street art 8-bit waist co,
subway tile poke farm.</p>
</div>
</div>
</div>
<button class="text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">
Button
</button>
<p class="text-xs text-gray-500 mt-3">Chicharrones blog helvetica normcore iceland tousled brook
viral
artisan.</p>
</div>
</div>
</section>
</main>
</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: '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"
},
lastFetchId: 0,
select_value: '',
select_data: [],
fetching: false,
},
methods: {
updateModel(info) {
this.info = {
id: info.id,
banner_url: info.banner_url,
banner_link: info.banner_link,
banner_type: info.banner_type
}
this.visible = true
},
addModel() {
this.info = {
id: 0,
banner_url: "",
banner_link: "",
banner_type: "0"
}
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) {
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'
})
});
if (res.status == 200) {
let data = res.data;
if (data.rc == 0) {
this.a_banner = data.res
}
}
},
fetchUserFunc(value) {
console.log('fetching user', 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,
});
},
}
})
</script>
</body>
</html>