Skip to content

C
center-marketing-show
提交 6798e5cb authored 作者: matian's avatar matian
浏览文件
操作

update：更新签到页面

上级 1d956873
显示空白字符变更
内嵌 并排
正在显示 包含 146 行增加 和 140 行删除
src/components/AppPopup.vue 0 → 100644
浏览文件 @ 6798e5cb
<template>
<div class="popup" v-show="visible">
<div class="popup-container" @touchmove.prevent>
<img class="img_default" :src="defaultImg2" alt="" v-if="status == true && signInfo.market_background_img == ''">
<img class="img_default" :src="defaultImg1" alt="" v-else-if="status == false && signInfo.market_background_img == ''">
<img class="img_bgImg" :src="signInfo.market_background_img" alt="" v-else>
<div class="success"> {{ status === true ? "签到成功!" : "签到失败!" }}</div>
<div class="remark">{{signInfo.student.remark}}</div>
</div>
<div class="overlay" @click="handleClose" @touchmove.prevent></div>
</div>
</template>
<script>
export default {
props: {
visible: {
type: Boolean,
default: false
},
status: {
type: Boolean,
default: false
},
signInfo:{
type:Object,
default:{}
}
},
data() {
return {
defaultImg1:'https://webapp-pub.ezijing.com/marketing/sign_error.png',
defaultImg2:'https://webapp-pub.ezijing.com/marketing/sign_success.png'
}
},
methods: {
handleClose() {
if(this.status == true){
this.$emit('update:visible', false)
}
}
}
}
</script>
<style lang="scss" scoped>
.overlay{
position:fixed;
left:0;
top:0;
right:0;
bottom:0;
z-index:5;
background:rgba(0, 0, 0, .5);
}
.popup-container{
position:fixed;
left:50%;
top:50%;
transform:translate(-50%, -50%);
z-index:10;
width:6.24rem;
height:7.2rem;
border-radius:5px;
box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
background-color: #fff;
.img_default{
width: 1.91rem;
height: 1.95rem;
line-height: 1.95rem;
margin-top: .73rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.img_bgImg{
width:6.24rem;
height: 1.95rem;
}
.success{
position:absolute;
left:50%;
top: 3.12rem;
transform:translateX(-50%);
font-size: .52rem;
color: #333;
font-weight: 400;
}
.remark{
width: 4.14rem;
position:absolute;
left:50%;
top: 4.05rem;
transform:translateX(-50%);
color: #939393;
font-size: .32rem;
line-height: .48rem;
font-weight: 400;
text-align: center;
}
}
</style>
src/views/signIn/Index.vue
浏览文件 @ 6798e5cb
<template>
<div class="sign_content">
<div class="detail_content">
<div v-if="isShowError == true" class="showError">
<img src="https://webapp-pub.ezijing.com/marketing/detail2.png" alt="">
<div class="text">您访问的页面不存在。</div>
</div>
<div v-else>
<transition name="fade">
<swiper id="swiperBox" v-bind:options="swiperOption" ref="mySwiper">
<!-- 第一页 -->
<swiper-slide class="swiper-slide1">
<!-- 页面背景图 -->
<img :src="signInfo.background_img" alt="" class="background_img" v-if="signInfo.background_img !==''">
<div class="top">
<img :src="signInfo.market_background_img || defaultImg" alt="" />
<div class="sign_state">
{{ status === true ? "签到成功" : "签到失败" }}
</div>
<div class="remark">{{ signInfo.student.remark }}</div>
</div>
<div class="bottom" v-if="signInfo.market_other_img !== ''">
<img :src="detail_icon" alt="" />
</div>
</swiper-slide>
<!-- 第二页页面其他背景图片 -->
<swiper-slide class="swiper-slide2" v-if="signInfo.market_other_img !== ''">
<img :src="signInfo.market_other_img" alt="" class="detailPage" />
</swiper-slide>
</swiper>
</transition>
<img :src="signInfo.market_other_img" alt="" class="market_other_img" v-if ="signInfo.market_other_img !== ''">
<img src="https://webapp-pub.ezijing.com/marketing/detail.png" class="signIn_detail" @click="handleClick"/>
<app-popup :visible.sync="popupVisible" :signInfo = "signInfo" :status = "status"></app-popup>
</div>
</div>
</template>
<script>
import { signInDetail, signIn } from "@/api/base.js";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import AppPopup from '../../components/AppPopup.vue'
export default {
components: {
Swiper,
SwiperSlide,
},
data() {
return {
isShowError:false,
swiperOption: {
notNextTick: true,
direction: "vertical",
grabCursor: true,
setWrapperSize: true,
autoHeight: true,
slidesPerView: 1,
mousewheel: false,
mousewheelControl: false,
height: window.innerHeight,
resistanceRatio: 0,
observeParents: true,
debugger: true,
},
components: { AppPopup },
data(){
return{
status:false,
signInfo:{
student:{}
},//签到详情
status: false, //签到状态
defaultImg: "https://webapp-pub.ezijing.com/marketing/signIn_img.png", //默认签到背景图
detail_icon: "https://webapp-pub.ezijing.com/marketing/detail_img.png", //查看详情图标
id:'',//活动id
};
},
computed: {
user() {
return this.$store.state.user;
},
swiper() {
return this.$refs.mySwiper.swiper;
},
student:{
}
},//签到详情信息
popupVisible: true,
id:'',
isShowError:false
}
},
mounted() {
mounted(){
this.id = this.$route.query.id;//从链接上获取活动id
console.log(this.id)
if(this.id == ''||this.id == undefined){
this.isShowError = true;
return
}
this.getSignInDetail(); //获取页面详情
},
methods: {
methods:{
handleClick() {
this.popupVisible = true
},
getSignInDetail() {
//调用签到详情接口
let id = this.id;
let id = this.id ;
signInDetail(id).then((res) => {
if (res.code == 0) {
this.signInfo = res.data;//获取签到详情数据
......@@ -111,7 +68,7 @@ export default {
},
//签到接口
getSignIn(){
let id = this.id;//从链接上获取活动id
let id = this.id ;//从链接上获取活动id
signIn(id).then((res)=>{
if (res.code == 0) {
this.status = res.data.status; //签到状态
......@@ -123,25 +80,30 @@ export default {
}
})
}
},
};
</script>
<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
}
.sign_content {
</script>
<style lang = "scss" scoped>
.detail_content {
width: 100%;
height: 100%;
height: 100vh;
position: relative;
background-color: #f2f2f2;
overflow: -Scroll;
overflow-y: hidden;
.market_other_img{
width: 100%;
height: 100%;
}
.signIn_detail{
width: 1rem;
height: 1rem;
line-height: 1rem;
position: fixed;
right: .56rem;
top: .67rem;
padding-left: 10px;
}
.showError{
width: 100%;
height: 100%;
......@@ -165,62 +127,5 @@ export default {
color: #999999;
}
}
.background_img{
width: 100%;
height: 100%;
}
.top {
width: 6.89rem;
height: 7.76rem;
background-color: #fff;
border-radius: 20px;
position: absolute;
top: 2.22rem;
left: 50%;
transform: translateX(-50%);
text-align: center;
img {
width: 4.59rem;
height: 1.81rem;
margin-top: .70rem;
}
.sign_state {
margin: auto;
font-size: 0.42rem;
font-weight: bold;
color: #333333;
margin-bottom: 0.96rem;
margin-top: .99rem;
}
.remark {
margin: auto;
width: 5.41rem;
font-size: 0.28rem;
font-weight: 400;
color: #666666;
margin-bottom: .92rem;
}
}
@keyframes movepoint{from{bottom:1.2rem}to{bottom:1.44rem}}
.bottom {
position: fixed;
left: 50%;
bottom:1.44rem;
transform: translateX(-50%);
animation: movepoint 2s infinite;
-webkit-animation: movepoint 2s infinite;
img {
width: 0.48rem;
height: 0.34rem;
line-height: 100%;
display: inline-block;
}
}
.detailPage {
width: 100%;
height: 100%;
line-height: 100%;
}
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论