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 @@
<div class="create-shop-content screenSet" id="screenSet">
<el-row class="step-content">
<el-col :span="20">
<p class="title">新建店铺</p>
<p class="title">{{curmbSecond}}</p>
</el-col>
<el-col :span="4" style="text-align: right">
<el-button
......@@ -498,7 +498,6 @@
</el-col>
</div>
</div>
<div>
<el-col :span="24">
<el-form-item
......@@ -514,8 +513,62 @@
</el-form-item>
</el-col>
</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-dialog
class="dialog-title-border-old"
title="图片裁剪"
......@@ -534,6 +587,77 @@
/>
</div>
</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>
</template>
......@@ -544,6 +668,7 @@ import { openLoading, closeLoading } from "../../utils/utils";
import { doUpload, getFilePath } from "../../utils/qiniu-util";
import Cropper from "@/components/common/cropper.vue";
import { saveStore, queryStore } from "@/utils/shop";
import { getProvinces, getCities, getCounties } from '@/utils/base/baseApi';
import { checkMobile } from "@/utils/patients/checkValid";
export default {
components: {
......@@ -609,6 +734,44 @@ export default {
imgUrlC1: "", //证明图1
imgUrlC2: "", //证明图2
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: {
id: null,
......@@ -733,6 +896,7 @@ export default {
this.curmbSecond = "新建店铺";
this.isDisabled = false;
}
this.getProvincesList();
},
methods: {
//回显数据处理
......@@ -853,7 +1017,6 @@ export default {
});
}
},
// 返回
back() {
this.$router.push({
......@@ -1291,6 +1454,97 @@ export default {
}
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>
......@@ -1331,104 +1585,147 @@ export default {
}
}
}
}
.required-label .el-form-item__label::before {
content: "*";
color: #f56c6c;
margin-right: 4px;
}
.basic-item-icon {
position: relative;
.require {
position: absolute;
left: 67px;
top: 11px;
.required-label .el-form-item__label::before {
content: "*";
color: #f56c6c;
margin-right: 4px;
}
.basic-item-icon {
position: relative;
.upload-message {
position: absolute;
left: 160px;
top: 105px;
.require {
position: absolute;
left: 67px;
top: 11px;
color: #f56c6c;
}
.upload-message {
position: absolute;
left: 160px;
top: 105px;
font-size: 12px;
color: #f56c6c;
}
}
.word-num {
font-size: 12px;
color: #f56c6c;
color: #999;
padding-top: 5px;
}
}
.word-num {
font-size: 12px;
color: #999;
padding-top: 5px;
}
.line {
margin-left: 10px;
width: 20px;
}
.line {
margin-left: 10px;
width: 20px;
}
.flex-upload {
width: 120px;
text-align: center;
.tips {
font-size: 13px;
color: #8c8c8c;
line-height: 24px;
}
}
.bg-uploader {
position: relative;
/*margin-right: 20px;*/
.bg-img {
float: left;
width: 84px;
height: 100px;
}
.img-delete {
position: absolute;
left: 0px;
top: 0px;
width: 84px;
height: 100px;
background: #000;
opacity: 0.7;
z-index: 999;
&.add-left-18 {
left: 18px;
}
i {
color: #fff;
margin-top: 39px;
margin-left: 0px;
}
}
.limit-text {
float: left;
margin-left: 10px;
margin-top: -10px;
.flex-upload {
width: 120px;
text-align: center;
.tips {
p {
font-size: 12px;
color: #999;
text-align: left;
}
}
}
.el-upload__tip {
position: absolute;
top: -6px;
left: 130px;
}
.span-mt-10 {
.edit-img {
width: 20px;
margin-top: 10px;
}
}
.p-tips {
font-size: 13px;
color: #8c8c8c;
line-height: 24px;
}
}
.bg-uploader {
position: relative;
/*margin-right: 20px;*/
.bg-img {
float: left;
width: 84px;
height: 100px;
line-height: 26px;
margin-bottom: 15px;
}
.img-delete {
position: absolute;
left: 0px;
top: 0px;
width: 84px;
height: 100px;
background: #000;
opacity: 0.7;
z-index: 999;
&.add-left-18 {
left: 18px;
.warehouseAdress-wrap {
.warehouseAdress-tip {
font-size: 13px;
color: #8c8c8c;
}
i {
color: #fff;
margin-top: 39px;
margin-left: 0px;
.warehouseAdress-add {
color: #449284;
border-color: #449284;
}
}
.limit-text {
float: left;
margin-left: 10px;
margin-top: -10px;
p {
font-size: 12px;
color: #999;
text-align: left;
.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;
}
}
}
}
.el-upload__tip {
position: absolute;
top: -6px;
left: 130px;
}
.span-mt-10 {
.edit-img {
width: 20px;
margin-top: 10px;
.warehouseAdress-input {
width: 500px;
}
}
.p-tips {
font-size: 13px;
color: #8c8c8c;
line-height: 26px;
margin-bottom: 15px;
}
</style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或