mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-08-06 10:57:26 +08:00
升级Vue3，iView替换ElementPlus
- 删除babel配置、更新依赖与入口初始化 - 全量替换UI组件、样式适配，新增迁移文档与标签/过滤器自动化替换脚本
This commit is contained in:
lifenlong
@@ -1,49 +1,51 @@
|
||||
<template>
|
||||
<div class="apply-after-sale">
|
||||
<card _Title="申请售后"></card>
|
||||
<Table
|
||||
border
|
||||
:columns="columns"
|
||||
:data="goodsData"
|
||||
>
|
||||
<template slot-scope="{ row }" slot="goodsName">
|
||||
<div style="padding:5px;display:flex;">
|
||||
<img :src="row.image" style="vertical-align: top;" width="60" height="60" alt=""> <span class="ml_10">{{row.goodsName}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template slot-scope="{ row }" slot="goodsPrice">
|
||||
<div>{{row.applyRefundPrice | unitPrice('￥')}}</div>
|
||||
</template>
|
||||
</Table>
|
||||
<el-table :data="goodsData" border>
|
||||
<el-table-column label="商品名称">
|
||||
<template #default="{ row }">
|
||||
<div style="padding:5px;display:flex;">
|
||||
<img :src="row.image" style="vertical-align: top;" width="60" height="60" alt="">
|
||||
<span class="ml_10">{{ row.goodsName }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="价格">
|
||||
<template #default="{ row }">
|
||||
<div>{{ $filters.unitPrice(row.applyRefundPrice, '￥') }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="num" label="购买数量" />
|
||||
</el-table>
|
||||
<div>
|
||||
<Form :model="form" ref="form" class="mt_10" :rules="rules" :label-width="80">
|
||||
<FormItem label="售后类别">
|
||||
<RadioGroup v-model="form.serviceType" @on-change="changeReason" type="button" button-style="solid">
|
||||
<Radio v-if="info.returnGoods" label="RETURN_GOODS">退货</Radio>
|
||||
<Radio v-if="info.returnMoney" label="RETURN_MONEY">退款</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem label="提交数量" prop="num">
|
||||
<Input type="number" v-model="form.num" style="width:260px" />
|
||||
</FormItem>
|
||||
<FormItem label="提交原因" prop="reason">
|
||||
<Select v-model="form.reason" style="width:260px">
|
||||
<Option v-for="item in reasonList" :value="item.id" :key="item.id">{{ item.reason }}</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem label="问题描述" prop="problemDesc">
|
||||
<Input type="textarea" :rows="4" maxlength="500" style="width:260px" show-word-limit v-model="form.problemDesc" />
|
||||
</FormItem>
|
||||
<FormItem label="图片信息">
|
||||
<el-form :model="form" ref="form" class="mt_10" :rules="rules" label-width="80px">
|
||||
<el-form-item label="售后类别">
|
||||
<el-radio-group v-model="form.serviceType" @change="changeReason" type="button" button-style="solid">
|
||||
<el-radio v-if="info.returnGoods" label="RETURN_GOODS">退货</el-radio>
|
||||
<el-radio v-if="info.returnMoney" label="RETURN_MONEY">退款</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="提交数量" prop="num">
|
||||
<el-input type="number" v-model="form.num" style="width:260px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="提交原因" prop="reason">
|
||||
<el-select v-model="form.reason" style="width:260px">
|
||||
<el-option v-for="item in reasonList" :value="item.id" :key="item.id">{{ item.reason }}</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="问题描述" prop="problemDesc">
|
||||
<el-input type="textarea" :rows="4" maxlength="500" style="width:260px" show-word-limit v-model="form.problemDesc" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图片信息">
|
||||
<div style="display:flex;align-items:center;">
|
||||
<div class="demo-upload-list" v-for="(img, index) in uploadList" :key="index">
|
||||
<img :src="img">
|
||||
<div class="demo-upload-list-cover">
|
||||
<Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon>
|
||||
<Icon type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
|
||||
<el-icon @click="handleView(img)"><View /></el-icon>
|
||||
<el-icon @click="handleRemove(index)"><Delete /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<Upload
|
||||
<el-upload
|
||||
:show-upload-list="false"
|
||||
:on-success="handleSuccess"
|
||||
:before-upload="handleBeforeUpload"
|
||||
@@ -52,44 +54,46 @@
|
||||
:headers="accessToken"
|
||||
style="display: inline-block;width:58px;">
|
||||
<div class="hover-pointer icon-upload" style="">
|
||||
<Icon type="md-add" size="20"></Icon>
|
||||
<el-icon :size="20"><Plus /></el-icon>
|
||||
</div>
|
||||
</Upload>
|
||||
</el-upload>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem label="退款方式">
|
||||
</el-form-item>
|
||||
<el-form-item label="退款方式">
|
||||
<div>{{info.refundWay == 'ORIGINAL' ? '原路退回' : '账号退款'}}</div>
|
||||
</FormItem>
|
||||
</el-form-item>
|
||||
<template v-if="info.accountType === 'BANK_TRANSFER' && info.applyRefundPrice != 0">
|
||||
<FormItem label="开户行" prop="bankDepositName">
|
||||
<Input v-model="form.bankDepositName" type="text" placeholder="请输入银行开户行" style="width:260px" />
|
||||
</FormItem>
|
||||
<FormItem label="开户名" prop="bankAccountName">
|
||||
<Input v-model="form.bankAccountName" type="text" placeholder="请输入银行开户名" style="width:260px" />
|
||||
</FormItem>
|
||||
<FormItem label="银行账号" prop="bankAccountNumber">
|
||||
<Input v-model="form.bankAccountNumber" type="text" placeholder="请输入银行账号" style="width:260px" />
|
||||
</FormItem>
|
||||
<el-form-item label="开户行" prop="bankDepositName">
|
||||
<el-input v-model="form.bankDepositName" type="text" placeholder="请输入银行开户行" style="width:260px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="开户名" prop="bankAccountName">
|
||||
<el-input v-model="form.bankAccountName" type="text" placeholder="请输入银行开户名" style="width:260px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="银行账号" prop="bankAccountNumber">
|
||||
<el-input v-model="form.bankAccountNumber" type="text" placeholder="请输入银行账号" style="width:260px" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<FormItem label="返回方式" v-if="form.serviceType === 'RETURN_GOODS'">
|
||||
<el-form-item label="返回方式" v-if="form.serviceType === 'RETURN_GOODS'">
|
||||
<div>快递至第三方卖家</div>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="apply">提交申请</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<Modal title="View Image" v-model="visible">
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="apply">提交申请</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog title="View Image" v-model="visible">
|
||||
<img :src="previewImage" v-if="visible" style="width: 100%">
|
||||
</Modal>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Delete, Plus, View } from '@element-plus/icons-vue';
|
||||
import { afterSaleReason, afterSaleInfo, applyAfterSale } from '@/api/member.js'
|
||||
import { commonUrl } from '@/plugins/request.js';
|
||||
import storage from '@/plugins/storage';
|
||||
import * as RegExp from '@/plugins/RegExp'
|
||||
export default {
|
||||
components: { Delete, Plus, View },
|
||||
data () {
|
||||
const checkNum = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
@@ -104,11 +108,6 @@ export default {
|
||||
}
|
||||
};
|
||||
return {
|
||||
columns: [ // 表格表头
|
||||
{title: '商品名称', slot: 'goodsName'},
|
||||
{title: '价格', slot: 'goodsPrice'},
|
||||
{title: '购买数量', key: 'num'}
|
||||
],
|
||||
goodsData: [], // 商品数据
|
||||
reasonList: [], // 售后原因列表
|
||||
info: {}, // 售后信息
|
||||
|
||||
Reference in New Issue
Block a user