Commit 1c877ad9 authored by leiqingsong's avatar leiqingsong

轮盘活动&优惠券活动

parent 332b1be5
......@@ -37,6 +37,16 @@ const routes = [
name: 'createBigWheelActive',
component: () => import('../views/active/createBigWheelActive.vue')
},
{
path: '/createSuccess',
name: 'createSuccess',
component: () => import('@/views/active/createSuccess')
},
{
path: '/activeDetail',
name: 'activeDetail',
component: () => import('@/views/active/activeDetail')
},
{
path: '/mainSale',
name: 'MainSale',
......
<template>
<div id="active-detail">
<img class="bg" src="../../../public/img/activeDetail_bg.jpg" alt="bg">
<template v-if="type === 'coupon'">
<div class="coupon">
<div class="user-icon">用户头像</div>
<p class="slogan">送你限量优惠券,手慢无~</p>
<div class="coupon-content">
<img src="../../../public/img/coupon.png" alt="coupon_bg">
<div class="content">
<div class="money">10元</div>
<div class="split">
<img src="../../../public/img/split.png" alt="split">
</div>
<div class="other">
<p>满50元可用</p>
<p>有效期:09.09-09.10</p>
<p>全店通用</p>
</div>
</div>
</div>
<div class="btn">立即领取</div>
</div>
</template>
<template v-if="type === 'wheel'">
<div class="wheel-container">
<p class="title">幸运大抽奖!</p>
<div class="wheel">
<img src="../../../public/img/wheel.png" alt="wheel">
</div>
<div class="awards">
<ul>
<li><span>一等奖:</span><span>价值280元的优惠券</span></li>
</ul>
</div>
<div class="time-line">距离结束仅剩 <span>16天10:45:38</span></div>
<div class="description">
<div class="t">活动介绍</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magn
</div>
</div>
</div>
</template>
<div class="btn-share" :style="type === 'coupon'? 'bottom: 0': ''">立即分享</div>
</div>
</template>
<script>
export default {
name: 'active-detail',
components: {},
data() {
return {
type: 'coupon'
}
},
created() {
this.type = this.$route.query.type;
}
}
</script>
<style lang="scss">
#active-detail {
height: 100%;
.bg {
position: fixed;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -10;
}
.coupon {
position: relative;
top: 15%;
width: 90%;
margin: 0 auto;
background: #fff;
border: 1px solid #000;
.user-icon {
position: absolute;
top: -54px;
left: 0;
right: 0;
display: block;
width: 100px;
height: 100px;
margin: 0 auto;
text-align: center;
line-height: 100px;
font-size: 18px;
border: 1px solid;
border-radius: 50%;
background: #fff;
// filter: blur(2px);
}
.slogan {
height: 80px;
padding-top: 25px;
line-height: 80px;
font-size: 16px;
text-align: center;
}
.coupon-content {
position: relative;
width: 90%;
margin: 10px auto;
img {
width: 100%;
}
.content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 80%;
height: 92%;
margin: 0 auto;
display: flex;
justify-content: space-around;
align-items: center;
.money {
font-size: 32px;
font-weight: bold;
}
.split > img {
height: 70px;
}
.other {
font-size: 14px;
font-weight: 400;
p {
margin-bottom: 5%;
}
}
}
}
.btn {
width: 85%;
height: 50px;
margin: 10px auto 30px;
line-height: 50px;
text-align: center;
font-size: 0.5625rem;
background-color: #fc0;
border-radius: 4px;
}
}
.wheel-container {
.title {
padding-top: 15%;
font-size: 40px;
text-align: center;
color: #fff;
}
.wheel {
width: 100%;
img {
width: 100%;
}
}
.awards {
width: 80%;
min-height: 100px;
background: #ff9;
margin: 0 auto 10px;
border-radius: 10px;
li {
padding: 10px 20px;
font-size: 0.5rem;
font-weight: bold;
}
}
.time-line {
width: 80%;
text-align: center;
font-size: 16px;
margin: 0 auto 20px;
border-radius: 4px;
background: #fff;
span {
color: #f00;
font-size: 18px;
}
}
.description {
width: 100%;
padding: 5px 1px;
background: #fff;
.t {
position: relative;
font-size: 16px;
font-weight: bold;
padding-left: 20px;
&::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 8px;
height: 21px;
background: #fc0;
}
}
.content {
padding: 10px;
font-size: 14px;
}
}
}
.btn-share {
position: absolute;
display: block;
width: 100%;
height: 45px;
margin: 0.3125rem auto;
text-align: center;
font-size: 18px;
line-height: 45px;
background-color: #169bd5;
}
}
</style>
......@@ -5,25 +5,11 @@
<span class="fr">查看更多<span class="icon">></span></span>
</div>
<div class="active">
<div class="list">
<div class="left"></div>
<div class="right">
<h3>砍价</h3>
<p>由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状。</p>
</div>
</div>
<div class="list">
<div class="list" v-for="item in activeList" :key="item.id" @click="toDetail(item.id, item.type)">
<div class="left"></div>
<div class="right">
<h3>集赞</h3>
<p>由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状。</p>
</div>
</div>
<div class="list list3">
<div class="left"></div>
<div class="right">
<h3>推荐有礼</h3>
<p>由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状。</p>
<h3>{{ item.activeName }}</h3>
<p>{{ item.description }}</p>
</div>
</div>
</div>
......@@ -48,7 +34,37 @@
</template>
<script>
export default {};
export default {
data() {
return {
activeList: [
{
id: 1,
type: 'coupon',
activeName: '砍价',
description: '由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状。'
},
{
id: 2,
type: 'wheel',
activeName: '集赞',
description: '由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状。'
}
]
}
},
methods: {
toDetail(active_id, type) {
this.$router.push({
path: '/activeDetail',
query: {
id: active_id,
type: type
}
})
}
}
};
</script>
<style scoped>
......
......@@ -260,7 +260,18 @@
</div>
</div>
<van-cell title="开始时间" style="font-size:14px;">
<div class="yhbr" style="padding: 0.4375rem;">
<div class="top">
<span style="color:#2d476a;">券有效期</span>
<van-radio-group v-model="prizeList[index].timeline_type" class="right" @change="radioChange">
<van-radio name="1" style="float:left;margin-right:10px;">指定日期</van-radio>
<van-radio name="2" style="float:right;">有效天数</van-radio>
</van-radio-group>
</div>
</div>
<template v-if="prizeList[index].timeline_type == 1">
<van-cell title="开始时间" style="font-size:14px;">
<template slot="default">
<div class="jpsl">
<van-field
......@@ -285,33 +296,38 @@
</van-popup>
</div>
</template>
</van-cell>
<van-cell title="结束时间" style="font-size:14px;">
<template slot="default">
<div class="jpsl">
<van-field
class="right"
v-model="prizeList[index].endTime1"
placeholder="选择活动结束时间"
readonly="readonly"
@click="prizeList[index].endShow = true"
/>
<van-popup
v-model="prizeList[index].endShow"
position="bottom"
:overlay="true"
>
<van-datetime-picker
v-model="prizeList[index].endTime"
type="date"
@cancel="prizeList[index].endShow = false"
@confirm="handleEndTime(prizeList[index].endTime,index)"
@change="endTimeChange2(prizeList[index].endTime, index)"
</van-cell>
<van-cell title="结束时间" style="font-size:14px;">
<template slot="default">
<div class="jpsl">
<van-field
class="right"
v-model="prizeList[index].endTime1"
placeholder="选择活动结束时间"
readonly="readonly"
@click="prizeList[index].endShow = true"
/>
</van-popup>
</div>
</template>
</van-cell>
<van-popup
v-model="prizeList[index].endShow"
position="bottom"
:overlay="true"
>
<van-datetime-picker
v-model="prizeList[index].endTime"
type="date"
@cancel="prizeList[index].endShow = false"
@confirm="handleEndTime(prizeList[index].endTime,index)"
@change="endTimeChange2(prizeList[index].endTime, index)"
/>
</van-popup>
</div>
</template>
</van-cell>
</template>
<template v-else>
</template>
<van-cell title="奖品数量" style="font-size:14px;">
<template slot="default">
<div class="jpsl">
......@@ -332,28 +348,26 @@
</div>
</template>
</van-cell>
<van-cell style="font-size:14px;" center class="cs">
<van-cell style="font-size:14px;" center class="cs" label="此奖项每天最多可抽中的数量">
<template slot="title">
<span class="custom-title">每日上限</span>
<span class="small">(此奖项每天最多可抽中的数量)</span>
<!-- <span class="small"></span> -->
</template>
<template slot="default">
<van-field
class="right noborder"
readonly
clickable
:value="prizeList[index].limit"
placeholder="请输入次数"
@touchstart.native.stop="prizeList[index].limitShow = true"
/>
<van-number-keyboard
v-model="prizeList[index].limit"
:show="prizeList[index].limitShow"
@blur="prizeList[index].limitShow = false"
/>
</template>
<div class="jpsl">
<template slot="default">
<van-field
class="right noborder"
readonly
clickable
:value="prizeList[index].limit"
placeholder="请输入次数"
@touchstart.native.stop="prizeList[index].limitShow = true"
/>
<van-number-keyboard
v-model="prizeList[index].limit"
:show="prizeList[index].limitShow"
@blur="prizeList[index].limitShow = false"
/>
</template>
</div>
</van-cell>
<div class="add" @click="addPrice">添加奖项</div>
</van-cell-group>
......@@ -375,7 +389,7 @@
<div class="des">活动图片</div>
<van-uploader v-model="fileList" multiple :max-count="9" />
</div>
<div class="creat">创建活动</div>
<div class="creat" @click="handleCreate">创建活动</div>
</div>
</template>
......@@ -406,6 +420,7 @@ export default {
prizeList: [
{
name: "",
timeLine_type: "",
type: "",
discountsMoney: "",
discountsShow: false,
......@@ -440,6 +455,12 @@ export default {
};
},
methods: {
radioChange(val) {
// console.log(val);
},
handleCreate() {
this.$router.push('/createSuccess');
},
startTimeChange(e) {
let startTimeArr = e.getValues();
this.basicInfo.startTime1 = `${startTimeArr[0]}-${startTimeArr[1]}-${startTimeArr[2]}`;
......@@ -774,3 +795,13 @@ export default {
align-items: center;
}
</style>
<style lang="scss">
.container {
.cs {
.van-cell__value {
flex: 2
}
}
}
</style>
\ No newline at end of file
<template>
<div id="create-success">
<div v-show="step === 2" class="box one">
<van-cell-group class="input-cell">
<van-field v-model="newTemplateName" placeholder="请输入新的模板名称!" />
</van-cell-group>
</div>
<div v-show="step === 1" class="box two">
<div class="success-icon">
<img class="fg" src="../../../public/img/success.png" alt="success-fg">
<p>创建活动成功!</p>
</div>
</div>
<div class="box three">
<div class="btn-group">
<van-button v-if="step === 2" type="info">取消</van-button>
<van-button v-if="step === 1" type="info" @click="saveNewTemplate">保存为新的模板</van-button>
<van-button type="info">完成</van-button>
</div>
</div>
</div>
</template>
<script>
export default {
name: "createSuccess",
components: {},
data() {
return {
newTemplateName: '',
step: 1
};
},
methods: {
saveNewTemplate() {
this.step = 2;
}
}
};
</script>
<style lang="scss">
#create-success {
display: flex;
flex-direction: column;
height: 100%;
.box {
margin-bottom: 20px;
}
.one {
flex: 1;
.input-cell {
width: 90%;
margin: 20px auto;
border: 1px solid #d4cfcf;
}
}
.two {
flex: 3;
.success-icon {
margin-top: 100px;
text-align: center;
img {
margin: 0 auto;
}
p {
font-size: 14px;
}
}
}
.three {
display: flex;
justify-content: center;
padding: 0 20px;
.btn-group {
.van-button {
width: 150px;
&:first-child{
margin-right: 10px;
}
}
}
}
}
</style>
......@@ -162,7 +162,7 @@ export default {
if (this.$route.query.code === undefined){
// alert('没code')
this.zTestPreAuthCode()
// this.zTestPreAuthCode()
} else {
// alert('有code')
this.zTestGetNowUrlInfo();
......
......@@ -32,7 +32,7 @@ export default {
},
nowNode: {
type: Object,
default: {}
default: () =>({})
}
},
data() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment