Pārlūkot izejas kodu

添加兑换码功能,优化交互

wangxin 6 gadi atpakaļ
vecāks
revīzija
009a424e6f

+ 9 - 17
components/cashdialog/index.js

@@ -6,18 +6,6 @@ Component({
    * 组件的属性列表
    */
   properties: {
-    // 弹窗标题
-    title: {
-      type: String,
-      value: '标题' // 默认值
-    },
-    // 弹窗内容
-    content: {
-      type: String,
-      value: '弹窗内容'
-    },
-
-    // 弹窗确认按钮文字
     confirmText: {
       type: String,
       value: '确定'
@@ -30,8 +18,7 @@ Component({
   data: {
     // 弹窗显示控制
     isShow: false,
-    isError: false,
-    errmsg: '兑换码不正确!'
+    cashCode: ''
   },
 
   /**
@@ -51,11 +38,16 @@ Component({
         isShow: !this.data.isShow
       })
     },
-    cancel(){
-      this.hideDialog();
+    cashCodeInput(e){
+      this.setData({
+        cashCode: e.detail.value
+      })
+    },
+    getCashCode(){
+      return this.data.cashCode;
     },
     confirmEvent() {
-      this.hideDialog();
+      this.triggerEvent('customevent');
     }
 
   }

+ 3 - 4
components/cashdialog/index.wxml

@@ -1,8 +1,7 @@
 <view class='dialog-container' hidden="{{!isShow}}">
-    <view class='dialog-mask' bindtap='cancel'></view>
+    <view class='dialog-mask' bindtap='hideDialog'></view>
     <view class='dialog-info'>
-        <input class='dialog-content' placeholder-class='dialog-hint' placeholder='输入兑换码' type='text'></input>
-        <text class='dialog-errmsg' hidden='{{isError}}'>{{errmsg}}</text>
-        <button class='dialog-footer' catchtap='confirmEvent'>兑换</button>
+        <input class='dialog-content' placeholder-class='dialog-hint' placeholder='输入兑换码' type='text' bindinput ="cashCodeInput"></input>
+        <button class='dialog-footer' catchtap='confirmEvent'>{{confirmText}}</button>
     </view>
 </view>

+ 0 - 4
components/cashdialog/index.wxss

@@ -35,10 +35,6 @@
   border-top: 1rpx solid #E5E5E5;
   margin: 30rpx;
 }
-.dialog-errmsg {
-  color: #ff0000;
-  font-size: 35rpx;
-}
 .dialog-footer{
     background: #539804;
     color: #fff;

+ 14 - 1
dever/core.js

@@ -125,7 +125,7 @@ var dever =
     {
         wx.showToast({
           title: msg,
-          icon: 'success',
+          icon: 'none',
           duration: 3000
         });
     }
@@ -184,6 +184,19 @@ var dever =
       this.package('carts').load(self, save, path);
     }
 
+    //显示加载中...
+    ,showLoading: function(){
+      wx.showLoading({
+        title: '加载中',
+        mask: true
+      })
+    }
+    
+    //隐藏加载中...
+    ,hideLoading: function(){
+      wx.hideLoading();
+    }
+
     //检查用户是否登录状态,暂支持微信登录
     ,isLogin: function(fun){
       wx.checkSession({

+ 5 - 1
template/carts/index.js

@@ -9,7 +9,7 @@ Page({
   },
   onLoad: function (options) {
     var that = this;
-    
+    that.dever.showLoading();
     //获取自定义授权组件
     that.authdialog = this.selectComponent("#authdialog");
     that.dever.request('product.api.carts',{
@@ -18,6 +18,7 @@ Page({
       success: function(data, res){
         that.dever.setList(that, data.carts);
         that.doSettlement();
+        that.dever.hideLoading();
       }
     });
   },
@@ -112,6 +113,9 @@ Page({
   doPay: function(e){
     var that = this;
     var addrObj = that.data.addrObj;
+    if (!addrObj){
+      that.dever.alert('请选择收货地址');
+    }
     that.dever.request('product.api.buy',{
       signature: that.dever.getSignature(),
       product_id: that.product_ids,

+ 115 - 0
template/cash/index.js

@@ -0,0 +1,115 @@
+Page({
+  dever: getApp().dever,
+  authdialog: null,
+  product_ids: '',
+  cash_code: '',
+  data: {
+    isUseAddress: false,
+    settlement: 0.00
+  },
+  onLoad: function (options) {
+    var that = this;
+    that.dever.showLoading();
+    //获取自定义授权组件
+    that.authdialog = this.selectComponent("#authdialog");
+    //获取兑换商品信息
+    that.cash_code = options.code;
+    that.dever.request('product.api.checkCode',{
+      signature: that.dever.getSignature(),
+      code: that.cash_code
+    },{
+      success: function(data, res){
+        that.dever.setList(that, data.product);
+        that.doSettlement();
+        that.dever.hideLoading();
+      },
+      fail: function(res){
+        that.dever.log('product.api.checkCode', res);
+      }
+    });
+  },
+
+  /**
+   * 结算金额
+   */
+  doSettlement: function(){
+    var list = this.data.list;
+    var count=0;
+    for(var i=0; i<list.length; i++){
+      var product_id = list[i].id;
+      var pay_price = list[i].pay_price;
+      count += pay_price*1;
+      if(i==0){
+        this.product_ids += product_id;
+      }else{
+        this.product_ids += ',' + product_id;
+      }
+    }
+    this.dever.set(this, 'settlement', count.toFixed(2));
+  },
+
+  /**
+   * 去支付
+   */
+  doCash: function(e){
+    var that = this;
+    var addrObj = that.data.addrObj;
+    if (!addrObj) {
+      that.dever.alert('请选择收货地址');
+    }
+    that.dever.request('product.api.code',{
+      json: 1,
+      signature: that.dever.getSignature(),
+      product_id: that.product_ids,
+      code: that.cash_code,
+      name: addrObj.userName,
+      address: addrObj.provinceName + addrObj.cityName + addrObj.countyName + addrObj.detailInfo,
+      mobile: addrObj.telNumber
+    },{
+      success:function(data, res){
+        that.dever.redirect('pay/index');
+        that.dever.log('doCash success', res);
+      },
+      fail: function(res){
+        that.dever.alert('兑换失败!');
+        that.dever.log('doCash fail', res);
+      }
+    });
+  },
+
+  /**
+   * 使用微信地址
+   */
+  chooseAddress: function(event){
+    var that = this;
+    var success = function(){
+      wx.chooseAddress({
+        success: function (res) {
+          that.dever.log('wx.chooseAddress', res);
+          that.dever.set(that,'addrObj', res);
+          that.dever.set(that,'isUseAddress', true);
+        },
+        fail: function (res) {
+          that.dever.log('wx.chooseAddress', 'fail');
+        }
+      })
+    }
+    wx.getSetting({
+      success: function(res){
+        if (res.authSetting['scope.address']){
+          success();
+        }else{
+          wx.authorize({
+            scope: 'scope.address',
+            success: function () {
+              success();
+            },
+            fail: function(res){
+              that.authdialog.showDialog();
+            }
+          })
+        }
+      }
+    })
+  }
+})

+ 6 - 0
template/cash/index.json

@@ -0,0 +1,6 @@
+{
+  "navigationBarTitleText": "农小盒",
+  "usingComponents": {
+    "authdialog": "/components/authdialog/index"
+  }
+}

+ 32 - 0
template/cash/index.wxml

@@ -0,0 +1,32 @@
+<view class='top'>
+  <view class='address' bindtap='chooseAddress'>
+    <!--<view>{{address}}</view>
+    <text class='tips'>填写收货地址</text>
+    <button class='nxh__button' bindtap='chooseAddress' >使用微信地址</button>-->
+    <image class='left' src='/static/img/location2.png'></image>
+    <view class='center' wx:if='{{isUseAddress}}'>
+      <text>{{addrObj.userName}}</text>
+      <text>{{addrObj.provinceName+addrObj.cityName+addrObj.countyName+addrObj.detailInfo}}</text>
+      <text>{{addrObj.telNumber}}</text>
+    </view>
+    <view class='tips' wx:else><text>使用微信地址</text></view>
+    <image class='right' src='/static/img/item-right.png'></image>
+    <!--兼容授权提醒-->
+    <authdialog id='authdialog' title='授权提示' content='小程序需要您的授权才能提供更好的服务哦' confirmText='知道了'></authdialog>
+  </view>
+
+  <view class='address_line'></view>
+
+  <view class='order' wx:for='{{list}}' wx:key='{{index}}' data-id='{{item.id}}'>
+    <text class='title'>{{item.name}}</text>
+    <view class='oper'>
+      <text class='price'>¥ {{item.price}}</text>
+      <view class='edit-num'>数量 1 件</view>
+    </view>
+    <view class='split_line'/>
+  </view>
+</view>
+<view class='bottom'>
+  <view class='left'>合计 ¥{{settlement}} 元</view>
+  <view class='right' bindtap='doCash'>立即兑换</view>
+</view>

+ 101 - 0
template/cash/index.wxss

@@ -0,0 +1,101 @@
+.top {
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+  text-align: center;
+  margin-bottom: 100rpx;
+}
+.address {
+  padding: 40rpx 50rpx 30rpx 50rpx;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.address_line {
+  height: 10rpx;
+  transform:skew(45deg);
+  margin: 0 15rpx 0 15rpx;
+  background: repeating-linear-gradient(to right, #f2f2f2 20rpx, #f0797c 60rpx, #6698fa 100rpx);
+}
+.address .left {
+  width: 50rpx;
+  height: 50rpx;
+}
+.address .center{
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  padding: 0 20rpx 0 20rpx;
+}
+.address .center text {
+  display: flex;
+  justify-content: left;
+  flex-wrap: wrap;
+}
+.address .right{
+  width: 50rpx;
+  height: 50rpx;
+}
+.tips {
+  flex-grow: 1;
+  padding-left: 20rpx;
+}
+.tips text {
+  display: flex;
+  justify-content: left;
+  color: #707070;
+  font-size: 35rpx;
+}
+.order .split_line {
+  margin:0 20rpx 0 30rpx;
+  border-bottom: 1px solid #E5E5E5;
+}
+.order .title {
+  display: flex;
+  justify-content: left;
+  font-size: 35rpx;
+  margin:40rpx 50rpx 25rpx 50rpx;
+}
+.order .oper {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin: 0 50rpx 25rpx 50rpx;
+}
+.order .price {
+  color: #666666;
+  font-size: 35rpx;
+}
+.order .edit-num {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin: 0 15rpx 0 15rpx;
+  font-size: 30rpx;
+}
+.bottom {
+  width: 750rpx;
+  height: 100rpx;
+  position: fixed;
+  bottom: 0;
+  display: flex;
+  flex-direction: row;
+}
+.bottom .left {
+  background: #434343;
+  color: #fff;
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  padding-left: 50rpx;
+  font-size: 35rpx;
+}
+.bottom .right {
+  background: #539804;
+  color: #fff;
+  width: 250rpx;
+  display: flex;
+  font-size: 35rpx;
+  align-items: center;
+  justify-content: center;
+}

+ 24 - 1
template/home/index.js

@@ -7,6 +7,9 @@ Page({
   },
   onLoad: function (options) {
     var that = this;
+    if(that.pg == 1){
+      that.dever.showLoading();
+    }
     that.cashdialog = this.selectComponent("#cashdialog");
     that.dever.set(that, 'loadMoreText', '正在加载');
     that.dever.request('product.api.home', {
@@ -26,6 +29,7 @@ Page({
           }else{
             that.dever.set(that, 'isShowNull', true);
           }
+          that.dever.hideLoading();
         }
     });
   },
@@ -46,7 +50,26 @@ Page({
    * 礼品卡兑换
    */
   cash: function(e){
-    this.cashdialog.showDialog();
+    var that = this;
+    this.dever.isLogin(function (res) {
+      if (res) {
+        that.cashdialog.showDialog();
+      } else {
+        that.dever.location('login/index');
+      }
+    });
+  },
+
+  /**
+   * 跳转兑换页面
+   */
+  toCash: function(){
+    var code = this.cashdialog.getCashCode();
+    this.dever.log('toCash code', code);
+    if (code.length > 0) {
+      this.dever.location('cash/index?code=' + code);
+    }
+    this.cashdialog.hideDialog();
   },
 
   /**

+ 1 - 2
template/home/index.wxml

@@ -19,5 +19,4 @@
 </view>
 
 <!-- 礼品卡兑换弹框 -->
-<cashdialog id='cashdialog' confirmText='知道了'>
-</cashdialog>
+<cashdialog id='cashdialog' confirmText='去兑换' bindcustomevent='toCash'></cashdialog>

+ 2 - 1
template/pay/index.js

@@ -6,12 +6,13 @@ Page({
 
   onLoad: function (options) {
     //that.dever.getSignature()
+    //that.dever.showLoading();
   },
 
   /**
    * 跳转海报分享页面,分享海报
    */
   toShare: function(){
-    this.dever.location('poster/index');
+    this.dever.redirect('poster/index');
   }
 })

+ 3 - 0
template/pay/index.wxss

@@ -16,4 +16,7 @@ page {
 .pay-result-h2 {
   font-size: 30rpx;
   color: #666;
+}
+.share-friends {
+  margin-top: 80rpx; 
 }

+ 10 - 1
template/view/index.js

@@ -7,6 +7,7 @@ Page({
 
   onLoad: function (options) {
     var that = this;
+    that.dever.showLoading();
     if(typeof options.scene == 'undefined'){
       that.product_id = options.id;
     }else{
@@ -24,6 +25,7 @@ Page({
           that.setData({
             content: temp
           })
+          that.dever.hideLoading();
         }
     });
   },
@@ -32,7 +34,14 @@ Page({
    * 跳转海报分享页面,分享海报
    */
   toShare: function(){
-    this.dever.location('poster/index');
+    var that = this;
+    that.dever.isLogin(function (res) {
+      if (res) {
+        this.dever.location('poster/index');
+      } else {
+        that.dever.location('login/index');
+      }
+    });
   },
 
   /**