394 行
19 KiB
HTML
可执行文件
394 行
19 KiB
HTML
可执行文件
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<!--[1.6.48]-->
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>查看详情</title>
|
||
<script type="text/javascript" charset="utf-8" src="/Public/jquery/js/jquery-3.2.1.min.js"></script>
|
||
<link rel="stylesheet" type="text/css" href="/Public/vue/element-ui.2.8.2.css">
|
||
<link rel="stylesheet" type="text/css" href="/Public/vue/element-ui.css">
|
||
<script type="text/javascript" charset="utf-8" src="/Public/vue/js/vue2.5.16.js"></script>
|
||
<script type="text/javascript" charset="utf-8" src="/Public/vue/element-ui.2.8.2.js"></script>
|
||
<script type="text/javascript" charset="utf-8" src="/Public/vue/element-ui.js"></script>
|
||
<style>
|
||
[v-cloak] {
|
||
display: none;
|
||
}
|
||
|
||
.el-card__body {
|
||
height: 106px;
|
||
}
|
||
|
||
.el-card p {
|
||
color: #666;
|
||
font-size: 12px;
|
||
margin: 6px 0;
|
||
}
|
||
|
||
.timeSmall {
|
||
font-size: 10px;
|
||
color: #666;
|
||
}
|
||
|
||
.el-avatar {
|
||
transform: translate(90%);
|
||
}
|
||
|
||
.title {
|
||
color: cornflowerblue;
|
||
font-size: 14px;
|
||
}
|
||
.imgs{
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
|
||
.seeGoodsInfo {
|
||
padding: 15px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.cell {
|
||
font-size: 14px
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="detail" v-cloak>
|
||
<el-container>
|
||
<el-container>
|
||
<el-main>
|
||
<p class="title">{{vip_info.vip_type}}</p>
|
||
<el-row :gutter="12">
|
||
<el-col :span="6">
|
||
<el-card shadow="always">
|
||
<el-avatar :size="100" :src="vip_info.headimgurl"></el-avatar>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-card shadow="always">
|
||
<p>昵称：{{vip_info.nickname}}</p>
|
||
<p>姓名：{{vip_info.name}}</p>
|
||
<p>手机：{{vip_info.mobile_phone}}</p>
|
||
<p>生日：{{vip_info.birthday}}</p>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-card shadow="always">
|
||
<p>注册时间：{{vip_info.addtime}}</p>
|
||
<p>会员卡类型：{{vip_info.vip_type}}</p>
|
||
<p v-if="vip_info.plus_type==2">Plus会员激活时间：{{vip_info.plus_start}}</p>
|
||
<p v-if="vip_info.plus_type==2">Plus会员到期时间：{{vip_info.plus_end}}</p>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-card shadow="always">
|
||
<p>余额：{{vip_info.balance}}</p>
|
||
<p>积分：{{vip_info.integral}}</p>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||
<el-tab-pane label="余额记录" name="first">
|
||
<el-table :data="balanceData" style="width: 100%" align="center">
|
||
<el-table-column label="序号" align="center" width="60">
|
||
<template slot-scope="scope">
|
||
{{scope.$index+1}}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="add_time" label="收入/支出日期" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="type_text" label="收入/支出类型" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="money_text" label="收入/支出金额" align="center">
|
||
</el-table-column>
|
||
</el-table>
|
||
<!-- 分页 -->
|
||
<el-pagination @current-change="balanceCurrentChange" :current-page="balanceCurrentPage"
|
||
:page-sizes="[10]" :page-size="pagesize"
|
||
layout="total, sizes, prev, pager, next, jumper" :total="balancetotal">
|
||
</el-pagination>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="积分记录" name="second">
|
||
<el-table :data="integralData" style="width: 100%" align="center">
|
||
<el-table-column label="序号" align="center" width="60">
|
||
<template slot-scope="scope">
|
||
{{scope.$index+1}}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="add_time" label="收入/支出日期" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="remark" label="收入/支出类型" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="integral" label="收入/支出积分" align="center">
|
||
</el-table-column>
|
||
</el-table>
|
||
<!-- 分页 -->
|
||
<el-pagination @current-change="integralCurrentChange" :current-page="integralCurrentPage"
|
||
:page-sizes="[10]" :page-size="pagesize"
|
||
layout="total, sizes, prev, pager, next, jumper" :total="integraltotal">
|
||
</el-pagination>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="订单记录" name="third">
|
||
<el-table :data="orderData" style="width: 100%" align="center">
|
||
<el-table-column label="序号" align="center" width="60">
|
||
<template slot-scope="scope">
|
||
{{scope.$index+1}}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="order_no" label="订单号" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="type" label="消费场景" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="add_time" label="消费日期" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="order_type" label="订单类型" align="center">
|
||
</el-table-column>
|
||
<el-table-column label="购买商品信息" align="center">
|
||
<template slot-scope="scope">
|
||
<el-button type="text" @click="seeGoods(scope.row.id)">查看</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="amount_received" label="消费金额" align="center">
|
||
</el-table-column>
|
||
</el-table>
|
||
<!-- 分页 -->
|
||
<el-pagination @current-change="orderCurrentChange" :current-page="orderCurrentPage"
|
||
:page-sizes="[10]" :page-size="pagesize"
|
||
layout="total, sizes, prev, pager, next, jumper" :total="ordertotal">
|
||
</el-pagination>
|
||
<!-- 查看商品弹出 -->
|
||
<el-dialog title="商品详情" :modal-append-to-body="false" :visible.sync="seeGoodsDialog" width="60%">
|
||
<el-table :data="seeGoodsTable" style="width: 100%" align="center">
|
||
<el-table-column prop="goods_name" label="商品名称" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="price" label="单价(元)" align="center">
|
||
</el-table-column>
|
||
<el-table-column label="图片" align="center">
|
||
<template slot-scope="scope">
|
||
<img :src="scope.row.image" alt="" class="imgs">
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="company" label="单位" align="center"></el-table-column>
|
||
<el-table-column prop="original_price" label="原价(元)" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="vip_discount" label="会员折扣" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="num" label="商品数量" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="all_money" label="实付小计" align="center">
|
||
</el-table-column>
|
||
</el-table>
|
||
<div v-if="seeGoodsDetail.type==1">
|
||
<p style="font-size: 16px;">收货信息</p>
|
||
<div class="seeGoodsInfo">
|
||
<span style="margin-right: 60px;">姓名：{{seeGoodsDetail.name}}</span>
|
||
<span>手机号：{{seeGoodsDetail.phone}}</span>
|
||
<p>配送费：{{seeGoodsDetail.delivery_fee}}元</p>
|
||
<p>地址：{{seeGoodsDetail.address}}</p>
|
||
<p>买家留言：{{seeGoodsDetail.remark}}</p>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</el-tab-pane>
|
||
<!-- PLUS会员显示 -->
|
||
<el-tab-pane label="Plus记录" name="fourth" v-if="vip_info.plus_type==2">
|
||
<el-table :data="plusData" style="width: 100%" align="center">
|
||
<el-table-column label="序号" align="center" width="60">
|
||
<template slot-scope="scope">
|
||
{{scope.$index+1}}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="type" label="类型" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="money" label="支付金额" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="time" label="时长(天)" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="pay_type" label="支付方式" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="add_time" label="支付时间" align="center">
|
||
</el-table-column>
|
||
</el-table>
|
||
<!-- 分页 -->
|
||
<el-pagination @current-change="plusCurrentChange" :current-page="plusCurrentPage"
|
||
:page-sizes="[10]" :page-size="pagesize"
|
||
layout="total, sizes, prev, pager, next, jumper" :total="plustotal">
|
||
</el-pagination>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</el-main>
|
||
</el-container>
|
||
</el-container>
|
||
</div>
|
||
<script type="text/javaScript">
|
||
var detail = new Vue({
|
||
el:"#detail",
|
||
data: function () {
|
||
return {
|
||
vid:"{$vid}",
|
||
vip_info:{}, //会员信息
|
||
activeName:'first',
|
||
balanceData:[], //余额表
|
||
balanceCurrentPage:1,
|
||
balancetotal:0,
|
||
integralData:[], //积分表
|
||
integralCurrentPage:1,
|
||
integraltotal:0,
|
||
orderData:[], // 订单表
|
||
orderCurrentPage:1,
|
||
pagesize:10,
|
||
ordertotal:0,
|
||
plusData:[], //plus会员表
|
||
plusCurrentPage:1,
|
||
plustotal:0,
|
||
seeGoodsDialog:false,
|
||
seeGoodsDetail:{}, //查看商品
|
||
seeGoodsTable:[],
|
||
}
|
||
},
|
||
created() {
|
||
this.getUserDetails();
|
||
//获取会员余额
|
||
this.getUserRecharge();
|
||
// 获取积分记录
|
||
this.getUserIntegral();
|
||
//获取订单记录
|
||
this.getUserBillOrder();
|
||
//获取PLUS会员记录
|
||
this.getPlusUserRecord();
|
||
},
|
||
methods: {
|
||
getUserDetails() {
|
||
console.log(this.vid)
|
||
$.ajax({
|
||
type:'post',
|
||
url:'/index.php/Retail/MemberAnalyze/getUserDetails',
|
||
data:{
|
||
vid:this.vid
|
||
},
|
||
success: res=>{
|
||
if(res.status == 1) {
|
||
console.log(res);
|
||
this.vip_info = res.data
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getUserRecharge() {
|
||
$.ajax({
|
||
type:'post',
|
||
url:'/index.php/Retail/MemberAnalyze/getUserRecharge',
|
||
data:{
|
||
vid:this.vid,
|
||
page:this.balanceCurrentPage,
|
||
pageSize:this.pagesize
|
||
},
|
||
success: res => {
|
||
if(res.status == 1) {
|
||
console.log(res);
|
||
this.balanceData = res.data.list;
|
||
this.balancetotal = parseInt(res.data.total);
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getUserIntegral() {
|
||
$.ajax({
|
||
type:'post',
|
||
url:'/index.php/Retail/MemberAnalyze/getUserIntegral',
|
||
data:{
|
||
vid:this.vid,
|
||
page:this.integralCurrentPage,
|
||
pageSize:this.pagesize
|
||
},
|
||
success: res => {
|
||
if(res.status == 1) {
|
||
console.log(res);
|
||
this.integralData = res.data.list;
|
||
this.integraltotal = parseInt(res.data.total);
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getUserBillOrder() {
|
||
$.ajax({
|
||
type:'post',
|
||
url:'/index.php/Retail/MemberAnalyze/getUserBillOrder',
|
||
data:{
|
||
vid:this.vid,
|
||
page:this.orderCurrentPage,
|
||
pageSize:this.pagesize
|
||
},
|
||
success: res => {
|
||
if(res.status == 1) {
|
||
console.log(res);
|
||
this.orderData = res.data.list;
|
||
this.ordertotal = parseInt(res.data.total);
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getPlusUserRecord() {
|
||
$.ajax({
|
||
type:'post',
|
||
url:'/index.php/Retail/MemberAnalyze/getPlusUserRecord',
|
||
data:{
|
||
vid:this.vid,
|
||
page:this.plusCurrentPage,
|
||
pageSize:this.pagesize
|
||
},
|
||
success: res => {
|
||
if(res.status == 1) {
|
||
console.log(res);
|
||
this.plusData = res.data.list;
|
||
this.plustotal = parseInt(res.data.total);
|
||
}
|
||
}
|
||
})
|
||
},
|
||
handleClick(tab, event) {
|
||
console.log(tab, event);
|
||
console.log(this.vid);
|
||
|
||
},
|
||
balanceCurrentChange(val) {
|
||
this.balanceCurrentPage = val;
|
||
this.getUserRecharge()
|
||
},
|
||
integralCurrentChange(val) {
|
||
this.integralCurrentPage = val;
|
||
this.getUserIntegral()
|
||
},
|
||
orderCurrentChange(val) {
|
||
this.orderCurrentPage = val;
|
||
this.getUserBillOrder()
|
||
},
|
||
plusCurrentChange(val) {
|
||
this.plusCurrentPage = val;
|
||
this.getPlusUserRecord()
|
||
},
|
||
// 查看商品
|
||
seeGoods(id) {
|
||
this.seeGoodsDialog = true;
|
||
$.ajax({
|
||
type:'post',
|
||
url:'/index.php/Retail/MemberAnalyze/getBillOrderInfo',
|
||
data:{
|
||
id
|
||
},
|
||
success: res =>{
|
||
this.seeGoodsDetail = res;
|
||
this.seeGoodsTable = res.data;
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
</body>
|
||
|
||
</html> |