You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
274 lines
8.9 KiB
274 lines
8.9 KiB
<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, |
|
|
|
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> |