123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565 |
- <template>
- <view>
- <block v-if="!activiState">
- <view class="main_content1" :style="{backgroundImage:'url('+img_url+'signIn/sign_bg.png)'}">
- <view class="top_bar">
- <view class="top_header">
- <view class="top_header_left" @click="goBack">
- <image :src="img_url + 'signIn/to_back.png'" mode=""></image>
- </view>
- <view class="top_header_cen">签到中心</view>
- <view class="top_white_space"></view>
- </view>
- </view>
- <view class="date_banner">
- <view class="b_day" :style="{backgroundImage:'url('+img_url+'signIn/date_bg.png)'}">{{bigDay}}</view>
- <view class="s_day_time">
- <view class="s_b_top">{{getWeek}}</view>
- <view class="s_date">{{month}}/{{year}}</view>
- <view class="s_sign">{{signInfo.isSign==2?'今日已签到':'今日未签到'}}</view>
- </view>
- <view class="s_sign_tip">
- <image :src="img_url+'signIn/qiandao.png'" mode=""></image>
- <text>{{signInfo.isSign==2?'已签到':'未签到'}}</text>
- </view>
- </view>
- <view class="sign_record">
- <view class="sign_integral">
- <view class="cur_int">目前积分<text>{{my_points}}</text></view>
- <view class="int_tip">连续签到7天可享受双倍积分+优惠券双重好礼</view>
- </view>
-
- <view class="sign_proc">
- <view class="bub_box">+5积分</view>
- <view class="proc_bar_bg">
- <view class="proc_bar"></view>
- </view>
- <view class="sign_days">
- <text v-for="item in [1,2,3,4,5,6,7]">{{item}}天</text>
- </view>
- </view>
-
- <view class="sign_but_con">
- <view class="sign_but">已连续签到6天 积分+5</view>
- </view>
- </view>
-
- <view class="mis_int">
- <view class="mis_int_title">做任务 赚积分</view>
- <view class="mis_two_con">
- <view class="con_item">
- <view class="text_con">
- <text>限时抽奖</text>
- <text>每日惊喜不断</text>
- </view>
- <view class="sign_but">
- <image :src="img_url+'signIn/sign_but1.png'" mode=""></image>
- </view>
- <view class="img_con">
- <image :src="img_url+'signIn/sign_img1.png'" mode=""></image>
- </view>
- </view>
- <view class="con_item">
- <view class="text_con">
- <text>购物赚积分</text>
- <text>每次购物都是赚钱</text>
- </view>
- <view class="sign_but">
- <image :src="img_url+'signIn/sign_but1.png'" mode=""></image>
- </view>
- <view class="img_con">
- <image :src="img_url+'signIn/sign_img2.png'" mode=""></image>
- </view>
- </view>
- </view>
- <view class="mis_b_con">
- <!-- <image :src="img_url+'signIn/sign_banner.png'" mode="aspectFit"></image> -->
- <view class="" :style="{backgroundImage:'url('+img_url+'signIn/sign_banner.png)'}"></view>
- </view>
- </view>
-
- <view class="int_mis">
- <view class="mis_int_title">积分任务</view>
- <view class="int_mis_con">
- <view class="int_mis_con_item">
- <view class="imc_item_left">
- <image :src="img_url+'signIn/sign_share.png'" mode=""></image>
- <view class="imc_item_left_text">
- <text>分享活动,邀请好友获取补签机会</text>
- <text>分享活动给好友,可获得一次补签</text>
- </view>
- </view>
- <view class="imc_item_right">分享</view>
- </view>
- </view>
- <view class="int_mis_con">
- <view class="int_mis_con_item">
- <view class="imc_item_left">
- <image :src="img_url+'signIn/sign_shopping.png'" mode=""></image>
- <view class="imc_item_left_text">
- <text>购物得积分,下单支付可赚取积分</text>
- <text>好友参与活动您可获得5积分</text>
- </view>
- </view>
- <view class="imc_item_right">去购物</view>
- </view>
- </view>
- <view class="int_mis_con">
- <view class="int_mis_con_item">
- <view class="imc_item_left">
- <image :src="img_url+'signIn/sign_up.png'" mode=""></image>
- <view class="imc_item_left_text">
- <text>会员升级,会员升级可得20积分</text>
- <text>会员升级获得10积分</text>
- </view>
- </view>
- <view class="imc_item_right" v-if="true">去升级</view>
- <view class="imc_item_right upAl" v-if="false">已升级</view>
- </view>
- </view>
- </view>
- </view>
- </block>
- <block v-if="activiState">
- <signAcCom></signAcCom>
- </block>
- </view>
- </template>
- <script>
- import signAcCom from './signAcCom.vue'
- export default{
- components:{
- signAcCom
- },
- data(){
- return{
- img_url:getApp().globalData.imgUrl,
- activiState:true,
- bigDay:'00',
- month:'00',
- year:'0000',
- signInfo:{},
- my_points:0
- }
- },
- onLoad() {
- // this.initData()
- },
- computed:{
- getWeek(){
- let now = new Date()
- let arr = ['周日','周一','周二','周三','周四','周五','周六']
- return arr[now.getDay()]
- }
- },
- methods:{
-
- initData(){
- this.getInfo()
- this.getNow()
- this.getUserPoints()
- },
- getInfo(){
- let params = {
- url:'/v3/promotion/front/sign/activity/detail'
- }
- this.$request(params).then(res=>{
- if(res.state==200){
- this.signInfo = res.data
- }
- })
- },
- getNow(){
- let now= new Date()
- this.bigDay = now.getDate().toString().length==2?now.getDate():'0'+now.getDate()
- this.month = (now.getMonth() + 1).toString().length==2?now.getMonth() + 1: '0' + (now.getMonth() + 1)
- this.year = now.getFullYear()
- console.log(this.bigDay,this.month,this.year)
-
- },
- getUserPoints(){
- let param = {}
- param.url = 'v3/member/front/integralLog/getMemberIntegral'
- param.method = 'GET'
- this.$request(param).then(res=>{
- if(res.state == 200){
- this.my_points = res.data.memberIntegral
- }
- })
- },
- }
- }
- </script>
- <style lang="scss">
- .main_content1{
- height: 100%;
- background-repeat: no-repeat;
- background-position: 0 0;
- background-size: 750rpx 492rpx;
- padding-bottom: 26rpx;
- .date_banner{
- position: relative;
- margin-top: 50rpx;
- padding: 0 20rpx;
- display: flex;
- .b_day{
- width: 220rpx;
- height: 160rpx;
- background-repeat: no-repeat;
- background-position: center center;
- background-size: 100% 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- font-weight: normal;
- font-size: 110rpx;
- }
- .s_day_time{
- margin-left: 20rpx;
- .s_b_top{
- font-size: 50rpx;
- font-family: PingFang;
- font-weight: bold;
- color: #FFFFFF;
- }
- .s_date,.s_sign{
- font-size: 30rpx;
- font-family: PingFang;
- font-weight: normal;
- color: #FFFFFF;
- line-height: 46rpx;
- height: 46rpx;
- }
- .s_date{
- margin-top: 10rpx;
- }
- }
- .s_sign_tip{
- position: absolute;
- top: 0;
- right: 0;
- width: 179rpx;
- height: 59rpx;
- background-color: #fff;
- border-bottom-left-radius: 30rpx;
- border-top-left-radius: 30rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- text{
- font-size: 30rpx;
- font-family: PingFang;
- font-weight: bold;
- color: #FF8118;
- }
- image{
- width:37rpx;
- height:34rpx;
- margin-right: 10rpx;
- }
- }
- }
-
- .sign_record{
- width: 355px;
- box-shadow: 0px 5rpx 26rpx 0px rgba(255, 130, 25, 0.18);
- background: #FFFFFF;
- border-radius: 16rpx;
- padding: 17px 10px 20px;
- margin: 20rpx auto;
- position: relative;
- .sign_integral{
- text-align: center;
- // width: 100%;
- .cur_int{
- font-size: 36rpx;
- font-family: PingFang;
- font-weight: 500;
- color: #2D2D2D;
- text{
- color: #FF8118;
- }
- }
- .int_tip{
- font-size: 26rpx;
- font-family: PingFang;
- font-weight: bold;
- color: #000000;
- line-height: 68rpx;
- opacity: 0.2;
- text-shadow: 0px 2rpx 4rpx rgba(255, 84, 0, 0.2);
- text-align: center;
- }
- }
- .sign_proc{
- margin-top: 50rpx;
- .bub_box{
- position: relative;
- // top:100px;
- // left:100rpx;
- display: inline-block;
- padding: 4rpx 12rpx;
- background: linear-gradient(62deg, #FF8F2A, #FFBE67);
- border-radius: 16rpx;
- font-size: 24rpx;
- color: #fff;
- &:after{
- position: absolute;
- content: "";
- width: 0;
- height: 0;
- top: 100%;
- left: 40%;
- border-top: 6rpx solid #ffa638;
- border-right: 6rpx solid transparent;
- border-left: 6rpx solid transparent;
- }
- }
- .sign_days{
- // width: 624rpx;
- font-size: 24rpx;
- font-family: PingFang;
- font-weight: 500;
- color: #999999;
- opacity: 0.8;
- margin: 0 auto;
- display: flex;
- justify-content: space-between;
- }
-
- }
- .proc_bar_bg{
-
- // width: 624rpx;
- height: 20rpx;
- background: #FFB85F;
- border-radius: 10rpx;
- margin: 26rpx auto;
- .proc_bar{
- border-radius: 10rpx;
- background-size: 30rpx 30rpx;
- height: 20rpx;
- background-color: #FF791B;
- background-image: linear-gradient(-45deg,rgba(255, 255, 255, .2) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%,transparent 75%,transparent);
- }
- }
- .sign_but_con{
- margin-top: 52rpx;
- display: flex;
- justify-content: center;
- .sign_but{
- width: 580rpx;
- height: 80rpx;
- border: 4rpx solid #FF7C19;
- box-shadow: 0px 6rpx 30rpx 0px rgba(255, 130, 25, 0.18);
- border-radius: 80rpx;
- display: flex;
- align-items: center;
- justify-content: center;
-
- font-size: 34rpx;
- font-family: PingFang;
- font-weight: 500;
- color: #FF7D15;
-
- }
- }
- }
-
- .mis_int{
- padding: 20rpx;
- .mis_two_con{
- display: flex;
- justify-content: space-between;
- margin-top: 20rpx;
- .con_item{
- position: relative;
- padding: 46rpx;
- box-shadow: 0px 10rpx 48rpx 4rpx rgba(86, 86, 86, 0.08);
- border-radius: 32rpx;
- .text_con{
- text{
- display: block;
- &:first-child{
- font-size: 34rpx;
- font-family: PingFang;
- font-weight: bold;
- color: #666666;
- }
- &:last-child{
- margin-top: 14rpx;
- font-size: 23rpx;
- font-family: PingFang;
- font-weight: 500;
- color: #B2B2B2;
- }
- }
- }
- .img_con{
- margin-top: 42rpx;
- width:254rpx;
- height:138rpx;
- image{
- width: 100%;
- height: 100%;
- }
- }
- .sign_but{
- position: absolute;
- top: 46rpx;
- right: 46rpx;
- image{
- width: 43rpx;
- height: 43rpx;
- }
- }
- }
- }
- .mis_b_con{
- margin-top: 36rpx;
- view{
- width: 100%;
- height: 180rpx;
- background-repeat:no-repeat;
- background-size: contain;
- background-position: center center;
- }
- }
- }
- .mis_int_title{
- padding-left: 14rpx;
- font-size: 38rpx;
- font-family: PingFang;
- font-weight: bold;
- color: #2D2D2D;
- border-left: 6rpx solid #FF7C19;
- }
- .int_mis{
- margin-top: 16rpx;
- padding: 20rpx;
- .int_mis_con{
- margin-top: 20rpx;
- border-bottom: 2rpx solid #F5F5F5;
- &:last-child{
- border-bottom: none;
- }
- .int_mis_con_item{
- display: flex;
- padding: 20rpx 0;
- justify-content: space-between;
- align-items: center;
- .imc_item_left{
- display: flex;
- align-items: center;
- image{
- width: 80rpx;
- height: 80rpx;
- }
- .imc_item_left_text{
- margin-left: 20rpx;
- height: 64rpx;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- text{
- &:first-child{
- font-size: 26rpx;
- font-family: PingFang;
- font-weight: 500;
- color: #2D2D2D;
- }
- &:last-child{
- height: 25rpx;
- font-size: 24rpx;
- font-family: PingFang;
- font-weight: 500;
- color: #999999;
- }
- }
- }
- }
- .imc_item_right{
- width: 124rpx;
- height: 50rpx;
- background-color: #FF6D12;
- box-shadow: 0px 6rpx 14rpx 0px rgba(255, 127, 37, 0.35);
- border-radius: 25rpx;
- color: #fff;
- text-align: center;
- font-size: 26rpx;
- line-height: 50rpx;
- &.upAl{
- background: #BBBBBB !important;
- }
- }
- }
- }
- }
- }
- .top_bar {
- width: 750rpx;
- // height: 178rpx;
- padding-top: 42rpx;
- /* #ifdef APP-PLUS||MP-WEIXIN */
- padding-top: calc(var(--status-bar-height) + 42rpx);
- /* #endif */
- padding-right: 20rpx;
- width: 750rpx;
- z-index: 50;
-
- .top_header {
- display: flex;
- align-items: center;
- justify-content: space-between;
-
- .top_header_left {
- padding-left: 20rpx;
-
- image {
- width: 17rpx;
- height: 29rpx;
- }
- }
-
- .top_header_cen {
- margin: 0 50rpx;
- font-size: 36rpx;
- font-family: PingFang SC;
- color: #FFFFFF;
- }
-
- .top_white_space {
- width: 30rpx;
- height: 29rpx;
- padding-right: 20rpx;
- }
- }
-
- .top_category {
- margin-top: 40rpx;
-
- .cate_wrap {
- display: -webkit-box;
- align-items: center;
- overflow-x: scroll;
-
- .category_item {
- color: #FFFFFF;
- padding: 0 20rpx;
- margin-left: 20rpx;
- height: 54rpx;
-
- &.boWhite {
- border-bottom: 4rpx solid #fff;
- }
- }
- }
- }
- }
- .date_banner{
-
- }
- </style>
|