info.vue
4.68 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<template>
<layout-body>
<Form :label-width="100" v-if='shopData' ref="shopData" :model="shopData">
<Form-item label="店铺名称：">
<span>{{shopData.shopName}}</span>
</Form-item>
<Form-item label="店铺类型：">
<span>{{SHOPNATURE[shopData.shopNature]}}</span>
</Form-item>
<Form-item label="店铺域名：">
<span>{{shopData.shopDomain}}</span>
</Form-item>
<Form-item label="店铺LOGO：">
<div class="upload-item">
<div class="upload-item-img">
<drag-file-upload
:bucket="bucket"
:default-file="shopData.shopLogo"
@success="uploadImageSuccess"
@remove="uploadImageRemove">
</drag-file-upload>
</div>
</div>
<em class="upload-img-tip">尺寸要求150px＊150px 不大于500KB</em>
</Form-item>
<Form-item label="店铺简介：">
<editor :content="shopData.shopIntro" @change="updateData" :z-index="2">
</editor>
</Form-item>
<Form-item label="品牌－供应商：">
<Table :columns="tableCols" width="700" :data="tableData"></Table>
</Form-item>
<Form-item>
<Button type="primary" @click="submit">保存</Button>
</Form-item>
</Form>
</layout-body>
</template>
<script>
import xss from 'xss';
import ShopService from 'services/shop/shop-service';
const SHOPNATURE = {
1: '旗舰店',
2: '专卖店',
3: '初始状态（异常情况）'
};
export default {
created() {
this.shopService = new ShopService();
this.shopService.getShop().then((res) => {
this.shopData = res.data;
this.tableData = JSON.parse(res.data.shopRelationList || '[]');
}, (error) => {
this.$Message.error(error.message);
});
},
data() {
return {
SHOPNATURE,
shopData: null,
tableCols: [
{
title: '品牌',
key: 'brandName',
align: 'center',
},
{
title: '供应商',
key: 'supplierName',
width: 300,
align: 'center'
}
],
tableData: null,
bucket: 'yhb-img01'
};
},
methods: {
updateData: function(content) {
this.shopData.shopIntro = content;
},
uploadImageSuccess: function(attach, file) {
this.shopData.shopLogo = file.url;
},
uploadImageRemove: function() {
this.shopData.shopLogo = '';
},
beforeSubmit: function() {
let result = {
shopDomain: this.shopData.shopDomain,
shopLogo: this.shopData.shopLogo,
shopName: this.shopData.shopName,
shopNature: this.shopData.shopNature,
shopRelationList: this.shopData.shopRelationList,
shopsId: this.shopData.shopsId,
shopsType: this.shopData.shopsType,
shopIntro: xss(this.shopData.shopIntro)
};
return result;
},
submit: function() {
let newShop = this.beforeSubmit();
this.$Loading.start();
this.shopService.saveBaseShopInfo(newShop).then((result) => {
this.$Loading.finish();
if (result.code === 200) {
this.$Notice.success({
title: '修改成功',
desc: '该店铺保存成功！'
});
} else {
this.$Notice.error({
title: '保存错误',
desc: result.message
});
}
});
}
}
};
</script>
<style lang="scss">
.upload-img-tip {
color: #c90;
display: block;
}
.upload-item-img {
display: inline-block;
width: 124px;
box-sizing: border-box;
}
</style>