Leadfyy.co
/
ec.uniapp-master
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

完成物流详情页面UI

master
邓平艺 4 years ago
parent
fbf86e6116
commit
4525796638
3 changed files with 350 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 254
      components/uni-steps/uni-steps.vue
  2. 7
      pages.json
  3. 89
      pages/order/newdetail/logistics.vue

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

@ -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>

7
pages.json
View File

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

89
pages/order/newdetail/logistics.vue
View File

@ -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>
Write Preview
Loading…
Cancel
Save