购物车，会员信息跳转个人购物及个人订单

src/api/ums/member.js

@@ -62,4 +62,12 @@ export function changeAccountStatus(data) {
   })
 }
 
+// 获取解密手机号
+export function decryptedPhone(data) {
+  return request({
+    url: `/ums/member/phone/decrypt/` + data,
+    method: 'get'
+  })
+}
+
 

src/views/oms/order/index.vue

@@ -304,6 +304,10 @@ export default {
     };
   },
   created() {
+    const { phone } = this.$route.query
+    if (phone){
+      this.queryParams.userPhone = phone
+    }
     this.getList();
   },
   methods: {

src/views/ums/member/index.vue

@@ -15,14 +15,14 @@
           end-placeholder="结束日期"
         ></el-date-picker>
       </el-form-item>
-      <el-form-item label="账号启用状态">
+<!--      <el-form-item label="账号启用状态">-->
-        <el-select v-model="queryParams.status" placeholder="请选择" :clearable="true" size="small">
+<!--        <el-select v-model="queryParams.status" placeholder="请选择" :clearable="true" size="small">-->
-          <el-option label="禁用" value="0">
+<!--          <el-option label="禁用" value="0">-->
-          </el-option>
+<!--          </el-option>-->
-          <el-option label="启用" value="1">
+<!--          <el-option label="启用" value="1">-->
-          </el-option>
+<!--          </el-option>-->
-        </el-select>
+<!--        </el-select>-->
-      </el-form-item>
+<!--      </el-form-item>-->
       <el-form-item label="昵称" prop="nickname">
         <el-input
           v-model.trim="queryParams.nickname"
@@ -47,52 +47,48 @@
     </el-form>
 
     <el-table v-loading="loading" :data="umsMemberList">
-      <el-table-column label="昵称" align="center" prop="nickname" />
+      <el-table-column label="昵称" align="center" prop="nickname" width="150"/>
-      <el-table-column label="手机号码" align="center" prop="phoneHidden" />
+      <el-table-column label="手机号码" align="center" prop="phoneHidden" width="150"/>
-      <el-table-column label="性别" align="center" prop="gender" >
+<!--      <el-table-column label="性别" align="center" prop="gender" >-->
-        <template v-slot="scope">
+<!--        <template v-slot="scope">-->
-          <div>{{ scope.row.gender === 0 ? '未知' : (scope.row.gender === 1 ? '男' : '女') }}</div>
+<!--          <div>{{ scope.row.gender === 0 ? '未知' : (scope.row.gender === 1 ? '男' : '女') }}</div>-->
-        </template>
+<!--        </template>-->
-      </el-table-column>
+<!--      </el-table-column>-->
-      <el-table-column label="用户所在城市" align="center" prop="city" />
+<!--      <el-table-column label="用户所在城市" align="center" prop="city" />-->
-      <el-table-column label="用户所在省份" align="center" prop="province" />
+<!--      <el-table-column label="用户所在省份" align="center" prop="province" />-->
-      <el-table-column label="用户所在国家" align="center" prop="country" />
+<!--      <el-table-column label="用户所在国家" align="center" prop="country" />-->
-      <el-table-column label="等级" align="center" prop="level" />
+<!--      <el-table-column label="等级" align="center" prop="level" />-->
-      <el-table-column label="账号启用状态" align="center" prop="status">
+<!--      <el-table-column label="账号启用状态" align="center" prop="status">-->
+<!--        <template v-slot="scope">-->
+<!--          <el-switch-->
+<!--            style="display: block"-->
+<!--            v-model="scope.row.status"-->
+<!--            :active-value="1"-->
+<!--            :inactive-value="0"-->
+<!--            active-color="#13ce66"-->
+<!--            @change="changeStatus(scope.row)">-->
+<!--          </el-switch>-->
+<!--        </template>-->
+<!--      </el-table-column>-->
+      <el-table-column label="创建时间" align="center" prop="createTime">
         <template v-slot="scope">
-          <el-switch
+          <div>{{ parseTime(scope.row.createTime) }}</div>
-            style="display: block"
-            v-model="scope.row.status"
-            :active-value="1"
-            :inactive-value="0"
-            active-color="#13ce66"
-            @change="changeStatus(scope.row)">
-          </el-switch>
         </template>
       </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fix="right" width="200">
-        <template v-slot="scope">
+        <template slot-scope="scope">
-          <div>{{ parseTime(scope.row.createTime) }}</div>
+          <el-button
+            size="mini"
+            type="text"
+            @click="goOrder(scope.row.phoneEncrypted)"
+          >查看下单</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            @click="goCart(scope.row.decryptedPhone)"
+          >查看购物车</el-button>
         </template>
       </el-table-column>
-<!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
-<!--        <template slot-scope="scope">-->
-<!--          <el-button-->
-<!--            size="mini"-->
-<!--            type="text"-->
-<!--            icon="el-icon-edit"-->
-<!--            @click="handleUpdate(scope.row)"-->
-<!--            v-hasPermi="['ums:member:edit']"-->
-<!--          >修改</el-button>-->
-<!--          <el-button-->
-<!--            size="mini"-->
-<!--            type="text"-->
-<!--            icon="el-icon-delete"-->
-<!--            @click="handleDelete(scope.row)"-->
-<!--            v-hasPermi="['ums:member:remove']"-->
-<!--          >删除</el-button>-->
-<!--        </template>-->
-<!--      </el-table-column>-->
     </el-table>
 
     <pagination
@@ -107,7 +103,7 @@
 </template>
 
 <script>
-import { listUmsMember, getUmsMember, delUmsMember, addUmsMember, updateUmsMember, exportUmsMember, changeAccountStatus } from "@/api/ums/member";
+import { listUmsMember, getUmsMember, delUmsMember, addUmsMember, updateUmsMember, exportUmsMember, changeAccountStatus, decryptedPhone } from "@/api/ums/member";
 import dateUtil from '@/utils/DateUtil';
 import moment from "moment";
 
@@ -298,6 +294,26 @@ export default {
           this.getList()
         }
       })
+    },
+    goOrder(phone){
+      decryptedPhone(phone).then(res => {
+        this.$router.push({
+          path: '/order/order',
+          query: {
+            phone: res
+          }
+        })
+      })
+    },
+    goCart(phone){
+      decryptedPhone(phone).then(res => {
+        this.$router.push({
+          path: '/member/shoppingCart',
+          query: {
+            phone: res
+          }
+        })
+      })
     }
   }
 };

src/views/ums/memberCart/index.vue

@@ -1,116 +1,91 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px" size="medium" class="ry_form">
-      <el-form-item label="0->失效；1->有效" prop="status">
+      <el-form-item label="用户手机号" prop="phone">
-        <el-select v-model="queryParams.status" placeholder="请选择0->失效；1->有效" clearable size="small">
-              <el-option label="请选择字典生成" value="" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="用户ID" prop="memberId">
-        <el-input
-          v-model="queryParams.memberId"
-          placeholder="请输入用户ID"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="商品ID" prop="productId">
         <el-input
-          v-model="queryParams.productId"
+          v-model="queryParams.phone"
-          placeholder="请输入商品ID"
+          placeholder="用户手机号"
           clearable
           size="small"
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="展示图片" prop="pic">
+      <el-form-item label="商品名称" prop="productName">
-        <el-input
-          v-model="queryParams.pic"
-          placeholder="请输入展示图片"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="SKU ID" prop="skuId">
-        <el-input
-          v-model="queryParams.skuId"
-          placeholder="请输入SKU ID"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="PRODUCT_NAME" prop="productName">
         <el-input
           v-model="queryParams.productName"
-          placeholder="请输入PRODUCT_NAME"
+          placeholder="商品名称"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <template v-if="showMoreCondition">
-      <el-form-item label="商品数量" prop="quantity">
-        <el-input
-          v-model="queryParams.quantity"
-          placeholder="请输入商品数量"
           clearable
           size="small"
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-    </template>
       <el-form-item class="flex_one tr">
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-        <el-button :icon="showMoreCondition ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" size="mini" @click="showMoreCondition = !showMoreCondition">{{showMoreCondition ? '收起条件' : '展开条件'}}</el-button>
       </el-form-item>
     </el-form>
 
-    <el-row :gutter="10" class="mb8">
+    <el-table v-loading="loading" :data="umsMemberCartList" @selection-change="handleSelectionChange" border cell-class-name="my-cell">
-      <el-col :span="1.5">
+<!--      <el-table-column type="selection" width="55"  />-->
-        <el-button
+      <el-table-column label="用户手机号"  prop="phoneHidden" width="100"/>
-          type="primary"
+      <el-table-column label="商品名称"  prop="productName" />
-          plain
+      <el-table-column label="商品规格"  prop="spData">
-          icon="el-icon-plus"
+        <template v-slot="scope">
-          size="mini"
+          <div class="product-container">
-          @click="handleAdd"
+            <el-popover
-          v-hasPermi="['ums:memberCart:add']"
+              placement="right"
-        >新增</el-button>
+              trigger="hover">
-      </el-col>
+              <el-image :src="scope.row.pic" style="width: 350px;height: 350px"/>
-      </el-col>
+              <el-image slot="reference" class="small-img product-item" :src="scope.row.pic" style="width: 40px;height: 40px"/>
-    </el-row>
+            </el-popover>
-
+            <div class="product-item" style="margin-left: 5px">
-    <el-table v-loading="loading" :data="umsMemberCartList" @selection-change="handleSelectionChange">
+              <div class="sp-data">
-      <el-table-column type="selection" width="55" align="center" />
+                <span v-for="(value, key) in JSON.parse(scope.row.spData)">{{ key }}：{{ value }}&nbsp;</span>
-      <el-table-column label="0->失效；1->有效" align="center" prop="status" />
+              </div>
-      <el-table-column label="用户ID" align="center" prop="memberId" />
+              <div class="product-item quantity">
-      <el-table-column label="商品ID" align="center" prop="productId" />
+                <span style="margin-right: 10px">￥{{ scope.row.price }}</span>
-      <el-table-column label="展示图片" align="center" prop="pic" />
+                <span>x{{ scope.row.quantity }}</span>
-      <el-table-column label="SKU ID" align="center" prop="skuId" />
+              </div>
-      <el-table-column label="PRODUCT_NAME" align="center" prop="productName" />
+            </div>
-      <el-table-column label="商品属性" align="center" prop="spData" />
+          </div>
-      <el-table-column label="商品数量" align="center" prop="quantity" />
+        </template>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      </el-table-column>
-        <template slot-scope="scope">
+      <el-table-column label="价格"  prop="price">
-          <el-button
+        <template v-slot="scope">
-            size="mini"
+          <div>{{ scope.row.price.toFixed(2) }}</div>
-            type="text"
+        </template>
-            icon="el-icon-edit"
+      </el-table-column>
-            @click="handleUpdate(scope.row)"
+      <el-table-column label="数量"  prop="quantity" />
-            v-hasPermi="['ums:memberCart:edit']"
+      <el-table-column label="状态"  prop="skuIfExist">
-          >修改</el-button>
+        <template v-slot="scope">
-          <el-button
+          <el-tag effect="plain" size="medium" :type="scope.row.skuIfExist === 1 ? 'success' : 'error'">
-            size="mini"
+            {{ scope.row.skuIfExist === 1 ? '有效' : '失效' }}
-            type="text"
+          </el-tag>
-            icon="el-icon-delete"
+        </template>
-            @click="handleDelete(scope.row)"
+      </el-table-column>
-            v-hasPermi="['ums:memberCart:remove']"
+      <el-table-column label="加入时间"  prop="createTime">
-          >删除</el-button>
+        <template v-slot="scope">
+          <div>{{ parseTime(scope.row.createTime, '')}}</div>
         </template>
       </el-table-column>
