Skip to content

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

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

parent d95a67b0
Expand all 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/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