优惠券详情

README.MD

@@ -3,7 +3,7 @@
 ## 版本：0.15.152900（暂未升级原因：升级后需要图片无法本地引用，必须使用image或是远程路径引用）
 
 ## 先上一波gif图片
-![cmd-markdown-logo](git-image/1.gif)![cmd-markdown-logo](git-image/7.gif)![cmd-markdown-logo](git-image/8.gif)![cmd-markdown-logo](git-image/2.gif)![cmd-markdown-logo](git-image/3.gif)![cmd-markdown-logo](git-image/4.gif)![cmd-markdown-logo](git-image/5.gif)![cmd-markdown-logo](git-image/6.gif)
+![cmd-markdown-logo](git-image/1.gif)![cmd-markdown-logo](git-image/7.gif)![cmd-markdown-logo](git-image/8.gif)![cmd-markdown-logo](git-image/2.gif)![cmd-markdown-logo](git-image/3.gif)![cmd-markdown-logo](git-image/4.gif)![cmd-markdown-logo](git-image/5.gif)![cmd-markdown-logo](git-image/6.gif)![cmd-markdown-logo](git-image/9.gif)
 ## gif对应功能块
 > * 首页（定位成功情况且有门店）
 > * 门店列表（定位成功情况却没有门店）
@@ -13,6 +13,7 @@
 > * 更多门店
 > * 订单及订单详情
 > * 个人中心
+> *  优惠券
 
 ## 目录结构
 ![mulu](git-image/mulu.png)

app.json

@@ -13,7 +13,8 @@
     "pages/login/login",
     "pages/order/order",
     "pages/order-detail/order-detail",
