Skip to content

J
jz_Travel
Commit ac611249 authored by youjie's avatar youjie
Browse files
Options

优惠券 领取中心

parent 0c6242aa
Hide whitespace changes
Inline Side-by-side
Showing with 352 additions and 159 deletions
asset/css/flex.css
View file @ ac611249
...@@ -59,6 +59,9 @@ ...@@ -59,6 +59,9 @@
.items-center{ .items-center{
align-items: center; align-items: center;
} }
.justify-center{
justify-content: center;
}
.flex1,.col{ .flex1,.col{
flex: 1; flex: 1;
} }
......
pages.json
View file @ ac611249
...@@ -203,7 +203,13 @@ ...@@ -203,7 +203,13 @@
{ {
"root": "pages/coupon", "root": "pages/coupon",
"pages": [{ "pages": [{
"path": "list/list" "path": "list/list",
"style": {
"navigationStyle": "custom"
},
"globalStyle": {
"navigationStyle": "custom"
}
}, },
{ {
"path": "details/details", "path": "details/details",
......
pages/coupon/details/details.vue
View file @ ac611249
...@@ -46,11 +46,20 @@ ...@@ -46,11 +46,20 @@
<view class="cdTiaojianBRight"> <view class="cdTiaojianBRight">
<view class="cdTiaojianBRTitle">使用说明</view> <view class="cdTiaojianBRTitle">使用说明</view>
<view class="cdTiaojianBRText">券类型：{{ g.couponsType==1?'抵用券':'折扣券' }}</view> <view class="cdTiaojianBRText">券类型：{{ g.couponsType==1?'抵用券':'折扣券' }}</view>
<view class="cdTiaojianBRText">使用范围：{{ g.couponsUseScopeName }}</view> <view class="cdTiaojianBRText">使用范围：
<template v-if="g.couponsUseScopeName">
{{ g.couponsUseScopeName }}
</template>
<template v-if="g.couponsUseScope">
{{ g.couponsUseScope }}
</template>
</view>
<view class="cdTiaojianBRText" v-if="g.remark&&g.remark!=''">备注：{{ g.remark }}</view> <view class="cdTiaojianBRText" v-if="g.remark&&g.remark!=''">备注：{{ g.remark }}</view>
</view> </view>
</view> </view>
<view class="cdTiaojianButtom" @click="gouseUrl(g)">立即使用</view> <view class="cdTiaojianButtom" v-if="type==1" @click="gouseUrl(g)">立即使用</view>
<view class="cdTiaojianButtom" v-else @click="g.couponReceiveCount==0?receive(g.couponReceiveCount):gouseUrl(g)">{{ g.couponReceiveCount==0?'立即领取':'立即使用' }}</view>
</view> </view>
</view> </view>
</template> </template>
...@@ -98,26 +107,27 @@ ...@@ -98,26 +107,27 @@
console.log("this.g", this.g); console.log("this.g", this.g);
}, },
methods: { methods: {
receive(id) { receive(id){
this.request2({ this.apipost("b2c_post_CustomerGrantCoupon", {
url: '/api/AppletUser/GrantCoupon', Id: id
data: { }, (res) => {
CouponId: id if (res.resultCode == 1) {
} uni.showToast({
}, title: res.message,
(res) => { icon: "none"
if (res.resultCode == 1) { });
uni.showToast({ this.g.couponReceiveCount=1;
title: res.message,
icon: "none"
});
this.g.IsReceive = 1;
}
} }
); }, (failed) => {
uni.showToast({
title: failed.message,
icon: "none",
});
}, (error) => {
})
}, },
gouseUrl(g) { gouseUrl(g) {
uni.redirectTo({ uni.redirectTo({
url: '/pages/index/index' url: '/pages/index/index'
......
pages/coupon/list/list.vue
View file @ ac611249
<template> <template>
<view class="couponlistStyle" :style="{ height: contentHeight }"> <view class="couponlistStyle height100vh column">
<u-empty v-if="g.length == 0" text="暂无相关优惠券" mode="coupon"></u-empty> <view>
<view class="relative">
<headerCoupon style="position: absolute; left: 0;top: 0;z-index: 1;"></headerCoupon>
<img class="block"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638747792785027173.png"
style="width: 750rpx;height: 723rpx;"/>
</view>
</view>
<view class="col column">
<view class="couponType relative">
<view class="couponTypeBg row-sbs-n">
<scroll-view scroll-x :scroll-left="scrollLeft"
scroll-with-animation style="height: 70rpx; white-space: nowrap;">
<view class="row">
<view class="couponTypeTitle column relative"
:class="[msg.CouponsUseScope==item.Id?'active':'']"
v-for="(item, index) in ScopeOfUseList"
:key="index"
@click="changeHandler(item.Id)">
<text>{{ item.Name }}</text>
<view v-if="msg.CouponsUseScope==item.Id"
class="borderActive">
<view></view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
<view class="couponListBg col">
<u-empty v-if="g.length == 0" text="暂无相关优惠券" mode="coupon" padding-top="5"></u-empty>
<view
v-if="g.length > 0"
style="height: 100%;"
>
<scroll-view
scroll-y
:enable-back-to-top="true"
:enable-flex="true"
@scrolltolower="lower"
:style="{ height: '100%' }"
>
<view class="couponlist">
<view class="c_list_item row"
:class="[x.couponReceiveCount>0?'active':'']"
v-for="(x, i) in g" :key="i" @click="goUrl(x)">
<view class="item_top column items-center justify-center">
<view>
<text v-if="x.couponsType==1">￥</text>
<text style="font-size: 54rpx;font-weight: bold;">{{x.denomination }}</text>
<text v-if="x.couponsType==2" style="margin-left: 10rpx;">折</text>
</view>
<Text>满{{Number(x.useCondition) }}可用</Text>
</view>
<view class="item_b col relative">
<view class="row">
<text class="item_b_l_title">{{ x.couponsUseScope }}</text>
<text class="item_b_l_text">{{x.couponsType==1?'抵扣券':'折扣券'}}</text>
</view>
<view class="row-sbas-n">
<view class="col item_b_r_text">
{{ x.couponsName }}
</view>
<view class="item_b_r_buttom">
<view class="receive" @click.stop="receive(x,i)">
<Text>{{x.couponReceiveCount>0?'已领取':'立即领取'}} </Text>
</view>
</view>
</view>
<img v-if="x.couponReceiveCount>0" class="item_b_r_RecAlr" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638747799527913675.png"/>
</view>
</view>
</view>
<view style="padding: 0 25rpx;">
<u-loadmore
:status="status"
:load-text="loadText"
:font-size="24"
:margin-top="20"
:margin-bottom="20"
bg-color="#f3f4f6"
/>
</view>
</scroll-view>
</view>
<view <view class="loading" style="padding: 0 25rpx;" v-if="loading">
v-if="g.length > 0" <u-loading mode="flower" size="48">></u-loading>
style=" <Text style="color: #fff; margin-top: 10rpx;">加载中...</Text>
height: calc(100vh ); </view>
width: calc(100vw); </view>
overflow: hidden; </view>
"
>
<scroll-view
:scroll-y="true"
:enable-back-to-top="true"
:enable-flex="true"
@scrolltolower="lower"
:style="{ height: '100%' }"
>
<view class="couponlist">
<view class="c_list_item" v-for="(x, i) in g" :key="i" @click="goUrl(x)">
<view class="item_top">
<view class="item_top_l">
<view style="display: flex;align-items: flex-end;">
<Text style='font-size: 32px;'>{{Number(x.DiscountsPrice)}} </Text>
<Text style='font-size: 14px;'>{{x.CouponType==2?'折':""}}</Text>
</view>
<view style="display: flex;flex-direction: column;margin-left: 10px;width: 210px;">
<Text class='top_title'>{{x.Name}}</Text>
<Text>满{{Number(x.MinConsumePrice) }}可用</Text>
<Text v-if='Number(x.MaxDiscountsPrice)>1'>优惠上限:￥{{Number(x.MaxDiscountsPrice) }}</Text>
</view>
</view>
<view class="receive" @click.stop="receive(x,i)">
<Text>{{x.IsReceive==1?'已领取':'立即领取'}} </Text>
</view>
</view>
<view class="item_b">
<Text v-if='x.IndateType==1'>领券后{{x.IndateDay}}天过期</Text>
<Text v-if='x.IndateType==2'>有效日期:{{x.StartDate}}-{{x.EndDate}}</Text>
<!-- <Text class="top_title" >{{x.UseTypeStr}}</Text> -->
<Text class='top_title' v-if='x.UseType==1'>适用类别: <Text v-for="(item, index) in x.ProductList" :key="index">{{item.Relevance}}</Text> </Text>
<Text class='top_title' v-if='x.UseType==2'>适用商品: <Text v-for="(item, index) in x.ProductList" :key="index">{{item.Relevance}}</Text> </Text>
<Text class='top_title' v-if='x.UseType==3'>适用范围:全场通用</Text>
<Text class='top_title' v-if='x.UseType==4'>适用方式:当面付</Text>
</view>
</view>
</view>
<u-loadmore
:status="status"
:load-text="loadText"
:font-size="24"
:margin-top="20"
:margin-bottom="20"
bg-color="#f3f4f6"
/>
</scroll-view>
</view>
<view class="loading" v-if="loading">
<u-loading mode="flower" size="48">></u-loading>
<Text style="color: #fff; margin-top: 10rpx;">加载中...</Text>
</view>
<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth= 'gbAuth'></auth> <auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth= 'gbAuth'></auth>
</view> </view>
</template> </template>
<script> <script>
import auth from "../../../components/auth/index.vue"; import auth from "../../../components/auth/index.vue";
import headerCoupon from "@/components/header/header";
export default { export default {
components: { components: {
auth auth,
headerCoupon
}, },
data() { data() {
return { return {
...@@ -84,8 +118,8 @@ export default { ...@@ -84,8 +118,8 @@ export default {
U:{}, U:{},
msg:{ msg:{
pageIndex: 1, pageIndex: 1,
pageSize:10, pageSize: 10,
SmallShopId:0, CouponsUseScope: -1,
}, },
page_count: 1, page_count: 1,
status: "loadmore", status: "loadmore",
...@@ -94,9 +128,18 @@ export default { ...@@ -94,9 +128,18 @@ export default {
loading: "努力加载中", loading: "努力加载中",
nomore: "没有更多了", nomore: "没有更多了",
}, },
ScopeOfUseList:[],
activeItemStyle:{
backgroundColor: '#f3f4f6',
color: '#232323',
fontWeight: 'bold',
fontSize: '28rpx',
},
scrollLeft: 0,
}; };
}, },
created() { created() {
this.getScopeOfUse()
this.contentHeight = this.$utils.calcContentHeight(-40) + "px"; this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
this.mainColor = this.$uiConfig.mainColor; this.mainColor = this.$uiConfig.mainColor;
}, },
...@@ -132,31 +175,63 @@ export default { ...@@ -132,31 +175,63 @@ export default {
}, },
methods: { methods: {
SearchData() {
this.msg.pageIndex = 1;
this.g = [];
this.init();
},
getScopeOfUse() {
this.apipost("coupon_post_GetCouponAllotOrderTypeEnumList", {}, (res) => {
if (res.resultCode == 1) {
this.ScopeOfUseList = res.data
this.ScopeOfUseList.unshift({
Id: -1,
Name: '不限'
})
}
}, (failed) => {
uni.showToast({
title: failed.message,
icon: "none",
});
}, (error) => {
})
},
changeHandler(i) {
this.msg.CouponsUseScope = i
this.SearchData()
},
init() { init() {
this.msg.SmallShopId = this.u.UserSmallShopId this.apipost("b2c_post_GetWechatCouponPageList", this.msg, (res) => {
this.request2( if (res.resultCode == 1) {
{ this.loading = false;
url: '/api/AppletUser/GetAllCouponPageList', this.g = this.g.concat(res.data.pageData);
data: this.msg this.g.forEach((x) => {
}, if(x.effectDate) {
res => { let date = new Date(x.effectDate);
x.effectDate = this.$utils.formatDates(date,'yyyy-MM-dd')
if(res.resultCode==1){ }
if(x.expirationDate) {
this.loading = false; let date = new Date(x.expirationDate);
this.g = this.g.concat(res.data.pageData); x.expirationDate = this.$utils.formatDates(date,'yyyy-MM-dd');
}
this.page_count = res.data.pageCount; // 格式化代码
if (this.page_count == 1) { })
this.status = "nomore"; this.page_count = res.data.pageCount;
} this.status = "loadmore"
} if (this.page_count == 1||this.page_count == this.msg.pageIndex) {
} this.status = "nomore";
); }
}
}, (failed) => {
uni.showToast({
title: failed.message,
icon: "none",
});
}, (error) => {
})
}, },
lower(e) { lower(e) {
if (this.msg.pageIndex < this.page_count) { if (this.msg.pageIndex < this.page_count) {
this.msg.pageIndex++; this.msg.pageIndex++;
this.status = "loading"; this.status = "loading";
...@@ -171,27 +246,24 @@ export default { ...@@ -171,27 +246,24 @@ export default {
}); });
}, },
receive(x,i){ receive(x,i){
if(x.IsReceive==0){ if(x.couponReceiveCount==0){
this.request2( this.apipost("b2c_post_CustomerGrantCoupon", {
{ Id: x.id
url: '/api/AppletUser/GrantCoupon', }, (res) => {
data: { if (res.resultCode == 1) {
CouponId:x.CouponId uni.showToast({
}
},
(res) => {
if(res.resultCode==1){
uni.showToast({
title: res.message, title: res.message,
icon: "none" icon: "none"
}); });
this.g[i].IsReceive=1; this.g[i].couponReceiveCount=1;
} }
}, (failed) => {
} uni.showToast({
); title: failed.message,
icon: "none",
});
}, (error) => {
})
}else{ }else{
uni.showToast({ uni.showToast({
title: "已领取过优惠券", title: "已领取过优惠券",
...@@ -212,10 +284,46 @@ export default { ...@@ -212,10 +284,46 @@ export default {
}, },
}; };
</script> </script>
<style> <style lang="scss" scoped>
@import url("@/asset/css/flex.css");
.couponTypeTitle{
text-align: center;
position: relative;
fongt-size: 28rpx;
padding: 0 31rpx;
}
.couponTypeTitle.active{
font-weight: bold;
}
.borderActive{
position: absolute;
left: 0;
right: 0;
bottom: -24rpx;
}
.borderActive view{
width: 36rpx;
height: 6rpx;
background: #B99846;
border-radius: 6rpx;
margin: auto;
margin-top: 24rpx;
}
.couponTypeBg{
background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638747826838391147.png')no-repeat;
background-size: 100% 100%;
position: absolute;
top: -25rpx;
left: 0;
right: 0;
padding: 42rpx 31rpx 32rpx 31rpx;
}
.couponType{
width: 100%;
height: 76rpx;
}
.couponlistStyle { .couponlistStyle {
width: 100%; width: 100%;
height: 100%;
background: #f3f4f6; background: #f3f4f6;
} }
.couponlistStyle .couponlist{ .couponlistStyle .couponlist{
...@@ -223,71 +331,113 @@ export default { ...@@ -223,71 +331,113 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-top: 20rpx;
} }
.couponlistStyle .c_list_item{ .couponlistStyle .c_list_item{
width: 94%; width: 94%;
display: flex;
flex-direction: column;
border-radius: 10rpx; border-radius: 10rpx;
overflow: hidden; overflow: hidden;
margin-top: 10px; margin-top: 25rpx;
border:1px solid #f5f5f5
} }
.couponlistStyle .c_list_item .item_top{ .couponlistStyle .c_list_item .item_top{
width: 100%; width: 40%;
height: 90px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 10px; padding: 40rpx 0 42rpx 0;
background-image: linear-gradient( background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638747799527141825.png')no-repeat;
to bottom right, background-size: 100% 100%;
rgb(117, 174, 246), color: #FF3166;
rgb(56, 106, 244)
);
color: #fff;
} }
.couponlistStyle .c_list_item .item_top .item_top_l{
display: flex;
align-items: center;
}
.couponlistStyle .c_list_item .top_title{ .couponlistStyle .c_list_item .top_title{
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.couponlistStyle .c_list_item .item_top .receive{ .c_list_item .receive{
width: 90px; width: 132rpx;
height: 30px; height: 54rpx;
border-radius: 15px; border-radius: 10rpx;
background: #fff; background: black;
color: #6995EE; color: #fff;
font-size: 14px; font-size: 28rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 2rpx solid black;
}
.c_list_item.active .receive{
background: #fff;
color: black;
}
.couponListBg{
background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638747799385259711.jpg') repeat-y;
background-size: 100% auto;
} }
.couponlistStyle .item_b{ .item_b{
padding-left: 30rpx;
padding-top: 37rpx;
padding-right: 28rpx;
background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638747799527385951.png')no-repeat;
background-size: 100% 100%;
}
.item_b_r_RecAlr{
position: absolute;
right: 0;
top: 0;
z-index: 1;
width: 97rpx;
height: 79rpx;
}
.couponlistStyle .item_b_r{
font-family: '213'; font-family: '213';
width: 100%;
height: 60px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 10px; padding: 10px;
background-color: #fff;
justify-content: space-around; justify-content: space-around;
font-size: 12px; font-size: 12px;
position: relative; position: relative;
} }
.item_b_l_title{
font-family: PingFang SC;
font-weight: bold;
font-size: 28rpx;
color: #B99846;
}
.item_b_l_text{
font-family: PingFang SC;
font-weight: bold;
font-size: 28rpx;
color: black;
margin-left: 10rpx;
}
.item_b_r_text{
font-family: PingFang SC;
font-weight: 400;
font-size: 20rpx;
color: #8D8D8D;
line-height: 28rpx;
margin-top: 15rpx;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
letter-spacing: 2rpx;
}
.item_b-r{
width: 133rpx;
}
.item_b_r_buttom{
margin-left: 25rpx;
}
.couponlistStyle .c_list_item .item_b:before { .couponlistStyle .c_list_item .item_b:before {
content: ""; content: "";
display: block; display: block;
width: 100%;
height: 12px; height: 12px;
background-size: 12px 12px; /* 一个repeat的大小 */ background-size: 12px 12px; /* 一个repeat的大小 */
background-repeat: repeat-x; background-repeat: repeat-x;
......
plugin/utils.js
View file @ ac611249
...@@ -148,6 +148,29 @@ function VersionUpdate() { ...@@ -148,6 +148,29 @@ function VersionUpdate() {
} }
} }
//方法二
function formatDates(date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
}
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
};
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + '';
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
}
}
return fmt;
};
function padLeftZero(str) {
return ('00' + str).substr(str.length);
}
export default { export default {
calcContentHeight, calcContentHeight,
SystemInfo, SystemInfo,
...@@ -157,4 +180,5 @@ export default { ...@@ -157,4 +180,5 @@ export default {
SubscribeMsgAli, SubscribeMsgAli,
// #endif // #endif
VersionUpdate, VersionUpdate,
formatDates,
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment