会员订单列表修改、姓名地址显示优化

src/main.js

@@ -20,6 +20,7 @@ import './permission' // permission control
 import { getDicts } from "@/api/system/dict/data";
 import { getConfigKey } from "@/api/system/config";
 import { parseTime, resetForm, addDateRange, addDateRange2, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
+import { getHiddenName, getHiddenDetailAddress } from '@/utils/DataHidden'
 // 分页组件
 import Pagination from "@/components/Pagination";
 // 自定义表格工具组件
@@ -55,6 +56,8 @@ Vue.prototype.selectDictLabels = selectDictLabels
 Vue.prototype.download = download
 Vue.prototype.handleTree = handleTree
 Vue.prototype.addDateRange2 = addDateRange2
+Vue.prototype.getHiddenName = getHiddenName
+Vue.prototype.getHiddenDetailAddress = getHiddenDetailAddress
 
 
 // 全局组件挂载

src/router/index.js

@@ -175,6 +175,20 @@ export const dynamicRoutes = [
         meta: { title: '编辑商品' }
       }
     ]
+  },
+  {
+    path: '/order',
+    component: Layout,
+    hidden: true,
+    permissions: ['manager:oms:order:query'],
+    children: [
+      {
+        path: 'detail',
+        component: () => import('@/views/oms/order/detail'),
+        name: 'orderDetail',
+        meta: { title: '订单详情' }
+      }
+    ]
   }
 ]
 

src/utils/DataHidden.js

@@ -0,0 +1,30 @@
+/**
+ * 姓名隐藏，只展示第一位，其余替换为 *
+ */
+export function getHiddenName(data){
+  if (!data) return ''
+  const surname = data.substr(0, 1)
+  const star = '*'.repeat(data.length - 1)
+  return surname + star
+}
+
+/**
+ * 详细地址隐藏数字包含中文数字，替换为 *
+ */
+export function getHiddenDetailAddress(data){
+  const chineseNumbers = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
+  if (!data || data.length === 0){
+    return ''
+  }
+  let tempResult = data.replace((/\d/g),'*')
+  let result = ''
+  for(let i=0;i<tempResult.length;i++){
+    if (chineseNumbers.includes(tempResult[i])){
+      result += '*'
+    }else {
+      result += tempResult[i]
+    }
+  }
+  return result
+}
+

src/views/oms/order/detail.vue

@@ -0,0 +1,188 @@
+<template>
+    <div class="order_detail_wrapper">
+        <el-main v-loading="loading">
+            <el-card>
+                <el-descriptions title="订单信息" :column="2" border label-class-name="my-label" contentClassName="my-content">
+                    <template slot="extra">
+                        <el-button size="small" @click="$router.back()">返回</el-button>
+                    </template>
+                    <el-descriptions-item label="订单编号">{{ orderDetail.orderId }}</el-descriptions-item>
+                    <el-descriptions-item label="用户名称">{{ orderDetail.userName }}</el-descriptions-item>
+                    <el-descriptions-item label="用户手机号">{{ orderDetail.userPhone }}</el-descriptions-item>
+                    <el-descriptions-item label="下单时间">{{ parseTime(orderDetail.createTime, '') }}</el-descriptions-item>
+                    <el-descriptions-item label="支付方式">{{ getPayType(orderDetail) }}</el-descriptions-item>
+                    <el-descriptions-item label="支付时间">{{ parseTime(orderDetail.payTime, '')
+                    }}</el-descriptions-item>
+                    <el-descriptions-item label="订单状态">{{ getOrderStatus(orderDetail) }}</el-descriptions-item>
+                </el-descriptions>
+            </el-card>
+            <el-card>
+                <el-descriptions title="收货信息" :column="2" border label-class-name="my-label" contentClassName="my-content">
+                    <el-descriptions-item label="收货人姓名">{{ getHiddenName(addressInfo.name) }}</el-descriptions-item>
+                    <el-descriptions-item label="收货人手机号">{{ addressInfo.userPhone }}</el-descriptions-item>
+                    <el-descriptions-item label="收货区域">{{ addressInfo.area }}</el-descriptions-item>
+                    <el-descriptions-item label="详细地址">{{ getHiddenDetailAddress(addressInfo.address) }}</el-descriptions-item>
+                </el-descriptions>
+            </el-card>
+            <el-card>
+                <div slot="header" style="font-size: 16px;font-weight: bold;">商品信息</div>
+                <el-table :data="products">
+                    <el-table-column label="商品图片" prop="pic">
+                        <template slot-scope="{row}"><el-image class="small-img circle-img" :src="row.pic"
+                                :preview-src-list="[row.pic]" /></template>
+                    </el-table-column>
+                    <el-table-column label="商品ID" prop="productId"></el-table-column>
+                    <el-table-column label="商品名称" prop="productName"></el-table-column>
+                    <el-table-column label="商品规格" align="center" prop="spData" width="180">
+                      <template slot-scope="scope">
+                        <div v-for="(item,key) in JSON.parse(scope.row.spData)">{{ key }}：{{ item }}</div>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="购买数量" prop="buyNum"></el-table-column>
+                    <el-table-column label="实付金额" prop="payAmount">
+                        <template slot-scope="scope">
+                            <span>￥{{ orderDetail.payAmount }}</span>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </el-card>
+            <el-card>
+                <el-descriptions title="物流信息" :column="3" border label-class-name="my-label" contentClassName="my-content">
+                    <el-descriptions-item label="发货时间">{{ parseTime(orderDetail.deliveryTime, '')
+                    }}</el-descriptions-item>
+                    <el-descriptions-item label="快递单号">{{ orderDetail.expressNo }}</el-descriptions-item>
+                    <el-descriptions-item label="物流公司">{{ orderDetail.expressName }}</el-descriptions-item>
+<!--                    <el-descriptions-item label="物流进度">-->
+<!--                        <el-popover placement="top" width="300" trigger="hover" popper-class="popperOptions">-->
+<!--                            <el-timeline-item v-for="(activity, index) in aliLogisticsInfoList" :key="index"-->
+<!--                                :timestamp="activity.time">-->
+<!--                                {{ activity.context }}-->
+<!--                            </el-timeline-item>-->
+<!--                            <span slot="reference">{{ orderDetail.logistics }}</span>-->
+<!--                        </el-popover>-->
+<!--                    </el-descriptions-item>-->
+                </el-descriptions>
+            </el-card>
+        </el-main>
+    </div>
+</template>
+
+<script>
+import { getOmsOrder } from "@/api/oms/order";
+import { getConfigKey } from "@/api/system/config";
+const key = "express-set-key"
+
+export default {
+    name: "OrderDetail",
+    dicts: ['oms_order_status', 'oms_pay_type'],
+    data() {
+        return {
+            products: [],
+            orderDetail: {},
+            addressInfo: {},
+            aliLogisticsInfoList: [],
+            loading: false,
+            experssList: []
+        }
+    },
+    created() {
+        // this.getExpressData()
+        const { id } = this.$route.query
+        this.queryDetail(id).then((expressNo) => {
+        })
+
+    },
+    computed: {
+        orderStatusMap() {
+            let obj = this.dict.type.oms_order_status.map(item => [item.value, item.label])
+            let map = new Map(obj)
+            return map;
+        },
+        payTypeMap() {
+            let obj = this.dict.type.oms_pay_type.map(item => [item.value, item.label])
+            let map = new Map(obj)
+            return map
+        },
+        // expressMap() {
+        //     let obj = this.experssList.map(item => [item.expressCode, item.expressName])
+        //     let map = new Map(obj)
+        //     return map
+        // }
+    },
+    methods: {
+        queryDetail(id) {
+            this.loading = true
+            return new Promise(resolve =>
+                getOmsOrder(id).then(res => {
+                    const { productInfo, addressInfo } = res;
+                    this.orderDetail = res;
+                    // if (allLogistics) {
+                    //     this.aliLogisticsInfoList = JSON.parse(allLogistics)
+                    // }
+                    this.products = productInfo
+                    this.addressInfo = addressInfo
+                    this.loading = false
+                })
+            )
+        },
+        getOrderStatus(row) {
+            return this.orderStatusMap.get(row.orderStatus + '')
+        },
+        getPayType(row) {
+            return this.payTypeMap.get(row.payType + '')
+        },
+        // getExpressName(row) {
+        //     return this.expressMap.get(row.expressName + '')
+        // },
+        // getExpressData() {
+        //     getConfigKey(key).then(res => {
+        //         if (res.msg) {
+        //             this.experssList = JSON.parse(res.msg)
+        //         } else {
+        //             // this.list = [...defaultList]
+        //         }
+        //     })
+        // }
+    }
+}
+</script>
+
+<style lang="stylus">
+  .order_detail_wrapper
+    > .el-card + .el-card
+      margin-top 1rem
+
+    .el-form-item
+      margin-bottom 0
+
+      .el-form-item__content, .el-form-item__label
+        line-height 2
+
+  .my-label
+    width 100px
+  .my-content
+    width 400px
+.popperOptions[x-placement^=left] .popper__arrow::after{
+    border-left-color: #565D6B;
+}
+.popperOptions[x-placement^=right] .popper__arrow::after{
+    border-right-color: #565D6B;
+}
+.popperOptions[x-placement^=bottom] .popper__arrow::after{
+    border-bottom-color: #565D6B;
+}
+.popperOptions[x-placement^=top] .popper__arrow::after{
+    border-top-color: #565D6B;
+}
+.popperOptions{
+    background-color: #565D6B;
+    color: #FFFFFF;
+    border: #565D6B;
+}
+.el-timeline-item__content {
+    color: #fff;
+}
+.el-timeline-item__timestamp {
+    color: #fff;
+}
+  </style>

src/views/oms/order/index.vue

@@ -42,74 +42,81 @@
       </el-form-item>
     </el-form>
 
-    <el-table v-loading="loading" :data="omsOrderList">
+    <el-table v-loading="loading" :data="omsOrderList" border>
 <!--      <el-table-column type="selection" width="55" align="center" />-->
-      <el-table-column label="订单号" align="center" prop="id" width="180"/>
-      <el-table-column label="订单状态" align="center" prop="status">
+      <el-table-column label="收件信息" align="center" prop="receiverName" width="180">
         <template v-slot="scope">
-          <el-tag :type="getOrderTypeTag(scope.row.status)">
-            {{ getOrderTypeText(scope.row.status) }}
-          </el-tag>
+          <div>{{ getHiddenName(scope.row.receiverName) }} {{ scope.row.receiverPhone }}</div>
+          <div>{{ getHiddenDetailAddress(scope.row.receiverDetailAddress) }}</div>
         </template>
       </el-table-column>
-      <el-table-column label="订单金额" align="center" prop="totalAmount">
-        <template v-slot="scope">
-          <div>￥{{ scope.row.totalAmount }}</div>
+      <el-table-column label="订单备注" align="center" prop="note" width="180"/>
+      <el-table-column label="支付时间/发货时间" align="center" prop="payTime" width="220" >
+        <template slot-scope="scope">
+          <div v-if="scope.row.payTime">{{ parseTime(scope.row.payTime, '')}} 支付</div>
+          <div v-if="scope.row.deliveryTime">{{ parseTime(scope.row.deliveryTime, '')}} 发货</div>
         </template>
       </el-table-column>
-      <el-table-column label="应付金额" align="center" prop="payAmount">
+      <el-table-column label="合计" align="center" prop="totalAmount" width="220">
         <template v-slot="scope">
