<import src="../../templates/toast/toast.wxml" /> <template name="order-cell"> <view class="order-cell"> <view class="cell-status"> {{refund_status==="没有售后" ? order_status : "售后处理中"}} </view> <navigator url="../order-detail/order-detail?subOrderSn={{sub_order_sn}}" hover-class="none" class="cell-item"> <view class="{{goods.length===1?'':'hide'}}"> <image class="good-thumb" src="{{goods[0].thumb_url}}" alt="item"/> <view class="item-content"> <view class="content-name">{{goods[0].goods_name}}</view> <view class="content-attr">{{goods[0].goods_attr}}</view> <view class="content-count">¥{{goods[0].sum_price}}<view class="content-amount">×{{goods[0].goods_number}}</view></view> </view> </view> <scroll-view scroll-x="true" class="{{goods.length===1?'hide':''}}"> <view style="display:inline-block;" wx:for="{{goods}}"><image class="good-thumb" src="{{item.thumb_url}}"></image></view> </scroll-view> </navigator> <view class="cell-count"> <view class="count-amount">共{{goods.length}}件商品</view> <view class="count-price">¥{{total_amount}}</view> <view class="count-carriage">运费:<text>¥{{shipping_price}}</text></view> </view> <view class="cell-btn" hidden="{{order.isButtonShow}}"> <!-- <button class="btn-order btn-solid-red">去支付</button> <button class="btn-order btn-hollow-gray" data-order-id="{{order_sn}}" bindtap="cancalOrder">取消订单</button> --> <button class="btn-order btn-solid-red" wx:if="{{ order.orderStatus==='待支付' }}" bindtap="payOrder" data-order-sn="{{order.orderSn}}">去支付</button> <button class="btn-order btn-hollow-gray" wx:if="{{ order.orderStatus==='待支付' }}" bindtap="cancelOrder" data-order-sn="{{order.orderSn}}">取消订单</button> <button class="btn-order btn-hollow-gray" wx:if="{{ order.orderStatus==='待发货'&&refund_status === '没有售后' }}" bindtap="drawbackOrder" data-order-sn="{{order.subOrderSn}}">申请退款</button> <button class="btn-order btn-hollow-gray" wx:if="{{ order.orderStatus==='待收货' }}" bindtap="logistics" data-order-sn="{{order.subOrderSn}}">查看物流</button> <button class="btn-order btn-solid-red" wx:if="{{ order.orderStatus==='待收货' }}" bindtap="confirmOrder" data-order-sn="{{order.subOrderSn}}">确认收货</button> <button wx:if="{{ order.orderStatus==='交易成功'||order.orderStatus==='交易关闭'||order.orderStatus==='订单关闭'}}" bindtap="order.deleteOrder({ subOrderSn:order.data.sub_order_sn })">删除订单</button> </view> </view> </template> <view class="nav-header"> <view wx:for="{{navs}}" class="nav-cell {{item.alias==activeNav?'active':''}}" bindtap="changeList" data-alias="{{item.alias}}">{{item.text}}</view> </view> <view class="orders-wrap" hidden="{{loading}}"> <scroll-view scroll-y="true" class="orders"> <view class="order-list {{orderList.length===0?'hide':''}}"> <block wx:for="{{orderList}}"> <template is="order-cell" data="{{...item}}"></template> </block> </view> <view class="empty {{orderList.length===0?'':'hide'}}"> <image class="empty-img" src="images/empty.png"></image> <view>您还没有相关的订单</view> <view>可以去看看有哪些想买的</view> <navigator open-type="switchTab" url="../home/home" hover-class="none" class="btn-to-home btn-solid-red" >随便逛逛</navigator> </view> </scroll-view> <template is="toast" data="{{...toast}}" /> </view> <loading hidden="{{!loading}}">正在加载中...</loading> |
.hide { display: none; } .orders-wrap { font-size: 28.12rpx; height: 100%; } .orders { height: 100%; } .nav-header { font-size: 28.12rpx; display: -webkit-box; text-align: center; background: #fff; padding: 0 16.41rpx; height: 100.77rpx; line-height: 100.77rpx; } .nav-cell { -webkit-box-flex: 1; } .nav-cell.active { color: #ff4b2d; border-bottom: #ff4b2d 4.69rpx solid; } .order-cell { margin-top: 23.44rpx; background: #fff; padding: 0 16.41rpx; overflow: hidden; } .cell-status { text-align: right; padding: 23.44rpx 18.74rpx; color: #ff2d4b; } .cell-item { padding-bottom: 35.15rpx; overflow: hidden; white-space: nowrap; width: 100%; height:175.77rpx; } .item-content { margin-left: 212.35rpx; margin-right: 17.84rpx; height: 175.77rpx; position: relative; } .content-name { font-size: 23.44rpx; line-height: 32.81rpx; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .content-attr { margin-top: 11.72rpx; font-size: 23.44rpx; color: #a0a0a0; line-height: 32.81rpx; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } .content-count { position: absolute; bottom: 0; overflow: hidden; width: 100%; } .content-amount { float: right; } .cell-count { border-top: 1px solid #efefef; border-bottom: 1px solid #efefef; overflow: hidden; padding: 23.44rpx 18.74rpx; } .count-amount { float: left; } .count-carriage { float: right; } .count-price { float: right; margin-left: 28.12rpx; color: #ff2b4d; } .count-price::before { content: "实付:"; color: #000; } .cell-btn { padding: 17.58rpx 18.74rpx; overflow: hidden; } .empty { width: 100%; height: 100%; text-align: center; font-size: 28.12rpx; color: #a0a0a0; line-height: 48rpx; } .empty-img { width: 187.49rpx; height: 187.49rpx; margin-top: 164.05rpx; margin-bottom: 23.44rpx; } .btn-to-home { margin-top: 35.15rpx; width: 337.48rpx; height: 79.68rpx; line-height: 79.68rpx; border-radius: 11.72rpx; display: inline-block; } |
import request from '../../lib/request'; import resource from '../../lib/resource'; import serviceData from '../../data/config'; import Promise from '../../lib/promiseEs6Fix'; const app = getApp(); Page({ data: { loading: false, activeNav: 'all', navs: [{ text: '全部', alias: 'all' }, { text: '待付款', alias: 'unpaid' }, { text: '待发货', alias: 'undelivered' }, { text: '待收货', alias: 'unreceived' }], orderList: [] }, onLoad(options) { const that = this; if (options.t) { this.setData({ activeNav: options.t }); } this.getList().then((res) => { that.setOrderData(res.data); that.setData({ orderList: res.data, loading: false }); }); }, setOrderData(data) { data.forEach((itm) => { itm.order = { orderStatus: itm.order_status, orderSn: itm.order_sn, subOrderSn : itm.sub_order_sn, isButtonHidden : itm.order_status == "待支付" ? true: false, }; }); return data; }, changeList(e) { const that = this; const alias = e.target.dataset.alias; if (alias !== this.data.activeNav) { this.setData({ activeNav: e.target.dataset.alias, loading: true }); this.getList().then((res) => { that.setOrderData(res.data); that.setData({ orderList: res.data, loading: false }); }); } }, getList() { const data = { type: this.data.activeNav, per_page: 10 }; //模拟请求数据 var $promise = new Promise(function(resolve,reject) { resolve({statusCode:200, data:serviceData.orderData}); }); return $promise; return request({ path: '/clientOrder', data }); }, cancelOrder(e) { const that = this; console.log(that) const orderSn = e.target.dataset.orderSn; wx.showModal({ content: '你是否需要取消订单', showCancel: true, success: (res) => { if(res.confirm == 0) { return; } resource.cancalOrder(orderSn).then((res) => { if (res.statusCode === 200 ) { this.data.orderList.forEach((item,key) => { if(item.order_sn == orderSn && that.data.activeNav != "all") { this.data.orderList.splice(key, 1); } else { item.order_status = '订单取消'; } }) resource.showTips(that, '订单取消成功'); this.setData({orderList :this.setOrderData(this.data.orderList)}); } else { resource.showTips(that, '订单取消失败'); } }); } }); // resource.cancalOrder(orderSn).then((res) => { // console.log(res); // if (res.statusCode === 200) { // resource.successToast(() => { // that.setOrderData(res.data); // that.setData({ // orderList: res.data // }); // }); // } // }); }, drawbackOrder(e) { const that = this; const orderSn = e.target.dataset.orderSn; wx.showModal({ content: '亲,你是否确定退款', showCancel: true, success: (res) => { if(res.confirm == 0) { return; } resource.drawbackOrder(orderSn).then((res) => { if (res.statusCode === 200) { this.data.orderList.forEach((item,key) => { if(item.order_sn == orderSn) { item.refund_status = "待审核"; } }) resource.showTips(that, '退款操作成功'); this.setData({orderList : this.data.orderList}); } else { resource.showTips(that, '退款操作失败'); } }); } }); }, confirmOrder(e) { const that = this; console.log(that) const orderSn = e.target.dataset.orderSn; wx.showModal({ content: '确定收货', showCancel: true, success: (res) => { if(res.confirm == 0) { return; } resource.confirmOrder(orderSn).then((res) => { if (res.statusCode === 200 ) { this.data.orderList.forEach((item,key) => { if(item.order_sn == orderSn && that.data.activeNav != "all") { this.data.orderList.splice(key, 1); } else { item.order_status = '交易成功'; } }) resource.showTips(that, '确认收货成功'); this.setData({orderList :this.setOrderData(this.data.orderList)}); } else { resource.showTips(that, '确认收货失败'); } }); } }); }, payOrder(e) { const orderSn = e.target.dataset.orderSn; resource.getPaySign({ out_trade_no: orderSn, AppID: app.globalData.appId }) .then((payRes) => { if (Number(payRes.statusCode) === 200) { const wechatData = payRes.data.payment; wx.requestPayment({ appId: wechatData.appId, timeStamp: wechatData.timeStamp, nonceStr: wechatData.nonceStr, package: wechatData.package, signType: 'MD5', paySign: wechatData.paySign, success(res) { if (res.errMsg === 'requestPayment:ok') { app.globalData.type = 'success'; wx.navigateTo({ url: '../result/result' }); } else if (res.errMsg === 'requestPayment:cancel') { app.globalData.type = 'fail'; wx.navigateTo({ url: '../orders/orders?t=unpaid' }); } }, fail() { }, complete(res) { console.log(res); } }); } else { this.setData({ toast: { toastClass: 'yatoast', toastMessage: '获取支付验证错误!' } }); setTimeout(() => { this.setData({ toast: { toastClass: '', toastMessage: '' } }); }, 2000); } }); } }); |
模板简介:该模板名称为【微信小程序个人购买商品页面中心模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。