Skip to content

P
pica.cloud.web-education-admin
提交 7b07c3ea 编写于 作者: yi.li's avatar yi.li
浏览文件
操作

创建订单详情页及订单管理弹层

上级 449e5b80
隐藏空白字符变更
内嵌 并排
正在显示 包含 427 行增加 和 37 行删除
src/components/shop/change-info.vue
浏览文件 @ 7b07c3ea
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
v-model="changeInfoForm.area" v-model="changeInfoForm.area"
@change="handleChange" @change="handleChange"
filterable filterable
change-on-select style="width: 100%"
placeholder="请选择地区" placeholder="请选择地区"
></el-cascader> ></el-cascader>
</el-form-item> </el-form-item>
...@@ -70,8 +70,9 @@ ...@@ -70,8 +70,9 @@
props: { props: {
lazy: true, lazy: true,
lazyLoad(node, resolve) { lazyLoad(node, resolve) {
//第一个参数node为当前点击的节点，第二个resolve为数据加载完成的回调(必须调用)
const { level } = node; const { level } = node;
console.log("node", node); console.log("当前点击的节点node", node);
if (node.level == 1) { if (node.level == 1) {
let req = { let req = {
provinceId: node.data.value provinceId: node.data.value
...@@ -135,7 +136,7 @@ ...@@ -135,7 +136,7 @@
vm.GET("basic-data/position/provinces", req).then(res => { vm.GET("basic-data/position/provinces", req).then(res => {
closeLoading(vm); closeLoading(vm);
if (res.code == "000000") { if (res.code == "000000") {
vm.optionsRegion = operationData.setRegionOption2( vm.optionsRegion = operationData.setRegionOption3(
res.data.provinceList res.data.provinceList
); );
} }
......
src/components/shop/send-set-dialog.vue
浏览文件 @ 7b07c3ea
<template> <template>
<div class="order-manage-wrapper"> <div class="order-manage-wrapper" v-if="sendGoodsDialog">
<el-dialog <el-dialog
:title="sendSetFormData.dialogTitle" :title="dialogTitle"
:visible="sendGoodsDialog" :visible="sendGoodsDialog"
@close="cancelSendSet" @close="cancelSendSet"
width="600px" width="600px"
...@@ -17,23 +17,44 @@ ...@@ -17,23 +17,44 @@
<p>张三 15829738940</p> <p>张三 15829738940</p>
</div> </div>
</div> </div>
<p class="form-title">填写物流信息</p> <div v-if="dialogTitle == '发货设置'">
<el-form ref="sendSetForm" :model="sendSetForm" :rules="rules" label-width="75px" label-suffix=":"> <p class="form-title">填写物流信息</p>
<el-form-item label="快递公司" prop="name"> <el-form ref="sendSetForm" :model="sendSetForm" :rules="rules" label-width="75px" label-suffix=":">
<el-input type="text" v-model="sendSetForm.name" placeholder="请输入快递公司"></el-input> <el-form-item label="快递公司" prop="name">
</el-form-item> <el-input type="text" v-model="sendSetForm.name" placeholder="请输入快递公司"></el-input>
<el-form-item label="快递单号" prop="orderNum"> </el-form-item>
<el-input type="text" v-model="sendSetForm.orderNum" placeholder="请输入快递单号"></el-input> <el-form-item label="快递单号" prop="orderNum">
</el-form-item> <el-input type="text" v-model="sendSetForm.orderNum" placeholder="请输入快递单号"></el-input>
<el-form-item label="备注"> </el-form-item>
<el-input type="textarea" <el-form-item label="备注">
v-model="sendSetForm.content" <el-input type="textarea"
rows="5" v-model="sendSetForm.content"
placeholder="请输入备注内容" rows="5"
style="width: 100%;"></el-input> placeholder="请输入备注内容"
<span class="word-num" style="float: right">{{(sendSetForm.content).replace(/\s+/g,"").length}}/400</span> style="width: 100%;"></el-input>
</el-form-item> <span class="word-num" style="float: right">{{(sendSetForm.content).replace(/\s+/g,"").length}}/400</span>
</el-form> </el-form-item>
</el-form>
</div>
<div v-if="dialogTitle == '配送设置'">
<p class="form-title">填写配送员信息</p>
<el-form ref="sendSetForm" :model="sendSetForm" :rules="rules" label-width="75px" label-suffix=":">
<el-form-item label="姓名" prop="sendName">
<el-input type="text" v-model="sendSetForm.sendName" placeholder="请输入配送员姓名"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="sendPhone">
<el-input type="text" maxlength="11" v-model="sendSetForm.sendPhone" placeholder="请输入配送员手机号"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea"
v-model="sendSetForm.sendContent"
rows="5"
placeholder="请输入备注内容"
style="width: 100%;"></el-input>
<span class="word-num" style="float: right">{{(sendSetForm.sendContent).replace(/\s+/g,"").length}}/400</span>
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<!--<el-button size="small" @click="cancelSendSet">取 消</el-button>--> <!--<el-button size="small" @click="cancelSendSet">取 消</el-button>-->
<el-button size="small" type="primary" @click="submitSendSet">完成</el-button> <el-button size="small" type="primary" @click="submitSendSet">完成</el-button>
...@@ -45,12 +66,21 @@ ...@@ -45,12 +66,21 @@
<script> <script>
// import { openLoading, closeLoading } from "../../utils/utils"; // import { openLoading, closeLoading } from "../../utils/utils";
import ChangeInfo from "./change-info"; import ChangeInfo from "./change-info";
import { checkMobile } from '@/utils/patients/checkValid'
export default { export default {
components: { components: {
ChangeInfo ChangeInfo
}, },
props: { props: {
sendGoodsDialog: {
type: Boolean,
default: false,
},
dialogTitle: {
type: String,
default: ''
},
sendSetFormData: { sendSetFormData: {
type: Object, type: Object,
required: true, required: true,
...@@ -59,12 +89,15 @@ ...@@ -59,12 +89,15 @@
}, },
data(){ data(){
return{ return{
sendGoodsDialog: true,
sendSetForm: { sendSetForm: {
name: '', name: '',
orderNum: '', orderNum: '',
content: '', content: '',
sendName: '',
sendPhone: '',
sendContent: '',
}, },
showContent: 0,
showChangeInfo: false, showChangeInfo: false,
rules: { rules: {
name: [ name: [
...@@ -73,19 +106,40 @@ ...@@ -73,19 +106,40 @@
orderNum: [ orderNum: [
{ required: true, message: '请输入快递单号', trigger: "blur"}, { required: true, message: '请输入快递单号', trigger: "blur"},
], ],
sendName: [
{ required: true, message: '请输入配送员姓名', trigger: "blur"},
],
sendPhone: [
{ required: true, message: '请输入配送员手机号', trigger: "blur"},
{validator: checkMobile, trigger: ['change','blur']}
],
}, },
} }
}, },
created() { created() {
}, },
mounted() {
},
watch: {},
methods: { methods: {
//发货 //发货
cancelSendSet() { cancelSendSet() {
this.$emit('closeSendSet',{type: 1}) this.$emit('closeSendSet',{type: 1})
}, },
submitSendSet() { submitSendSet() {
this.$emit('closeSendSet',{type: 2}) this.$refs.sendSetForm.validate((valid) => {
if (valid) {
// this.submit();
this.$message.success('操作成功')
this.$emit('closeSendSet',{type: 2})
} else {
console.log('error submit!!');
return false;
}
})
}, },
//修改买家收货信息 //修改买家收货信息
changeInfo() { changeInfo() {
......
src/router/router.js
浏览文件 @ 7b07c3ea
...@@ -66,6 +66,7 @@ const createShop = r => require.ensure([], () => r(require('../views/shop/create ...@@ -66,6 +66,7 @@ const createShop = r => require.ensure([], () => r(require('../views/shop/create
const goodsManage = r => require.ensure([], () => r(require('../views/goods/goods-manage.vue')), 'goods-manage') const goodsManage = r => require.ensure([], () => r(require('../views/goods/goods-manage.vue')), 'goods-manage')
const createGood = r => require.ensure([], () => r(require('../views/goods/create-good.vue')), 'create-good') const createGood = r => require.ensure([], () => r(require('../views/goods/create-good.vue')), 'create-good')
const orderManage = r => require.ensure([], () => r(require('../views/goods/order-manage.vue')), 'order-manage') const orderManage = r => require.ensure([], () => r(require('../views/goods/order-manage.vue')), 'order-manage')
const orderDetail = r => require.ensure([], () => r(require('../views/goods/order-detail.vue')), 'order-detail')
export default [{ export default [{
...@@ -281,6 +282,10 @@ export default [{ ...@@ -281,6 +282,10 @@ export default [{
path: '/create-good', path: '/create-good',
component: createGood, component: createGood,
}, },
{
path: '/order-detail',
component: orderDetail,
},
// { // {
......
src/utils/shop/index.js
浏览文件 @ 7b07c3ea
...@@ -15,12 +15,12 @@ export const saveStore = (params) => { ...@@ -15,12 +15,12 @@ export const saveStore = (params) => {
}) })
}; };
export const queryStoreInfo = (storeId) => { export const queryStore = (params) => {
return fetch({ return fetch({
headers, headers,
url: getBaseUrl(`store/query?storeId=${storeId}`), url: getBaseUrl(`store/query`),
method: 'get', method: 'get',
// params: params, data: params,
description: '查询单个店铺信息', description: '查询店铺信息',
}) })
}; };
\ No newline at end of file
src/views/goods/order-detail.vue 0 → 100644
浏览文件 @ 7b07c3ea
<template>
<div class="order-detail-wrapper">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" :curmbThird="curmbThird" :jumPathThird="jumPathThird"></bread-crumb>
<div class="order-detail-content screenSet" id="screenSet">
<div class="header-title">订单详情</div>
<div class="detail-all-info">
<div class="trade-status" v-if="orderStatus == 1"><img src="../../assets/image/order/order_status1.png"/>交易成功</div>
<div class="trade-status" v-if="orderStatus == 2"><img src="../../assets/image/order/order_status2.png"/>已发货</div>
<div class="trade-status" v-if="orderStatus == 3"><img src="../../assets/image/order/order_status3.png"/>待发货</div>
<div class="trade-status" v-if="orderStatus == 4"><img src="../../assets/image/order/order_status4.png"/>待支付</div>
<div class="trade-status" v-if="orderStatus == 5"><img src="../../assets/image/order/order_status5.png"/>交易关闭</div>
<div class="trade-info">
<el-card class="left-card">
<div slot="header" class="clearfix">
<span>物流信息</span>
</div>
<div>
<p class="trade-status1">
<i class="el-icon-truck" style="font-size: 18px"></i>
<span class="send-status">已发货</span>
</p>
<p>收货地址：上海市浦东新区花木路世纪大厦22楼，张三，13273896478</p>
<p>物流公司：申通快递</p>
<p>快递单号：14792837492875</p>
<p>备注：是是是背部我of我那飞机我饿发窘</p>
</div>
</el-card>
<el-card class="right-card">
<div slot="header" class="clearfix">
<span>订单信息</span>
</div>
<div>
<p>订单编号：12579284048</p>
<p>下单时间：2020-03-20 13:36:28</p>
<p>支付方式：微信支付</p>
<p>支付时间：2020-03-20 13:36:28</p>
<p>发货时间：2020-03-20 13:36:28</p>
<p>成交时间：2020-03-20 13:36:28</p>
</div>
</el-card>
</div>
<el-table :data="tableData" border class="item-table" style="width: 100%;margin-top: 30px;">
<el-table-column prop="name" label="商品名称" min-width="100" align="center"></el-table-column>
<el-table-column prop="guige" label="规格" min-width="100" align="center">
<!--<template slot-scope="scope">-->
<!--<span>{{ scope.row.type | dynamicFlagStatus }}</span>-->
<!--</template>-->
</el-table-column>
<el-table-column prop="num" label="数量" min-width="100" align="center">
<template slot-scope="scope">
<span>×{{ scope.row.num }}</span>
</template>
</el-table-column>
<el-table-column prop="price" label="单价" min-width="100" align="center">
<template slot-scope="scope">
<span>￥{{ scope.row.price }}</span>
</template>
</el-table-column>
<el-table-column prop="status" label="状态" min-width="100" align="center">
<template slot-scope="scope">
<span>{{ scope.row.status | rangeStatus }}</span>
</template>
</el-table-column>
</el-table>
<div class="total-set">
<p><span>商品总额：</span><span>￥180.00</span></p>
<p><span>优惠：</span><span>￥10.00</span></p>
<p class="total-price"><span>实付：</span><span>￥170.00</span></p>
</div>
</div>
</div>
</div>
</template>
<script>
// import { openLoading, closeLoading } from "../../utils/utils";
import BreadCrumb from "@/components/breadcrumb.vue";
export default {
components: {
BreadCrumb
},
data(){
return{
curmbFirst: '商铺管理',
curmbSecond: '订单管理',
jumPathThird: '/order-manage',
curmbThird: '订单详情',
orderStatus: 1,
tableData: [
{
name: '阿司匹林',
guige: '50mg*20粒*盒',
num: '2',
price: '27',
status: 1,
}
],
}
},
created() {
},
methods: {
},
}
</script>
<style lang="scss">
.order-detail-wrapper{
.order-detail-content{
background: #fff;
padding: 10px;
.header-title{
padding: 10px 12px;
font-size: 13px;
color: #449284;
border-bottom: 1px solid #efefef;
}
.detail-all-info{
.trade-status{
display: flex;
align-items: center;
justify-content: center;
padding: 30px 0;
text-align: center;
font-size: 24px;
img{
width: 25px;
height: 25px;
margin-right: 15px;
}
.set-icon{
color: #449284;
font-size: 28px;
margin-right: 10px;
}
}
.trade-info{
width: 100%;
box-sizing: border-box;
display: flex;
font-size: 13px;
justify-content: space-between;
.left-card{
width: 69%;
display: inline-block;
margin-right: 2%;
.trade-status1{
padding-bottom: 5px;
display: flex;
align-items: center;
.send-status{
margin-left: 10px;
display: inline-block;
}
}
}
.right-card{
width: 28%;
display: inline-block;
}
.left-card, .right-card{
p{
color: #838683;
line-height: 22px;
}
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
}
.total-set{
text-align: right;
margin-top: 10px;
p{
font-size: 13px;
color: #999999;
line-height: 24px;
span:first-child{
display: inline-block;
width: 72px;
text-align: left;
}
span:last-child{
display: inline-block;
width: 90px;
}
}
.total-price{
font-size: 15px;
color: #333333;
margin-top: 5px;
}
}
}
}
.el-button--text{
color: #449284;
font-size: 14px;
&::after{
content: '';
position: relative;
height: 14px;
/*border-right: 1px solid #EBEEF5;*/
border-right: 1px solid #aaaaaa;
padding-right: 10px;
}
&:last-of-type{
&::after{
content: '';
position: relative;
width: 1px;
height: 14px;
border-right: none;
}
}
}
}
</style>
src/views/goods/order-manage.vue
浏览文件 @ 7b07c3ea
...@@ -143,10 +143,44 @@ ...@@ -143,10 +143,44 @@
</span> </span>
</el-dialog> </el-dialog>
<send-set-dialog <send-set-dialog
v-if="sendGoodsDialog" :sendGoodsDialog="sendGoodsDialog"
:dialogTitle="dialogTitle"
:sendSetFormData="sendSetForm" :sendSetFormData="sendSetForm"
@closeSendSet="closeSendSet"> @closeSendSet="closeSendSet">
</send-set-dialog> </send-set-dialog>
<el-dialog
title="查看物流"
:visible="viewLogisticsDialog"
@close="cancelView"
:show-close="false"
width="600px"
center>
<div class="view-content">
<i class="el-icon-truck" style="font-size: 18px"></i><span class="send-status">已发货</span>
<span class="view-number">{{logisticeInfo}}</span>
<el-button type="text" @click="copyTxt">复制</el-button>
</div>
<input type="text" id="copyInput" class="hidden-input" />
<span slot="footer" class="dialog-footer">
<el-button size="small" type="primary" @click="cancelView">我知道了</el-button>
</span>
</el-dialog>
<el-dialog
title=""
:visible="disCompleteDialog"
@close="cancelDis"
:show-close="false"
width="600px"
center>
<div class="view-content">
<p class="center-title">确认配送完成吗？</p>
<p class="center-subtitle">请确认线下已将商品送达</p>
</div>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="cancelDis">取消</el-button>
<el-button size="small" type="primary" @click="submitDisComplete">配送完成</el-button>
</span>
</el-dialog>
</div> </div>
</div> </div>
</template> </template>
...@@ -201,12 +235,15 @@ ...@@ -201,12 +235,15 @@
updatePrice: '', updatePrice: '',
}, },
sendGoodsDialog: false, sendGoodsDialog: false,
dialogTitle: '',
sendSetForm: { sendSetForm: {
name: '', name: '',
orderNum: '', orderNum: '',
content: '', content: '',
dialogTitle: '',
}, },
viewLogisticsDialog: false,
logisticeInfo: '申通快递 1234567890',
disCompleteDialog: false,
rules: { rules: {
name: [ name: [
{ required: true, message: '请输入快递公司', trigger: "blur"}, { required: true, message: '请输入快递公司', trigger: "blur"},
...@@ -295,7 +332,7 @@ ...@@ -295,7 +332,7 @@
//发货 //发货
sendGoods(row) { sendGoods(row) {
this.sendGoodsDialog = true; this.sendGoodsDialog = true;
this.sendSetForm.dialogTitle = '发货配置'; this.dialogTitle = '发货设置';
}, },
closeSendSet(val) { closeSendSet(val) {
console.log('关闭时传递参数',val) console.log('关闭时传递参数',val)
...@@ -306,17 +343,62 @@ ...@@ -306,17 +343,62 @@
this.sendGoodsDialog = false; this.sendGoodsDialog = false;
}, },
//配送 //配送
distribute(row) {}, distribute(row) {
this.sendGoodsDialog = true;
this.dialogTitle = '配送设置';
},
//查看物流 //查看物流
viewLogistics(row) {}, viewLogistics(row) {
this.viewLogisticsDialog = true;
},
cancelView() {
this.viewLogisticsDialog = false;
},
copyTxt() {
let txt = document.getElementById("copyInput");
txt.value = this.logisticeInfo;
// if (navigator.userAgent.match(/(iPhone|iPod|iPad|Mac);?/i)) {
if (navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") < 1) {
var el = document.createElement('input');
el.value = txt.value;//要复制的内容
el.style.opacity = '0';
document.body.appendChild(el);
var editable = el.contentEditable;
var readOnly = el.readOnly;
el.contentEditable = true;
el.readOnly = false;
const range = document.createRange();
range.selectNodeContents(el);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
el.setSelectionRange(0, 999999);
el.contentEditable = editable;
el.readOnly = readOnly;
var ret = document.execCommand('copy');
el.blur();
} else {
txt.select(); //选择对象
document.execCommand("copy");
}
this.$message.success('复制成功');
},
//配送完成 //配送完成
distributeComplete(row) {}, distributeComplete(row) {
this.disCompleteDialog = true;
},
cancelDis() {
this.disCompleteDialog = false;
},
submitDisComplete() {
this.disCompleteDialog = false;
},
//查看详情 //查看详情
goDetail(row) { goDetail(row) {
this.$router.push({ this.$router.push({
path: `/order-detail`, path: `/order-detail`,
query:{ query:{
storeId: row.orderId, // storeId: row.orderId,
} }
}) })
}, },
...@@ -367,4 +449,26 @@ ...@@ -367,4 +449,26 @@
color: #449284; color: #449284;
} }
.view-content{
.send-status{
margin-left: 5px;
}
.view-number{
color: #999999;
margin-left: 15px;
margin-right: 15px;
}
.center-title{
text-align: center;
}
.center-subtitle{
text-align: center;
font-size: 13px;
margin-top: 10px;
color: #999999;
}
}
.hidden-input {
height: 0;
}
</style> </style>
src/views/shop/create-shop.vue
浏览文件 @ 7b07c3ea
...@@ -408,7 +408,7 @@ ...@@ -408,7 +408,7 @@
import { openLoading, closeLoading } from "../../utils/utils"; import { openLoading, closeLoading } from "../../utils/utils";
import { doUpload, getFilePath } from "../../utils/qiniu-util"; import { doUpload, getFilePath } from "../../utils/qiniu-util";
import Cropper from '@/components/common/cropper.vue' import Cropper from '@/components/common/cropper.vue'
import { saveStore, queryStoreInfo } from '@/utils/shop'; import { saveStore, queryStore } from '@/utils/shop';
export default { export default {
components: { components: {
BreadCrumb, BreadCrumb,
...@@ -542,7 +542,10 @@ ...@@ -542,7 +542,10 @@
}, },
methods: { methods: {
initInfo() { initInfo() {
queryStoreInfo(this.formData.storeId).then(res => { let req = {
};
queryStore(req).then(res => {
if (res.code == '000000') { if (res.code == '000000') {
}else { }else {
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或