-    "pages/coupon-list/coupon-list"
+    "pages/coupon-list/coupon-list",
+    "pages/coupon-detail/coupon-detail"
   ],
   "window":{
     "navigationBarBackgroundColor": "#e61773",

pages/center/center.wxml

@@ -16,7 +16,7 @@
                 <span class="icon icon-right"></span>
             </view>
         </navigator>
-        <navigator url="{{isLogin ? '../coupon/coupon' : '../login/login'}}">
+        <navigator url="{{isLogin ? '../coupon-list/coupon-list' : '../login/login'}}">
             <view class="flex-con">
                 <span class="icon icon-mendianyouhuiquan"></span>
                 <text>门店优惠券</text>

pages/coupon-detail/coupon-detail.js

@@ -0,0 +1,73 @@
+// pages/coupon-detail/coupon-detail.js
+var util = require('../../utils/util.js');
+var ports = require('../../utils/ports.js');
+var polyfill = require('../../utils/polyfill.js');
+var obj = {
+        "id": "3644709", 
+        "tag": "满满", 
+        "type": 1, 
+        "code": "FIPR6TI4YG", 
+        "showAimTitle": "满10-6元", 
+        "showDiscountTitle": "满10元可用", 
+        "showDiscountMoney": "6.00", 
+        "startDate": "2017.02.16 00:00", 
+        "endDate": "2022.03.17 00:00", 
+        "exp_soon": 0, 
+        "coupon_rule": "1、优惠券限线下门店消费时使用，每单只使用一张优惠券，不与其它优惠券叠加使用；\n2、优惠券不设找赎，不可兑换现金，仅限有效期内使用，打印无效；\n3、优惠券有效期内周末、假日通用；\n4、每张优惠券仅限指定门店一次性使用；\n5、所有规则由五洲会海购依据国家相关法律法规及规章制度予以解释。", 
+        "code_desc": "满10-6元", 
+        "qrcodeStr": "364470900000367350000009649"
+    }
+Page({
+  data:{
+    cpn: {},
+    isUsed: false,
+    codeId: 0
+  },
+  getDate: function(dateStr){
+      //iphone下new Date()有bug
+      return dateStr.split(' ')[0];
+  },
+  getCouponDetail: function(){
+        util.getToken().then(token => {
+            util.wxRequest({
+                method: 'post',
+                url: ports.couponDetail,
+                headers:{'X-Auth-Token': token, 'content-type': 'application/x-www-form-urlencoded'},
+                data:{
+                    codeId: this.data.codeId
+                }
+            }).then((result)=> {
+                result.data = obj; //测试
+                result.data.startDate = this.getDate(result.data.startDate);
+                result.data.endDate = this.getDate(result.data.endDate);
+                result.data.coupon_rule = result.data.coupon_rule.replace(/\n/g,'<br/>');
+                result.data.code_desc = result.data.code_desc.replace(/\n/g,'<br/>');
+                this.setData({
+                  isUsed: result.data.type===2 ? true : false,
+                  cpn: result.data
+                });
+            }).catch((e)=>{
+                console.log(e)
+            });
+        });
+  },
+  onLoad:function(options){
+    // 页面初始化 options为页面跳转所带来的参数
+    this.setData({
+      codeId: options.codeId
+    });
+    this.getCouponDetail();
+  },
+  onReady:function(){
+    // 页面渲染完成
+  },
+  onShow:function(){
+    // 页面显示
+  },
+  onHide:function(){
+    // 页面隐藏
+  },
+  onUnload:function(){
+    // 页面关闭
+  }
+})

pages/coupon-detail/coupon-detail.json

@@ -0,0 +1 @@
+{}

pages/coupon-detail/coupon-detail.wxml

@@ -0,0 +1,41 @@
+<!--pages/coupon-detail/coupon-detail.wxml-->
+<view class="coupon-detail-info-box">
+    <view class="detail-info">
+        <view class="use-target-price">
+            <view class="price">
+                <text class="symbol">￥</text>
+                <text class="num">{{cpn.showDiscountMoney}}</text>
+            </view>
+            <view>{{cpn.startDate}}-{{cpn.endDate}}</view>
+        </view>
+        <view class="use-cate">
+            <view>{{cpn.showDiscountTitle}}</view>
+            <view class="line"></view>
+            <view>{{cpn.showAimTitle}}</view>
+        </view>
+    </view>
+    <view class="ecode-box">
+        <view class="ecode-content">
+            <block wx:if="cpn.type===2 || cpn.type===3">
+                <image class="status-icon" wx:if="{{isUsed}}" src="../../image/used.png"></image>
+                <image class="status-icon" wx:else src="../../image/expired.png"></image>
+            </block>
+            <!--二维码图片，后期改为接口生成-->
+            <image class="qrcode-img"  src="../../image/ercode.png"></image>
+        </view>
+        <view class="code-text">促销码：{{cpn.code}}</view>
+        <view class="code-dec">使用时向导购员出示此二维码</view>
+    </view>
+    <view class="pt20"></view>
+    <view class="cpn-des">
+        <view class="title">使用说明</view>
+        <view class="h3">试用范围：</view>
+        <view class="p">{{cpn.showDiscountTitle}}</view>
+        <view class="h3">有效期：</view>
+        <view class="p">{{cpn.startDate}}-{{cpn.endDate}}</view>
+        <view class="h3">详细信息：</view>
+        <view class="dec">{{cpn.code_desc}}</view>
+        <view class="h3">使用规则：</view>
+        <view class="rule">{{cpn.coupon_rule}}</view>
+    </view>
+</view>

pages/coupon-detail/coupon-detail.wxss

@@ -0,0 +1,124 @@
+/* pages/coupon-detail/coupon-detail.wxss */
+.coupon-detail-info-box{
+	background-color: #fff;
+	margin-bottom: 20rpx;
+}
+.coupon-detail-info-box .detail-info{
+    background: url(../../image/coupon-bg.jpg) no-repeat top left;
+    background-size: 750rpx 230rpx;
+    height: 230rpx;
+    display: flex;
+    justify-content:space-between;
+    font-size: 28rpx;
+}
+.use-target-price{
+    display: flex;
+    flex-direction:column;
+    padding: 60rpx 20rpx 0;
+}
+.use-target-price .price{
+    color:#f6559c;
+}
+.use-target-price .price.price-gray{
+    color:#ccc;
+}
+.use-target-price .price .symbol{
+    font-size: 36rpx;
+}
+.use-target-price .price .num{
+    font-weight: bold;
+    font-size: 100rpx;
+}
+
+.use-cate{
+    display: flex;
+    flex-direction:column;
+    padding-top: 100rpx;
+    align-items: center;
+    margin-right: 35rpx;
+}
+.use-cate .line{
+    position:relative;
+    margin: 10rpx 0;
+    width:100%;
+    height:3rpx;
+    background-color: #666;
+    text-align: center;
+    line-height: 1px;
+}
+.use-cate .line::after{
+    display: inline-block;
+    background-color: #fff;
+    padding:0 6rpx;
+    font-size: 28rpx;
+    content:"·";
+}
+.use-cate view{
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    max-width: 320rpx;
+}
+
+.ecode-box{
+    border-top: dashed #e8e8e8 3rpx;
+    height: 560rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+.ecode-box .ecode-content{
+    position: relative;
+}
+.ecode-box .ecode-content .status-icon{
+    width: 142rpx;
+    height: 142rpx;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    margin: auto;
+}
+.ecode-box .ecode-content .qrcode-img{
+    width: 258rpx;
+    height: 258rpx;
+}
+
+.ecode-box .code-text{
+    margin-top: 30rpx;
+    font-size: 32rpx;
+    color: #222;
+}
+.ecode-box .code-dec{
+    margin-top: 10rpx;
+    font-size: 28rpx;
+    color: #999;
+}
+.cpn-des{
+	background-color: #fff;
+	padding-bottom: 20rpx;
+}
+.cpn-des .title{
+    height: 80rpx;
+    line-height: 80rpx;
+    color: #222;
+    font-size: 32rpx;
+    border-bottom: 1px solid #e8e8e8;
+    margin-bottom: 20rpx;
+    padding-left: 20rpx;
+}
+.h3,.p,.rule,.dec{
+    padding: 0 20rpx;
+    margin-bottom: 10rpx;	
+}
+.h3{
+    font-size: 28rpx;
+    color: #222;
+}
+.rule,.dec,.p{
+    font-size: 26rpx;
+    color: #666;
+    line-height: 1.5;
+}