<template>
|
<view class="coupon_bg" v-if="!loading">
|
<!-- #ifdef APP-PLUS -->
|
<header-bar></header-bar>
|
<!-- #endif -->
|
<!-- #ifdef MP-WEIXIN -->
|
<view class="titleBar">
|
<view class="head_top" :style="'height:'+statusBarHeight+'px;'"></view>
|
<view class="tc d-c-c f36 pr" :style="'height:'+titleBarHeight+'px;z-index:100'">
|
<view class="reg180" @click="goback"><text class="icon iconfont icon-jiantou"></text></view>
|
<view>优惠券</view>
|
</view>
|
<view :style="'height:'+titleHeight+'px;opacity:'+opacity+';'" class="top_bg"></view>
|
</view>
|
<view :style="'height:'+titleHeight+'px;'">
|
<view class="head_top" :style="'height:'+statusBarHeight+'px;'"></view>
|
<view :style="'height:'+titleBarHeight+' px;'"></view>
|
</view>
|
<!-- #endif -->
|
<view class="coupon-detail-top duihuan" v-if="detail.coupon_type.value==30">
|
<view class="top_box">
|
<view class="bg-white radius12 p20">
|
<view :class="'coupon-box coupon-item coupon-item-'+detail.color.text">
|
<view class="operation coupon-sp w-b">
|
<view class="coupon-content">
|
<view class="coupon-title-top">
|
<view class="d-s-c">
|
<view class="f24 pb10 flex-1" v-if="detail.shop_supplier_id==0">平台通用{{detail.coupon_type.text}}</view>
|
<view class="f24 pb10 flex-1" v-else>{{detail.supplier.name}}{{detail.coupon_type.text}}</view>
|
<view class="f24" v-if="detail.coupon_type.value!=30">
|
<template v-if="detail.min_price ==0">
|
无低消门槛
|
</template>
|
<template v-if="detail.min_price >0">
|
满{{detail.min_price}}元可用
|
</template>
|
</view>
|
</view>
|
<template v-if=" detail.coupon_type.value == 10 ">
|
<view class="price">
|
<text>￥</text>
|
<text class="f36 fb">{{ detail.reduce_price }}</text>
|
</view>
|
</template>
|
<template v-if="detail.coupon_type.value == 20 ">
|
<text class="f36 fb">{{ detail.discount }}</text><text>折</text>
|
</template>
|
<template v-if="detail.coupon_type.value == 30 ">
|
<view class="f36 fb l-s">{{detail.name}}</view>
|
</template>
|
</view>
|
<view class="coupon-title-bottom">
|
<view class="f24 pt20">
|
<template v-if="detail.expire_type == 20">
|
有效期：{{ detail.start_time.text }} 至 {{ detail.end_time.text }}
|
</template>
|
<template v-if="detail.expire_type == 10">
|
有效期：领取后{{ detail.expire_day }}天有效
|
</template>
|
</view>
|
</view>
|
</view>
|
<view class="btns d-b-s d-c">
|
<view>
|
<view class="f26 fb">
|
<text v-if="item.shop_supplier_id>0">[{{item.supplier.name}}]{{item.apply_range==10?'店铺通用券':item.name}}</text>
|
<text v-else>平台通用券</text>
|
</view>
|
<view class="f24 mt10 gray9" v-if="item.coupon_type.value==30">
|
仅限到店使用
|
</view>
|
<view class="f24 mt10 gray9" v-else>
|
<template v-if="item.min_price ==0">
|
无低消门槛
|
</template>
|
<template v-if="item.min_price >0">
|
满{{item.min_price}}元可用
|
</template>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="mt20">
|
<view class="d-s-c border-b pb20">
|
<view class="flex-1 f32 fb">优惠内容</view>
|
<view class="f26" v-if="detail.coupon_project.length>1">以下内容 {{detail.coupon_project.length}} 选 1</view>
|
</view>
|
<view class="project-box">
|
<view class="project-item mt20 f26" v-for="(item, index) in detail.coupon_project" :key="index">
|
{{item.content}}
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="mt20 bg-white radius12 p20">
|
<view class="d-s-c border-b pb20">
|
<view class="flex-1 f32 fb">使用须知</view>
|
</view>
|
<view class="project-box">
|
<view class="d-s-c mt20">
|
<text class="icon iconfont icon-yuyue"></text>
|
<text class="ml10 fb">有效期</text>
|
</view>
|
<view class=" mt20 ml40 f26">
|
<template v-if="detail.expire_type == 20">
|
{{ detail.start_time.text }} 至 {{ detail.end_time.text }}
|
</template>
|
<template v-if="detail.expire_type == 10">
|
领取后{{ detail.expire_day }}天有效
|
</template>
|
</view>
|
<view class="d-s-c mt20">
|
<text class="icon iconfont icon-quanbudingdan"></text>
|
<text class="ml10 fb">使用规则</text>
|
</view>
|
<view class="project-item mt20 ml20 f26" v-for="(item, index) in detail.coupon_rule" :key="index">
|
{{item.content}}
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="coupon-detail-top" v-else>
|
<view class="top_box">
|
<view><text class="icon iconfont icon-dianpu1" style="color: #333333;font-size: 30rpx;"></text><text
|
class="gray3 fb f30 ml10">{{detail.supplier?detail.supplier.name:'平台通用'}}</text></view>
|
<!-- 优惠券 -->
|
<view class="item-wrap">
|
<view :class="'coupon-item coupon-item-'+detail.color.text">
|
<!--装饰用的小圆-->
|
<view class="circles">
|
<text v-for="(circle,num) in 8" :key="num"></text>
|
</view>
|
<view class="info">
|
<view>{{detail.coupon_type.text}}</view>
|
</view>
|
<view class="operation d-b-c w-b">
|
<view class="flex-1 coupon-content">
|
<view>
|
<template v-if="detail.coupon_type.value == 10">
|
<view class="price">
|
<text class="f40 fb">减{{detail.reduce_price*1}}元</text>
|
</view>
|
</template>
|
<template v-if="detail.coupon_type.value == 20">
|
<text class="f40 fb">{{ detail.discount*1 }}</text><text>折</text>
|
</template>
|
</view>
|
<view class="f30">{{detail.min_price>0?'满'+detail.min_price*1+'元可用':'无门槛'}}</view>
|
<view class="f24">
|
<template v-if="detail.expire_type == 20">
|
有效期：{{ detail.start_time.text }} 至 {{ detail.end_time.text }}
|
</template>
|
<template v-if="detail.expire_type == 10">
|
有效期：领取后{{ detail.expire_day }}天有效
|
</template>
|
</view>
|
</view>
|
<view class="btns d-c-c" @click="receiveCoupon()">
|
<button v-if=" detail.is_get == 0" type="default" :class="'btn-red'">
|
立即领取
|
</button>
|
<button type="default" v-else class="btn-gray" v-on:click.stop>
|
{{ detail.state.text }}
|
</button>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<!-- -->
|
<view class="redF6 f26 fb pt30 d-c-c">
|
<image class="decorate" src="/static/icon/coupons_arrow.png" mode=""></image>
|
<text class="ml10 mr10">指定以下商品使用</text>
|
<image class="decorate" src="/static/icon/coupons_arrow.png" mode=""></image>
|
</view>
|
<!-- 商品列表 -->
|
<view class="o-h pro_list" v-if="apply_range!=10">
|
<view class="d-b-c f-w ww100">
|
<view class="pro_item" v-for="(item,index) in listData" :key='index'
|
@click="gotoPage('/pages/product/detail/detail?product_id='+item.product_id)">
|
<view class="pro_item_image">
|
<image :src="item.product_image || '/static/default.png'" mode="aspectFill"></image>
|
</view>
|
<view class="f26 gray3 text-ellipsis mt20 mb23 tc">{{item.product_name}}</view>
|
<view class="fb redF6 tc"><text class="f22">￥</text><text
|
class="f32">{{item.product_price}}</text>
|
</view>
|
<view class="d-c-c">
|
<button class="add_btn">加入购物车</button>
|
</view>
|
</view>
|
</view>
|
<!-- 没有记录 -->
|
<view class="d-c-c p30 ww100" v-if="listData.length == 0 && !loading">
|
<text class="iconfont icon-wushuju"></text>
|
<text class="cont">亲，暂无相关记录哦</text>
|
</view>
|
<uni-load-more v-else :loadingType="loadingType"></uni-load-more>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
loading:true,
|
statusBarHeight: 0,
|
titleBarHeight: 0,
|
titleHeight: 0,
|
opacity: 0,
|
coupon_id: 0,
|
listData: [],
|
detail: {
|
state: {
|
value: 0,
|
text: ''
|
}
|
}
|
}
|
},
|
onPageScroll(e) {
|
if (e.scrollTop < 100) {
|
this.opacity = e.scrollTop / 100
|
} else {
|
this.opacity = 1
|
}
|
|
},
|
onLoad(e) {
|
this.coupon_id = e.coupon_id;
|
this.apply_range = e.apply_range;
|
this.GetStatusBarHeight();
|
},
|
onShow() {
|
this.page = 1;
|
this.listData = [];
|
/*获取数据*/
|
this.getData();
|
},
|
methods: {
|
GetStatusBarHeight() {
|
const SystemInfo = uni.getSystemInfoSync();
|
// #ifdef MP-WEIXIN
|
let that = this;
|
let statusBarHeight = SystemInfo.statusBarHeight;
|
this.statusBarHeight = uni.getMenuButtonBoundingClientRect().top;
|
this.titleBarHeight = uni.getMenuButtonBoundingClientRect().height;
|
this.titleHeight = this.statusBarHeight + this.titleBarHeight + 8;
|
// #endif
|
// #ifndef MP-WEIXIN
|
this.statusBarHeight = SystemInfo.statusBarHeight;
|
this.titleHeight = this.statusBarHeight;
|
// #endif
|
},
|
getData() {
|
let self = this;
|
self.loading=true;
|
uni.showLoading({
|
title: '加载中'
|
});
|
let data_type = self.data_type;
|
self._get('coupon.coupon/detail', {
|
coupon_id: self.coupon_id,
|
}, function(res) {
|
uni.hideLoading();
|
self.loading=false;
|
self.detail = res.data.model;
|
if (self.apply_range == 20) {
|
self.listData = res.data.model.product;
|
} else if (self.apply_range == 30) {
|
self.listData = self.listData.concat(res.data.product_list.data);
|
self.last_page = res.data.product_list.last_page;
|
if (res.data.product_list.last_page <= 1) {
|
self.no_more = true;
|
}
|
}
|
});
|
},
|
receiveCoupon(){
|
let self = this;
|
if (self.detail.is_get == 1) {
|
return false;
|
}
|
self._post(
|
'user.coupon/receive', {
|
coupon_id: self.detail.coupon_id
|
},
|
function(result) {
|
uni.showToast({
|
title: '领取成功',
|
icon: 'success',
|
mask: true,
|
duration: 2000
|
});
|
self.detail.is_get = 1;
|
self.detail.state.text = '已领取';
|
}
|
);
|
},
|
goback() {
|
uni.navigateBack()
|
}
|
}
|
}
|
</script>
|
|
<style>
|
page {}
|
|
.coupon_bg {
|
background: linear-gradient(0deg, #FFFDD7 0%, #FEE6DF 100%);
|
}
|
|
.titleBar {
|
position: fixed;
|
width: 100%;
|
top: 0;
|
z-index: 100;
|
}
|
|
.top_bg {
|
width: 750rpx;
|
position: absolute;
|
background: linear-gradient(41deg, #FFF4F1 13%, #FDFFF7 48%, #F6FFFB 75%, #FFF2EE 100%);
|
z-index: 99;
|
top: 0;
|
|
}
|
|
.top_box {
|
background: rgba(0, 0, 0, 0.05);
|
padding: 28rpx 30rpx 30rpx 30rpx;
|
border-radius: 20rpx;
|
margin-top: 10rpx;
|
margin-bottom: 5rpx;
|
}
|
|
.coupon-wrap {
|
padding: 30rpx;
|
}
|
|
.coupon-detail-top {}
|
|
.item-wrap {
|
padding: 20rpx 0;
|
}
|
|
.coupon-item .btns button {
|
border: none;
|
}
|
|
.coupon-item .circles text {
|
display: block;
|
width: 10rpx;
|
height: 20rpx;
|
background: linear-gradient(0deg, #FFFDD7 0%, #FEE6DF 100%);
|
border-radius: 0 10rpx 10rpx 0
|
}
|
|
.coupon-item .info::before,
|
.coupon-item .info::after {
|
background: linear-gradient(0deg, #FFFDD7 0%, #FEE6DF 100%);
|
}
|
|
.decorate {
|
width: 16rpx;
|
height: 16rpx;
|
}
|
|
.add_btn {
|
width: 181rpx;
|
height: 40rpx;
|
background: #F6220C;
|
border-radius: 20rpx;
|
font-size: 24rpx;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #FFFFFF;
|
padding: 0;
|
border: none;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin-bottom: 22rpx;
|
}
|
|
.add_btn .icon-jia {
|
color: #FFFFff;
|
font-size: 18rpx;
|
}
|
|
.pro_list {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
flex-wrap: wrap;
|
padding: 0 30rpx;
|
padding-bottom: 80rpx;
|
}
|
|
.pro_item {
|
width: 335rpx;
|
border-radius: 12rpx;
|
overflow: hidden;
|
background-color: #FFFFFF;
|
margin-top: 20rpx;
|
}
|
|
.pro_item_image>image {
|
width: 335rpx;
|
height: 270rpx;
|
}
|
|
.head_top {
|
position: relative;
|
line-height: 30px;
|
color: #FFFFFF;
|
font-size: 32rpx;
|
}
|
|
.reg180 {
|
padding-right: 20rpx;
|
text-align: right;
|
transform: rotateY(180deg);
|
position: absolute;
|
bottom: 0;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
left: 0;
|
}
|
|
.icon-jiantou {
|
color: #333333;
|
font-size: 32rpx;
|
}
|
/* 兑换券 */
|
/* 新样式 by lyzflash */
|
.l-s {
|
letter-spacing: 2rpx;
|
}
|
.coupon-box {
|
border-radius: 12rpx;
|
height: 210rpx;
|
}
|
.coupon-box .circles {
|
left: auto;
|
right: 0;
|
top: 70rpx;
|
bottom: 70rpx;
|
}
|
.coupon-box .circles-right text {
|
border-radius: 10rpx 0 0 10rpx;
|
width: 8rpx;
|
height: 15rpx;
|
background: #f6f6f6;
|
}
|
.coupon-box .operation .coupon-content {
|
position: relative;
|
background-color: #FFF2EC;
|
color: #333333;
|
padding: 20rpx;
|
display: block;
|
}
|
.coupon-box .coupon-sp::before,
|
.coupon-box .coupon-sp::after {
|
position: absolute;
|
display: block;
|
content: '';
|
width: 11rpx;
|
height: 22rpx;
|
background: #FFFFFF;
|
z-index: 10;
|
top: 120rpx;
|
}
|
.coupon-box .coupon-sp::before {
|
left: 0;
|
border-radius: 0 15rpx 15rpx 0;
|
}
|
.coupon-box .coupon-sp::after {
|
right: 0;
|
border-radius: 15rpx 0 0 15rpx;
|
}
|
.coupon-box .btns {
|
width: 150rpx;
|
padding: 0 20rpx;
|
background: transparent;
|
}
|
.coupon-box.coupon-item- .btns {
|
/* background-color: #BEBEBE; */
|
}
|
.coupon-box .btns button {
|
width: auto;
|
background: #FFFFFF;
|
border-radius: 60rpx;
|
font-size: 22rpx;
|
padding: 4rpx 20rpx;
|
}
|
.coupon-box .operation {
|
padding-left: 0;
|
margin-top: 4rpx;
|
border-radius: 12rpx;
|
}
|
.coupon-product {
|
width: 100%;
|
}
|
.coupon-product-item image {
|
width: 124rpx;
|
height: 124rpx;
|
border-radius: 12rpx;
|
background-color: rgba(0, 0, 0, 0.1);
|
}
|
.coupon-box .coupon-sp .btns {
|
width: 446rpx;
|
background: #FFFFFF;
|
position: relative;
|
color: #333333;
|
box-sizing: border-box;
|
padding: 20rpx;
|
}
|
.coupon-box .coupon-sp .btns:after {
|
position: absolute;
|
content: " ";
|
border-left: 2rpx dashed #EEEEEE;
|
left: -2rpx;
|
height: 100%;
|
}
|
.coupon-title-top {
|
height: 110rpx;
|
border-bottom: 2rpx dashed #D16251;
|
}
|
.buy-btn-box {
|
position: fixed;
|
width: 100%;
|
left: 0;
|
bottom: 0;
|
z-index: 98;
|
}
|
|
.buy-btn {
|
height: 80rpx;
|
line-height: 80rpx;
|
border-radius: 80rpx;
|
overflow: hidden;
|
}
|
/* 兑换券内容 */
|
.project-item {
|
position: relative;
|
padding-left: 20rpx;
|
}
|
.project-item::before {
|
position: absolute;
|
content: " ";
|
background-color: #333333;
|
width: 6rpx;
|
height: 6rpx;
|
top: 16rpx;
|
left: 0;
|
}
|
.project-box .iconfont {
|
color: #333333;
|
}
|
</style>
|
