Skip to content

7
7-Eleven
Commit c6942ce2 by 高淑倩
Options

add: 优惠券详情

parent c5dd3e2d
Showing with 273 additions and 127 deletions
src/app.json
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
"pages/deliveryService/deliveryService", "pages/deliveryService/deliveryService",
"pages/coupons/coupons", "pages/coupons/coupons",
"pages/couponDetail/couponDetail", "pages/couponDetail/couponDetail",
"pages/couponCodeDetail/couponCodeDetail",
"pages/consumptionDetails/consumptionDetails", "pages/consumptionDetails/consumptionDetails",
"pages/IntegralMall/IntegralMall", "pages/IntegralMall/IntegralMall",
"pages/integralMallDetail/integralMallDetail", "pages/integralMallDetail/integralMallDetail",
......
src/pages/couponCodeDetail/couponCodeDetail.js 0 → 100644
// pages/couponCodeDetail.js
const app = getApp()
const wxService = require('../../utils/wxService')
const utils = require('../../utils/util')
const envInfo = require('../../config/index').envInfo
var wxbarcode = require('../../codeUtils/index.js');
wxService.page({
/**
* 页面的初始数据
*/
data: {
couponDetailTitle: '',
cardno: ''
},
/**
* 生命周期函数--监听页面显示
*/
onShow () {
const {title,cardno} = this.options
this.setData({
couponDetailTitle: title,
cardno
})
this.getCouponDetail(cardno)
// 条形码
wxbarcode.barcode('barcode', cardno, 600, 180);
},
// 查询单个优惠券
getCouponDetail(cardno){
wx.showLoading({
title: '加载中'
})
wxService.post(`/coupon/coupon/get?cardNo=${cardno}`).then(res => {
const {result,data} = res.data
if(result == 0){
wx.hideLoading()
} else {
wx.hideLoading()
wx.showToast({
title: `${res.desc}`,
icon: 'none'
})
}
}).finally(() => {})
}
})
\ No newline at end of file
src/pages/couponCodeDetail/couponCodeDetail.json 0 → 100644
{
"navigationBarTitleText": "券码详情页",
"usingComponents": {}
}
\ No newline at end of file
src/pages/couponCodeDetail/couponCodeDetail.wxml 0 → 100644
<!--pages/couponCodeDetail.wxml-->
<view class="container-coupon page">
<view class="panel">
<view class="qrcode">
<view class='avatar-img'>
<image src='/assets/imgs/avatar.png'></image>
</view>
<view class='title fs-36'>{{couponDetailTitle}}</view>
</view>
<view class='line'>
<image src='/assets/imgs/line.png'></image>
</view>
<view class="barcode">
<canvas canvas-id="barcode" />
</view>
<view class='bottom-code'>{{cardno}}</view>
</view>
</view>
\ No newline at end of file
src/pages/couponCodeDetail/couponCodeDetail.wxss 0 → 100644
/* pages/couponCodeDetail/couponCodeDetail.wxss */
@import './../../base/base.wxss';
page {
background-color: #fff;
}
.page {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container-coupon {
padding-bottom: 10rpx;
}
.panel {
width:642rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
margin: 52rpx 60rpx;
box-sizing: border-box;
border-radius: 10rpx;
background-color: #fff;
box-shadow: 0 0 30rpx 10rpx rgba(0,0,0,0.1);
}
.barcode {
display: flex;
height: 320rpx;
flex-direction: column;
justify-content: center;
align-items: center;
padding:0 20rpx;
box-sizing: border-box;
}
.barnum {
width: 670rpx;
height: 100rpx;
line-height: 100rpx;
font-size: 38rpx;
font-weight: bold;
text-align: center;
letter-spacing: 10rpx;
white-space: nowrap;
}
.barcode > canvas {
width: 600rpx;
height: 200rpx;
}
.qrcode {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.bottom-code{
font-size: 40rpx;
color: #05c35b;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
margin-top: 30rpx;
padding-bottom: 140rpx;
}
.avatar-img image{
width: 81rpx;
height: 81rpx;
margin-top: 58rpx;
}
.title{
color: #333333;
margin-top: 66rpx;
}
.line image{
width: 100%;
height: 42rpx;
margin: 40rpx 0;
}
src/pages/couponDetail/couponDetail.js
// pages/coupons.js // pages/couponDetail/couponDetail.js
const app = getApp() const app = getApp()
const wxService = require('../../utils/wxService') const wxService = require('../../utils/wxService')
const utils = require('../../utils/util') const utils = require('../../utils/util')
const envInfo = require('../../config/index').envInfo const envInfo = require('../../config/index').envInfo
var wxbarcode = require('../../codeUtils/index.js');
wxService.page({ wxService.page({
/** /**
* 页面的初始数据 * 页面的初始数据
*/ */
data: { data: {
couponDetailTitle: '', isExchange:false,
cardno: '' couponDetail:{}
}, },
/** /**
* 生命周期函数--监听页面显示 * 生命周期函数--监听页面显示
*/ */
onShow () { onShow () {
const {title,cardno} = this.options const {cardno} = this.options
this.getCouponDetail(cardno)
},
//立即兑换
exchange(){
this.setData({ this.setData({
couponDetailTitle: title, isExchange :true
cardno
}) })
this.getCouponDetail(cardno)
// 条形码
wxbarcode.barcode('barcode', cardno, 600, 180);
}, },
// 查询单个优惠券 // 卡券详情
getCouponDetail(cardno){ getCouponDetail(id){
wx.showLoading({ wx.showLoading({
title: '加载中' title: '加载中'
}) })
wxService.post(`/coupon/coupon/get?cardNo=${cardno}`).then(res => { wxService.post(`/coupon/coupon/get?cardNo=${id}`).then(res => {
const {result,data} = res.data const {result,data} = res.data
if(result == 0){ if(result == 0){
wx.hideLoading() wx.hideLoading()
} else { data.coupon.startTime = data.coupon.startTime.substring(0,10)
wx.hideLoading() data.coupon.endTime = data.coupon.endTime.substring(0,10)
wx.showToast({ this.setData({
title: `${res.desc}`, couponDetail: data
icon: 'none'
}) })
} }
}).finally(() => {}) }).finally(() => {
wx.hideLoading()
})
},
handelPresentCouponCode(e) {
let data = e.currentTarget.dataset
wxService.router(`/pages/couponCodeDetail/couponCodeDetail`).search(data)
} }
}) })
\ No newline at end of file
src/pages/couponDetail/couponDetail.json
{ {
"navigationBarTitleText": "券码详情页", "navigationBarTitleText": "我的卡券",
"usingComponents": {} "usingComponents": {}
} }
\ No newline at end of file
src/pages/couponDetail/couponDetail.wxml
<!--pages/userCenter.wxml--> <!--pages/couponDetail/couponDetail.wxml-->
<!--<view class='page-couponDetail'> <view class='page-integral-detail'>
<view class='coupon-detail-content'> <view class='coupon-wrap'>
<view class='coupon-detail-header'> <view class='coupon-list'>
<view class='avatar-img'> <image class='coupon-bg' src='/assets/imgs/coupon-bg.png' />
<image src='/assets/imgs/avatar.png'></image> <view class='coupon-img'>
<image wx:if="{{couponDetail.couponDetail.style.takeCouponBgimg}}" src='{{couponDetail.couponDetail.style.takeCouponBgimg}}'></image>
<image wx:else src='/assets/imgs/qr-code.png'></image>
</view> </view>
<view class='title fs-36'>{{couponDetailTitle}}</view> <view class='coupon-info'>
<view class='coupon-name fs-28'>{{couponDetail.couponSetting.title}}</view>
<view class='coupon-desc fs-28'>{{couponDetail.coupon.startTime}} 至 {{couponDetail.coupon.endTime}}</view>
</view> </view>
<view class='line'> <view class='coupon-code fs-24' bindtap='exchange' bindtap="handelPresentCouponCode">出示券码</view>
<image src='/assets/imgs/line.png'></image>
</view> </view>
<view class='qr-code'> <view class='integral-detail' wx:if="{{couponDetail.couponDetail.style.takeCouponBgimg}}">
<view class='code-img'> <image src='{{couponDetail.couponDetail.style.takeCouponBgimg}}' mode="widthFix" style="width: 100%;"></image>
<canvas canvas-id="barcode" />
</view> </view>
<view class='bottom-code'>{{cardno}}</view> <button type='primary' class="redeem-now" bindtap='exchange' bindtap="handelPresentCouponCode">出示券码</button>
</view>
</view>
</view>-->
<view class="container-coupon page">
<view class="panel">
<view class="qrcode">
<view class='avatar-img'>
<image src='/assets/imgs/avatar.png'></image>
</view>
<view class='title fs-36'>{{couponDetailTitle}}</view>
</view>
<view class='line'>
<image src='/assets/imgs/line.png'></image>
</view>
<view class="barcode">
<canvas canvas-id="barcode" />
</view>
<view class='bottom-code'>{{cardno}}</view>
</view> </view>
</view> </view>
src/pages/couponDetail/couponDetail.wxss
/* pages/couponDetail/couponDetail.wxss */ /* pages/couponDetail/couponDetail.wxss */
@import './../../base/base.wxss'; @import './../../base/base.wxss';
page { .coupon-wrap{
background-color: #fff; padding: 20rpx;
clear: both;
} }
.page { .redeem-now{
display: flex; font-size: 28rpx!important;
flex-direction: column; height: 88rpx;
justify-content: center; line-height: 88rpx;
align-items: center; background-color: rgb(0, 188, 112)!important;
} }
.coupon-list{
.container-coupon { width: 712rpx;
padding-bottom: 10rpx; height: 209rpx;
position: relative;
margin-bottom: 20rpx;
} }
.coupon-bg{
.panel { width: 712rpx;
width:642rpx; height: 209rpx;
display: flex; position: absolute;
flex-direction: column; top: 0;
justify-content: space-between; left: 0;
align-items: stretch; z-index: -1;
margin: 52rpx 60rpx;
box-sizing: border-box;
border-radius: 10rpx;
background-color: #fff;
box-shadow: 0 0 30rpx 10rpx rgba(0,0,0,0.1);
} }
.coupon-img image{
.barcode { width: 172rpx;
display: flex; height: 172rpx;
height: 320rpx; position: absolute;
flex-direction: column; top: 18rpx;
justify-content: center; left: 16rpx;
align-items: center;
padding:0 20rpx;
box-sizing: border-box;
} }
.coupon-info{
.barnum { position: absolute;
width: 670rpx; top: 30rpx;
height: 100rpx; left: 236rpx;
line-height: 100rpx; }
font-size: 38rpx; .coupon-name{
font-weight: bold; color:#000;
text-align: center;
letter-spacing: 10rpx;
white-space: nowrap;
} }
.coupon-desc{
.barcode > canvas { width: 360rpx;
width: 600rpx; color:#999999;
height: 200rpx; margin-top: 10rpx;
}
.coupon-code{
color: #ffffff;
position: absolute;
right: 20rpx;
top: 30rpx;
width: 24rpx;
word-wrap: break-word;
font-weight: bold;
} }
.integral-detail{
.qrcode { margin-top: 90rpx;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
} }
.integral-list{
.bottom-code{ margin-bottom: 60rpx;
font-size: 40rpx;
color: #05c35b;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
margin-top: 30rpx;
padding-bottom: 140rpx;
} }
.avatar-img image{ .integral-title,.integral-desc{
width: 81rpx; display: inline-block;
height: 81rpx;
margin-top: 58rpx;
} }
.title{ .integral-title{
color: #333333; color: #999999;
margin-top: 66rpx; vertical-align: top;
margin-right: 50rpx;
text-align: right;
width: 120rpx;
} }
.line image{ .integral-desc{
width: 100%; width: 500rpx;
height: 42rpx; color: #666666;
margin: 40rpx 0;
} }
\ No newline at end of file
src/pages/coupons/coupons.js
...@@ -71,9 +71,13 @@ wxService.page({ ...@@ -71,9 +71,13 @@ wxService.page({
this.getCouponList(1,10,1) this.getCouponList(1,10,1)
this.getCouponList(1,10,0) this.getCouponList(1,10,0)
}, },
handelPresentCouponDetail(e) {
let {cardno} = e.currentTarget.dataset
wxService.router(`/pages/couponDetail/couponDetail`).search({cardno})
},
handelPresentCouponCode(e) { handelPresentCouponCode(e) {
let data = e.currentTarget.dataset let data = e.currentTarget.dataset
wxService.router(`/pages/couponDetail/couponDetail`).search(data) wxService.router(`/pages/couponCodeDetail/couponCodeDetail`).search(data)
}, },
//获取优惠券列表 //获取优惠券列表
......
src/pages/coupons/coupons.wxml
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
wx:for-index="k" wx:for-index="k"
wx:key="{{k}}" wx:key="{{k}}"
> >
<view data-title="{{item.title}}" data-cardNo="{{item.cardNo}}" bindtap="handelPresentCouponCode"> <view data-title="{{item.title}}" data-cardNo="{{item.cardNo}}" data-id="{{item.couponId}}" bindtap="handelPresentCouponDetail">
<image class='coupon-bg' src='/assets/imgs/coupon-bg.png'/> <image class='coupon-bg' src='/assets/imgs/coupon-bg.png'/>
<view class='coupon-img'> <view class='coupon-img'>
<image wx:if="{{item.takeCouponBgimg}}" class='coupon-bg' src='{{item.takeCouponBgimg}}' /> <image wx:if="{{item.takeCouponBgimg}}" class='coupon-bg' src='{{item.takeCouponBgimg}}' />
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
<view class='coupon-time fs-24'>{{item.startTime}} 至 {{item.endTime}}</view> <view class='coupon-time fs-24'>{{item.startTime}} 至 {{item.endTime}}</view>
<view class='coupon-desc fs-24'>{{item.notice}}</view> <view class='coupon-desc fs-24'>{{item.notice}}</view>
</view> </view>
<view class='coupon-code fs-24'>出示劵码</view> <view class='coupon-code fs-24' bindtap="handelPresentCouponCode">出示劵码</view>
</view> </view>
</view> </view>
</view> </view>
......
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