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> <template>
<div class="place_order_entity"> <div class="place_order_entity">
<top-user-info :goodsInfo="goodsInfo" style="margin-bottom: 20px;"/> <div class="order-goods">
<van-card
<bottom-goods-info :goodsInfo="goodsInfo"/> v-for="item in orderGoods"
:key="item.id"
<van-cell-group style="margin-top: 20px;"> :title="item.goodsName"
<van-cell title="下单时间"> desc="暂无描述"
<span>{{goodsInfo.orderInfo.addTime }}</span> :num="item.number"
</van-cell> :price="item.price +'.00'"
<van-cell title="订单编号"> :thumb="item.picUrl"
<span>{{goodsInfo.orderInfo.orderSn }}</span> ></van-card>
</van-cell>
<van-cell-group>
<van-cell> <van-cell title="商品金额">
<template slot="title"> <span class="red">{{orderInfo.goodsPrice * 100 | yuan}}</span>
<span class="custom-text">实付款：</span> </van-cell>
<span class="red">{{goodsInfo.orderInfo.actualPrice * 100 | yuan}}</span> <van-cell title="邮费" :value="orderInfo.freightPrice "></van-cell>
</template> </van-cell-group>
<!-- 订单动作 --> </div>
<van-button
v-if="getStatus() !== ''" <van-cell-group style="margin-top: 20px;">
size="small" <van-cell
@click="orderAction" icon="dingwei"
style=" float:right" :title="`${orderInfo.consignee} ${orderInfo.mobile}`"
type="danger" :label="orderInfo.address"
>{{getCurrentButtonText()}}</van-button> />
<!-- 未付款的时候价格取消的动作 --> </van-cell-group>
<van-button
size="small" <van-cell-group style="margin-top: 20px;">
v-if="getStatus() === 'pay'" <van-cell title="下单时间">
@click="cancelOrder" <span>{{orderInfo.addTime }}</span>
style=" float:right" </van-cell>
type="danger" <van-cell title="订单编号">
>取消订单</van-button> <span>{{orderInfo.orderSn }}</span>
</van-cell> </van-cell>
</van-cell-group> <van-cell title="订单备注">
<span>{{orderInfo.remark }}</span>
<van-cell-group v-if="showExp" style="margin-top: 20px;"> </van-cell>
<van-cell title="快递公司">
<span>{{goodsInfo.orderInfo.expCode }}</span> <van-cell>
</van-cell> <template slot="title">
<van-cell title="快递编号"> <span class="custom-text">实付款：</span>
<span>{{goodsInfo.orderInfo.expNo }}</span> <span class="red">{{orderInfo.actualPrice * 100 | yuan}}</span>
</van-cell> </template>
</van-cell-group> <!-- 订单动作 -->
<!-- <van-button @click="cancelOrder" style=" position: absolute;bottom: 4px;z-index: 1000;" type="danger">取消订单</van-button> --> <van-button
<!-- <van-submit-bar size="small"
v-if="showSubmit()" v-if="handleOption.cancel"
:price="goodsInfo.orderInfo.actualPrice*100" @click="cancelOrder"
label="总计：" style=" float:right"
buttonText="支付" round type="danger"
:loading="isSubmit" >取消订单</van-button>
:disabled="isDisabled" <van-button
@submit="onSubmit" size="small"
></van-submit-bar>--> v-if="handleOption.pay"
</div> @click="payOrder"
</template> style=" float:right"
round type="danger"
<script> >去支付</van-button>
import topUserInfo from './top-user-info'; <van-button
import bottomGoodsInfo from './bottom-goods-info'; size="small"
import { SubmitBar, Button, Cell, CellGroup, Dialog } from 'vant'; v-if="handleOption.delete"
import _ from 'lodash'; @click="deleteOrder"
style=" float:right"
export default { type="danger"
data() { >删除订单</van-button>
return { <van-button
isSubmit: false, size="small"
isDisabled: false, v-if="handleOption.confirm"
goodsInfo: {} @click="confirmlOrder"
}; style=" float:right"
}, type="danger"
created() { >确认收货</van-button>
this.init(); <van-button
}, size="small"
v-if="handleOption.refund"
methods: { @click="refundOrder"
getStatus() { style=" float:right"
let options = this.goodsInfo.orderInfo.handleOption; type="danger"
let current_allow_option = ''; >退款</van-button>
_.each(options, (v, k) => { </van-cell>
if (v) current_allow_option = k; </van-cell-group>
});
return current_allow_option; <van-cell-group v-if="showExp()" style="margin-top: 20px;">
}, <van-cell title="快递公司">
/**\ <span>{{orderInfo.expCode }}</span>
* cancel: false </van-cell>
comment: false <van-cell title="快递编号">
confirm: false <span>{{orderInfo.expNo }}</span>
delete: true </van-cell>
pay: false </van-cell-group>
rebuy: false </div>
refund: false </template>
*/
showExp() { <script>
return _.has(goodsInfo.orderInfo, 'expNo'); import { Card, Field, SubmitBar, Button, Cell, CellGroup, Dialog } from 'vant';
}, import _ from 'lodash';
getCurrentButtonText() { import { orderDetail } from '@/api/api';
let option = this.getStatus();
if (option === 'cancel') return '取消订单'; export default {
if (option === 'delete') return '删除订单'; data() {
if (option === 'confirm') return '确认收货'; return {
if (option === 'pay') return '支付订单'; isSubmit: false,
if (option === 'rebuy') return '删除订单'; isDisabled: false,
if (option === 'refund') return '申请退款'; orderInfo: {},
if (option === 'comment') return '评价'; orderGoods: [],
}, handleOption: {},
showSubmit() { expressInfo: {}
if (this.getStatus() === 'refund') { };
return false; },
} created() {
}, this.init();
async orderAction() { },
let option = this.getStatus();
if (option === 'cancel') { methods: {
this.cancelOrder(); showExp() {
} return _.has(this.orderInfo, 'expNo');
if (option === 'confirm') { },
await Dialog.confirm({ confirmOrder(){
message: '确定收货？' Dialog.confirm({
}).then(() => { message: '确定收货？'
this.doAction(option); }).then(() => {
}); });
} },
if (option === 'refund') { refundOrder(){
await Dialog.confirm({ Dialog.confirm({
message: '确定要取消此订单？' message: '确定要取消此订单？'
}).then(() => { }).then(() => {
this.doAction(option); });
}); },
} deleteOrder(){
if (option === 'rebuy') {
await Dialog.confirm({ },
message: '确定要删除此订单？' payOrder(){
}).then(() => {
this.doAction('delete'); },
}); cancelOrder(){
} Dialog.confirm({
if (option === 'pay') { message: '确定取消此订单？'
this.doAction('prepay', false); }).then(() => {
} // this.$router.go(-1);
// if (option === 'pay') });
// if (option === 'rebuy') },
// if (option === 'refund') init() {
// if (option === 'comment') let orderId = this.$route.query.orderId;
}, orderDetail({ orderId: orderId }).then(res => {
async doAction(status, skip) { var data = res.data.data;
let { data } = await this.$reqPost(`/wx/order/${status}`, { this.orderInfo = data.orderInfo;
orderId: this.$route.query.orderId this.orderGoods = data.orderGoods;
}); this.handleOption = data.orderInfo.handleOption;
if (skip != false) { this.expressInfo = data.expressInfo;
if (data.errno == 0) this.$router.go(-1); });
} }
if (status == 'prepay') { },
function onBridgeReady() {
console.log(JSON.stringify(data)); components: {
// var timeStamp = Date.parse(new Date()); [Dialog.name]: Dialog,
// var packageV = 'prepay_id=' + data.data.prepay_id; [CellGroup.name]: CellGroup,
var params = { [Cell.name]: Cell,
appId: data.data.appId, //公众号名称，由商户传入 [Button.name]: Button,
timeStamp: data.data.timeStamp, //时间戳，自1970年以来的秒数 [SubmitBar.name]: SubmitBar,
nonceStr: data.data.nonceStr, //随机串 [Card.name]: Card,
package: data.data.packageValue, [Field.name]: Field
signType: data.data.signType, //微信签名方式： }
paySign: data.data.paySign //微信签名 };
}; </script>
console.log(params);
WeixinJSBridge.invoke('getBrandWCPayRequest', params, function(res) { <style lang="scss" scoped>
console.log(JSON.stringify(res)); .place_order_entity {
if (res.err_msg == 'get_brand_wcpay_request:ok') { padding-bottom: 70px;
// 使用以上方式判断前端返回,微信团队郑重提示： }
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。 </style>
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>
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 { ...@@ -120,8 +120,8 @@ export default {
}, },
toOrderDetail(id) { toOrderDetail(id) {
this.$router.push({ this.$router.push({
name: `orderDetail`, name: 'orderDetail',
query: { cartId: 0, orderId: id } 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