22 changed files with 684 additions and 89 deletions
@ -0,0 +1,20 @@
|
||||
import request from "@/utils/request.js"; |
||||
import {host} from "@/config/host.js"; |
||||
|
||||
|
||||
export function couponsList(data) { |
||||
|
||||
return request({ |
||||
url: `${host}/coupons/coupons-list`, |
||||
method: "get", |
||||
data |
||||
}); |
||||
} |
||||
export function obtainCoupons(data) { |
||||
|
||||
return request({ |
||||
url: `${host}/coupons/get-coupons`, |
||||
method: "post", |
||||
data |
||||
}); |
||||
} |
||||
@ -0,0 +1,147 @@
|
||||
.app-wallpaper{ |
||||
position: relative; |
||||
background:{ |
||||
size: 100% 100%; |
||||
repeat: no-repeat; |
||||
}; |
||||
padding-bottom:50rpx; |
||||
.capsule-container{ |
||||
position: sticky; |
||||
|
||||
box-sizing: border-box; |
||||
width:100%; |
||||
padding:10rpx; |
||||
border:2rpx solid #262626; |
||||
border-radius: 45rpx; |
||||
box-shadow: 1rpx 4rpx 12rpx 0rpx rgba(90,104,103,0.24); |
||||
background-color: #F8FAFA; |
||||
.capsule{ |
||||
box-sizing: border-box; |
||||
padding:20rpx; |
||||
text-align: center; |
||||
font: { |
||||
size:30rpx; |
||||
weight:500; |
||||
} |
||||
line-height:30rpx; |
||||
border:2rpx solid rgba(0,0,0,0); |
||||
&.active{ |
||||
background:{ |
||||
color:#4DC3B8; |
||||
} |
||||
color:#FFFFFF; |
||||
border:2rpx solid #262626; |
||||
border-radius:35rpx; |
||||
} |
||||
} |
||||
} |
||||
.coupons-list{ |
||||
margin-top:30rpx; |
||||
margin-left:-15rpx; |
||||
margin-right:-30rpx; |
||||
.coupons-item-container{ |
||||
padding:{ |
||||
bottom:7rpx; |
||||
} |
||||
background:{ |
||||
size: 100% 100%; |
||||
repeat: no-repeat; |
||||
}; |
||||
.coupons-item{ |
||||
box-sizing: border-box; |
||||
|
||||
height:226rpx; |
||||
padding:{ |
||||
top:28rpx; |
||||
bottom:46rpx; |
||||
left:10rpx; |
||||
right:59rpx; |
||||
} |
||||
.coupons-left{ |
||||
width:220rpx; |
||||
padding-top:10rpx; |
||||
.coupons-big-title-group{ |
||||
align-items: flex-end; |
||||
justify-content: center; |
||||
.coupons-big-title{ |
||||
text-align: center; |
||||
font-size: 90rpx; |
||||
font-family: Source Han Sans CN; |
||||
font-weight: 800; |
||||
color: #FFFFFF; |
||||
line-height: 1; |
||||
text-shadow: 0rpx 0rpx 14rpx rgba(209,145,70,0.21); |
||||
} |
||||
.coupons-big-desc{ |
||||
font-size: 32rpx; |
||||
font-family: Source Han Sans CN; |
||||
font-weight: bold; |
||||
color: #FFFFFF; |
||||
line-height: 70rpx; |
||||
text-shadow: 0rpx 0rpx 14rpx rgba(209,145,70,0.21); |
||||
} |
||||
} |
||||
.coupons-cause{ |
||||
margin-top:15rpx; |
||||
text-align: center; |
||||
font-size: 26rpx; |
||||
font-family: Source Han Sans CN; |
||||
font-weight: 400; |
||||
color: #FFFFFF; |
||||
} |
||||
} |
||||
.coupons-right{ |
||||
padding:0 0 0 30rpx; |
||||
justify-content: space-between; |
||||
.coupons-gq{ |
||||
width:80rpx; |
||||
height:80rpx; |
||||
.img{ |
||||
width:75rpx; |
||||
height:75rpx; |
||||
} |
||||
} |
||||
.coupons-title{ |
||||
font-size: 30rpx; |
||||
font-weight: 500; |
||||
color: #161616; |
||||
} |
||||
.coupons-desc{ |
||||
margin:7rpx 0; |
||||
font-size: 24rpx; |
||||
font-weight: 400; |
||||
color: #999999; |
||||
} |
||||
.coupons-bottom{ |
||||
border-top: 1px solid #F0F1F6; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
margin:15rpx 0; |
||||
.coupons-rule{ |
||||
|
||||
font-size: 24rpx; |
||||
font-weight: 400; |
||||
color: #999999; |
||||
.u-icon{ |
||||
margin-left:3rpx; |
||||
position: relative; |
||||
top:2rpx; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
|
||||
} |
||||
} |
||||
.coupons-button{ |
||||
padding:10rpx; |
||||
font-size: 26rpx; |
||||
font-weight: 500; |
||||
color: #FFFFFF; |
||||
line-height: 30rpx; |
||||
text-shadow: 0rpx 3rpx 2rpx rgba(77,195,184,0.16); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,274 @@
|
||||
<template> |
||||
<HeaderNav title="优惠在这" :is-back="true" :nav-to-url="navToUrl"></HeaderNav> |
||||
<view class="app-wallpaper" :style="{ |
||||
backgroundImage:'url('+staticImage.wallpaperBgImage+')' |
||||
}"> |
||||
|
||||
<view class="capsule-container row"> |
||||
<view class="capsule" :class="{active:item.value === couponType,'col-6':(types.length >1),'col-12':(types.length === 1)}" @click="couponTypeToggle(item)" v-for="item in types"> |
||||
{{ item.title }} |
||||
</view> |
||||
</view> |
||||
<view class="coupons-list" v-if="type === 'lists'"> |
||||
<view v-for="item in couponsList" class="coupons-item-container" :style="{ |
||||
backgroundImage:'url('+((item.status > 0)?staticImage.couponsGrayBackground:staticImage.couponsBackground)+')' |
||||
}"> |
||||
<view class="coupons-item row"> |
||||
<view class="coupons-left "> |
||||
<view class="coupons-big-title-group row"> |
||||
<view class="coupons-big-title">{{item.price}}</view> |
||||
<view class="coupons-big-desc">元</view> |
||||
</view> |
||||
<view class="coupons-cause"> |
||||
{{item.type_name}} |
||||
</view> |
||||
</view> |
||||
<view class="coupons-right col row"> |
||||
<view class=" "> |
||||
<view class="coupons-title col-12">{{item.title}}</view> |
||||
<view class="coupons-desc col-12"> |
||||
<text v-if="item.number !== 0 && item.number !== -1">剩余:</text> |
||||
<text v-if="item.number === 0">不限数量</text> |
||||
<text v-if="item.number !== 0 && item.number !== -1">{{item.number}}</text> |
||||
<text v-if="item.number === -1">已领取完</text> |
||||
<text v-if="item.number !== 0 && item.number !== -1">张</text> |
||||
</view> |
||||
</view> |
||||
<view class="coupons-gq " v-show="item.status === 2"> |
||||
<image class="img" :src="staticImage.couponsGQ" mode="aspectFill" /> |
||||
</view> |
||||
<view class="coupons-gq " v-show="item.status === 1"> |
||||
<image class="img" :src="staticImage.couponsUse" mode="aspectFill" /> |
||||
</view> |
||||
<view class="coupons-bottom col-12 row"> |
||||
<view class="coupons-rule row col" @click="showCoupons(item)">查看使用规则 <u-icon class="arrow-right" size="24rpx" color="#999999" name="arrow-right"></u-icon></view> |
||||
<view class="coupons-button"> |
||||
<MzButton |
||||
title="立即领取" |
||||
@click="clickCoupons(item)" |
||||
button-width="145rpx" |
||||
:button-color="(item.status > 0 || item.number === -1)?'#CACACA':'#4DC3B8'" |
||||
font-color="#fff" |
||||
font-size="26rpx" |
||||
:is-background="false" |
||||
padding-tb="2rpx" |
||||
:btn-style="{ |
||||
boxShadow:((item.status > 0 || item.number === -1)?'2rpx -5rpx 0rpx 0rpx rgba(199,199,199,0.35)':'2rpx -5rpx 0rpx 0rpx rgba(77,195,184,0.35)') |
||||
}"></MzButton> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<u-loadmore v-if="type === 'lists'" |
||||
:status="status" fontSize="28" |
||||
color="#ACB4B6" |
||||
line |
||||
line-color="#ACB4B6" |
||||
marginBottom="30" marginTop="30" @loadmore="getCouponsList(++this.page)"/> |
||||
<Draw v-if="type === 'draw'"></Draw> |
||||
</view> |
||||
<uv-popup ref="agreement" mode="bottom" round="20rpx" closeable safeAreaInsetTop safeAreaInsetBottom custom-style="position:relative;"> |
||||
<view class="title row" style="position:absolute;justify-content: center;width:100%;top:20rpx;left:0;"> |
||||
<view class="value col" style="position: relative;text-align: center;"> |
||||
|
||||
<!-- <u-text text="协议内容" size="38" color="#191919"></u-text>--> |
||||
<view class="" style="position: relative;display:inline-block;"> |
||||
<view style="color:#191919;font-size:38rpx;display:inline-block;position: relative;z-index: 2;">使用说明</view> |
||||
<view class="background" style="width:100%;height:50%;position: absolute;bottom:0;left:0;background-color:rgba(227, 191, 119, 0.6);display:inline-block;z-index:1;"></view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view style="padding:30rpx;max-height:700rpx;overflow: auto;" v-if="couponsContent!==''"> |
||||
<u-parse :content="couponsContent"></u-parse> |
||||
</view> |
||||
</uv-popup> |
||||
<!-- <RightNav></RightNav> --> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
imghost |
||||
} from '@/config/host.js' |
||||
import HeaderNav from '@/components/HeaderNav/Index.vue'; |
||||
import FooterNav from '@/components/FooterNav/Index.vue'; |
||||
import RightNav from '@/components/RightNav/Index.vue'; |
||||
import MzButton from '@/components/MzButton/Index.vue'; |
||||
import Draw from '@/pages/Draw/index.vue'; |
||||
import {userCoupons, userDetail, userExtends} from "../../api/user"; |
||||
import {getConfig} from "@/api/other"; |
||||
import {couponsList, obtainCoupons} from "@/api/coupons"; |
||||
import {drawList} from "@/api/draw"; |
||||
import {error} from "@/uni_modules/uv-ui-tools/libs/function"; |
||||
import api from "@/utils/functions"; |
||||
import {UserCache} from "@/config/config"; |
||||
export default { |
||||
components: { |
||||
HeaderNav, |
||||
FooterNav, |
||||
RightNav, |
||||
MzButton, |
||||
Draw |
||||
}, |
||||
data() { |
||||
return { |
||||
title: 'Hello', |
||||
loading: true, |
||||
staticImage: { |
||||
screenActiveImg: imghost + '/order-screen-active.png', |
||||
orderCardBackground: imghost + '/order-card-background.png', |
||||
wallpaperBgImage: imghost + '/background.png', |
||||
couponsBackground: imghost + '/coupons-bg.png', |
||||
couponsGrayBackground: imghost + '/coupons-gray-bg.png', |
||||
couponsGQ: imghost + '/coupons-gq.png', |
||||
couponsUse: imghost + '/coupons-use.png', |
||||
}, |
||||
indexBanner: [{ |
||||
image: imghost + '/banner.png', |
||||
url: '', |
||||
}], |
||||
user: { |
||||
avatar: imghost + '/banner.png', |
||||
nickname: '清晨的风', |
||||
coupons: 221, |
||||
id: 88685 |
||||
}, |
||||
isTop: false, |
||||
pagePadding: 100, |
||||
petImage: imghost + '/pet_avatar1.jpeg', |
||||
couponsList: [ ], |
||||
type:'lists', |
||||
couponType:2, |
||||
types:[ |
||||
{title:'省点银子', value: 2}, |
||||
], |
||||
page:1, |
||||
status:'loadmore', |
||||
navToUrl:'', |
||||
couponsContent:'', |
||||
} |
||||
}, |
||||
onLoad(option) { |
||||
this.type = option.type||'lists' |
||||
console.log(this.type) |
||||
this.navToUrl = option.url || '' |
||||
}, |
||||
methods: { |
||||
getDrawList(){ |
||||
drawList().then(data => { |
||||
if(data.data.goodslists.length > 0){ |
||||
this.types = [ |
||||
{title:'省点银子', value: 2}, |
||||
{title:'宝藏挖掘机', value: 1}, |
||||
]; |
||||
} |
||||
}); |
||||
}, |
||||
showCoupons(item){ |
||||
console.log(item) |
||||
console.log(item.use_info) |
||||
this.couponsContent = item.use_info; |
||||
this.$refs.agreement.open(); |
||||
}, |
||||
clickCoupons(item){ |
||||
if(item.number !== -1){ |
||||
obtainCoupons({ |
||||
coupons_id:item.id, |
||||
number:1 |
||||
}).then(res => { |
||||
api.success('领取成功') |
||||
userExtends().then(res => { |
||||
this.$store.commit('userExtends', UserCache.extSetAndReturn(res.data)); |
||||
}) |
||||
}).catch(err => { |
||||
api.error(err.msg) |
||||
}) |
||||
} |
||||
}, |
||||
navTo(url){ |
||||
uni.navigateTo({ |
||||
url:url |
||||
}) |
||||
}, |
||||
getCouponsList(page = 1){ |
||||
if (this.status === 'nomore'){ |
||||
return; |
||||
}else{ |
||||
this.status = 'loading'; |
||||
} |
||||
couponsList({ |
||||
page:page, |
||||
limit:10, |
||||
is_buy:this.couponType |
||||
}).then((res) => { |
||||
let couponsList = res.data.map((row) => { |
||||
let type_name; |
||||
switch (row.type){ |
||||
case 1: |
||||
type_name = '满减券'; |
||||
break; |
||||
case 2: |
||||
type_name = '折扣券'; |
||||
break; |
||||
case 3: |
||||
type_name = '抵扣券'; |
||||
break; |
||||
} |
||||
return { |
||||
id:row.id, |
||||
price:parseFloat(row.deduction), |
||||
title:row.title, |
||||
type_name: type_name, |
||||
number: row.number, |
||||
cause:'满'+parseFloat(row.min_price)+'使用', |
||||
status: row.status, |
||||
use_info: row.use_info, |
||||
} |
||||
}); |
||||
this.status = couponsList.length < 10 ? 'nomore' : 'loadmore'; |
||||
|
||||
if (page === 1) { |
||||
this.couponsList = couponsList; |
||||
return; |
||||
} |
||||
this.couponsList.push(...couponsList); |
||||
}) |
||||
}, |
||||
couponTypeToggle(item){ |
||||
this.couponType = item.value; |
||||
this.page = 1; |
||||
this.status = 'loadmore'; |
||||
if(item.value === 1){ |
||||
this.type = 'draw'; |
||||
return; |
||||
}else{ |
||||
this.type = 'lists'; |
||||
} |
||||
this.getCouponsList(); |
||||
} |
||||
}, |
||||
onPageScroll(res) { |
||||
if (res.scrollTop <= 20) { |
||||
uni.$emit('isTop', true); |
||||
} else { |
||||
uni.$emit('isTop', false); |
||||
} |
||||
}, |
||||
onReachBottom() { |
||||
this.getCouponsList(++this.page); |
||||
}, |
||||
created() { |
||||
// this.pagePadding = (api.navHeight().navPaddingTop + |
||||
// api.navHeight().navHeight + (api.navHeight().headerPadding * 2)) |
||||
}, |
||||
mounted() { |
||||
this.getCouponsList(); |
||||
this.getDrawList(); |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
@import './components/index.scss'; |
||||
</style> |
||||
Loading…
Reference in new issue