Skip to content
GitLab
Commit 9aa04b89 authored by Junling Bu's avatar Junling Bu
Browse files

chore[litemall-vue]: 调整订单页面

parent 731ccd0c
Hide whitespace changes
Inline Side-by-side
litemall-vue/src/views/order/orderDetail/bottom-goods-info.vue deleted 100755 → 0
View file @ 731ccd0c
<template>
<div class="order-goods">
<van-card
v-for="item in goodsInfo.orderGoods"
:key="item.id"
:title="item.goodsName"
desc="暂无描述"
:num="item.number"
:price="item.price +'.00'"
:thumb="item.picUrl"
></van-card>
<van-cell-group>
<!-- <van-field v-model="remark" placeholder="请输入备注" label="订单备注"> -->
<!-- <template slot="icon">{{remark.length}}/50</template> -->
<!-- </van-field> -->
<van-cell title="商品金额">
<span class="red">{{goodsInfo.orderInfo.goodsPrice * 100 | yuan}}</span>
</van-cell>
<van-cell title="邮费" :value="goodsInfo.orderInfo.freightPrice "></van-cell>
<!-- <van-cell title="税费" value="¥8.96"></van-cell> -->
<!-- <van-cell title="优惠券">
<span class="red">-{{ goodsInfo.orderInfo.xxx * 100 || 0 | yuan}}</span>
</van-cell>-->
</van-cell-group>
</div>
</template>
<script>
import { Card, Field } from 'vant';
export default {
name: 'bottom-goods-info',
props: {
goodsInfo: {
type: Object,
default: () => ({})
}
},
data() {
return {
remark: ''
// goodsInfo: {}
};
},
created() {},
methods: {
// async init() {
// let { data } = await this.$reqGet(
// '/wx/cart/checkout?cartId=0&addressId=0&couponId=0&grouponRulesId=0'
// );
// debugger;
// this.goodsInfo = data.data;
// }
},
components: {
[Card.name]: Card,
[Field.name]: Field
}
};
</script>
<style lang="scss" scoped>
.order-goods {
background-color: #fff;
}
</style>
litemall-vue/src/views/order/orderDetail/index.vue
View file @ 9aa04b89
<template>
<div class="place_order_entity">
<top-user-info :goodsInfo="goodsInfo" style="margin-bottom: 20px;"/>
<bottom-goods-info :goodsInfo="goodsInfo"/>
<van-cell-group style="margin-top: 20px;">
<van-cell title="下单时间">
<span>{{goodsInfo.orderInfo.addTime }}</span>
</van-cell>
<van-cell title="订单编号">
<span>{{goodsInfo.orderInfo.orderSn }}</span>
</van-cell>
<van-cell>
<template slot="title">
<span class="custom-text">实付款：</span>
<span class="red">{{goodsInfo.orderInfo.actualPrice * 100 | yuan}}</span>
</template>
<!-- 订单动作 -->
<van-button
v-if="getStatus() !== ''"
size="small"
@click="orderAction"
style=" float:right"
type="danger"
>{{getCurrentButtonText()}}</van-button>
<!-- 未付款的时候价格取消的动作 -->
<van-button
size="small"
v-if="getStatus() === 'pay'"
@click="cancelOrder"
style=" float:right"
type="danger"
>取消订单</van-button>
</van-cell>
</van-cell-group>
<van-cell-group v-if="showExp" style="margin-top: 20px;">
<van-cell title="快递公司">
<span>{{goodsInfo.orderInfo.expCode }}</span>
</van-cell>
<van-cell title="快递编号">
<span>{{goodsInfo.orderInfo.expNo }}</span>
</van-cell>
</van-cell-group>
<!-- <van-button @click="cancelOrder" style=" position: absolute;bottom: 4px;z-index: 1000;" type="danger">取消订单</van-button> -->
<!-- <van-submit-bar
v-if="showSubmit()"
:price="goodsInfo.orderInfo.actualPrice*100"
label="总计："
buttonText="支付"
:loading="isSubmit"
:disabled="isDisabled"
@submit="onSubmit"
></van-submit-bar>-->
</div>
</template>
<script>
import topUserInfo from './top-user-info';
import bottomGoodsInfo from './bottom-goods-info';
import { SubmitBar, Button, Cell, CellGroup, Dialog } from 'vant';
import _ from 'lodash';
export default {
data() {
return {
isSubmit: false,
isDisabled: false,
goodsInfo: {}
};
},
created() {
this.init();
},
methods: {
getStatus() {
let options = this.goodsInfo.orderInfo.handleOption;
let current_allow_option = '';
_.each(options, (v, k) => {
if (v) current_allow_option = k;
});
return current_allow_option;
},
/**\
* cancel: false
comment: false
confirm: false
delete: true
pay: false
rebuy: false
refund: false
*/
showExp() {
return _.has(goodsInfo.orderInfo, 'expNo');
},
getCurrentButtonText() {
let option = this.getStatus();
if (option === 'cancel') return '取消订单';
if (option === 'delete') return '删除订单';
if (option === 'confirm') return '确认收货';
if (option === 'pay') return '支付订单';
if (option === 'rebuy') return '删除订单';
if (option === 'refund') return '申请退款';
if (option === 'comment') return '评价';
},
showSubmit() {
if (this.getStatus() === 'refund') {
return false;
}
},
async orderAction() {
let option = this.getStatus();
if (option === 'cancel') {
this.cancelOrder();
}
if (option === 'confirm') {
await Dialog.confirm({
message: '确定收货？'
}).then(() => {
this.doAction(option);
});
}
if (option === 'refund') {
await Dialog.confirm({
message: '确定要取消此订单？'
}).then(() => {
this.doAction(option);
});
}
if (option === 'rebuy') {
await Dialog.confirm({
message: '确定要删除此订单？'
}).then(() => {
this.doAction('delete');
});
}
if (option === 'pay') {
this.doAction('prepay', false);
}
// if (option === 'pay')
// if (option === 'rebuy')
// if (option === 'refund')
// if (option === 'comment')
},
async doAction(status, skip) {
let { data } = await this.$reqPost(`/wx/order/${status}`, {
orderId: this.$route.query.orderId
});
if (skip != false) {
if (data.errno == 0) this.$router.go(-1);
}
if (status == 'prepay') {
function onBridgeReady() {
console.log(JSON.stringify(data));
// var timeStamp = Date.parse(new Date());
// var packageV = 'prepay_id=' + data.data.prepay_id;
var params = {
appId: data.data.appId, //公众号名称，由商户传入
timeStamp: data.data.timeStamp, //时间戳，自1970年以来的秒数
nonceStr: data.data.nonceStr, //随机串
package: data.data.packageValue,
signType: data.data.signType, //微信签名方式：
paySign: data.data.paySign //微信签名
};
console.log(params);
WeixinJSBridge.invoke('getBrandWCPayRequest', params, function(res) {
console.log(JSON.stringify(res));
if (res.err_msg == 'get_brand_wcpay_request:ok') {
// 使用以上方式判断前端返回,微信团队郑重提示：
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
that.$router.push({
name: 'paymentStatus',
params: {
status: 'success'
}
});
}
});
}
if (typeof WeixinJSBridge == 'undefined') {
if (document.addEventListener) {
document.addEventListener(
'WeixinJSBridgeReady',
onBridgeReady,
false
);
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
} else {
onBridgeReady();
}
}
},
async cancelOrder() {
await Dialog.confirm({
message: '确定取消订单？'
}).then(() => {
let { data } = this.$reqPost('/wx/order/cancel', {
orderId: this.$route.query.orderId
});
// if (data.errno == 0)
this.$router.go(-1);
});
},
async delOrder() {
let { data } = await this.$reqPost('/wx/order/delete', {
orderId: this.$route.query.orderId
});
if (data.errno == 0) this.$router.go(-1);
},
async onSubmit() {
this.isSubmit = true;
let cartId = this.$route.params.cartId;
let { data } = await this.$reqPost('/wx/order/submit', {
addressId: this.goodsInfo.addressId,
cartId: cartId || 0,
couponId: 0,
grouponLinkId: 0,
grouponRulesId: 0,
message: ''
});
this.$router.replace({ name: 'payment' });
},
async init() {
// let cartId = this.$route.params.cartId;
let orderId = this.$route.query.orderId;
let { data } = await this.$reqGet(
`/wx/order/detail?orderId=${orderId}`
);
this.goodsInfo = data.data;
}
},
components: {
[Dialog.name]: Dialog,
[CellGroup.name]: CellGroup,
[Cell.name]: Cell,
[Button.name]: Button,
[SubmitBar.name]: SubmitBar,
[topUserInfo.name]: topUserInfo,
[bottomGoodsInfo.name]: bottomGoodsInfo
}
};
</script>
<style lang="scss" scoped>
.place_order_entity {
padding-bottom: 70px;
}
</style>
<template>
<div class="place_order_entity">
<div class="order-goods">
<van-card
v-for="item in orderGoods"
:key="item.id"
:title="item.goodsName"
desc="暂无描述"
:num="item.number"
:price="item.price +'.00'"
:thumb="item.picUrl"
></van-card>
<van-cell-group>
<van-cell title="商品金额">
<span class="red">{{orderInfo.goodsPrice * 100 | yuan}}</span>
</van-cell>
<van-cell title="邮费" :value="orderInfo.freightPrice "></van-cell>
</van-cell-group>
</div>
<van-cell-group style="margin-top: 20px;">
<van-cell
icon="dingwei"
:title="`${orderInfo.consignee} ${orderInfo.mobile}`"
:label="orderInfo.address"
/>
</van-cell-group>
<van-cell-group style="margin-top: 20px;">
<van-cell title="下单时间">
<span>{{orderInfo.addTime }}</span>
</van-cell>
<van-cell title="订单编号">
<span>{{orderInfo.orderSn }}</span>
</van-cell>
<van-cell title="订单备注">
<span>{{orderInfo.remark }}</span>
</van-cell>
<van-cell>
<template slot="title">
<span class="custom-text">实付款：</span>
<span class="red">{{orderInfo.actualPrice * 100 | yuan}}</span>
</template>
<!-- 订单动作 -->
<van-button
size="small"
v-if="handleOption.cancel"
@click="cancelOrder"
style=" float:right"
round type="danger"
>取消订单</van-button>
<van-button
size="small"
v-if="handleOption.pay"
@click="payOrder"
style=" float:right"
round type="danger"
>去支付</van-button>
<van-button
size="small"
v-if="handleOption.delete"
@click="deleteOrder"
style=" float:right"
type="danger"
>删除订单</van-button>
<van-button
size="small"
v-if="handleOption.confirm"
@click="confirmlOrder"
style=" float:right"
type="danger"
>确认收货</van-button>
<van-button
size="small"
v-if="handleOption.refund"
@click="refundOrder"
style=" float:right"
type="danger"
>退款</van-button>
</van-cell>
</van-cell-group>
<van-cell-group v-if="showExp()" style="margin-top: 20px;">
<van-cell title="快递公司">
<span>{{orderInfo.expCode }}</span>
</van-cell>
<van-cell title="快递编号">
<span>{{orderInfo.expNo }}</span>
</van-cell>
</van-cell-group>
</div>
</template>
<script>
import { Card, Field, SubmitBar, Button, Cell, CellGroup, Dialog } from 'vant';
import _ from 'lodash';
import { orderDetail } from '@/api/api';
export default {
data() {
return {
isSubmit: false,
isDisabled: false,
orderInfo: {},
orderGoods: [],
handleOption: {},
expressInfo: {}
};
},
created() {
this.init();
},
methods: {
showExp() {
return _.has(this.orderInfo, 'expNo');
},
confirmOrder(){
Dialog.confirm({
message: '确定收货？'
}).then(() => {
});
},
refundOrder(){
Dialog.confirm({
message: '确定要取消此订单？'
}).then(() => {
});
},
deleteOrder(){
},
payOrder(){
},
cancelOrder(){
Dialog.confirm({
message: '确定取消此订单？'
}).then(() => {
// this.$router.go(-1);
});
},
init() {
let orderId = this.$route.query.orderId;
orderDetail({ orderId: orderId }).then(res => {
var data = res.data.data;
this.orderInfo = data.orderInfo;
this.orderGoods = data.orderGoods;
this.handleOption = data.orderInfo.handleOption;
this.expressInfo = data.expressInfo;
});
}
},
components: {
[Dialog.name]: Dialog,
[CellGroup.name]: CellGroup,
[Cell.name]: Cell,
[Button.name]: Button,
[SubmitBar.name]: SubmitBar,
[Card.name]: Card,
[Field.name]: Field
}
};
</script>
<style lang="scss" scoped>
.place_order_entity {
padding-bottom: 70px;
}
</style>
litemall-vue/src/views/order/orderDetail/top-user-info.vue deleted 100755 → 0
View file @ 731ccd0c
<template>
<van-cell-group>
<van-cell
icon="dingwei"
isLink
:title="`${goodsInfo.orderInfo.consignee} ${goodsInfo.orderInfo.mobile}`"
:label="goodsInfo.orderInfo.address"
/>
<!-- <van-cell class="daodian" title="到店自提" label="浙江省 杭州市 西湖区 创新创业园">
<van-checkbox v-model="isDaoDian" slot="icon"></van-checkbox>
</van-cell>-->
<!-- <van-cell icon="id-card" title="张三" label="330327********1574" isLink/> -->
</van-cell-group>
</template>
<script>
import { Checkbox } from 'vant';
export default {
name: 'top-user-info',
props: {
goodsInfo: {
type: Object,
default: () => ({})
}
},
data() {
return {
isDaoDian: false
};
},
components: {
[Checkbox.name]: Checkbox
}
};
</script>
<style lang="scss">
.daodian {
.van-checkbox .van-icon-success {
height: 16px;
width: 16px;
font-size: $font-size-small;
&::before {
line-height: 16px;
}
}
.van-checkbox__input {
height: 16px;
}
.van-checkbox__label {
margin-left: 0;
}
.shop_address {
padding-left: 25px;
box-sizing: border-box;
}
}
</style>
litemall-vue/src/views/user/order-entity-list/index.vue
View file @ 9aa04b89
......@@ -120,8 +120,8 @@ export default {
},
toOrderDetail(id) {
this.$router.push({
name: `orderDetail`,
query: { cartId: 0, orderId: id }
name: 'orderDetail',
query: { orderId: id }
});
}
},
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment