|
|
@@ -0,0 +1,444 @@
|
|
|
+<template>
|
|
|
+ <div class="box-con">
|
|
|
+ <div class="box-con2">
|
|
|
+ <div class="box-tit">
|
|
|
+ <div>
|
|
|
+ <img
|
|
|
+ style="width:20px;height:20px;border-radius:50%;"
|
|
|
+ src="../static/imgs/img_touxiang.jpg"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <p>就爱吃馒头</p>
|
|
|
+ </div>
|
|
|
+ <span>{{ this.name }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="box-con-Cards" v-for="(item, index) in orderList" :key="index.id" @click="allorder">
|
|
|
+ <img :src="item.images" alt="" />
|
|
|
+ <div class="box-con-right">
|
|
|
+ <p class="box-con-tit">{{ item.caseName }}</p>
|
|
|
+ <div class="box-con-today">
|
|
|
+ <p>卡盒选号:{{ item.boxName }}</p>
|
|
|
+ </div>
|
|
|
+ <div class="box-con-money">
|
|
|
+ <div class="box-con-num">
|
|
|
+ <p>¥{{ item.money }}</p>
|
|
|
+ </div>
|
|
|
+ <p>×1</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="message">
|
|
|
+ <p>买家留言：</p>
|
|
|
+ <span>尽快发货，谢谢</span>
|
|
|
+ </div>
|
|
|
+ <div class="box-num">
|
|
|
+ <span>实际支付</span>
|
|
|
+ <span class="num">¥{{ all.total }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="box-bor"></div>
|
|
|
+ <div class="box-butm">
|
|
|
+ <div v-if="this.status == 'CREATED'" @click="cancel" class="box-but">取消订单</div>
|
|
|
+ <div v-if="this.status == 'CREATED'" @click="Buyers" class="box-but2">联系买家</div>
|
|
|
+ <div v-if="this.status == 'PAYED'" @click="logistics" class="box-but">查看物流</div>
|
|
|
+ <div v-if="this.status == 'PAYED'" @click="deliver" class="box-but3">立即发货</div>
|
|
|
+ <div v-if="this.status == 'SEND'" @click="logistics" class="box-but">查看物流</div>
|
|
|
+ <div v-if="this.status == 'SEND'" @click="Buyers" class="box-but3">联系买家</div>
|
|
|
+ <!-- <div v-if="this.status == 'COMPETED'" @click="sales" class="box-but">申请售后</div>
|
|
|
+ <div v-if="this.status == 'COMPETED'" @click="logistics" class="box-but3">查看物流</div>
|
|
|
+ <div v-if="this.status == 'CANCELED'" @click="deletes" class="box-but">删除订单</div>
|
|
|
+ <div v-if="this.status == 'CANCELED'" @click="again" class="box-but3">重新购买</div> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <van-popup :show="show" custom-style="background:transparent;border-radius: 12px 12px 0 0;" use-slot>
|
|
|
+ <div class="popup-con">
|
|
|
+ <div class="popup-top">快递详情</div>
|
|
|
+ <div>
|
|
|
+ <span>物流快递：{{ this.logisTics.expName }}</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>物流单号：{{ this.logisTics.number }}</span>
|
|
|
+ <span class="dialog-cv" @click="logisticCopy">复制</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <van-steps :steps="stepsList" direction="vertical">
|
|
|
+ <div>{{ stepsList.text }}</div>
|
|
|
+ <div>{{ stepsList.desc }}</div>
|
|
|
+ </van-steps>
|
|
|
+ <img
|
|
|
+ @click="logisticShow"
|
|
|
+ style="height:40px;width:40px;margin-left:150px;margin-top:30px"
|
|
|
+ src="../static/imgs/icon_tanchuang_close@3x.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ all: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {};
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ show: false,
|
|
|
+ stepsList: [],
|
|
|
+ logisTics: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ orderList() {
|
|
|
+ return this.all.orderBoxDTOS || [];
|
|
|
+ },
|
|
|
+ status() {
|
|
|
+ return this.all.status || '';
|
|
|
+ },
|
|
|
+ id() {
|
|
|
+ return this.all.orderInfoId || 0;
|
|
|
+ },
|
|
|
+ caseId() {
|
|
|
+ return this.all.caseId || 0;
|
|
|
+ },
|
|
|
+ name() {
|
|
|
+ if (this.all.status === 'CREATED') {
|
|
|
+ return '买家待支付';
|
|
|
+ }
|
|
|
+ if (this.status === 'CANCELED') {
|
|
|
+ return '已取消';
|
|
|
+ }
|
|
|
+ if (this.status === 'PAYED') {
|
|
|
+ return '待发货';
|
|
|
+ }
|
|
|
+ if (this.status === 'COMPETED') {
|
|
|
+ return '已完成';
|
|
|
+ }
|
|
|
+ if (this.status === 'SEND') {
|
|
|
+ return '买家待收货';
|
|
|
+ }
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ logisticShow() {
|
|
|
+ this.show = false;
|
|
|
+ },
|
|
|
+ logistics() {
|
|
|
+ this.showLoading();
|
|
|
+ // 查看物流
|
|
|
+ this.$http
|
|
|
+ .get('/orderInfo/checkLogistic', { orderInfoId: this.id })
|
|
|
+ .then(res => {
|
|
|
+ this.hideLoading();
|
|
|
+ this.logisTics = res.logistic.result;
|
|
|
+ let steps = [];
|
|
|
+ res.logistic.result.list.forEach(item => {
|
|
|
+ let newStep = {
|
|
|
+ desc: item.status,
|
|
|
+ text: item.time
|
|
|
+ };
|
|
|
+ steps.push(newStep);
|
|
|
+ });
|
|
|
+ this.stepsList = steps;
|
|
|
+ this.show = true;
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ this.hideLoading();
|
|
|
+ wx.showToast({
|
|
|
+ title: '暂无物流信息',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ allsellout() {
|
|
|
+ this.$emit('allsellout');
|
|
|
+ },
|
|
|
+ allorder() {
|
|
|
+ // this.navigateTo('/pages/orderdetails?id=' + this.id);
|
|
|
+ },
|
|
|
+ sales() {
|
|
|
+ wx.showToast({
|
|
|
+ title: '敬请开放',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ logisticCopy() {
|
|
|
+ wx.setClipboardData({
|
|
|
+ data: this.logisTics.number + '',
|
|
|
+ success(res) {
|
|
|
+ wx.getClipboardData({
|
|
|
+ success(res) {
|
|
|
+ wx.showToast({
|
|
|
+ title: '物流单号复制成功'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ Buyers() {
|
|
|
+ wx.showToast({
|
|
|
+ title: '敬请开放',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ cancel() {
|
|
|
+ wx.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '确定取消订单？',
|
|
|
+ success: res => {
|
|
|
+ if (res.confirm) {
|
|
|
+ this.$http.post('/orderInfo/cancel', { orderInfoId: this.id }).then(res => {
|
|
|
+ wx.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '订单已取消'
|
|
|
+ });
|
|
|
+ setTimeout(() => {
|
|
|
+ this.allsellout();
|
|
|
+ }, 1000);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ deletes() {
|
|
|
+ wx.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '确定删除订单？',
|
|
|
+ success: res => {
|
|
|
+ if (res.confirm) {
|
|
|
+ this.$http.post('orderInfo/delete', { orderInfoId: this.id }).then(res => {
|
|
|
+ wx.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '订单已删除'
|
|
|
+ });
|
|
|
+ setTimeout(() => {
|
|
|
+ this.allsellout();
|
|
|
+ }, 1000);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ deliver() {
|
|
|
+ wx.showToast({
|
|
|
+ title: '敬请开放',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+/deep/ .van-step__circle-container {
|
|
|
+ height: 0;
|
|
|
+}
|
|
|
+/deep/ .van-steps {
|
|
|
+ height: 307px;
|
|
|
+ width: 334px;
|
|
|
+ overflow: auto !important;
|
|
|
+ border-radius: 0 0 12px 12px;
|
|
|
+}
|
|
|
+.box-con {
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 12px;
|
|
|
+ margin: 20px 20px;
|
|
|
+ .popup-con {
|
|
|
+ padding: 12px 0 20px 9px;
|
|
|
+ background: #ffffff;
|
|
|
+ .popup-top {
|
|
|
+ height: 22px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 22px;
|
|
|
+ text-align: center;
|
|
|
+ padding: 50px 0 15px 0;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ height: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #1a1a1a;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ .dialog-cv {
|
|
|
+ width: 40px;
|
|
|
+ height: 20px;
|
|
|
+ border-radius: 2px;
|
|
|
+ border: 1px solid #c8c9cc;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #c8c9cc;
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-con2 {
|
|
|
+ margin: 0 16px;
|
|
|
+ .box-tit {
|
|
|
+ .flex();
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 16px 0 9px 0;
|
|
|
+ div {
|
|
|
+ .flex();
|
|
|
+ p {
|
|
|
+ height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 22px;
|
|
|
+ margin-left: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #ff6c00;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-con-Cards {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ height: 90px;
|
|
|
+ display: flex;
|
|
|
+ img {
|
|
|
+ width: 62px;
|
|
|
+ height: 90px;
|
|
|
+ border-radius: 6px;
|
|
|
+ }
|
|
|
+ .box-con-right {
|
|
|
+ width: 237px;
|
|
|
+ margin-left: 8px;
|
|
|
+ .box-con-tit {
|
|
|
+ height: 24px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-con-today {
|
|
|
+ .flex();
|
|
|
+ height: 30px;
|
|
|
+ background: #f5f7fa;
|
|
|
+ border-radius: 6px;
|
|
|
+ width: 142px;
|
|
|
+ margin: 4px 0 8px 0;
|
|
|
+ p {
|
|
|
+ height: 24px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #303133;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-con-money {
|
|
|
+ .flex();
|
|
|
+ justify-content: space-between;
|
|
|
+ .box-con-num {
|
|
|
+ .flex();
|
|
|
+ img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: normal;
|
|
|
+ color: #c8c9cc;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ height: 24px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #c8c9cc;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-num {
|
|
|
+ padding-top: 20px;
|
|
|
+ text-align: right;
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .num {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #f42202;
|
|
|
+ padding-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-bor {
|
|
|
+ width: 303px;
|
|
|
+ height: 1px;
|
|
|
+ background: #f5f7fa;
|
|
|
+ margin: 19px 0 16px 0;
|
|
|
+ }
|
|
|
+ .box-butm {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ padding-bottom: 16px;
|
|
|
+ .box-but {
|
|
|
+ width: 80px;
|
|
|
+ height: 36px;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid #c8c9cc;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #c8c9cc;
|
|
|
+ line-height: 36px;
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+ .box-but2 {
|
|
|
+ width: 80px;
|
|
|
+ height: 36px;
|
|
|
+ background: #ff6c00;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 36px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .box-but3 {
|
|
|
+ width: 80px;
|
|
|
+ height: 36px;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid #ff6c00;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ff6c00;
|
|
|
+ line-height: 36px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .message {
|
|
|
+ .flex();
|
|
|
+ p {
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ff6c00;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #303133;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
xuqiang-97
