添加：站点管理 - 生成站点二维码
This commit is contained in:
parent
962ded33f9
commit
2b44f238c7
|
|
@ -27,3 +27,12 @@ export function confirmExchange(data) {
|
|||
export function exchangeRecord(data) {
|
||||
return request.get("exchange/exchangeRecord",data);
|
||||
}
|
||||
// 站点管理 - 我的站点&兑换记录
|
||||
export function siteManage(apiName ,data) {
|
||||
// list=我的站点；exchange_record=兑换记录
|
||||
return request.get(`exchange/site_${apiName}`,data);
|
||||
}
|
||||
// 站点管理 - 站点二维码
|
||||
export function getSiteQrCode(data) {
|
||||
return request.get(`exchange/site_qr_code`,data);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -545,6 +545,12 @@
|
|||
"style": {
|
||||
"navigationBarTitleText": "兑换记录"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "online_payment/site/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "兑换管理"
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
|
|
|
|||
|
|
@ -37,8 +37,6 @@ export default {
|
|||
return {
|
||||
list: [],
|
||||
page: 1,
|
||||
total_page: 1,
|
||||
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,325 @@
|
|||
<template>
|
||||
<view :style="viewColor">
|
||||
<!--具体内容-->
|
||||
<view class='content-box'>
|
||||
<!--选项卡-->
|
||||
<view class="tabs">
|
||||
<view :class="['tabs-item',{'tabs-item-active': (tab_active == 'list')}]" @click="init('list')">站点管理</view>
|
||||
<view :class="['tabs-item',{'tabs-item-active': (tab_active == 'exchange_record')}]" @click="init('exchange_record')">兑换记录</view>
|
||||
</view>
|
||||
<!--站点管理-->
|
||||
<view class="site-list" v-if="tab_active == 'list'">
|
||||
<view class="site-box" v-for="(item, index) in list" :key="index">
|
||||
<view class="left">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="address">{{item.address}}</view>
|
||||
</view>
|
||||
<view class="right" @click="showQrCode(item)">兑换码</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--兑换记录-->
|
||||
<view class="site-exchange-record" v-if="tab_active == 'exchange_record'">
|
||||
<view class="record-box" v-for="(item, index) in list" :key="index">
|
||||
<view class="top-info">
|
||||
<view class="left">
|
||||
<view class="title">{{ item.point_title }}</view>
|
||||
<view class="time">{{ item.create_time }}</view>
|
||||
</view>
|
||||
<view class="right">{{ item.total_money }}</view>
|
||||
</view>
|
||||
<view class="other-info">
|
||||
<view class="other-info-line">消费用户：{{ item.nickname || item.uid }}</view>
|
||||
<view class="other-info-line">使用积分：{{ item.use_integral }}</view>
|
||||
<view class="other-info-line" v-if="item.diff_money > 0">差价：{{ item.diff_money }}</view>
|
||||
<view class="other-info-line" v-if="item.diff_money_pay > 0">差价实付金额：{{ item.diff_money_pay }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--授权登录-->
|
||||
<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
|
||||
<!--店铺选择-->
|
||||
<uni-popup ref="qrCodePopup" type="center">
|
||||
<view class="qr-code-content">
|
||||
<image class="image" :src="qrCode"></image>
|
||||
<view class="close-qr-code" @click="$refs.qrCodePopup.open.close()">关闭</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { siteManage } from '@/api/exchange.js';
|
||||
import {mapGetters} from "vuex";
|
||||
import authorize from '@/components/Authorize';
|
||||
import emptyPage from '@/components/emptyPage.vue';
|
||||
import {getSiteQrCode} from "../../../../api/exchange";
|
||||
|
||||
const app = getApp();
|
||||
export default {
|
||||
components: {
|
||||
authorize,
|
||||
emptyPage,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 登录相关
|
||||
isAuto: false, //没有授权的不会自动授权
|
||||
isShowAuth: false,//是否隐藏授权
|
||||
pointUserInfo: {},
|
||||
// 选项卡
|
||||
tab_active: 'list',// list=我的站点；exchange_record=兑换记录
|
||||
// 列表
|
||||
list: [],
|
||||
page: 1,
|
||||
// 二维码
|
||||
qrCode: '',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['isLogin', 'userInfo', 'viewColor'])
|
||||
},
|
||||
onLoad(options) {
|
||||
// 判断：是否登录
|
||||
if (!this.isLogin) {
|
||||
// 未登录 授权登录
|
||||
this.isAuto = true;
|
||||
this.isShowAuth = true
|
||||
}else{
|
||||
// 已登录 获取信息
|
||||
this.init('list');
|
||||
}
|
||||
},
|
||||
onReachBottom: function () {
|
||||
this.getList();
|
||||
},
|
||||
watch: {},
|
||||
methods: {
|
||||
// 授权回调
|
||||
onLoadFun() {
|
||||
if(this.isLogin){
|
||||
this.isShowAuth = false;
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
// 授权关闭
|
||||
authColse(e) {
|
||||
this.isShowAuth = e
|
||||
},
|
||||
// 授权成功 信息初始化
|
||||
init (active) {
|
||||
let _this = this;
|
||||
_this.tab_active = active || 'list';
|
||||
_this.list = [];
|
||||
_this.page = 1;
|
||||
_this.getList();
|
||||
},
|
||||
// 提货记录
|
||||
getList() {
|
||||
let _this = this;
|
||||
let params = {
|
||||
page: _this.page
|
||||
};
|
||||
siteManage(_this.tab_active, params)
|
||||
.then(res => {
|
||||
let list = res.data.list || {};
|
||||
if (Object.values(list).length > 0) {
|
||||
_this.list = _this.$util.SplitArray(list, _this.list);
|
||||
_this.$set(_this, 'list', _this.list);
|
||||
_this.page++;
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
this.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
});
|
||||
},
|
||||
// 显示店铺兑换二维码
|
||||
showQrCode(item){
|
||||
let _this = this;
|
||||
let params = {
|
||||
point_id: item.id
|
||||
};
|
||||
getSiteQrCode(params).then(res => {
|
||||
if(res.status == 200){
|
||||
_this.qrCode = res.data.qr_code || ''
|
||||
_this.$refs.qrCodePopup.open('center');
|
||||
}
|
||||
}).catch(err => {
|
||||
this.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.content-box{
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
background: #f6f6f6;
|
||||
|
||||
.tabs{
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.tabs-item{
|
||||
width: 50%;
|
||||
padding: 0 20px;
|
||||
height: 40px;
|
||||
box-sizing: border-box;
|
||||
line-height: 40px;
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
border-bottom: 2rpx solid #CCCCCC;
|
||||
}
|
||||
.tabs-item-active{
|
||||
color: #409eff;
|
||||
border-bottom: 2rpx solid #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
.site-list{
|
||||
width: 100%;
|
||||
.site-box{
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx;
|
||||
border-bottom: 2rpx solid #CCCCCC;
|
||||
.left{
|
||||
width: calc(100% - 120rpx);
|
||||
|
||||
.title{
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.address{
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-size: 26rpx;
|
||||
color: #a0a1a7;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
color: #fff;
|
||||
background-color: #409eff;
|
||||
border-color: #409eff;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
padding: 0 15rpx;
|
||||
border-radius: 50rpx;
|
||||
width: 120rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.site-box:last-child{
|
||||
border-bottom: 0!important;
|
||||
}
|
||||
}
|
||||
|
||||
.site-exchange-record{
|
||||
width: 100%;
|
||||
.record-box{
|
||||
width: 100%;
|
||||
padding: 30rpx 20rpx;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.top-info{
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.left{
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
.title{
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
.time{
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-size: 26rpx;
|
||||
color: #C1C1C1;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
.other-info{
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
.other-info-line{
|
||||
width: 50%;
|
||||
height: 35rpx;
|
||||
line-height: 35rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.qr-code-content{
|
||||
width: 80vw;
|
||||
.image{
|
||||
width: 80vw;
|
||||
height: 80vw;
|
||||
}
|
||||
.close-qr-code{
|
||||
position: fixed;
|
||||
top: 35rpx;
|
||||
right: 70rpx;
|
||||
color: #FFFFFF;
|
||||
border: 2rpx solid #FFFFFF;
|
||||
height: 40rpx;
|
||||
line-height: 36rpx;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue