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 @@
.items-center{
align-items: center;
}
.justify-center{
justify-content: center;
}
.flex1,.col{
flex: 1;
}
......
pages.json
View file @ ac611249
......@@ -203,7 +203,13 @@
{
"root": "pages/coupon",
"pages": [{
"path": "list/list"
"path": "list/list",
"style": {
"navigationStyle": "custom"
},
"globalStyle": {
"navigationStyle": "custom"
}
},
{
"path": "details/details",
......
pages/coupon/details/details.vue
View file @ ac611249
......@@ -46,11 +46,20 @@
<view class="cdTiaojianBRight">
<view class="cdTiaojianBRTitle">使用说明</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>
</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>
</template>
......@@ -98,26 +107,27 @@
console.log("this.g", this.g);
},
methods: {
receive(id) {
this.request2({
url: '/api/AppletUser/GrantCoupon',
data: {
CouponId: id
}
},
(res) => {
if (res.resultCode == 1) {
uni.showToast({
title: res.message,
icon: "none"
});
this.g.IsReceive = 1;
}
receive(id){
this.apipost("b2c_post_CustomerGrantCoupon", {
Id: id
}, (res) => {
if (res.resultCode == 1) {
uni.showToast({
title: res.message,
icon: "none"
});
this.g.couponReceiveCount=1;
}
);
}, (failed) => {
uni.showToast({
title: failed.message,
icon: "none",
});
}, (error) => {
})
},
gouseUrl(g) {
uni.redirectTo({
url: '/pages/index/index'
......
pages/coupon/list/list.vue
View file @ ac611249
<template>
<view class="couponlistStyle" :style="{ height: contentHeight }">
<u-empty v-if="g.length == 0" text="暂无相关优惠券" mode="coupon"></u-empty>
<view class="couponlistStyle height100vh column">
<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
v-if="g.length > 0"
style="
height: calc(100vh );
width: calc(100vw);
overflow: hidden;
"
>
<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>
<view class="loading" style="padding: 0 25rpx;" v-if="loading">
<u-loading mode="flower" size="48">></u-loading>
<Text style="color: #fff; margin-top: 10rpx;">加载中...</Text>
</view>
</view>
</view>
<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth= 'gbAuth'></auth>
</view>
</template>
<script>
import auth from "../../../components/auth/index.vue";
import headerCoupon from "@/components/header/header";
export default {
components: {
auth
auth,
headerCoupon
},
data() {
return {
......@@ -84,8 +118,8 @@ export default {
U:{},
msg:{
pageIndex: 1,
pageSize:10,
SmallShopId:0,
pageSize: 10,
CouponsUseScope: -1,
},
page_count: 1,
status: "loadmore",
......@@ -94,9 +128,18 @@ export default {
loading: "努力加载中",
nomore: "没有更多了",
},
ScopeOfUseList:[],
activeItemStyle:{
backgroundColor: '#f3f4f6',
color: '#232323',
fontWeight: 'bold',
fontSize: '28rpx',
},
scrollLeft: 0,
};
},
created() {
this.getScopeOfUse()
this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
this.mainColor = this.$uiConfig.mainColor;
},
......@@ -132,31 +175,63 @@ export default {
},
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() {
this.msg.SmallShopId = this.u.UserSmallShopId
this.request2(
{
url: '/api/AppletUser/GetAllCouponPageList',
data: this.msg
},
res => {
if(res.resultCode==1){
this.loading = false;
this.g = this.g.concat(res.data.pageData);
this.page_count = res.data.pageCount;
if (this.page_count == 1) {
this.status = "nomore";
}
}
}
);
this.apipost("b2c_post_GetWechatCouponPageList", this.msg, (res) => {
if (res.resultCode == 1) {
this.loading = false;
this.g = this.g.concat(res.data.pageData);
this.g.forEach((x) => {
if(x.effectDate) {
let date = new Date(x.effectDate);
x.effectDate = this.$utils.formatDates(date,'yyyy-MM-dd')
}
if(x.expirationDate) {
let date = new Date(x.expirationDate);
x.expirationDate = this.$utils.formatDates(date,'yyyy-MM-dd');
}
// 格式化代码
})
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) {
if (this.msg.pageIndex < this.page_count) {
this.msg.pageIndex++;
this.status = "loading";
......@@ -171,27 +246,24 @@ export default {
});
},
receive(x,i){
if(x.IsReceive==0){
this.request2(
{
url: '/api/AppletUser/GrantCoupon',
data: {
CouponId:x.CouponId
}
},
(res) => {
if(res.resultCode==1){
uni.showToast({
if(x.couponReceiveCount==0){
this.apipost("b2c_post_CustomerGrantCoupon", {
Id: x.id
}, (res) => {
if (res.resultCode == 1) {
uni.showToast({
title: res.message,
icon: "none"
});
this.g[i].IsReceive=1;
}
}
);
this.g[i].couponReceiveCount=1;
}
}, (failed) => {
uni.showToast({
title: failed.message,
icon: "none",
});
}, (error) => {
})
}else{
uni.showToast({
title: "已领取过优惠券",
......@@ -212,10 +284,46 @@ export default {
},
};
</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 {
width: 100%;
height: 100%;
background: #f3f4f6;
}
.couponlistStyle .couponlist{
......@@ -223,71 +331,113 @@ export default {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20rpx;
}
.couponlistStyle .c_list_item{
width: 94%;
display: flex;
flex-direction: column;
border-radius: 10rpx;
overflow: hidden;
margin-top: 10px;
border:1px solid #f5f5f5
margin-top: 25rpx;
}
.couponlistStyle .c_list_item .item_top{
width: 100%;
height: 90px;
width: 40%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
background-image: linear-gradient(
to bottom right,
rgb(117, 174, 246),
rgb(56, 106, 244)
);
color: #fff;
padding: 40rpx 0 42rpx 0;
background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638747799527141825.png')no-repeat;
background-size: 100% 100%;
color: #FF3166;
}
.couponlistStyle .c_list_item .item_top .item_top_l{
display: flex;
align-items: center;
}
.couponlistStyle .c_list_item .top_title{
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.couponlistStyle .c_list_item .item_top .receive{
width: 90px;
height: 30px;
border-radius: 15px;
background: #fff;
color: #6995EE;
font-size: 14px;
.c_list_item .receive{
width: 132rpx;
height: 54rpx;
border-radius: 10rpx;
background: black;
color: #fff;
font-size: 28rpx;
display: flex;
align-items: 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';
width: 100%;
height: 60px;
display: flex;
flex-direction: column;
padding: 10px;
background-color: #fff;
justify-content: space-around;
font-size: 12px;
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 {
content: "";
display: block;
width: 100%;
height: 12px;
background-size: 12px 12px; /* 一个repeat的大小 */
background-repeat: repeat-x;
......
plugin/utils.js
View file @ ac611249
......@@ -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 {
calcContentHeight,
SystemInfo,
......@@ -157,4 +180,5 @@ export default {
SubscribeMsgAli,
// #endif
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