mobile / yoho-miniapp-ufo · Commits

Go to a project

Authored by 黄敬囿
Commit eb837b1e744245b2fcc29c00d735f3791578507e 1 parent 83de2c02

订单列表，订单详情，我的收入review by 李其昌

Inline Side-by-side
Showing 43 changed files with 1779 additions and 55 deletions
... ... @@ -43,6 +43,9 @@ class App extends Component {
'pages/order/orderSuccess/orderSuccess',
'pages/order/orderProtocol/orderProtocol',
'pages/nativeLogin/nativeLogin',
'pages/myassets/index',
'pages/orderDetail/index',
'pages/orderList/orderlistcell',
],
window: {
backgroundTextStyle: 'light',
... ...
// src/components/dialog/dialog.js
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
/**
* 组件的属性列表
* 用于组件自定义设置
*/
properties: {
// 弹窗标题
title: { // 属性名
type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
value: '标题' // 属性初始值（可选），如果未指定则会根据类型选择一个
},
// 弹窗内容
content: {
type: String,
value: '弹窗内容'
},
// 弹窗取消按钮文字
cancelText: {
type: String,
value: '取消'
},
// 弹窗确认按钮文字
confirmText: {
type: String,
value: '确定'
}
},
/**
* 私有数据,组件的初始数据
* 可用于模版渲染
*/
data: {
// 弹窗显示控制
isShow: false
},
/**
* 组件的方法列表
* 更新属性和数据的方法与更新页面数据的方法类似
*/
methods: {
/*
* 公有方法
*/
//隐藏弹框
hideDialog() {
this.setData({
isShow: !this.data.isShow
})
},
//展示弹框
showDialog() {
this.setData({
isShow: !this.data.isShow
})
},
/*
* 内部私有方法建议以下划线开头
* triggerEvent 用于触发事件
*/
_cancelEvent() {
//触发取消回调
this.triggerEvent("cancelEvent")
},
_confirmEvent() {
//触发成功回调
this.triggerEvent("confirmEvent");
}
}
})
\ No newline at end of file
... ...
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
... ...
<!--src/components/dialog/dialog.wxml-->
<view class='wx_dialog_container' hidden="{{!isShow}}">
<view class='wx-mask'></view>
<view class='wx-dialog'>
<view class='wx-dialog-title'>{{ title }}</view>
<view class='wx-dialog-content'>{{ content }}</view>
<view class='wx-dialog-footer'>
<view class='wx-dialog-btn' catchtap='_cancelEvent'>{{ cancelText }}</view>
<view class='wx-dialog-btn' catchtap='_confirmEvent'>{{ confirmText }}</view>
</view>
</view>
</view>
... ...
/* src/components/dialog/dialog.wxss */
.wx-mask{
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
}
.wx-dialog{
position: fixed;
z-index: 5000;
width: 80%;
max-width: 600rpx;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #FFFFFF;
text-align: center;
border-radius: 3px;
overflow: hidden;
}
.wx-dialog-title{
font-size: 18px;
padding: 15px 15px 5px;
}
.wx-dialog-content{
padding: 15px 15px 5px;
min-height: 40px;
font-size: 16px;
line-height: 1.3;
word-wrap: break-word;
word-break: break-all;
color: #999999;
}
.wx-dialog-footer{
display: flex;
align-items: center;
position: relative;
line-height: 45px;
font-size: 17px;
}
.wx-dialog-footer::before{
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
border-top: 1px solid #D5D5D6;
color: #D5D5D6;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.wx-dialog-btn{
display: block;
-webkit-flex: 1;
flex: 1;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
position: relative;
}
.wx-dialog-footer .wx-dialog-btn:nth-of-type(1){
color: #353535;
}
.wx-dialog-footer .wx-dialog-btn:nth-of-type(2){
color: #3CC51F;
}
.wx-dialog-footer .wx-dialog-btn:nth-of-type(2):after{
content: " ";
position: absolute;
left: 0;
top: 0;
width: 1px;
bottom: 0;
border-left: 1px solid #D5D5D6;
color: #D5D5D6;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
}
\ No newline at end of file
... ...
// src/components/order/orderaction.js
Component({
/**
* 组件的属性列表
*/
properties: {
actionInfo: Object,
//默认值：-1（不显示），0:订单列表，1:订单详情
fromPage: Number,
timer: String,
realPrice: String,
},
/**
* 组件的初始数据
*/
data: {
isShowTimer:false,
isShowPrice:false,
},
lifetimes: {
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () {
if (this.properties.fromPage == 0 ) {
this.setData({ isShowTimer: true });
}
// if (this.properties.fromPage == 1 && this.properties.actionInfo.status == 0) {
// this.setData({ isShowPrice: true });
// }
},
moved: function () { },
detached: function () { },
},
/**
* 组件的方法列表
*/
methods: {
}
})
... ...
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
... ...
<!--src/components/order/orderaction.wxml-->
<view class='order-action-bottom-view'>
<view class='order-action-left-view'>
<view class='order-action-bottom-info-view' wx:if="{{realPrice}}">
<text class='order-action-pay-amount-txt'>¥{{realPrice}}</text>
<text class='order-daction-pay-amount-title-txt'>实付金额</text>
</view>
<view class='order-action-cut-down-time-view' wx:if="{{timer}}">
<image class='order-action-cut-down-time-image' src='../../static/images/address.png'></image>
<text class='order-daction-pay-amount-title-txt'>{{timer}}</text>
</view>
</view>
<view class='order-action-bottom-button-view'>
<button class='order-action-unselected-button'>{{actionInfo[0].text}}</button>
<button class='order-action-selected-button'>{{actionInfo[1].text}}</button>
</view>
</view>
... ...
/* src/components/order/orderaction.wxss */
.order-action-bottom-view {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-top: 20rpx;
padding-bottom: 20rpx;
background: #FFFFFF;
padding-left: 40rpx;
padding-right: 40rpx;
}
.order-action-bottom-info-view {
display: flex;
flex-direction: column;
/* position:fixed; */
}
.order-action-bottom-button-view {
display: flex;
flex-direction: row;
}
/* .order-detail-split-line {
background: #e0e0e0;
height: 2rpx;
margin-top: 40rpx;
} */
.order-action-pay-amount-txt {
font-family: DINAlternate-Bold;
font-size: 28rpx;
color: #D0021B;
}
.order-action-pay-amount-title-txt {
font-family: PingFang-SC-Regular;
font-size: 24rpx;
color: #000000;
margin-top: 6rpx;
}
.order-action-selected-button {
/* display: flex; */
/* align-items: center; */
font-family: PingFang-SC-Medium;
font-size: 24rpx;
color: #FFFFFF;
background-color: #002B47;
border-radius: 0;
padding-top: 20rpx;
padding-bottom: 20rpx;
padding-left: 40rpx;
padding-right: 40rpx;
}
.order-action-unselected-button::after {
/* border-style: none; */
border-radius: 0;
}
.order-action-unselected-button {
width: 224rpx;
/* display: flex; */
/* align-items: center; */
font-family: PingFang-SC-Regular;
font-size: 24rpx;
color: #999999;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 0;
padding-top: 20rpx;
padding-bottom: 20rpx;
padding-left: 40rpx;
padding-right: 40rpx;
/* border-style: none; */
margin-right: 20rpx;
/* padding-left: 40rpx;
padding-right: 40rpx; */
}
.order-action-left-view {
display: flex;
flex-direction: row;
align-items: center;
}
.order-action-cut-down-time-view {
display: flex;
flex-direction: row;
/* flex: 1; */
/* position:fixed; */
}
.order-action-cut-down-time-image {
width: 30rpx;
height: 30rpx;
}
\ No newline at end of file
... ...
// src/components/order/orderproductinfo.js
Component({
/**
* 组件的属性列表
*/
properties: {
productInfo: Object,
statuStr:String,
fromPage: Number,
},
/**
* 组件的初始数据
*/
data: {
isShowStatus: false,
},
lifetimes: {
attached: function () {
if(this.properties.fromPage == 0){
this.setData({isShowStatus:true});
}
},
},
/**
* 组件的方法列表
*/
methods: {
}
})
... ...
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
... ...
<!--src/components/order/orderproductinfo.wxml-->
<view class='component-order-root-view'>
<image class='component-order-product-image' src='../../static/images/address.png'></image>
<view class='component-order-right-view'>
<view class='component-order-top-right-name-price-view'>
<view class='component-order-top-view'>
<text class='component-order-product-price-view'>¥{{productInfo.goodPrice}}</text>
<text class='component-order-status-txt' >{{statuStr}}</text>
</view>
<text class='component-order-product-name-txt'>{{productInfo.productName}}</text>
</view>
<text class='component-order-size-color-txt'>{{productInfo.colorName}},{{productInfo.sizeName}}</text>
</view>
</view>
... ...
/* src/components/order/orderproductinfo.wxss */
.component-order-product-image {
width: 180rpx;
height: 180rpx;
}
.component-order-root-view {
/* height: 200rpx; */
display: flex;
flex-direction: row;
padding-top: 40rpx;
}
.component-order-right-view {
/* width: 490rpx; */
display: flex;
flex-direction: column;
justify-content: space-between;
flex:1;
/* position: fixed; */
}
.component-order-top-view {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.component-order-top-right-name-price-view {
/* width: 100%; */
display: flex;
flex-direction: column;
}
.component-order-product-price-view {
font-family: DINAlternate-Bold;
font-size: 28rpx;
color: #D0021B;
}
.component-order-status-txt {
font-family: PingFang-SC-Medium;
font-size: 24rpx;
color: #000000;
}
.component-order-product-name-txt {
font-family: SFProText-Regular;
font-size: 24rpx;
color: #999999;
margin-top: 11rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.component-order-size-color-txt {
font-family: PingFang-SC-Medium;
font-size: 24rpx;
color: #000000;
margin-top: 28rpx;
}
\ No newline at end of file
... ...
// dist/pages/myassets/index.js
import MyAssetsService from './myassetsService.js'
Page({
/**
* 页面的初始数据
*/
data: {
api: Object,
data: [],
summary:{},
currentPage:1,
page:0,
pagetotal:0,
total:0,
isLast:false,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let api = new MyAssetsService();
this.setData({ api: api });
this.fetchIncomeList();
//绘制背景
this.drawProgressbg();
//开始progress
this.startProgress();
// this.setData({api: new MyAssetsService()});
},
/**
* 画progress底部背景
*/
drawProgressbg: function () {
let summary = {
totalIncome: '130.98',
goodsIncome: '30.98',
compensateIncome: '100',
}
this.setData({
summary: summary
});
// 使用 wx.createContext 获取绘图上下文 context
var ctx = wx.createCanvasContext('canvasProgressbg')
// 设置圆环的宽度
ctx.setLineWidth(10);
// 设置圆环的颜色
let strokeColor = '#E0E0E0'
if (this.data.summary.totalIncome >= 0) {
strokeColor = '#65AB85';
}
ctx.setStrokeStyle(strokeColor);
// 设置圆环端点的形状
ctx.setLineCap('round')
//开始一个新的路径
ctx.beginPath();
//设置一个原点(110,110)，半径为100的圆的路径到当前路径
console.log("起始点：" + Math.PI)
ctx.arc(60, 60, 51, 0, 2 * Math.PI, false);
//对当前路径进行描边
ctx.stroke();
//开始绘制
ctx.draw();
},
/**
* 画progress进度
*/
drawCircle: function (step) {
// 使用 wx.createContext 获取绘图上下文 context
var context = wx.createCanvasContext('canvasProgress');
// 设置圆环的宽度
context.setLineWidth(10);
// 设置圆环的颜色
let strokeColor = '#002B47'
// if (this.data.summary.totalIncome <= 0){
// strokeColor = '#E0E0E0';
// }
context.setStrokeStyle(strokeColor);
// 设置圆环端点的形状
context.setLineCap('round')
//开始一个新的路径
context.beginPath();
//参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
context.arc(60, 60, 51, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
//对当前路径进行描边
context.stroke();
//开始绘制
context.draw()
},
/**
* 开始progress
*/
startProgress: function () {
// 设置倒计时 定时器 每100毫秒执行一次，计数器count+1 ,耗时6秒绘一圈
if (this.data.summary.totalIncome > 0) {
// this.countTimer = setInterval(() => {
// if (this.data.count <= 60) {
/* 绘制彩色圆环进度条
注意此处 传参 step 取值范围是0到2，
所以 计数器 最大值 60 对应 2 做处理，计数器count=60的时候step=2
*/
this.drawCircle(this.data.summary.goodsIncome / (this.data.summary.totalIncome / 2))
// if()
// this.data.count++;
// }
// else {
// clearInterval(this.countTimer);
// this.startProgress();
// }
// }, 100)
}
},
fetchIncomeList: function () {
let params = {
method: 'ufo.asssets.details',
uid: '500031132',
page: this.data.currentPage,
limit: 20,
debug: 'XYZ'
}
this.data.api.getAssetsList(params, () => {
wx.hideLoading();
}).then(data => {
let detail = data.data;
this.setData(detail);
if(this.data.currentPage <= data.pagetotal){
let cPage = data.page+1;
this.setData({ currentPage: cPage});
}else{
this.setData({ isLast: true });
}
// console.log(data);
})
},
/**
* 加载更多
*/
loadMore: function (event) {
let item = this.data.data;
console.log(item)
if (!item.isLast) {
this.fetchIncomeList();
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
... ...
{
"navigationBarTitleText": "我的收入",
"usingComponents": {
"myassetscell": "./myassetscell"
}
}
\ No newline at end of file
... ...
<!--dist/pages/myassets/index.wxml-->
<view class='container'>
<text class='asset-title'>我的收入</text>
<view class='asset-head-parent'>
<view class='income-detail1'>
<text class='income-all-count-txt'>收入：{{summary.totalIncome}}</text>
<view class='income-detail2'>
<view class='income-radiu-icon-view1'></view>
<view>
<text class='income-title-txt'>货款收入:</text>
<text class='income-count-txt'>{{summary.goodsIncome}}</text>
</view>
</view>
<view class='income-detail2'>
<view class='income-radiu-icon-view2'></view>
<view>
<text class='income-title-txt'>补偿收入:</text>
<text class='income-count-txt'>{{summary.compensateIncome}}</text>
</view>
</view>
</view>
<view class='progress-box'>
<!-- 绘制圆环背景 -->
<canvas class="progress-bg" canvas-id="canvasProgressbg" />
<!-- 绘制加载中圆弧 -->
<canvas class="progress-canvas" canvas-id="canvasProgress" />
<!-- 绘制圆弧中心提示文字 -->
<!-- <view class="progress-text">
<text class='progress_info'> {{progress_txt}}</text>
</view> -->
</view>
</view>
<view class= 'tips-root-view'>
<image class='tips-icon' src='../../assets/images/tip_3x.png'></image>
<view class='income-title-txt'>无法收到补偿款请进入<text class='tips-txt'>Yoho!Buy有货APP</text>进行设置</view>
</view>
<text class='income-record-txt'>交易流水</text>
<view class='split-line'></view>
<scroll-view bindscrolltolower="loadMore">
<block wx:for='{{data}}' wx:key="index">
<myassetscell id='myassetscell' item="{{item}}"></myassetscell>
</block>
</scroll-view>
</view>
... ...
/* dist/pages/myassets/index.wxss */
.container {
/* position: fixed; */
/* width: 100%; */
/* height: 100%; */
display: flex;
flex-direction: column;
justify-content: flex-start;
/* align-items: center; */
/* background-color: #34343d; */
margin-left: 40rpx;
margin-right: 40rpx;
}
.asset-title {
font-family: SFProDisplay-Bold;
font-size: 68rpx;
color: #000000;
}
.asset-head-parent {
display: flex;
justify-content: space-between;
margin-top: 52rpx;
/* position: absolute; */
}
.income-detail1 {
display: flex;
flex-direction: column;
justify-content: flex-start;
/* margin-top: 44rpx; */
}
.income-detail2 {
display: flex;
/* flex-direction: row; */
justify-content: flex-start;
align-items: center;
}
.progress-box {
/* position: absolute; */
width: 220rpx;
height: 220rpx;
display: flex;
/* align-items: center; */
/* justify-content: center; */
/* background-color: transparent; */
/* background-color: #eeddff; */
margin-right: 60rpx;
}
.progress-bg {
position: absolute;
width: 220rpx;
height: 220rpx;
}
.progress-canvas {
width: 220rpx;
height: 220rpx;
}
.progress-text {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.progress-info {
font-size: 35rpx;
padding-left: 10rpx;
letter-spacing: 2rpx;
color: white;
}
.tips-icon {
width: 30rpx;
height: 30rpx;
}
.split-line {
background: #E0E0E0;
height: 2rpx;
margin-top: 28rpx;
}
.income-radiu-icon-view1 {
width: 16rpx;
height: 16rpx;
background: #002B47;
border-radius: 8rpx;
}
.income-radiu-icon-view2 {
width: 16rpx;
height: 16rpx;
background: #65AB85;
border-radius: 8rpx;
}
.income-title-txt {
font-family: PingFang-SC-Regular;
font-size: 24rpx;
color: #999999;
margin-left: 16rpx;
}
.income-count-txt {
font-family: DINAlternate-Bold;
font-size: 28rpx;
color: #000000;
margin-left: 20rpx;
}
.income-all-count-txt {
/* display: flex; */
font-family: PingFang-SC-Medium;
font-size: 40rpx;
color: #000000;
margin-top: 18rpx;
}
.tips-root-view {
display: flex;
flex-direction: row;
margin-top: 40rpx;
}
.tips-txt {
/* display: flex; */
font-family: SFProText-Regular;
font-size: 24rpx;
color: #000000;
text-decoration-line: underline;
}
.income-record-txt {
/* display: flex; */
font-family: PingFang-SC-Medium;
font-size: 40rpx;
color: #000000;
margin-top: 86rpx;
}
\ No newline at end of file
... ...
import BaseService from '../../libs/services/baseService.js';
const UFO_ASSETS_LIST = 'ufo.asssets.details';
export default class MyAssetsService extends BaseService {
async getAssetsList(params, complete) {
return await this.GET(
{
...params,
method: UFO_ASSETS_LIST
},
{
complete
}
).then((data) => {
return data;
}).catch((error) => {
return error;
})
}
}
\ No newline at end of file
... ...
Component({
properties: {
item: Object,
},
})
\ No newline at end of file
... ...
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
... ...
<!--dist/pages/myassets/myassetscell.wxml-->
<view class='assets-record-container'>
<view class='assets-record-info-detail-view'>
<view class='assets-record-left-view'>
<image class='assets-record-image-style' src='../../static/images/address.png'></image>
<view class='assets-record-middle-view'>
<text class='assets-record-code-txt'>{{item.tradeTypeDesc}}(订单号：{{item.orderCode}})</text>
<text class='assets-record-time-txt'>{{item.createTime}}</text>
</view>
</view>
<view class='assets-record-right-view'>
<text class='assets-record-income-txt'>{{item.amount}}</text>
<text class='assets-record-income-tip-txt' wx:if="{{!item.normalFlag}}">打款失败</text>
</view>
</view>
<view class='assets-record-split-line'></view>
</view>
... ...
/* dist/pages/myassets/myassetscell.wxss */
.assets-record-container {
display: flex;
flex-direction: column;
justify-content: space-between;
/* background: #ee00dd; */
/* position: fixed; */
}
.assets-record-split-line {
background: #E0E0E0;
height: 2rpx;
}
.assets-record-info-detail-view {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-top: 30rpx;
padding-bottom: 30rpx;
}
.assets-record-left-view {
display: flex;
flex-direction: row;
align-items: center;
}
.assets-record-middle-view {
display: flex;
flex-direction: column;
margin-left: 20rpx;
}
.assets-record-right-view {
display: flex;
flex-direction: column;
align-items: center;
}
.assets-record-image-style {
width: 48rpx;
height: 48rpx;
/* background: #00ff */
}
.assets-record-code-txt {
font-family: PingFang-SC-Regular;
font-size: 28rpx;
color: #000000;
}
.assets-record-time-txt {
font-family: SFProText-Regular;
font-size: 24rpx;
color: #999999;
margin-top: 12rpx;
}
.assets-record-income-txt {
font-family: SFProText-Medium;
font-size: 28rpx;
color: #000000;
}
.assets-record-income-tip-txt {
font-family: PingFang-SC-Regular;
font-size: 20rpx;
color: #D0021B;
}
... ...
// dist/pages/orderDetail/index.js
import OrderDetailService from './orderDetailService.js'
Page({
/**
* 页面的初始数据
*/
data: {
api:Object,
data:{},
// buttons: [{
// code: "cancel_order",
// name: "CANCEL_ORDER",
// text: "取消订单"
// }, {
// code: "now_buy",
// name: "NOW_BUY",
// text: "立即支付"
// }],
// createTime: "2018-10-30 16:25:07",
// earnestMoney: 0,
// goodsInfo: {
// colorId: 0,
// colorName: "黑色",
// goodImg: "http://img11.static.yhbimg.com/goodsimg/2018/10/27/17/014085bd1e135eb6831d5c5ecf162f2d9e.jpg?imageMogr2/thumbnail/{width}x{height}/background/d2hpdGU=/position/center/quality/80",
// goodPrice: "2799.00",
// productId: 10000161,
// productName: "adidas Yeezy 500 Utility Black 炭黑",
// sizeId: 0,
// sizeName: "43",
// skup: 0,
// storageId: 10001003
// },
// orderCode: 9786065969152,
// payment: 1,
// paymentStr: "微信",
// priceInfo: {
// feePrice: "25.00",
// goodPrice: "2799.00",
// realPayPrice: "2824.00"
// },
// secendLevelCreateTime: 1540887907,
// statusDetail: {
// detailDesc: "请在15分钟内完成付款，超时付款将自动取消订单",
// expressShow: false,
// leftTime: 864,
// statuStr: "待付款",
// status: 0
// },
// submitOrderTimeStr: "2018-10-30 16:25:07",
// uid: 5563429,
// userAddress: {
// address: "国家广告产****17楼",
// address_id: 12498411,
// area: "江苏省 南京市 建邺区 建邺区新城科技园",
// areaCode: "320105400",
// consignee: "*测",
// isUpdate: "N",
// mobile: "159****5925",
// phone: "",
// zipCode: ""
// }
// buttons: [],
// createTime:'',
// earnestMoney:'',
// goodsInfo:{},
// orderCode: '',
// payment: '',
// paymentStr: '',
// priceInfo: {},
// {
// "feePrice": "25.00",
// "goodPrice": "2799.00",
// "realPayPrice": "2824.00"
// },
// secendLevelCreateTime: '',
// statusDetail: {},
// {
// "detailDesc": "请在15分钟内完成付款，超时付款将自动取消订单",
// "expressShow": false,
// "leftTime": 864,
// "statuStr": "待付款",
// "status": 0
// },
// submitOrderTimeStr: '',
// "uid": 5563429,
// userAddress: {},
// {"address": "国家广告产****17楼",
// "address_id": 12498411,
// "area": "江苏省 南京市 建邺区 建邺区新城科技园",
// "areaCode": "320105400",
// "consignee": "*测",
// "isUpdate": "N",
// "mobile": "159****5925",
// "phone": "",
// "zipCode": ""
// }
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let api = new OrderDetailService();
this.setData({ api: api});
this.fetchOrderDetail();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
// let str = this.data.data.buttons[0].text;
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
fetchOrderDetail: function(){
let that = this;
let params = {
orderCode: '9786602110976',
uid: '500031132',
tabType: 'buy',
debug: 'XYZ'
}
this.data.api.getOrderDetailInfo(params, () => {
wx.hideLoading();
}).then(data => {
let detail = data.data;
that.setData(detail);
// if (this.data.currentPage <= data.pagetotal) {
// let cPage = data.page + 1;
// this.setData({ currentPage: cPage });
// } else {
// this.setData({ isLast: true });
// }
// console.log(data);
})
}
})
\ No newline at end of file
... ...
{
"navigationBarTitleText": "订单详情",
"usingComponents": {
"orderproductinfo": "../../components/order/orderproductinfo",
"orderdetailaction": "../../components/order/orderaction"
}
}
\ No newline at end of file
... ...
<!--dist/pages/orderDetail/index.wxml-->
<scroll-view class='order-detail-scrool-view'>
<text class='order-detail-status-title-txt'>{{statusDetail.statuStr}}</text>
<view class='order-detail-time-view'>
<image class='order-detail-time-image' src='../../static/images/address.png'></image>
<text class='order-detail-count-down-txt'>{{statusDetail.leftTime}}</text>
</view>
<text class='order-detail-tips-txt'>{{statusDetail.detailDesc}}</text>
<view class='order-detail-split-line'></view>
<!-- 地址信息 -->
<view class='order-detail-address-view'>
<image class='order-detail-time-image' src='../../static/images/address.png'></image>
<view class='order-detail-address-info-view'>
<text class='order-detail-address-user-name-txt'>{{userAddress.consignee}}</text>
<text class='order-detail-address-detail-info-txt'>{{userAddress.area}}{{userAddress.address}}</text>
<text class='order-detail-address-phone-num-txt'>{{userAddress.mobile}}</text>
</view>
</view>
<view class='order-detail-split-line'></view>
<orderproductinfo id="orderproductinfo" product-info="{{goodsInfo}}" />
<view class='order-detail-split-line'></view>
<view class='order-detail-count-view' style='margin-top:28rpx;'>
<text class='order-detail-sum-grey-txt'>商品金额：</text>
<text class='order-detail-sum-grey-txt'>¥{{priceInfo.goodPrice}}</text>
</view>
<view class='order-detail-count-view'>
<text class='order-detail-sum-grey-txt'>运费：</text>
<text class='order-detail-sum-grey-txt'>¥{{priceInfo.feePrice}}</text>
</view>
<view class='order-detail-count-view'>
<text class='order-detail-sum-black-txt'>实际金额：</text>
<text class='order-detail-sum-black-txt'>¥{{priceInfo.realPayPrice}}</text>
</view>
<view class='order-detail-split-line'></view>
<view class='order-detail-create-time-view'>
<text class='order-detail-create-time-txt'>创建时间：</text>
<text class='order-detail-create-time-txt'>{{submitOrderTimeStr}}</text>
</view>
<view>
<text class='order-detail-create-time-txt'>订单编号：</text>
<text class='order-detail-create-time-txt'>{{orderCode}}</text>
</view>
<view wx:if='{{payment}}'>
<text class='order-detail-create-time-txt'>支付方式：</text>
<text class='order-detail-create-time-txt'>{{paymentStr}}</text>
</view>
<view class='order-detail-split-line'></view>
</scroll-view>
<orderdetailaction id="orderdetailaction" action-info="{{buttons}}" from-page="1" real-price="{{priceInfo.realPayPrice}}"/>
<!-- <view>
<view class='order-detail-split-line'></view>
<block wx:if="{{data.buttons}}">
-->
<!-- <orderaction id="orderaction" action-info="{{data}}" from-page="0" /> -->
<!-- </block> -->
<!-- <view class='order-detail-bottom-action-view'>
<view class='order-detail-bottom-action-info-view'>
<text class='order-detail-pay-amount-txt'>$2024.00</text>
<text class='order-detail-pay-amount-title-txt'>实付金额</text>
</view>
<view class='order-detail-bottom-action-button-view'>
<button class='order-detail-unselected-button'>取消订单</button>
<button class='order-detail-selected-button'>立即支付</button>
</view>
</view> -->
... ...
/* dist/pages/orderDetail/index.wxss */
.order-detail-container {
/* width: 100%; */
/* height: 100%; */
display: flex;
flex-direction: column;
justify-content: space-between;
/* position: fixed; */
margin-left: 40rpx;
margin-right: 40rpx;
}
.order-detail-root {
position: fixed;
}
.order-detail-bottom-action-view {
width: calc( 100% - 80rpx );
height: 140rpx;
display: flex;
position: fixed;
bottom: 0;
flex-direction: column;
/* align-items: center; */
/* flex-direction: row; */
/* justify-content: space-between; */
background: #FFFFFF;
/*
padding-top: 20rpx;
padding-bottom: 20rpx;
*/
}
.order-detail-bottom-action-info-view {
display: flex;
flex-direction: column;
}
.order-detail-bottom-action-button-view {
display: flex;
flex-direction: row;
}
.order-detail-split-line {
background: #e0e0e0;
height: 2rpx;
margin-top: 40rpx;
}
.order-detail-scrool-view {
/* height: calc( 100% - 140rpx ); */
width: calc( 100% - 80rpx );
display: flex;
flex-direction: column;
/* justify-content: start; */
justify-content: flex-start;
padding-left: 40rpx;
margin-bottom: 140rpx;
}
.order-detail-time-view {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
margin-top: 30rpx;
}
.order-detail-time-image {
width: 50rpx;
height: 50rpx;
}
.order-detail-address-view {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
margin-top: 38rpx;
}
.order-detail-address-info-view {
display: flex;
flex-direction: column;
margin-left: 40rpx;
}
.order-detail-address-user-name-txt {
font-family: DINAlternate-Bold;
font-size: 32rpx;
color: #000000;
}
.order-detail-address-detail-info-txt {
font-family: PingFang-SC-Regular;
font-size: 24rpx;
color: #999999;
margin-top: 12rpx;
}
.order-detail-address-phone-num-txt {
font-family: SFProText-Medium;
font-size: 28rpx;
color: #000000;
margin-top: 12rpx;
}
.order-detail-count-view {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 12rpx;
}
.order-detail-status-title-txt {
font-family: SFProDisplay-Bold;
font-size: 68rpx;
color: #000000;
}
.order-detail-count-down-txt {
font-family: DINAlternate-Bold;
font-size: 32rpx;
color: #000000;
}
.order-detail-tips-txt {
font-family: PingFang-SC-Regular;
font-size: 24rpx;
color: #999999;
margin-top: 12rpx;
}
.order-detail-sum-grey-txt {
font-family: PingFang-SC-Regular;
font-size: 28rpx;
color: #999999;
}
.order-detail-sum-black-txt {
font-family: PingFang-SC-Regular;
font-size: 28rpx;
color: #999999;
}
.order-detail-create-time-view {
margin-top: 40rpx;
}
.order-detail-create-time-txt {
font-family: PingFang-SC-Regular;
font-size: 28rpx;
color: #000000 ;
}
.order-detail-pay-amount-txt {
font-family: DINAlternate-Bold;
font-size: 28rpx;
color: #D0021B;
}
.order-detail-pay-amount-title-txt {
font-family: PingFang-SC-Regular;
font-size: 24rpx;
color: #000000;
margin-top: 6rpx;
}
.order-detail-selected-button {
display: flex;
align-items: center;
font-family: PingFang-SC-Medium;
font-size: 24rpx;
color: #FFFFFF;
background-color: #002B47;
border-radius: 0;
padding-top: 20rpx;
padding-bottom: 20rpx;
padding-left: 40rpx;
padding-right: 40rpx;
}
.order-detail-unselected-button::after {
/* border-style: none; */
border-radius: 0;
}
.order-detail-unselected-button {
display: flex;
align-items: center;
font-family: PingFang-SC-Regular;
font-size: 24rpx;
color: #999999;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 0;
/* border-style: none; */
margin-right: 20rpx;
padding-left: 40rpx;
padding-right: 40rpx;
}
#orderdetailaction {
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
\ No newline at end of file
... ...
import BaseService from '../../libs/services/baseService.js';
const UFO_ORDER_DETAIL = 'ufo.order.detail';
export default class MyAssetsService extends BaseService {
async getOrderDetailInfo(params, complete) {
return await this.GET(
{
...params,
method: UFO_ORDER_DETAIL
},
{
complete
}
).then((data) => {
return data;
}).catch((error) => {
return error;
})
}
}
\ No newline at end of file
... ...
import Taro, {Component} from '@tarojs/taro';
import {View} from '@tarojs/components';
import OrderListService from './orderListService.js'
Page({
import './index.scss';
/**
* 页面的初始数据
*/
data: {
api:Object,
data:[],
page:1,
pageSize:20,
pagetotal:0,
total:0,
// data:[{
// buttons: [],
// createTime: '',
// goodsInfo:{
export default class OrderList extends Component {
constructor() {
super(...arguments);
// },
// leftTime: 0,
// orderCode: '',
// realPrice: '',
// secendLevelCreateTime: '',
// skup: '',
// statuStr: '',
// status: '',
// }]
// data:[{
// buttons: [{
// code: "del_order",
// name: "DEL_ORDER",
// text: "删除"
// }, {
// code: "buy_again",
// name: "BUY_AGAIN",
// text: "再次购买"
// }],
// createTime: "2018-10-30 16:25:07",
// goodsInfo: {
// colorName: "黑色",
// goodImg: "http://img11.static.yhbimg.com/goodsimg/2018/10/27/17/014085bd1e135eb6831d5c5ecf162f2d9e.jpg?imageMogr2/thumbnail/{width}x{height}/background/d2hpdGU=/position/center/quality/80",
// goodPrice: "2799.00",
// productId: 10000161,
// productName: "adidas Yeezy 500 Utility Black 炭黑",
// sizeName: "43",
// skup: 781,
// storageId: 10001003,
// uid: 0
// },
// leftTime: 0,
// orderCode: 9786065969152,
// realPrice: "2824.00",
// secendLevelCreateTime: 1540887907,
// skup: 781,
// statuStr: "交易失败",
// status: 15,
// uid: 5563429
// },],
},
this.state = {
tabs: ['出售', '代发货', '已发货', '交易成功', '交易失败'],
curTab: '代发货'
};
}
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let api = new OrderListService();
this.setData({api: api});
this.fetchOrderList();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
render() {
let {tabs, curTab} = this.state;
return (
<View className="order-list-page">
<View className="tabs">
{
tabs.map((item, index) => {
return (
<View className={curTab === item ? 'tabs-item actived' : 'tabs-item'} key={index}>{item}</View>
)
})
}
</View>
</View>
)
/**
* 请求订单列表数据
*/
fetchOrderList: function() {
wx.showLoading({
title: '加载中...',
})
let params = {
uid: '500031132',
limit: '20',
page: '1',
tabType: 'buy',
type: '6',
debug: 'XYZ',
}
}
\ No newline at end of file
this.data.api.getOrderListInfo(params, () => {
wx.hideLoading();
}).then(data => {
if(data.data && data.data.data){
// let orderLists = data.data.data;
this.setData(data.data);
}
let cPage = this.data.page;
let pName = this.data.data[0].goodsInfo.productName;
// if (this.data.currentPage <= data.pagetotal) {
// let cPage = data.page + 1;
// this.setData({ currentPage: cPage });
// } else {
// this.setData({ isLast: true });
// }
// console.log(data);
});
}
})
\ No newline at end of file
... ...
{
"navigationBarTitleText": "我的购买",
"usingComponents": {
"orderlistcell":"./orderlistcell"
}
}
\ No newline at end of file
... ...
.tabs {
width: 100%;
height: 100px;
padding: 0 5px;
box-sizing: border-box;
background: #fff;
display: flex;
justify-content: space-between;
.tabs-item {
font-family: PingFang-SC-Medium;
font-size: 32px;
color: #999;
letter-spacing: 0;
text-align: center;
line-height: 96px;
display: inline-block;
padding: 0 20px;
&.actived {
font-size: 40px;
color: #000;
box-sizing: border-box;
border-bottom: 6px solid #000;
}
}
}
<scroll-view>
<block wx:for='{{data}}' wx:key='index'>
<orderlistcell id="orderlistcell" item="{{item}}" />
</block>
<!-- <orderproductinfo id="orderproductinfo">
</orderproductinfo> -->
</scroll-view>
\ No newline at end of file
... ...
import BaseService from '../../libs/services/baseService.js';
const UFO_ORDER_LIST = 'ufo.order.list';
export default class MyAssetsService extends BaseService {
async getOrderListInfo(params, complete) {
return await this.GET(
{
...params,
method: UFO_ORDER_LIST
},
{
complete
}
).then((data) => {
return data;
}).catch((error) => {
return error;
})
}
}
\ No newline at end of file
... ...
// dist/pages/orderList/orderlistcell.js
Component({
properties: {
item: Object
},
});
\ No newline at end of file
... ...
{
"component": true,
"usingComponents": {
"orderproductinfo": "../../components/order/orderproductinfo",
"orderaction": "../../components/order/orderaction"
}
}
\ No newline at end of file
... ...
<!--src/pages/orderList/orderlistcell.wxml-->
<view class='orderlistcell-root-container'>
<orderproductinfo id="orderproductinfo" product-info="{{item.goodsInfo}}" statu-str="{{item.statuStr}}">
</orderproductinfo>
<orderaction id="orderaction" action-info="{{item.buttons}}" from-page="0" />
<view class='orderlistcell-root-split-line'></view>
</view>
... ...
.orderlistcell-root-container {
display: flex;
flex-direction: column;
padding-left: 20rpx;
padding-right: 20rpx;
/* justify-content: flex-start; */
}
.orderlistcell-root-split-line {
height: 2rpx;
background: #e0e0e0;
}
/* .orderlistcell-image {
width: 160rpx;
height: 200rpx;
} */
/* .orderlistcell-top-view { */
/* height: 200rpx; */
/* display: flex;
flex-direction: row;
} */
/* .orderlistcell-top-right-view {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.orderlistcell-top-price-status-view {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.orderlistcell-top-right-name-price-view {
width: 100%;
display: flex;
flex-direction: column;
} */
.orderlistcell-middle-view {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.action-view {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 20rpx;
}
.time-image {
width: 50rpx;
height: 50rpx;
}
\ No newline at end of file
... ...
//获取应用实例
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
//获得dialog组件
this.dialog = this.selectComponent("#dialog");
},
showDialog() {
this.dialog.showDialog();
},
//取消事件
_cancelEvent() {
console.log('你点击了取消');
this.dialog.hideDialog();
},
//确认事件
_confirmEvent() {
console.log('你点击了确定');
this.dialog.hideDialog();
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
... ...
{
"navigationBarTitleText": "测试",
"usingComponents": {
"dialog": "../../components/dialog/dialog"
}
}
\ No newline at end of file
... ...
<view class="container">
<dialog id='dialog'
title='我是标题'
content='恭喜你，学会了小程序组件'
cancelText='知道了'
confirm='谢谢你'
bind:cancelEvent="_cancelEvent"
bind:confirmEvent="_confirmEvent">
</dialog>
<button type="primary" bindtap="showDialog"> ClickMe! </button>
</view>
\ No newline at end of file
... ...