theluyuan/deming
2
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

6.8

Browse Source
This commit is contained in:
ghusermoon
2020-06-08 15:23:23 +08:00
parent e8c74df8a0
commit 233cb82ee4
44 changed files with 2461 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
pageE/order/Comment.vue Normal file
View File

@@ -0,0 +1,98 @@
<template>
<view class="comment">
<view class="main-container">
<textarea @blur="bindTextAreaBlur" auto-height placeholder="发表你的评价吧，收货时心情如何？" maxlength="200" />
<u-upload
ref="uUpload"
@on-uploaded="onUploaded"
:custom-btn="true"
:max-count="count"
:auto-upload="false"
>
<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
<img src="../static/mine/27.png" />
</view>
</u-upload>
</view>
<view class="rate">
<view>
<view class="title">物流评分</view>
<u-rate :count="5" current="1" active-color="#FF780F" inactive-color="#CCCCCC" gutter="20" size="32"></u-rate>
</view>
<view>
<view class="title">服务态度</view>
<u-rate :count="5" current="1" active-color="#FF780F" inactive-color="#CCCCCC" gutter="20" size="32"></u-rate>
</view>
<view>
<view class="title">描述相符</view>
<u-rate :count="5" current="1" active-color="#FF780F" inactive-color="#CCCCCC" gutter="20" size="32"></u-rate>
</view>
</view>
<view class="write-btn" @click="submit">发表意见</view>
</view>
</template>
<script>
export default {
data() {
return {
count: 4,
logistics: 1,
service: 1,
describe: 1
}
}
};
</script>
<style lang="scss" scoped>
.comment {
min-height: calc(100vh - var(--window-top));
background-color: #ECECEC;
.main-container {
background-color: #ffffff;
padding: 30rpx;
margin-bottom: 10rpx;
textarea {
width: 100% !important;
margin-bottom: 60rpx;
}
.slot-btn {
width: 140rpx;
height: 140rpx;
background: rgba(236,236,236,1);
border-radius: 10rpx;
text-align: center;
> img {
margin-top: 48rpx;
width: 54rpx;
height: 49rpx;
}
}
}
.rate {
background-color: #ffffff;
padding: 33rpx 30rpx;
> view {
display: flex;
&:not(:last-child) {
margin-bottom: 35rpx;
}
.title {
margin-right: 25rpx;
font-size: 28rpx;
color: rgba(51,51,51,1);
}
}
}
.write-btn {
margin: 120rpx auto 0;
width: 690rpx;
height: 98rpx;
background: rgba(255,120,15,1);
border-radius: 46rpx;
font-size: 36rpx;
color: rgba(255,255,255,1);
text-align: center;
line-height: 98rpx;
}
}
</style>

302
pageE/order/Details.vue Normal file
View File

@@ -0,0 +1,302 @@
<template>
<view class="details">
<view class="status">
<view class="text">
<view class="status-text">交易成功</view>
<view class="time" v-if="current == 2">距离结束22:22:22</view>
</view>
<image src="../static/mine/31.png" v-if="current"></image>
</view>
<view class="info">
<view class="info-address">
<image src="../static/mine/28.png"></image>
<view class="address-right">
<view class="user-info">
<view>胖胖</view>
<view>18220171014</view>
</view>
<view class="address-text u-line-2">山东省泰安市泰山区东岳大街与克山路交汇口银山店四楼橙天影视南邻山东省泰安市泰山区东岳大街与克山路交汇口银山店四楼橙天影视南邻</view>
</view>
</view>
<view class="info-goods">
<view class="goods-store">
<view class="stoer-title">
<image src="../static/mine/23.png" class="store-image"></image>
<view class="store-name">胖胖的店</view>
<image src="../static/mine/21.png" class="right-icon"></image>
</view>
<view class="store-goods">
<image src="../static/mine/23.png"></image>
<view class="goods-info">
<view class="goods-name u-line-2">木糖少女小紫薯西装领连衣裙夏季新款女装夏收腰格子格纹裙子木糖少女小紫薯西装领连衣裙夏季新款女装夏收腰格子格纹裙子</view>
<view class="goods-order">
<view class="price">￥99</view>
<view class="num">x2</view>
</view>
</view>
</view>
</view>
<view class="goods-others">
<view>
<view class="title">运费(快递/骑手)</view>
<view class="price">￥0.00</view>
</view>
<view>
<view class="title">店铺优惠</view>
<view class="price">￥0.00</view>
</view>
<view>
<view class="title">订单总价</view>
<view class="price">￥0.00</view>
</view>
<view>
<view class="title">实付费(含运费)</view>
<view class="price">￥0.00</view>
</view>
<view>
<view class="title">支付方式</view>
<view class="price">￥0.00</view>
</view>
</view>
</view>
<view class="info-order">
<view>订单编号：2222222222222222</view>
<view>微信交易号：2222222222222222</view>
<view>创建时间：2020-05-14</view>
</view>
</view>
<view class="btn" v-if="[0, 2, 4].indexOf(current) < 0">
<view class="logistics" v-if="current == 3" @click="toOtherPage('Logistics')">查看物流</view>
<view class="comment" v-if="current == 5">立即评价</view>
<view class="payment" v-if="current == 1">立即支付</view>
<view class="service" v-if="current == 6">联系官方客服</view>
<view class="submit" v-if="current == 6">提交官方审核</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
current: 0
}
},
onLoad(option) {
this.current = option.current;
console.log(option.current);
this.setTitle();
},
methods: {
setTitle(){
let title = ''
switch (this.current) {
case '1':
console.log(title);
title = "支付成功"
break;
default:
title = "订单详情"
break;
}
uni.setNavigationBarTitle({
title: title
});
},
toOtherPage(url) {
uni.navigateTo({
url: '/pageE/order/' + url
});
}
},
};
</script>
<style lang="scss" scoped>
.details {
min-height: calc(100vh - var(--window-top));
background-color: #ECECEC;
.status {
position: fixed;
top: 0;
left: 0;
display: flex;
height: calc(180rpx + var(--window-top));
width: 100%;
background: rgba(255,120,15,1);
z-index: 9;
.text {
margin: calc(74rpx + var(--window-top)) auto 0 73rpx;
color: rgba(255,255,255,1);
.status-text {
font-size: 36rpx;
font-weight: 500;
margin-bottom: 17rpx;
}
.time {
// white-space: nowrap;
font-size: 26rpx;
color: rgba(255,255,255,1);
}
}
> image {
margin: calc(36rpx + var(--window-top)) 70rpx 0 0;
width: 126rpx;
height: 109rpx;
flex-shrink: 0;
}
}
.info {
padding-top: 180rpx;
margin-bottom: 10rpx;
.info-address {
padding: 30rpx;
display: flex;
align-items: center;
margin-bottom: 10rpx;
background:rgba(255,255,255,1);
> image {
width: 28rpx;
height: 34rpx;
margin-right: 31rpx;
flex-shrink: 0;
}
.address-right {
.user-info {
display: flex;
align-items: center;
font-size: 28rpx;
color: rgba(51,51,51,1);
margin-bottom: 20rpx;
> view:first-child {
margin-right: 13rpx;
}
}
.address-text {
font-size: 24rpx;
color: rgba(102,102,102,1);
line-height: 42rpx;
}
}
}
.info-goods {
margin-bottom: 10rpx;
.goods-store {
padding: 30rpx;
margin-bottom: 2rpx;
background:rgba(255,255,255,1);
.stoer-title {
display: flex;
align-items: center;
margin-bottom: 20rpx;
.store-image {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
margin-right: 16rpx;
}
.store-name {
font-size: 28rpx;
color: rgba(51,51,51,1);
margin-right: 14rpx;
}
.right-icon {
width: 11rpx;
height: 22rpx;
}
}
.store-goods {
display: flex;
> image {
width: 180rpx;
height: 160rpx;
border-radius: 10rpx;
margin-right: 30rpx;
flex-shrink: 0;
}
.goods-info {
display: flex;
flex-direction: column;
justify-content: space-between;
.goods-name {
font-size: 30rpx;
color: rgba(51,51,51,1);
line-height: 44rpx;
}
.goods-order {
display: flex;
align-items: center;
justify-content: space-between;
.price {
font-size: 30rpx;
font-weight: 500;
color: rgba(51,51,51,1);
}
.num {
font-size: 28rpx;
color: rgba(102,102,102,1);
}
}
}
}
}
.goods-others {
background:rgba(255,255,255,1);
padding: 30rpx;
> view {
display: flex;
align-items: center;
justify-content: space-between;
&:not(:last-child) {
margin-bottom: 30rpx;
}
.title {
font-size: 28rpx;
color: rgba(102,102,102,1);
}
.price {
font-size: 30rpx;
color: rgba(51,51,51,1);
}
}
}
}
.info-order {
background:rgba(255,255,255,1);
padding: 30rpx;
font-size: 28rpx;
color: rgba(102,102,102,1);
> view:not(:last-child) {
margin-bottom: 30rpx;
}
}
}
.btn {
height: 98rpx;
background: rgba(255,255,255,1);
display: flex;
justify-content: flex-end;
padding: 19rpx 30rpx;
@mixin btn-class($width, $color) {
width: $width;
height: 60rpx;
border: 2rpx solid $color;
color: $color;
border-radius: 30rpx;
padding: 15rpx 23rpx;
font-size: 28rpx;
&:not(:last-child) {
margin-right: 30rpx;
}
}
.logistics, .comment, .payment {
@include btn-class($width: 160rpx, $color: rgba(255,119,15,1));
}
.service {
@include btn-class($width: 216rpx, $color: rgba(155,153,153,1));
}
.submit {
@include btn-class($width: 216rpx, $color: rgba(255,119,15,1));
}
}
}
</style>

119
pageE/order/Index.vue Normal file
View File