-          <div>￥{{ scope.row.payAmount }}</div>
+          <span>总数量:</span>
+          <span style="color: red;margin-right: 8px">1</span>
+          <span>总价:￥{{ scope.row.totalAmount }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="支付方式" align="center" prop="payType">
+      <el-table-column label="商品规格" align="center" prop="productList" width="180">
         <template v-slot="scope">
-          <el-tag :type="getPayTypeTag(scope.row.payType)">
-            {{ getPayTypeText(scope.row.payType) }}
-          </el-tag>
+          <div v-for="item in scope.row.productList" class="product-container">
+            <el-popover
+              placement="right"
+              trigger="hover">
+              <el-image :src="item.pic" style="width: 350px;height: 350px"/>
+              <el-image slot="reference" class="small-img product-item" :src="item.pic" style="width: 40px;height: 40px"/>
+            </el-popover>
+            <div class="product-item">￥{{ item.salePrice }}</div>
+            <div class="product-item quantity">x{{ item.buyNum }}</div>
+          </div>
         </template>
       </el-table-column>
-      <el-table-column label="收件信息" align="center" prop="receiverName" width="180">
+      <el-table-column label="订单状态" align="center" prop="status">
         <template v-slot="scope">
-          <div>{{ scope.row.receiverName }} {{ scope.row.receiverPhone }}</div>
-          <div>{{ scope.row.receiverDetailAddress }}</div>
-        </template>
-      </el-table-column>
-<!--      <el-table-column label="省份/直辖市" align="center" prop="receiverProvince" />-->
-<!--      <el-table-column label="城市" align="center" prop="receiverCity" />-->
-<!--      <el-table-column label="区" align="center" prop="receiverDistrict" />-->
-<!--      <el-table-column label="省份/直辖市id" align="center" prop="receiverProvinceId" />-->
-<!--      <el-table-column label="城市id" align="center" prop="receiverCityId" />-->
-<!--      <el-table-column label="区id" align="center" prop="receiverDistrictId" />-->
-      <el-table-column label="支付时间" align="center" prop="payTime" width="180" >
-        <template slot-scope="scope">
-            <span>{{ parseTime(scope.row.payTime, '')}}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="发货时间" align="center" prop="deliveryTime" width="180" >
-        <template slot-scope="scope">
-            <span>{{ parseTime(scope.row.deliveryTime, '')}}</span>
+          <el-tag :type="getOrderTypeTag(scope.row.status)">
+            {{ getOrderTypeText(scope.row.status) }}
+          </el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="确认收货时间" align="center" prop="receiveTime" width="180" >
-        <template slot-scope="scope">
-            <span>{{ parseTime(scope.row.receiveTime, '')}}</span>
+      <el-table-column label="支付方式" align="center" prop="payType">
+        <template v-slot="scope">
+          <el-tag :type="getPayTypeTag(scope.row.payType)">
+            {{ getPayTypeText(scope.row.payType) }}
+          </el-tag>
         </template>
       </el-table-column>
+<!--      <el-table-column label="确认收货时间" align="center" prop="receiveTime" width="180" >-->
+<!--        <template slot-scope="scope">-->
+<!--            <span>{{ parseTime(scope.row.receiveTime, '')}}</span>-->
+<!--        </template>-->
+<!--      </el-table-column>-->
       <el-table-column label="下单时间" align="center" prop="createTime" width="180" >
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime, '')}}</span>
         </template>
       </el-table-column>
-      <el-table-column label="订单备注" align="center" prop="note" width="180"/>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
+      <el-table-column label="订单编号/操作" align="center" class-name="small-padding fixed-width" fixed="right" width="180">
         <template slot-scope="scope">
+          <div>{{ scope.row.id }}</div>
           <el-button
             size="mini"
             type="text"
             @click="goDetail(scope.row)"
             v-hasPermi="['oms:order:detail']"
           >详情</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            @click="goDetail(scope.row)"
+            v-hasPermi="['oms:order:detail']"
+          >发货</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -401,8 +408,23 @@ export default {
       }
     },
     goDetail(row){
-      // this.$router.push()
-    }
+      const id = row.id
+      this.$router.push({path: '/order/detail', query: {id}})    }
     }
 };
 </script>
+<style lang="scss" scoped>
+.product-container{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 150px;
+  .product-item{
+    margin: auto;
+    width: 60px;
+  }
+  .quantity{
+    font-weight: bold;
+  }
+}
+</style>

src/views/ums/memberAddress/index.vue

@@ -101,7 +101,7 @@
       <el-table-column label="区" align="center" prop="district" />
       <el-table-column label="详细地址" align="center" prop="detailAddress" width="250">
         <template v-slot="scope">
-          <div>{{ replaceDetailAddress(scope.row.detailAddress.replaceAll((/[\d]+/g),'*')) }}</div>
+          <div>{{ getHiddenDetailAddress(scope.row.detailAddress) }}</div>
         </template>
       </el-table-column>
 <!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
@@ -178,7 +178,6 @@
 
 <script>
 import { listUmsMemberAddress, getUmsMemberAddress, delUmsMemberAddress, addUmsMemberAddress, updateUmsMemberAddress, exportUmsMemberAddress } from "@/api/ums/memberAddress";
-
 export default {
   name: "UmsMemberAddress",
   data() {
@@ -345,26 +344,6 @@ export default {
         this.$download.download(response);
         this.exportLoading = false;
       }).catch(() => {});
-    },
-    replaceDetailAddress(data){
-      if (!data || data.length === 0){
-        return ''
-      }
-      let result = ''
-      for(let i=0;i<data.length;i++){
-        if (this.chineseNumbers.includes(data[i])){
-          result += '*'
-        }else {
-          result += data[i]
-        }
-      }
-      return result
-    },
-    getHiddenName(name){
-      if (!name) return
-      const surname = name.substr(0, 1)
-      const star = '*'.repeat(name.length - 1)
-      return surname + star
     }
   }
 };