Skip to content

7
7-Eleven
Commit ab8ec00b by 高淑倩
Options

积分换物页面

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