@@ -0,0 +1,119 @@
<template>
<view class="order">
<view>
<u-tabs-swiper ref="tabs" :list="list" :is-scroll="false" active-color="#FF780F" :current="current" font-size="26" @change="tabsChange" height="88" :gutter="30"></u-tabs-swiper>
</view>
<swiper :current="swiperCurrent" @animationfinish="animationfinish">
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;">
<view class="item-container" v-for="(item, index) in 4" :key="index">
<OrderItem :current="current"></OrderItem>
</view>
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;">
<view class="item-container">
<OrderItem :current="current"></OrderItem>
</view>
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;">
<view class="item-container">
<OrderItem :current="current"></OrderItem>
</view>
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;">
<view class="item-container">
<OrderItem :current="current"></OrderItem>
</view>
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;">
<view class="item-container">
<OrderItem :current="current"></OrderItem>
</view>
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;">
<view class="item-container">
<OrderItem :current="current"></OrderItem>
</view>
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;">
<view class="item-container">
<OrderItem :current="current"></OrderItem>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import OrderItem from '@/components/mine/order-item/index'
export default {
data() {
return {
list: [{
name: '全部'
}, {
name: '待支付'
}, {
name: '已取消'
}, {
name: '待收货'
}, {
name: '试穿试送'
}, {
name: '待评价'
}, {
name: '售后'
}],
current: 0,
swiperCurrent: 0
}
},
components: {
OrderItem
},
onLoad(option) {
if(option.current) {
this.current = Number(option.current);
this.swiperCurrent = this.current;
}
},
methods: {
tabsChange(index) {
this.swiperCurrent = Number(index);
},
animationfinish(e) {
let current = Number(e.detail.current);
this.swiperCurrent = current;
this.current = current;
}
}
};
</script>
<style lang="scss" scoped>
.order {
min-height: calc(100vh - var(--window-top));
background-color: #ECECEC;
display: flex;
flex-direction: column;
> uni-swiper {
flex: 1;
}
.swiper-item {
.item-container {
padding: 20rpx 30rpx;
}
}
}
</style>

150
pageE/order/Logistics.vue Normal file
View File

@@ -0,0 +1,150 @@
<template>
<view class="logistics">
<view class="logistics-info">
<view class="express">
<image src="../static/mine/23.png"></image>
<view class="dispatcher-info">
<view>派件员：xxx</view>
<view>手机：123456789</view>
</view>
</view>
<view class="express-status">
<image src="../static/mine/23.png"></image>
<view>
<view class="status">物流状态：已签收</view>
<view>承运来源：百世快递</view>
<view>运单编号：3253463464777</view>
<view>官方电话：4009-565-656</view>
</view>
</view>
</view>
<view class="logistics-tracking">
<view class="title">物流跟踪</view>
<view class="main">
<view v-for="(item, index) in list" :key="index" class="logistics-item">
<view class="info u-line-2">{{ item.address }}</view>
<view class="date">{{ item.date }}</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [
{
address: '[北京市]【已签收，本人签收】,感谢使用百事快递，期待再次为您服务[北京市]【已签收，本人签收】,感谢使用百事快递，期待再次为您服务[北京市]【已签收，本人签收】,感谢使用百事快递，期待再次为您服务',
date: '2019-12-25 09:38:21'
},
{
address: '[北京市]【已签收，本人签收】,感谢使用百事快递，期待再次为您服务',
date: '2019-12-25 09:38:21'
},
{
address: '[北京市]【已签收，本人签收】,感谢使用百事快递，期待再次为您服务',
date: '2019-12-15 09:38:20'
},
{
address: '卖家已发货',
date: '2019-12-15 09:38:20'
}
]
}
}
};
</script>
<style lang="scss" scoped>
.logistics {
min-height: calc(100vh - var(--window-top));
padding: 40rpx 30rpx;
border-top: 1rpx solid #ECECEC;
.logistics-info {
.express {
display: flex;
align-items: center;
margin-bottom: 40rpx;
> image {
flex-shrink: 0;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
margin-right: 35rpx;
}
.dispatcher-info {
font-size: 26rpx;
color: rgba(51,51,51,1);
> view:first-child {
margin-bottom: 19rpx;
}
}
}
.express-status {
display: flex;
align-items: center;
padding-bottom: 30rpx;
position: relative;
&::after {
content: '';
position: absolute;
width: 690rpx;
height: 2rpx;
background: rgba(236,236,236,1);
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
}
> image {
flex-shrink: 0;
width: 200rpx;
height: 200rpx;
border-radius: 10rpx;
margin-right: 29rpx;
}
> view {
.status {
font-size: 26rpx;
color: rgba(51,51,51,1);
margin-bottom: 29rpx !important;
}
> view {
font-size: 24rpx;
color:rgba(102,102,102,1);
&:not(:last-child) {
margin-bottom: 20rpx;
}
}
}
}
}
.logistics-tracking {
padding-top: 35rpx;
.title {
font-size: 30rpx;
font-weight: 500;
color: rgba(51,51,51,1);
margin-bottom: 35rpx;
}
.main {
.logistics-item {
&:not(:last-child) {
margin-bottom: 75rpx;
}
.info {
font-size: 26rpx;
font-weight: 500;
color: rgba(51,51,51,1);
line-height: 38rpx;
margin-bottom: 14rpx;
}
.date {
font-size: 22rpx;
font-weight: 500;
color: rgba(153,153,153,1);
}
}
}
}
}
</style>