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

Merge branch 'master' of http://8.134.10.79:3000/Leadfyy.co/uniapp-shikongwang

master
Enzo 5 years ago
parent
72c45c469a bded6a4331
commit
e055120430
2 changed files with 277 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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      pages.json
  2. 271
      pages/shopOrder/order-details.vue

6
pages.json
View File

@ -24,6 +24,12 @@
"enablePullDownRefresh": true
}
},
{
"path": "pages/shopOrder/order-details",
"style": {
"navigationBarTitleText": "订单详情"
}
},
{
"path": "pages/order/order-details",
"style": {

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

@ -0,0 +1,271 @@
<template>
<view>
<!-- 商品信息 -->
<block v-if="isRight(orderDetails)">
<view class="bg-white">
<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
<view class="flex justify-between align-start" style="padding: 32rpx 32rpx 30rpx 32rpx;">
<image :src="orderDetails.goods.cover" mode="aspectFill" style="width: 240rpx; height: 240rpx;border-radius: 10rpx;"></image>
<view class="flex-sub padding-left-sm">
<view class="bref-box text-black1 lf-font-32 lf-font-bold" style="height: 88rpx;line-height: 44rpx;" v-if="orderDetails.goods.name">
{{orderDetails.goods.name}}
</view>
<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;">
{{Number(orderDetails.selling_price || 0)}}
</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>
</view>
</view>
</view>
</skeleton>
</view>
<self-line/>
<!-- 表单 -->
<skeleton :loading="skeletonLoading" :row="16" :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>
<view>
<text class="margin-right lf-font-32 text-black1">{{orderDetails.order_sn}}</text>
<text class="text-orange lf-font-32" @click="copy(orderDetails.order_sn)">复制</text>
</view>
</view>
<view class="cu-bar padding-lr solid-bottom">
<text class="text-gray lf-font-32">下单时间</text>
<text class="lf-font-32 text-black1">{{orderDetails.created_at_text}}</text>
</view>
<view class="cu-bar padding-lr solid-bottom" v-if="orderDetails.payment_at_text != ''">
<text class="text-gray lf-font-32">付款时间</text>
<text class="lf-font-32 text-black1">{{orderDetails.payment_at_text}}</text>
</view>
<view class="cu-bar padding-lr" v-if="orderDetails.payment_type != ''">
<text class="text-gray lf-font-32">支付方式</text>
<text class="lf-font-32 text-black1">{{orderDetails.payment_type}}</text>
</view>
</view>
<self-line/>
<view class="bg-white">
<view class="cu-bar padding-lr">
<text class="text-gray lf-font-32">优惠</text>
<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>
</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);
}
}
},
onLoad(e) {
this.order_id = e.order_id
if(this.order_id) {
this.getOrderDetails()
}
},
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
}
}).catch(err => {
});
},
// 点击复制
copy(text) {
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%;
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;
}
}
}
}
}
</style>
Write Preview
Loading…
Cancel
Save