Skip to content

7
7-Eleven
Commit f74e77e2 by 赵雅纹
Options

优惠券

parent fcbc5b4a
Showing with 410 additions and 8 deletions
src/app.json
......@@ -10,7 +10,8 @@
"pages/coupons/coupons",
"pages/couponDetail/couponDetail",
"pages/consumptionDetails/consumptionDetails",
"pages/IntegralMall/IntegralMall"
"pages/IntegralMall/IntegralMall",
"pages/integralMallDetail/integralMallDetail"
],
"window": {
"backgroundTextStyle": "light",
......
src/pages/IntegralMall/IntegralMall.wxml
<!--pages/userCenter.wxml-->
<text>pages/userCenter.积分商城wxml</text>
<view class='page-integral-mall'>
<navigator hover-class='none' url='/pages/memberRules/memberRules'> <view class='integral-vip-rules'>会员规则</view></navigator>
<view class='coupon-wrap'>
<view class='coupon-list'>
<navigator hover-class='none' url='/pages/couponDetail/couponDetail'>
<image class='coupon-bg' src='/assets/imgs/coupon-bg.png'></image>
<view class='coupon-img'>
<image src='/assets/imgs/qr-code.png'></image>
</view>
<view class='coupon-info'>
<view class='coupon-name fs-28'>卡劵名称</view>
<view class='coupon-time fs-24'>时间</view>
<view class='coupon-desc fs-24'>查看详情</view>
</view>
<view class='coupon-code fs-24'>立即兑换</view>
</navigator>
</view>
<view class='coupon-list'>
<image class='coupon-bg' src='/assets/imgs/coupon-bg.png'></image>
<view class='coupon-img'>
<image src='/assets/imgs/qr-code.png'></image>
</view>
<view class='coupon-info'>
<view class='coupon-name fs-28'>卡劵名称</view>
<view class='coupon-time fs-24'>时间</view>
<view class='coupon-desc fs-24'>查看详情</view>
</view>
<view class='coupon-code fs-24'>出示劵码</view>
</view>
</view>
<view class='empty-wrap'>
<view class='empty-info'>
<image class='empty-img' src='/assets/imgs/empty-coupon.png'></image>
<view class='empty-text'>没有任何卡劵</view>
</view>
</view>
</view>
src/pages/IntegralMall/IntegralMall.wxss
/* pages/userCenter.wxss */
\ No newline at end of file
/* pages/userCenter.wxss */
@import './../../base/base.wxss';
.integral-vip-rules{
width:140rpx;
height:35rpx;
line-height: 35rpx;
text-align: center;
color: rgb(64, 205, 147);
font-size: 28rpx;
font-weight: 700;
border: 4rpx solid rgb(64, 205, 147);
padding: 5rpx 8rpx;
border-radius: 50rpx;
margin-top: 25rpx;
float: right;
margin-right: 20rpx;
}
.empty-wrap{
width: 300rpx;
margin: 190rpx auto 0;
text-align: center;
}
.empty-img{
width: 197rpx;
height: 176rpx;
margin-bottom: 48rpx;
}
.empty-text{
color: #cccccc;
font-size: 28rpx;
}
/* 卡劵列表 */
.coupon-wrap{
padding: 20rpx;
clear: both;
}
.coupon-list{
width: 712rpx;
height: 209rpx;
position: relative;
margin-bottom: 20rpx;
}
.coupon-bg{
width: 712rpx;
height: 209rpx;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.coupon-img image{
width: 172rpx;
height: 172rpx;
position: absolute;
top: 18rpx;
left: 16rpx;
}
.coupon-info{
position: absolute;
top: 30rpx;
left: 236rpx;
}
.coupon-name{
color:#05c35b;
}
.coupon-time{
color:#999999;
margin-top: 10rpx;
}
.coupon-desc{
color:#666666;
margin-top: 6rpx;
width: 360rpx;
}
.coupon-code{
color: #ffffff;
position: absolute;
right: 20rpx;
top: 30rpx;
width: 24rpx;
word-wrap: break-word;
font-weight: bold;
}
.invalid-coupon{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
z-index:3;
border-radius: 7rpx;
}
.invalid-img{
position: absolute;
width: 147rpx;
height: 147rpx;
right: 81rpx;
top: 31rpx;
z-index: 4;
}
src/pages/consumptionDetails/consumptionDetails.wxss
/* pages/consumptionDetails.wxss */
.consumption {
margin: 46rpx;
box-shadow: 0 0 10px #888;
......
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'>阳光柠檬茶1.5元购</view>
</view>
<view class='line'>
<image src='/assets/imgs/line.png'></image>
</view>
<view class='qr-code'>
<view class='top-code'>987876786</view>
<view class='code-img'>
<image src='/assets/imgs/avatar.png'></image>
</view>
<view class='bottom-code'>987868</view>
</view>
</view>
</view>
src/pages/couponDetail/couponDetail.wxss
/* pages/couponDetail/couponDetail.wxss */
\ No newline at end of file
/* pages/couponDetail/couponDetail.wxss */
.coupon-detail-content{
width: 642rpx;
margin: 52rpx auto;
/* background-color: #ffffff; */
text-align: center;
box-shadow: 0 0 30rpx 10rpx rgba(0,0,0,0.1);
}
.avatar-img image{
width: 81rpx;
height: 81rpx;
margin-top: 58rpx;
}
.title{
color: #333333;
margin-top: 66rpx;
}
.line image{
width: 642rpx;
height: 42rpx;
margin: 80rpx 0;
}
.top-code{
font-size: 24rpx;
color: #999999;
}
.code-img image{
width: 600rpx;
height: 150rpx;
}
.code-img{
margin-top: 30rpx;
}
.bottom-code{
font-size: 40rpx;
color: #05c35b;
margin-top: 30rpx;
}
.qr-code{
padding-bottom: 150rpx;
}
src/pages/integralMallDetail/integralMallDetail.js 0 → 100644
// pages/integralMallDetail/integralMallDetail.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
src/pages/integralMallDetail/integralMallDetail.json 0 → 100644
{
"navigationBarTitleText": "积分兑换详情页",
"usingComponents": {}
}
\ No newline at end of file
src/pages/integralMallDetail/integralMallDetail.wxml 0 → 100644
<!--pages/integralMallDetail/integralMallDetail.wxml-->
<view class='page-integral-detail'>
<view class='coupon-wrap'>
<view class='coupon-list'>
<!-- <navigator hover-class='none' url='/pages/couponDetail/couponDetail'> -->
<image class='coupon-bg' src='/assets/imgs/coupon-bg.png'></image>
<view class='coupon-img'>
<image src='/assets/imgs/qr-code.png'></image>
</view>
<view class='coupon-info'>
<view class='coupon-name fs-28'>200积分</view>
<view class='coupon-desc fs-28'>kdsjfhdjsgfs</view>
</view>
<view class='coupon-code fs-24'>立即兑换</view>
<!-- </navigator> -->
</view>
<view class='integral-detail'>
<view class='integral-list'>
<view class='integral-title'>优惠详情</view>
<view class='integral-desc'>数据库更待何时规范规定时间官方价格都十分关键是大概花费</view>
</view>
<view class='integral-list'>
<view class='integral-title'>有效期</view>
<view class='integral-desc'>数据库更待何时规范规定时间官方价格都十分关键是大概花费</view>
</view>
</view>
<button type='primary'>立即兑换</button>
</view>
</view>
src/pages/integralMallDetail/integralMallDetail.wxss 0 → 100644
/* pages/integralMallDetail/integralMallDetail.wxss */
@import './../../base/base.wxss';
.coupon-wrap{
padding: 20rpx;
clear: both;
}
.coupon-list{
width: 712rpx;
height: 209rpx;
position: relative;
margin-bottom: 20rpx;
}
.coupon-bg{
width: 712rpx;
height: 209rpx;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.coupon-img image{
width: 172rpx;
height: 172rpx;
position: absolute;
top: 18rpx;
left: 16rpx;
}
.coupon-info{
position: absolute;
top: 30rpx;
left: 236rpx;
}
.coupon-name{
color:#fc9210;
}
.coupon-desc{
color:#333333;
margin-top: 6rpx;
width: 360rpx;
}
.coupon-code{
color: #ffffff;
position: absolute;
right: 20rpx;
top: 30rpx;
width: 24rpx;
word-wrap: break-word;
font-weight: bold;
}
.integral-detail{
margin-top: 90rpx;
}
.integral-list{
margin-bottom: 60rpx;
}
.integral-title,.integral-desc{
display: inline-block;
}
.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/project.config.json
......@@ -37,7 +37,7 @@
"list": []
},
"miniprogram": {
"current": 3,
"current": 9,
"list": [
{
"id": -1,
......@@ -62,6 +62,42 @@
"name": "消费详情",
"pathName": "pages/consumptionDetails/consumptionDetails",
"query": ""
},
{
"id": -1,
"name": "积分流水",
"pathName": "pages/couponDetail/couponDetail",
"query": ""
},
{
"id": -1,
"name": "积分流水",
"pathName": "pages/consumptionDetails/consumptionDetails",
"query": ""
},
{
"id": -1,
"name": "积分流水",
"pathName": "pages/couponDetail/couponDetail",
"query": ""
},
{
"id": -1,
"name": "积分流水",
"pathName": "pages/memberRules/memberRules",
"query": ""
},
{
"id": -1,
"name": "积分流水",
"pathName": "pages/IntegralMall/IntegralMall",
"query": ""
},
{
"id": -1,
"name": "积分流水",
"pathName": "pages/integralMallDetail/integralMallDetail",
"query": ""
}
]
}
......
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