持续集成分支
This commit is contained in:
aixianling
775
library/project/activeAnalysis/AppLuckyDraw/AppLuckyDraw.vue
Normal file
775
library/project/activeAnalysis/AppLuckyDraw/AppLuckyDraw.vue
Normal file
@@ -0,0 +1,775 @@
|
||||
<template>
|
||||
<div class="AppLuckyDraw">
|
||||
<div class="header-bg">
|
||||
<img src="./img/header-bg.png" alt="" class="header-bg-img">
|
||||
<div class="share-btn" @click="share">分享活动</div>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="title">
|
||||
<img src="./img/title-bg.png" alt="">
|
||||
<p>打卡活动</p>
|
||||
</div>
|
||||
<p class=" text-line mar-b0">新年伊始，为进一步鼓励全盟各级各单位干部职工积极使用企业微信（政务版）进行办公，盟委网信办携企业微信团队开展“新年送福利、活跃抽大奖”活动。</p>
|
||||
</div>
|
||||
<div class="box-content pad-lf18">
|
||||
<div class="title">
|
||||
<img src="./img/title-bg.png" alt="">
|
||||
<p>打卡进度</p>
|
||||
</div>
|
||||
<p class="count-text">当前已打卡<span>{{activeInfo.clockCount}}</span>天</p>
|
||||
<div class="flex-img">
|
||||
<div class="flex-img-item">
|
||||
<div v-if="activeInfo.clockCount >= 1">抽奖<br/>1次</div>
|
||||
<div v-else>解锁<br/>抽奖</div>
|
||||
</div>
|
||||
<div class="flex-img-item">
|
||||
<div v-if="activeInfo.clockCount >= 5">抽奖<br/>1次</div>
|
||||
<div v-else>解锁<br/>抽奖</div>
|
||||
</div>
|
||||
<div class="flex-img-item">
|
||||
<div v-if="activeInfo.clockCount >= 10">抽奖<br/>1次</div>
|
||||
<div v-else>解锁<br/>抽奖</div>
|
||||
</div>
|
||||
<div class="flex-img-item">
|
||||
<div v-if="activeInfo.clockCount >= 15">抽奖<br/>1次</div>
|
||||
<div v-else>解锁<br/>抽奖</div>
|
||||
</div>
|
||||
<div class="flex-img-item">
|
||||
<div v-if="activeInfo.clockCount >= 20">抽奖<br/>1次</div>
|
||||
<div v-else>解锁<br/>抽奖</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="count-line">
|
||||
<div class="line-item" v-for="(item, index) in 20" :key="index" :class="activeInfo.clockCount > index ? 'active' : ''"></div>
|
||||
</div>
|
||||
<div class="flex-day">
|
||||
<div>1天</div>
|
||||
<div>5天</div>
|
||||
<div>10天</div>
|
||||
<div>15天</div>
|
||||
<div>20天</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-content" :class="{'pad-b48' : !awardedList.length , 'pad-b144' : awardedList.length >= 3 , 'pad-b112' : awardedList.length == 2 , 'pad-b80' : awardedList.length == 1}">
|
||||
<div class="title">
|
||||
<img src="./img/title-bg.png" alt="">
|
||||
<p>大转盘</p>
|
||||
</div>
|
||||
<div class="turntable-content">
|
||||
<view :animation="animationData" class="turntable">
|
||||
<view v-for="(item, index) in activeInfo.prizes" :key="index" class="sector-item">
|
||||
<view class="sector" :style=" 'transform: rotate(' + (index * (360 / activeInfo.prizes.length) - 0.5 * (360 / activeInfo.prizes.length)) + 'deg)'">
|
||||
<view class="inner" :style=" 'transform: rotate(' + 360 / activeInfo.prizes.length +'deg)'"></view>
|
||||
</view>
|
||||
<div :style=" 'transform: rotate(' + index * (360 / activeInfo.prizes.length) + 'deg) ;' " class="cell">
|
||||
<p>{{ item.name }}</p>
|
||||
<p v-if="item.belongRound > activeInfo.roundNumber">未开启</p>
|
||||
<img :src="item.picture" alt="" class="cell-img" :class="item.belongRound > activeInfo.roundNumber ? 'clock-active' : ''" />
|
||||
<img src="https://cdn.cunwuyun.cn/xlgl/lock.png" alt="" class="clock-img" v-if="item.belongRound > activeInfo.roundNumber">
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
<img src="./img/pointer.png" alt="" class="point-img">
|
||||
<div class="turntable-btn" @click="raffle">立即抽奖</div>
|
||||
<p class="turntable-count">剩余<span> {{activeInfo.allowRaffle ? 1 : 0}} </span>次抽奖机会</p>
|
||||
</div>
|
||||
<div class="lucky-list" v-if="awardedList.length">
|
||||
<u-notice-bar mode="vertical" :is-circular="false" :list="luckyList" :volume-icon="false" bg-color="#FFDEAC" padding="0rpx 0rpx" border-radius="60rpx"></u-notice-bar>
|
||||
<u-notice-bar mode="vertical" :is-circular="false" :list="luckyList2" :volume-icon="false" bg-color="#FFDEAC" padding="0rpx 0rpx" border-radius="60rpx" v-if="luckyList2"></u-notice-bar>
|
||||
<u-notice-bar mode="vertical" :is-circular="false" :list="luckyList3" :volume-icon="false" bg-color="#FFDEAC" padding="0rpx 0rpx" border-radius="60rpx" v-if="luckyList3"></u-notice-bar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="title">
|
||||
<img src="./img/title-bg.png" alt="">
|
||||
<p>活动时间</p>
|
||||
</div>
|
||||
<div class="text-line mar-b0">
|
||||
<p>活动时间：2023年2月7日~2023年3月8日 </p>
|
||||
<p>兑换时间：预计3月9日起</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="title">
|
||||
<img src="./img/title-bg.png" alt="">
|
||||
<p>活动规则</p>
|
||||
</div>
|
||||
<div class="title-text">奖品内容</div>
|
||||
<div class="text-line">
|
||||
<p>企业微信笔记本礼盒，腾讯Q宠公仔，腾讯Q宠手办盲盒，终极大奖(华为P50手机，华为matePad11平板电脑，华为watch GT3智能手表)。</p>
|
||||
</div>
|
||||
<div class="title-text">参与方式</div>
|
||||
<div class="text-line">
|
||||
<p>
|
||||
打开企业微信工作台“抽奖活动”应用,进入活动主页点击右下角立即参与按钮,选择多样打卡方式(每日至少2种),
|
||||
满足打卡条件即可获取抽奖机会,首次分享活动给企业微信内三位同事,同事打开链接,即可获取额外一次抽奖机会。
|
||||
每日打卡状态在次日16:30通知。
|
||||
</p>
|
||||
</div>
|
||||
<div class="title-text">打卡方式</div>
|
||||
<div class="text-line">
|
||||
<p>每天使用企业微信与同事沟通交流，经常打开并使用工作台中的各种应用。</p>
|
||||
<p>①每日与3位同事互相发消息并至少在1个群聊中发言。</p>
|
||||
<p>②阅读【党政云助手】应用中的文章，学习企业微信使用相关技巧。</p>
|
||||
<p>③阅读【行业资讯】应用中的文章，超过10分钟。</p>
|
||||
<p>④点击工作台中任意应用如会议，公告，审批，汇报等应用进入使用。</p>
|
||||
</div>
|
||||
<div class="title-text">抽奖规则</div>
|
||||
<div class="text-line">
|
||||
<img src="./img/content-img.png" alt="">
|
||||
<p>注：终极大奖(华为P50手机，华为matePad11平板电脑，华为watch GT3智能手表)仅对<span style="color:#DC0000;font-weight:500;">活跃满20天</span>的用户开放。抽奖机会要在下一次活跃达标之前使用，否则将会被作废。</p>
|
||||
</div>
|
||||
<div class="title-text">领取方式</div>
|
||||
<div class="text-line mar-b0">
|
||||
<p>2023年3月9日起根据活动方通知地点领取，一切解释权属企业微信团队，有任何疑问请联系“锡林郭勒盟党政云平台”内“技术支持”分组的工作人员。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-content mar-b48">
|
||||
<div class="title">
|
||||
<img src="./img/title-bg.png" alt="">
|
||||
<p>助攻小插件</p>
|
||||
</div>
|
||||
<img :src="activeInfo.wxQrcode" alt="" class="qrcode-img">
|
||||
<div class="text-line mar-b0">
|
||||
<p class="text-center">长按上方二维码保存至手机，打开微信扫一扫，关注微信插件，以免忘记打卡，仅用于接收提醒，不计入打卡。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="share-bottom-btn" @click="share">分享活动</div>
|
||||
<img src="./img/sign-btn.png" alt="" class="sign-btn" v-if="!activeInfo.signupTime" @click="signUp">
|
||||
|
||||
<u-modal v-model="showPhoneMask" ref="uModal" :show-cancel-button="true" :async-close="true" @confirm="bindPhoneConfirm" @cancel="cancel" class="phone-mask">
|
||||
<div class="item">
|
||||
<span class="label"><span class="tips">*</span>手机号</span>
|
||||
<div class="value">
|
||||
<u-input type="tel" placeholder="请填写手机号" v-model="phone" input-align="right" placeholder-style="color:#999;font-size:15px;" height="42" :maxlength="11" :clearable="false" />
|
||||
</div>
|
||||
</div>
|
||||
</u-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {mapActions, mapState} from 'vuex'
|
||||
export default {
|
||||
name: "AppLuckyDraw",
|
||||
appName: "幸运抽奖",
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
deg: 0, // 初始化角度
|
||||
duration: 2000, //动画时长
|
||||
awardNumber: 1, // 中奖区域 从1开始
|
||||
isStart: false, //防止多次触发动画
|
||||
animationData: {}, //动画对象
|
||||
showPhoneMask: false,
|
||||
phone: '',
|
||||
activityId: '',
|
||||
friendId: '',
|
||||
activeInfo: {},
|
||||
awardedList: [],
|
||||
luckyList: [],
|
||||
luckyList2: [],
|
||||
luckyList3: [],
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
this.animation = uni.createAnimation({
|
||||
duration: this.duration,
|
||||
timingFunction: "ease-in-out", //旋转模式
|
||||
});
|
||||
this.activityId = option.activityId
|
||||
this.friendId = option.friendId || ''
|
||||
// this.activityId = '75a4c4493de54f9fb63868817079c89c'
|
||||
this.getDetail()
|
||||
this.getAwardedList()
|
||||
},
|
||||
onShow() {
|
||||
wx.hideOptionMenu();
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['injectJWeixin', 'wxInvoke', 'agentSign']),
|
||||
//封装动画旋转整数圈的方法，只需接受（角度，时间）即可开始旋转动画
|
||||
rotate(deg) {
|
||||
this.animation.rotate(deg).step().rotate((this.awardNumber - 1) * -(360 / this.activeInfo.prizes.length)).step({
|
||||
duration: 0,
|
||||
timingFunction: "linear",
|
||||
});
|
||||
this.animationData = this.animation.export();
|
||||
},
|
||||
//开始旋转
|
||||
onStart() {
|
||||
//提前将要转的角度算好，再传入要转的时长即可转到自己想要的角度
|
||||
this.rotate( 360 + (360 - (this.awardNumber - 1) * (360 / this.activeInfo.prizes.length)),this.duration);
|
||||
},
|
||||
bindPhoneConfirm() {
|
||||
this.$refs.uModal.clearLoading()
|
||||
if(!this.phone) {
|
||||
return this.$u.toast('请输入手机号')
|
||||
}
|
||||
let regTel = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
|
||||
if (!regTel.test(this.phone)) {
|
||||
return this.$u.toast('请输入正确的手机号')
|
||||
}
|
||||
|
||||
this.$http.post(`/app/appmarketingactivityinfo/bindPhone?phone=${this.phone}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.showPhoneMask = false
|
||||
this.getDetail()
|
||||
this.$u.toast('绑定成功')
|
||||
this.$http.post(`/app/appmarketingactivityinfo/signup?activityId=${this.activityId}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$u.toast('活动报名成功！')
|
||||
this.getDetail()
|
||||
}
|
||||
}).catch((err) => {
|
||||
this.$u.toast(err)
|
||||
})
|
||||
}
|
||||
}).catch((err) => {
|
||||
this.$u.toast(err)
|
||||
})
|
||||
},
|
||||
cancel() {
|
||||
this.phone = ''
|
||||
this.showPhoneMask = false
|
||||
},
|
||||
getDetail() {
|
||||
this.$http.post(`/app/appmarketingactivityinfo/queryDetailByIdWXCP?activityId=${this.activityId}&friendId=${this.friendId}`, null, {alwaysReturn: true}).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.activeInfo = {...res.data}
|
||||
}else if(res.code == 401) {
|
||||
this.$confirm('您尚未登录，请重新登录').then(() => {
|
||||
this.$store.commit('goAuth')
|
||||
})
|
||||
}
|
||||
}).catch((err) => {
|
||||
this.$u.toast(err)
|
||||
})
|
||||
},
|
||||
//抽奖
|
||||
raffle() {
|
||||
if(!this.activeInfo.vaildPhone) {
|
||||
return this.showPhoneMask = true
|
||||
}
|
||||
if (this.isStart) return
|
||||
this.isStart = true
|
||||
|
||||
this.$http.post(`/app/appmarketingactivityinfo/raffle?activityId=${this.activityId}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
console.log(456)
|
||||
this.awardNumber = res.data
|
||||
this.onStart()
|
||||
setTimeout(() => {
|
||||
this.$u.toast(this.activeInfo.prizes[this.awardNumber-1].defaultPrize == 1 ? `很遗憾您抽中了${this.activeInfo.prizes[this.awardNumber-1].name}` : `恭喜抽中${this.activeInfo.prizes[this.awardNumber-1].name}!`)
|
||||
this.getDetail()
|
||||
this.getAwardedList()
|
||||
this.isStart = false
|
||||
}, 2000)
|
||||
}
|
||||
if (res.code == 1) {
|
||||
this.isStart = false
|
||||
this.$u.toast(res.msg)
|
||||
}
|
||||
}).catch((err) => {
|
||||
this.isStart = false
|
||||
this.$u.toast(err)
|
||||
})
|
||||
},
|
||||
//活动报名
|
||||
signUp() {
|
||||
if(!this.activeInfo.vaildPhone) {
|
||||
return this.showPhoneMask = true
|
||||
}
|
||||
this.$http.post(`/app/appmarketingactivityinfo/signup?activityId=${this.activityId}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$u.toast('活动报名成功！')
|
||||
this.getDetail()
|
||||
}
|
||||
}).catch((err) => {
|
||||
this.$u.toast(err)
|
||||
})
|
||||
},
|
||||
getAwardedList() {
|
||||
this.awardedList = []
|
||||
this.$http.post(`/app/appmarketingactivityinfo/awardedList?activityId=${this.activityId}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
if(res.data.length) {
|
||||
var textList = []
|
||||
res.data.map((item, index) => {
|
||||
textList[index] = `${res.data[index].name} ${this.geTel(res.data[index].phone)}获得${res.data[index].prizeName}`
|
||||
})
|
||||
if(textList.length > 2) {
|
||||
var num = Math.floor(textList.length/3)
|
||||
this.luckyList = textList.slice(0, num)
|
||||
this.luckyList2 = textList.slice(num, num*2)
|
||||
this.luckyList3 = textList.slice(num*2, num*3)
|
||||
}else {
|
||||
this.luckyList = textList
|
||||
}
|
||||
this.awardedList = textList
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
geTel(tel){
|
||||
var reg = /^(\d{3})\d{4}(\d{4})$/;
|
||||
return tel.replace(reg, "$1****$2");
|
||||
},
|
||||
share() {
|
||||
this.agentSign().then((res) => {
|
||||
this.injectJWeixin(['shareAppMessage', 'shareWechatMessage']).then(() => {
|
||||
wx.invoke("shareAppMessage", {
|
||||
title: '幸运抽奖',
|
||||
desc: '新年伊始，企业微信团队为创建安全和谐的网络办公环境，诚邀大家使用企业微信参与打卡活动！',
|
||||
link: location.origin+`/apps/AppLuckyDraw/AppLuckyDraw?activityId=${this.activityId}&friendId=${this.user.id}`,
|
||||
imgUrl: 'https://cdn.cunwuyun.cn/xlgl/header-bg.png',
|
||||
}, function(res) {
|
||||
});
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
.AppLuckyDraw {
|
||||
// position: relative;
|
||||
width: 100%;
|
||||
background-color: #F30000;
|
||||
padding-bottom: 64px;
|
||||
// overflow: hidden;
|
||||
.header-bg {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-bottom: 44px;
|
||||
.header-bg-img {
|
||||
width: 100%;
|
||||
}
|
||||
.share-btn {
|
||||
width: 200px;
|
||||
padding-left: 64px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
font-family: PingFangSC-SNaNpxibold;
|
||||
font-weight: 600;
|
||||
font-size: 28px;
|
||||
color: #FFE6C3;
|
||||
text-shadow: 0 2px 4px rgba(173,0,0,0.80);
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
right: 0;
|
||||
background-image: url('./img/share-btn.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
}
|
||||
.box-content {
|
||||
width: 706px;
|
||||
background: #FFE9C7;
|
||||
border: 4px solid #FFEBA0;
|
||||
box-shadow: inset 0 0 14px 4px rgba(255,113,20,0.60);
|
||||
border-radius: 44px;
|
||||
box-sizing: border-box;
|
||||
margin: 0 0 44px 22px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
.box-content {
|
||||
width: calc(100% - 48px);
|
||||
padding: 64px 32px 48px;
|
||||
background: #FFE9C7;
|
||||
border: 4px solid #FFEBA0;
|
||||
box-shadow: inset 0 0 16px 4px rgba(255,113,20,0.60);
|
||||
border-radius: 48px;
|
||||
margin: 0 0 80px 24px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
background: #FFE9C7;
|
||||
.title {
|
||||
width: 240px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
left: 50%;
|
||||
margin-left: -120px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
p {
|
||||
width: 240px;
|
||||
line-height: 80px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-family: PingFangSC-SNaNpxibold;
|
||||
font-weight: 600;
|
||||
font-size: 32px;
|
||||
color: #FFE6C3;
|
||||
text-shadow: 0 2px 4px rgba(173,0,0,0.80);
|
||||
}
|
||||
}
|
||||
.text-line {
|
||||
width: 100%;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
color: #E55500;
|
||||
margin-bottom: 32px;
|
||||
p{
|
||||
line-height: 44px;
|
||||
word-break: break-all;
|
||||
}
|
||||
img {
|
||||
width: 636px;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.title-text {
|
||||
line-height: 48px;
|
||||
font-family: PingFangSC-SNaNpxibold;
|
||||
font-weight: 600;
|
||||
font-size: 34px;
|
||||
color: #DC0000;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.qrcode-img {
|
||||
display: inherit;
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
margin: 0 auto 32px;
|
||||
}
|
||||
.count-text {
|
||||
line-height: 40px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
color: #E55500;
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
span {
|
||||
color: #1BAFB3;
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
.flex-img {
|
||||
padding: 0 0 20px;
|
||||
height: 88px;
|
||||
position: relative;
|
||||
.flex-img-item {
|
||||
div {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
height: 88px;
|
||||
text-align: center;
|
||||
line-height: 28px;
|
||||
padding-top: 8px;
|
||||
background-image: url('./img/count-bg.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
color: #FF7311;
|
||||
}
|
||||
}
|
||||
.flex-img-item:nth-of-type(1) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.flex-img-item:nth-of-type(2) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: calc(25% - 64px);
|
||||
}
|
||||
.flex-img-item:nth-of-type(3) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: calc(50% - 64px);
|
||||
}
|
||||
.flex-img-item:nth-of-type(4) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: calc(75% - 64px);
|
||||
}
|
||||
.flex-img-item:nth-of-type(5) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
.count-line {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
.line-item {
|
||||
flex: 1;
|
||||
height: 24px;
|
||||
background-color: #F5BE7B;
|
||||
margin-right: 2px;
|
||||
}
|
||||
.line-item:nth-of-type(1){
|
||||
border-radius: 12px 0 0 12px;
|
||||
}
|
||||
.line-item:nth-last-of-type(1) {
|
||||
border-radius: 0 12px 12px 0;
|
||||
}
|
||||
.active {
|
||||
background-image: linear-gradient(179deg, #FF961F 0%, #FF320F 100%);
|
||||
}
|
||||
}
|
||||
.flex-day {
|
||||
position: relative;
|
||||
padding: 0 16px;
|
||||
div {
|
||||
width: 140px;
|
||||
line-height: 36px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 26px;
|
||||
color: #E55500;
|
||||
}
|
||||
|
||||
div:nth-of-type(1) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
div:nth-of-type(2) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: calc(25% - 64px);
|
||||
}
|
||||
div:nth-of-type(3) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: calc(50% - 64px);
|
||||
}
|
||||
div:nth-of-type(4) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: calc(75% - 64px);
|
||||
}
|
||||
div:nth-of-type(5) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.turntable-content {
|
||||
width: 696px;
|
||||
height: 1020px;
|
||||
background-image: url('./img/turntable-bg.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
.turntable-btn {
|
||||
width: 296px;
|
||||
height: 118px;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
background-image: url('./img/active-btn-bg.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
font-family: PingFangSC-SNaNpxibold;
|
||||
font-weight: 600;
|
||||
font-size: 40px;
|
||||
color: #DC0000;
|
||||
position: absolute;
|
||||
bottom: 228px;
|
||||
left: 50%;
|
||||
margin-left: -148px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.turntable-count {
|
||||
position: absolute;
|
||||
bottom: 182px;
|
||||
left: 50%;
|
||||
margin-left: -148px;
|
||||
width: 296px;
|
||||
text-align: center;
|
||||
color: rgba(255, 246, 240, 1);
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
span {
|
||||
color: #43FFE7;
|
||||
}
|
||||
}
|
||||
.turntable-btn:active{
|
||||
transform: scale(0.95);
|
||||
}
|
||||
.turntable {
|
||||
position: relative;
|
||||
top: 73px;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
height: 538px;
|
||||
width: 538px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
.cell {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin: 0 0 0 -60px;
|
||||
transform-origin: 60px 269px;
|
||||
font-size: 20px;
|
||||
padding-top: 22px;
|
||||
box-sizing: border-box;
|
||||
color: #E55500;
|
||||
}
|
||||
.cell-img {
|
||||
width: 80px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.clock-active {
|
||||
opacity: .3;
|
||||
}
|
||||
.clock-img {
|
||||
width: 80px;
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 50%;
|
||||
margin-left: -40px;
|
||||
}
|
||||
.sector {
|
||||
width: 538px;
|
||||
height: 538px;
|
||||
position: absolute;
|
||||
clip: rect(0 538px 538px 269px);
|
||||
overflow: hidden;
|
||||
}
|
||||
.inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
clip: rect(0 269px 538px 0);
|
||||
transform: rotate(60deg);
|
||||
border-radius: 50%;
|
||||
background-color: #FFE3B8;
|
||||
border: 20px solid #FE221A;
|
||||
}
|
||||
.sector-item:nth-of-type(2n) .inner{
|
||||
background-color: #FFF5E2;
|
||||
border: 20px solid #F7BB86;
|
||||
}
|
||||
}
|
||||
.point-img {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
top: 250px;
|
||||
left: 50%;
|
||||
margin-left: -56px;
|
||||
}
|
||||
}
|
||||
.lucky-list {
|
||||
width: calc(100% - 64px);
|
||||
background: #FFDEAC;
|
||||
border: 2px solid #FFAE32;
|
||||
border-radius: 28px;
|
||||
padding: 22px;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 986px;
|
||||
left: 32px;
|
||||
z-index: 99;
|
||||
}
|
||||
.mar-b0 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.mar-b48 {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
.pad-lf18 {
|
||||
padding: 64px 18px 48px;
|
||||
}
|
||||
.pad-b144 {
|
||||
padding: 24px 0 144px;
|
||||
}
|
||||
.pad-b112 {
|
||||
padding: 24px 0 112px;
|
||||
}
|
||||
.pad-b80 {
|
||||
padding: 24px 0 80px;
|
||||
}
|
||||
.pad-b48{
|
||||
padding: 24px 0 48px;
|
||||
}
|
||||
.share-bottom-btn {
|
||||
width: calc(100% - 24px);
|
||||
margin-left: 12px;
|
||||
height: 120px;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
font-family: PingFangSC-SNaNpxibold;
|
||||
font-weight: 600;
|
||||
font-size: 40px;
|
||||
color: #DC0000;
|
||||
background-image: url('./img/share-btn-bg.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sign-btn {
|
||||
position: fixed;
|
||||
bottom: 200px;
|
||||
right: 24px;
|
||||
width: 160px;
|
||||
z-index: 999;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.phone-mask {
|
||||
.item{
|
||||
width: calc(100% - 32px);
|
||||
padding: 20px 32px 32px 16px;
|
||||
background: #FFFFFF;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 30px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
line-height: 48px;
|
||||
box-sizing: border-box;
|
||||
margin: 0 0 0 16px;
|
||||
.label {
|
||||
width: 150px;
|
||||
}
|
||||
.color-999{
|
||||
color: #999;
|
||||
}
|
||||
.value{
|
||||
color: #333;
|
||||
.u-icon{
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
.tips{
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #FF4466;
|
||||
line-height: 44px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
library/project/activeAnalysis/AppLuckyDraw/img/content-img.png
Normal file
BIN
library/project/activeAnalysis/AppLuckyDraw/img/content-img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
BIN
library/project/activeAnalysis/AppLuckyDraw/img/count-bg.png
Normal file
BIN
library/project/activeAnalysis/AppLuckyDraw/img/count-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
BIN
library/project/activeAnalysis/AppLuckyDraw/img/header-bg.png
Normal file
BIN
library/project/activeAnalysis/AppLuckyDraw/img/header-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 293 KiB |
BIN
library/project/activeAnalysis/AppLuckyDraw/img/pointer.png
Normal file
BIN
library/project/activeAnalysis/AppLuckyDraw/img/pointer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
library/project/activeAnalysis/AppLuckyDraw/img/qrcode-img.png
Normal file
BIN
library/project/activeAnalysis/AppLuckyDraw/img/qrcode-img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
BIN
library/project/activeAnalysis/AppLuckyDraw/img/share-btn-bg.png
Normal file
BIN
library/project/activeAnalysis/AppLuckyDraw/img/share-btn-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
library/project/activeAnalysis/AppLuckyDraw/img/share-btn.png
Normal file
BIN
library/project/activeAnalysis/AppLuckyDraw/img/share-btn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
library/project/activeAnalysis/AppLuckyDraw/img/sign-btn.png
Normal file
BIN
library/project/activeAnalysis/AppLuckyDraw/img/sign-btn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
library/project/activeAnalysis/AppLuckyDraw/img/title-bg.png
Normal file
BIN
library/project/activeAnalysis/AppLuckyDraw/img/title-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
BIN
library/project/activeAnalysis/AppLuckyDraw/img/turntable-bg.png
Normal file
BIN
library/project/activeAnalysis/AppLuckyDraw/img/turntable-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 119 KiB |
@@ -0,0 +1,314 @@
|
||||
<template>
|
||||
<div class="AppWechatActivities">
|
||||
<div v-if="tabIndex == 1">
|
||||
<template v-if="datas.length > 0">
|
||||
<AiCard v-for="(item, i) in datas" :key="i" @click.native="toDetail(item)">
|
||||
<template #custom>
|
||||
<div class="left">
|
||||
<div class="titles">{{ item.title }}</div>
|
||||
<div class="times">
|
||||
<span class="timesCont">{{ item.createTime }}</span>
|
||||
</div>
|
||||
<div class="areaName" v-if="item.areaName || item.address">{{ item.areaName }}{{ item.address }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</AiCard>
|
||||
</template>
|
||||
<AiEmpty description="暂无数据" v-else></AiEmpty>
|
||||
</div>
|
||||
<div class="calendar" v-else>
|
||||
<div class="month-item">
|
||||
<div class="title" @click="showTime=true">{{ym}}<u-icon name="arrow-down" color="#666" size="24" style="margin-left: 4px"></u-icon></div>
|
||||
<div class="day-list">
|
||||
<!-- <div class="week-item">
|
||||
<div v-for="(item, index) in weekList" :key="index">{{item}}</div>
|
||||
</div> -->
|
||||
<div class="day-item" v-for="(item, index) in dayList" :key="index">
|
||||
<div>{{item.day}}</div>
|
||||
<u-icon name="checkbox-mark" color="#5297FF" v-if="item.status == '使用' || item.status == '打开并活跃'"></u-icon>
|
||||
<u-icon name="close" color="#ff4466" v-else></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line-h100"></div>
|
||||
<div class="tabs">
|
||||
<div class="item" v-for="(item, index) in tabs" :key="index" @click="change(index)">
|
||||
<u-icon :name="item.icon" :color="tabIndex == index ? '#3975C6' : '#999'" size="30"></u-icon>
|
||||
<p :class="tabIndex == index ? 'active' : ''">{{item.name}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<u-modal v-model="show" :show-cancel-button="true" @confirm="bindPhoneConfirm" @cancel="cancel">
|
||||
<div class="item">
|
||||
<span class="label"><span class="tips">*</span>手机号</span>
|
||||
<div class="value">
|
||||
<u-input type="tel" placeholder="请填写手机号" v-model="phone" input-align="right" placeholder-style="color:#999;font-size:15px;" height="42" :maxlength="11" :clearable="false" />
|
||||
</div>
|
||||
</div>
|
||||
</u-modal>
|
||||
<u-picker v-model="showTime" mode="time" :params="params" @confirm="confirm" @cancel="show=false"></u-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'AppWechatActivities',
|
||||
appName: '运营活动',
|
||||
data() {
|
||||
return {
|
||||
datas: [],
|
||||
tabs: [{ name: '打卡', icon: 'list'}, { name: '活动列表', icon: 'home-fill'}],
|
||||
currentTabs: 0,
|
||||
current: 1,
|
||||
size: 6,
|
||||
total: '',
|
||||
show: false,
|
||||
phone: '',
|
||||
tabIndex: 0,
|
||||
showTime: false,
|
||||
params: {
|
||||
year: true,
|
||||
month: true,
|
||||
day: false,
|
||||
hour: false,
|
||||
minute: false,
|
||||
second: false
|
||||
},
|
||||
ym: '',
|
||||
dayList: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
const date = new Date();
|
||||
let year = date.getFullYear()
|
||||
let monNum = date.getMonth() + 1
|
||||
let month = monNum < 10 ? `0${monNum}` : monNum
|
||||
this.ym = `${year}-${month}`
|
||||
this.getDayList()
|
||||
},
|
||||
onShow() {
|
||||
document.title = '运营活动'
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
this.tabIndex = e
|
||||
},
|
||||
getList() {
|
||||
console.log(456)
|
||||
this.$http.post('/app/appactivityinfo/listForWX', null, {
|
||||
params: {
|
||||
size: this.size,
|
||||
current: this.current,
|
||||
},
|
||||
}).then((res) => {
|
||||
console.log(res, 123)
|
||||
if (res.code == 0) {
|
||||
this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
|
||||
}
|
||||
}).catch((err) => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
toDetail(item) {
|
||||
uni.navigateTo({ url: `./Detail?id=${item.id}` })
|
||||
},
|
||||
|
||||
bindPhoneConfirm() {
|
||||
if(!this.phone) {
|
||||
return this.$u.toast('请输入手机号')
|
||||
}
|
||||
let regTel = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
|
||||
if (!regTel.test(this.phone)) {
|
||||
return this.$u.toast('请输入正确的手机号')
|
||||
}
|
||||
|
||||
this.$http.post(`/appactivityinfo/bindPhone?phone=${this.phone}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.getUserInfo()
|
||||
this.$u.toast('绑定成功')
|
||||
}
|
||||
})
|
||||
},
|
||||
cancel() {
|
||||
this.phone = ''
|
||||
this.show = false
|
||||
},
|
||||
getUserInfo () {
|
||||
this.$http.post('/api/user/info').then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$store.commit('setUser', res.data)
|
||||
}
|
||||
})
|
||||
},
|
||||
getDayList() {
|
||||
// this.$http.post(`/app/wxuseruselog/listForWX?wxUserId=LiuYe&ym=${this.ym}`).then(res => {
|
||||
this.$http.post(`/app/wxuseruselog/listForWX?wxUserId=${this.user.phone}&ym=${this.ym}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
res.data.map((item) => {
|
||||
item.day = item.ymd.substring(8, 10)
|
||||
})
|
||||
this.dayList = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
confirm(e) {
|
||||
this.ym = `${e.year}-${e.month}`
|
||||
this.getDayList()
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
this.current = this.current + 1
|
||||
this.getList()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
uni-page-body {
|
||||
height: 100%;
|
||||
}
|
||||
.AppWechatActivities {
|
||||
height: 100%;
|
||||
.calendar {
|
||||
background-color: #fff;
|
||||
padding-bottom: 48px;
|
||||
.month-item{
|
||||
.title {
|
||||
line-height: 88px;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
color: #000;
|
||||
}
|
||||
.week-item {
|
||||
div {
|
||||
display: inline-block;
|
||||
width: 107px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
line-height: 44px;
|
||||
}
|
||||
}
|
||||
.day-list {
|
||||
.day-item {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 107px;
|
||||
height: 107px;
|
||||
line-height: 107px;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
}
|
||||
.u-icon {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .AiCard {
|
||||
background: #f3f6f9;
|
||||
.start {
|
||||
background: #fff;
|
||||
padding: 32px;
|
||||
border-radius: 16px;
|
||||
.fill {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
// align-items: center;
|
||||
.left {
|
||||
width: calc(100% - 205px);
|
||||
// background: pink;
|
||||
.titles {
|
||||
margin-bottom: 8px;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
font-size: 30px;
|
||||
line-height: 1.3;
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
.nums {
|
||||
margin-top: 8px;
|
||||
.specialColor {
|
||||
color: #4181ff;
|
||||
}
|
||||
}
|
||||
.times {
|
||||
margin-top: 8px;
|
||||
.timesCont {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.areaName {
|
||||
margin-top: 8px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
img {
|
||||
position: relative;
|
||||
width: 182px;
|
||||
height: 182px;
|
||||
}
|
||||
|
||||
.hints {
|
||||
position: absolute;
|
||||
right: 52px;
|
||||
width: 96px;
|
||||
height: 44px;
|
||||
font-size: 26px;
|
||||
color: #ffffff;
|
||||
line-height: 44px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.line-h100 {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
.item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
.u-icon {
|
||||
margin: 12px 0 8px 0;
|
||||
}
|
||||
p {
|
||||
font-family: PingFangSC-Regular;
|
||||
letter-spacing: 0;
|
||||
line-height: 28px;
|
||||
font-size: 24px;
|
||||
color: #999;
|
||||
}
|
||||
.active {
|
||||
color: #3975C6;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
456
library/project/activeAnalysis/AppWechatActivities/Detail.vue
Normal file
456
library/project/activeAnalysis/AppWechatActivities/Detail.vue
Normal file
@@ -0,0 +1,456 @@
|
||||
<template>
|
||||
<div class="detail">
|
||||
<div class="header-content">
|
||||
<div class="header-top">
|
||||
<img :src="imgUrl" alt="" @click.stop="previewImage()" />
|
||||
</div>
|
||||
<div class="header-middle">
|
||||
<div class="img-title">{{ detail.title }}</div>
|
||||
<div class="cards">
|
||||
<div class="cards-left">发布时间</div>
|
||||
<div class="cards-right">{{ detail.createTime && detail.createTime.substring(0, detail.createTime.length - 9) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-bottom">
|
||||
<div class="content-details">
|
||||
<div v-html="detail.content"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pad-t100"></div>
|
||||
<div class="add-btn" v-if="!detail.mySignUP" @click="signUp">
|
||||
<div>参与活动</div>
|
||||
</div>
|
||||
|
||||
|
||||
<u-modal v-model="show" :show-cancel-button="true" @confirm="bindPhoneConfirm" @cancel="cancel">
|
||||
<div class="item">
|
||||
<span class="label"><span class="tips">*</span>手机号</span>
|
||||
<div class="value">
|
||||
<u-input type="tel" placeholder="请填写手机号" v-model="phone" input-align="right" placeholder-style="color:#999;font-size:15px;" height="42" :maxlength="11" :clearable="false" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="item">
|
||||
<span class="label"><span class="tips">*</span>验证码</span>
|
||||
<div class="value">
|
||||
<u-input type="tel" placeholder="请填写验证码" v-model="form.code" input-align="right" placeholder-style="color:#999;font-size:15px;" height="42" :maxlength="6" :clearable="false" />
|
||||
</div>
|
||||
</div> -->
|
||||
</u-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Detail',
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: '',
|
||||
createUserId: '',
|
||||
detail: {},
|
||||
activeList: [],
|
||||
imgList: [],
|
||||
list: [
|
||||
{
|
||||
name: '活动详情',
|
||||
},
|
||||
{
|
||||
name: '活动动态',
|
||||
},
|
||||
],
|
||||
current: 0,
|
||||
timeEndTime: '',
|
||||
timeEnd: '',
|
||||
timeNow: '',
|
||||
show: false,
|
||||
phone: '',
|
||||
imgUrl: 'https://cdn.cunwuyun.cn/public/16749723482248.png'
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.id = option.id
|
||||
this.createUserId = option.createUserId
|
||||
this.$dict.load(['villageActivityStatus']).then(() => {
|
||||
this.getDetail()
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
document.title = '活动详情'
|
||||
// uni.$on('refresh', () => {
|
||||
// this.getListInit()
|
||||
// })
|
||||
|
||||
uni.$on('updateGetDetail', () => {
|
||||
this.getDetail()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getDetail() {
|
||||
this.$http.post(`/app/appactivityinfo/queryDetailById?id=${this.id}`).then((res) => {
|
||||
if (res?.data) {
|
||||
this.detail = res.data
|
||||
this.timeEnd = new Date(this.detail.endTime).getTime()
|
||||
this.timeNow = new Date().getTime()
|
||||
|
||||
if (this.detail) {
|
||||
if (this.detail.url) {
|
||||
this.detail.url = JSON.parse(res.data.url || '[]')
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
previewImage() {
|
||||
var images = [{url: this.imgUrl}]
|
||||
uni.previewImage({
|
||||
urls: images.map((v) => v.url),
|
||||
current: this.imgUrl,
|
||||
})
|
||||
},
|
||||
signUp() {
|
||||
if(!this.user.phone) {
|
||||
this.show = true
|
||||
}else {
|
||||
this.$http.post(`/app/appactivityinfo/signup?activityId=${this.id}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$u.toast('报名成功')
|
||||
this.getDetail()
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
bindPhoneConfirm() {
|
||||
if(!this.phone) {
|
||||
return this.$u.toast('请输入手机号')
|
||||
}
|
||||
let regTel = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
|
||||
if (!regTel.test(this.phone)) {
|
||||
return this.$u.toast('请输入正确的手机号')
|
||||
}
|
||||
|
||||
this.$http.post(`/appactivityinfo/bindPhone?phone=${this.phone}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.getUserInfo()
|
||||
this.$u.toast('绑定成功')
|
||||
}
|
||||
})
|
||||
},
|
||||
cancel() {
|
||||
this.phone = ''
|
||||
this.show = false
|
||||
},
|
||||
getUserInfo () {
|
||||
this.$http.post('/api/user/info').then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$store.commit('setUser', res.data)
|
||||
}
|
||||
})
|
||||
},
|
||||
toCalendar() {
|
||||
uni.navigateTo({url: './ActiveCalendar'})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.detail {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// background-color: #fff;
|
||||
|
||||
.info-title {
|
||||
padding-left: 32px;
|
||||
line-height: 108px;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
.tab-title {
|
||||
line-height: 108px;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 192px;
|
||||
text-align: center;
|
||||
}
|
||||
.active {
|
||||
color: #3671ee;
|
||||
border-bottom: 4px solid #3671ee;
|
||||
}
|
||||
}
|
||||
.status0 {
|
||||
background: #000;
|
||||
}
|
||||
.status1 {
|
||||
background: #42d784;
|
||||
}
|
||||
.status2 {
|
||||
background: #e4e4e4;
|
||||
}
|
||||
.status3 {
|
||||
background: #1aaaff;
|
||||
}
|
||||
|
||||
.status4,
|
||||
.status5 {
|
||||
background: #e4e4e4;
|
||||
}
|
||||
.header-content {
|
||||
// padding-bottom: 80px;
|
||||
.header-top {
|
||||
width: 100%;
|
||||
height: 440px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.header-middle {
|
||||
padding: 32px 32px 0 32px;
|
||||
|
||||
.img-title {
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.header-middle-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 32px;
|
||||
.left {
|
||||
.left-btn {
|
||||
padding: 4px 8px;
|
||||
border-radius: 8px;
|
||||
|
||||
font-size: 26px;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
vertical-align: text-top;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 2px solid #eee;
|
||||
padding: 36px 0;
|
||||
line-height: 40px;
|
||||
font-size: 28px;
|
||||
|
||||
.cards-left {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.cards-right {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-bottom {
|
||||
// background: #fff;
|
||||
|
||||
.content-details {
|
||||
padding: 32px 32px 130px 32px;
|
||||
.font {
|
||||
margin-top: 32px;
|
||||
font-size: 30px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.font-img {
|
||||
margin-top: 26px;
|
||||
width: 100%;
|
||||
height: 480px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-trends {
|
||||
// padding-bottom: 40px;
|
||||
background: #f3f6f9;
|
||||
.details {
|
||||
.card {
|
||||
background: #fff;
|
||||
padding: 26px 32px 28px 32px;
|
||||
margin-bottom: 20px;
|
||||
.card-nav {
|
||||
display: flex;
|
||||
.avatar {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
line-height: 60px;
|
||||
background: #4e8eee;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
margin-right: 16px;
|
||||
}
|
||||
.right {
|
||||
// display: inline;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.name {
|
||||
font-size: 26px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.time {
|
||||
font-size: 22px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-font {
|
||||
margin-top: 36px;
|
||||
line-height: 1.6;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.card-img {
|
||||
margin-top: 16px;
|
||||
img {
|
||||
width: 224px;
|
||||
height: 224px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
img:nth-child(3n + 0) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 28px;
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .emptyWrap {
|
||||
// background-color: pink;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.noDeatil {
|
||||
background-color: #f3f6f9;
|
||||
img {
|
||||
width: 400px;
|
||||
height: 240px;
|
||||
transform: translate(50%, 25%);
|
||||
padding-bottom: 156px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-bottom {
|
||||
height: 20px;
|
||||
background-color: #f3f6f9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedBtns {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
background: #1365dd;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
div {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background: #3975C6;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
color: #fff;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
.item{
|
||||
width: calc(100% - 32px);
|
||||
padding: 20px 32px 32px 16px;
|
||||
background: #FFFFFF;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 30px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
line-height: 48px;
|
||||
box-sizing: border-box;
|
||||
margin: 0 0 0 16px;
|
||||
.color-999{
|
||||
color: #999;
|
||||
}
|
||||
.value{
|
||||
color: #333;
|
||||
.u-icon{
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
.tips{
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #FF4466;
|
||||
line-height: 44px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user