Enzo 4 years ago
parent
commit
0998ff5bda
  1. 254
      components/uni-steps/uni-steps.vue
  2. 2
      manifest.json
  3. 7
      pages.json
  4. 89
      pages/order/newdetail/logistics.vue
  5. 162
      pages/recharge/balance/balance.vue

254
components/uni-steps/uni-steps.vue

@ -0,0 +1,254 @@
<template>
<view class="uni-steps">
<view :class="[direction==='column'?'uni-steps__column':'uni-steps__row']">
<view :class="[direction==='column'?'uni-steps__column-text-container':'uni-steps__row-text-container']">
<view v-for="(item,index) in options" :key="index" :class="[direction==='column'?'uni-steps__column-text':'uni-steps__row-text']">
<text :style="{color:index<=active?activeColor:deactiveColor}" :class="[direction==='column'?'uni-steps__column-title':'uni-steps__row-title']">{{item.title}}</text>
<text :style="{color:index<=active?activeColor:deactiveColor}" :class="[direction==='column'?'uni-steps__column-desc':'uni-steps__row-desc']">{{item.desc}}</text>
</view>
</view>
<view :class="[direction==='column'?'uni-steps__column-container':'uni-steps__row-container']">
<view :class="[direction==='column'?'uni-steps__column-line-item':'uni-steps__row-line-item']" v-for="(item,index) in options"
:key="index">
<view :class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--before':'uni-steps__row-line--before']"
:style="{backgroundColor:index<=active&&index!==0?activeColor:index===0?'transparent':deactiveColor}"></view>
<view :class="[direction==='column'?'uni-steps__column-check':'uni-steps__row-check']" v-if="index === active">
<uni-icons :color="activeColor" type="checkbox-filled" size="14"></uni-icons>
</view>
<view :class="[direction==='column'?'uni-steps__column-circle':'uni-steps__row-circle']" v-else :style="{backgroundColor:index<active?activeColor:deactiveColor}"></view>
<view :class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--after':'uni-steps__row-line--after']"
:style="{backgroundColor:index<active&&index!==options.length-1?activeColor:index===options.length-1?'transparent':deactiveColor}"></view>
</view>
</view>
</view>
</view>
</template>
<script>
/**
* Steps 步骤条
* @description 评分组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=34
* @property {Number} active 当前步骤
* @property {String} direction = [row|column] 当前步骤
* @value row 横向
* @value column 纵向
* @property {String} activeColor 选中状态的颜色
* @property {Array} options 数据源格式为[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}]
*/
export default {
name: 'UniSteps',
props: {
direction: {
// row column
type: String,
default: 'row'
},
activeColor: {
//
type: String,
default: '#1aad19'
},
deactiveColor: {
//
type: String,
default: '#999999'
},
active: {
//
type: Number,
default: 0
},
options: {
type: Array,
default () {
return []
}
} //
},
data() {
return {}
}
}
</script>
<style lang="scss" scoped>
.uni-steps {
/* #ifndef APP-NVUE */
display: flex;
width: 100%;
/* #endif */
/* #ifdef APP-NVUE */
flex: 1;
/* #endif */
flex-direction: column;
}
.uni-steps__row {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
}
.uni-steps__column {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row-reverse;
}
.uni-steps__row-text-container {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: flex-end;
margin-bottom: 8px;
}
.uni-steps__column-text-container {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
flex: 1;
}
.uni-steps__row-text {
/* #ifndef APP-NVUE */
display: inline-flex;
/* #endif */
flex: 1;
flex-direction: column;
}
.uni-steps__column-text {
padding: 8px 0px;
// border-bottom-style: solid;
// border-bottom-width: 1px;
// border-bottom-color: $uni-border-color;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
}
.uni-steps__row-title {
font-size: $uni-font-size-base;
line-height: 16px;
text-align: center;
}
.uni-steps__column-title {
font-size: $uni-font-size-base;
text-align: left;
line-height: 18px;
}
.uni-steps__row-desc {
font-size: 12px;
line-height: 14px;
text-align: center;
}
.uni-steps__column-desc {
font-size: $uni-font-size-sm;
text-align: left;
line-height: 18px;
}
.uni-steps__row-container {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
}
.uni-steps__column-container {
/* #ifndef APP-NVUE */
display: inline-flex;
/* #endif */
width: 30px;
flex-direction: column;
}
.uni-steps__row-line-item {
/* #ifndef APP-NVUE */
display: inline-flex;
/* #endif */
flex-direction: row;
flex: 1;
height: 14px;
line-height: 14px;
align-items: center;
justify-content: center;
}
.uni-steps__column-line-item {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
flex: 1;
align-items: center;
justify-content: center;
}
.uni-steps__row-line {
flex: 1;
height: 1px;
background-color: $uni-text-color-grey;
}
.uni-steps__column-line {
width: 1px;
background-color: $uni-text-color-grey;
}
.uni-steps__row-line--after {
transform: translateX(1px);
}
.uni-steps__column-line--after {
flex: 1;
transform: translate(0px, 1px);
}
.uni-steps__row-line--before {
transform: translateX(-1px);
}
.uni-steps__column-line--before {
height: 6px;
transform: translate(0px, -1px);
}
.uni-steps__row-circle {
width: 5px;
height: 5px;
border-radius: 100px;
background-color: $uni-text-color-grey;
margin: 0px 3px;
}
.uni-steps__column-circle {
width: 5px;
height: 5px;
border-radius: 100px;
background-color: $uni-text-color-grey;
margin: 4px 0px 5px 0px;
}
.uni-steps__row-check {
margin: 0px 6px;
}
.uni-steps__column-check {
height: 14px;
line-height: 14px;
margin: 2px 0px;
}
</style>

