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
| <template>
| <div class="goods-operation">
| <div class="step-list">
| <steps :current="activestep" style="height:60px;margin-top: 10px">
| <step title="选择商品品类"/>
| <step title="填写商品详情"/>
| <step title="商品发布成功"/>
| </steps>
| </div>
| <!-- 第一步 选择分类 -->
| <first-step ref='first' v-show="activestep === 0" @change="getFirstData"></first-step>
| <!-- 第二步 商品详细信息 -->
| <second-step ref='second' :firstData="firstData" v-if="activestep === 1"></second-step>
| <!-- 第三步 发布完成 -->
| <third-step ref='third' v-if="activestep === 2"></third-step>
|
|
| </div>
| </template>
| <script>
| import firstStep from './goodsOperationFirst'
| import secondStep from './goodsOperationSec'
| import thirdStep from './goodsOperationThird'
| export default {
| name: "addGoods",
| components: {
| firstStep,
| secondStep,
| thirdStep
| },
|
| data() {
| return {
| /** 当前激活步骤*/
| activestep: 0,
| firstData: {}, // 第一步传递的数据
| };
| },
| methods: {
| // 选择商品分类回调
| getFirstData (item) {
| this.firstData = item;
| this.activestep = 1;
| }
| },
| mounted() {
| // 编辑商品、模板
| if (this.$route.query.id || this.$route.query.draftId) {
| this.activestep = 1;
| } else {
| this.activestep = 0
| this.$refs.first.selectGoodsType = true;
| }
|
| }
| };
| </script>
| <style lang="scss" scoped>
| @import "./addGoods.scss";
| </style>
|
|
