detail.vue
4.14 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
<template>
<el-dialog class="viewDialog" :close-on-click-modal="false" title="弹窗广告详情" width="800px" :visible.sync="visible">
<el-descriptions class="margin-top" :column="1" border>
<el-descriptions-item>
<template slot="label">
广告名称
</template>
{{ form.name }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
上线时间
</template>
{{ form.startTime }} - {{ form.endTime }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
弹窗图片
</template>
<a :href="form.popupImg" style="color: #42b983" target="_blank"><img :src="form.popupImg" alt="点击打开" class="img-ad"></a>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
关闭按钮
</template>
<a :href="form.closeImg" style="color: #42b983" target="_blank"><img :src="form.closeImg" alt="点击打开" class="el-avatar"></a>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
跳转类型
</template>
<span v-if="form.jumpType === 0">不跳转</span>
<span v-if="form.jumpType === 1">商品</span>
<span v-if="form.jumpType === 2">分类</span>
<span v-if="form.jumpType === 3">平台券</span>
<span v-if="form.jumpType === 4">跳转小程序</span>
<span v-if="form.jumpType === 5">公众号文章</span>
</el-descriptions-item>
<el-descriptions-item v-if="form.jumpType !== 0">
<template slot="label">
链接配置
</template>
<div v-if="form.jumpType === 1">
{{ jumpContent.name }}
</div>
<div v-if="form.jumpType === 2">
{{ jumpContent.name }}
</div>
<div v-if="form.linkType === 3">
<span v-for="(item,index) in jumpContent.items" :key="index">
<i v-if="index!==0">,</i> {{ item.name }}
</span>
</div>
<div v-if="form.linkType === 4">
<el-descriptions class="margin-top" :column="1" border>
<el-descriptions-item>
<template slot="label">
小程序app id
</template>
{{ jumpContent.appId }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
页面路径
</template>
{{ jumpContent.link }}
</el-descriptions-item>
</el-descriptions>
</div>
<div v-if="form.linkType === 5">
<el-descriptions class="margin-top" :column="1" border>
<el-descriptions-item>
<template slot="label">
页面路径
</template>
{{ jumpContent.link }}
</el-descriptions-item>
</el-descriptions>
</div>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
触发条件
</template>
<span v-if="form.triggerCondition === 1">每天进入商城首页</span>
<span v-if="form.triggerCondition === 2">支付成功后</span>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
针对会员
</template>
<span v-if="form.applyGroup === 1">全体成员</span>
<span v-if="form.applyGroup === 2">会员</span>
</el-descriptions-item>
</el-descriptions>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="visible = false">确实</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
name: 'AdDetail',
data () {
return {
visible: false,
form: {},
jumpContent: {}
}
},
methods: {
show (row) {
this.form = JSON.parse(JSON.stringify(row))
this.jumpContent = row.jumpContent ? JSON.parse(row.jumpContent) : {}
this.visible = true
}
}
}
</script>
<style scoped lang="scss">
.viewDialog{
.img-ad{
height: 200px;
}
::v-deep .el-descriptions-item__label{
width: 130px;
}
}
</style>