fe / ufo-platform-fe · Commits

Go to a project

Authored by htoooth
Commit 295494e109f702e41bd60bcc4377aaeb72d03869 1 parent 9ada63bd

add banner comp

Inline Side-by-side
Showing 22 changed files with 573 additions and 175 deletions
1 -<!DOCTYPE html>  
2 -<html lang="zh-CN">  
3 -  
4 -<head>  
5 - <title>iView project</title>  
6 - <meta charset="UTF-8">  
7 - <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">  
8 - <link rel="stylesheet" href="/dist/vendors.css">  
9 - <link rel="stylesheet" href="/dist/app-home.css">  
10 -</head>  
11 -  
12 -<body>  
13 - <div id="app"></div>  
14 - <script type="text/javascript" src="/dist/vendors.js"></script>  
15 - <script type="text/javascript" src="/dist/app-home.js"></script>  
16 -</body>  
17 -  
18 -</html>  
1 -<!DOCTYPE html>  
2 -<html lang="zh-CN">  
3 -  
4 -<head>  
5 - <title>iView project</title>  
6 - <meta charset="UTF-8">  
7 - <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">  
8 - <link rel="stylesheet" href="/dist/vendors.css">  
9 - <link rel="stylesheet" href="/dist/app-sort.css">  
10 -</head>  
11 -  
12 -<body>  
13 - <div id="app"></div>  
14 - <script type="text/javascript" src="/dist/vendors.js"></script>  
15 - <script type="text/javascript" src="/dist/app-sort.js"></script>  
16 -</body>  
17 -  
18 -</html>  
@@ -9,7 +9,7 @@ class Api { @@ -9,7 +9,7 @@ class Api {
9 if (!PRODUCTION) { 9 if (!PRODUCTION) {
10 data = Object.assign({}, data, { 10 data = Object.assign({}, data, {
11 debug: 'XYZ' 11 debug: 'XYZ'
12 - }).catch(this.catch); 12 + });
13 } 13 }
14 14
15 return util.ajax.get(url, data).then(result => result.data); 15 return util.ajax.get(url, data).then(result => result.data);
@@ -2,59 +2,21 @@ @@ -2,59 +2,21 @@
2 <div> 2 <div>
3 <table class="banner-table"> 3 <table class="banner-table">
4 <tbody> 4 <tbody>
5 - <tr v-for="(i,index) in value_" :key="i.imgId"> 5 + <tr v-for="(i,index) in value_" :key="i">
6 <th>{{+index + 1}}</th> 6 <th>{{+index + 1}}</th>
7 7
8 <th> 8 <th>
9 - <file-upload></file-upload> 9 + <file-upload
  10 + :default-file="i.src | removeImageParams"
  11 + :id="index"
  12 + @success="onUploadSuccess"
  13 + @remove="onUploadRemove"
  14 + >
  15 + </file-upload>
10 </th> 16 </th>
11 17
12 <th> 18 <th>
13 - <Form>  
14 - <FormItem>  
15 - <Select v-model="i.url.action">  
16 - <Option value="go.h5">H5网页</Option>  
17 - <Option value="go.ufo">商品列表页</Option>  
18 - <Option value="go.pool">商品池</Option>  
19 - </Select>  
20 - </FormItem>  
21 -  
22 - <template v-if="i.url.action === 'go.h5'">  
23 - <FormItem>  
24 - <Input v-model="i.url.title" placeholder="参数"/>  
25 -  
26 - </FormItem>  
27 - <FormItem>  
28 - <Input v-model="i.url.url" placeholder="参数"/>  
29 - </FormItem>  
30 - </template>  
31 -  
32 - <template v-if="i.url.action === 'go.ufo'">  
33 - <FormItem>  
34 - <Input v-model="i.url.productListTitle" placeholder="参数"/>  
35 - </FormItem>  
36 -  
37 - <FormItem>  
38 - <Input v-model="i.url.productPool" placeholder="参数"/>  
39 - </FormItem>  
40 -  
41 - <FormItem>  
42 - <Input v-model="i.url.url" placeholder="参数"/>  
43 - </FormItem>  
44 -  
45 - </template>  
46 -  
47 - <template v-if="i.url.action === 'go.pool'">  
48 - <FormItem>  
49 - <Input v-model="i.url.productId" placeholder="参数"/>  
50 - </FormItem>  
51 -  
52 - <FormItem>  
53 - <Input v-model="i.url.url" placeholder="参数"/>  
54 - </FormItem>  
55 - </template>  
56 -  
57 - </Form> 19 + <banner-params v-model="i.url"></banner-params>
58 </th> 20 </th>
59 21
60 <th> 22 <th>
@@ -73,29 +35,52 @@ @@ -73,29 +35,52 @@
73 <script> 35 <script>
74 36
75 import fileUpload from './drag-file-upload'; 37 import fileUpload from './drag-file-upload';
  38 +import bannerParams from './banner-params';
  39 +import util from '@/libs/util';
76 40
77 export default { 41 export default {
78 - props: {  
79 - value: {  
80 - type: Object,  
81 - default: {} 42 + props: ['value'],
  43 + filters: {
  44 + removeImageParams(url) {
  45 + if (!url) {
  46 + return
  47 + }
  48 +
  49 + return url.split('?')[0]
82 } 50 }
83 }, 51 },
84 data() { 52 data() {
85 return { 53 return {
86 - value_: this.handleData(this.value) 54 + value_: this.handleData(util.clone(this.value))
87 } 55 }
88 }, 56 },
89 methods: { 57 methods: {
90 onDeleteBtnClick(i, index) { 58 onDeleteBtnClick(i, index) {
91 this.value_.splice(index, 1); 59 this.value_.splice(index, 1);
92 - this.$emit('input', this.value_); 60 + this.$emit('input', this.handleSaveData(this.value_));
93 }, 61 },
94 onAddBtnClick() { 62 onAddBtnClick() {
95 this.value_.push({ 63 this.value_.push({
96 - 64 + alt: "",
  65 + bgColor: "",
  66 + imgId: "0",
  67 + isFocusRec: "0",
  68 + src: "",
  69 + url: {
  70 + action: 'go.h5',
  71 + url: ''
  72 + }
97 }); 73 });
98 - this.$emit('input', this.value_); 74 +
  75 + this.$emit('input', this.handleSaveData(this.value_));
  76 + },
  77 + onUploadSuccess(id, {url}) {
  78 + this.value_[id].src = url + '?imageView2/{mode}/w/{width}/h/{height}';
  79 + this.$emit('input', this.handleSaveData(this.value_));
  80 + },
  81 + onUploadRemove(id) {
  82 + this.value_[id].src = '';
  83 + this.$emit('input', this.handleSaveData(this.value_));
99 }, 84 },
100 handleData(m) { 85 handleData(m) {
101 let keys = Object.keys(m); 86 let keys = Object.keys(m);
@@ -119,34 +104,46 @@ export default { @@ -119,34 +104,46 @@ export default {
119 104
120 for (const i of keys) { 105 for (const i of keys) {
121 let a = m[i]; 106 let a = m[i];
122 - let url = new URL(a.url.url);  
123 - let params = new URLSearchParams(url.search);  
124 -  
125 - a.url.url = `${url.origin}${url.pathname}`  
126 107
127 - if (a.url.action === 'go.ufo' && params.get('pagename') === 'productDetail') { 108 + if (a.url.action === 'go.ufo' && util.getUrlQueryString(a.url.url, 'pagename') === 'productDetail') {
128 a.url.action = 'go.pool' 109 a.url.action = 'go.pool'
129 } 110 }
130 111
131 - for (let p of params) {  
132 - a.url[p[0]] = p[1]  
133 - }  
134 -  
135 result.push(a) 112 result.push(a)
136 } 113 }
137 114
138 - console.log(result); 115 + return result;
  116 + },
  117 + handleSaveData(m) {
  118 + let temp = util.clone(m)
  119 +
  120 + for (const i of Object.keys(temp)) {
  121 + if (temp[i].url.action === 'go.pool') {
  122 + temp[i].url.action = 'go.ufo';
  123 + }
  124 + }
  125 +
  126 + // array to object
  127 + const result = {}
  128 +
  129 + for (const i of Object.keys(temp)) {
  130 + result[i] = temp[i]
  131 + }
139 132
140 return result; 133 return result;
  134 + },
  135 + getValue(){
  136 + return this.handleSaveData(this.value_);
141 } 137 }
142 }, 138 },
143 watch: { 139 watch: {
144 value(newVal) { 140 value(newVal) {
145 - this.value_ = newVal 141 + this.value_ = this.handleData(util.clone(newVal));
146 } 142 }
147 }, 143 },
148 components: { 144 components: {
149 - fileUpload 145 + fileUpload,
  146 + bannerParams
150 } 147 }
151 } 148 }
152 </script> 149 </script>
  1 +<template>
  2 + <div>
  3 + <Input :value="title" @input="onUpdateTitle" placeholder="标题"/>
  4 + <Input :value="link" @input="onUpdateLink" placeholder="链接"/>
  5 + </div>
  6 +</template>
  7 +
  8 +<script>
  9 +
  10 +import util from '@/libs/util'
  11 +
  12 +export default {
  13 + props: ['value'],
  14 + data() {
  15 + return {
  16 + title: util.getUrlQueryString(this.value, 'title'),
  17 + link: util.getLink(this.value)
  18 + }
  19 + },
  20 + watch: {
  21 + value(newVal) {
  22 + this.title = util.getUrlQueryString(newVal, 'title');
  23 + this.link = util.getLink(newVal);
  24 + }
  25 + },
  26 + methods: {
  27 + onUpdateTitle(val) {
  28 + this.title = val;
  29 + this.$emit('input', this.getUrl());
  30 + },
  31 +
  32 + onUpdateLink(val) {
  33 + this.link = val;
  34 + this.$emit('input', this.getUrl());
  35 + },
  36 + getUrl() {
  37 + return `${this.link}?title=${this.title}`
  38 + }
  39 + }
  40 +}
  41 +</script>
  42 +
  43 +<style>
  44 +
  45 +</style>
  1 +<template>
  2 + <div>
  3 + <Form>
  4 + <FormItem>
  5 + <Select v-model="action_">
  6 + <Option value="go.h5">H5网页</Option>
  7 + <Option value="go.ufo">商品列表页</Option>
  8 + <Option value="go.pool">商品池</Option>
  9 + </Select>
  10 + </FormItem>
  11 +
  12 + <FormItem>
  13 + <h5-url v-if="action_ === 'go.h5'" v-model="url_"></h5-url>
  14 + <ufo-url v-else-if="action_ === 'go.ufo'" v-model="url_"></ufo-url>
  15 + <pool-url v-else-if="action_ === 'go.pool'" v-model="url_"></pool-url>
  16 + </FormItem>
  17 + </Form>
  18 + </div>
  19 +</template>
  20 +
  21 +<script>
  22 +
  23 +import h5 from './banner-h5'
  24 +import ufo from './banner-ufo'
  25 +import pool from './banner-pool'
  26 +
  27 +export default {
  28 + props: ['value'],
  29 + data() {
  30 + return {
  31 + url_: this.value.url,
  32 + action_: this.value.action
  33 + }
  34 + },
  35 + methods: {
  36 + },
  37 + watch: {
  38 + url_(newVal) {
  39 + this.$emit('input', {url: this.url_, action: this.action_})
  40 + },
  41 + action_(newVal) {
  42 + if (newVal === 'go.pool') {
  43 + this.url_ = 'https://m.yohobuy.com/?pagename=productDetail'
  44 + } else if (newVal === 'go.ufo') {
  45 + this.url_ = 'https://m.yohobuy.com/?pagename=productList'
  46 + } else if (newVal === 'go.h5' ){
  47 + this.url_ = ''
  48 + }
  49 +
  50 + this.$emit('input', {url: this.url_, action: this.action_})
  51 + }
  52 + },
  53 + components: {
  54 + h5Url: h5,
  55 + ufoUrl: ufo,
  56 + poolUrl: pool
  57 + }
  58 +}
  59 +</script>
  60 +
  61 +<style>
  62 +
  63 +</style>
  1 +<template>
  2 + <div>
  3 + <Input :value="productId" @input="onUpdateProductId" placeholder="商品ID"/>
  4 + </div>
  5 +</template>
  6 +
  7 +<script>
  8 +
  9 +import util from '@/libs/util'
  10 +
  11 +export default {
  12 + props: ['value'],
  13 + data() {
  14 + return {
  15 + pagename: util.getUrlQueryString(this.value, 'pagename') || 'productDetail',
  16 + productId: util.getUrlQueryString(this.value, 'productId'),
  17 + link: util.getLink(this.value) || 'https://m.yohobuy.com/',
  18 + }
  19 + },
  20 + watch: {
  21 + value(newVal) {
  22 + this.pagename = util.getUrlQueryString(this.value, 'pagename') || 'productDetail';
  23 + this.productId = util.getUrlQueryString(this.value, 'productId');
  24 + this.link = util.getLink(this.value) || 'https://m.yohobuy.com/';
  25 + }
  26 + },
  27 + methods: {
  28 + onUpdateProductId(val) {
  29 + this.productId = val;
  30 + this.$emit('input', this.getUrl());
  31 + },
  32 + getUrl() {
  33 + let params = new URLSearchParams();
  34 +
  35 + params.append('pagename', this.pagename);
  36 + params.append('productId', this.productId);
  37 +
  38 + return `${this.link}?${params}`
  39 + }
  40 + }
  41 +}
  42 +</script>
  43 +
  44 +<style>
  45 +
  46 +</style>
  1 +<template>
  2 + <div>
  3 + <Input :value="productListTitle" @input="onUpdateTitle" placeholder="标题"/>
  4 + <Input :value="productPool" @input="onUpdatePool" placeholder="商品池ID"/>
  5 + </div>
  6 +</template>
  7 +
  8 +<script>
  9 +
  10 +import util from '@/libs/util'
  11 +
  12 +export default {
  13 + props: ['value'],
  14 + data() {
  15 + return {
  16 + pagename: util.getUrlQueryString(this.value, 'pagename') || 'productList',
  17 + productListTitle: util.getUrlQueryString(this.value, 'productListTitle'),
  18 + productPool: util.getUrlQueryString(this.value, 'productPool'),
  19 + link: util.getLink(this.value) || 'https://m.yohobuy.com/',
  20 + }
  21 + },
  22 + watch: {
  23 + value(newVal) {
  24 + this.pagename = util.getUrlQueryString(this.value, 'pagename') || 'productList';
  25 + this.productListTitle = util.getUrlQueryString(this.value, 'productListTitle');
  26 + this.productPool = util.getUrlQueryString(this.value, 'productPool');
  27 + this.link = util.getLink(this.value) || 'https://m.yohobuy.com/';
  28 + }
  29 + },
  30 + methods: {
  31 + onUpdateTitle(val) {
  32 + this.productListTitle = val;
  33 + this.$emit('input', this.getUrl());
  34 + },
  35 +
  36 + onUpdatePool(val) {
  37 + this.productPool = val;
  38 + this.$emit('input', this.getUrl());
  39 + },
  40 +
  41 + getUrl() {
  42 + let params = new URLSearchParams();
  43 +
  44 + params.append('pagename', this.pagename);
  45 + params.append('productListTitle', this.productListTitle);
  46 + params.append('productPool', this.productPool);
  47 +
  48 + return `${this.link}?${params}`
  49 + }
  50 + }
  51 +}
  52 +</script>
  53 +
  54 +<style>
  55 +
  56 +</style>
@@ -6,9 +6,11 @@ @@ -6,9 +6,11 @@
6 6
7 <Modal 7 <Modal
8 v-model="show" 8 v-model="show"
  9 + @on-ok="onOk"
  10 + @on-cancel="onCancel"
9 title="轮播图资源位" 11 title="轮播图资源位"
10 > 12 >
11 - <banner-editor v-model="list"></banner-editor> 13 + <banner-editor ref="editor" v-model="list"></banner-editor>
12 </Modal> 14 </Modal>
13 </div> 15 </div>
14 </template> 16 </template>
@@ -17,6 +19,8 @@ @@ -17,6 +19,8 @@
17 import selectComp from './select-comp'; 19 import selectComp from './select-comp';
18 import bannerEditor from './banner-editor'; 20 import bannerEditor from './banner-editor';
19 21
  22 +import ResourceService from '@/service/resource-service';
  23 +
20 export default { 24 export default {
21 props: ['data', 'resContentDataId'], 25 props: ['data', 'resContentDataId'],
22 data() { 26 data() {
@@ -24,12 +28,33 @@ export default { @@ -24,12 +28,33 @@ export default {
24 return { 28 return {
25 imgUrl: require('assets/banner-img.png'), 29 imgUrl: require('assets/banner-img.png'),
26 show: false, 30 show: false,
27 - list: allData.data 31 + list: allData.data,
  32 + allData
28 } 33 }
29 }, 34 },
  35 + mounted() {
  36 + this.resourceService = new ResourceService();
  37 + },
30 methods: { 38 methods: {
31 onClick() { 39 onClick() {
32 this.show = true; 40 this.show = true;
  41 + },
  42 + onOk() {
  43 + this.allData.data = this.$refs.editor.getValue();
  44 +
  45 + this.resourceService.editResource({
  46 + id: this.resContentDataId,
  47 + contentData: JSON.stringify(this.allData)
  48 + }).then(() => {
  49 + this.$bus.$emit('updated');
  50 + }).catch(() => {
  51 + this.$bus.$emit('updated');
  52 + })
  53 + },
  54 + onCancel() {
  55 + this.allData = JSON.parse(this.data);
  56 + this.list = this.allData.data;
  57 + this.$bus.$emit('updated');
33 } 58 }
34 }, 59 },
35 components: { 60 components: {
@@ -33,6 +33,9 @@ import imagePurview from './image-purview' @@ -33,6 +33,9 @@ import imagePurview from './image-purview'
33 export default { 33 export default {
34 name: 'drag-file-upload', 34 name: 'drag-file-upload',
35 props: { 35 props: {
  36 + id: {
  37 + type: Number
  38 + },
36 defaultFile: { 39 defaultFile: {
37 type: String 40 type: String
38 }, 41 },
@@ -69,7 +72,7 @@ export default { @@ -69,7 +72,7 @@ export default {
69 }, 72 },
70 handleSuccess(response, file, files) { 73 handleSuccess(response, file, files) {
71 if (response.data) { 74 if (response.data) {
72 - file.url = response.data.imagesList[0]; 75 + file.url = response.data
73 } 76 }
74 77
75 this.uploadList = files; 78 this.uploadList = files;
@@ -91,11 +94,6 @@ export default { @@ -91,11 +94,6 @@ export default {
91 desc: '文件 ' + file.name + ' 太大，不能超过 2M。' 94 desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
92 }); 95 });
93 }, 96 },
94 - selected(url) {  
95 - this.uploadList = this.defaultList = [{url}];  
96 - this.$emit('success', this.id, {url});  
97 - },  
98 -  
99 }, 97 },
100 mounted() { 98 mounted() {
101 this.uploadList = this.$refs.upload.fileList; 99 this.uploadList = this.$refs.upload.fileList;
@@ -22,7 +22,6 @@ import selectComp from './select-comp'; @@ -22,7 +22,6 @@ import selectComp from './select-comp';
22 import hotEditor from './hot-editor'; 22 import hotEditor from './hot-editor';
23 import ResourceService from '@/service/resource-service'; 23 import ResourceService from '@/service/resource-service';
24 24
25 -  
26 export default { 25 export default {
27 name: 'hot', 26 name: 'hot',
28 props: ['data', 'resContentDataId'], 27 props: ['data', 'resContentDataId'],
@@ -57,6 +56,9 @@ export default { @@ -57,6 +56,9 @@ export default {
57 }) 56 })
58 }, 57 },
59 onCancel() { 58 onCancel() {
  59 + this.name = this.allData.template_intro;
  60 + this.list = this.allData.data.split(',');
  61 +
60 this.$bus.$emit('updated'); 62 this.$bus.$emit('updated');
61 } 63 }
62 }, 64 },
@@ -10,10 +10,14 @@ @@ -10,10 +10,14 @@
10 <template v-else> 10 <template v-else>
11 <Progress v-if="progress" :percent="percentage" hide-info></Progress> 11 <Progress v-if="progress" :percent="percentage" hide-info></Progress>
12 </template> 12 </template>
  13 + <modal-purview v-model="showModal" :url="url"></modal-purview>
13 </div> 14 </div>
14 </template> 15 </template>
15 16
16 <script> 17 <script>
  18 +
  19 +import modalPurview from './modal-purview'
  20 +
17 export default { 21 export default {
18 name: 'image-purview', 22 name: 'image-purview',
19 props: { 23 props: {
@@ -50,6 +54,9 @@ export default { @@ -50,6 +54,9 @@ export default {
50 this.$emit('remove-image', this.url); 54 this.$emit('remove-image', this.url);
51 } 55 }
52 }, 56 },
  57 + components: {
  58 + modalPurview
  59 + }
53 }; 60 };
54 </script> 61 </script>
55 62
  1 +<template>
  2 + <Modal title="查看图片" :value="model" @input="input">
  3 + <img :src="url" v-if="model" style="width: 100%">
  4 + <div slot="footer"></div>
  5 + </Modal>
  6 +</template>
  7 +
  8 +<script>
  9 +
  10 +export default {
  11 + name: 'modal-purview',
  12 + props: ['value', 'url'],
  13 + data() {
  14 + return {
  15 + model: this.value
  16 + };
  17 + },
  18 + methods: {
  19 + input(val) {
  20 + this.model = val;
  21 + this.$emit('input', val);
  22 + }
  23 + },
  24 + watch: {
  25 + value(val) {
  26 + this.model = val;
  27 + }
  28 + }
  29 +};
  30 +</script>
  31 +
  1 +<template>
  2 + <Form :model="formItem" :label-width="60">
  3 + <FormItem label="标题">
  4 + <Input :value="formItem.category_name" @input="onChangeCate" placeholder="标题"/>
  5 + </FormItem>
  6 +
  7 + <FormItem label="more">
  8 + <Input :value="formItem.productListTitle" @input="onChangeTitle" placeholder="跳转列表标题"/>
  9 + </FormItem>
  10 +
  11 + <FormItem >
  12 + <Select :value="formItem.type" @input="onChangeSelect">
  13 + <Option value="sort">分类</Option>
  14 + <Option value="series">系列</Option>
  15 + </Select>
  16 + </FormItem>
  17 +
  18 + <FormItem >
  19 + <Input :value="formItem.type_id" placeholder="分类代码" @input="onChangeType" />
  20 + </FormItem>
  21 +
  22 + <FormItem label="商品编码">
  23 + <Input :value="formItem.product_ids" type="textarea" @input="onChangeIds" :rows="4" placeholder="多个商品以英文逗号分隔"/>
  24 + </FormItem>
  25 +
  26 + <Button @click="onDelete">删除</Button>
  27 + </Form>
  28 +</template>
  29 +
  30 +<script>
  31 +export default {
  32 + props: ["value"],
  33 + data() {
  34 + let type = 'sort' in this.value.more_url.params.listparams ? 'sort' : 'series';
  35 + let type_id = this.value.more_url.params.listparams[type] || 0
  36 + let productListTitle = this.value.more_url.params.productListTitle || '';
  37 +
  38 + return {
  39 + formItem: {
  40 + category_name: this.value.category_name,
  41 + product_ids: this.value.product_ids,
  42 + productListTitle,
  43 + type,
  44 + type_id,
  45 + }
  46 + };
  47 + },
  48 + methods: {
  49 + print() {
  50 + console.log(this.getValue());
  51 + },
  52 + onDelete() {
  53 + this.$emit('on-remove');
  54 + },
  55 + getValue() {
  56 + let vm = this;
  57 +
  58 + return {
  59 + category_name: vm.formItem.category_name,
  60 + product_ids: vm.formItem.product_ids,
  61 + more_url: {
  62 + action: "go.ufo",
  63 + params: {
  64 + pagename: "productList",
  65 + productListTitle: vm.formItem.productListTitle,
  66 + listparams: { [vm.formItem.type]: vm.formItem.type_id }
  67 + }
  68 + }
  69 + };
  70 + },
  71 + onChangeCate(v) {
  72 + this.formItem.category_name = v;
  73 + this.$emit('on-change', this.getValue());
  74 + },
  75 + onChangeTitle(v) {
  76 + this.formItem.productListTitle = v;
  77 + this.$emit('on-change', this.getValue());
  78 + },
  79 + onChangeSelect(v) {
  80 + this.formItem.type = v;
  81 + this.$emit('on-change', this.getValue());
  82 + },
  83 + onChangeType(v) {
  84 + this.formItem.type_id = v;
  85 + this.$emit('on-change', this.getValue());
  86 + },
  87 + onChangeIds(v) {
  88 + this.formItem.product_ids = v;
  89 + this.$emit('on-change', this.getValue());
  90 + },
  91 + }
  92 +};
  93 +</script>
  94 +
  95 +<style>
  96 +</style>
1 <template> 1 <template>
2 <div> 2 <div>
3 - <div class="item">  
4 - <Form :model="formItem" :label-width="60">  
5 - <FormItem label="标题">  
6 - <Input v-model="formItem.input1" placeholder="标题"/>  
7 - </FormItem>  
8 -  
9 - <FormItem label="more">  
10 - <Input v-model="formItem.input2" placeholder="跳转列表标题"/>  
11 - </FormItem>  
12 -  
13 - <FormItem >  
14 - <Input v-model="formItem.input3" placeholder="请选择跳转列表"/>  
15 - </FormItem>  
16 -  
17 - <FormItem >  
18 - <Input v-model="formItem.input4" placeholder="url"/>  
19 - </FormItem>  
20 -  
21 - <FormItem label="商品编码">  
22 - <Input v-model="formItem.ids" type="textarea" :rows="4" placeholder="多个商品以英文逗号分隔"/>  
23 - </FormItem>  
24 -  
25 - <Button >删除</Button>  
26 - </Form> 3 + <div class="item" v-for="(i,index) in list" :key="i.id" draggable="true">
  4 + <sort-tab-item :value="i" @on-remove="onDeleteBtn(index)" @on-change="(v) => (onChange(index, v))"></sort-tab-item>
27 </div> 5 </div>
28 - <Button style="margin-top:20px">添加一组</Button> 6 + <Button style="margin-top:20px" @click="onAddBtn">添加一组</Button>
29 </div> 7 </div>
30 </template> 8 </template>
31 9
32 <script> 10 <script>
  11 +
  12 +import sortTabItem from './sortTab-editor-item'
  13 +import util from '@/libs/util'
  14 +
33 export default { 15 export default {
  16 + props: ["value"],
34 data() { 17 data() {
35 return { 18 return {
36 - formItem: {  
37 - input1: '',  
38 - input2: '',  
39 - input3: '',  
40 - input4: '',  
41 - ids: ''  
42 - },  
43 - list: [{ 19 + list: util.clone(this.value)
  20 + };
  21 + },
  22 + methods: {
  23 + onAddBtn() {
  24 + this.list.push({
44 category_name: '', 25 category_name: '',
45 product_ids: '', 26 product_ids: '',
46 more_url: { 27 more_url: {
47 - action: '',  
48 - 28 + action: "go.ufo",
  29 + params: {
  30 + pagename: "productList",
  31 + productListTitle: '',
  32 + listparams: { sort: 0}
  33 + }
49 } 34 }
50 - }],  
51 - }  
52 - },  
53 - methods: {  
54 - onAddBtn() {  
55 - 35 + })
56 }, 36 },
57 - onDeleteBtn() {  
58 - 37 + onDeleteBtn(i, index) {
  38 + this.list.splice(index, 1);
  39 + },
  40 + getValue() {
  41 + return this.list;
  42 + },
  43 + onChange(i, v) {
  44 + this.$set(this.list, i, v);
59 } 45 }
  46 + },
  47 + components: {
  48 + sortTabItem
60 } 49 }
61 -} 50 +};
62 </script> 51 </script>
63 52
64 <style> 53 <style>
@@ -67,7 +56,8 @@ export default { @@ -67,7 +56,8 @@ export default {
67 padding-top: 30px; 56 padding-top: 30px;
68 padding-left: 20px; 57 padding-left: 20px;
69 padding-right: 20px; 58 padding-right: 20px;
70 - margin-bottom: 20px; 59 + padding-bottom: 20px;
  60 + cursor: move;
71 } 61 }
72 62
73 .item:hover { 63 .item:hover {
1 <template> 1 <template>
2 <div> 2 <div>
3 <select-comp :cb="onClick"> 3 <select-comp :cb="onClick">
4 - <img src="~assets/sort_item.png" alt="" srcset="" width="100%"> 4 + <img src="~assets/sort_item.png" alt="" srcset="" width="100%">
5 </select-comp> 5 </select-comp>
6 6
7 - <Modal v-model="show" title="品类资源位">  
8 - <sort-tab-editor></sort-tab-editor> 7 + <Modal v-model="show" title="品类资源位" @on-ok="onOk" @on-cancel="onCancel">
  8 + <sort-tab-editor ref="editor" :value="list"></sort-tab-editor>
9 </Modal> 9 </Modal>
10 </div> 10 </div>
11 </template> 11 </template>
@@ -13,16 +13,52 @@ @@ -13,16 +13,52 @@
13 <script> 13 <script>
14 import selectComp from './select-comp'; 14 import selectComp from './select-comp';
15 import sortTabEditor from './sortTab-editor' 15 import sortTabEditor from './sortTab-editor'
  16 +import ResourceService from '@/service/resource-service';
  17 +
  18 +let idStart = 1;
  19 +
16 export default { 20 export default {
17 props: ['data', 'resContentDataId'], 21 props: ['data', 'resContentDataId'],
18 data() { 22 data() {
  23 + let allData = JSON.parse(this.data);
  24 + let vm = this;
  25 +
19 return { 26 return {
20 - show: false 27 + show: false,
  28 + idStart: 1,
  29 + list: vm.addId(allData.data),
  30 + allData,
21 } 31 }
22 }, 32 },
  33 + mounted() {
  34 + this.resourceService = new ResourceService();
  35 + },
23 methods: { 36 methods: {
24 onClick() { 37 onClick() {
25 this.show = true; 38 this.show = true;
  39 + },
  40 + addId(m) {
  41 + m.forEach(i => {
  42 + i.id = Date.now() + idStart++;
  43 + })
  44 +
  45 + return m;
  46 + },
  47 + onOk() {
  48 + this.allData.data = this.$refs.editor.getValue();
  49 +
  50 + this.resourceService.editResource({
  51 + id: this.resContentDataId,
  52 + contentData: JSON.stringify(this.allData)
  53 + }).then(() => {
  54 + this.$bus.$emit('updated');
  55 + }).catch(() => {
  56 + this.$bus.$emit('updated');
  57 + })
  58 + },
  59 + onCancel() {
  60 + this.list = this.allData.data;
  61 + this.$bus.$emit('updated');
26 } 62 }
27 }, 63 },
28 components: { 64 components: {
1 <template> 1 <template>
2 <div> 2 <div>
3 <Form :label-width="100"> 3 <Form :label-width="100">
4 - <FormItem :label="i.poolName" v-for="i in formItem" :key="i.id"> 4 + <FormItem :label="i.poolName" v-for="i in list" :key="i.id">
5 <Input :value="i.poolId" @input="(v) => {onUpdate(v, i)}"/> 5 <Input :value="i.poolId" @input="(v) => {onUpdate(v, i)}"/>
6 </FormItem> 6 </FormItem>
7 </Form> 7 </Form>
@@ -19,14 +19,12 @@ export default { @@ -19,14 +19,12 @@ export default {
19 } 19 }
20 }, 20 },
21 data() { 21 data() {
22 - return {  
23 - formItem: this.list  
24 - } 22 + return {}
25 }, 23 },
26 methods: { 24 methods: {
27 onUpdate(v, i) { 25 onUpdate(v, i) {
28 i.poolId = v 26 i.poolId = v
29 - this.$emit('update:list', this.formItem) 27 + this.$emit('update:list', this.list)
30 } 28 }
31 }, 29 },
32 mounted() { 30 mounted() {
@@ -10,7 +10,7 @@ @@ -10,7 +10,7 @@
10 @on-ok="onOk" 10 @on-ok="onOk"
11 @on-cancel="onCancel" 11 @on-cancel="onCancel"
12 > 12 >
13 - <tab-editor :list.sync="data"></tab-editor> 13 + <tab-editor :list.sync="list"></tab-editor>
14 </Modal> 14 </Modal>
15 </div> 15 </div>
16 </template> 16 </template>
@@ -19,13 +19,15 @@ @@ -19,13 +19,15 @@
19 import selectComp from './select-comp'; 19 import selectComp from './select-comp';
20 import tabEditor from './tab-editor'; 20 import tabEditor from './tab-editor';
21 import ResourceService from '@/service/resource-service'; 21 import ResourceService from '@/service/resource-service';
  22 +import util from '@/libs/util';
22 23
23 export default { 24 export default {
24 name: 'tab', 25 name: 'tab',
25 props: ['data'], 26 props: ['data'],
26 data() { 27 data() {
27 return { 28 return {
28 - show: false 29 + show: false,
  30 + list: util.clone(this.data)
29 } 31 }
30 }, 32 },
31 mounted() { 33 mounted() {
@@ -36,7 +38,7 @@ export default { @@ -36,7 +38,7 @@ export default {
36 this.show = true; 38 this.show = true;
37 }, 39 },
38 onOk() { 40 onOk() {
39 - const updateVal = this.data.map((i) => { 41 + const updateVal = this.list.map((i) => {
40 return { 42 return {
41 id: i.id, 43 id: i.id,
42 poolId: i.poolId 44 poolId: i.poolId
@@ -47,9 +49,9 @@ export default { @@ -47,9 +49,9 @@ export default {
47 this.$bus.$emit('updated'); 49 this.$bus.$emit('updated');
48 }, 50 },
49 onCancel() { 51 onCancel() {
  52 + this.list = util.clone(this.data)
50 this.$bus.$emit('updated'); 53 this.$bus.$emit('updated');
51 }, 54 },
52 -  
53 }, 55 },
54 components: { 56 components: {
55 selectComp, 57 selectComp,
@@ -28,4 +28,43 @@ function getQueryString(name) { @@ -28,4 +28,43 @@ function getQueryString(name) {
28 28
29 util.getQueryString = getQueryString 29 util.getQueryString = getQueryString
30 30
  31 +function getUrlQueryString(url, name) {
  32 + if (!url) {
  33 + return ''
  34 + }
  35 + console.log(url);
  36 + let searchParams = url.split('?')[1]
  37 + let urlParams = new URLSearchParams(searchParams);
  38 + return urlParams.get(name) || ''
  39 +}
  40 +
  41 +function getLink(url) {
  42 + if (!url) {
  43 + return ''
  44 + }
  45 + let urlObj = url.split('?')[0];
  46 + return `${urlObj}`;
  47 +}
  48 +
  49 +util.getUrlQueryString = getUrlQueryString;
  50 +util.getLink = getLink;
  51 +
  52 +function clone(aObject) {
  53 + if (!aObject) {
  54 + return aObject;
  55 + }
  56 +
  57 + let bObject, v, k;
  58 +
  59 + bObject = Array.isArray(aObject) ? [] : {};
  60 +
  61 + for (k in aObject) {
  62 + v = aObject[k];
  63 + bObject[k] = (typeof v === "object") ? clone(v) : v;
  64 + }
  65 + return bObject;
  66 +}
  67 +
  68 +util.clone = clone;
  69 +
31 export default util; 70 export default util;
@@ -27,10 +27,12 @@ class ResourceService extends Service { @@ -27,10 +27,12 @@ class ResourceService extends Service {
27 return 0; 27 return 0;
28 }); 28 });
29 29
30 - resContentInfos.push({  
31 - type: 'resGoodsPoools',  
32 - data: resGoodsPools  
33 - }); 30 + if (resGoodsPools) {
  31 + resContentInfos.push({
  32 + type: 'resGoodsPoools',
  33 + data: resGoodsPools
  34 + });
  35 + }
34 36
35 return resContentInfos; 37 return resContentInfos;
36 }); 38 });
@@ -41,6 +41,7 @@ @@ -41,6 +41,7 @@
41 this.init(); 41 this.init();
42 42
43 this.$bus.$on('updated', () => { 43 this.$bus.$on('updated', () => {
  44 + console.log('updated');
44 this.init(); 45 this.init();
45 }) 46 })
46 }, 47 },
This diff could not be displayed because it is too large.