积分兑换
This commit is contained in:
liuye
@@ -1,66 +1,58 @@
|
||||
<template>
|
||||
<ai-detail v-loading="isLoading" class="detail">
|
||||
<ai-list v-loading="isLoading" class="detail">
|
||||
<template slot="title">
|
||||
<ai-title title="订单详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
|
||||
</ai-title>
|
||||
<ai-title title="会话存档详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
|
||||
</template>
|
||||
<template #left>
|
||||
<div class="addressBook-left">
|
||||
<div class="addressBook-left__title">
|
||||
<h2 :class="[tabIndex === 0 ? 'tab-active' : '']">群聊会话</h2>
|
||||
<h2 :class="[tabIndex === 1 ? 'tab-active' : '']">私聊会话</h2>
|
||||
</div>
|
||||
<div class="addressBook-left__list--title">
|
||||
<el-input
|
||||
size="mini"
|
||||
placeholder="请输入联系人姓名"
|
||||
v-model="searchName"
|
||||
clearable
|
||||
suffix-icon="iconfont iconSearch">
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="addressBook-left__list--wrapper">
|
||||
<div class="addressBook-left__list--item active">
|
||||
<img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""> 张三
|
||||
</div>
|
||||
<div class="addressBook-left__list--item">
|
||||
<img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""> 张三
|
||||
</div>
|
||||
<div class="addressBook-left__list--item">
|
||||
<img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""> 张三
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<ai-card title="基本信息">
|
||||
<template #right>
|
||||
<el-button type="primary" v-if="info.orderStatus === '0'" @click="isShow = true">订单核销</el-button>
|
||||
</template>
|
||||
<template #content>
|
||||
<ai-wrapper
|
||||
label-width="120px">
|
||||
<ai-info-item label="订单编号" :value="info.orderCode"></ai-info-item>
|
||||
<ai-info-item label="订单状态" :value="dict.getLabel('merchandiseOrderStatus', info.orderStatus)"></ai-info-item>
|
||||
<ai-info-item label="兑换人" :value="info.consumerName"></ai-info-item>
|
||||
<ai-info-item label="兑换时间" :value="info.createTime"></ai-info-item>
|
||||
<ai-info-item label="备注" isLine :value="info.remark"></ai-info-item>
|
||||
</ai-wrapper>
|
||||
</template>
|
||||
</ai-card>
|
||||
<ai-card title="操作信息" v-if="info.orderStatus === '1'">
|
||||
<template #content>
|
||||
<ai-wrapper
|
||||
label-width="120px">
|
||||
<ai-info-item label="核销人" :value="info.auditUserName"></ai-info-item>
|
||||
<ai-info-item label="核销时间" :value="info.auditTime"></ai-info-item>
|
||||
</ai-wrapper>
|
||||
</template>
|
||||
</ai-card>
|
||||
<ai-card title="商品信息">
|
||||
<template #content>
|
||||
<ai-table
|
||||
:tableData="tableData"
|
||||
:isShowPagination="false"
|
||||
:col-configs="colConfigs"
|
||||
@getList="() => {}">
|
||||
<el-table-column slot="goods" width="240px" label="商品" align="left">
|
||||
<template slot-scope="{ row }">
|
||||
<div class="goods">
|
||||
<img :src="row.imageUrl">
|
||||
<span>{{ row.merchandiseName }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-card>
|
||||
<ai-dialog
|
||||
:visible.sync="isShow"
|
||||
width="590px"
|
||||
title="订单核销"
|
||||
@close="form.code = ''"
|
||||
@onConfirm="onConfirm">
|
||||
<el-form ref="form" :model="form" label-width="110px" label-position="right">
|
||||
<el-form-item label="核销码" prop="code" :rules="[{required: true, message: '请输入核销码', trigger: 'blur'}]">
|
||||
<el-input size="small" placeholder="请输入核销码" v-model="form.code"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ai-dialog>
|
||||
<div class="content-right-title">
|
||||
<div class="tab-content">
|
||||
<h2 class="tab-active">全部</h2>
|
||||
<h2>图片/视频</h2>
|
||||
<h2>文件</h2>
|
||||
</div>
|
||||
<div class="search-content">
|
||||
<el-date-picker v-model="time" size="small" type="daterange" value-format="yyyy-MM-dd"
|
||||
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="onChange">
|
||||
</el-date-picker>
|
||||
<el-input size="small" placeholder="输入搜索内容" v-model="search.name" clearable
|
||||
@clear="current = 1, search.name = '', getTableData()" suffix-icon="iconfont iconSearch"
|
||||
v-throttle="() => {(current = 1), getTableData();}"/>
|
||||
<ai-download :instance="instance" url="/app/appconvenientaddressbook/export" :params="search" fileName="会话存档"
|
||||
:disabled="tableData.length == 0">
|
||||
<el-button icon="iconfont iconExported" :disabled="tableData.length == 0">导出</el-button>
|
||||
</ai-download>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</ai-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -89,15 +81,25 @@
|
||||
{ prop: 'merchandiseNumber', align: 'center', label: '数量' },
|
||||
{ prop: 'merchandiseIntegral', align: 'center', label: '小计' }
|
||||
],
|
||||
|
||||
|
||||
|
||||
tabIndex: 0,
|
||||
searchName: '',
|
||||
time: [],
|
||||
search: {
|
||||
name: ''
|
||||
},
|
||||
current: 1
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
this.isLoading = true
|
||||
// this.isLoading = true
|
||||
if (this.params && this.params.id) {
|
||||
this.id = this.params.id
|
||||
this.dict.load(['merchandiseOrderStatus']).then(() => {
|
||||
this.getInfo(this.params.id)
|
||||
// this.getInfo(this.params.id)
|
||||
})
|
||||
}
|
||||
},
|
||||
@@ -146,22 +148,144 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.detail .goods {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.detail {
|
||||
.addressBook-left {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background: #FAFAFB;
|
||||
|
||||
img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-right: 20px;
|
||||
.addressBook-left__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: #ffffff;
|
||||
|
||||
h2 {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
line-height: 40px;
|
||||
color: #222;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
|
||||
&.tab-active {
|
||||
color: #2266FF;
|
||||
border-bottom: 2px solid #2266FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.addressBook-left__list--wrapper {
|
||||
height: calc(100% - 68px);
|
||||
padding: 8px;
|
||||
.addressBook-left__list--item {
|
||||
line-height: 44px;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.addressBook-left__list--item:hover {
|
||||
background-color: #E8EFFF;
|
||||
}
|
||||
.active {
|
||||
background-color: #E8EFFF;
|
||||
color: #26f;
|
||||
}
|
||||
}
|
||||
.addressBook-left__list--title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 8px 8px 0;
|
||||
|
||||
.addressBook-left__list--search {
|
||||
flex: 1;
|
||||
|
||||
:deep( input ){
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 84px;
|
||||
flex-shrink: 1;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
:deep( .ai-list__content--right ){
|
||||
flex: 1;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
min-width: 0;
|
||||
margin-left: 1px;
|
||||
box-shadow: none;
|
||||
|
||||
.ai-list__content--right-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
:deep .ai-list__content--right-wrapper {
|
||||
padding: 0!important;
|
||||
}
|
||||
|
||||
.content-right-title {
|
||||
height: 40px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
box-sizing: content-box;
|
||||
.tab-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 300px;
|
||||
height: 40px;
|
||||
background: #ffffff;
|
||||
|
||||
h2 {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
line-height: 40px;
|
||||
color: #222;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
|
||||
&.tab-active {
|
||||
color: #2266FF;
|
||||
border-bottom: 2px solid #2266FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search-content {
|
||||
display: flex;
|
||||
padding: 4px 8px 4px 0;
|
||||
.ai-download,
|
||||
.el-input {
|
||||
margin-left: 8px;
|
||||
}
|
||||
.el-input {
|
||||
width: 240px;
|
||||
}
|
||||
.el-date-editor--daterange {
|
||||
width: 240px;
|
||||
}
|
||||
:deep .el-date-editor .el-range-separator {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user