uniapp/pages_rush/futures/order_details.vue

865 lines
24 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<page-meta :page-style="themeColor"></page-meta>
<view class="order-details">
<!--商品信息-->
<view class="top">
<view class="left">
<image class="top-image" :src="$util.img(info.goods_image)" mode="widthFix"></image>
</view>
<view class="right">
<view class="goods-name">{{ info.goods_name }}</view>
<view class="goods-status">订单状态{{ status_text[info.status] }}</view>
<view class="goods-type">
订单类型<text class="goods-type-text">采购订单</text>
</view>
</view>
</view>
<!--信息列表-->
<view class="info-list">
<view class="info-list-block">
<view class="left">卖家昵称</view>
<view class="right">{{ info.seller_nickname ||'' }}</view>
</view>
<view class="info-list-block" >
<view class="left">买家昵称</view>
<view class="right ">{{ info.buyer_name ||'' }}</view>
</view>
<view class="info-list-block">
<view class="left">订单金额</view>
<view class="right right-price">{{ info.unit_price }}</view>
</view>
<!-- <view class="info-list-block">
<view class="left">服务费</view>
<view class="right right-price">{{ info.service_price }}</view>
</view>
<view class="info-list-block">
<view class="left">实际收入</view>
<view class="right right-price">{{ info.real_income }}</view>
</view> -->
<view class="info-list-block">
<view class="left">订单编号<text class="copy-buttons" @click="$util.copy(info.order_no)">复制</text></view>
<view class="right">{{ info.order_no ||'NO000000'}}</view>
</view>
<view class="info-list-block">
<view class="left">采购数量</view>
<view class="right">{{info.total}}</view>
</view>
<view class="info-list-block">
<view class="left">购买时间</view>
<view class="right">{{ $util.timeStampTurnTime(info.created_time) }}</view>
</view>
<view class="info-list-block" v-if="info.release_time > 0">
<view class="left">上架时间</view>
<view class="right">{{ $util.timeStampTurnTime(info.release_time) }}</view>
</view>
<view class="info-list-block">
<view class="left">订单状态</view>
<view class="right">{{ status_text[info.status] }}</view>
</view>
<view class="info-list-block" v-if="info.buyer_message">
<view class="left">备注</view>
<view class="right">{{ info.buyer_message }}</view>
</view>
</view>
<!--操作按钮-->
<view class="buttons" v-if="pageType=='stock'" >
<view class="buttons-item buttons-item-pickup" @click="openWarehouseShopConfirm" v-if="parseInt(info.status) === 1 && info.order_id !== 0">自提产品</view>
<view class="buttons-item buttons-item-sale" @click="$refs.saleGoods.open()" v-if="parseInt(info.status) === 1">出售商品</view>
<view class="buttons-item buttons-item-undercarriage" @click="$refs.undercarriageConfirm.open()" v-if="parseInt(info.status) === 2">下架商品</view>
</view>
<!-- 提货确认弹框 -->
<uni-popup ref="pickupConfirm" type="dialog" class="order-remarks-content">
<uni-popup-dialog mode="base" content="确认提货当前订单中的所有商品吗!" @close="$refs.pickupConfirm.close()" @confirm="pickup"></uni-popup-dialog>
</uni-popup>
<!-- 发布弹框 -->
<uni-popup ref="saleGoods" type="center">
<view class="transfer-price-content">
<view class="transfer-price-top">
<view class="top-left">详情</view>
<view class="top-right">
<i class="icondiy icon-system-guanbi" @click="$refs.saleGoods.close()"></i>
</view>
</view>
<view class="transfer-info">
<view class="transfer-info-block">
<view class="info-title">服务费</view>
<view class="info-content">{{ service_charge }}</view>
</view>
<view class="transfer-info-block">
<view class="info-title">商家应收</view>
<view class="info-content">{{ real_income }}</view>
</view>
<view class="transfer-info-block">
<view class="info-title">建议售价</view>
<view class="info-content">{{proposedPrice}}</view>
</view>
</view>
<view class="transfer-price">
<view>请输入转售价格:</view>
<view>
<input type="digit" class="input" v-model="transfer_price" :placeholder="'最高出售价:'+ price_range.max_price" />
</view>
</view>
<view class="transfer-price-tips">最高出售价:{{price_range.max_price}}</view>
<view class="rinfo" @click="$util.redirectTo('/pages_tool/recharge/list')">去充值</view>
<view class="transfer-price-button">
<view class="transfer-buttons" @click="sale">确定出售</view>
</view>
</view>
</uni-popup>
<!-- 拆单确认弹框 -->
<uni-popup ref="splitConfirm" type="dialog" class="order-remarks-content">
<uni-popup-dialog mode="base" :content="split_message" @close="$refs.splitConfirm.close()" @confirm="splitConfirm()"></uni-popup-dialog>
</uni-popup>
<!-- 下架确认弹框 -->
<uni-popup ref="undercarriageConfirm" type="dialog" class="order-remarks-content">
<uni-popup-dialog mode="base" content="确认下架售卖中的商品吗"
@close="$refs.undercarriageConfirm.close()"
@confirm="undercarriage">
</uni-popup-dialog>
</uni-popup>
<!--登录弹框-->
<ns-login ref="login"></ns-login>
<!--加载动画-->
<loading-cover ref="loadingCover"></loading-cover>
</view>
<!-- 仓库卖出确认 增加数量选择 -->
<uni-popup ref="warehouseConfirm" type="bottom">
<view class="sku-info" style="height: 33vh;background: white">
<view class="header" style="height: 3vh;">
<view class="sku-close iconfont iconclose" @click="closeWarehouseShopConfirm()"></view>
</view>
<view class="address-box" :class="{ 'not-delivery-type': true }" >
<view class="info-wrap" v-if="memberAddress" @click="selectAddress">
<view class="content">
<text class="name">{{ memberAddress.name ? memberAddress.name : '' }}</text>
<text class="mobile">{{ memberAddress.mobile ? memberAddress.mobile : '' }}</text>
<view class="desc-wrap">
{{ memberAddress.full_address ? memberAddress.full_address : '' }} {{ memberAddress.address ? memberAddress.address : '' }}
</view>
</view>
<text class="cell-more iconfont icon-right"></text>
</view>
<view class="empty-wrap" v-else @click="selectAddress">
<view class="info">请设置收货地址</view>
<view class="cell-more"><view class="iconfont icon-right"></view></view>
</view>
<image class="address-line" :src="$util.img('public/uniapp/order/address-line.png')"></image>
</view>
<view class="footer" @click="pickup()" style="margin-top: 70rpx;">
<template >
<template >
<button type="primary">确认提货</button>
</template>
</template>
</view>
</view>
</uni-popup>
</template>
<script>
import uniPopup from '@/pages_rush/components/uni-popup-new/uni-popup.vue';
import uniPopupDialog from '@/pages_rush/components/uni-popup-dialog/uni-popup-dialog.vue';
export default {
components: {
uniPopup,
uniPopupDialog
},
data() {
return {
futures_id: 0,
info: {},
status_text: {
1 : '库存',
2 : '正在销售',
3 : '已售出',
4 : '提货中',
5 : '提货完成',
6 : '待支付',
7 : '捡漏',
},
confing: {},
price_range: {},
proposedPrice: '',// 建议转售价格
transfer_price: '',// 转售价格
split_message: '',// 拆单确认信息
service_charge: 0.00, // 手续费
real_income: 0.00,// 实际收入
memberAddress: null, // 会员收货地址
is_pickup: false,
pageType: '',
};
},
mixins: [],
onLoad(option) {
this.getMemberAddress()
this.futures_id = option.futures_id || 0;
this.pageType = option.pagetype;
this.getDetail();
},
onShow() {},
onReady(){
// 判断是否登录
if (!uni.getStorageSync('token')) this.$refs.login.open('/pages_rush/futures/list');
},
methods: {
openWarehouseShopConfirm(GoodsId,count) {
this.$refs.warehouseConfirm.open()
},
closeWarehouseShopConfirm() {
this.$refs.warehouseConfirm.close()
},
// 获取订单详情
getDetail() {
this.$api.sendRequest({
url: '/futures/api/futures/myDetail',
data: {
id: this.futures_id
},
success: res => {
if (parseInt(res.code) === 0) {
this.info = res.data;
this.getSet();
}
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
},
fail: res => {
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}
});
},
// 获取基本设置
getSet(){
this.$api.sendRequest({
url: '/futures/api/futures/getBasicsConfig',
success: res => {
if (parseInt(res.code) === 0) {
this.config=res.data;
this.price_range = res.data.price_range;
//获取最小值 和 最大值
const unitPrice = this.info.unit_price;
let minPrice = unitPrice * (parseFloat(this.price_range.min) / 100);
let maxPrice = unitPrice * (parseFloat(this.price_range.max) / 100);
let proposedPrice = unitPrice * (parseFloat(res.data.proposed_range) / 100); //建议出售价格
this.proposedPrice =(parseFloat(unitPrice) + parseFloat(proposedPrice)).toFixed(2);
this.price_range.min_price = (parseFloat(unitPrice) + parseFloat(minPrice)).toFixed(2);
this.price_range.max_price = (parseFloat(unitPrice) + parseFloat(maxPrice)).toFixed(2);
let service = (this.info.unit_price * (parseFloat(res.data.service_price) / 100)).toFixed(2); //总计服务费
// 计算技术手续费
this.service_charge = (service * (parseFloat(res.data.technical_range) / 100)).toFixed(2);
// 计算商家佣金
this.real_income = (parseFloat(service) - parseFloat(this.service_charge)).toFixed(2);
}
}
});
},
// 提货
pickup(){
if(this.is_pickup){
return 1
}
this.is_pickup = true
this.closeWarehouseShopConfirm()
if (!this.memberAddress) {
this.$util.showToast({ title: '请先选择您的收货地址' });
return false;
}
this.$refs.pickupConfirm.close();
let _this = this;
_this.$api.sendRequest({
url: '/futures/api/futures/pickUp',
data: {
id: _this.futures_id,
member_address: JSON.stringify(this.memberAddress)
},
success: res => {
this.is_pickup = false
_this.$util.showToast({
title: res.message,
mask: true,
duration: 2000,
success: function(){
_this.getDetail();
// setTimeout(() => {
// this.$util.redirectTo('/pages/index/index');
// }, 1500);
}
});
}
});
},
/**
* 选择收货地址
*/
selectAddress() {
var params = {
back: this.$util.getCurrentRoute().path,
local: 0,
type: 1
}
this.$util.redirectTo('/pages_tool/member/address', params);
},
/**
* 用户地址
*/
getMemberAddress(){
this.$api.sendRequest({
url: '/futures/api/ordercreate/memberAddress',
success: res => {
console.log()
this.memberAddress = res.member_address;
this.$forceUpdate();
}
})
},
// 发布出售
sale(agree_split_order = 0){
let _this = this;
// 判断价格
if(_this.transfer_price === ''){
_this.$util.showToast({
title: '请输入售价',
mask: true,
duration: 1500,
});
return false;
}
if(parseFloat(_this.transfer_price) <= 0 || _this.transfer_price=='.'){
_this.$util.showToast({
title: '转售价格必须大于0',
mask: true,
duration: 1500,
});
return false;
}
if(parseFloat(_this.transfer_price) > parseFloat(_this.price_range.max_price)){
_this.$util.showToast({
title: '转售价格必须小于等于'+ _this.price_range.max_price,
mask: true,
duration: 1500,
});
return false;
}
// 请求发布
_this.$api.sendRequest({
url: '/futures/api/futures/release',
data: {
id: _this.futures_id,
price: _this.transfer_price,
agree_split_order: agree_split_order,
},
success: res => {
// 关闭弹框
if(_this.$refs.saleGoods) _this.$refs.saleGoods.close();
// 返回结果处理
if(parseInt(res.code) === -800){
// 需要拆单 确认后再次请求发布
this.split_message = res.message;
_this.$refs.splitConfirm.open();
}
else if(parseInt(res.code) === 0){
// 发布成功 跳转到已售出列表
_this.$util.showToast({
title: res.message,
mask: true,
duration: 2000,
success: function () {
setTimeout(() => {
_this.$util.redirectTo('/pages_rush/futures/order', {status: 'stock'});
}, 1000);
}
});
}
else{
// 失败
_this.$util.showToast({
title: res.message,
mask: true,
duration: 2000,
success: function () {
_this.getDetail();
}
});
}
}
});
},
// 发布 - 确认拆单
splitConfirm(){
this.$refs.splitConfirm.close();
this.sale(1);
},
// 下架
undercarriage(){
this.$refs.undercarriageConfirm.close();
let _this = this;
_this.$api.sendRequest({
url: '/futures/api/futures/stock',
data: {
id: _this.futures_id
},
success: res => {
_this.$util.showToast({
title: res.message,
mask: true,
duration: 2000,
success: function(){
_this.getDetail();
// setTimeout(() => {
// this.$util.redirectTo('/pages/index/index');
// }, 1500);
}
});
}
});
}
},
onBackPress(options) {
if (options.from === 'navigateBack') return false;
this.$util.redirectTo('/pages/member/index');
return true;
}
};
</script>
<style lang="scss" scoped>
.order-details{
background: #fafcff;//fafcff
min-height: calc(100vh - (30rpx * 2));
padding: 30rpx;
.top{
--top-height--: 150rpx;
width: calc(100% - (20rpx * 2));
height: var(--top-height--);
padding: 20rpx;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
background-color: #FFFFFF;
.left{
width: var(--top-height--);
height: var(--top-height--);
border-radius: 20rpx;
.top-image{
width: 100% !important;
height: 100% !important;
}
}
.right{
padding-left: 20rpx;
width: calc(100% - var(--top-height--) - 20rpx);
.goods-name{
height: calc(var(--top-height--) / 2);
line-height: calc(var(--top-height--) / 4);
font-size: 30rpx;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical; /*设置对齐模式*/
-webkit-line-clamp: 2; /*设置多行的行数*/
color: #404040;
}
.goods-status{
height: calc(var(--top-height--) / 4);
line-height: calc(var(--top-height--) / 4);
font-size: 26rpx;
color: #7e7e7e;
}
.goods-type{
height: calc(var(--top-height--) / 4);
line-height: calc(var(--top-height--) / 4);
font-size: 26rpx;
color: #7e7e7e;
.goods-type-text{
color: #fc6b64;
}
}
}
}
.info-list{
.info-list-block{
background: #ffffff;
margin-top: 20rpx;
border-radius: 10rpx;
padding: 20rpx;
width: calc(100% - (20rpx * 2));
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
align-content: center;
.left{
font-size: 26rpx;
font-weight: bold;
color: #2d2d2d;
.copy-buttons{
font-size: 22rpx;
text-decoration: underline;
margin-left: 5px;
color: #868686;
}
}
.right{
font-size: 26rpx;
color: #898989;
max-width: calc(100% - 160rpx);
}
.right-price{
color: #fb5e56;
}
}
}
.buttons{
position: absolute;
bottom: 70rpx;
left: 0;
width: 100%;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-evenly;
align-items: center;
.buttons-item{
background: red;
height: 60rpx;
line-height: 60rpx;
font-size: 30rpx;
padding: 0 50rpx;
border-radius: 100rpx;
}
.buttons-item-pickup{
color: #fef9eb;
background: #f8ce2e;
}
.buttons-item-sale{
color: #fee6e6;
background: #ff4445;
}
.buttons-item-undercarriage{
color: #fee6e6;
background: #ff4445;
}
}
.transfer-price-content{
width: calc(90vw - (30rpx * 2));
padding: 30rpx;
background-color: #FFFFFF;
border-radius: 30rpx;
.transfer-price-top{
display: inline-flex;
width: 100%;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
align-content: center;
height: 50rpx;
.top-right{
i{
font-size: 40rpx!important;
}
}
}
.rinfo{
display: flex;
justify-content: flex-end;
margin-top: 22px;
color: royalblue;
}
.transfer-info{
width: 100%;
padding: 10px 0;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-around;
align-items: center;
.transfer-info-block{
width: calc(100% / 3);
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
align-content: center;
.info-title{
font-size: 30rpx;
color: #9f9d9e;
}
.info-content{
font-size: 30rpx;
font-weight: bold;
}
}
.transfer-info-block:nth-of-type(1){
.info-content{
color: #ac736e;
}
}
.transfer-info-block:nth-of-type(2){
.info-content{
color: #ac736e;
}
}
.transfer-info-block:nth-of-type(3){
.info-content{
color: #d39a63;
}
}
}
.transfer-price-tips{
font-size: 24rpx;
height: 40rpx;
line-height: 30rpx;
color: #b5b2b3;
text-align: center;
}
.transfer-price{
display: inline-flex;
width: 100%;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
margin-top: 20rpx;
font-size: 30rpx;
.input{
font-size: 30rpx;
border-bottom: 2rpx solid #e1dfe0;
height: 60rpx;
}
}
.transfer-price-button{
width: 100%;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
margin: 60rpx 0 20rpx 0;
.transfer-buttons{
width: 60%;
text-align: center;
height: 70rpx;
line-height: 70rpx;
font-size: 30rpx;
background: #0282ff;
color: #99d9e9;
border-radius: 100rpx;
}
}
}
}
// 收货地址
.address-box {
margin: 0 24rpx 0;
background-color: #fff;
position: relative;
overflow: hidden;
border-bottom-left-radius: 16rpx;
border-bottom-right-radius: 16rpx;
padding: 30rpx 24rpx;
&.not-delivery-type {
border-radius: 16rpx;
}
.address-line{
position: absolute;
bottom: 0rpx;
left: 0;
width: 100%;
height: 6rpx;
}
.info-wrap {
display: flex;
align-items: center;
&.local {
padding-bottom: 20rpx;
}
.content {
flex: 1;
.name {
margin-right: 10rpx;
font-weight: bold;
font-size: 28rpx;
}
.mobile {
font-weight: bold;
font-size: 28rpx;
}
}
.desc-wrap {
word-break: break-word;
font-size: 26rpx;
color: #666;
}
}
.icon-wrap {
width: 24rpx;
height: 42rpx;
position: relative;
margin-right: 26rpx;
align-self: flex-start;
padding-top: 6rpx;
&.empty{
padding-top: 0;
}
.iconfont {
font-size: $font-size-toolbar;
display: inline-block;
vertical-align: middle;
}
}
.empty-wrap {
height: 80rpx;
line-height: 80rpx;
display: flex;
align-items: center;
.info {
flex: 1;
font-size: $font-size-base;
}
}
.cell-more {
margin-left: 50rpx;
float: right;
color: $color-tip;
font-size: $font-size-tag;
.iconfont{
color: $color-tip;
}
}
.local-delivery-store {
display: flex;
align-items: center;
padding-bottom: 20rpx;
margin-bottom: 20rpx;
border-bottom: 2rpx solid #eeeeee;
.info {
flex: 1;
width: 0;
font-size: 28rpx;
}
.store-name {
color: $base-color;
margin: 0 10rpx;
}
.cell-more {
font-size: 28rpx;
display: flex;
align-items: center;
}
.icon-right {
float: right;
color: #909399;
font-size: 24rpx
}
}
}
.sku-close {
position: absolute;
top: 20rpx;
right: 40rpx;
width: 40rpx;
height: 80rpx;
font-size: 40rpx;
}
.sku-close {
color: #fff;
width: 50rpx;
text-align: center;
font-size: 76rpx;
border-radius: 50%;
margin: 40rpx auto 0;
}
.number-wrap .number-line {
padding: 20rpx 0;
line-height: 72rpx;
}
.number-wrap .title {
font-weight: 400;
}
.number-wrap .limit-txt {
}
.number-wrap .number {
display: flex;
height: 72rpx;
border-radius: 6rpx;
float: right;
}
.number-wrap .number button {
display: inline-block;
line-height: 64rpx;
height: 68rpx;
width: 60rpx;
font-size: 48rpx;
box-sizing: content-box;
border: 2rpx solid $color-line;
padding: 0;
margin: 0;
border-radius: 0;
background-color: #fff !important;
&.disabled {
background: #f7f7f7 !important;
}
}
.number-wrap .number button.decrease {
border-right-width: 0 !important;
}
.number-wrap .number button.increase {
border-left: 0 !important;
}
.number-wrap .number button:after {
border-radius: 0;
border: none;
}
.number-wrap .number input {
display: inline-block;
line-height: 64rpx;
height: 68rpx;
width: 72rpx;
text-align: center;
font-weight: 700;
border: 2rpx solid;
margin: 0;
padding: 0;
vertical-align: top;
background-color: $color-bg !important;
}
.number-wrap .number .show {
vertical-align: top;
display: inline-block;
line-height: 64rpx;
height: 68rpx;
width: 72rpx;
text-align: center;
font-weight: 700;
box-sizing: content-box;
border: 1px solid #eeeeee;
padding: 0;
margin: 0;
border-radius: 0;
//background-color: #fff !important;
background-color: $color-bg !important;
}
</style>