| | |
| | | </Page> |
| | | </Row> |
| | | </Card> |
| | | |
| | | |
| | | <!-- 用户行为详情弹窗 --> |
| | | <Modal |
| | | v-model="detailModalVisible" |
| | |
| | | <!-- 详情筛选条件 --> |
| | | <Row @keydown.enter.native="handleDetailSearch"> |
| | | <Form ref="detailSearchForm" :model="detailSearchForm" inline :label-width="80" style="width: 100%" class="search-form"> |
| | | <Form-item label="用户昵称" prop="userName"> |
| | | <Input type="text" v-model="detailSearchForm.userName" placeholder="请输入用户昵称" clearable style="width: 200px" /> |
| | | </Form-item> |
| | | <!-- <Form-item label="用户昵称" prop="userName">--> |
| | | <!-- <Input type="text" v-model="detailSearchForm.userName" placeholder="请输入用户昵称" clearable style="width: 200px" />--> |
| | | <!-- </Form-item>--> |
| | | <Form-item label="页面类型" prop="pageCode"> |
| | | <Select |
| | | v-model="detailSearchForm.pageCode" |
| | | clearable |
| | | <Select |
| | | v-model="detailSearchForm.pageCode" |
| | | clearable |
| | | filterable |
| | | style="width: 200px" |
| | | placeholder="请选择页面类型"> |
| | | <Option |
| | | v-for="item in pageTypeOptions" |
| | | :key="item.value" |
| | | <Option |
| | | v-for="item in pageTypeOptions" |
| | | :key="item.value" |
| | | :value="item.value" |
| | | :label="item.label"> |
| | | {{ item.label }} |
| | |
| | | ], |
| | | columns: [ |
| | | { |
| | | title: "用户名称", |
| | | title: "用户id", |
| | | key: "userId", |
| | | minWidth: 120 |
| | | }, |
| | |
| | | }, |
| | | on: { |
| | | click: () => { |
| | | this.goToGoodsDetail(params.row.pageParams); |
| | | // 修改:使用新窗口打开商品详情页面,保留弹窗 |
| | | this.openGoodsDetailInNewTab(params.row.pageParams); |
| | | } |
| | | } |
| | | }, '查看商品详情') : null, |
| | |
| | | }, |
| | | on: { |
| | | click: () => { |
| | | this.goToOrderDetail(params.row.pageParams); |
| | | // 修改:使用新窗口打开订单详情页面,保留弹窗 |
| | | this.openOrderDetailInNewTab(params.row.pageParams); |
| | | } |
| | | } |
| | | }, '查看订单详情') : null |
| | |
| | | }, |
| | | detailColumns: [ |
| | | { |
| | | title: "用户名称", |
| | | title: "用户Id", |
| | | key: "userId", |
| | | minWidth: 120 |
| | | }, |
| | |
| | | key: "nickName", |
| | | minWidth: 100 |
| | | }, |
| | | { |
| | | title: "会话ID", |
| | | key: "sessionId", |
| | | minWidth: 150 |
| | | }, |
| | | |
| | | { |
| | | title: "页面类型", |
| | | key: "pageCode", |
| | |
| | | } |
| | | }, |
| | | { |
| | | title: "页面名称", |
| | | key: "pageNameCn", |
| | | minWidth: 150 |
| | | }, |
| | | { |
| | | title: "进入时间", |
| | | key: "enterTime", |
| | | minWidth: 160 |
| | |
| | | }, |
| | | on: { |
| | | click: () => { |
| | | this.goToGoodsDetail(params.row.pageParams); |
| | | // 修改:使用新窗口打开商品详情页面,保留弹窗 |
| | | this.openGoodsDetailInNewTab(params.row.pageParams); |
| | | } |
| | | } |
| | | }, '查看商品详情') |
| | |
| | | }, |
| | | on: { |
| | | click: () => { |
| | | this.goToOrderDetail(params.row.pageParams); |
| | | // 修改:使用新窗口打开订单详情页面,保留弹窗 |
| | | this.openOrderDetailInNewTab(params.row.pageParams); |
| | | } |
| | | } |
| | | }, '查看订单详情') |
| | |
| | | this.getDataListWithoutValidation(); |
| | | }); |
| | | }, |
| | | // 跳转到商品详情页面 |
| | | goToGoodsDetail(pageParams) { |
| | | // 在新标签页中打开商品详情页面 |
| | | openGoodsDetailInNewTab(pageParams) { |
| | | try { |
| | | // 解析pageParams JSON字符串 |
| | | const params = JSON.parse(pageParams); |
| | |
| | | return; |
| | | } |
| | | |
| | | // 跳转到商品详情页面,传递参数 |
| | | this.$router.push({ |
| | | // 构造商品详情页面的URL |
| | | const routeData = this.$router.resolve({ |
| | | name: "goods-detail", |
| | | query: { |
| | | id: params.goodsId |
| | | } |
| | | }); |
| | | |
| | | // 在新标签页中打开 |
| | | window.open(routeData.href, '_blank'); |
| | | } catch (error) { |
| | | console.error("解析pageParams出错:", error); |
| | | this.$Message.error("参数解析失败"); |
| | | } |
| | | }, |
| | | // 跳转到订单详情页面 |
| | | goToOrderDetail(pageParams) { |
| | | // 在新标签页中打开订单详情页面 |
| | | openOrderDetailInNewTab(pageParams) { |
| | | try { |
| | | // 解析pageParams JSON字符串 |
| | | const params = JSON.parse(pageParams); |
| | |
| | | return; |
| | | } |
| | | |
| | | // 跳转到订单详情页面,传递订单号参数 |
| | | this.$router.push({ |
| | | // 构造订单详情页面的URL |
| | | const routeData = this.$router.resolve({ |
| | | name: "order-detail", |
| | | query: { |
| | | sn: params.sn |
| | | } |
| | | }); |
| | | |
| | | // 在新标签页中打开 |
| | | window.open(routeData.href, '_blank'); |
| | | } catch (error) { |
| | | console.error("解析pageParams出错:", error); |
| | | this.$Message.error("参数解析失败"); |
| | |
| | | // 获取详情数据 |
| | | getDetailData() { |
| | | this.detailTableLoading = true; |
| | | |
| | | |
| | | // 处理时间格式 |
| | | const params = { ...this.detailSearchForm }; |
| | | if (params.beginDate) { |
| | |
| | | if (params.endDate) { |
| | | params.endDate = this.formatDate(params.endDate); |
| | | } |
| | | |
| | | |
| | | // 调用与userAction.vue相同的接口,但增加userId参数 |
| | | userStayList(params).then(res => { |
| | | if (res.code === 200) { |
| | |
| | | console.log("nextTick回调,调用init方法"); |
| | | this.init(); |
| | | }); |
| | | }, |
| | | // 添加路由监听,处理页面回显问题 |
| | | watch: { |
| | | $route(to, from) { |
| | | // 当路由发生变化时,如果当前是userActionRecord页面,则重新加载数据 |
| | | if (to.name === 'user-action-record') { |
| | | this.$nextTick(() => { |
| | | this.getDataListWithoutValidation(); |
| | | }); |
| | | } |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | |
| | | .mt_10 { |
| | | padding: 10px 0; |
| | | } |
| | | </style> |
| | | </style> |