Commit 8b44730b authored by zhengke's avatar zhengke

增加 代付订单

parent c6cfcb62
...@@ -261,7 +261,14 @@ ...@@ -261,7 +261,14 @@
}, },
{ {
"path": "order-commit-details" "path": "order-commit-details"
} },
//代付订单
{
"path": "payment-order",
"style": {
"navigationStyle": "custom"
}
}
] ]
}, },
{ {
......
<template>
<scroll-view :scroll-y="true" @scroll="scrollHandler" @scrolltoupper="scrollTopHandler" style="height: 100vh;">
<view class="orderdetail" :style="[contentStyle]" v-if="!loading">
<view class="headStatus" :style="[
headStyle,
{
zIndex: scrollTop < 10 ? 'unset' : 2,
opacity: scrollTop < 10 ? '100' : scrollTop,
},
]">
<view class="arrow" @click="redirectPrev">
<u-icon name="arrow-left" size="48" color="#FFF"></u-icon>
</view>
<view class="title" v-if="scrollTop > 50">订单详情</view>
</view>
<view class="status" :style="[headStyle]">
<view class="status-title">{{ orders.OrderStatusName }}</view>
<view class="sub-title" v-if='orders.OrderStatus==1 || orders.OrderStatus==2 ||orders.OrderStatus==3||orders.OrderStatus==4 '>
<u-icon style="display: inline-block; vertical-align: middle;" name="warning-o" color="#FFF" size="28"></u-icon>
<!-- TODO返回字段 不能写死 -->
<text style="margin-left: 5px;">交易成功{{delivery_time}}天,系统自动确认完成</text>
<!-- TODO 交易情况说明 -->
</view>
</view>
<view class="block" style="display:flex;align-items: center;padding-bottom:15px;">
<u-avatar mode="circle" :size="50" :src="orders.UserInfo.Photo"></u-avatar>
<view style="margin-left:5px;">{{orders.UserInfo.Name}}</view>
</view>
<view class="block goods">
<view class="item" v-for="(x, i) in orders.DetailList" :key="i">
<view style="display: flex;">
<image :src="x.CoverImagePath" class="img" @click="redirectGoods(x.GoodsId)" mode="aspectFill" />
<view class="good-info">
<view class="good-name" @click="redirectGoods(x.GoodsId)">{{
x.GoodsName
}}</view>
<view class="good-attr">
<text>数量:{{ x.Number }}</text>
<text v-for="(y, yi) in x.SpecificationList" :key="yi" style="margin-right: 5px;">
{{y}}
</text>
</view>
<view style="
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-top: 2px;
"
@click.native.stop="goUrl(x.FreeShippingUrl)" v-if="x.FreeShippingRemarks !=null && x.FreeShippingRemarks!='' ">
<view style="color: #FF4048;background: #fdf6ec;padding: 0 5px;display: inline-block;">
<Text style="
font-size: 20rpx;
margin-right: 5rpx;
">
{{x.FreeShippingRemarks}}
</Text>
</view>
</view>
<view class="good-price">{{ x.Final_Price }}</view>
</view>
</view>
<template v-for="(e, ei) in expressInfo">
<view :key="ei" class="order-info-item peisong" v-for="(ec, eci) in e.GoodsList" v-if=" ec.Id == x.DetailId">
<template>
<view class="field" :key="eci" v-if="e.Type == '2' && ec.Id == x.DetailId">
<view class="label">配送方式</view>
<view class="content">{{ e.Remark }}</view>
</view>
<view class="field" :key="eci" @click="goExpressHandler(e.ExpressName, e.ExpressNumber,e.ExpressId)" v-if="e.Type == '1' && ec.Id == x.DetailId">
<view class="label">配送方式</view>
<view class="content">{{ e.ExpressName }} {{ e.ExpressNumber }}</view>
<view style="margin-left: 10px;">
<u-icon name="arrow" size="32" color="#000"></u-icon>
</view>
</view>
</template>
</view>
</template>
<view style="
margin-top: 20px;
display: flex;
flex-direction: row-reverse;
align-items: center;
">
<u-button shape="circle" size="medium" :custom-style="customStyle" @click="joinCart(x)">加购物车</u-button>
<view v-if="x.refund_status == 1" style="margin-right: 40rpx; font-size: 28rpx; color: gray;">
已申请售后({{ x.refund.status_text }})
</view>
</view>
<view class="customer">
<button open-type="contact" :send-message-title="x.GoodsName" :send-message-path="'/pages/index/index?id=' + x.GoodsId + '&user_id=' + uid+'&JumpType=1'"
:send-message-img=" x.CoverImagePath " :show-message-card="true">
<u-icon style="display: inline-block; vertical-align: middle;" size="36" color="#111" name="chat-o"></u-icon>
<text style="margin-left: 10rpx;">联系客服</text>
</button>
</view>
</view>
</view>
<view class="block">
<view class="order-info-item">
<view class="field">
<view class="label">订单编号:</view>
<view class="content">{{ orders.OrderNo }}</view>
<view style='margin-left: 20px;'>
<u-button size="mini" shape="circle" @click="paste(orders.OrderNo)">复制</u-button>
</view>
</view>
<view class="field">
<view class="label">下单时间:</view>
<view class="content">{{ orders.CreateDate }}</view>
</view>
<view class="field">
<view class="label">备注:</view>
<view class="content">{{ orders.BuyerMessage }}</view>
</view>
</view>
<view class="order-info-item">
<view class="field">
<view class="label">支付方式:</view>
<view class="content">{{ orders.PaymentWayName }}</view>
</view>
</view>
</view>
<view class="block">
<view class="order-info-item">
<view class="field">
<view class="label">商品总额</view>
<view class="content right">¥{{ orders.PreferPrice }}</view>
</view>
<view class="field">
<view class="label">运费</view>
<view class="content right">+¥{{ orders.FreightMoney }}</view>
</view>
<view class="field">
<view class="label">优惠</view>
<view class="content right">-¥{{ orders.CouponMoney }}</view>
</view>
<view style="width: 100%;height: 1px;background: #f5f5f5;margin: 5px 0;"></view>
<view class="field">
<view class="label">&nbsp;</view>
<view class="content right">
<text style="margin-right: 10px;">实付款:</text>
<text style="font-size: 11px; font-weight: 700;" :style="{ color: mc }"></text>
<text style="font-size: 17px;" :style="{ color: mc }">{{
String(orders.Income).split(".")[0]
}}</text>
<text style="font-size: 12px;" :style="{ color: mc }">.{{String(orders.Income).split(".")[1] || "00" }}</text>
</view>
</view>
</view>
</view>
<view class="btn-box">
<view class="item" v-if="orders.OrderStatus == 1">
<u-button shape="circle" size="medium" :custom-style="themCustomStyle" v-on:click.stop="payment(orders)">立即支付</u-button>
</view>
</view>
</view>
<u-toast ref="uToast" />
<payCom v-if="payBtn" :payInfo="payInfo" @closePay="closePay"></payCom>
<u-popup v-model="payExit" mode="center" :mask-close-able="false">
<view style="background:#fff;width:500rpx">
<view style="padding:10px 0 0 10px">提交失败</view>
<view style="text-align:center;padding-bottom:40rpx">
<view style="margin:80rpx 0">支付取消</view>
<span @click="exitPay" style="padding:10rpx 50rpx;color:#fff;background:#19be6b;border-radius: 12px;">确定</span>
</view>
</view>
</u-popup>
</scroll-view>
</template>
<script>
import payCom from '@/components/pay/pay';
export default {
components: {
payCom
},
data() {
return {
mc: "",
secondary: "",
headStyle: {},
contentStyle: {},
orders: {},
loading: true,
id: 0,
payBtn: false,
payExit: false,
customStyle: {
marginLeft: "20px",
padding: "0 30rpx",
},
path: "",
scrollTop: 0,
prevPage: "",
themCustomStyle: {
marginLeft: "20px",
padding: "0 30rpx",
color: "#FFF",
},
expressInfo: [],
payInfo: {
OpenId: '',
OrderId: '',
OrderPayType: 1,
GoodsName: ''
},
delivery_time: 14, //时间
uid: 0,
shopBasics:{},
mall_UserInfo:{},
u:{},
OrderId:0
};
},
onLoad(option) {
this.id = option.id || 63702;
this.OrderId = option.GoodsId;
this.mc = this.$uiConfig.mainColor;
this.secondary = this.$uiConfig.secondary;
this.headStyle.background = `linear-gradient(to right, ${this.mc},80%, ${this.secondary})`;
let nav = uni.getMenuButtonBoundingClientRect();
this.headStyle.paddingTop = nav.top + "px";
this.contentStyle.paddingTop = nav.top + 44 + "px";
this.delivery_time = uni.getStorageSync('basedata') ? uni.getStorageSync('basedata').mall.setting.delivery_time : 14;
let p = getCurrentPages();
let u = uni.getStorageSync("mall_UserInfo");
this.uid = u.UserId ? u.UserId : 0;
if (p.length > 1) {
this.prevPage = p[p.length - 2].route;
}
this.init();
this.themCustomStyle.background = this.mc;
},
methods: {
goExpressHandler(express, no, id) {
uni.navigateTo({
url: "/pages/order/express?express=" +
express +
"&no=" +
no +
"&address=" +
this.orders.DistrictAddress + this.orders.ShoppingAddress +
"&id=" + id,
});
},
init() {
this.payInfo.OpenId = uni.getStorageSync('mall_UserInfo').OpenId;
this.request2({
url: '/api/AppletGoods/GetAppletMyOrderAgentInfo',
data: {
OrderId: this.OrderId,
}
},
(res) => {
this.orders = res.data;
this.loading = false;
this.getexpressInfo(res.data.OrderId)
}
);
},
formatAttr(attr) {
let arr = JSON.parse(attr);
},
scrollHandler(e) {
this.scrollTop = e.detail.scrollTop;
//this.$forceUpdate();
},
scrollTopHandler() {
this.scrollTop = 0;
},
getexpressInfo(OrderId) {
this.request2({
url: "/api/AppletOrder/GetAppletMyOrderExpressInfo",
data: {
OrderId: OrderId,
},
},
(res) => {
this.expressInfo = res.data;
}
);
},
redirectGoods(id) {
uni.navigateTo({
url: "/pages/goods/goods?id=" + id,
});
},
redirectPrev() {
if (this.prevPage != "") {
uni.navigateBack({
delta: 1,
});
}
},
payment(e) {
this.payInfo.OrderId = e.OrderId;
this.payInfo.GoodsName = e.DetailList[0].GoodsName.slice(0, 10);
this.payInfo.PaymentWay = e.PaymentWay;
this.payInfo.total_price = e.Income;
this.payBtn = true
},
exitPay() {
this.payExit = false;
},
closePay() {
this.payBtn = false;
this.payExit = true;
},
joinCart(x) {
this.request2({
url: '/api/AppletOrder/SetGoodsShoppingCartInfo',
data: {
GoodsId: x.GoodsId,
SpecificationSort: '',
Number: x.Number
},
},
res => {
uni.showToast({
title: '加入购物车成功',
icon: 'success',
duration: 2000
});
}
);
},
paste(value) {
uni.setClipboardData({
data: value,
});
},
},
};
</script>
<style>
.orderdetail {
overflow: hidden;
background: #f3f4f6;
padding-bottom: 50px;
}
.orderdetail .headStatus {
overflow: hidden;
position: relative;
width: 140vw;
padding-right: 40vw;
padding-bottom: 10px;
position: fixed;
left: 0;
right: 0;
top: 0;
display: flex;
}
.orderdetail .headStatus .arrow {
height: 24px;
margin: 5px 10px;
width: 24px;
}
.orderdetail .headStatus .title {
font-size: 18px;
color: #fff;
flex: 1;
width: 1px;
margin-left: 10px;
line-height: 34px;
}
.orderdetail .status {
padding-bottom: 25px;
position: relative;
width: 140vw;
padding-right: 40vw;
padding-top: 0 !important;
}
.orderdetail .status .status-title {
text-align: center;
font-size: 22px;
color: #fff;
margin-top: -18px;
}
.orderdetail .status .sub-title {
font-size: 14px;
color: #fff;
text-align: center;
margin-top: 10px;
font-weight: 300;
}
.orderdetail .block {
background: #fff;
border-radius: 10px;
margin-top: -10px;
padding: 20px;
padding-bottom: 0;
position: relative;
margin-bottom: 20px;
}
.orderdetail .address {
display: flex;
margin-bottom: 20px;
}
.orderdetail .address .icon {
width: 20px;
height: 20px;
margin-right: 10px;
}
.orderdetail .address .content {
flex: 1;
}
.orderdetail .address .content .concat {
font-size: 14px;
color: #000;
}
.orderdetail .address .content .address {
font-size: 13px;
margin-top: 10px;
color: gray;
}
.orderdetail .goods {
/* display: flex; */
}
.orderdetail .goods .item {
margin-bottom: 20px;
/* display: flex; */
}
.orderdetail .goods .item:last-child {
margin-bottom: 0;
}
.orderdetail .goods .item .img {
width: 80px;
height: 80px;
border-radius: 2px;
}
.orderdetail .goods .item .good-info {
margin-left: 15px;
flex: 1;
flex-direction: column;
width: 1px;
display: flex;
}
.orderdetail .goods .item .good-info .good-name {
font-size: 15px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 24px;
}
.orderdetail .goods .item .good-info .good-attr {
font-size: 13px;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: gray;
display: flex;
flex-direction: column;
}
.orderdetail .goods .item .good-info .good-price {
font-size: 16px;
height: 20px;
}
.orderdetail .order-info-item {
padding: 10px 0;
border-bottom: 1px solid #f5f5f5;
}
.orderdetail .order-info-item:last-child {
border-bottom: none;
}
.orderdetail .order-info-item .field {
margin-bottom: 10px;
display: flex;
}
.orderdetail .order-info-item.peisong {
border: none;
background: #f1f1f1;
border-radius: 5px;
padding: 10px;
margin: 15px 0 5px 0;
overflow: hidden;
}
.orderdetail .order-info-item .field:last-child {
margin-bottom: 0;
}
.orderdetail .order-info-item .field .label {
width: 80px;
margin-right: 20px;
color: gray;
}
.orderdetail .order-info-item .field .content {
flex: 1;
width: 1px;
color: #000;
}
.orderdetail .order-info-item .field .content.right {
text-align: right;
}
.orderdetail .btn-box {
display: flex;
flex-direction: row-reverse;
height: 45px;
padding: 5px 20px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
border-top: 1px solid #f5f5f5;
background: #fff;
}
.orderdetail .btn-box .item {
/* margin-left: 20px; */
}
.orderdetail .customer {
padding-top: 20rpx;
margin-top: 20rpx;
border-top: 2rpx solid #f5f5f5;
border-bottom: 2rpx solid #f5f5f5;
}
.orderdetail .customer button {
width: 100%;
display: inline-block;
background: none;
border: none;
outline: none;
font-size: 14px;
font-weight: 600;
color: #111;
}
.orderdetail .customer button::after {
border: none;
outline: none;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment