Skip to content

7
7-Eleven
Commit ab8ec00b by 高淑倩
Options

积分换物页面

parent d35edb65
Showing with 119 additions and 33 deletions
src/subPackage/page/pages/IntegralMallGoods/IntegralMallGoods.js
......@@ -11,6 +11,23 @@ wxService.page({
query: '',
totalPages: 0,
integralCouponList: [], // 积分兑换优惠券列表
integralGoodsList: [
{
title: "鸭肫兑换券",
point: 1,
thumbnail: "https://img3.bigaka.com/prd/3001/201910/20191011/30017c228f98-99e9-425b-b24c-43ec65333ea8.jpg",
},
{
title: "鸭肫兑换券",
point: 1,
thumbnail: "https://img3.bigaka.com/prd/3001/201910/20191011/30017c228f98-99e9-425b-b24c-43ec65333ea8.jpg",
},
{
title: "鸭肫兑换券",
point: 1,
thumbnail: "https://img3.bigaka.com/prd/3001/201910/20191011/30017c228f98-99e9-425b-b24c-43ec65333ea8.jpg",
}
], // 限量精品列表
noMore: false,
isExchange: false,
exchangeId: '',
......@@ -21,7 +38,7 @@ wxService.page({
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {},
onLoad: function (options) { },
handelTab(e) {
let curTab = e.currentTarget.dataset.tab
this.setData({
......@@ -55,9 +72,9 @@ wxService.page({
// })
// 查询所有生效中的活动
wxService.get(`/coupon/pointsRedemptionCouponSetting/getAllValid`).then(res => {
if(res){
const {result,data} = res.data
if(result == 0){
if (res) {
const { result, data } = res.data
if (result == 0) {
wx.hideLoading()
this.setData({
integralCouponList: data.reverse()
......@@ -69,10 +86,10 @@ wxService.page({
})
},
//立即兑换
exchange(e){
const {id, point} = e.currentTarget.dataset
exchange(e) {
const { id, point } = e.currentTarget.dataset
this.setData({
isExchange :true,
isExchange: true,
exchangeId: id,
exchangePoint: point
})
......@@ -82,13 +99,13 @@ wxService.page({
wxService.router(`/pages/memberRules/memberRules?type=2`)
},
goCouponDetail(e) {
const {id} = e.currentTarget.dataset
const { id } = e.currentTarget.dataset
wxService.router(`/pages/integralMallDetail/integralMallDetail?id=${id}`)
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
onPullDownRefresh: function () { },
/**
* 页面上拉触底事件的处理函数
......
src/subPackage/page/pages/IntegralMallGoods/IntegralMallGoods.wxml
......@@ -16,13 +16,14 @@
<view class='title-time-point'>1000积分将于2020-12清零</view>
</view>
<!-- tab -->
<view class='mall-tab'>
<!-- tab -->
<view class='mall-tab'>
<view class="tab-coupon {{currentTab=='coupon' ? 'tab-active':''}}" data-tab="coupon" bindtap="handelTab">优惠券</view>
<view class="tab-coupon {{currentTab=='goods' ? 'tab-active':''}}" data-tab="goods" bindtap="handelTab">限量精品</view>
</view>
<view class="tab-coupon-goods {{currentTab=='goods' ? 'tab-active':''}}" data-tab="goods" bindtap="handelTab">限量精品</view>
</view>
<!-- 优惠券列表-->
<!-- 优惠券列表-->
<view wx:if="{{currentTab == 'coupon'}}">
<view class='coupon-wrap' wx:if="{{integralCouponList.length}}">
<view
class='coupon-list'
......@@ -34,21 +35,19 @@
bindtap="goCouponDetail"
>
<view class="coupon-item">
<view class='coupon-img-title'>
<view class='coupon-img'>
<image wx:if="{{item.thumbnail}}" src='{{item.thumbnail}}' />
<image wx:else src='/assets/imgs/qr-code.png' />
</view>
<view class='coupon-info'>
<view class='coupon-time fs-24'>{{item.point}}积分</view>
<view class='coupon-name fs-28'>{{item.title}}</view>
<view class='coupon-desc fs-24'>查看详情 >>></view>
</view>
<view
class='coupon-code fs-24'
data-id="{{item.id}}"
data-point="{{item.point}}"
catchtap='exchange'
>立即兑换
</view>
<view class='coupon-btn'>
<view class='coupon-btn-click'>立即兑换</view>
<view class='coupon-btn-num'>{{item.point}}积分</view>
</view>
</view>
</view>
......@@ -59,6 +58,45 @@
<view class='empty-text'>没有任何卡劵</view>
</view>
</view>
</view>
<!-- goods -->
<view wx:if="{{currentTab =='goods'}}">
<view class='coupon-wrap' wx:if="{{integralGoodsList.length}}">
<view
class='coupon-list'
wx:for="{{integralGoodsList}}"
wx:for-item="item"
wx:for-index="k"
wx:key="{{k}}"
data-id="{{item.id}}"
bindtap="goCouponDetail"
>
<view class="coupon-item">
<view class='coupon-img-title'>
<view class='coupon-img'>
<image wx:if="{{item.thumbnail}}" src='{{item.thumbnail}}' />
<image wx:else src='/assets/imgs/qr-code.png' />
</view>
<view class='coupon-info'>
<view class='coupon-name fs-28'>{{item.title}}</view>
<view class='coupon-desc fs-24'>查看详情积分</view>
</view>
</view>
<view class='coupon-btn'>
<view class='coupon-btn-click'>立即兑换</view>
<view class='coupon-btn-num'>{{item.point}}积分</view>
</view>
</view>
</view>
</view>
<view class='empty-wrap' wx:if="{{!integralGoodsList.length}}">
<view class='empty-info'>
<image class='empty-img' src='/assets/imgs/empty-coupon.png' />
<view class='empty-text'>没有任何物品</view>
</view>
</view>
</view>
<exchange-coupon-modal exchangeId="{{exchangeId}}" exchangePoint="{{exchangePoint}}" isExchange='{{isExchange}}' />
<!--<no-more wx:if="{{noMore}}"/>-->
<!--goHome-->
......
src/subPackage/page/pages/IntegralMallGoods/IntegralMallGoods.wxss
......@@ -28,23 +28,48 @@ page {
clear: both;
}
.coupon-list {
margin-bottom: 20rpx;
margin-bottom: 10rpx;
}
.coupon-img-title {
display: flex;
align-items: center;
}
.coupon-item {
display: flex;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
background-image: url("data:image/png;base64,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");
align-items: center;
height: 144rpx;
background-color: #fff;
justify-content: space-between;
}
.coupon-btn {
margin-right: 30rpx;
}
.coupon-btn-click {
width: 153.8rpx;
height: 48rpx;
border-radius: 33rpx;
background-color: rgba(5, 195, 91, 1);
box-shadow: 0rpx 3rpx 10rpx 0rpx rgba(5, 195, 91, 0.3);
line-height: 48rpx;
color: rgba(255, 255, 255, 1);
font-size: 24rpx;
text-align: center;
}
.coupon-btn-num {
width: 153.8rpx;
height: 22rpx;
color: rgba(250, 100, 0, 1);
font-size: 22rpx;
text-align: center;
margin-top: 10rpx;
}
.coupon-img {
padding: 15rpx;
box-sizing: border-box;
margin-left: 30rpx;
}
.coupon-img image {
width: 172rpx;
height: 172rpx;
width: 80rpx;
height: 80rpx;
}
.coupon-info {
padding: 42rpx 39rpx;
......@@ -59,10 +84,16 @@ page {
font-size: 26rpx;
}
.coupon-desc {
color: #999;
/* color: #999;
margin-top: 11rpx;
width: 360rpx;
font-size: 24rpx;
font-size: 24rpx; */
color: rgba(118, 161, 213, 1);
font-size: 22rpx;
text-align: right;
margin-top: 18rpx;
}
.coupon-code {
color: #ffffff;
......@@ -144,7 +175,7 @@ page {
box-sizing: border-box;
margin-top: 10rpx;
}
.tab-coupon, .tab-goods {
.tab-coupon, .tab-goods,.tab-coupon-goods {
flex: 1;
text-align: center;
color: rgba(102, 102, 102, 1);
......
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