+<!--      <el-table-column label="操作"  class-name="small-padding fixed-width">-->
+<!--        <template slot-scope="scope">-->
+<!--          <el-button-->
+<!--            size="mini"-->
+<!--            type="text"-->
+<!--            icon="el-icon-edit"-->
+<!--            @click="handleUpdate(scope.row)"-->
+<!--            v-hasPermi="['ums:memberCart:edit']"-->
+<!--          >修改</el-button>-->
+<!--          <el-button-->
+<!--            size="mini"-->
+<!--            type="text"-->
+<!--            icon="el-icon-delete"-->
+<!--            @click="handleDelete(scope.row)"-->
+<!--            v-hasPermi="['ums:memberCart:remove']"-->
+<!--          >删除</el-button>-->
+<!--        </template>-->
+<!--      </el-table-column>-->
     </el-table>
 
     <pagination
@@ -121,41 +96,6 @@
       @pagination="getList"
     />
 
-    <!-- 添加或修改购物车对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="50%" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="108px" inline class="dialog-form-two">
-        <el-form-item label="0->失效；1->有效">
-          <el-radio-group v-model="form.status">
-            <el-radio label="1">请选择字典生成</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="用户ID" prop="memberId">
-          <el-input v-model="form.memberId" placeholder="请输入用户ID" />
-        </el-form-item>
-        <el-form-item label="商品ID" prop="productId">
-          <el-input v-model="form.productId" placeholder="请输入商品ID" />
-        </el-form-item>
-        <el-form-item label="展示图片" prop="pic">
-          <el-input v-model="form.pic" placeholder="请输入展示图片" />
-        </el-form-item>
-        <el-form-item label="SKU ID" prop="skuId">
-          <el-input v-model="form.skuId" placeholder="请输入SKU ID" />
-        </el-form-item>
-        <el-form-item label="PRODUCT_NAME" prop="productName">
-          <el-input v-model="form.productName" placeholder="请输入PRODUCT_NAME" />
-        </el-form-item>
-        <el-form-item label="商品属性" prop="spData">
-          <el-input v-model="form.spData" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-        <el-form-item label="商品数量" prop="quantity">
-          <el-input v-model="form.quantity" placeholder="请输入商品数量" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
@@ -190,36 +130,18 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        status: null,
-        memberId: null,
-        productId: null,
-        pic: null,
-        skuId: null,
         productName: null,
-        spData: null,
+        phone: null
-        quantity: null,
       },
       // 表单参数
-      form: {},
+      form: {}
-      // 表单校验
-      rules: {
-        memberId: [
-          { required: true, message: "用户ID不能为空", trigger: "blur" }
-        ],
-        productId: [
-          { required: true, message: "商品ID不能为空", trigger: "blur" }
-        ],
-        productName: [
-          { required: true, message: "PRODUCT_NAME不能为空", trigger: "blur" }
-        ],
-        quantity: [
-          { required: true, message: "商品数量不能为空", trigger: "blur" }
-        ],
-      },
-      showMoreCondition: false
     };
   },
   created() {
+    const { phone } = this.$route.query
+    if (phone){
+      this.queryParams.phone = phone
+    }
     this.getList();
   },
   methods: {
@@ -268,7 +190,7 @@ export default {
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
-      this.handleQuery();
+      // this.handleQuery();
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
@@ -336,3 +258,25 @@ export default {
   }
 };
 </script>
+<style lang="scss">
+.product-container{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 180px;
+  .product-item{
+    margin: auto;
+    width: 180px;
+    .sp-data{
+      font-size: 13px;
+    }
+    .quantity{
+      font-weight: bold;
+      font-size: 13px;
+    }
+  }
+}
+.el-table .my-cell {
+  vertical-align: top
+}
+</style>