Skip to content

Y
ybf
Commit a3953c2d authored by xd's avatar xd
Browse files
Options

前两个静态页面完成

parent 382ea8d7
Hide whitespace changes
Inline Side-by-side
Showing with 309 additions and 56 deletions
ybf_wx/src/router/index.js
View file @ a3953c2d
......@@ -19,6 +19,11 @@ const routes = [
path: '/createActive',
name: 'createActive',
component: () => import(/* webpackChunkName: "about" */ '../views/active/createActive.vue')
},
{
path: '/activeList',
name: 'activeList',
component: () => import(/* webpackChunkName: "about" */ '../views/active/activeList.vue')
}
]
......
ybf_wx/src/views/active/activeList.vue 0 → 100644
View file @ a3953c2d
<template>
<div>
<div class="title">
<span>会员分裂</span>
<span class="fr">查看更多<span class="icon">></span></span>
</div>
<div class="active">
<div class="list">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.title {
height: 44px;
background: rgba(248, 248, 248, 1);
line-height: 44px;
padding: 0 16px;
font-size: 12px;
color: rgba(45, 71, 106, 1);
}
.icon {
font-weight: 800;
}
.active {
padding: 16px;
box-shadow:0px 2px 4px 0px rgba(221,221,221,1);
}
.list {
height: 104px;
width: 100%;
background-color: #fff;
display: flex;
justify-content: space-between
}
.left,.right {
background-color: pink;
height: 80px;
}
.left {
width: 80px;
}
.right {
width: 72%;
}
</style>
ybf_wx/src/views/active/createActive.vue
View file @ a3953c2d
<template>
<div>
<div class="container">
<div class="title">基础设置</div>
<van-cell-group>
<van-cell
class="list"
title="活动标题"
value="新客有礼"
style="font-size:14px;"
/>
<van-cell title="活动标题" style="font-size:14px;">
<template slot="default" >
<van-field v-model="title" placeholder="请输入活动标题" class="right" style="font-size:14px;" />
</template>
</van-cell>
<van-cell title="消费后领券" style="font-size:14px;">
<template slot="default">
<van-switch v-model="coupon" size="20px" />
<van-switch v-model="coupon" size="20px" class="right" />
</template>
</van-cell>
<van-cell title="新客专享" style="font-size:14px;">
<template slot="default">
<van-switch v-model="newCustomer" size="20px" />
<van-switch v-model="newCustomer" size="20px" class="right" />
</template>
</van-cell>
<van-cell title="领券条件" style="font-size:14px;">
......@@ -27,15 +26,14 @@
</van-cell-group>
<div class="title">券设置</div>
<van-cell-group>
<van-cell
class="list"
title="活动标题"
value="新客有礼"
style="font-size:14px;"
/>
<van-cell title="活动标题" style="font-size:14px;">
<template slot="default">
<van-field v-model="title2" placeholder="请输入活动标题" class="right" style="font-size:14px;" />
</template>
</van-cell>
<van-cell title="券类型" style="font-size:14px;">
<template slot="default">
<van-radio-group v-model="type">
<van-radio-group v-model="type" class="right" >
<van-radio name="1" style="float:left;">代金券</van-radio>
<van-radio name="2" style="float:right;">折扣券</van-radio>
</van-radio-group>
......@@ -44,6 +42,7 @@
<van-cell title="代金券金额" style="font-size:14px;">
<template slot="default">
<van-field
class="right noborder"
readonly
clickable
:value="cashCoupon"
......@@ -60,7 +59,7 @@
<van-cell title="使用门槛" style="font-size:14px;">
<template slot="default">
<van-field
class="limit"
class="right noborder"
readonly
clickable
:value="limit"
......@@ -74,28 +73,69 @@
/>
</template>
</van-cell>
<van-cell title="活动开始时间" style="font-size:14px;">
<!-- <van-cell title="活动开始时间" style="font-size:14px;">
<template slot="default">
<span @click="handleSTimeShow">{{startTime==''?"请选择开始时间":startTime}}</span>
<span @click="handleSTimeShow">{{ startTime }}</span>
<van-popup v-model="startShow" position="bottom">
<van-datetime-picker
v-model="startTime"
type="dateTime"
@confirm = "handleSTimeClose"
@change="getStartTime"
type="date"
@confirm="handleSTimeClose"
/>
</van-popup>
</template>
</van-cell> -->
<van-cell title="活动开始时间" style="font-size:14px;">
<template slot="default">
<van-field
class="right"
v-model="startTime1"
placeholder="选择活动结束时间" readonly="readonly"
@click="startShow = true"
/>
<van-popup v-model="startShow" position="bottom" :overlay="true">
<van-datetime-picker
v-model="startTime"
type="datetime"
@cancel="startShow = false"
@confirm="startShow = false"
@change="startTimeChange"
/>
</van-popup>
</van-popup>
</template>
</van-cell>
<van-cell title="活动结束时间" style="font-size:14px;">
<template slot="default">
<van-datetime-picker
v-model="endTime"
type="datetime"
<van-field
class="right"
v-model="endTime1"
placeholder="选择活动结束时间" readonly="readonly"
@click="endShow = true"
/>
<van-popup v-model="endShow" position="bottom" :overlay="true">
<van-datetime-picker
v-model="endTime"
type="datetime"
@cancel="endShow = false"
@confirm="endShow = false"
@change="endTimeChange"
/>
</van-popup>
</template>
</van-cell>
<div class="des">描述</div>
<van-field
class="area"
v-model="message"
rows="2"
autosize
type="textarea"
maxlength="50"
placeholder="请输入描述"
show-word-limit
/>
</van-cell-group>
<div class="creat">创建活动</div>
</div>
</template>
......@@ -103,6 +143,8 @@
export default {
data() {
return {
title: "",
title2: "",
coupon: "",
newCustomer: "",
condition: "",
......@@ -111,49 +153,79 @@ export default {
show2: false,
cashCoupon: "",
limit: "",
startTime: '',
endTime: new Date(),
startShow: false
startTime: new Date(),
startTime1: "",
endTime: "",
endTime1: "",
startShow: false,
endShow: false,
message: "",
};
},
methods: {
timeFormat(time) { // 时间格式化 2019-09-08
let year = time.getFullYear();
let month = time.getMonth() + 1;
let day = time.getDate();
return year + '年' + month + '月' + day + '日'
startTimeChange(e) {
let startTimeArr = e.getValues()
this.startTime1 = `${startTimeArr[0]}-${startTimeArr[1]}-${startTimeArr[2]} ${startTimeArr[3]}:${startTimeArr[4]}:00`
},
handleSTimeShow() {
this.startShow = true
},
handleSTimeClose() {
this.startTime = this.timeFormat(this.startTime)
this.startShow = false
//console.log(getValues(),"???");
},
getStartTime(val) {
console.log(val,"开始时间");
endTimeChange(e) {
let endTimeArr = e.getValues()
this.endTime1 = `${endTimeArr[0]}-${endTimeArr[1]}-${endTimeArr[2]} ${endTimeArr[3]}:${endTimeArr[4]}:00`
}
},
mounted() {
}
};
</script>
<style>
</style>
<style lang="scss" scoped>
// /deep/ .noborder .van-cell:not(:last-child)::after {
// display: none !important;
// }
.noborder .van-cell:not(:last-child)::after{
border: 0px solid red !important;
}
.creat {
margin-top: 80px;
width:96%;
height:40px;
background:rgba(117,178,253,1);
border-radius:10px;
text-align: center;
line-height: 40px;
font-size:16px;
font-weight:bold;
color: #fff;
margin-left: 2%;
}
.container {
background:rgba(248,248,248,1);
}
.van-field__body textarea {
background:rgba(248,248,248,1);
}
.area /deep/ [data-v-08d4afe1] .van-field__control {
margin: 0 12px;
background:rgba(248,248,248,1);
}
.des {
padding: 6px 16px;
font-size: 14px;
}
/deep/ .van-field__control {
height: 20px;
margin-left: 77px;
// margin-left: 77px;
}
/deep/ .van-cell {
height: 46px;
}
.phone {
float: left;
margin-top: 6px;
}
.title {
background-color: #f8f8f8;
......@@ -163,4 +235,13 @@ export default {
padding-left: 16px;
color: #2d476a;
}
[data-v-08d4afe1] .van-cell {
height: 100%;
font-size: 14px;
// padding: 0;
}
.right {
padding: 0;
}
</style>
ybf_wx/src/views/active/turntableDetail.vue
View file @ a3953c2d
<template>
<div>
<div>大转盘详情</div>
<div class="container">
<div class="topb">
<img src="../../../public/img/zhuanpanbg.png" alt="" />
</div>
<div class="title">
<span class="bt">服装店幸运抽奖</span>
<div class="tb">
<img src="../../../public/img/zp.png" alt="" />
大转盘抽奖
</div>
</div>
<div class="wtitle">
<img src="../../../public/img/water.png" alt="" />
<span class="wan">玩法介绍</span>
</div>
<div class="content">
<p>
马几一民号传所把半米料己走专管每见严且具还京叫海公好速信调化眼务难心化二响住厂图电没速严义常象关更了低。由压反几风列线法再石究说布通总织第量回儿称从消片度音济学地通斯带老水亲东志报月者进放北传看术走形解林直动效提情影和复色米最只等。济交感去照象强手式性九己值正可心什体收并适部该置可山省十。
</p>
<p>
马几一民号传所把半米料己走专管每见严且具还京叫海公好速信调化眼务难心化二响住厂图电没速严义常象关更了低。由压反几风列线法再石究说布通总织第量回儿称从消片度音济学地通斯带老水亲东志报月者进放北传看术走形解林直动效提情影和复色米最只等。济交感去照象强手式性九己值正可心什体收并适部该置可山省十。
</p>
</div>
<div class="creat">创建同款活动</div>
</div>
</template>
<script>
export default {
}
export default {};
</script>
<style>
</style>
\ No newline at end of file
<style></style>
<style scoped>
p {
font-size: 12px;
font-weight: 400;
color: rgba(45, 71, 106, 0.8);
margin-top: 14px;
}
.wan {
position: absolute;
left: 77px;
top: 8px;
font-size: 16px;
font-weight: bold;
}
.wtitle {
width: 200px;
height: 24px;
position: absolute;
left: 50%;
transform: translate(-50%);
top: 268px;
z-index: 999;
}
.wtitle img {
width: 100%;
}
.topb {
width: 100%;
height: 200px;
}
.topb img {
width: 100%;
}
.title {
width: 100%;
height: 50px;
font-size: 18px;
background-color: #fff;
box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
line-height: 50px;
padding-left: 16px;
position: relative;
}
.container {
background-color: rgba(248, 248, 248, 1);
height: 100%;
}
.bt {
font-size: 16px;
margin-left: 96px;
font-weight: bold;
color: rgba(45, 71, 106, 1);
}
.tb {
position: absolute;
height: 24px;
line-height: 24px;
left: 16px;
top: 14px;
border-radius: 2px;
border: 1px solid rgba(45, 71, 106, 1);
font-size: 10px;
font-weight: 500;
color: rgba(45, 71, 106, 1);
width: 88px;
text-align: center;
}
.tb img {
width: 12px;
height: 12px;
}
.content {
margin: 36px 16px 16px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
height: 376px;
position: relative;
padding: 16px 16px 30px 16px;
}
.creat {
position: absolute;
left: 50%;
transform: translate(-50%);
width: 343px;
height: 40px;
line-height: 40px;
background: rgba(117, 178, 253, 1);
border-radius: 10px;
font-size: 16px;
font-weight: bold;
color: rgba(255, 255, 255, 1);
text-align: center;
}
</style>
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