Skip to content

7
7-Eleven
Commit c6942ce2 by 高淑倩
Options

add: 优惠券详情

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