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

商家订单详情页优化

master
邓平艺 4 years ago
parent
bded6a4331
commit
a144685524
2 changed files with 25 additions and 182 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 16
      pages/shopOrder/index.vue
  2. 191
      pages/shopOrder/order-details.vue

16
pages/shopOrder/index.vue
View File

@ -71,7 +71,7 @@
page: 1,
isPage: true
}, {
name: '待使用',
name: '待核销',
type: 'paid',
list: [],
loadingClass: true,
@ -80,7 +80,7 @@
isPage: true
},
{
name: '已完成',
name: '已核销',
type: 'complete',
list: [],
loadingClass: true,
@ -122,18 +122,8 @@
this.getUserOrder();
},
goDetails(tabIndex,index) {
// this.$routerGo('/pages/order/order-details?order_id=55')
console.log(tabIndex,index)
let item = this.tab_list[tabIndex].list[index]
if (item.state == 1) {
this.$routerGo('/pages/order/unpay-details?order_id=' + item.id)
} else if(item.state == 4){
this.$routerGo('/pages/order/apply-details?order_id=' + item.id)
}else {
this.$routerGo('/pages/order/order-details?order_id=' + item.id)
}
this.$routerGo('/pages/shopOrder/order-details?order_id=' + item.id)
},
onReachBottom() {
let tab_item = this.tab_list[this.current];

191
pages/shopOrder/order-details.vue
View File

@ -2,6 +2,7 @@
<view>
<!-- 商品信息 -->
<block v-if="isRight(orderDetails)">
<self-line/>
<view class="bg-white">
<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
@ -14,23 +15,24 @@
<text class="block text-gray lf-font-28" style="margin-top: 20rpx;line-height: 40rpx;">数量 <text class="margin-left margin-right-xs text-gray">x</text>{{orderDetails.number}}</text>
<view class="flex justify-between" style="margin-top: 28rpx;">
<lf-price :price="orderDetails.selling_price" style="margin-top: 8rpx;" />
<!-- <view class="text-red text-price lf-font-42 lf-font-bold" style="margin-top: 16rpx;">
<lf-price :price="orderDetails.selling_price" />
<!-- <view class="text-red text-price lf-font-42 lf-font-bold" style="margin-top: 16rpx;">
{{Number(orderDetails.selling_price || 0)}}
</view> -->
<view>
<!-- <view>
<button v-if="orderDetails.state == 2" class="cu-btn line-orange text-orange round margin-left-sm lf-font-28" @tap="$routerGo('/pages/order/apply-refund?order_id='+orderDetails.id)">申请退款</button>
<button v-else class="cu-btn line-gray bg-white border round margin-left-sm lf-font-28">{{orderDetails.state_text.text}}</button>
</view>
<button v-if="orderDetails.state == 5" class="cu-btn line-gray bg-white border round margin-left-sm lf-font-28">{{orderDetails.state_text.text}}</button>
</view> -->
</view>
</view>
</view>
</skeleton>
</view>
<self-line/>
<!-- 表单 -->
<skeleton :loading="skeletonLoading" :row="16" :showAvatar="false" :showTitle="true">
<skeleton :loading="skeletonLoading" :row="10" :showAvatar="false" :showTitle="true">
<view class="bg-white">
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray lf-font-32">订单编号</text>
@ -60,69 +62,23 @@
<text class="lf-font-32 text-black1" v-if="orderDetails.coupons == null">暂无优惠</text>
</view>
</view>
<view>
<self-line/>
<view class="bg-white flex flex-direction justify-around align-center text-center padding-tb">
<view>
<tki-qrcode ref="qrcode" @result="qrR" :val="checkArea" :size="115" unit="px" background="#fff" foreground="#000"
pdground="#000" :onval="true" :loadMake="true" />
<!-- :icon="require('@/static/images/system/user-default.jpg')" -->
</view>
<view class="flex justify-around align-center text-center" style="margin-top: 10rpx;">
<view @tap="refreshCode()" v-if="orderDetails.state==2">
<image class="margin-right" src="@/static/images/system/refresh.png" mode="widthFix" style="width: 20px;height: 20px;"></image>
</view>
<view class="lf-font-32 text-black1">{{checkArea}}</view>
<view v-if="orderDetails.state == 2" class="text-orange lf-font-28 margin-left" @tap="copy(checkArea)">复制</view>
</view>
<view style="margin-top: 10rpx;" class="text-gray lf-font-28" v-if="orderDetails.refund_text">
{{orderDetails.refund_text}}
</view>
<view style="margin-top: 10rpx;" class="text-green lf-font-32" v-if="orderDetails.state == 2">
{{orderDetails.confirm_code_text}}
</view>
</view>
<view class="padding-lr padding-tb-sm bg-white flex justify-between align-center solid-top1 btn-bottom">
<view class="flex align-center">
<text class="text-gray lf-font-28" style="margin-right: 20rpx;">实付款</text>
<lf-price :price="orderDetails.amount" />
<!-- <view class="text-red text-price lf-font-42 lf-font-bold">
{{Number(orderDetails.amount || 0)}}
</view> -->
</view>
<view class="lf-font-32 text-black1">
{{orderDetails.state_text.text}}
</view>
</view>
</view>
<self-line/>
</skeleton>
</block>
</view>
</template>
<script>
import tkiQrcode from "tki-qrcode" // 二维码生成器
export default {
components: {
tkiQrcode
},
data() {
return {
base64Img: '', //
skeletonLoading: true,
loading: false,
order_id:1,
orderDetails: {},
checkArea: '0'
}
},
computed: {
total(){
return this.num * this.price
},
isRight(){
return function(val){
return this.$shared.isRight(val);
@ -136,24 +92,14 @@
}
},
methods: {
refreshCode() {
this.getOrderDetails()
this.$msg('刷新成功')
},
//二维码回调
qrR(data) {
this.base64Img = data;
},
getOrderDetails() {
this.$http(this.API.API_ORDER_DETAILS, {order_id: this.order_id}).then(res => {
if(res.code == 0) {
this.orderDetails = res.data
this.checkArea = res.data.confirm_code
this.skeletonLoading = false
}
this.orderDetails = res.data
this.skeletonLoading = false
}).catch(err => {
setTimeout(() => {
this.$toBack();
}, 1000);
});
},
// 点击复制
@ -161,111 +107,18 @@
uni.setClipboardData({
data: text
});
},
submit(){
this.$routerGo('/pages/order/order?type=all')
},
},
created() {
}
}
}
</script>
<style lang="scss" scoped>
.tag-self {
position: absolute!important;
top: 0!important;
border-radius: 20rpx 0 20rpx 0!important;
width: max-content;
height: 32rpx!important;
}
.title {
font-size: 28rpx;
color: $u-content-color;
height: 80rpx;
}
// tab
.ctab {
width: 100%;
margin: 20rpx 0 0rpx 0rpx;
padding: 0 22rpx;
}
// 商品列表
.com {
width: 100%;
.bref-box {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
.list {
border-radius: 10rpx;
overflow: hidden;
margin: 20rpx 32rpx;
background-color: #FFFFFF;
// box-shadow: 0 0 10px 5px #e5e5e5;
box-shadow: 0 10rpx 20rpx 0 rgba(0, 0, 0, 0.1);
align-items: flex-start;
.left {
overflow: hidden;
image {
width: 186rpx;
height: 186rpx;
margin: 20rpx;
border-radius: 10rpx;
}
}
.right {
overflow: hidden;
width: 64%;
.title {
margin: 0rpx 20rpx 10rpx 0;
color: #222222;
font-size: 32rpx;
}
.tips {
margin: 16rpx 0;
overflow: hidden;
.u-line-progress {
width: 112rpx;
overflow: hidden;
margin-right: 20rpx;
}
.progress {
color: #777777;
font-size: 24rpx;
}
.bought {
color: #777777;
font-size: 24rpx;
margin-right: 20rpx;
}
}
.price {
overflow: hidden;
color: #FF0000;
margin-top: 10rpx;
button {
width: 176rpx;
height: 60rpx;
background: #FE9903;
border-radius: 15px;
font-size: 24rpx;
color: #FFFFFF;
margin: 0rpx 20rpx 0rpx 20rpx;
border: none;
}
}
}
}
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
</style>
Write Preview
Loading…
Cancel
Save