Skip to content

P
pica.cloud.web-education-admin
提交 bd300ef2 编写于 作者: changdi.hao's avatar changdi.hao
浏览文件
操作

用户申请售后流程：新增退货地址管理，物流公司和说明的ui

上级 18cb0dd4
显示空白字符变更
内嵌 并排
正在显示 包含 418 行增加 和 87 行删除
src/utils/base/baseApi.js 0 → 100644
浏览文件 @ bd300ef2
import fetch from "../fetch";
import { getBaseUrl } from "@/utils/index";
let headers = {
"Content-Type": "application/json;charset=UTF-8",
token: localStorage.getItem("storageToken"),
};
/*获取省份*/
export const getProvinces = () => {
return fetch({
headers,
url: getBaseUrl(`/basic-data/position/provinces`),
method: "get",
});
};
// /*获取市*/
export const getCities = (params) => {
return fetch({
headers,
url: getBaseUrl(`/basic-data/position/cities`),
method: "get",
params: params,
});
};
// /*获取区*/
export const getCounties = (params) => {
return fetch({
url: getBaseUrl(`/basic-data/position/counties`),
method: "get",
params: params,
});
};
src/views/shop/create-shop.vue
浏览文件 @ bd300ef2
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<div class="create-shop-content screenSet" id="screenSet"> <div class="create-shop-content screenSet" id="screenSet">
<el-row class="step-content"> <el-row class="step-content">
<el-col :span="20"> <el-col :span="20">
<p class="title">新建店铺</p> <p class="title">{{curmbSecond}}</p>
</el-col> </el-col>
<el-col :span="4" style="text-align: right"> <el-col :span="4" style="text-align: right">
<el-button <el-button
...@@ -498,7 +498,6 @@ ...@@ -498,7 +498,6 @@
</el-col> </el-col>
</div> </div>
</div> </div>
<div> <div>
<el-col :span="24"> <el-col :span="24">
<el-form-item <el-form-item
...@@ -514,8 +513,62 @@ ...@@ -514,8 +513,62 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</div> </div>
<el-form-item label="仓库地址管理" prop="warehouseAdress" class="required-label warehouseAdress-wrap">
<p class="warehouseAdress-tip">(该地址用于买家退货时退回地址，请准确填写)</p>
<el-button type="success" plain class="warehouseAdress-add" size="small" @click="createAdress">+新增地址</el-button>
<el-radio-group v-model="warehouseAdressRadio" class="warehouseAdress-list">
<el-radio :label="3" class="warehouseAdress-item">
<span>默认</span>
<span class="warehouseAdress-msg">王小丫</span>
<span class="warehouseAdress-msg">13889873821</span>
<span class="warehouseAdress-msg">上海市浦东新区兰花路333号世纪大厦22楼云鹊医疗科技有限公司</span>
<span class="warehouseAdress-do">
<span @click="createAdress(2)">编辑</span> ｜ <span @click="deleteAdress">删除</span>
</span>
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="退货支持的物流公司" class="required-label">
<el-radio-group v-model="formData.logisticsRadio" @change="changeLogisticsRadio">
<el-radio :label="1">无限制</el-radio>
<el-radio :label="2">有限制</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="物流公司名称" class="required-label" v-if="formData.logisticsRadio == 2">
<el-select
v-model="formData.logisticsCmp"
filterable
clearable
multiple
placeholder="选择物流公司"
@change="changeProvince"
>
<el-option
v-for="item in provincesList"
:key="item.provinceId"
:label="item.provinceName"
:value="item.provinceId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="退货物流说明">
<el-row>
<el-col :span="10">
<el-input
size="small"
v-model="formData.refundMsg"
placeholder="请输入退货物流说明"
maxlength="20"
style="width: 85%"
></el-input>
<span class="word-num">{{ formData.refundMsg.replace(/\s+/g, "").length }}/20</span>
</el-col>
</el-row>
<p class="p-tips"><i class="el-icon-warning-outline"></i>该文字会在云鹊医App买家退货处显示</p>
</el-form-item>
</el-form> </el-form>
<!-- 图片裁剪弹框 -->
<el-dialog <el-dialog
class="dialog-title-border-old" class="dialog-title-border-old"
title="图片裁剪" title="图片裁剪"
...@@ -534,6 +587,77 @@ ...@@ -534,6 +587,77 @@
/> />
</div> </div>
</el-dialog> </el-dialog>
<!-- 创建/编辑收货地址弹框 -->
<el-dialog :title="warehouseAdressFormTitle" :visible.sync="warehouseAdressFormVisible">
<el-form :model="warehouseAdressForm" :rules="warehouseAdressRules" ref="warehouseAdressForm">
<el-form-item label="收件人" label-width="70px" prop="name">
<el-input v-model="warehouseAdressForm.name" autocomplete="off" clear class="warehouseAdress-input" placeholder="请输入收货人姓名"></el-input>
</el-form-item>
<el-form-item label="联系方式" label-width="70px" prop="iphone">
<el-input v-model="warehouseAdressForm.iphone" autocomplete="off" clear class="warehouseAdress-input" placeholder="请输入收货人联系方式"></el-input>
</el-form-item>
<el-form-item prop="provinceId" label="省" label-width="70px">
<el-select
v-model="warehouseAdressForm.provinceId"
class="warehouseAdress-input"
filterable
clearable
placeholder="省"
@change="changeProvince"
>
<el-option
v-for="item in provincesList"
:key="item.provinceId"
:label="item.provinceName"
:value="item.provinceId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item prop="cityId" label="市" label-width="70px">
<el-select
v-model="warehouseAdressForm.cityId"
class="warehouseAdress-input"
filterable
clearable
placeholder="市"
@change="changeCity"
>
<el-option
v-for="item in cityList"
:key="item.cityId"
:label="item.cityName"
:value="item.cityId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item prop="countyId" label="区/县" label-width="70px">
<el-select
v-model="warehouseAdressForm.countyId"
class="warehouseAdress-input"
filterable
clearable
placeholder="区/县"
>
<el-option
v-for="item in countyList"
:key="item.countyId"
:label="item.countyName"
:value="item.countyId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="详细地址" label-width="70px" prop="adress">
<el-input v-model="warehouseAdressForm.adress" autocomplete="off" clear class="warehouseAdress-input"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="warehouseAdressFormVisible = false">取 消</el-button>
<el-button type="primary" @click="warehouseAdressFormSet">确 定</el-button>
</div>
</el-dialog>
</div> </div>
</div> </div>
</template> </template>
...@@ -544,6 +668,7 @@ import { openLoading, closeLoading } from "../../utils/utils"; ...@@ -544,6 +668,7 @@ 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, queryStore } from "@/utils/shop"; import { saveStore, queryStore } from "@/utils/shop";
import { getProvinces, getCities, getCounties } from '@/utils/base/baseApi';
import { checkMobile } from "@/utils/patients/checkValid"; import { checkMobile } from "@/utils/patients/checkValid";
export default { export default {
components: { components: {
...@@ -609,6 +734,44 @@ export default { ...@@ -609,6 +734,44 @@ export default {
imgUrlC1: "", //证明图1 imgUrlC1: "", //证明图1
imgUrlC2: "", //证明图2 imgUrlC2: "", //证明图2
imgUrlC3: "", //证明图3 imgUrlC3: "", //证明图3
warehouseAdress: "",//仓库地址
logisticsRadio: 1, //是否限制物流公司
logisticsCmp:[], //支持的物流公司
refundMsg: '' //退款说明
},
warehouseAdressRadio: 3, //默认收货地址
warehouseAdressForm: { //收货地址form
name: 'asd',
iphone: '',
provinceId: '',
cityId: '',
countyId: '',
adress: ''
},
warehouseAdressFormVisible: false,
warehouseAdressFormTitle: '创建地址',
provincesList: [],
cityList: [],
countyList: [],
warehouseAdressRules: {
name: [
{ required: true, message: "请输入店铺名称", trigger: "blur" },
{
min: 2,
message: "收件人名称长度应大于2位",
trigger: "blur",
},
],
iphone:[
{ required: true, message: "请输入联系电话", trigger: "blur" },
{ validator: checkMobile, trigger: ["change", "blur"] },
],
provinceId: { required: true, message: "请选择省", trigger: ["change", "blur"] },
cityId: { required: true, message: "请选择市", trigger: ["change", "blur"] },
countyId: { required: true, message: "请选择区/县", trigger: ["change", "blur"] },
adress:[
{ required: true, message: "请输入详细收货地址", trigger: "blur" }
],
}, },
supplierImg1: { supplierImg1: {
id: null, id: null,
...@@ -733,6 +896,7 @@ export default { ...@@ -733,6 +896,7 @@ export default {
this.curmbSecond = "新建店铺"; this.curmbSecond = "新建店铺";
this.isDisabled = false; this.isDisabled = false;
} }
this.getProvincesList();
}, },
methods: { methods: {
//回显数据处理 //回显数据处理
...@@ -853,7 +1017,6 @@ export default { ...@@ -853,7 +1017,6 @@ export default {
}); });
} }
}, },
// 返回 // 返回
back() { back() {
this.$router.push({ this.$router.push({
...@@ -1291,6 +1454,97 @@ export default { ...@@ -1291,6 +1454,97 @@ export default {
} }
this.formData.adminList.splice(index, 1); this.formData.adminList.splice(index, 1);
}, },
// 创建或编辑地址 type
createAdress(type) {
this.warehouseAdressFormVisible = true;
this.warehouseAdressFormTitle = type ? '编辑地址' : '创建地址';
},
deleteAdress() {
this.$confirm('确定要删除这条地址信息么?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
// 选择省
changeProvince() {
this.getCitiesList();
this.warehouseAdressForm.countyId = "";
this.countyList = [];
},
// 选择市
changeCity() {
this.getCountiesList();
},
// 选择区
changeCounty() {
this.getHospitalList(3);
},
//获取省列表
getProvincesList() {
getProvinces()
.then((res) => {
if (res.code == "000000") {
this.provincesList = res.data.provinceList;
}
})
.catch({});
},
//获取市列表
getCitiesList() {
this.warehouseAdressForm.cityId = "";
let params = {
provinceId: this.warehouseAdressForm.provinceId,
};
getCities(params)
.then((res) => {
if (res.code == "000000") {
this.cityList = res.data.cityList;
}
})
.catch({});
},
//获取区列表
getCountiesList() {
this.warehouseAdressForm.countyId = "";
let params = {
cityId: this.warehouseAdressForm.cityId,
};
getCounties(params)
.then((res) => {
if (res.code == "000000") {
this.countyList = res.data.countyList;
}
})
.catch({});
},
// 确认地址
warehouseAdressFormSet() {
this.$refs['warehouseAdressForm'].validate((valid) => {
if (valid) {
this.$message({
type: 'success',
message: `${this.warehouseAdressFormTitle}成功!`
});
}
});
},
// 切换退货支持的物流公司类型
changeLogisticsRadio() {
if(this.formData.logisticsRadio == 1) {
this.formData.logisticsCmp = [];
}
}
}, },
}; };
</script> </script>
...@@ -1331,13 +1585,12 @@ export default { ...@@ -1331,13 +1585,12 @@ export default {
} }
} }
} }
} .required-label .el-form-item__label::before {
.required-label .el-form-item__label::before {
content: "*"; content: "*";
color: #f56c6c; color: #f56c6c;
margin-right: 4px; margin-right: 4px;
} }
.basic-item-icon { .basic-item-icon {
position: relative; position: relative;
.require { .require {
...@@ -1354,20 +1607,20 @@ export default { ...@@ -1354,20 +1607,20 @@ export default {
font-size: 12px; font-size: 12px;
color: #f56c6c; color: #f56c6c;
} }
} }
.word-num { .word-num {
font-size: 12px; font-size: 12px;
color: #999; color: #999;
padding-top: 5px; padding-top: 5px;
} }
.line { .line {
margin-left: 10px; margin-left: 10px;
width: 20px; width: 20px;
} }
.flex-upload { .flex-upload {
width: 120px; width: 120px;
text-align: center; text-align: center;
.tips { .tips {
...@@ -1375,8 +1628,8 @@ export default { ...@@ -1375,8 +1628,8 @@ export default {
color: #8c8c8c; color: #8c8c8c;
line-height: 24px; line-height: 24px;
} }
} }
.bg-uploader { .bg-uploader {
position: relative; position: relative;
/*margin-right: 20px;*/ /*margin-right: 20px;*/
.bg-img { .bg-img {
...@@ -1413,22 +1666,66 @@ export default { ...@@ -1413,22 +1666,66 @@ export default {
text-align: left; text-align: left;
} }
} }
} }
.el-upload__tip { .el-upload__tip {
position: absolute; position: absolute;
top: -6px; top: -6px;
left: 130px; left: 130px;
} }
.span-mt-10 { .span-mt-10 {
.edit-img { .edit-img {
width: 20px; width: 20px;
margin-top: 10px; margin-top: 10px;
} }
} }
.p-tips { .p-tips {
font-size: 13px; font-size: 13px;
color: #8c8c8c; color: #8c8c8c;
line-height: 26px; line-height: 26px;
margin-bottom: 15px; margin-bottom: 15px;
}
.warehouseAdress-wrap {
.warehouseAdress-tip {
font-size: 13px;
color: #8c8c8c;
}
.warehouseAdress-add {
color: #449284;
border-color: #449284;
}
.warehouseAdress-list {
display: block;
margin-top: 20px;
border: 1px solid #DCDFE6;
padding: 10px;
border-radius: 4px;
height: 100px;
width: 900px;
overflow: scroll;
&::-webkit-scrollbar {
height: 2px;
width: 4px;
background-color: #ddd;
}
.warehouseAdress-item {
display: block;
margin-bottom: 20px;
&:last-of-type {
margin-bottom: 0;
}
}
.warehouseAdress-msg {
color: #606266;
margin: 0 10px;
}
.warehouseAdress-do {
margin-left: 10px;
color: #449284;
}
}
}
.warehouseAdress-input {
width: 500px;
}
} }
</style> </style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或