2
manifest.json

@ -117,7 +117,7 @@
"quickapp" : {},
/* */
"mp-weixin" : {
"appid" : "wx43759fe438b7b066",
"appid" : "wxb35ef055a4dd8ad4",
"setting" : {
"urlCheck" : false,
"postcss" : true

7
pages.json

@ -475,6 +475,13 @@
"navigationBarTitleText": "等待用户支付" ,
"navigationStyle":"custom"
}
},
{
"path": "pages/order/newdetail/logistics",
"style": {
"navigationBarTitleText": "物流详情" ,
"navigationStyle":"custom"
}
}
],
"globalStyle": {

89
pages/order/newdetail/logistics.vue

@ -0,0 +1,89 @@
<template>
<view>
<lf-nav title="物流详情" :showIcon="true"></lf-nav>
<view class="top">
<image class="img" src="https://picsum.photos/200/300" mode="aspectFill"></image>
<view>已签收</view>
</view>
<view class="head">
<view class="lf-flex">
<image class="avatar" src="https://picsum.photos/200/300" mode="aspectFill"></image>
<view class="name">邮政快递包裹 8374938754389</view>
</view>
<view class="copy" @click="copy">复制</view>
</view>
<view>
<uni-steps :options="options" active-color="#15716E" direction="column" :active="0"></uni-steps>
</view>
<view style="height: 90rpx;"></view>
</view>
</template>
<script>
import uniSteps from '@/components/uni-steps/uni-steps.vue';
export default {
components: {
uniSteps
},
data(){
return {
options: [
{title:'[已签收] 09-09 08:28',desc:'到达【南宁邮件处理中心】'},
{title:'[已签收] 09-09 08:28',desc:'到达【南宁邮件处理中心】'},
{title:'[已签收] 09-09 08:28',desc:'到达【南宁邮件处理中心】'},
{title:'[已签收] 09-09 08:28',desc:'到达【南宁邮件处理中心】'}]
}
},
onLoad(){
},
methods: {
copy(){
uni.setClipboardData({
data: '你好'
})
}
}
}
</script>
<style lang="scss" scoped="scoped">
.top{
width: 750rpx;
height: 100rpx;
background: #15716E;
display: flex;
align-items: center;
padding: 0 32rpx;
font-size: 36rpx;
color: #FFFFFF;
.img{
border-radius: 5rpx;
width: 70rpx;
height: 70rpx;
margin-right: 20rpx;
}
}
.head{
width: 750rpx;
height: 130rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32rpx;
.avatar{
width: 70rpx;
height: 70rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.name{
font-size: 28rpx;
color: #222222;
}
.copy{
font-size: 28rpx;
color: #777;
}
}
</style>

162
pages/recharge/balance/balance.vue

@ -9,7 +9,7 @@
<text class="lf-iconfont icon-- lf-font-50"></text>
</view>
<view class="point">
<text>78326478</text>
<text>{{ num || 0 }}</text>
<text class="label">()</text>
</view>
</view>
@ -39,19 +39,175 @@
</template>
<script>
import { pageLogin, getUrl, config, is } from '@/common/js/utils.js';
export default {
data(){
return {
date: ''
date: '',
// activeIndex: 0,
// tabList: [{
// id: 0,
// name: "",
// init: false,
// page: 0,
// more: true,
// show: false
// }, {
// id: 1,
// name: "",
// init: false,
// page: 0,
// more: true,
// show: false
// }],
// dataList: {
// 0: [],
// 1: []
// },
list: [],
show: false,
page: 0,
more: true,
token: this.getToken(),
num: "",
showText: '正在加载下一页数据',
config: ''
}
},
onLoad(){
onLoad(e){
// TODO listdate
//
var bgConfig = this.$cookieStorage.get('globalConfig') || '';
this.setData({
config: bgConfig
}); // var status=0,page=1;
// this.queryBalanceList(token);
// var status = e.type ? e.type : 0;
// var page = this.tabList[status].page;
// pageLogin(getUrl(), token => {
// this.setData({
// 'token': token
// });
// this.queryBalanceList(token, status, page);
// this.queryUserSum(token);
// });
this.queryBalanceList();
this.queryUserSum(this.token);
},
methods: {
dateChange(event){
this.date = event.detail.value;
},
queryBalanceList() {
// var type = status ? 'consume' : 'recharge';
// var params = type ? {
// type
// } : {};
// params.page = page;
let token = this.token;
let params = {
page: this.page
};
this.$http.get({
api: 'api/users/balance/list',
header: {
Authorization: token
},
data: params
}).then(res => {
if (res.statusCode == 200) {
res = res.data;
// this.result(res, status);
var page = res.meta.pagination;
this.list = res.data;
this.page = page.current_page;
this.more = page.current_page < page.total_pages;
this.show = false;
} else {
wx.showModal({
title: '提示',
content: '数据请求失败',
success: res => {}
});
}
wx.hideLoading();
}).catch(rej => {
wx.showToast({
title: "请求失败",
image: '../../../static/error.png'
});
wx.hideLoading();
});
},
//
queryUserSum(token) {
this.$http.get({
api: "api/users/balance/sum",
header: {
Authorization: token
}
}).then(res => {
if (res.statusCode == 200) {
res = res.data;
this.setData({
"num": res.data.sum
});
} else {
wx.showModal({
title: '提示',
content: '数据请求失败',
success: res => {}
});
}
});
},
setData: function (obj) {
let that = this;
let keys = [];
let val, data;
Object.keys(obj).forEach(function (key) {
keys = key.split('.');
val = obj[key];
data = that.$data;
keys.forEach(function (key2, index) {
if (index + 1 == keys.length) {
that.$set(data, key2, val);
} else {
if (!data[key2]) {
that.$set(data, key2, {});
}
}
data = data[key2];
});
});
}
},
onReachBottom(e) {
// var status = this.activeIndex;
// var page = this.tabList[status].page + 1;
// var tabList = `tabList[${status}]`;
if (this.more) {
this.page++;
this.show = true;
this.queryBalanceList();
// this.setData({
// [`${tabList}.show`]: true
// });
// var token = this.token;
// this.queryBalanceList(token, status, page);
} else {
wx.showToast({
image: '../../../static/error.png',
title: '再拉也没有啦'
});
}
}
}
</script>

Loading…
Cancel
Save