feat：v1.4前端更新
This commit is contained in:
超凡
@@ -2,61 +2,57 @@
|
||||
<div class="lottie-bg">
|
||||
<div>222进来了22222</div>
|
||||
<div id="lottie">
|
||||
<img
|
||||
src="@/assets/imgs/live-logo.gif"
|
||||
rel="preload"
|
||||
style="width: 100%;"
|
||||
/>
|
||||
<img src="@/assets/imgs/live-logo.gif" rel="preload" style="width: 100%" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { auth, oAuth } from "@/libs/wechat";
|
||||
import Cookies from 'js-cookie'
|
||||
const WX_AUTH = "wx_auth";
|
||||
export default {
|
||||
name: 'AuthSend',
|
||||
created() {
|
||||
import('@/assets/js/media_750')
|
||||
// const hash = window.location.search.slice(1)
|
||||
// if (window.localStorage) {
|
||||
// window.localStorage.setItem('x-admin-oauth-code', hash)
|
||||
// window.close()
|
||||
// }
|
||||
Cookies.set(WX_AUTH, this.$route.query.code);
|
||||
},
|
||||
render: function(h) {
|
||||
return h() // avoid warning message
|
||||
},
|
||||
mounted() {
|
||||
if(this.$route.query.code) location.replace("/login");
|
||||
import { auth, oAuth } from '@/libs/wechat';
|
||||
import Cookies from 'js-cookie';
|
||||
const WX_AUTH = 'wx_auth';
|
||||
export default {
|
||||
name: 'AuthSend',
|
||||
created() {
|
||||
import('@/assets/js/media_750');
|
||||
// const hash = window.location.search.slice(1)
|
||||
// if (window.localStorage) {
|
||||
// window.localStorage.setItem('x-admin-oauth-code', hash)
|
||||
// window.close()
|
||||
// }
|
||||
Cookies.set(WX_AUTH, this.$route.query.code);
|
||||
},
|
||||
render: function (h) {
|
||||
return h(); // avoid warning message
|
||||
},
|
||||
mounted() {
|
||||
if (this.$route.query.code) location.replace('/login');
|
||||
// oAuth('/auth-send')
|
||||
// if( Cookies.get(WX_AUTH)!==undefined) location.replace("/login");
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.lottie-bg {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.lottie-bg {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#lottie {
|
||||
width: 35%;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
transform: translate3d(0, 0, 0);
|
||||
margin: auto;
|
||||
}
|
||||
#lottie {
|
||||
width: 35%;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
transform: translate3d(0, 0, 0);
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,30 +1,22 @@
|
||||
<template>
|
||||
<div
|
||||
class="Loads acea-row row-center-wrapper"
|
||||
v-if="loading && !loaded"
|
||||
style="margin-top: .2rem;font-size: 12px"
|
||||
>
|
||||
<div class="Loads acea-row row-center-wrapper" v-if="loading && !loaded" style="margin-top: 0.2rem; font-size: 12px">
|
||||
<template v-if="loading">
|
||||
<div
|
||||
class="iconfont icon-jiazai loading acea-row row-center-wrapper"
|
||||
></div>
|
||||
<div class="iconfont icon-jiazai loading acea-row row-center-wrapper"></div>
|
||||
正在加载中
|
||||
</template>
|
||||
<template v-else>
|
||||
上拉加载更多
|
||||
</template>
|
||||
<template v-else> 上拉加载更多 </template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Loading",
|
||||
name: 'Loading',
|
||||
props: {
|
||||
loaded: Boolean,
|
||||
loading: Boolean
|
||||
loading: Boolean,
|
||||
},
|
||||
created() {
|
||||
import('@/assets/js/media_750')
|
||||
}
|
||||
import('@/assets/js/media_750');
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -3,269 +3,323 @@
|
||||
<div class="priceChange" :class="change === true ? 'on' : ''">
|
||||
<div class="priceTitle">
|
||||
{{
|
||||
status === 0 || status === 2 ? orderInfo.refundStatus === 1 ? "立即退款" : "一键改价" : status === 1?"订单备注":"拒绝原因"
|
||||
status === 0 || status === 2
|
||||
? orderInfo.refundStatus === 1
|
||||
? '立即退款'
|
||||
: '一键改价'
|
||||
: status === 1
|
||||
? '订单备注'
|
||||
: '拒绝原因'
|
||||
}}
|
||||
<i class="el-icon-circle-close iconfonts" @click="close"></i>
|
||||
<!--<span class="iconfont icon-guanbi" @click="close"></span>-->
|
||||
</div>
|
||||
<div class="listChange" v-if="status === 0 || status === 2">
|
||||
<div
|
||||
class="item acea-row row-between-wrapper"
|
||||
v-if="orderInfo.refundStatus === 0"
|
||||
>
|
||||
<div class="item acea-row row-between-wrapper" v-if="orderInfo.refundStatus === 0">
|
||||
<div>商品总价(¥)</div>
|
||||
<div class="money">
|
||||
{{ orderInfo.totalPrice }}<span class="iconfont icon-suozi"></span>
|
||||
</div>
|
||||
<div class="money">{{ orderInfo.totalPrice }}<span class="iconfont icon-suozi"></span></div>
|
||||
</div>
|
||||
<div
|
||||
class="item acea-row row-between-wrapper"
|
||||
v-if="orderInfo.refundStatus === 0"
|
||||
>
|
||||
<div class="item acea-row row-between-wrapper" v-if="orderInfo.refundStatus === 0">
|
||||
<div>原始邮费(¥)</div>
|
||||
<div class="money">
|
||||
{{ orderInfo.payPostage }}<span class="iconfont icon-suozi"></span>
|
||||
</div>
|
||||
<div class="money">{{ orderInfo.payPostage }}<span class="iconfont icon-suozi"></span></div>
|
||||
</div>
|
||||
<div
|
||||
class="item acea-row row-between-wrapper"
|
||||
v-if="orderInfo.refundStatus === 0"
|
||||
>
|
||||
<div class="item acea-row row-between-wrapper" v-if="orderInfo.refundStatus === 0">
|
||||
<div>实际支付(¥)</div>
|
||||
<div class="money">
|
||||
<input
|
||||
type="text"
|
||||
v-model="price"
|
||||
:class="focus === true ? 'on' : ''"
|
||||
@focus="priceChange"
|
||||
/>
|
||||
<input type="text" v-model="price" :class="focus === true ? 'on' : ''" @focus="priceChange" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item acea-row row-between-wrapper"
|
||||
v-if="orderInfo.refundStatus === 1"
|
||||
>
|
||||
<div class="item acea-row row-between-wrapper" v-if="orderInfo.refundStatus === 1">
|
||||
<div>实际支付(¥)</div>
|
||||
<div class="money">
|
||||
{{ orderInfo.payPrice }}<span class="iconfont icon-suozi"></span>
|
||||
</div>
|
||||
<div class="money">{{ orderInfo.payPrice }}<span class="iconfont icon-suozi"></span></div>
|
||||
</div>
|
||||
<div
|
||||
class="item acea-row row-between-wrapper"
|
||||
v-if="orderInfo.refundStatus === 1"
|
||||
>
|
||||
<div class="item acea-row row-between-wrapper" v-if="orderInfo.refundStatus === 1">
|
||||
<div>退款金额(¥)</div>
|
||||
<div class="money">
|
||||
<input
|
||||
type="text"
|
||||
v-model="refundPrice"
|
||||
:class="focus === true ? 'on' : ''"
|
||||
@focus="priceChange"
|
||||
/>
|
||||
<input type="text" v-model="refundPrice" :class="focus === true ? 'on' : ''" @focus="priceChange" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="listChange" v-else-if="status === 3">
|
||||
<textarea
|
||||
placeholder="请填写退款原因"
|
||||
v-model="reason" maxlength="100"
|
||||
></textarea>
|
||||
<textarea placeholder="请填写退款原因" v-model="reason" maxlength="100"></textarea>
|
||||
</div>
|
||||
<div class="listChange" v-else>
|
||||
<textarea
|
||||
:placeholder="
|
||||
orderInfo.remark ? orderInfo.remark : '请填写备注信息...'
|
||||
"
|
||||
v-model="remark" maxlength="100"
|
||||
:placeholder="orderInfo.remark ? orderInfo.remark : '请填写备注信息...'"
|
||||
v-model="remark"
|
||||
maxlength="100"
|
||||
></textarea>
|
||||
</div>
|
||||
<div class="modify" @click="save">
|
||||
{{ orderInfo.refundStatus === 0 || status === 1 || status === 3 ? "立即提交" : "确认退款" }}
|
||||
{{ orderInfo.refundStatus === 0 || status === 1 || status === 3 ? '立即提交' : '确认退款' }}
|
||||
</div>
|
||||
<!--<div class="modify1" @click="refuse" v-if="orderInfo.refundStatus === 1 && status === 2">-->
|
||||
<!--拒绝退款-->
|
||||
<!--拒绝退款-->
|
||||
<!--</div>-->
|
||||
</div>
|
||||
<div class="maskModel" @touchmove.prevent v-show="change === true"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {required, num} from "@/utils/validate";
|
||||
import {validatorDefaultCatch} from "@/libs/dialog";
|
||||
import { orderMarkApi, updatePriceApi, orderRefundApi } from '@/api/order';
|
||||
export default {
|
||||
name: "PriceChange",
|
||||
components: {},
|
||||
props: {
|
||||
change: Boolean,
|
||||
orderInfo: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
status: {
|
||||
type: Number,
|
||||
default: 0
|
||||
import { required, num } from '@/utils/validate';
|
||||
import { validatorDefaultCatch } from '@/libs/dialog';
|
||||
import { orderMarkApi, updatePriceApi, orderRefundApi } from '@/api/order';
|
||||
export default {
|
||||
name: 'PriceChange',
|
||||
components: {},
|
||||
props: {
|
||||
change: Boolean,
|
||||
orderInfo: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
status: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
focus: false,
|
||||
price: 0,
|
||||
refundPrice: 0,
|
||||
remark: '',
|
||||
reason: '',
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
orderInfo: function () {
|
||||
this.price = this.orderInfo.payPrice;
|
||||
this.refundPrice = this.orderInfo.payPrice;
|
||||
this.remark = this.orderInfo.remark;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
import('@/assets/js/media_750');
|
||||
},
|
||||
methods: {
|
||||
priceChange: function () {
|
||||
this.focus = true;
|
||||
},
|
||||
close: function () {
|
||||
this.price = this.orderInfo.payPrice;
|
||||
this.$emit('closechange', false);
|
||||
},
|
||||
save() {
|
||||
if (this.status === 3) {
|
||||
this.refuse();
|
||||
} else {
|
||||
this.savePrice({
|
||||
price: this.price,
|
||||
refundPrice: this.refundPrice,
|
||||
type: 1,
|
||||
remark: this.remark,
|
||||
orderId: this.orderInfo.orderId,
|
||||
});
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
focus: false,
|
||||
price: 0,
|
||||
refundPrice: 0,
|
||||
remark: "",
|
||||
reason: ''
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
orderInfo: function () {
|
||||
this.price = this.orderInfo.payPrice;
|
||||
this.refundPrice = this.orderInfo.payPrice;
|
||||
this.remark = this.orderInfo.remark;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
import('@/assets/js/media_750')
|
||||
},
|
||||
methods: {
|
||||
priceChange: function () {
|
||||
this.focus = true;
|
||||
},
|
||||
close: function () {
|
||||
this.price = this.orderInfo.payPrice;
|
||||
this.$emit("closechange", false);
|
||||
},
|
||||
save() {
|
||||
if(this.status === 3) {
|
||||
this.refuse();
|
||||
}else{
|
||||
this.savePrice({
|
||||
price: this.price,
|
||||
refundPrice: this.refundPrice,
|
||||
type: 1,
|
||||
remark: this.remark,
|
||||
orderId: this.orderInfo.orderId
|
||||
})
|
||||
}
|
||||
},
|
||||
async savePrice(opt) {
|
||||
let that = this,
|
||||
data = {},
|
||||
price = opt.price,
|
||||
refundPrice = opt.refundPrice,
|
||||
refundStatus = that.orderInfo.refundStatus,
|
||||
remark = opt.remark;
|
||||
if (that.status == 0 && refundStatus === 0) {
|
||||
try {
|
||||
await this.$validator({
|
||||
price: [
|
||||
required(required.message("金额")),
|
||||
num(num.message("金额"))
|
||||
]
|
||||
}).validate({price});
|
||||
} catch (e) {
|
||||
return validatorDefaultCatch(e);
|
||||
}
|
||||
data.payPrice = price;
|
||||
data.orderNo = opt.orderId;
|
||||
updatePriceApi(data).then(() => {
|
||||
// that.change = false;
|
||||
this.$emit("closechange", false);
|
||||
that.$dialog.success("改价成功");
|
||||
// that.$emit('init');
|
||||
// that.init();
|
||||
}).catch((error) => {
|
||||
that.$dialog.error(error.message);
|
||||
});
|
||||
} else if (that.status == 2 && refundStatus === 1) {
|
||||
try {
|
||||
await this.$validator({
|
||||
refundPrice: [
|
||||
required(required.message("金额")),
|
||||
num(num.message("金额"))
|
||||
]
|
||||
}).validate({refundPrice});
|
||||
} catch (e) {
|
||||
return validatorDefaultCatch(e);
|
||||
}
|
||||
data.amount = refundPrice;
|
||||
data.type = opt.type;
|
||||
data.orderNo = opt.orderId;
|
||||
orderRefundApi(data).then(
|
||||
res => {
|
||||
this.$emit("closechange", false);
|
||||
// that.change = false;
|
||||
that.$dialog.success('退款成功');
|
||||
// that.init();
|
||||
// that.$emit('init');
|
||||
},
|
||||
err => {
|
||||
this.$emit("closechange", false);
|
||||
that.$dialog.error(err.message);
|
||||
}
|
||||
);
|
||||
} else {
|
||||
try {
|
||||
await this.$validator({
|
||||
remark: [required(required.message("备注"))]
|
||||
}).validate({remark});
|
||||
} catch (e) {
|
||||
return validatorDefaultCatch(e);
|
||||
}
|
||||
data.mark = remark;
|
||||
data.orderNo = opt.orderId;
|
||||
orderMarkApi(data).then(
|
||||
res => {
|
||||
this.$emit("closechange", false);
|
||||
// that.change = false;
|
||||
that.$dialog.success('提交成功');
|
||||
// that.$emit('init');
|
||||
// that.init();
|
||||
},
|
||||
err => {
|
||||
this.$emit("closechange", false);
|
||||
// that.change = false;
|
||||
that.$dialog.error(err.message);
|
||||
}
|
||||
);
|
||||
}
|
||||
},
|
||||
async refuse() {
|
||||
let reason= this.reason;
|
||||
async savePrice(opt) {
|
||||
let that = this,
|
||||
data = {},
|
||||
price = opt.price,
|
||||
refundPrice = opt.refundPrice,
|
||||
refundStatus = that.orderInfo.refundStatus,
|
||||
remark = opt.remark;
|
||||
if (that.status == 0 && refundStatus === 0) {
|
||||
try {
|
||||
await this.$validator({
|
||||
reason: [required(required.message("备注"))]
|
||||
}).validate({reason});
|
||||
price: [required(required.message('金额')), num(num.message('金额'))],
|
||||
}).validate({ price });
|
||||
} catch (e) {
|
||||
return validatorDefaultCatch(e);
|
||||
}
|
||||
this.$emit("getRefuse", this.orderInfo.orderId, reason);
|
||||
data.payPrice = price;
|
||||
data.orderNo = opt.orderId;
|
||||
updatePriceApi(data)
|
||||
.then(() => {
|
||||
// that.change = false;
|
||||
this.$emit('closechange', false);
|
||||
that.$dialog.success('改价成功');
|
||||
// that.$emit('init');
|
||||
// that.init();
|
||||
})
|
||||
.catch((error) => {
|
||||
that.$dialog.error(error.message);
|
||||
});
|
||||
} else if (that.status == 2 && refundStatus === 1) {
|
||||
try {
|
||||
await this.$validator({
|
||||
refundPrice: [required(required.message('金额')), num(num.message('金额'))],
|
||||
}).validate({ refundPrice });
|
||||
} catch (e) {
|
||||
return validatorDefaultCatch(e);
|
||||
}
|
||||
data.amount = refundPrice;
|
||||
data.type = opt.type;
|
||||
data.orderNo = opt.orderId;
|
||||
orderRefundApi(data).then(
|
||||
(res) => {
|
||||
this.$emit('closechange', false);
|
||||
// that.change = false;
|
||||
that.$dialog.success('退款成功');
|
||||
// that.init();
|
||||
// that.$emit('init');
|
||||
},
|
||||
(err) => {
|
||||
this.$emit('closechange', false);
|
||||
that.$dialog.error(err.message);
|
||||
},
|
||||
);
|
||||
} else {
|
||||
try {
|
||||
await this.$validator({
|
||||
remark: [required(required.message('备注'))],
|
||||
}).validate({ remark });
|
||||
} catch (e) {
|
||||
return validatorDefaultCatch(e);
|
||||
}
|
||||
data.mark = remark;
|
||||
data.orderNo = opt.orderId;
|
||||
orderMarkApi(data).then(
|
||||
(res) => {
|
||||
this.$emit('closechange', false);
|
||||
// that.change = false;
|
||||
that.$dialog.success('提交成功');
|
||||
// that.$emit('init');
|
||||
// that.init();
|
||||
},
|
||||
(err) => {
|
||||
this.$emit('closechange', false);
|
||||
// that.change = false;
|
||||
that.$dialog.error(err.message);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
async refuse() {
|
||||
let reason = this.reason;
|
||||
try {
|
||||
await this.$validator({
|
||||
reason: [required(required.message('备注'))],
|
||||
}).validate({ reason });
|
||||
} catch (e) {
|
||||
return validatorDefaultCatch(e);
|
||||
}
|
||||
this.$emit('getRefuse', this.orderInfo.orderId, reason);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
@import '../../../styles/reset.css';
|
||||
.priceChange{position:fixed;width:5.8rem;height:6.7rem;background-color:#fff;border-radius:0.1rem;top:50%;left:50%;margin-left:-2.9rem;margin-top:-3.35rem;z-index:99;transition:all 0.3s ease-in-out 0s;-webkit-transition:all 0.3s ease-in-out 0s;-o-transition:all 0.3s ease-in-out 0s;-moz-transition:all 0.3s ease-in-out 0s;-webkit-transform:scale(0);-o-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);
|
||||
transform: scale(0);opacity:0;}
|
||||
.priceChange.on{opacity:1;transform: scale(1);-webkit-transform:scale(1);-o-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);}
|
||||
.priceChange .priceTitle{background:url("../../../assets/imgs/pricetitle.jpg") no-repeat;background-size:100% 100%;width:100%;height:1.6rem;border-radius:0.1rem 0.1rem 0 0;text-align:center;font-size:0.4rem;color:#fff;line-height:1.6rem;position:relative;}
|
||||
.priceChange .priceTitle .iconfonts{position:absolute;font-size:0.4rem;right:0.26rem;top:0.23rem;width:0.4rem;height:0.4rem;line-height:0.4rem;}
|
||||
.priceChange .listChange{padding:0 0.4rem;}
|
||||
.priceChange .listChange .item{height:1.03rem;border-bottom:1px solid #e3e3e3;font-size:0.32rem;color:#333;}
|
||||
.priceChange .listChange .item .money{color:#666;width:3rem;text-align:right;}
|
||||
.priceChange .listChange .item .money .iconfont{font-size:0.32rem;margin-left:0.2rem;}
|
||||
.priceChange .listChange .item .money input{width:100%;height:100%;text-align:right;color:#ccc;}
|
||||
.priceChange .listChange .item .money input.on{color:#666;}
|
||||
.priceChange .modify{font-size:0.32rem;color:#fff;width:4.9rem;height:0.9rem;text-align:center;line-height:0.9rem;border-radius:0.45rem;background-color:#2291f8;margin:0.53rem auto 0 auto;}
|
||||
.priceChange .modify1{font-size:0.32rem;color:#312b2b;width:4.9rem;height:0.9rem;text-align:center;line-height:0.9rem;border-radius:0.45rem;background-color:#eee;margin:0.3rem auto 0 auto;}
|
||||
.priceChange .listChange textarea {
|
||||
border: 1px solid #eee;
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
margin-top: 0.5rem;
|
||||
border-radius: 0.1rem;
|
||||
color: #333;
|
||||
padding: 0.2rem;
|
||||
font-size: 0.3rem;
|
||||
}
|
||||
/* @import '../../../styles/reset.css'; */
|
||||
.priceChange {
|
||||
position: fixed;
|
||||
width: 5.8rem;
|
||||
height: 6.7rem;
|
||||
background-color: #fff;
|
||||
border-radius: 0.1rem;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -2.9rem;
|
||||
margin-top: -3.35rem;
|
||||
z-index: 99;
|
||||
transition: all 0.3s ease-in-out 0s;
|
||||
-webkit-transition: all 0.3s ease-in-out 0s;
|
||||
-o-transition: all 0.3s ease-in-out 0s;
|
||||
-moz-transition: all 0.3s ease-in-out 0s;
|
||||
-webkit-transform: scale(0);
|
||||
-o-transform: scale(0);
|
||||
-moz-transform: scale(0);
|
||||
-ms-transform: scale(0);
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
.priceChange.on {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
-webkit-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
}
|
||||
.priceChange .priceTitle {
|
||||
background: url('../../../assets/imgs/pricetitle.jpg') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 1.6rem;
|
||||
border-radius: 0.1rem 0.1rem 0 0;
|
||||
text-align: center;
|
||||
font-size: 0.4rem;
|
||||
color: #fff;
|
||||
line-height: 1.6rem;
|
||||
position: relative;
|
||||
}
|
||||
.priceChange .priceTitle .iconfonts {
|
||||
position: absolute;
|
||||
font-size: 0.4rem;
|
||||
right: 0.26rem;
|
||||
top: 0.23rem;
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
line-height: 0.4rem;
|
||||
}
|
||||
.priceChange .listChange {
|
||||
padding: 0 0.4rem;
|
||||
}
|
||||
.priceChange .listChange .item {
|
||||
height: 1.03rem;
|
||||
border-bottom: 1px solid #e3e3e3;
|
||||
font-size: 0.32rem;
|
||||
color: #333;
|
||||
}
|
||||
.priceChange .listChange .item .money {
|
||||
color: #666;
|
||||
width: 3rem;
|
||||
text-align: right;
|
||||
}
|
||||
.priceChange .listChange .item .money .iconfont {
|
||||
font-size: 0.32rem;
|
||||
margin-left: 0.2rem;
|
||||
}
|
||||
.priceChange .listChange .item .money input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: right;
|
||||
color: #ccc;
|
||||
}
|
||||
.priceChange .listChange .item .money input.on {
|
||||
color: #666;
|
||||
}
|
||||
.priceChange .modify {
|
||||
font-size: 0.32rem;
|
||||
color: #fff;
|
||||
width: 4.9rem;
|
||||
height: 0.9rem;
|
||||
text-align: center;
|
||||
line-height: 0.9rem;
|
||||
border-radius: 0.45rem;
|
||||
background-color: #2291f8;
|
||||
margin: 0.53rem auto 0 auto;
|
||||
}
|
||||
.priceChange .modify1 {
|
||||
font-size: 0.32rem;
|
||||
color: #312b2b;
|
||||
width: 4.9rem;
|
||||
height: 0.9rem;
|
||||
text-align: center;
|
||||
line-height: 0.9rem;
|
||||
border-radius: 0.45rem;
|
||||
background-color: #eee;
|
||||
margin: 0.3rem auto 0 auto;
|
||||
}
|
||||
.priceChange .listChange textarea {
|
||||
border: 1px solid #eee;
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
margin-top: 0.5rem;
|
||||
border-radius: 0.1rem;
|
||||
color: #333;
|
||||
padding: 0.2rem;
|
||||
font-size: 0.3rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,9 +4,7 @@
|
||||
<div class="pictrue"><img :src="orderInfo.storeOrderInfoVos[0].info.image" /></div>
|
||||
<div class="num acea-row row-center-wrapper">
|
||||
{{ orderInfo.orderId }}
|
||||
<div class="views" @click="toDetail(orderInfo)">
|
||||
查看<span class="iconfont icon-jiantou views-jian"></span>
|
||||
</div>
|
||||
<div class="views" @click="toDetail(orderInfo)">查看<span class="iconfont icon-jiantou views-jian"></span></div>
|
||||
</div>
|
||||
<div class="tip">确定要核销此订单吗？</div>
|
||||
<div class="sure" @click="confirm">确定核销</div>
|
||||
@@ -17,134 +15,134 @@
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "WriteOff",
|
||||
name: 'WriteOff',
|
||||
props: {
|
||||
iShidden: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
default: true,
|
||||
},
|
||||
orderInfo: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
import('@/assets/js/media_750')
|
||||
import('@/assets/js/media_750');
|
||||
},
|
||||
methods: {
|
||||
toDetail: function(item) {
|
||||
toDetail: function (item) {
|
||||
this.$router.push({
|
||||
path: "/javaMobile/orderDetail/" + item.orderId + "/looks"
|
||||
path: '/javaMobile/orderDetail/' + item.orderId + '/looks',
|
||||
});
|
||||
},
|
||||
cancel: function() {
|
||||
this.$emit("cancel", true);
|
||||
cancel: function () {
|
||||
this.$emit('cancel', true);
|
||||
},
|
||||
confirm: function() {
|
||||
this.$emit("confirm", true);
|
||||
}
|
||||
}
|
||||
confirm: function () {
|
||||
this.$emit('confirm', true);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.views {
|
||||
font-size: 0.16rem;
|
||||
background: #c68937;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
padding: 0.05rem 0.02rem 0.05rem 0.08rem;
|
||||
margin-left: 0.1rem;
|
||||
}
|
||||
.views-jian {
|
||||
font-size: 0.1rem;
|
||||
}
|
||||
.WriteOff {
|
||||
width: 5.6rem;
|
||||
height: 8rem;
|
||||
background-color: #fff;
|
||||
border-radius: 0.2rem;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -4rem;
|
||||
margin-left: -2.8rem;
|
||||
z-index: 99;
|
||||
padding-top: 0.55rem;
|
||||
}
|
||||
.WriteOff .pictrue {
|
||||
width: 3.4rem;
|
||||
height: 3.4rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.WriteOff .pictrue img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
border-radius: 0.1rem;
|
||||
}
|
||||
.WriteOff .num {
|
||||
font-size: 0.3rem;
|
||||
color: #666;
|
||||
margin: 0.28rem 0 0.3rem 0;
|
||||
}
|
||||
.WriteOff .num .see {
|
||||
font-size: 0.16rem;
|
||||
color: #fff;
|
||||
border-radius: 0.04rem;
|
||||
background-color: #c68937;
|
||||
padding-left: 0.05rem;
|
||||
margin-left: 0.12rem;
|
||||
}
|
||||
.WriteOff .num .see .iconfont {
|
||||
font-size: 0.15rem;
|
||||
}
|
||||
.WriteOff .tip {
|
||||
font-size: 0.36rem;
|
||||
color: #282828;
|
||||
text-align: center;
|
||||
border-top: 1px dashed #ccc;
|
||||
padding-top: 0.4rem;
|
||||
position: relative;
|
||||
}
|
||||
.WriteOff .tip:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0.25rem;
|
||||
height: 0.25rem;
|
||||
border-radius: 50%;
|
||||
background-color: #7f7f7f;
|
||||
right: -0.125rem;
|
||||
top: -0.125rem;
|
||||
}
|
||||
.WriteOff .tip:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0.25rem;
|
||||
height: 0.25rem;
|
||||
border-radius: 50%;
|
||||
background-color: #7f7f7f;
|
||||
left: -0.125rem;
|
||||
top: -0.125rem;
|
||||
}
|
||||
.WriteOff .sure {
|
||||
font-size: 0.32rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 0.82rem;
|
||||
height: 0.82rem;
|
||||
width: 4.6rem;
|
||||
border-radius: 0.41rem;
|
||||
margin: 0.4rem auto 0 auto;
|
||||
background-image: linear-gradient(to right, #f67a38 0%, #f11b09 100%);
|
||||
background-image: -webkit-linear-gradient(to right, #f67a38 0%, #f11b09 100%);
|
||||
background-image: -moz-linear-gradient(to right, #f67a38 0%, #f11b09 100%);
|
||||
}
|
||||
.WriteOff .sure.cancel {
|
||||
background-image: none;
|
||||
color: #999;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
.views {
|
||||
font-size: 0.16rem;
|
||||
background: #c68937;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
padding: 0.05rem 0.02rem 0.05rem 0.08rem;
|
||||
margin-left: 0.1rem;
|
||||
}
|
||||
.views-jian {
|
||||
font-size: 0.1rem;
|
||||
}
|
||||
.WriteOff {
|
||||
width: 5.6rem;
|
||||
height: 8rem;
|
||||
background-color: #fff;
|
||||
border-radius: 0.2rem;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -4rem;
|
||||
margin-left: -2.8rem;
|
||||
z-index: 99;
|
||||
padding-top: 0.55rem;
|
||||
}
|
||||
.WriteOff .pictrue {
|
||||
width: 3.4rem;
|
||||
height: 3.4rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.WriteOff .pictrue img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
border-radius: 0.1rem;
|
||||
}
|
||||
.WriteOff .num {
|
||||
font-size: 0.3rem;
|
||||
color: #666;
|
||||
margin: 0.28rem 0 0.3rem 0;
|
||||
}
|
||||
.WriteOff .num .see {
|
||||
font-size: 0.16rem;
|
||||
color: #fff;
|
||||
border-radius: 0.04rem;
|
||||
background-color: #c68937;
|
||||
padding-left: 0.05rem;
|
||||
margin-left: 0.12rem;
|
||||
}
|
||||
.WriteOff .num .see .iconfont {
|
||||
font-size: 0.15rem;
|
||||
}
|
||||
.WriteOff .tip {
|
||||
font-size: 0.36rem;
|
||||
color: #282828;
|
||||
text-align: center;
|
||||
border-top: 1px dashed #ccc;
|
||||
padding-top: 0.4rem;
|
||||
position: relative;
|
||||
}
|
||||
.WriteOff .tip:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0.25rem;
|
||||
height: 0.25rem;
|
||||
border-radius: 50%;
|
||||
background-color: #7f7f7f;
|
||||
right: -0.125rem;
|
||||
top: -0.125rem;
|
||||
}
|
||||
.WriteOff .tip:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0.25rem;
|
||||
height: 0.25rem;
|
||||
border-radius: 50%;
|
||||
background-color: #7f7f7f;
|
||||
left: -0.125rem;
|
||||
top: -0.125rem;
|
||||
}
|
||||
.WriteOff .sure {
|
||||
font-size: 0.32rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 0.82rem;
|
||||
height: 0.82rem;
|
||||
width: 4.6rem;
|
||||
border-radius: 0.41rem;
|
||||
margin: 0.4rem auto 0 auto;
|
||||
background-image: linear-gradient(to right, #f67a38 0%, #f11b09 100%);
|
||||
background-image: -webkit-linear-gradient(to right, #f67a38 0%, #f11b09 100%);
|
||||
background-image: -moz-linear-gradient(to right, #f67a38 0%, #f11b09 100%);
|
||||
}
|
||||
.WriteOff .sure.cancel {
|
||||
background-image: none;
|
||||
color: #999;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,68 +1,101 @@
|
||||
<template>
|
||||
<div ref="container">
|
||||
<div class="public-wrapper">
|
||||
<div class="title">
|
||||
<span class="iconfont icon-xiangxishuju"></span>详细数据
|
||||
</div>
|
||||
<div class="nav acea-row row-between-wrapper">
|
||||
<div class="data">日期</div>
|
||||
<div class="browse">订单数</div>
|
||||
<div class="turnover">成交额</div>
|
||||
</div>
|
||||
<div class="conter">
|
||||
<div
|
||||
class="item acea-row row-between-wrapper"
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
>
|
||||
<div class="data">{{ item.time }}</div>
|
||||
<div class="browse">{{ item.count }}</div>
|
||||
<div class="turnover">{{ item.price }}</div>
|
||||
</div>
|
||||
<div ref="container">
|
||||
<div class="public-wrapper">
|
||||
<div class="title"><span class="iconfont icon-xiangxishuju"></span>详细数据</div>
|
||||
<div class="nav acea-row row-between-wrapper">
|
||||
<div class="data">日期</div>
|
||||
<div class="browse">订单数</div>
|
||||
<div class="turnover">成交额</div>
|
||||
</div>
|
||||
<div class="conter">
|
||||
<div class="item acea-row row-between-wrapper" v-for="(item, index) in list" :key="index">
|
||||
<div class="data">{{ item.time }}</div>
|
||||
<div class="browse">{{ item.count }}</div>
|
||||
<div class="turnover">{{ item.price }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { statisticsDataApi } from '@/api/order';
|
||||
export default {
|
||||
name: "statisticsData",
|
||||
props: {
|
||||
list:{
|
||||
type: Array,
|
||||
default: ()=> []
|
||||
}
|
||||
import { statisticsDataApi } from '@/api/order';
|
||||
export default {
|
||||
name: 'statisticsData',
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
components: {
|
||||
// Loading
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// list: [],
|
||||
where: {
|
||||
page: 1,
|
||||
limit: 10
|
||||
},
|
||||
loaded: false,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
import('@/assets/js/media_750')
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
// Loading
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// list: [],
|
||||
where: {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
},
|
||||
loaded: false,
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
import('@/assets/js/media_750');
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.public-wrapper .title{font-size:0.3rem;color:#282828;padding:0 0.3rem;margin-bottom:0.2rem;}
|
||||
.public-wrapper .title .iconfont{color:#2291f8;font-size:0.4rem;margin-right:0.13rem;vertical-align:middle;}
|
||||
.public-wrapper{margin:0.18rem auto 0 auto;width:6.9rem;background-color:#fff;border-radius:0.1rem;padding-top:0.25rem;}
|
||||
.public-wrapper .nav{padding:0 0.3rem;height:0.7rem;line-height:0.7rem;font-size:0.24rem;color:#999;}
|
||||
.public-wrapper .data{width:2.1rem;text-align:left;}
|
||||
.public-wrapper .browse{width:1.92rem;text-align:right;}
|
||||
.public-wrapper .turnover{width:2.27rem;text-align:right;}
|
||||
.public-wrapper .conter{padding:0 0.3rem;}
|
||||
.public-wrapper .conter .item{border-bottom:1px solid #f7f7f7;height:0.7rem;font-size:0.24rem;}
|
||||
.public-wrapper .conter .item .turnover{color:#d84242;}
|
||||
.public-wrapper .title {
|
||||
font-size: 0.3rem;
|
||||
color: #282828;
|
||||
padding: 0 0.3rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.public-wrapper .title .iconfont {
|
||||
color: #2291f8;
|
||||
font-size: 0.4rem;
|
||||
margin-right: 0.13rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.public-wrapper {
|
||||
margin: 0.18rem auto 0 auto;
|
||||
width: 6.9rem;
|
||||
background-color: #fff;
|
||||
border-radius: 0.1rem;
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
.public-wrapper .nav {
|
||||
padding: 0 0.3rem;
|
||||
height: 0.7rem;
|
||||
line-height: 0.7rem;
|
||||
font-size: 0.24rem;
|
||||
color: #999;
|
||||
}
|
||||
.public-wrapper .data {
|
||||
width: 2.1rem;
|
||||
text-align: left;
|
||||
}
|
||||
.public-wrapper .browse {
|
||||
width: 1.92rem;
|
||||
text-align: right;
|
||||
}
|
||||
.public-wrapper .turnover {
|
||||
width: 2.27rem;
|
||||
text-align: right;
|
||||
}
|
||||
.public-wrapper .conter {
|
||||
padding: 0 0.3rem;
|
||||
}
|
||||
.public-wrapper .conter .item {
|
||||
border-bottom: 1px solid #f7f7f7;
|
||||
height: 0.7rem;
|
||||
font-size: 0.24rem;
|
||||
}
|
||||
.public-wrapper .conter .item .turnover {
|
||||
color: #d84242;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -22,144 +22,143 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import WriteOff from "../components/WriteOff";
|
||||
import { wechatEvevt } from "@/libs/wechat";
|
||||
// import { orderVerific } from "@api/order";
|
||||
import { writeUpdateApi, writeConfirmApi } from '@/api/order'
|
||||
const NAME = "OrderCancellation";
|
||||
import WriteOff from '../components/WriteOff';
|
||||
import { wechatEvevt } from '@/libs/wechat';
|
||||
// import { orderVerific } from "@api/order";
|
||||
import { writeUpdateApi, writeConfirmApi } from '@/api/order';
|
||||
const NAME = 'OrderCancellation';
|
||||
|
||||
export default {
|
||||
name: NAME,
|
||||
components: {
|
||||
WriteOff
|
||||
export default {
|
||||
name: NAME,
|
||||
components: {
|
||||
WriteOff,
|
||||
},
|
||||
props: {},
|
||||
data: function () {
|
||||
return {
|
||||
isWeixin: this.$wechat.isWeixin(),
|
||||
iShidden: true,
|
||||
orderInfo: null,
|
||||
verify_code: '',
|
||||
};
|
||||
},
|
||||
created() {
|
||||
import('@/assets/js/media_750');
|
||||
},
|
||||
methods: {
|
||||
cancel: function (res) {
|
||||
this.iShidden = res;
|
||||
},
|
||||
props: {},
|
||||
data: function() {
|
||||
return {
|
||||
isWeixin: this.$wechat.isWeixin(),
|
||||
iShidden: true,
|
||||
orderInfo: null,
|
||||
verify_code: ""
|
||||
};
|
||||
},
|
||||
created() {
|
||||
import('@/assets/js/media_750')
|
||||
},
|
||||
methods: {
|
||||
cancel: function(res) {
|
||||
this.iShidden = res;
|
||||
},
|
||||
confirm: function() {
|
||||
writeUpdateApi(this.verify_code)
|
||||
.then(res => {
|
||||
this.iShidden = true;
|
||||
this.verify_code = "";
|
||||
this.$dialog.success(res.msg);
|
||||
})
|
||||
.catch(res => {
|
||||
this.$dialog.error(res.msg);
|
||||
});
|
||||
},
|
||||
storeCancellation: function() {
|
||||
let ref = /[0-9]{10}/;
|
||||
if (!this.verify_code) return this.$dialog.error("请输入核销码");
|
||||
if (!ref.test(this.verify_code))
|
||||
return this.$dialog.error("请输入正确的核销码");
|
||||
this.$dialog.loading.open("查询中");
|
||||
writeConfirmApi(this.verify_code)
|
||||
.then(res => {
|
||||
this.$dialog.loading.close();
|
||||
this.orderInfo = res;
|
||||
this.iShidden = false;
|
||||
})
|
||||
.catch(res => {
|
||||
this.$dialog.loading.close();
|
||||
this.verify_code = "";
|
||||
return this.$dialog.error(res.message);
|
||||
});
|
||||
},
|
||||
openQRCode: function() {
|
||||
let that = this;
|
||||
wechatEvevt("scanQRCode", {
|
||||
needResult: 1,
|
||||
scanType: ["qrCode", "barCode"]
|
||||
confirm: function () {
|
||||
writeUpdateApi(this.verify_code)
|
||||
.then((res) => {
|
||||
this.iShidden = true;
|
||||
this.verify_code = '';
|
||||
this.$dialog.success(res.msg);
|
||||
})
|
||||
.then(res => {
|
||||
if (res.resultStr) {
|
||||
that.verify_code = res.resultStr;
|
||||
that.storeCancellation();
|
||||
} else that.$dialog.error("没有扫描到什么！");
|
||||
})
|
||||
.catch(res => {
|
||||
if (res.is_ready) {
|
||||
res.wx.scanQRCode({
|
||||
needResult: 1,
|
||||
scanType: ["qrCode", "barCode"],
|
||||
success: function(res) {
|
||||
that.verify_code = res.resultStr;
|
||||
that.storeCancellation();
|
||||
},
|
||||
fail: function(res) {
|
||||
if (res.errMsg == "scanQRCode:permission denied") {
|
||||
that.$dialog.error("没有权限");
|
||||
}
|
||||
.catch((res) => {
|
||||
this.$dialog.error(res.msg);
|
||||
});
|
||||
},
|
||||
storeCancellation: function () {
|
||||
let ref = /[0-9]{10}/;
|
||||
if (!this.verify_code) return this.$dialog.error('请输入核销码');
|
||||
if (!ref.test(this.verify_code)) return this.$dialog.error('请输入正确的核销码');
|
||||
this.$dialog.loading.open('查询中');
|
||||
writeConfirmApi(this.verify_code)
|
||||
.then((res) => {
|
||||
this.$dialog.loading.close();
|
||||
this.orderInfo = res;
|
||||
this.iShidden = false;
|
||||
})
|
||||
.catch((res) => {
|
||||
this.$dialog.loading.close();
|
||||
this.verify_code = '';
|
||||
return this.$dialog.error(res.message);
|
||||
});
|
||||
},
|
||||
openQRCode: function () {
|
||||
let that = this;
|
||||
wechatEvevt('scanQRCode', {
|
||||
needResult: 1,
|
||||
scanType: ['qrCode', 'barCode'],
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.resultStr) {
|
||||
that.verify_code = res.resultStr;
|
||||
that.storeCancellation();
|
||||
} else that.$dialog.error('没有扫描到什么！');
|
||||
})
|
||||
.catch((res) => {
|
||||
if (res.is_ready) {
|
||||
res.wx.scanQRCode({
|
||||
needResult: 1,
|
||||
scanType: ['qrCode', 'barCode'],
|
||||
success: function (res) {
|
||||
that.verify_code = res.resultStr;
|
||||
that.storeCancellation();
|
||||
},
|
||||
fail: function (res) {
|
||||
if (res.errMsg == 'scanQRCode:permission denied') {
|
||||
that.$dialog.error('没有权限');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.OrderCancellation .header {
|
||||
background: url("../../../assets/imgs/writeOffBg.jpg") no-repeat;
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.OrderCancellation .whiteBg {
|
||||
width: 5.9rem;
|
||||
background-color: #fff;
|
||||
margin: -0.93rem auto 0 auto;
|
||||
padding-top: 0.8rem;
|
||||
border-radius: 0.06rem 0.06rem 0 0;
|
||||
}
|
||||
.OrderCancellation .whiteBg .input {
|
||||
width: 5.8rem;
|
||||
margin: 0 auto;
|
||||
border-bottom: 0.01rem solid #eee;
|
||||
}
|
||||
.OrderCancellation .whiteBg .input input {
|
||||
padding: 0.25rem;
|
||||
font-size: 0.6rem;
|
||||
color: #282828;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
border: none;
|
||||
}
|
||||
.OrderCancellation .whiteBg .bnt {
|
||||
font-size: 0.32rem;
|
||||
color: #fff;
|
||||
width: 5.8rem;
|
||||
height: 0.86rem;
|
||||
border-radius: 0.43rem;
|
||||
background-image: linear-gradient(to right, #f67a38 0%, #f11b09 100%);
|
||||
background-image: -webkit-linear-gradient(to right, #f67a38 0%, #f11b09 100%);
|
||||
background-image: -moz-linear-gradient(to right, #f67a38 0%, #f11b09 100%);
|
||||
text-align: center;
|
||||
line-height: 0.86rem;
|
||||
margin: 0.55rem auto 0 auto;
|
||||
}
|
||||
.OrderCancellation .scan {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
margin: 1.1rem auto 0 auto;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.OrderCancellation .scan img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.OrderCancellation .header {
|
||||
background: url('../../../assets/imgs/writeOffBg.jpg') no-repeat;
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.OrderCancellation .whiteBg {
|
||||
width: 5.9rem;
|
||||
background-color: #fff;
|
||||
margin: -0.93rem auto 0 auto;
|
||||
padding-top: 0.8rem;
|
||||
border-radius: 0.06rem 0.06rem 0 0;
|
||||
}
|
||||
.OrderCancellation .whiteBg .input {
|
||||
width: 5.8rem;
|
||||
margin: 0 auto;
|
||||
border-bottom: 0.01rem solid #eee;
|
||||
}
|
||||
.OrderCancellation .whiteBg .input input {
|
||||
padding: 0.25rem;
|
||||
font-size: 0.6rem;
|
||||
color: #282828;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
border: none;
|
||||
}
|
||||
.OrderCancellation .whiteBg .bnt {
|
||||
font-size: 0.32rem;
|
||||
color: #fff;
|
||||
width: 5.8rem;
|
||||
height: 0.86rem;
|
||||
border-radius: 0.43rem;
|
||||
background-image: linear-gradient(to right, #f67a38 0%, #f11b09 100%);
|
||||
background-image: -webkit-linear-gradient(to right, #f67a38 0%, #f11b09 100%);
|
||||
background-image: -moz-linear-gradient(to right, #f67a38 0%, #f11b09 100%);
|
||||
text-align: center;
|
||||
line-height: 0.86rem;
|
||||
margin: 0.55rem auto 0 auto;
|
||||
}
|
||||
.OrderCancellation .scan {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
margin: 1.1rem auto 0 auto;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.OrderCancellation .scan img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,39 +2,11 @@
|
||||
<div class="statistical-page" ref="container">
|
||||
<div class="navs">
|
||||
<div class="list">
|
||||
<div
|
||||
class="item"
|
||||
:class="time == 'today' ? 'on' : ''"
|
||||
@click="setTime('today')"
|
||||
>
|
||||
今天
|
||||
</div>
|
||||
<div
|
||||
class="item"
|
||||
:class="time == 'yesterday' ? 'on' : ''"
|
||||
@click="setTime('yesterday')"
|
||||
>
|
||||
昨天
|
||||
</div>
|
||||
<div
|
||||
class="item"
|
||||
:class="time == 'lately7' ? 'on' : ''"
|
||||
@click="setTime('lately7')"
|
||||
>
|
||||
最近7天
|
||||
</div>
|
||||
<div
|
||||
class="item"
|
||||
:class="time == 'month' ? 'on' : ''"
|
||||
@click="setTime('month')"
|
||||
>
|
||||
本月
|
||||
</div>
|
||||
<div
|
||||
class="item"
|
||||
:class="time == 'date' ? 'on' : ''"
|
||||
@click="dateTitle"
|
||||
>
|
||||
<div class="item" :class="time == 'today' ? 'on' : ''" @click="setTime('today')">今天</div>
|
||||
<div class="item" :class="time == 'yesterday' ? 'on' : ''" @click="setTime('yesterday')">昨天</div>
|
||||
<div class="item" :class="time == 'lately7' ? 'on' : ''" @click="setTime('lately7')">最近7天</div>
|
||||
<div class="item" :class="time == 'month' ? 'on' : ''" @click="setTime('month')">本月</div>
|
||||
<div class="item" :class="time == 'date' ? 'on' : ''" @click="dateTitle">
|
||||
<!-- <span class="iconfont icon-xiangxia"></span>
|
||||
<span v-for="(value, index) in renderValues" :key="index">
|
||||
{{ value }}</span
|
||||
@@ -44,67 +16,49 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="title">
|
||||
{{ title }}{{ this.where.type == 1 ? "营业额（元）" : "订单量（份）" }}
|
||||
</div>
|
||||
<div class="title">{{ title }}{{ this.where.type == 1 ? '营业额（元）' : '订单量（份）' }}</div>
|
||||
<div class="money">{{ time_price }}</div>
|
||||
<div class="increase acea-row row-between-wrapper">
|
||||
<div>
|
||||
{{ title }}增长率：<span
|
||||
:class="increase_time_status === 1 ? 'red' : 'green'"
|
||||
>{{ increase_time_status === 1 ? "" : "-" }}{{ growth_rate }}%
|
||||
<span
|
||||
class="iconfont"
|
||||
:class="
|
||||
increase_time_status === 1
|
||||
? 'icon-xiangshang1'
|
||||
: 'icon-xiangxia2'
|
||||
"
|
||||
></span
|
||||
{{ title }}增长率：<span :class="increase_time_status === 1 ? 'red' : 'green'"
|
||||
>{{ increase_time_status === 1 ? '' : '-' }}{{ growth_rate }}%
|
||||
<span class="iconfont" :class="increase_time_status === 1 ? 'icon-xiangshang1' : 'icon-xiangxia2'"></span
|
||||
></span>
|
||||
</div>
|
||||
<div>
|
||||
{{ title }}增长：<span
|
||||
:class="increase_time_status === 1 ? 'red' : 'green'"
|
||||
{{ title }}增长：<span :class="increase_time_status === 1 ? 'red' : 'green'"
|
||||
>{{ Number(increase_time).toFixed(2) }}
|
||||
<span
|
||||
class="iconfont"
|
||||
:class="
|
||||
increase_time_status === 1
|
||||
? 'icon-xiangshang1'
|
||||
: 'icon-xiangxia2'
|
||||
"
|
||||
></span
|
||||
<span class="iconfont" :class="increase_time_status === 1 ? 'icon-xiangshang1' : 'icon-xiangxia2'"></span
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart">
|
||||
<div class="company">
|
||||
{{ where.type === 1 ? "单位（元）" : "单位（份）" }}
|
||||
{{ where.type === 1 ? '单位（元）' : '单位（份）' }}
|
||||
</div>
|
||||
<ECharts :options="polar"></ECharts>
|
||||
</div>
|
||||
<!--<div class="public-wrapper">-->
|
||||
<!--<div class="title">-->
|
||||
<!--<span class="iconfont icon-xiangxishuju"></span>详细数据-->
|
||||
<!--</div>-->
|
||||
<!--<div class="nav acea-row row-between-wrapper">-->
|
||||
<!--<div class="data">日期</div>-->
|
||||
<!--<div class="browse">订单量</div>-->
|
||||
<!--<div class="turnover">成交额</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="conter">-->
|
||||
<!--<div-->
|
||||
<!--class="item acea-row row-between-wrapper"-->
|
||||
<!--v-for="(item, index) in list"-->
|
||||
<!--:key="index"-->
|
||||
<!-->-->
|
||||
<!--<div class="data">{{ item.time }}</div>-->
|
||||
<!--<div class="browse">{{ item.count }}</div>-->
|
||||
<!--<div class="turnover">{{ item.price }}</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="title">-->
|
||||
<!--<span class="iconfont icon-xiangxishuju"></span>详细数据-->
|
||||
<!--</div>-->
|
||||
<!--<div class="nav acea-row row-between-wrapper">-->
|
||||
<!--<div class="data">日期</div>-->
|
||||
<!--<div class="browse">订单量</div>-->
|
||||
<!--<div class="turnover">成交额</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="conter">-->
|
||||
<!--<div-->
|
||||
<!--class="item acea-row row-between-wrapper"-->
|
||||
<!--v-for="(item, index) in list"-->
|
||||
<!--:key="index"-->
|
||||
<!-->-->
|
||||
<!--<div class="data">{{ item.time }}</div>-->
|
||||
<!--<div class="browse">{{ item.count }}</div>-->
|
||||
<!--<div class="turnover">{{ item.price }}</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<statistics-data :list="list"></statistics-data>
|
||||
<div class="calendar-wrapper" :class="current === true ? 'on' : ''">
|
||||
@@ -129,118 +83,116 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="maskModel"
|
||||
@touchmove.prevent
|
||||
v-show="current === true"
|
||||
@click="close"
|
||||
></div>
|
||||
<div class="maskModel" @touchmove.prevent v-show="current === true" @click="close"></div>
|
||||
<Loading :loaded="loaded" :loading="loading"></Loading>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import statisticsData from "../components/statisticsData";
|
||||
import ECharts from "vue-echarts";
|
||||
import "echarts/lib/chart/line";
|
||||
import "echarts/lib/component/polar";
|
||||
import Calendar from "mpvue-calendar";
|
||||
import "mpvue-calendar/src/browser-style.css";
|
||||
import statisticsData from '../components/statisticsData';
|
||||
import ECharts from 'vue-echarts';
|
||||
import 'echarts/lib/chart/line';
|
||||
import 'echarts/lib/component/polar';
|
||||
import Calendar from 'mpvue-calendar';
|
||||
import 'mpvue-calendar/src/browser-style.css';
|
||||
import { statisticsDataApi, orderTimeApi } from '@/api/order';
|
||||
import { parseTime } from '@/utils';
|
||||
import Loading from "../components/Loading";
|
||||
import Loading from '../components/Loading';
|
||||
const year = new Date().getFullYear();
|
||||
const month = new Date().getMonth() + 1;
|
||||
const day = new Date().getDate();
|
||||
export default {
|
||||
name: "Statistics",
|
||||
name: 'Statistics',
|
||||
components: {
|
||||
ECharts,
|
||||
Calendar,
|
||||
Loading,
|
||||
statisticsData
|
||||
statisticsData,
|
||||
},
|
||||
props: {},
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {
|
||||
polar: {
|
||||
tooltip: {
|
||||
trigger: "axis"
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
data: [""]
|
||||
data: [''],
|
||||
},
|
||||
toolbox: {
|
||||
show: false,
|
||||
feature: {
|
||||
mark: { show: true },
|
||||
dataView: { show: true, readOnly: false },
|
||||
magicType: { show: true, type: ["line"] },
|
||||
magicType: { show: true, type: ['line'] },
|
||||
restore: { show: true },
|
||||
saveAsImage: { show: true }
|
||||
}
|
||||
saveAsImage: { show: true },
|
||||
},
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
splitLine: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#999",
|
||||
width: 1 //这里是为了突出显示加上的
|
||||
}
|
||||
}
|
||||
}
|
||||
color: '#999',
|
||||
width: 1, //这里是为了突出显示加上的
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: ["#f5f5f5"],
|
||||
color: ['#f5f5f5'],
|
||||
width: 1,
|
||||
type: "solid"
|
||||
}
|
||||
type: 'solid',
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#999",
|
||||
width: 1 //这里是为了突出显示加上的
|
||||
}
|
||||
}
|
||||
}
|
||||
color: '#999',
|
||||
width: 1, //这里是为了突出显示加上的
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "邮件营销",
|
||||
type: "line",
|
||||
stack: "总量",
|
||||
name: '邮件营销',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#2291f8", //折点颜色
|
||||
color: '#2291f8', //折点颜色
|
||||
lineStyle: {
|
||||
color: "#2291f8" //折线颜色
|
||||
}
|
||||
}
|
||||
color: '#2291f8', //折线颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
data: [120, 132.5, 101, 134, 90, 150, 30]
|
||||
}
|
||||
data: [120, 132.5, 101, 134, 90, 150, 30],
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
x: 30,
|
||||
x2: 10,
|
||||
y: 20,
|
||||
y2: 110,
|
||||
left: 40
|
||||
left: 40,
|
||||
},
|
||||
animationDuration: 2000
|
||||
animationDuration: 2000,
|
||||
},
|
||||
value: [[year, month, day - 1], [year, month, day]],
|
||||
value: [
|
||||
[year, month, day - 1],
|
||||
[year, month, day],
|
||||
],
|
||||
isrange: true,
|
||||
weekSwitch: false,
|
||||
ismulti: false,
|
||||
@@ -251,37 +203,37 @@ export default {
|
||||
monthRange: [],
|
||||
current: false,
|
||||
where: {
|
||||
dateLimit : '',
|
||||
type: ''
|
||||
dateLimit: '',
|
||||
type: '',
|
||||
},
|
||||
types: "", //类型|order=订单数|price=营业额
|
||||
time: "", //时间|today=今天|yesterday=昨天|month=本月
|
||||
title: "", //时间|today=今天|yesterday=昨天|month=本月
|
||||
growth_rate: "", //增长率
|
||||
increase_time: "", //增长率
|
||||
increase_time_status: "", //增长率
|
||||
time_price: "", //增长率
|
||||
types: '', //类型|order=订单数|price=营业额
|
||||
time: '', //时间|today=今天|yesterday=昨天|month=本月
|
||||
title: '', //时间|today=今天|yesterday=昨天|month=本月
|
||||
growth_rate: '', //增长率
|
||||
increase_time: '', //增长率
|
||||
increase_time_status: '', //增长率
|
||||
time_price: '', //增长率
|
||||
loaded: false,
|
||||
loading: false,
|
||||
filter: {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
dateLimit: ""
|
||||
dateLimit: '',
|
||||
},
|
||||
list: []
|
||||
list: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
"$route.params": function(newVal) {
|
||||
'$route.params': function (newVal) {
|
||||
var that = this;
|
||||
if (newVal != undefined) {
|
||||
that.setType(newVal.type);
|
||||
that.setTime(newVal.time);
|
||||
that.getIndex();
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted: function() {
|
||||
mounted: function () {
|
||||
this.handelRenderValues();
|
||||
this.setTime(this.$route.params.time);
|
||||
this.setType(this.$route.params.type);
|
||||
@@ -293,18 +245,18 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
monthRangeText() {
|
||||
return this.monthRange.length ? "固定" : "指定范围";
|
||||
}
|
||||
return this.monthRange.length ? '固定' : '指定范围';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getIndex: function() {
|
||||
getIndex: function () {
|
||||
var that = this;
|
||||
orderTimeApi(that.where).then(
|
||||
res => {
|
||||
(res) => {
|
||||
var _info = res.chart,
|
||||
day = [],
|
||||
num = [];
|
||||
_info.forEach(function(item) {
|
||||
_info.forEach(function (item) {
|
||||
day.push(item.time);
|
||||
num.push(item.num);
|
||||
});
|
||||
@@ -315,15 +267,15 @@ export default {
|
||||
that.increase_time_status = res.increaseTimeStatus;
|
||||
that.time_price = res.time;
|
||||
},
|
||||
error => {
|
||||
(error) => {
|
||||
that.$dialog.error(error.msg);
|
||||
}
|
||||
},
|
||||
);
|
||||
},
|
||||
setTime: function(time) {
|
||||
setTime: function (time) {
|
||||
this.time = time;
|
||||
this.where.dateLimit = time
|
||||
this.filter.dateLimit = time
|
||||
this.where.dateLimit = time;
|
||||
this.filter.dateLimit = time;
|
||||
this.list = [];
|
||||
this.filter.page = 1;
|
||||
this.loaded = false;
|
||||
@@ -331,35 +283,35 @@ export default {
|
||||
this.getIndex();
|
||||
this.getInfo();
|
||||
},
|
||||
setType: function(type) {
|
||||
setType: function (type) {
|
||||
switch (type) {
|
||||
case "price":
|
||||
case 'price':
|
||||
this.where.type = 1;
|
||||
break;
|
||||
case "order":
|
||||
case 'order':
|
||||
this.where.type = 2;
|
||||
break;
|
||||
}
|
||||
},
|
||||
handelRenderValues(data) {
|
||||
if (this.ismulti) {
|
||||
this.renderValues = this.value.map(v => v.join("-"));
|
||||
this.renderValues = this.value.map((v) => v.join('-'));
|
||||
} else if (this.isrange) {
|
||||
const values = [];
|
||||
data || this.value;
|
||||
this.value.forEach((v, i) => {
|
||||
values.push(v.join("-"));
|
||||
values.push(v.join('-'));
|
||||
// if (!i) {
|
||||
// values.push("~");
|
||||
// }
|
||||
});
|
||||
this.renderValues = values;
|
||||
} else {
|
||||
this.renderValues = [this.value.join("-")];
|
||||
this.renderValues = [this.value.join('-')];
|
||||
}
|
||||
this.where.dateLimit = this.renderValues.join(',')
|
||||
this.where.dateLimit = this.renderValues.join(',');
|
||||
// this.where.dateLimit = parseTime(this.renderValues[0], '{y}-{m}-{d}')+','+parseTime(this.renderValues[1], '{y}-{m}-{d}')
|
||||
this.filter.dateLimit = this.where.dateLimit
|
||||
this.filter.dateLimit = this.where.dateLimit;
|
||||
},
|
||||
prev(y, m, w) {
|
||||
console.log(y, m, w);
|
||||
@@ -367,8 +319,7 @@ export default {
|
||||
next(year, month, week) {
|
||||
console.log(year, month, week);
|
||||
},
|
||||
selectYear(year) {
|
||||
},
|
||||
selectYear(year) {},
|
||||
setToday() {
|
||||
this.$refs.calendar.setToday();
|
||||
},
|
||||
@@ -377,7 +328,7 @@ export default {
|
||||
},
|
||||
renderer() {
|
||||
if (this.monthRange.length) {
|
||||
this.monthRange = ["2018-08", "2018-08"];
|
||||
this.monthRange = ['2018-08', '2018-08'];
|
||||
}
|
||||
this.$refs.calendar.renderer(2018, 8); //渲染2018年8月份
|
||||
},
|
||||
@@ -393,67 +344,175 @@ export default {
|
||||
this.filter.page = 1;
|
||||
this.loaded = false;
|
||||
this.loading = false;
|
||||
this.time = "date";
|
||||
this.title = "";
|
||||
this.time = 'date';
|
||||
this.title = '';
|
||||
// this.getIndex();
|
||||
// this.getInfo();
|
||||
},
|
||||
dateTitle: function() {
|
||||
dateTitle: function () {
|
||||
this.current = true;
|
||||
},
|
||||
close: function() {
|
||||
close: function () {
|
||||
this.current = false;
|
||||
this.getIndex();
|
||||
this.getInfo();
|
||||
},
|
||||
getInfo: function() {
|
||||
getInfo: function () {
|
||||
var that = this;
|
||||
if (that.loading || that.loaded) return;
|
||||
that.loading = true;
|
||||
statisticsDataApi(that.filter).then(
|
||||
res => {
|
||||
(res) => {
|
||||
that.loading = false;
|
||||
that.loaded = res.length < that.filter.limit;
|
||||
that.list.push.apply(that.list, res);
|
||||
that.filter.page = that.filter.page + 1;
|
||||
},
|
||||
error => {
|
||||
(error) => {
|
||||
that.$dialog.message(error.msg);
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.public-wrapper .title{font-size:0.3rem;color:#282828;padding:0 0.3rem;margin-bottom:0.2rem;}
|
||||
.public-wrapper .title .iconfont{color:#2291f8;font-size:0.4rem;margin-right:0.13rem;vertical-align:middle;}
|
||||
.public-wrapper{margin:0.18rem auto 0 auto;width:6.9rem;background-color:#fff;border-radius:0.1rem;padding-top:0.25rem;}
|
||||
.public-wrapper .nav{padding:0 0.3rem;height:0.7rem;line-height:0.7rem;font-size:0.24rem;color:#999;}
|
||||
.public-wrapper .data{width:2.1rem;text-align:left;}
|
||||
.public-wrapper .browse{width:1.92rem;text-align:right;}
|
||||
.public-wrapper .turnover{width:2.27rem;text-align:right;}
|
||||
.public-wrapper .conter{padding:0 0.3rem;}
|
||||
.public-wrapper .conter .item{border-bottom:1px solid #f7f7f7;height:0.7rem;font-size:0.24rem;}
|
||||
.public-wrapper .conter .item .turnover{color:#d84242;}
|
||||
.statistical-page {margin-top:-50px;}
|
||||
.statistical-page .navs{width:100%;height:0.96rem;background-color:#fff;overflow:hidden;line-height:0.96rem;position:fixed;top:0;left:0;z-index:9;}
|
||||
.statistical-page .navs .list{overflow-y:hidden;overflow-x:auto;white-space: nowrap;-webkit-overflow-scrolling: touch;
|
||||
width: 100%;}
|
||||
.statistical-page .navs .item{font-size:0.32rem;color:#282828;margin-left:0.6rem;display: inline-block;}
|
||||
.statistical-page .navs .item.on{color:#2291f8;}
|
||||
.statistical-page .navs .item .iconfont{font-size:0.25rem;margin-left:0.13rem;}
|
||||
.statistical-page .wrapper{width:7.4rem;background-color:#fff;border-radius:0.1rem;margin:0.19rem auto 0 auto;padding:0.5rem 0.6rem;}
|
||||
.statistical-page .wrapper .title{font-size:0.3rem;color:#999;text-align:center;}
|
||||
.statistical-page .wrapper .money{font-size:0.72rem;color:#fba02a;text-align:center;margin-top:0.1rem;}
|
||||
.statistical-page .wrapper .increase{font-size:0.28rem;color:#999;margin-top:0.2rem;}
|
||||
.statistical-page .wrapper .increase .red{color:#ff6969;}
|
||||
.statistical-page .wrapper .increase .green{color:#1abb1d;}
|
||||
.statistical-page .wrapper .increase .iconfont{font-size:0.23rem;margin-left:0.15rem;}
|
||||
.statistical-page .chart{width:6.9rem;height:4.8rem;background-color:#fff;border-radius:0.1rem;margin:0.23rem auto 0 auto;padding: 0.25rem 0.22rem 0 0.22rem;}
|
||||
.statistical-page .chart .company{font-size:0.26rem;color:#999;}
|
||||
.statistical-page .mc-body{padding-bottom:0;}
|
||||
.statistical-page .mc-body tr{background-color: #edf8fe;border-top: 1px solid #fff;width:100%;}
|
||||
.public-wrapper .title {
|
||||
font-size: 0.3rem;
|
||||
color: #282828;
|
||||
padding: 0 0.3rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.public-wrapper .title .iconfont {
|
||||
color: #2291f8;
|
||||
font-size: 0.4rem;
|
||||
margin-right: 0.13rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.public-wrapper {
|
||||
margin: 0.18rem auto 0 auto;
|
||||
width: 6.9rem;
|
||||
background-color: #fff;
|
||||
border-radius: 0.1rem;
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
.public-wrapper .nav {
|
||||
padding: 0 0.3rem;
|
||||
height: 0.7rem;
|
||||
line-height: 0.7rem;
|
||||
font-size: 0.24rem;
|
||||
color: #999;
|
||||
}
|
||||
.public-wrapper .data {
|
||||
width: 2.1rem;
|
||||
text-align: left;
|
||||
}
|
||||
.public-wrapper .browse {
|
||||
width: 1.92rem;
|
||||
text-align: right;
|
||||
}
|
||||
.public-wrapper .turnover {
|
||||
width: 2.27rem;
|
||||
text-align: right;
|
||||
}
|
||||
.public-wrapper .conter {
|
||||
padding: 0 0.3rem;
|
||||
}
|
||||
.public-wrapper .conter .item {
|
||||
border-bottom: 1px solid #f7f7f7;
|
||||
height: 0.7rem;
|
||||
font-size: 0.24rem;
|
||||
}
|
||||
.public-wrapper .conter .item .turnover {
|
||||
color: #d84242;
|
||||
}
|
||||
.statistical-page {
|
||||
margin-top: -50px;
|
||||
}
|
||||
.statistical-page .navs {
|
||||
width: 100%;
|
||||
height: 0.96rem;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
line-height: 0.96rem;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
}
|
||||
.statistical-page .navs .list {
|
||||
overflow-y: hidden;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
width: 100%;
|
||||
}
|
||||
.statistical-page .navs .item {
|
||||
font-size: 0.32rem;
|
||||
color: #282828;
|
||||
margin-left: 0.6rem;
|
||||
display: inline-block;
|
||||
}
|
||||
.statistical-page .navs .item.on {
|
||||
color: #2291f8;
|
||||
}
|
||||
.statistical-page .navs .item .iconfont {
|
||||
font-size: 0.25rem;
|
||||
margin-left: 0.13rem;
|
||||
}
|
||||
.statistical-page .wrapper {
|
||||
width: 7.4rem;
|
||||
background-color: #fff;
|
||||
border-radius: 0.1rem;
|
||||
margin: 0.19rem auto 0 auto;
|
||||
padding: 0.5rem 0.6rem;
|
||||
}
|
||||
.statistical-page .wrapper .title {
|
||||
font-size: 0.3rem;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
}
|
||||
.statistical-page .wrapper .money {
|
||||
font-size: 0.72rem;
|
||||
color: #fba02a;
|
||||
text-align: center;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
.statistical-page .wrapper .increase {
|
||||
font-size: 0.28rem;
|
||||
color: #999;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
.statistical-page .wrapper .increase .red {
|
||||
color: #ff6969;
|
||||
}
|
||||
.statistical-page .wrapper .increase .green {
|
||||
color: #1abb1d;
|
||||
}
|
||||
.statistical-page .wrapper .increase .iconfont {
|
||||
font-size: 0.23rem;
|
||||
margin-left: 0.15rem;
|
||||
}
|
||||
.statistical-page .chart {
|
||||
width: 6.9rem;
|
||||
height: 4.8rem;
|
||||
background-color: #fff;
|
||||
border-radius: 0.1rem;
|
||||
margin: 0.23rem auto 0 auto;
|
||||
padding: 0.25rem 0.22rem 0 0.22rem;
|
||||
}
|
||||
.statistical-page .chart .company {
|
||||
font-size: 0.26rem;
|
||||
color: #999;
|
||||
}
|
||||
.statistical-page .mc-body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.statistical-page .mc-body tr {
|
||||
background-color: #edf8fe;
|
||||
border-top: 1px solid #fff;
|
||||
width: 100%;
|
||||
}
|
||||
.echarts {
|
||||
width: 100%;
|
||||
height: 5.5rem;
|
||||
|
||||
@@ -23,9 +23,7 @@
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="title">
|
||||
<span class="iconfont icon-shujutongji"></span>数据统计
|
||||
</div>
|
||||
<div class="title"><span class="iconfont icon-shujutongji"></span>数据统计</div>
|
||||
<div class="list acea-row">
|
||||
<router-link class="item" :to="'/javaMobile/orderStatisticsDetail/price/today'">
|
||||
<div class="num">{{ census.todayPrice }}</div>
|
||||
@@ -59,89 +57,170 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {orderStatisticsApi, statisticsDataApi } from '@/api/order';
|
||||
import statisticsData from "../components/statisticsData";
|
||||
import Loading from "../components/Loading";
|
||||
export default {
|
||||
name: "OrderIndex",
|
||||
components: {
|
||||
Loading,
|
||||
statisticsData
|
||||
},
|
||||
props: {},
|
||||
data: function() {
|
||||
return {
|
||||
census: [],
|
||||
list: [],
|
||||
where: {
|
||||
page: 1,
|
||||
limit: 10
|
||||
},
|
||||
loaded: false,
|
||||
loading: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
import('@/assets/js/media_750')
|
||||
},
|
||||
mounted: function() {
|
||||
this.getIndex();
|
||||
this.getList();
|
||||
this.$scroll(this.$refs.container, () => {
|
||||
!this.loading && this.getList();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
getIndex() {
|
||||
orderStatisticsApi().then(
|
||||
res => {
|
||||
this.census = res
|
||||
},
|
||||
err => {
|
||||
this.$dialog.message(err.message);
|
||||
}
|
||||
);
|
||||
import { orderStatisticsApi, statisticsDataApi } from '@/api/order';
|
||||
import statisticsData from '../components/statisticsData';
|
||||
import Loading from '../components/Loading';
|
||||
export default {
|
||||
name: 'OrderIndex',
|
||||
components: {
|
||||
Loading,
|
||||
statisticsData,
|
||||
},
|
||||
props: {},
|
||||
data: function () {
|
||||
return {
|
||||
census: [],
|
||||
list: [],
|
||||
where: {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
},
|
||||
getList() {
|
||||
if (this.loading || this.loaded) return;
|
||||
this.loading = true;
|
||||
statisticsDataApi(this.where).then(
|
||||
res => {
|
||||
this.loading = false;
|
||||
this.loaded = res.length < this.where.limit;
|
||||
this.list.push.apply(this.list, res);
|
||||
this.where.page = this.where.page + 1;
|
||||
},
|
||||
error => {
|
||||
this.$dialog.message(error.message);
|
||||
},
|
||||
300
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
loaded: false,
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
import('@/assets/js/media_750');
|
||||
},
|
||||
mounted: function () {
|
||||
this.getIndex();
|
||||
this.getList();
|
||||
this.$scroll(this.$refs.container, () => {
|
||||
!this.loading && this.getList();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
getIndex() {
|
||||
orderStatisticsApi().then(
|
||||
(res) => {
|
||||
this.census = res;
|
||||
},
|
||||
(err) => {
|
||||
this.$dialog.message(err.message);
|
||||
},
|
||||
);
|
||||
},
|
||||
getList() {
|
||||
if (this.loading || this.loaded) return;
|
||||
this.loading = true;
|
||||
statisticsDataApi(this.where).then(
|
||||
(res) => {
|
||||
this.loading = false;
|
||||
this.loaded = res.length < this.where.limit;
|
||||
this.list.push.apply(this.list, res);
|
||||
this.where.page = this.where.page + 1;
|
||||
},
|
||||
(error) => {
|
||||
this.$dialog.message(error.message);
|
||||
},
|
||||
300,
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.order-index{
|
||||
background: #f5f5f5;
|
||||
margin-top: -50px;
|
||||
}
|
||||
.order-index .header{background:url("../../../assets/imgs/orderIndex.png") no-repeat;background-size:100% 100%;width:100%;height:3.02rem;padding:0.45rem 0.3rem 0 0.3rem;}
|
||||
.order-index .header .item{flex:1;-webkit-flex:1;-o-flex:1;-ms-flex:1;text-align:center;font-size:0.24rem;color:#fff;}
|
||||
.order-index .header .item .num{font-size:0.4rem;margin-bottom:0.07rem;}
|
||||
.order-index .wrapper{width:6.9rem;background-color:#fff;border-radius:0.1rem;margin:-1.15rem auto 0 auto;padding-top:0.25rem;}
|
||||
.order-index .wrapper .title{font-size:0.3rem;color:#282828;padding:0 0.3rem;margin-bottom:0.4rem;}
|
||||
.order-index .wrapper .title .iconfont{color:#2291f8;font-size:0.4rem;margin-right:0.13rem;vertical-align:middle;}
|
||||
.order-index .wrapper .list .item{width:33.33%;text-align:center;font-size:0.24rem;color:#999;margin-bottom:0.45rem;}
|
||||
.order-index .wrapper .list .item .num{font-size:0.4rem;color:#333;}
|
||||
.public-wrapper .title{font-size:0.3rem;color:#282828;padding:0 0.3rem;margin-bottom:0.2rem;}
|
||||
.public-wrapper .title .iconfont{color:#2291f8;font-size:0.4rem;margin-right:0.13rem;vertical-align:middle;}
|
||||
.public-wrapper{margin:0.18rem auto 0 auto;width:6.9rem;background-color:#fff;border-radius:0.1rem;padding-top:0.25rem;}
|
||||
.public-wrapper .nav{padding:0 0.3rem;height:0.7rem;line-height:0.7rem;font-size:0.24rem;color:#999;}
|
||||
.public-wrapper .data{width:2.1rem;text-align:left;}
|
||||
.public-wrapper .browse{width:1.92rem;text-align:right;}
|
||||
.public-wrapper .turnover{width:2.27rem;text-align:right;}
|
||||
.public-wrapper .conter{padding:0 0.3rem;}
|
||||
.public-wrapper .conter .item{border-bottom:1px solid #f7f7f7;height:0.7rem;font-size:0.24rem;}
|
||||
.public-wrapper .conter .item .turnover{color:#d84242;}
|
||||
.order-index {
|
||||
background: #f5f5f5;
|
||||
margin-top: -50px;
|
||||
}
|
||||
.order-index .header {
|
||||
background: url('../../../assets/imgs/orderIndex.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 3.02rem;
|
||||
padding: 0.45rem 0.3rem 0 0.3rem;
|
||||
}
|
||||
.order-index .header .item {
|
||||
flex: 1;
|
||||
-webkit-flex: 1;
|
||||
-o-flex: 1;
|
||||
-ms-flex: 1;
|
||||
text-align: center;
|
||||
font-size: 0.24rem;
|
||||
color: #fff;
|
||||
}
|
||||
.order-index .header .item .num {
|
||||
font-size: 0.4rem;
|
||||
margin-bottom: 0.07rem;
|
||||
}
|
||||
.order-index .wrapper {
|
||||
width: 6.9rem;
|
||||
background-color: #fff;
|
||||
border-radius: 0.1rem;
|
||||
margin: -1.15rem auto 0 auto;
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
.order-index .wrapper .title {
|
||||
font-size: 0.3rem;
|
||||
color: #282828;
|
||||
padding: 0 0.3rem;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
.order-index .wrapper .title .iconfont {
|
||||
color: #2291f8;
|
||||
font-size: 0.4rem;
|
||||
margin-right: 0.13rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.order-index .wrapper .list .item {
|
||||
width: 33.33%;
|
||||
text-align: center;
|
||||
font-size: 0.24rem;
|
||||
color: #999;
|
||||
margin-bottom: 0.45rem;
|
||||
}
|
||||
.order-index .wrapper .list .item .num {
|
||||
font-size: 0.4rem;
|
||||
color: #333;
|
||||
}
|
||||
.public-wrapper .title {
|
||||
font-size: 0.3rem;
|
||||
color: #282828;
|
||||
padding: 0 0.3rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.public-wrapper .title .iconfont {
|
||||
color: #2291f8;
|
||||
font-size: 0.4rem;
|
||||
margin-right: 0.13rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.public-wrapper {
|
||||
margin: 0.18rem auto 0 auto;
|
||||
width: 6.9rem;
|
||||
background-color: #fff;
|
||||
border-radius: 0.1rem;
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
.public-wrapper .nav {
|
||||
padding: 0 0.3rem;
|
||||
height: 0.7rem;
|
||||
line-height: 0.7rem;
|
||||
font-size: 0.24rem;
|
||||
color: #999;
|
||||
}
|
||||
.public-wrapper .data {
|
||||
width: 2.1rem;
|
||||
text-align: left;
|
||||
}
|
||||
.public-wrapper .browse {
|
||||
width: 1.92rem;
|
||||
text-align: right;
|
||||
}
|
||||
.public-wrapper .turnover {
|
||||
width: 2.27rem;
|
||||
text-align: right;
|
||||
}
|
||||
.public-wrapper .conter {
|
||||
padding: 0 0.3rem;
|
||||
}
|
||||
.public-wrapper .conter .item {
|
||||
border-bottom: 1px solid #f7f7f7;
|
||||
height: 0.7rem;
|
||||
font-size: 0.24rem;
|
||||
}
|
||||
.public-wrapper .conter .item .turnover {
|
||||
color: #d84242;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,14 +3,11 @@
|
||||
<header>
|
||||
<div class="order-num acea-row row-between-wrapper">
|
||||
<div class="num line1">订单号：{{ orderId }}</div>
|
||||
<div class="name line1">
|
||||
<span class="iconfont iconios-contact"></span>{{ delivery.nikeName }}
|
||||
</div>
|
||||
<div class="name line1"><span class="iconfont iconios-contact"></span>{{ delivery.nikeName }}</div>
|
||||
</div>
|
||||
<div class="address">
|
||||
<div class="name">
|
||||
{{ delivery.realName
|
||||
}}<span class="phone">{{ delivery.userPhone }}</span>
|
||||
{{ delivery.realName }}<span class="phone">{{ delivery.userPhone }}</span>
|
||||
</div>
|
||||
<div>{{ delivery.userAddress }}</div>
|
||||
</div>
|
||||
@@ -36,47 +33,27 @@
|
||||
<div>发货方式</div>
|
||||
<select class="mode" v-model="expressCode">
|
||||
<option value="">选择快递公司</option>
|
||||
<option
|
||||
:value="item.code"
|
||||
v-for="(item, index) in express"
|
||||
:key="index"
|
||||
>{{ item.name }}</option
|
||||
>
|
||||
<option :value="item.code" v-for="(item, index) in express" :key="index">{{ item.name }}</option>
|
||||
</select>
|
||||
<span class="iconfont icon-up"></span>
|
||||
</div>
|
||||
<div class="item acea-row row-between-wrapper">
|
||||
<div>快递单号</div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="填写快递单号"
|
||||
v-model="expressNumber"
|
||||
class="mode"
|
||||
/>
|
||||
<input type="text" placeholder="填写快递单号" v-model="expressNumber" class="mode" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="list" v-show="active === 1">
|
||||
<div class="item acea-row row-between-wrapper">
|
||||
<div>送货人</div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="填写送货人"
|
||||
v-model="deliveryName"
|
||||
class="mode"
|
||||
/>
|
||||
<input type="text" placeholder="填写送货人" v-model="deliveryName" class="mode" />
|
||||
</div>
|
||||
<div class="item acea-row row-between-wrapper">
|
||||
<div>送货电话</div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="填写送货电话"
|
||||
v-model="deliveryTel"
|
||||
class="mode"
|
||||
/>
|
||||
<input type="text" placeholder="填写送货电话" v-model="deliveryTel" class="mode" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:1.2rem;"></div>
|
||||
<div style="height: 1.2rem"></div>
|
||||
<div class="confirm" @click="saveInfo">确认提交</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -84,52 +61,52 @@
|
||||
// import { getAdminOrderDelivery, setAdminOrderDelivery } from "../../api/admin";
|
||||
import { orderSendApi, orderDetailApi } from '@/api/order';
|
||||
import { expressList } from '@/api/logistics';
|
||||
import { required, num } from "@/utils/validate";
|
||||
import { validatorDefaultCatch } from "@/libs/dialog";
|
||||
import { required, num } from '@/utils/validate';
|
||||
import { validatorDefaultCatch } from '@/libs/dialog';
|
||||
export default {
|
||||
name: "GoodsDeliver",
|
||||
name: 'GoodsDeliver',
|
||||
components: {},
|
||||
props: {},
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {
|
||||
types: [
|
||||
{
|
||||
type: "1",
|
||||
title: "发货"
|
||||
type: '1',
|
||||
title: '发货',
|
||||
},
|
||||
{
|
||||
type: "2",
|
||||
title: "送货"
|
||||
type: '2',
|
||||
title: '送货',
|
||||
},
|
||||
{
|
||||
type: "3",
|
||||
title: "无需发货"
|
||||
}
|
||||
type: '3',
|
||||
title: '无需发货',
|
||||
},
|
||||
],
|
||||
active: 0,
|
||||
orderId: "",
|
||||
orderId: '',
|
||||
delivery: {},
|
||||
express: [],
|
||||
type: "1",
|
||||
deliveryName: "",
|
||||
expressCode: "",
|
||||
type: '1',
|
||||
deliveryName: '',
|
||||
expressCode: '',
|
||||
expressNumber: '',
|
||||
deliveryTel: ""
|
||||
deliveryTel: '',
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
"$route.params.oid": function(newVal) {
|
||||
'$route.params.oid': function (newVal) {
|
||||
let that = this;
|
||||
if (newVal != undefined) {
|
||||
that.orderId = newVal;
|
||||
that.getIndex();
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
import('@/assets/js/media_750')
|
||||
import('@/assets/js/media_750');
|
||||
},
|
||||
mounted: function() {
|
||||
mounted: function () {
|
||||
this.orderId = this.$route.params.oid;
|
||||
this.getIndex();
|
||||
this.getLogistics();
|
||||
@@ -138,22 +115,24 @@ export default {
|
||||
changeType(item, index) {
|
||||
this.active = index;
|
||||
this.type = item.type;
|
||||
this.deliveryName = "";
|
||||
this.deliveryTel = "";
|
||||
this.expressCode = "";
|
||||
this.expressNumber = "";
|
||||
this.deliveryName = '';
|
||||
this.deliveryTel = '';
|
||||
this.expressCode = '';
|
||||
this.expressNumber = '';
|
||||
},
|
||||
getIndex() {
|
||||
orderDetailApi({ orderNo: this.orderId }).then(res => {
|
||||
this.delivery = res
|
||||
}).catch((error)=>{
|
||||
this.$dialog.error(error.message);
|
||||
})
|
||||
orderDetailApi({ orderNo: this.orderId })
|
||||
.then((res) => {
|
||||
this.delivery = res;
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$dialog.error(error.message);
|
||||
});
|
||||
},
|
||||
getLogistics() {
|
||||
expressList({ page: 1, limit: 999, isShow:1 }).then(async res => {
|
||||
this.express = res.list
|
||||
})
|
||||
expressList({ page: 1, limit: 999, isShow: 1 }).then(async (res) => {
|
||||
this.express = res.list;
|
||||
});
|
||||
},
|
||||
async saveInfo() {
|
||||
// type: '1',
|
||||
@@ -170,7 +149,6 @@ export default {
|
||||
// toTel: '',
|
||||
// orderNo: ''
|
||||
|
||||
|
||||
let that = this,
|
||||
deliveryName = that.deliveryName,
|
||||
deliveryTel = that.deliveryTel,
|
||||
@@ -179,7 +157,7 @@ export default {
|
||||
save.orderNo = that.orderId;
|
||||
|
||||
switch (that.type) {
|
||||
case "1":
|
||||
case '1':
|
||||
// try {
|
||||
// await this.$validator({
|
||||
// expressId: [required(required.message("快递公司"))],
|
||||
@@ -188,18 +166,18 @@ export default {
|
||||
// } catch (e) {
|
||||
// return validatorDefaultCatch(e);
|
||||
// }
|
||||
if( !that.expressCode ) return that.$dialog.error('请输入快递公司');
|
||||
if( !that.expressNumber ) return that.$dialog.error('请输入快递单号');
|
||||
if (!that.expressCode) return that.$dialog.error('请输入快递公司');
|
||||
if (!that.expressNumber) return that.$dialog.error('请输入快递单号');
|
||||
save.expressNumber = that.expressNumber;
|
||||
save.expressRecordType = 1;
|
||||
save.expressCode = that.expressCode;
|
||||
that.setInfo(save);
|
||||
break;
|
||||
case "2":
|
||||
case '2':
|
||||
try {
|
||||
await this.$validator({
|
||||
deliveryName: [required(required.message("发货人姓名"))],
|
||||
deliveryTel: [required(required.message("发货人电话"))]
|
||||
deliveryName: [required(required.message('发货人姓名'))],
|
||||
deliveryTel: [required(required.message('发货人电话'))],
|
||||
}).validate({ deliveryName, deliveryTel });
|
||||
} catch (e) {
|
||||
return validatorDefaultCatch(e);
|
||||
@@ -208,54 +186,149 @@ export default {
|
||||
save.deliveryTel = deliveryTel;
|
||||
that.setInfo(save);
|
||||
break;
|
||||
case "3":
|
||||
case '3':
|
||||
that.setInfo(save);
|
||||
break;
|
||||
}
|
||||
},
|
||||
setInfo: function(item) {
|
||||
setInfo: function (item) {
|
||||
let that = this;
|
||||
orderSendApi(item).then(
|
||||
res => {
|
||||
(res) => {
|
||||
that.$dialog.success('发送货成功');
|
||||
that.$router.go(-1);
|
||||
},
|
||||
error => {
|
||||
(error) => {
|
||||
that.$dialog.error(error.message);
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
/*input{*/
|
||||
/*line-height: normal; box-sizing:border-box;*/
|
||||
/*-webkit-text-size-adjust: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif, 'Droid Sans Fallback'; color:#333;*/
|
||||
/*outline:none; border:none; -webkit-appearance:none;border-radius: 0; background:none;*/
|
||||
/*}*/
|
||||
/*input,input[type="search"],button,select,option,textarea,a{ outline:none; border:0; -webkit-appearance:none;border-radius: 0; background:none;-webkit-box-sizing:border-box;box-sizing:border-box;}*/
|
||||
/*button, input, select, textarea { font-size:100%; }*/
|
||||
.deliver-goods header{width:100%;background-color:#fff;margin-top:0.1rem;}
|
||||
.deliver-goods header .order-num{padding:0 0.3rem;border-bottom:1px solid #f5f5f5;height:0.67rem;}
|
||||
.deliver-goods header .order-num .num{width:4.3rem;font-size:0.26rem;color:#282828;position:relative;}
|
||||
.deliver-goods header .order-num .num:after{position:absolute;content:'';width:1px;height:0.3rem;background-color:#ddd;top:50%;margin-top:-0.15rem;right:0;}
|
||||
.deliver-goods header .order-num .name{width:2.6rem;font-size:0.26rem;color:#282828;text-align: center;}
|
||||
.deliver-goods header .order-num .name .iconfont{font-size:0.35rem;color:#477ef3;vertical-align:middle;margin-right:0.1rem;}
|
||||
.deliver-goods header .address{font-size:0.26rem;color:#868686;background-color:#fff;padding:0.3rem;}
|
||||
.deliver-goods header .address .name{font-size:0.3rem;color:#282828;margin-bottom:0.1rem;}
|
||||
.deliver-goods header .address .name .phone{margin-left:0.4rem;}
|
||||
.deliver-goods header .line{width:100%;height:0.03rem;}
|
||||
.deliver-goods header .line img{width:100%;height:100%;display:block;}
|
||||
.deliver-goods .wrapper{width:100%;background-color:#fff;}
|
||||
.deliver-goods .wrapper .item{border-bottom:1px solid #f0f0f0;padding:0 0.3rem;height:0.96rem;font-size:0.32rem;color:#282828;position:relative;}
|
||||
.deliver-goods .wrapper .item .mode{width:4.6rem;height:100%;text-align:right;}
|
||||
.deliver-goods .wrapper .item .mode .iconfont{font-size:0.3rem;margin-left:0.13rem;}
|
||||
.deliver-goods .wrapper .item .mode .goods~.goods{margin-left:0.3rem;}
|
||||
.deliver-goods .wrapper .item .mode .goods{color:#bbb;}
|
||||
.deliver-goods .wrapper .item .mode .goods.on{color:#477ef3;}
|
||||
.deliver-goods .wrapper .item .icon-up{position:absolute;font-size:0.35rem;color:#2c2c2c;right:0.3rem;}
|
||||
.deliver-goods .wrapper .item select{direction: rtl;padding-right:0.6rem;position: relative;z-index: 2;}
|
||||
.deliver-goods .wrapper .item input::placeholder{color:#bbb;}
|
||||
.deliver-goods .confirm{font-size:0.32rem;color:#fff;width:100%;height:1rem;background-color:#477ef3;text-align:center;line-height:1rem;position:fixed;bottom:0;}
|
||||
/*input{*/
|
||||
/*line-height: normal; box-sizing:border-box;*/
|
||||
/*-webkit-text-size-adjust: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif, 'Droid Sans Fallback'; color:#333;*/
|
||||
/*outline:none; border:none; -webkit-appearance:none;border-radius: 0; background:none;*/
|
||||
/*}*/
|
||||
/*input,input[type="search"],button,select,option,textarea,a{ outline:none; border:0; -webkit-appearance:none;border-radius: 0; background:none;-webkit-box-sizing:border-box;box-sizing:border-box;}*/
|
||||
/*button, input, select, textarea { font-size:100%; }*/
|
||||
.deliver-goods header {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
.deliver-goods header .order-num {
|
||||
padding: 0 0.3rem;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
height: 0.67rem;
|
||||
}
|
||||
.deliver-goods header .order-num .num {
|
||||
width: 4.3rem;
|
||||
font-size: 0.26rem;
|
||||
color: #282828;
|
||||
position: relative;
|
||||
}
|
||||
.deliver-goods header .order-num .num:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 1px;
|
||||
height: 0.3rem;
|
||||
background-color: #ddd;
|
||||
top: 50%;
|
||||
margin-top: -0.15rem;
|
||||
right: 0;
|
||||
}
|
||||
.deliver-goods header .order-num .name {
|
||||
width: 2.6rem;
|
||||
font-size: 0.26rem;
|
||||
color: #282828;
|
||||
text-align: center;
|
||||
}
|
||||
.deliver-goods header .order-num .name .iconfont {
|
||||
font-size: 0.35rem;
|
||||
color: #477ef3;
|
||||
vertical-align: middle;
|
||||
margin-right: 0.1rem;
|
||||
}
|
||||
.deliver-goods header .address {
|
||||
font-size: 0.26rem;
|
||||
color: #868686;
|
||||
background-color: #fff;
|
||||
padding: 0.3rem;
|
||||
}
|
||||
.deliver-goods header .address .name {
|
||||
font-size: 0.3rem;
|
||||
color: #282828;
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
.deliver-goods header .address .name .phone {
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
.deliver-goods header .line {
|
||||
width: 100%;
|
||||
height: 0.03rem;
|
||||
}
|
||||
.deliver-goods header .line img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.deliver-goods .wrapper {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
.deliver-goods .wrapper .item {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 0 0.3rem;
|
||||
height: 0.96rem;
|
||||
font-size: 0.32rem;
|
||||
color: #282828;
|
||||
position: relative;
|
||||
}
|
||||
.deliver-goods .wrapper .item .mode {
|
||||
width: 4.6rem;
|
||||
height: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
.deliver-goods .wrapper .item .mode .iconfont {
|
||||
font-size: 0.3rem;
|
||||
margin-left: 0.13rem;
|
||||
}
|
||||
.deliver-goods .wrapper .item .mode .goods ~ .goods {
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
.deliver-goods .wrapper .item .mode .goods {
|
||||
color: #bbb;
|
||||
}
|
||||
.deliver-goods .wrapper .item .mode .goods.on {
|
||||
color: #477ef3;
|
||||
}
|
||||
.deliver-goods .wrapper .item .icon-up {
|
||||
position: absolute;
|
||||
font-size: 0.35rem;
|
||||
color: #2c2c2c;
|
||||
right: 0.3rem;
|
||||
}
|
||||
.deliver-goods .wrapper .item select {
|
||||
direction: rtl;
|
||||
padding-right: 0.6rem;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.deliver-goods .wrapper .item input::placeholder {
|
||||
color: #bbb;
|
||||
}
|
||||
.deliver-goods .confirm {
|
||||
font-size: 0.32rem;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
height: 1rem;
|
||||
background-color: #477ef3;
|
||||
text-align: center;
|
||||
line-height: 1rem;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -9,18 +9,13 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="remarks acea-row row-between-wrapper"
|
||||
v-if="$route.params.goname != 'looks'"
|
||||
>
|
||||
<div class="remarks acea-row row-between-wrapper" v-if="$route.params.goname != 'looks'">
|
||||
<span class="iconfont iconios-flag"></span>
|
||||
<input
|
||||
type="button"
|
||||
class="line1"
|
||||
style="text-align: left;"
|
||||
:value="
|
||||
orderInfo.remark ? orderInfo.remark : '订单未备注，点击添加备注信息'
|
||||
"
|
||||
style="text-align: left"
|
||||
:value="orderInfo.remark ? orderInfo.remark : '订单未备注，点击添加备注信息'"
|
||||
@click="modify(1)"
|
||||
/>
|
||||
</div>
|
||||
@@ -29,20 +24,16 @@
|
||||
</div>
|
||||
<div class="address">
|
||||
<div class="name">
|
||||
{{ orderInfo.realName}}<span class="phone">{{ orderInfo.userPhone }}</span>
|
||||
{{ orderInfo.realName }}<span class="phone">{{ orderInfo.userPhone }}</span>
|
||||
</div>
|
||||
<div>{{ orderInfo.userAddress }}</div>
|
||||
</div>
|
||||
<div class="line"><img src="../../../assets/imgs/line.jpg" /></div>
|
||||
<div class="pos-order-goods">
|
||||
<div
|
||||
class="goods acea-row row-between-wrapper"
|
||||
v-for="(item, index) in orderInfo.orderInfo"
|
||||
:key="index"
|
||||
>
|
||||
<div class="goods acea-row row-between-wrapper" v-for="(item, index) in orderInfo.orderInfo" :key="index">
|
||||
<div class="picTxt acea-row row-between-wrapper">
|
||||
<div class="pictrue">
|
||||
<img :src="item.info.image"/>
|
||||
<img :src="item.info.image" />
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="info line2">
|
||||
@@ -59,19 +50,16 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="public-total">
|
||||
共{{ orderInfo.totalNum }}件商品，应支付
|
||||
<span class="money">￥{{ orderInfo.payPrice }}</span> ( 邮费 ¥{{orderInfo.payPostage }})
|
||||
共{{ orderInfo.totalNum }}件商品，应支付 <span class="money">￥{{ orderInfo.payPrice }}</span> ( 邮费 ¥{{
|
||||
orderInfo.payPostage
|
||||
}})
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="item acea-row row-between">
|
||||
<div>订单编号：</div>
|
||||
<div class="conter acea-row row-middle row-right">
|
||||
{{ orderInfo.orderId }}
|
||||
<span
|
||||
class="copy copy-data"
|
||||
:data-clipboard-text="orderInfo.orderId"
|
||||
>复制</span
|
||||
>
|
||||
<span class="copy copy-data" :data-clipboard-text="orderInfo.orderId">复制</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item acea-row row-between">
|
||||
@@ -107,21 +95,13 @@
|
||||
<div class="conter">￥{{ orderInfo.payPostage }}</div>
|
||||
</div>
|
||||
<div class="actualPay acea-row row-right">
|
||||
实付款：<span class="money font-color-red"
|
||||
>￥{{ orderInfo.payPrice }}</span
|
||||
>
|
||||
实付款：<span class="money font-color-red">￥{{ orderInfo.payPrice }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="wrapper"
|
||||
v-if="
|
||||
orderInfo.deliveryType === 'express'"
|
||||
>
|
||||
<div class="wrapper" v-if="orderInfo.deliveryType === 'express'">
|
||||
<div class="item acea-row row-between">
|
||||
<div>配送方式：</div>
|
||||
<div class="conter" v-if="orderInfo.deliveryType === 'express'">
|
||||
快递
|
||||
</div>
|
||||
<div class="conter" v-if="orderInfo.deliveryType === 'express'">快递</div>
|
||||
<div class="conter" v-if="orderInfo.deliveryType === 'send'">送货</div>
|
||||
</div>
|
||||
<div class="item acea-row row-between">
|
||||
@@ -133,27 +113,15 @@
|
||||
<div v-if="orderInfo.deliveryType === 'express'">快递单号：</div>
|
||||
<div v-if="orderInfo.deliveryType === 'send'">送货人电话：</div>
|
||||
<div class="conter">
|
||||
{{ orderInfo.deliveryId
|
||||
}}<span
|
||||
class="copy copy-data"
|
||||
:data-clipboard-text="orderInfo.deliveryId"
|
||||
>复制</span
|
||||
>
|
||||
{{ orderInfo.deliveryId }}<span class="copy copy-data" :data-clipboard-text="orderInfo.deliveryId">复制</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:1.2rem;"></div>
|
||||
<div
|
||||
class="footer acea-row row-right row-middle"
|
||||
v-if="$route.params.goname != 'looks'"
|
||||
>
|
||||
<div style="height: 1.2rem"></div>
|
||||
<div class="footer acea-row row-right row-middle" v-if="$route.params.goname != 'looks'">
|
||||
<div class="more"></div>
|
||||
<div class="bnt cancel" @click="modify(0)" v-if="types === 'unPaid'">
|
||||
一键改价
|
||||
</div>
|
||||
<div class="bnt cancel" @click="modify(0)" v-if="types === 'refunding'">
|
||||
立即退款
|
||||
</div>
|
||||
<div class="bnt cancel" @click="modify(0)" v-if="types === 'unPaid'">一键改价</div>
|
||||
<div class="bnt cancel" @click="modify(0)" v-if="types === 'refunding'">立即退款</div>
|
||||
<div class="bnt cancel" @click="modify(1)">订单备注</div>
|
||||
<!--<div-->
|
||||
<!--class="bnt cancel"-->
|
||||
@@ -164,15 +132,21 @@
|
||||
<!--</div>-->
|
||||
<router-link
|
||||
class="bnt delivery"
|
||||
v-if="types == 'notShipped'&& orderInfo.shippingType !== 2 && orderInfo.refundStatus !==2"
|
||||
v-if="types == 'notShipped' && orderInfo.shippingType !== 2 && orderInfo.refundStatus !== 2"
|
||||
:to="'/javaMobile/orderDelivery/' + orderInfo.orderId + '/' + orderInfo.id"
|
||||
>去发货</router-link
|
||||
>去发货</router-link
|
||||
>
|
||||
<router-link
|
||||
class="bnt delivery"
|
||||
v-if="types === 'toBeWrittenOff' && orderInfo.shippingType === 2 && isWriteOff && orderInfo.refundStatus === 0 && orderInfo.paid == true"
|
||||
v-if="
|
||||
types === 'toBeWrittenOff' &&
|
||||
orderInfo.shippingType === 2 &&
|
||||
isWriteOff &&
|
||||
orderInfo.refundStatus === 0 &&
|
||||
orderInfo.paid == true
|
||||
"
|
||||
:to="'/operation/systemStore/orderCancellation'"
|
||||
>去核销
|
||||
>去核销
|
||||
</router-link>
|
||||
</div>
|
||||
<PriceChange
|
||||
@@ -184,83 +158,82 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import PriceChange from "../components/PriceChange";
|
||||
import ClipboardJS from "clipboard";
|
||||
import { orderDetailApi } from '@/api/order'
|
||||
import { required, num } from "@/utils/validate";
|
||||
import { validatorDefaultCatch } from "@/libs/dialog";
|
||||
import { isWriteOff } from "@/utils";
|
||||
import PriceChange from '../components/PriceChange';
|
||||
import ClipboardJS from 'clipboard';
|
||||
import { orderDetailApi } from '@/api/order';
|
||||
import { required, num } from '@/utils/validate';
|
||||
import { validatorDefaultCatch } from '@/libs/dialog';
|
||||
import { isWriteOff } from '@/utils';
|
||||
export default {
|
||||
name: "AdminOrder",
|
||||
name: 'AdminOrder',
|
||||
components: {
|
||||
PriceChange
|
||||
PriceChange,
|
||||
},
|
||||
props: {},
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {
|
||||
isWriteOff: isWriteOff(),
|
||||
order: false,
|
||||
change: false,
|
||||
orderId: '',
|
||||
orderInfo: {
|
||||
},
|
||||
orderInfo: {},
|
||||
status: 0,
|
||||
title: "",
|
||||
payType: "",
|
||||
types: ""
|
||||
title: '',
|
||||
payType: '',
|
||||
types: '',
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
"$route.params.id": function(newVal) {
|
||||
'$route.params.id': function (newVal) {
|
||||
let that = this;
|
||||
if (newVal != undefined) {
|
||||
that.orderId = newVal;
|
||||
that.getIndex();
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted: function() {
|
||||
mounted: function () {
|
||||
// this.orderId = this.$route.params.id;
|
||||
this.getIndex();
|
||||
this.$nextTick(function() {
|
||||
var copybtn = document.getElementsByClassName("copy-data");
|
||||
this.$nextTick(function () {
|
||||
var copybtn = document.getElementsByClassName('copy-data');
|
||||
const clipboard = new ClipboardJS(copybtn);
|
||||
clipboard.on("success", () => {
|
||||
this.$dialog.success("复制成功");
|
||||
clipboard.on('success', () => {
|
||||
this.$dialog.success('复制成功');
|
||||
});
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
more: function() {
|
||||
more: function () {
|
||||
this.order = !this.order;
|
||||
},
|
||||
modify: function(status) {
|
||||
modify: function (status) {
|
||||
this.change = true;
|
||||
this.status = status;
|
||||
},
|
||||
changeclose: function(msg) {
|
||||
changeclose: function (msg) {
|
||||
this.change = msg;
|
||||
this.getIndex()
|
||||
this.getIndex();
|
||||
},
|
||||
getIndex: function() {
|
||||
getIndex: function () {
|
||||
let that = this;
|
||||
orderDetailApi({orderNo: this.$route.params.id}).then(
|
||||
res => {
|
||||
orderDetailApi({ orderNo: this.$route.params.id }).then(
|
||||
(res) => {
|
||||
that.orderInfo = res;
|
||||
that.types = res.statusStr.key;
|
||||
that.title = res.statusStr.value;
|
||||
that.payType = res.payTypeStr;
|
||||
this.$nextTick(function() {
|
||||
let copybtn = document.getElementsByClassName("copy-data");
|
||||
this.$nextTick(function () {
|
||||
let copybtn = document.getElementsByClassName('copy-data');
|
||||
const clipboard = new ClipboardJS(copybtn);
|
||||
clipboard.on("success", () => {
|
||||
this.$dialog.success("复制成功");
|
||||
clipboard.on('success', () => {
|
||||
this.$dialog.success('复制成功');
|
||||
});
|
||||
});
|
||||
},
|
||||
err => {
|
||||
(err) => {
|
||||
that.$dialog.error(err.msg);
|
||||
}
|
||||
},
|
||||
);
|
||||
},
|
||||
// async savePrice(opt) {
|
||||
@@ -341,88 +314,351 @@ export default {
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
offlinePay: function() {
|
||||
offlinePay: function () {
|
||||
setOfflinePay({ orderId: this.orderInfo.orderId }).then(
|
||||
res => {
|
||||
(res) => {
|
||||
this.$dialog.success(res.msg);
|
||||
this.getIndex();
|
||||
},
|
||||
err => {
|
||||
(err) => {
|
||||
this.$dialog.error(err.msg);
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.pos-order-goods{padding:0 0.3rem;background-color: #fff;}
|
||||
.pos-order-goods .goods{height:1.85rem;}
|
||||
.pos-order-goods .goods~.goods{border-top:1px dashed #e5e5e5;}
|
||||
.pos-order-goods .goods .picTxt{width:5.15rem;}
|
||||
.pos-order-goods .goods .picTxt .pictrue{width:1.3rem;height:1.3rem;}
|
||||
.pos-order-goods .goods .picTxt .pictrue img{width:100%;height:100%;border-radius:0.06rem;}
|
||||
.pos-order-goods .goods .picTxt .text{width:3.65rem;height:1.3rem;}
|
||||
.pos-order-goods .goods .picTxt .text .info{font-size:0.28rem;color:#282828;}
|
||||
.pos-order-goods .goods .picTxt .text .attr{font-size:0.2rem;color:#999;height: 0.8rem; line-height: 0.8rem;}
|
||||
.overflow{overflow: hidden;text-overflow: ellipsis; white-space: nowrap;width: 5rem;}
|
||||
.pos-order-goods .goods .money{width:1.64rem;text-align:right;font-size:0.28rem;}
|
||||
.pos-order-goods .goods .money .x-money{color:#282828;}
|
||||
.pos-order-goods .goods .money .num{color:#ff9600;margin:0.05rem 0;}
|
||||
.pos-order-goods .goods .money .y-money{color:#999;text-decoration:line-through;}
|
||||
.order-details .header{padding:0 0.3rem;height:1.5rem;margin-top: -50px;}
|
||||
.order-details .header.on{background-color:#666!important;}
|
||||
.order-details .header .pictrue{width:1.1rem;height:1.1rem;}
|
||||
.order-details .header .pictrue img{width:100%;height:100%;}
|
||||
.order-details .header .data{color:rgba(255,255,255,0.8);font-size:0.24rem;margin-left:0.27rem;}
|
||||
.order-details .header.on .data{margin-left:0;}
|
||||
.order-details .header .data .state{font-size:0.3rem;font-weight:bold;color:#fff;margin-bottom:0.07rem;}
|
||||
.order-details .nav{background-color:#fff;font-size:0.26rem;color:#282828;padding:0.25rem 0;}
|
||||
.order-details .nav .navCon{padding:0 0.4rem;}
|
||||
.order-details .nav .navCon .on{font-weight:bold;color:#e93323;}
|
||||
.order-details .nav .progress{padding:0 0.65rem;margin-top:0.1rem;}
|
||||
.order-details .nav .progress .line{width:1rem;height:0.02rem;background-color:#939390;}
|
||||
.order-details .nav .progress .iconfont{font-size:0.25rem;color:#939390;margin-top:-0.02rem;width: 0.3rem;height: 0.3rem;
|
||||
line-height: 0.33rem;text-align:center;margin-right: 0 !important;}
|
||||
.order-details .address{font-size:0.26rem;color:#868686;background-color:#fff;padding: 0.25rem 0.3rem 0.3rem 0.3rem;}
|
||||
.order-details .address .name{font-size:0.3rem;color:#282828;margin-bottom:0.1rem;}
|
||||
.order-details .address .name .phone{margin-left:0.4rem;}
|
||||
.order-details .line{width:100%;height:0.03rem;}
|
||||
.order-details .line img{width:100%;height:100%;display:block;}
|
||||
.order-details .wrapper{background-color:#fff;margin-top:0.12rem;padding:0.3rem;}
|
||||
.order-details .wrapper .item{font-size:0.28rem;color:#282828;}
|
||||
.order-details .wrapper .item~.item{margin-top:0.2rem;}
|
||||
.order-details .wrapper .item .conter{color:#868686;width:5rem;text-align:right;}
|
||||
.order-details .wrapper .item .conter .copy{font-size:0.2rem;color:#333;border-radius:0.03rem;border:1px solid #666;
|
||||
padding:0.03rem 0.15rem;margin-left:0.24rem;}
|
||||
.order-details .wrapper .actualPay{border-top:0.01rem solid #eee;margin-top:0.3rem;padding-top:0.3rem;}
|
||||
.order-details .wrapper .actualPay .money{font-weight:bold;font-size:0.3rem;}
|
||||
.order-details .footer{width:100%;height:1rem;position:fixed;bottom:0;left:0;background-color:#fff;padding:0 0.3rem;border-top:1px solid #eee;}
|
||||
.order-details .footer .bnt{width:auto;height:0.6rem;text-align:center;line-height:0.6rem;border-radius:0.5rem;
|
||||
color:#fff;font-size:0.27rem;padding: 0 3%;}
|
||||
.order-details .footer .bnt.cancel{color:#aaa;border:1px solid #ddd;}
|
||||
.order-details .footer .bnt.default{color: #444;border: 1px solid #444;}
|
||||
.order-details .footer .bnt~.bnt{margin-left:0.18rem;}
|
||||
.pos-order-details .header{background: linear-gradient(to right,#2291f8 0%,#1cd1dc 100%);background: -webkit-linear-gradient(to right, #2291f8 0%,#1cd1dc 100%);background: -moz-linear-gradient(to right,#2291f8 0%,#1cd1dc 100%);}
|
||||
.pos-order-details .header .state{font-size:0.36rem;color:#fff;}
|
||||
.pos-order-details .header .data{margin-left:0.35rem;font-size:0.28rem;}
|
||||
.pos-order-details .header .data .order-num{font-size:0.3rem;margin-bottom:0.08rem;}
|
||||
.pos-order-details .remarks{width:100%;height:0.86rem;background-color:#fff;padding:0 0.3rem;}
|
||||
.pos-order-details .remarks .iconfont{font-size:0.4rem;color:#2a7efb;}
|
||||
.pos-order-details .remarks input{width:6.3rem;height:100%;font-size:0.3rem;}
|
||||
.pos-order-details .remarks input::placeholder{color:#666;}
|
||||
.pos-order-details .orderingUser{font-size:0.26rem;color:#282828;padding:0 0.3rem;height:0.67rem;background-color:#fff;margin-top:0.16rem;border-bottom:1px solid #f5f5f5;}
|
||||
.pos-order-details .orderingUser .iconfont{font-size:0.4rem;color:#2a7efb;margin-right:0.15rem;}
|
||||
.pos-order-details .address{margin-top:0;}
|
||||
.pos-order-details .pos-order-goods{margin-top:0.17rem;}
|
||||
.pos-order-details .footer .more{font-size:0.27rem;color:#aaa;width:1rem;height:0.64rem;text-align:center;line-height:0.64rem;margin-right: 0.25rem;position:relative;}
|
||||
.pos-order-details .footer .delivery{background: linear-gradient(to right,#2291f8 0%,#1cd1dc 100%);background: -webkit-linear-gradient(to right, #2291f8 0%,#1cd1dc 100%);background: -moz-linear-gradient(to right,#2291f8 0%,#1cd1dc 100%);}
|
||||
.pos-order-details .footer .more .order .arrow{width: 0;height: 0;border-left: 0.11rem solid transparent;border-right: 0.11rem solid transparent;border-top: 0.2rem solid #e5e5e5;position:absolute;left: 0.15rem;bottom:-0.18rem;}
|
||||
.pos-order-details .footer .more .order .arrow:before{content:'';width: 0;height: 0;border-left: 0.09rem solid transparent;border-right: 0.09rem solid transparent;border-top: 0.19rem solid #fff;position:absolute;left:-0.1rem;bottom:0;}
|
||||
.pos-order-details .footer .more .order{width:2rem;background-color:#fff;border:1px solid #eee;border-radius:0.1rem;position:absolute;top:-2rem;z-index:9;}
|
||||
.pos-order-details .footer .more .order .item{height:0.77rem;line-height:0.77rem;}
|
||||
.pos-order-details .footer .more .order .item~.item{border-top:1px solid #f5f5f5;}
|
||||
.pos-order-details .footer .more .moreName{width:100%;height:100%;}
|
||||
.public-total{font-size:0.28rem;color:#282828;border-top:1px solid #eee;height:0.92rem;line-height:0.92rem;text-align:right;padding:0 0.3rem;background-color: #fff;}
|
||||
.public-total .money{color:#ff4c3c;}
|
||||
.pos-order-goods {
|
||||
padding: 0 0.3rem;
|
||||
background-color: #fff;
|
||||
}
|
||||
.pos-order-goods .goods {
|
||||
height: 1.85rem;
|
||||
}
|
||||
.pos-order-goods .goods ~ .goods {
|
||||
border-top: 1px dashed #e5e5e5;
|
||||
}
|
||||
.pos-order-goods .goods .picTxt {
|
||||
width: 5.15rem;
|
||||
}
|
||||
.pos-order-goods .goods .picTxt .pictrue {
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
}
|
||||
.pos-order-goods .goods .picTxt .pictrue img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0.06rem;
|
||||
}
|
||||
.pos-order-goods .goods .picTxt .text {
|
||||
width: 3.65rem;
|
||||
height: 1.3rem;
|
||||
}
|
||||
.pos-order-goods .goods .picTxt .text .info {
|
||||
font-size: 0.28rem;
|
||||
color: #282828;
|
||||
}
|
||||
.pos-order-goods .goods .picTxt .text .attr {
|
||||
font-size: 0.2rem;
|
||||
color: #999;
|
||||
height: 0.8rem;
|
||||
line-height: 0.8rem;
|
||||
}
|
||||
.overflow {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 5rem;
|
||||
}
|
||||
.pos-order-goods .goods .money {
|
||||
width: 1.64rem;
|
||||
text-align: right;
|
||||
font-size: 0.28rem;
|
||||
}
|
||||
.pos-order-goods .goods .money .x-money {
|
||||
color: #282828;
|
||||
}
|
||||
.pos-order-goods .goods .money .num {
|
||||
color: #ff9600;
|
||||
margin: 0.05rem 0;
|
||||
}
|
||||
.pos-order-goods .goods .money .y-money {
|
||||
color: #999;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.order-details .header {
|
||||
padding: 0 0.3rem;
|
||||
height: 1.5rem;
|
||||
margin-top: -50px;
|
||||
}
|
||||
.order-details .header.on {
|
||||
background-color: #666 !important;
|
||||
}
|
||||
.order-details .header .pictrue {
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
}
|
||||
.order-details .header .pictrue img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.order-details .header .data {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 0.24rem;
|
||||
margin-left: 0.27rem;
|
||||
}
|
||||
.order-details .header.on .data {
|
||||
margin-left: 0;
|
||||
}
|
||||
.order-details .header .data .state {
|
||||
font-size: 0.3rem;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
margin-bottom: 0.07rem;
|
||||
}
|
||||
.order-details .nav {
|
||||
background-color: #fff;
|
||||
font-size: 0.26rem;
|
||||
color: #282828;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
.order-details .nav .navCon {
|
||||
padding: 0 0.4rem;
|
||||
}
|
||||
.order-details .nav .navCon .on {
|
||||
font-weight: bold;
|
||||
color: #e93323;
|
||||
}
|
||||
.order-details .nav .progress {
|
||||
padding: 0 0.65rem;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
.order-details .nav .progress .line {
|
||||
width: 1rem;
|
||||
height: 0.02rem;
|
||||
background-color: #939390;
|
||||
}
|
||||
.order-details .nav .progress .iconfont {
|
||||
font-size: 0.25rem;
|
||||
color: #939390;
|
||||
margin-top: -0.02rem;
|
||||
width: 0.3rem;
|
||||
height: 0.3rem;
|
||||
line-height: 0.33rem;
|
||||
text-align: center;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.order-details .address {
|
||||
font-size: 0.26rem;
|
||||
color: #868686;
|
||||
background-color: #fff;
|
||||
padding: 0.25rem 0.3rem 0.3rem 0.3rem;
|
||||
}
|
||||
.order-details .address .name {
|
||||
font-size: 0.3rem;
|
||||
color: #282828;
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
.order-details .address .name .phone {
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
.order-details .line {
|
||||
width: 100%;
|
||||
height: 0.03rem;
|
||||
}
|
||||
.order-details .line img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.order-details .wrapper {
|
||||
background-color: #fff;
|
||||
margin-top: 0.12rem;
|
||||
padding: 0.3rem;
|
||||
}
|
||||
.order-details .wrapper .item {
|
||||
font-size: 0.28rem;
|
||||
color: #282828;
|
||||
}
|
||||
.order-details .wrapper .item ~ .item {
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
.order-details .wrapper .item .conter {
|
||||
color: #868686;
|
||||
width: 5rem;
|
||||
text-align: right;
|
||||
}
|
||||
.order-details .wrapper .item .conter .copy {
|
||||
font-size: 0.2rem;
|
||||
color: #333;
|
||||
border-radius: 0.03rem;
|
||||
border: 1px solid #666;
|
||||
padding: 0.03rem 0.15rem;
|
||||
margin-left: 0.24rem;
|
||||
}
|
||||
.order-details .wrapper .actualPay {
|
||||
border-top: 0.01rem solid #eee;
|
||||
margin-top: 0.3rem;
|
||||
padding-top: 0.3rem;
|
||||
}
|
||||
.order-details .wrapper .actualPay .money {
|
||||
font-weight: bold;
|
||||
font-size: 0.3rem;
|
||||
}
|
||||
.order-details .footer {
|
||||
width: 100%;
|
||||
height: 1rem;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
padding: 0 0.3rem;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
.order-details .footer .bnt {
|
||||
width: auto;
|
||||
height: 0.6rem;
|
||||
text-align: center;
|
||||
line-height: 0.6rem;
|
||||
border-radius: 0.5rem;
|
||||
color: #fff;
|
||||
font-size: 0.27rem;
|
||||
padding: 0 3%;
|
||||
}
|
||||
.order-details .footer .bnt.cancel {
|
||||
color: #aaa;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
.order-details .footer .bnt.default {
|
||||
color: #444;
|
||||
border: 1px solid #444;
|
||||
}
|
||||
.order-details .footer .bnt ~ .bnt {
|
||||
margin-left: 0.18rem;
|
||||
}
|
||||
.pos-order-details .header {
|
||||
background: linear-gradient(to right, #2291f8 0%, #1cd1dc 100%);
|
||||
background: -webkit-linear-gradient(to right, #2291f8 0%, #1cd1dc 100%);
|
||||
background: -moz-linear-gradient(to right, #2291f8 0%, #1cd1dc 100%);
|
||||
}
|
||||
.pos-order-details .header .state {
|
||||
font-size: 0.36rem;
|
||||
color: #fff;
|
||||
}
|
||||
.pos-order-details .header .data {
|
||||
margin-left: 0.35rem;
|
||||
font-size: 0.28rem;
|
||||
}
|
||||
.pos-order-details .header .data .order-num {
|
||||
font-size: 0.3rem;
|
||||
margin-bottom: 0.08rem;
|
||||
}
|
||||
.pos-order-details .remarks {
|
||||
width: 100%;
|
||||
height: 0.86rem;
|
||||
background-color: #fff;
|
||||
padding: 0 0.3rem;
|
||||
}
|
||||
.pos-order-details .remarks .iconfont {
|
||||
font-size: 0.4rem;
|
||||
color: #2a7efb;
|
||||
}
|
||||
.pos-order-details .remarks input {
|
||||
width: 6.3rem;
|
||||
height: 100%;
|
||||
font-size: 0.3rem;
|
||||
}
|
||||
.pos-order-details .remarks input::placeholder {
|
||||
color: #666;
|
||||
}
|
||||
.pos-order-details .orderingUser {
|
||||
font-size: 0.26rem;
|
||||
color: #282828;
|
||||
padding: 0 0.3rem;
|
||||
height: 0.67rem;
|
||||
background-color: #fff;
|
||||
margin-top: 0.16rem;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
.pos-order-details .orderingUser .iconfont {
|
||||
font-size: 0.4rem;
|
||||
color: #2a7efb;
|
||||
margin-right: 0.15rem;
|
||||
}
|
||||
.pos-order-details .address {
|
||||
margin-top: 0;
|
||||
}
|
||||
.pos-order-details .pos-order-goods {
|
||||
margin-top: 0.17rem;
|
||||
}
|
||||
.pos-order-details .footer .more {
|
||||
font-size: 0.27rem;
|
||||
color: #aaa;
|
||||
width: 1rem;
|
||||
height: 0.64rem;
|
||||
text-align: center;
|
||||
line-height: 0.64rem;
|
||||
margin-right: 0.25rem;
|
||||
position: relative;
|
||||
}
|
||||
.pos-order-details .footer .delivery {
|
||||
background: linear-gradient(to right, #2291f8 0%, #1cd1dc 100%);
|
||||
background: -webkit-linear-gradient(to right, #2291f8 0%, #1cd1dc 100%);
|
||||
background: -moz-linear-gradient(to right, #2291f8 0%, #1cd1dc 100%);
|
||||
}
|
||||
.pos-order-details .footer .more .order .arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 0.11rem solid transparent;
|
||||
border-right: 0.11rem solid transparent;
|
||||
border-top: 0.2rem solid #e5e5e5;
|
||||
position: absolute;
|
||||
left: 0.15rem;
|
||||
bottom: -0.18rem;
|
||||
}
|
||||
.pos-order-details .footer .more .order .arrow:before {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 0.09rem solid transparent;
|
||||
border-right: 0.09rem solid transparent;
|
||||
border-top: 0.19rem solid #fff;
|
||||
position: absolute;
|
||||
left: -0.1rem;
|
||||
bottom: 0;
|
||||
}
|
||||
.pos-order-details .footer .more .order {
|
||||
width: 2rem;
|
||||
background-color: #fff;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 0.1rem;
|
||||
position: absolute;
|
||||
top: -2rem;
|
||||
z-index: 9;
|
||||
}
|
||||
.pos-order-details .footer .more .order .item {
|
||||
height: 0.77rem;
|
||||
line-height: 0.77rem;
|
||||
}
|
||||
.pos-order-details .footer .more .order .item ~ .item {
|
||||
border-top: 1px solid #f5f5f5;
|
||||
}
|
||||
.pos-order-details .footer .more .moreName {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.public-total {
|
||||
font-size: 0.28rem;
|
||||
color: #282828;
|
||||
border-top: 1px solid #eee;
|
||||
height: 0.92rem;
|
||||
line-height: 0.92rem;
|
||||
text-align: right;
|
||||
padding: 0 0.3rem;
|
||||
background-color: #fff;
|
||||
}
|
||||
.public-total .money {
|
||||
color: #ff4c3c;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,48 +1,16 @@
|
||||
<template>
|
||||
<div class="pos-order-list" ref="container">
|
||||
<div class="nav acea-row row-around row-middle">
|
||||
<div
|
||||
class="item"
|
||||
:class="where.status == 'unPaid' ? 'on' : ''"
|
||||
@click="changeStatus('unPaid')"
|
||||
>
|
||||
待付款
|
||||
</div>
|
||||
<div
|
||||
class="item"
|
||||
:class="where.status == 'notShipped' ? 'on' : ''"
|
||||
@click="changeStatus('notShipped')"
|
||||
>
|
||||
<div class="item" :class="where.status == 'unPaid' ? 'on' : ''" @click="changeStatus('unPaid')">待付款</div>
|
||||
<div class="item" :class="where.status == 'notShipped' ? 'on' : ''" @click="changeStatus('notShipped')">
|
||||
待发货
|
||||
</div>
|
||||
<div
|
||||
class="item"
|
||||
:class="where.status == 'spike' ? 'on' : ''"
|
||||
@click="changeStatus('spike')"
|
||||
>
|
||||
待收货
|
||||
</div>
|
||||
<div
|
||||
class="item"
|
||||
:class="where.status == 'toBeWrittenOff' ? 'on' : ''"
|
||||
@click="changeStatus('toBeWrittenOff')"
|
||||
>
|
||||
<div class="item" :class="where.status == 'spike' ? 'on' : ''" @click="changeStatus('spike')">待收货</div>
|
||||
<div class="item" :class="where.status == 'toBeWrittenOff' ? 'on' : ''" @click="changeStatus('toBeWrittenOff')">
|
||||
待核销
|
||||
</div>
|
||||
<div
|
||||
class="item"
|
||||
:class="where.status == 'complete' ? 'on' : ''"
|
||||
@click="changeStatus('complete')"
|
||||
>
|
||||
已完成
|
||||
</div>
|
||||
<div
|
||||
class="item"
|
||||
:class="where.status == 'refunding' ? 'on' : ''"
|
||||
@click="changeStatus('refunding')"
|
||||
>
|
||||
退款
|
||||
</div>
|
||||
<div class="item" :class="where.status == 'complete' ? 'on' : ''" @click="changeStatus('complete')">已完成</div>
|
||||
<div class="item" :class="where.status == 'refunding' ? 'on' : ''" @click="changeStatus('refunding')">退款</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<template v-if="list.length > 0">
|
||||
@@ -52,20 +20,13 @@
|
||||
<span class="time">下单时间：{{ item.createTime }}</span>
|
||||
</div>
|
||||
<template if="item.productList && item.productList.length">
|
||||
<div
|
||||
class="pos-order-goods"
|
||||
v-for="(val, key) in item.productList"
|
||||
:key="key"
|
||||
>
|
||||
<div
|
||||
class="goods acea-row row-between-wrapper"
|
||||
@click="toDetail(item)"
|
||||
>
|
||||
<div class="pos-order-goods" v-for="(val, key) in item.productList" :key="key">
|
||||
<div class="goods acea-row row-between-wrapper" @click="toDetail(item)">
|
||||
<div class="picTxt acea-row row-between-wrapper">
|
||||
<div class="pictrue">
|
||||
<img :src="val.info.image" />
|
||||
</div>
|
||||
<div class="text ">
|
||||
<div class="text">
|
||||
<div class="info line2">
|
||||
{{ val.info.productName }}
|
||||
</div>
|
||||
@@ -85,8 +46,8 @@
|
||||
</div>
|
||||
</template>
|
||||
<div class="public-total">
|
||||
共{{ item.totalNum ? item.totalNum : 1 }}件商品，应支付
|
||||
<span class="money">￥{{ item.payPrice }}</span> ( 邮费 ¥{{item.totalPostage ? item.totalPostage : 0}})
|
||||
共{{ item.totalNum ? item.totalNum : 1 }}件商品，应支付 <span class="money">￥{{ item.payPrice }}</span> (
|
||||
邮费 ¥{{ item.totalPostage ? item.totalPostage : 0 }})
|
||||
</div>
|
||||
<div class="operation acea-row row-between-wrapper">
|
||||
<div class="more">
|
||||
@@ -99,22 +60,12 @@
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<div class="acea-row row-middle">
|
||||
<div class="bnt" @click="modify(item, 0)" v-if="!item.isAlterPrice && item.paid == false">
|
||||
一键改价
|
||||
</div>
|
||||
<div class="bnt" @click="modify(item, 0)" v-if="!item.isAlterPrice && item.paid == false">一键改价</div>
|
||||
<div class="bnt" @click="modify(item, 1)">订单备注</div>
|
||||
<div
|
||||
class="bnt"
|
||||
@click="modify(item, 2)"
|
||||
v-if="where.status === 'refunding' && item.refundStatus === 1"
|
||||
>
|
||||
<div class="bnt" @click="modify(item, 2)" v-if="where.status === 'refunding' && item.refundStatus === 1">
|
||||
立即退款
|
||||
</div>
|
||||
<div
|
||||
class="bnt"
|
||||
@click="modify(item, 3)"
|
||||
v-if="where.status === 'refunding' && item.refundStatus === 1"
|
||||
>
|
||||
<div class="bnt" @click="modify(item, 3)" v-if="where.status === 'refunding' && item.refundStatus === 1">
|
||||
拒绝退款
|
||||
</div>
|
||||
<!--<div-->
|
||||
@@ -126,23 +77,29 @@
|
||||
<!--</div>-->
|
||||
<router-link
|
||||
class="bnt"
|
||||
v-if="where.status === 'notShipped' && item.shippingType !== 2 && item.refundStatus !==2"
|
||||
v-if="where.status === 'notShipped' && item.shippingType !== 2 && item.refundStatus !== 2"
|
||||
:to="'/javaMobile/orderDelivery/' + item.orderId + '/' + item.id"
|
||||
>去发货
|
||||
>去发货
|
||||
</router-link>
|
||||
<router-link
|
||||
class="bnt"
|
||||
v-if="where.status === 'toBeWrittenOff' && item.shippingType === 2 && isWriteOff && item.refundStatus === 0 && item.paid == true"
|
||||
v-if="
|
||||
where.status === 'toBeWrittenOff' &&
|
||||
item.shippingType === 2 &&
|
||||
isWriteOff &&
|
||||
item.refundStatus === 0 &&
|
||||
item.paid == true
|
||||
"
|
||||
:to="'/javaMobile/orderCancellation'"
|
||||
>去核销
|
||||
>去核销
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="!loading && list.length === 0">
|
||||
<div style="text-align: center;">暂无数据</div>
|
||||
</template>
|
||||
<template v-if="!loading && list.length === 0">
|
||||
<div style="text-align: center">暂无数据</div>
|
||||
</template>
|
||||
</div>
|
||||
<Loading :loaded="loaded" :loading="loading"></Loading>
|
||||
<PriceChange
|
||||
@@ -156,239 +113,385 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import PriceChange from "../components/PriceChange";
|
||||
import Loading from "../components/Loading";
|
||||
import { orderRefuseApi, orderListApi, statisticsDataApi, orderMarkApi, editPriceApi, orderRefundApi } from '@/api/order';
|
||||
import { required, num } from "@/utils/validate";
|
||||
import { validatorDefaultCatch } from "@/libs/dialog";
|
||||
import { isWriteOff } from "@/utils";
|
||||
export default {
|
||||
name: "AdminOrderList",
|
||||
components: {
|
||||
PriceChange,
|
||||
Loading
|
||||
},
|
||||
props: {},
|
||||
data: function() {
|
||||
return {
|
||||
isWriteOff: isWriteOff(),
|
||||
current: "",
|
||||
change: false,
|
||||
types: 0,
|
||||
where: {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
status: 'unPaid'
|
||||
},
|
||||
list: [],
|
||||
loaded: false,
|
||||
loading: false,
|
||||
orderInfo: {},
|
||||
status: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
"$route.params.types": function(newVal) {
|
||||
let that = this;
|
||||
if (newVal != undefined) {
|
||||
that.where.status = newVal;
|
||||
that.init();
|
||||
}
|
||||
import PriceChange from '../components/PriceChange';
|
||||
import Loading from '../components/Loading';
|
||||
import {
|
||||
orderRefuseApi,
|
||||
orderListApi,
|
||||
statisticsDataApi,
|
||||
orderMarkApi,
|
||||
editPriceApi,
|
||||
orderRefundApi,
|
||||
} from '@/api/order';
|
||||
import { required, num } from '@/utils/validate';
|
||||
import { validatorDefaultCatch } from '@/libs/dialog';
|
||||
import { isWriteOff } from '@/utils';
|
||||
export default {
|
||||
name: 'AdminOrderList',
|
||||
components: {
|
||||
PriceChange,
|
||||
Loading,
|
||||
},
|
||||
props: {},
|
||||
data: function () {
|
||||
return {
|
||||
isWriteOff: isWriteOff(),
|
||||
current: '',
|
||||
change: false,
|
||||
types: 0,
|
||||
where: {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
status: 'unPaid',
|
||||
},
|
||||
types: function() {
|
||||
this.getIndex();
|
||||
list: [],
|
||||
loaded: false,
|
||||
loading: false,
|
||||
orderInfo: {},
|
||||
status: null,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$route.params.types': function (newVal) {
|
||||
let that = this;
|
||||
if (newVal != undefined) {
|
||||
that.where.status = newVal;
|
||||
that.init();
|
||||
}
|
||||
},
|
||||
created() {
|
||||
import('@/assets/js/media_750')
|
||||
},
|
||||
mounted() {
|
||||
this.where.status = this.$route.params.types;
|
||||
this.current = "";
|
||||
types: function () {
|
||||
this.getIndex();
|
||||
this.$scroll(this.$refs.container, () => {
|
||||
!this.loading && this.getIndex();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
more: function(index) {
|
||||
if (this.current === index) this.current = "";
|
||||
else this.current = index;
|
||||
},
|
||||
modify: function(item, status) {
|
||||
this.change = true;
|
||||
this.orderInfo = item;
|
||||
this.status = status;
|
||||
},
|
||||
changeclose: function(msg) {
|
||||
this.change = msg;
|
||||
this.init()
|
||||
},
|
||||
// 拒绝退款
|
||||
getRefuse(id, reason) {
|
||||
orderRefuseApi({ orderNo: id, reason: reason}).then(() =>{
|
||||
},
|
||||
created() {
|
||||
import('@/assets/js/media_750');
|
||||
},
|
||||
mounted() {
|
||||
this.where.status = this.$route.params.types;
|
||||
this.current = '';
|
||||
this.getIndex();
|
||||
this.$scroll(this.$refs.container, () => {
|
||||
!this.loading && this.getIndex();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
more: function (index) {
|
||||
if (this.current === index) this.current = '';
|
||||
else this.current = index;
|
||||
},
|
||||
modify: function (item, status) {
|
||||
this.change = true;
|
||||
this.orderInfo = item;
|
||||
this.status = status;
|
||||
},
|
||||
changeclose: function (msg) {
|
||||
this.change = msg;
|
||||
this.init();
|
||||
},
|
||||
// 拒绝退款
|
||||
getRefuse(id, reason) {
|
||||
orderRefuseApi({ orderNo: id, reason: reason })
|
||||
.then(() => {
|
||||
this.change = false;
|
||||
this.$dialog.success("已拒绝退款");
|
||||
this.$dialog.success('已拒绝退款');
|
||||
this.init();
|
||||
}).catch((error) => {
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$dialog.error(error.message);
|
||||
});
|
||||
},
|
||||
async savePrice(opt) {
|
||||
let that = this,
|
||||
data = {},
|
||||
price = opt.price,
|
||||
refundPrice = opt.refundPrice,
|
||||
refundStatus = that.orderInfo.refundStatus,
|
||||
remark = opt.remark;
|
||||
if (that.status == 0 && refundStatus === 0) {
|
||||
try {
|
||||
await this.$validator({
|
||||
price: [
|
||||
required(required.message("金额"))
|
||||
]
|
||||
}).validate({ price });
|
||||
} catch (e) {
|
||||
return validatorDefaultCatch(e);
|
||||
}
|
||||
data.price = price;
|
||||
data.orderNo = opt.orderId;
|
||||
editPriceApi(data).then(() =>{
|
||||
},
|
||||
async savePrice(opt) {
|
||||
let that = this,
|
||||
data = {},
|
||||
price = opt.price,
|
||||
refundPrice = opt.refundPrice,
|
||||
refundStatus = that.orderInfo.refundStatus,
|
||||
remark = opt.remark;
|
||||
if (that.status == 0 && refundStatus === 0) {
|
||||
try {
|
||||
await this.$validator({
|
||||
price: [required(required.message('金额'))],
|
||||
}).validate({ price });
|
||||
} catch (e) {
|
||||
return validatorDefaultCatch(e);
|
||||
}
|
||||
data.price = price;
|
||||
data.orderNo = opt.orderId;
|
||||
editPriceApi(data)
|
||||
.then(() => {
|
||||
that.change = false;
|
||||
that.$dialog.success("改价成功");
|
||||
that.$dialog.success('改价成功');
|
||||
that.init();
|
||||
}).catch((error) => {
|
||||
})
|
||||
.catch((error) => {
|
||||
that.$dialog.error(error.message);
|
||||
});
|
||||
} else if (that.status == 0 && refundStatus === 1) {
|
||||
try {
|
||||
await this.$validator({
|
||||
refundPrice: [
|
||||
required(required.message("金额")),
|
||||
num(num.message("金额"))
|
||||
]
|
||||
}).validate({ refundPrice });
|
||||
} catch (e) {
|
||||
return validatorDefaultCatch(e);
|
||||
}
|
||||
data.amount = refundPrice;
|
||||
data.type = opt.type;
|
||||
data.orderNo = opt.orderId;
|
||||
orderRefundApi(data).then(
|
||||
res => {
|
||||
that.change = false;
|
||||
that.$dialog.success('退款成功');
|
||||
that.init();
|
||||
},
|
||||
err => {
|
||||
that.change = false;
|
||||
that.$dialog.error(err.message);
|
||||
}
|
||||
);
|
||||
} else {
|
||||
try {
|
||||
await this.$validator({
|
||||
remark: [required(required.message("备注"))]
|
||||
}).validate({ remark });
|
||||
} catch (e) {
|
||||
return validatorDefaultCatch(e);
|
||||
}
|
||||
data.mark = remark;
|
||||
data.orderNo = opt.orderId;
|
||||
orderMarkApi(data).then(
|
||||
res => {
|
||||
that.change = false;
|
||||
that.$dialog.success('提交成功');
|
||||
that.init();
|
||||
},
|
||||
err => {
|
||||
that.change = false;
|
||||
that.$dialog.error(err.message);
|
||||
}
|
||||
);
|
||||
} else if (that.status == 0 && refundStatus === 1) {
|
||||
try {
|
||||
await this.$validator({
|
||||
refundPrice: [required(required.message('金额')), num(num.message('金额'))],
|
||||
}).validate({ refundPrice });
|
||||
} catch (e) {
|
||||
return validatorDefaultCatch(e);
|
||||
}
|
||||
},
|
||||
init: function() {
|
||||
this.list = [];
|
||||
this.where.page = 1;
|
||||
this.loaded = false;
|
||||
this.loading = false;
|
||||
this.getIndex();
|
||||
this.current = "";
|
||||
},
|
||||
getIndex() {
|
||||
if (this.loading || this.loaded) return;
|
||||
this.loading = true;
|
||||
orderListApi(this.where).then(
|
||||
res => {
|
||||
this.loading = false;
|
||||
this.loaded = res.list.length < this.where.limit;
|
||||
this.list.push.apply(this.list, res.list);
|
||||
this.where.page = this.where.page + 1;
|
||||
data.amount = refundPrice;
|
||||
data.type = opt.type;
|
||||
data.orderNo = opt.orderId;
|
||||
orderRefundApi(data).then(
|
||||
(res) => {
|
||||
that.change = false;
|
||||
that.$dialog.success('退款成功');
|
||||
that.init();
|
||||
},
|
||||
(err) => {
|
||||
that.change = false;
|
||||
that.$dialog.error(err.message);
|
||||
},
|
||||
err => {
|
||||
this.$dialog.error(err.message);
|
||||
}
|
||||
);
|
||||
},
|
||||
changeStatus(val) {
|
||||
if (this.where.status != val) {
|
||||
this.where.status = val;
|
||||
this.init();
|
||||
} else {
|
||||
try {
|
||||
await this.$validator({
|
||||
remark: [required(required.message('备注'))],
|
||||
}).validate({ remark });
|
||||
} catch (e) {
|
||||
return validatorDefaultCatch(e);
|
||||
}
|
||||
},
|
||||
toDetail(item) {
|
||||
this.$router.push({ path: "/javaMobile/orderDetail/" + item.orderId });
|
||||
},
|
||||
offlinePay(item) {
|
||||
// setOfflinePay({ order_id: item.order_id }).then(
|
||||
// res => {
|
||||
// this.$dialog.success(res.message);
|
||||
// this.init();
|
||||
// },
|
||||
// error => {
|
||||
// this.$dialog.error(error.message);
|
||||
// }
|
||||
// );
|
||||
data.mark = remark;
|
||||
data.orderNo = opt.orderId;
|
||||
orderMarkApi(data).then(
|
||||
(res) => {
|
||||
that.change = false;
|
||||
that.$dialog.success('提交成功');
|
||||
that.init();
|
||||
},
|
||||
(err) => {
|
||||
that.change = false;
|
||||
that.$dialog.error(err.message);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
init: function () {
|
||||
this.list = [];
|
||||
this.where.page = 1;
|
||||
this.loaded = false;
|
||||
this.loading = false;
|
||||
this.getIndex();
|
||||
this.current = '';
|
||||
},
|
||||
getIndex() {
|
||||
if (this.loading || this.loaded) return;
|
||||
this.loading = true;
|
||||
orderListApi(this.where).then(
|
||||
(res) => {
|
||||
this.loading = false;
|
||||
this.loaded = res.list.length < this.where.limit;
|
||||
this.list.push.apply(this.list, res.list);
|
||||
this.where.page = this.where.page + 1;
|
||||
},
|
||||
(err) => {
|
||||
this.$dialog.error(err.message);
|
||||
},
|
||||
);
|
||||
},
|
||||
changeStatus(val) {
|
||||
if (this.where.status != val) {
|
||||
this.where.status = val;
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
toDetail(item) {
|
||||
this.$router.push({ path: '/javaMobile/orderDetail/' + item.orderId });
|
||||
},
|
||||
offlinePay(item) {
|
||||
// setOfflinePay({ order_id: item.order_id }).then(
|
||||
// res => {
|
||||
// this.$dialog.success(res.message);
|
||||
// this.init();
|
||||
// },
|
||||
// error => {
|
||||
// this.$dialog.error(error.message);
|
||||
// }
|
||||
// );
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.pos-order-goods{padding:0 0.3rem;background-color: #fff;}
|
||||
.pos-order-goods .goods{height:1.85rem;}
|
||||
.pos-order-goods .goods~.goods{border-top:1px dashed #e5e5e5;}
|
||||
.pos-order-goods .goods .picTxt{width:5.15rem;}
|
||||
.pos-order-goods .goods .picTxt .pictrue{width:1.3rem;height:1.3rem;}
|
||||
.pos-order-goods .goods .picTxt .pictrue img{width:100%;height:100%;border-radius:0.06rem;}
|
||||
.pos-order-goods .goods .picTxt .text{width:3.65rem;height:1.3rem;}
|
||||
.pos-order-goods .goods .picTxt .text .info{font-size:0.28rem;color:#282828;}
|
||||
.pos-order-goods .goods .picTxt .text .attr{font-size:0.2rem;color:#999;height: 0.8rem;
|
||||
line-height: 0.8rem;width: 5rem;overflow: hidden;text-overflow: ellipsis; white-space: nowrap;}
|
||||
.pos-order-goods .goods .money{width:1.64rem;text-align:right;font-size:0.28rem;height: 1.3rem;}
|
||||
.pos-order-goods .goods .money .x-money{color:#282828;}
|
||||
.pos-order-goods .goods .money .num{color:#ff9600;margin:0.05rem 0;}
|
||||
.pos-order-goods .goods .money .y-money{color:#999;text-decoration:line-through;}
|
||||
.pos-order-list{background: #f5f5f5;margin-top: -50px;}
|
||||
.pos-order-list .nav{width:100%;height:0.96rem;background-color:#fff;font-size:0.3rem;color:#282828;position:fixed;top:0;left:0;z-index: 66;}
|
||||
.pos-order-list .nav .item.on{color:#2291f8;}
|
||||
.pos-order-list .list{margin-top:0.2rem;}
|
||||
.pos-order-list .list .item{background-color:#fff;width:100%;}
|
||||
.pos-order-list .list .item~.item{margin-top:0.24rem;}
|
||||
.pos-order-list .list .item .order-num{height:1.24rem;border-bottom:1px solid #eee;font-size:0.3rem;font-weight:bold;color:#282828;padding:0 0.3rem;}
|
||||
.pos-order-list .list .item .order-num .time{font-size:0.26rem;font-weight:normal;color:#999;margin-top: -0.4rem;}
|
||||
.pos-order-list .list .item .operation{padding:0.2rem 0.3rem;margin-top: 0.03rem;}
|
||||
.pos-order-list .list .item .operation .more{position:relative;}
|
||||
.pos-order-list .list .item .operation .icon-gengduo{font-size:0.5rem;color:#aaa;}
|
||||
.pos-order-goods {
|
||||
padding: 0 0.3rem;
|
||||
background-color: #fff;
|
||||
}
|
||||
.pos-order-goods .goods {
|
||||
height: 1.85rem;
|
||||
}
|
||||
.pos-order-goods .goods ~ .goods {
|
||||
border-top: 1px dashed #e5e5e5;
|
||||
}
|
||||
.pos-order-goods .goods .picTxt {
|
||||
width: 5.15rem;
|
||||
}
|
||||
.pos-order-goods .goods .picTxt .pictrue {
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
}
|
||||
.pos-order-goods .goods .picTxt .pictrue img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0.06rem;
|
||||
}
|
||||
.pos-order-goods .goods .picTxt .text {
|
||||
width: 3.65rem;
|
||||
height: 1.3rem;
|
||||
}
|
||||
.pos-order-goods .goods .picTxt .text .info {
|
||||
font-size: 0.28rem;
|
||||
color: #282828;
|
||||
}
|
||||
.pos-order-goods .goods .picTxt .text .attr {
|
||||
font-size: 0.2rem;
|
||||
color: #999;
|
||||
height: 0.8rem;
|
||||
line-height: 0.8rem;
|
||||
width: 5rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.pos-order-goods .goods .money {
|
||||
width: 1.64rem;
|
||||
text-align: right;
|
||||
font-size: 0.28rem;
|
||||
height: 1.3rem;
|
||||
}
|
||||
.pos-order-goods .goods .money .x-money {
|
||||
color: #282828;
|
||||
}
|
||||
.pos-order-goods .goods .money .num {
|
||||
color: #ff9600;
|
||||
margin: 0.05rem 0;
|
||||
}
|
||||
.pos-order-goods .goods .money .y-money {
|
||||
color: #999;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.pos-order-list {
|
||||
background: #f5f5f5;
|
||||
margin-top: -50px;
|
||||
}
|
||||
.pos-order-list .nav {
|
||||
width: 100%;
|
||||
height: 0.96rem;
|
||||
background-color: #fff;
|
||||
font-size: 0.3rem;
|
||||
color: #282828;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 66;
|
||||
}
|
||||
.pos-order-list .nav .item.on {
|
||||
color: #2291f8;
|
||||
}
|
||||
.pos-order-list .list {
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
.pos-order-list .list .item {
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
}
|
||||
.pos-order-list .list .item ~ .item {
|
||||
margin-top: 0.24rem;
|
||||
}
|
||||
.pos-order-list .list .item .order-num {
|
||||
height: 1.24rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 0.3rem;
|
||||
font-weight: bold;
|
||||
color: #282828;
|
||||
padding: 0 0.3rem;
|
||||
}
|
||||
.pos-order-list .list .item .order-num .time {
|
||||
font-size: 0.26rem;
|
||||
font-weight: normal;
|
||||
color: #999;
|
||||
margin-top: -0.4rem;
|
||||
}
|
||||
.pos-order-list .list .item .operation {
|
||||
padding: 0.2rem 0.3rem;
|
||||
margin-top: 0.03rem;
|
||||
}
|
||||
.pos-order-list .list .item .operation .more {
|
||||
position: relative;
|
||||
}
|
||||
.pos-order-list .list .item .operation .icon-gengduo {
|
||||
font-size: 0.5rem;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.pos-order-list .list .item .operation .order .arrow{width: 0;height: 0;border-left: 0.11rem solid transparent;border-right: 0.11rem solid transparent;border-top: 0.2rem solid #e5e5e5;position:absolute;left: 0.15rem;bottom:-0.18rem;}
|
||||
.pos-order-list .list .item .operation .order .arrow:before{content:'';width: 0;height: 0;border-left: 0.07rem solid transparent;border-right: 0.07rem solid transparent;border-top: 0.2rem solid #fff;position:absolute;left:-0.07rem;bottom:0;}
|
||||
.pos-order-list .list .item .operation .order{width:2rem;background-color:#fff;border:1px solid #eee;border-radius:0.1rem;position:absolute;top:-1rem;z-index:9;}
|
||||
.pos-order-list .list .item .operation .order .items{height:0.77rem;line-height:0.77rem;text-align:center;}
|
||||
.pos-order-list .list .item .operation .order .items~.items{border-top:1px solid #f5f5f5;}
|
||||
.pos-order-list .list .item .operation .order .arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 0.11rem solid transparent;
|
||||
border-right: 0.11rem solid transparent;
|
||||
border-top: 0.2rem solid #e5e5e5;
|
||||
position: absolute;
|
||||
left: 0.15rem;
|
||||
bottom: -0.18rem;
|
||||
}
|
||||
.pos-order-list .list .item .operation .order .arrow:before {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 0.07rem solid transparent;
|
||||
border-right: 0.07rem solid transparent;
|
||||
border-top: 0.2rem solid #fff;
|
||||
position: absolute;
|
||||
left: -0.07rem;
|
||||
bottom: 0;
|
||||
}
|
||||
.pos-order-list .list .item .operation .order {
|
||||
width: 2rem;
|
||||
background-color: #fff;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 0.1rem;
|
||||
position: absolute;
|
||||
top: -1rem;
|
||||
z-index: 9;
|
||||
}
|
||||
.pos-order-list .list .item .operation .order .items {
|
||||
height: 0.77rem;
|
||||
line-height: 0.77rem;
|
||||
text-align: center;
|
||||
}
|
||||
.pos-order-list .list .item .operation .order .items ~ .items {
|
||||
border-top: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.pos-order-list .list .item .operation .bnt{font-size:0.28rem;color:#5c5c5c;width:1.7rem;height:0.6rem;border-radius:0.3rem;border:1px solid #bbb;text-align:center;line-height:0.6rem;}
|
||||
.pos-order-list .list .item .operation .bnt~.bnt{margin-left:0.14rem;}
|
||||
.public-total{font-size:0.28rem;color:#282828;border-top:1px solid #eee;height:0.92rem;line-height:0.92rem;text-align:right;padding:0 0.3rem;background-color: #fff;}
|
||||
.public-total .money{color:#ff4c3c;}
|
||||
.pos-order-list .list .item .operation .bnt {
|
||||
font-size: 0.28rem;
|
||||
color: #5c5c5c;
|
||||
width: 1.7rem;
|
||||
height: 0.6rem;
|
||||
border-radius: 0.3rem;
|
||||
border: 1px solid #bbb;
|
||||
text-align: center;
|
||||
line-height: 0.6rem;
|
||||
}
|
||||
.pos-order-list .list .item .operation .bnt ~ .bnt {
|
||||
margin-left: 0.14rem;
|
||||
}
|
||||
.public-total {
|
||||
font-size: 0.28rem;
|
||||
color: #282828;
|
||||
border-top: 1px solid #eee;
|
||||
height: 0.92rem;
|
||||
line-height: 0.92rem;
|
||||
text-align: right;
|
||||
padding: 0 0.3rem;
|
||||
background-color: #fff;
|
||||
}
|
||||
.public-total .money {
|
||||
color: #ff4c3c;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user