|
|
@@ -0,0 +1,478 @@
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "details",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ orderStatus: '待发货',
|
|
|
+ orderInfo: {
|
|
|
+ orderNo: 'DORDER2026020100001',
|
|
|
+ product: '广誉源毛巾',
|
|
|
+ quantity: '3',
|
|
|
+ actualPrice: '￥10+1000积分',
|
|
|
+ customerPhone: '19900001234',
|
|
|
+ orderTime: '2026-1-27 10:00:00',
|
|
|
+ shippingTime: '2026-1-27 10:00:00',
|
|
|
+ logisticsNo: 'SF2014523698',
|
|
|
+ remark: '尽快发货尽快发货尽快发货尽快发货，'
|
|
|
+ },
|
|
|
+ receiverInfo: {
|
|
|
+ name: '王五',
|
|
|
+ phone: '19900004458',
|
|
|
+ address: '山西省太原市万柏林区煤气化小西区35号'
|
|
|
+ },
|
|
|
+ productList: [
|
|
|
+ {
|
|
|
+ image: '/profile/upload/2026/01/27/美女技师1_20260127104524A001.png',
|
|
|
+ name: '广誉源毛巾',
|
|
|
+ spec: '白色',
|
|
|
+ price: '300',
|
|
|
+ actualPrice: '25'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ afterSalesInfo: {
|
|
|
+ type: '1',
|
|
|
+ applyTime: '2026-1-27 10:00:00',
|
|
|
+ reason: '不想要了',
|
|
|
+ logisticsNo: 'SF52145236366',
|
|
|
+ cost: '200',
|
|
|
+ },
|
|
|
+ // 弹窗状态
|
|
|
+ dialogVisible: {
|
|
|
+ logistics: false,
|
|
|
+ receiver: false
|
|
|
+ },
|
|
|
+ // 物流单号表单
|
|
|
+ logisticsForm: {
|
|
|
+ logisticsNo: ''
|
|
|
+ },
|
|
|
+ // 收货人信息表单
|
|
|
+ receiverForm: {
|
|
|
+ name: '',
|
|
|
+ phone: '',
|
|
|
+ province: '',
|
|
|
+ city: '',
|
|
|
+ district: '',
|
|
|
+ address: ''
|
|
|
+ },
|
|
|
+ // 省市区数据
|
|
|
+ provinceList: [],
|
|
|
+ cityList: [],
|
|
|
+ districtList: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ closeDialog() {
|
|
|
+ this.$tab.closePage(this.$route).then(({ visitedViews }) => {
|
|
|
+ const latestView = visitedViews.slice(-1)[0]
|
|
|
+ if (latestView) {
|
|
|
+ this.$router.push(latestView.fullPath)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ modifyLogisticsNo() {
|
|
|
+ // 打开修改物流单号弹窗
|
|
|
+ this.logisticsForm.logisticsNo = this.orderInfo.logisticsNo;
|
|
|
+ this.dialogVisible.logistics = true;
|
|
|
+ },
|
|
|
+ modifyReceiverInfo() {
|
|
|
+ // 打开修改收货人信息弹窗
|
|
|
+ this.receiverForm = {
|
|
|
+ name: this.receiverInfo.name,
|
|
|
+ phone: this.receiverInfo.phone,
|
|
|
+ province: '',
|
|
|
+ city: '',
|
|
|
+ district: '',
|
|
|
+ address: this.receiverInfo.address
|
|
|
+ };
|
|
|
+ // 初始化省市区数据（实际项目中应该从接口获取）
|
|
|
+ this.initProvinceList();
|
|
|
+ this.dialogVisible.receiver = true;
|
|
|
+ },
|
|
|
+ saveLogisticsNo() {
|
|
|
+ // 保存物流单号
|
|
|
+ this.orderInfo.logisticsNo = this.logisticsForm.logisticsNo;
|
|
|
+ this.dialogVisible.logistics = false;
|
|
|
+ this.$message.success('物流单号修改成功');
|
|
|
+ },
|
|
|
+ saveReceiverInfo() {
|
|
|
+ // 保存收货人信息
|
|
|
+ this.receiverInfo = {
|
|
|
+ name: this.receiverForm.name,
|
|
|
+ phone: this.receiverForm.phone,
|
|
|
+ address: `${this.receiverForm.province}${this.receiverForm.city}${this.receiverForm.district}${this.receiverForm.address}`
|
|
|
+ };
|
|
|
+ this.dialogVisible.receiver = false;
|
|
|
+ this.$message.success('收货人信息修改成功');
|
|
|
+ },
|
|
|
+ initProvinceList() {
|
|
|
+ // 初始化省份数据（实际项目中应该从接口获取）
|
|
|
+ this.provinceList = [
|
|
|
+ { label: '山西省', value: '140000' },
|
|
|
+ { label: '北京市', value: '110000' },
|
|
|
+ { label: '上海市', value: '310000' }
|
|
|
+ ];
|
|
|
+ },
|
|
|
+ handleProvinceChange(value) {
|
|
|
+ // 省份变化时更新城市数据
|
|
|
+ this.receiverForm.city = '';
|
|
|
+ this.receiverForm.district = '';
|
|
|
+ this.cityList = [];
|
|
|
+ this.districtList = [];
|
|
|
+
|
|
|
+ // 实际项目中应该根据省份获取城市数据
|
|
|
+ if (value === '140000') {
|
|
|
+ this.cityList = [
|
|
|
+ { label: '太原市', value: '140100' },
|
|
|
+ { label: '大同市', value: '140200' }
|
|
|
+ ];
|
|
|
+ } else if (value === '110000') {
|
|
|
+ this.cityList = [
|
|
|
+ { label: '北京市', value: '110100' }
|
|
|
+ ];
|
|
|
+ } else if (value === '310000') {
|
|
|
+ this.cityList = [
|
|
|
+ { label: '上海市', value: '310100' }
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleCityChange(value) {
|
|
|
+ // 城市变化时更新区县数据
|
|
|
+ this.receiverForm.district = '';
|
|
|
+ this.districtList = [];
|
|
|
+
|
|
|
+ // 实际项目中应该根据城市获取区县数据
|
|
|
+ if (value === '140100') {
|
|
|
+ this.districtList = [
|
|
|
+ { label: '小店区', value: '140105' },
|
|
|
+ { label: '迎泽区', value: '140106' }
|
|
|
+ ];
|
|
|
+ } else if (value === '110100') {
|
|
|
+ this.districtList = [
|
|
|
+ { label: '朝阳区', value: '110105' },
|
|
|
+ { label: '海淀区', value: '110108' }
|
|
|
+ ];
|
|
|
+ } else if (value === '310100') {
|
|
|
+ this.districtList = [
|
|
|
+ { label: '浦东新区', value: '310115' },
|
|
|
+ { label: '黄浦区', value: '310101' }
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ viewAfterSalesDetails() {
|
|
|
+ // 查看售后详情的逻辑
|
|
|
+ this.$message.info('查看售后详情');
|
|
|
+ },
|
|
|
+ agreeReturn() {
|
|
|
+ // 同意退货的逻辑
|
|
|
+ this.$message.info('同意退货');
|
|
|
+ },
|
|
|
+ agreeRefund() {
|
|
|
+ // 同意退款的逻辑
|
|
|
+ this.$message.info('同意退款');
|
|
|
+ },
|
|
|
+ editLogisticsNo() {
|
|
|
+ // 编辑物流单号的逻辑
|
|
|
+ this.$message.info('编辑物流单号');
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <div class="order-header">
|
|
|
+ <h2 class="order-title">订单详情</h2>
|
|
|
+ <el-button type="primary" size="small" @click="closeDialog">关闭</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div class="order-status-section">
|
|
|
+ <div class="order-status">
|
|
|
+ <span class="status-label">当前订单状态：</span>
|
|
|
+ <span class="status-value">{{ orderStatus }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="order-actions">
|
|
|
+ <el-button type="success" size="small" @click="modifyLogisticsNo">修改物流单号</el-button>
|
|
|
+ <el-button type="success" size="small" @click="modifyReceiverInfo">修改收货人信息</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span class="section-title">基本信息</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-table">
|
|
|
+ <el-table :data="[orderInfo]" style="width: 100%; margin-bottom: 20px;">
|
|
|
+ <el-table-column prop="orderNo" label="订单号" width="200"></el-table-column>
|
|
|
+ <el-table-column prop="product" label="商品"></el-table-column>
|
|
|
+ <el-table-column prop="quantity" label="数量" width="100"></el-table-column>
|
|
|
+ <el-table-column prop="actualPrice" label="实付价格" width="120"></el-table-column>
|
|
|
+ <el-table-column prop="customerPhone" label="客户手机号" width="150"></el-table-column>
|
|
|
+ <el-table-column prop="orderTime" label="下单时间" width="180"></el-table-column>
|
|
|
+ <el-table-column prop="shippingTime" label="发货时间" width="180"></el-table-column>
|
|
|
+ <el-table-column prop="logisticsNo" label="物流单号"></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="order-remark">
|
|
|
+ <div class="remark-label">订单备注：</div>
|
|
|
+ <div class="remark-content">{{ orderInfo.remark }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span class="section-title">收货人信息</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-table">
|
|
|
+ <el-table :data="[receiverInfo]" style="width: 100%;">
|
|
|
+ <el-table-column prop="name" label="收货人" width="150"></el-table-column>
|
|
|
+ <el-table-column prop="phone" label="手机号" width="180"></el-table-column>
|
|
|
+ <el-table-column prop="address" label="收货地址"></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span class="section-title">商品信息</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-table">
|
|
|
+ <el-table :data="productList" style="width: 100%;">
|
|
|
+ <el-table-column label="商品图片" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <img v-if="scope.row.image" :src="scope.row.image" class="product-image" alt="商品图片">
|
|
|
+ <span v-else>无图片</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="商品名称"></el-table-column>
|
|
|
+ <el-table-column prop="spec" label="规格" width="150"></el-table-column>
|
|
|
+ <el-table-column prop="price" label="售价" width="100"></el-table-column>
|
|
|
+ <el-table-column prop="actualPrice" label="实付" width="100"></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span class="section-title">售后信息</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-table">
|
|
|
+ <el-table :data="[afterSalesInfo]" style="width: 100%;">
|
|
|
+ <el-table-column prop="type" label="售后类型" width="120"></el-table-column>
|
|
|
+ <el-table-column prop="applyTime" label="申请时间" width="180"></el-table-column>
|
|
|
+ <el-table-column prop="reason" label="申请原因"></el-table-column>
|
|
|
+ <el-table-column label="物流单号（寄回）" width="200">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="logistics-info">
|
|
|
+ <span>{{ scope.row.logisticsNo }}</span>
|
|
|
+ <el-button type="text" size="small" @click="editLogisticsNo">
|
|
|
+ <i class="el-icon-edit"></i>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="cost" label="费用" width="100"></el-table-column>
|
|
|
+ <el-table-column label="操作" width="300">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="after-sales-actions">
|
|
|
+ <el-button type="primary" size="small" @click="viewAfterSalesDetails">查看详情</el-button>
|
|
|
+ <el-button type="success" size="small" @click="agreeReturn">同意退货</el-button>
|
|
|
+ <el-button type="success" size="small" @click="agreeRefund">同意退款</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <!-- 修改物流单号弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ title="修改物流单号"
|
|
|
+ :visible.sync="dialogVisible.logistics"
|
|
|
+ width="500px"
|
|
|
+ >
|
|
|
+ <el-form :model="logisticsForm" label-width="100px">
|
|
|
+ <el-form-item label="物流单号">
|
|
|
+ <el-input v-model="logisticsForm.logisticsNo" placeholder="请输入物流单号"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisible.logistics = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="saveLogisticsNo">保存</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 修改收货人信息弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ title="修改收货人信息"
|
|
|
+ :visible.sync="dialogVisible.receiver"
|
|
|
+ width="600px"
|
|
|
+ >
|
|
|
+ <el-form :model="receiverForm" label-width="120px">
|
|
|
+ <el-form-item label="收货人姓名">
|
|
|
+ <el-input v-model="receiverForm.name" placeholder="请输入收货人姓名"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="收货人手机号">
|
|
|
+ <el-input v-model="receiverForm.phone" placeholder="请输入收货人手机号"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="所在地区">
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-select v-model="receiverForm.province" placeholder="请选择省份" @change="handleProvinceChange">
|
|
|
+ <el-option
|
|
|
+ v-for="item in provinceList"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.label"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-select v-model="receiverForm.city" placeholder="请选择城市" @change="handleCityChange">
|
|
|
+ <el-option
|
|
|
+ v-for="item in cityList"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.label"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-select v-model="receiverForm.district" placeholder="请选择区县">
|
|
|
+ <el-option
|
|
|
+ v-for="item in districtList"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.label"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="详细地址">
|
|
|
+ <el-input
|
|
|
+ v-model="receiverForm.address"
|
|
|
+ type="textarea"
|
|
|
+ :rows="3"
|
|
|
+ placeholder="请输入详细地址"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisible.receiver = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="saveReceiverInfo">保存</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.app-container {
|
|
|
+ padding: 20px;
|
|
|
+ background-color: #f0f2f5;
|
|
|
+ min-height: 100vh;
|
|
|
+
|
|
|
+ .order-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ .order-title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #303133;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-card {
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ .section-title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #303133;
|
|
|
+ padding-left: 10px;
|
|
|
+ border-left: 4px solid #409EFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-status-section {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px 0;
|
|
|
+
|
|
|
+ .order-status {
|
|
|
+ .status-label {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #606266;
|
|
|
+ }
|
|
|
+ .status-value {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #f56c6c;
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-actions {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-table {
|
|
|
+ padding: 10px 0;
|
|
|
+
|
|
|
+ .el-table {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-remark {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .remark-label {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #303133;
|
|
|
+ width: 80px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .remark-content {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #606266;
|
|
|
+ padding: 10px;
|
|
|
+ border: 1px solid #ebeef5;
|
|
|
+ min-height: 40px;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-image {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ object-fit: cover;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logistics-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .after-sales-actions {
|
|
|
+ display: flex;
|
|
|
+ gap: 8px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
xyh