Skip to content

Y
ybf
Commit e50970da authored by leiqingsong's avatar leiqingsong
Browse files
Options

案例展示&创建抽奖活动接口

parent d95a67b0
Hide whitespace changes
Inline Side-by-side
Showing with 469 additions and 131 deletions
wx_application/src/api/active.js 0 → 100644
View file @ e50970da
// 自己 后端 request
import request from '@/utils/aRequestCF';
import requestB from '@/utils/bRequestEa';
/**
* 创建活动
*/
export function createActive(params) {
return request({
url: `activity/add`,
method: 'post',
headers: { 'Content-Type': 'application/json' },
data: params
})
}
/**
* 获取活动列表
*/
export function getActiveList(inData) {
let getData = {
args: inData
}
return requestB({
url: '',
method: 'get',
getData
})
}
\ No newline at end of file
wx_application/src/router/index.js
View file @ e50970da
......@@ -132,6 +132,11 @@ const routes = [
name: 'case',
component: () => import('@/views/case/index')
},
{
path: '/caseEdit',
name: 'caseEdit',
component: () => import('@/views/case/caseEdit')
},
{
path: '/caseDetail',
name: 'caseDetail',
......
wx_application/src/utils/bRequestEa.js
View file @ e50970da
......@@ -47,7 +47,7 @@ let basicInfo = {
}
// 创建 axios 实例
debugger
// debugger
const service = axios.create({
baseURL: BASE_API,
......
wx_application/src/views/active/activeDetail.vue
View file @ e50970da
<template>
<div id="active-detail">
<img class="bg" src="../../../public/img/activeDetail_bg.jpg" alt="bg">
<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">
<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">
<img src="../../../public/img/split.png" alt="split" />
</div>
<div class="other">
<p>满50元可用</p>
......@@ -26,39 +26,148 @@
<div class="wheel-container">
<p class="title">幸运大抽奖！</p>
<div class="wheel">
<img src="../../../public/img/wheel.png" alt="wheel">
<div class="wheel-point" @click="Start_Game">Start</div>
<img src="../../../public/img/wheel.png" alt="wheel" />
<div
class="wheel-bg"
:class="{freeze: freeze}"
:style="`transform: rotate(${wheelDeg}deg)`"
>
<div class="prize-list">
<div class="prize-item-wrapper" v-for="(item,index) in prizeList" :key="index">
<div
class="prize-item"
:style="`transform: rotate(${(360/ prizeList.length) * index }deg)`"
>
<div class="prize-name">{{ item.name }}</div>
<div class="prize-icon">
<img :src="item.icon" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="awards">
<ul>
<li><span>一等奖：</span><span>价值280元的优惠券</span></li>
<li>
<span>一等奖：</span>
<span>价值280元的优惠券</span>
</li>
</ul>
</div>
<div class="time-line">距离结束仅剩 <span>16天10:45:38</span></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
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 class="btn-share" :style="type === 'coupon'? 'bottom: 0': ''" @click="handleShare">立即分享</div>
</div>
</template>
<script>
export default {
name: 'active-detail',
name: "active-detail",
components: {},
data() {
return {
type: 'coupon'
}
type: "coupon",
freeze: false,
rolling: false,
wheelDeg: 0,
prizeNumber: 6,
prizeListOrigin: [
{
name: "奖0",
icon:
"http://wuhanshangcheng.oss-cn-beijing.aliyuncs.com/shangchengnormal/7E4C1866C2874AA5A788B5E59630A7ED.png"
},
{
name: "奖1",
icon:
"http://wuhanshangcheng.oss-cn-beijing.aliyuncs.com/shangchengnormal/7E4C1866C2874AA5A788B5E59630A7ED.png"
},
{
name: "奖2",
icon:
"http://wuhanshangcheng.oss-cn-beijing.aliyuncs.com/shangchengnormal/7E4C1866C2874AA5A788B5E59630A7ED.png"
},
{
name: "奖3",
icon:
"http://wuhanshangcheng.oss-cn-beijing.aliyuncs.com/shangchengnormal/7E4C1866C2874AA5A788B5E59630A7ED.png"
},
{
name: "奖4",
icon:
"http://wuhanshangcheng.oss-cn-beijing.aliyuncs.com/shangchengnormal/7E4C1866C2874AA5A788B5E59630A7ED.png"
},
{
name: "奖5",
icon:
"http://wuhanshangcheng.oss-cn-beijing.aliyuncs.com/shangchengnormal/7E4C1866C2874AA5A788B5E59630A7ED.png"
}
]
};
},
created() {
this.type = this.$route.query.type;
},
watch: {
prizeNumber() {
this.freeze = true;
this.wheelDeg = 0;
setTimeout(() => {
this.freeze = false;
}, 0);
}
},
computed: {
prizeList() {
return this.prizeListOrigin.slice(0, this.prizeNumber);
}
},
methods: {
Start_Game() {
this.rolling = true;
const { wheelDeg, prizeList } = this;
const random = parseInt(6 * Math.random(0, 5));
console.log(random);
this.wheelDeg =
wheelDeg -
(wheelDeg % 360) +
6 * 360 -
(360 / prizeList.length) * random;
setTimeout(() => {
this.rolling = false;
}, 4500);
},
handleShare() {
console.log("立即分享");
// wx.onMenuShareWechat({
// title: "测试", // 分享标题
// desc: "分享到微信", // 分享描述
// link: "", // 分享链接
// imgUrl: "", // 分享图标
// success: function() {
// // 用户确认分享后执行的回调函数
// console.log("share---", "background: limegreen;");
// },
// cancel: function() {
// // 用户取消分享后执行的回调函数
// }
// });
}
}
}
};
</script>
<style lang="scss">
......@@ -104,7 +213,7 @@ export default {
font-size: 16px;
text-align: center;
}
.coupon-content {
position: relative;
width: 90%;
......@@ -162,10 +271,82 @@ export default {
}
.wheel {
position: relative;
width: 100%;
img {
width: 100%;
}
.wheel-point {
width: 20%;
height: 32px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
font-size: 32px;
text-align: center;
line-height: 32px;
z-index: 10;
}
.wheel-bg {
width: 74%;
height: 74%;
border-radius: 1000px;
overflow: hidden;
// background: #fff;
transition: transform 4s ease-in-out;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
&.freeze {
transition: none;
background: red;
}
}
.prize-list {
width: 90%;
height: 90%;
margin: auto;
position: relative;
text-align: center;
}
.prize-item-wrapper {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
height: 62%;
}
.prize-item {
width: 90%;
height: 90%;
margin: 0 auto;
transform-origin: bottom;
.prize-name {
padding: 16px 0 0;
font-size: 14px;
}
.prize-icon {
width: 100%;
img {
min-width: 32px;
min-height: 32px;
width: 50%;
}
}
}
}
.awards {
......@@ -180,7 +361,7 @@ export default {
font-weight: bold;
}
}
.time-line {
width: 80%;
text-align: center;
......@@ -199,12 +380,12 @@ export default {
padding: 5px 1px;
background: #fff;
.t {
position: relative;
font-size: 16px;
font-weight: bold;
padding-left: 20px;
position: relative;
font-size: 16px;
font-weight: bold;
padding-left: 20px;
&::before {
content: '';
content: "";
display: block;
position: absolute;
top: 0;
......
wx_application/src/views/active/activeList.vue
View file @ e50970da
......@@ -34,6 +34,7 @@
</template>
<script>
import * as API from '@/api/active';
export default {
data() {
return {
......@@ -54,6 +55,11 @@ export default {
}
},
methods: {
// 获取 欧亚 活动列表
getOYActiveList() {
},
// 跳转到 活动详情
toDetail(active_id, type) {
this.$router.push({
path: '/activeDetail',
......
wx_application/src/views/active/createBigWheelActive.vue
View file @ e50970da
......@@ -22,11 +22,7 @@
readonly="readonly"
@click="basicInfo.startShow = true"
/>
<van-popup
v-model="basicInfo.startShow"
position="bottom"
:overlay="true"
>
<van-popup v-model="basicInfo.startShow" position="bottom" :overlay="true">
<van-datetime-picker
v-model="basicInfo.startTime"
type="date"
......@@ -48,11 +44,7 @@
readonly="readonly"
@click="basicInfo.endShow = true"
/>
<van-popup
v-model="basicInfo.endShow"
position="bottom"
:overlay="true"
>
<van-popup v-model="basicInfo.endShow" position="bottom" :overlay="true">
<van-datetime-picker
v-model="basicInfo.endTime"
type="date"
......@@ -146,9 +138,7 @@
<van-cell style="font-size:14px;" class="task">
<template slot="title">
<span class="custom-title">做任务奖次数</span>
<div style="font-size:10px;">
（开启后提醒顾客领取任务，如发朋友圈、加好友等，增加抽奖次数）
</div>
<div style="font-size:10px;">（开启后提醒顾客领取任务，如发朋友圈、加好友等，增加抽奖次数）</div>
</template>
<template slot="default">
<van-switch v-model="LuckyDraw.quantity" size="20px" class="right" />
......@@ -167,23 +157,19 @@
clickable
:value="LuckyDraw.addNumber"
placeholder="请输入次数"
@touchstart.native.stop="LuckyDraw.show3 = true"
@touchstart.native.stop="LuckyDraw.show4 = true"
/>
<van-number-keyboard
v-model="LuckyDraw.addNumber"
:show="LuckyDraw.show3"
@blur="LuckyDraw.show3 = false"
:show="LuckyDraw.show4"
@blur="LuckyDraw.show4 = false"
/>
</div>
</template>
</van-cell>
</van-cell-group>
<div class="title">奖品设置</div>
<van-cell-group
class="all sz"
v-for="(list, index) in prizeList"
:key="index"
>
<van-cell-group class="all sz" v-for="(list, index) in prizeList" :key="index">
<van-icon
v-if="prizeList.length > 1"
name="close"
......@@ -196,11 +182,7 @@
<span class="custom-title">奖项名称</span>
</template>
<template slot="default">
<van-field
class="right"
v-model="prizeList[index].name"
placeholder="请输入奖项名称"
/>
<van-field class="right" v-model="prizeList[index].name" placeholder="请输入奖项名称" />
</template>
</van-cell>
<div class="yhType">
......@@ -208,14 +190,12 @@
<div class="top">
<span style="color:#2d476a;">优惠券类型</span>
<van-radio-group v-model="prizeList[index].type" class="right">
<van-radio name="1" style="float:left;margin-right:10px;"
>代金券</van-radio
>
<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 class="mj">
<div class="l-yh">
<div class="l-yh">
<div class="je">
<van-field
class="tm"
......@@ -260,42 +240,42 @@
</div>
</div>
<div class="yhbr" style="padding: 0.4375rem;">
<div class="top">
<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-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>
</div>
<template v-if="prizeList[index].timeline_type == 1">
<van-cell title="开始时间" style="font-size:14px;">
<template slot="default">
<div class="jpsl">
<van-field
class="right"
v-model="prizeList[index].startTime1"
placeholder="选择活动开始时间"
readonly="readonly"
@click="prizeList[index].startShow = true"
/>
<van-popup
v-model="prizeList[index].startShow"
position="bottom"
:overlay="true"
>
<van-datetime-picker
v-model="prizeList[index].startTime"
type="date"
@cancel="prizeList[index].startShow = false"
@confirm="handleStartTime(prizeList[index].startTime,index)"
@change="startTimeChange2(prizeList[index].startTime, index)"
<template slot="default">
<div class="jpsl">
<van-field
class="right"
v-model="prizeList[index].startTime1"
placeholder="选择活动开始时间"
readonly="readonly"
@click="prizeList[index].startShow = true"
/>
</van-popup>
</div>
</template>
<van-popup v-model="prizeList[index].startShow" position="bottom" :overlay="true">
<van-datetime-picker
v-model="prizeList[index].startTime"
type="date"
@cancel="prizeList[index].startShow = false"
@confirm="handleStartTime(prizeList[index].startTime,index)"
@change="startTimeChange2(prizeList[index].startTime, index)"
/>
</van-popup>
</div>
</template>
</van-cell>
<van-cell title="结束时间" style="font-size:14px;">
<template slot="default">
......@@ -307,11 +287,7 @@
readonly="readonly"
@click="prizeList[index].endShow = true"
/>
<van-popup
v-model="prizeList[index].endShow"
position="bottom"
:overlay="true"
>
<van-popup v-model="prizeList[index].endShow" position="bottom" :overlay="true">
<van-datetime-picker
v-model="prizeList[index].endTime"
type="date"
......@@ -324,9 +300,7 @@
</template>
</van-cell>
</template>
<template v-else>
</template>
<template v-else></template>
<van-cell title="奖品数量" style="font-size:14px;">
<template slot="default">
......@@ -394,9 +368,12 @@
</template>
<script>
import * as API_Active from "@/api/active";
import { Toast } from 'vant';
export default {
data() {
return {
// 基础信息
basicInfo: {
title: "",
startTime: new Date(),
......@@ -406,6 +383,7 @@ export default {
startShow: false,
endShow: false
},
// 抽奖设置
LuckyDraw: {
name: "",
number: "",
......@@ -415,8 +393,10 @@ export default {
addNumber: "",
show: false,
show2: false,
show3: false
show3: false,
show4: false
},
// 奖品设置
prizeList: [
{
name: "",
......@@ -448,7 +428,9 @@ export default {
type: "",
startShow: false,
endShow: false,
// 活动描述
message: "",
// 活动图片
fileList: [],
pTime: new Date(),
confirmTime: new Date()
......@@ -459,7 +441,49 @@ export default {
// console.log(val);
},
handleCreate() {
this.$router.push('/createSuccess');
console.log("创建活动");
// console.log(this.basicInfo);
// console.log(this.LuckyDraw);
// console.log(this.prizeList);
// console.log(this.message);
// console.log(this.fileList);
let params_prizeList = [];
this.prizeList.forEach(p => {
let temp = {};
temp.prizeName = p.name;
if (p.type == 1) {
temp.prizeType = 2;
} else if (p.type === 2) {
temp.prizeType = 3;
}
temp.startTime = p.startTime1;
temp.endTime = p.endTime1;
temp.quantity = p.prize;
temp.limitReceive = p.limit;
params_prizeList.push(temp);
});
let params = {
activityInfo: {
activityName: this.basicInfo.title,
activityType: "wheel",
startTime: this.basicInfo.startTime1,
endTime: this.basicInfo.endTime1,
joinLimit: this.LuckyDraw.number,
winLimit: this.LuckyDraw.winningNumber,
isAdd: this.LuckyDraw.addNumber ? 1 : 0,
addLimit: this.LuckyDraw.addNumber
},
activityPrizes: params_prizeList
};
console.log(params);
API_Active.createActive(params).then(res => {
Toast.success('创建成功');
setTimeout(() => {
this.$router.push('/createSuccess');
}, 200);
});
},
startTimeChange(e) {
let startTimeArr = e.getValues();
......@@ -467,10 +491,9 @@ export default {
},
startTimeChange2(e, index) {
console.log(111);
this.prizeList[index].startTime1 = this.timeFormat(e);
console.log(this.prizeList[index].startTime1,"2222");
console.log(this.prizeList[index].startTime1, "2222");
},
////////
handlePSTime(index) {
......@@ -502,17 +525,17 @@ export default {
this.prizeList[index].endTime1 = this.timeFormat(e);
},
///点击确定不修改处理
handleStartTime(e,index) {
console.log(e,"e");
this.prizeList[index].startTime1 = this.timeFormat(e)
this.prizeList[index].startShow = false
handleStartTime(e, index) {
console.log(e, "e");
this.prizeList[index].startTime1 = this.timeFormat(e);
this.prizeList[index].startShow = false;
},
handleEndTime(e,index) {
console.log(e,"e");
this.prizeList[index].endTime1 = this.timeFormat(e)
this.prizeList[index].endShow = false
handleEndTime(e, index) {
console.log(e, "e");
this.prizeList[index].endTime1 = this.timeFormat(e);
this.prizeList[index].endShow = false;
},
//////
handlePETime(index) {
......@@ -611,7 +634,8 @@ export default {
<style></style>
<style scoped>
.l-yh,.r-yh {
.l-yh,
.r-yh {
width: 55%;
display: flex;
align-items: center;
......@@ -800,7 +824,7 @@ export default {
.container {
.cs {
.van-cell__value {
flex: 2
flex: 2;
}
}
}
......
wx_application/src/views/active/createSuccess.vue
View file @ e50970da
......@@ -13,9 +13,14 @@
</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>
<template v-if="step === 1">
<van-button type="info" @click="saveNewTemplate">保存为新的模板</van-button>
<van-button type="info" @click="$router.push('/ActTemplate')">完成</van-button>
</template>
<template v-if="step === 2">
<van-button type="info" @click="$router.push('/ActTemplate')">取消</van-button>
<van-button type="info">完成</van-button>
</template>
</div>
</div>
</div>
......
wx_application/src/views/case/caseEdit.vue 0 → 100644
View file @ e50970da
<template>
<div id="case-edit">
<div class="operation-btn">
<div>取消</div>
<div>预览</div>
<div>发布</div>
</div>
<p>开发中...</p>
</div>
</template>
<script>
export default {
name: 'case-edit',
components: {},
data() {
return {
}
}
}
</script>
<style lang="scss">
#case-edit {
.operation-btn {
display: flex;
justify-content: space-between;
width: 100%;
padding: 14px;
font-size: 18px;
}
}
</style>
wx_application/src/views/case/index.vue
View file @ e50970da
<template>
<div class="container">
<div class="kj">
<div class="title">热门案例</div>
<div class="ct al" @click="handleDetail">
<div class="ck">查看详情</div>
</div>
<div class="list">
<van-swipe-cell v-for="item in caseList" :key="item.id">
<div class="kj">
<div class="title">{{ item.title }}</div>
<div class="ct al" @click="handleDetail(item.id)">
<div class="ck">查看详情</div>
</div>
</div>
<div slot="right">
<van-button square type="danger" text="删除" @click="handleDelete" />
</div>
</van-swipe-cell>
</div>
<div class="kj" @click="handleDetail">
<div class="title">技巧</div>
<div class="ct jq">
<div class="ck">查看详情</div>
</div>
</div>
<div class="kj last" @click="handleDetail">
<div class="title">服务</div>
<div class="ct fw">
<div class="ck">查看详情</div>
</div>
<div class="add-btn" @click="$router.push('/caseEdit')">
<img src="../../../public/img/add.png" alt="add" />
</div>
<div class="main-menuBar">
<div class="menuBar-menu" @click="menuBarClick('MainSale')">
......@@ -44,10 +42,25 @@
</template>
<script>
import { getCaseList } from '@/api/test/active'
import { getCaseList } from "@/api/test/active";
import { Dialog } from "vant";
export default {
data() {
return {
caseList: [
{
id: 1,
title: "店主这样使用微信引流，门店营业额竟然直接涨了一倍"
},
{
id: 2,
title: "微信加了很多顾客，但是商品卖不出去，怎么办？"
},
{
id: 3,
title: "技巧｜手把手教你做微信顾客群，店主试过，营业额涨了一倍"
}
],
// 图标
menuBarInfo: {
list: {
......@@ -87,11 +100,25 @@ export default {
},
created() {
this.checkNowMenuBar();
this.getList()
this.getList();
},
methods: {
handleDelete() {
console.log("删除");
Dialog.alert({
title: "是否真的要删除此文章？",
message: "文章删除后将从用户的文章列表消失且不可恢复。",
showCancelButton: true
})
.then(() => {
// on close
})
.catch(() => {
// on cancel
});
},
getList() {
/* let data = {
/* let data = {
}
getCaseList(data).then( res => {
......@@ -99,9 +126,9 @@ export default {
}) */
},
handleDetail() {
this.$router.push({
path:'caseDetail'
})
this.$router.push({
path: "caseDetail"
});
},
// 导航
checkNowMenuBar() {
......@@ -126,6 +153,16 @@ export default {
</script>
<style scoped>
.add-btn {
position: fixed;
bottom: 75px;
right: 20px;
z-index: 10;
width: 60px;
}
.add-btn img {
width: 100%;
}
.kj {
width: 100%;
height: 229px;
......@@ -137,6 +174,10 @@ export default {
padding: 16px;
}
.title {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 14px;
font-weight: bold;
color: rgba(45, 71, 106, 1);
......@@ -206,8 +247,21 @@ export default {
.last {
margin-bottom: 80px;
}
.al,.fw,.jq {
background:url(../../../public/img/cswiper.png)no-repeat;
.al,
.fw,
.jq {
background: url(../../../public/img/cswiper.png) no-repeat;
background-size: cover;
}
</style>
<style lang="scss">
.container {
.van-swipe-cell__right > div {
height: 100%;
}
.van-button {
height: 100%;
}
}
</style>
\ No newline at end of file
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