356 lines
9.2 KiB
Vue
356 lines
9.2 KiB
Vue
<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 v-if="item.is_show == 1" class="right" @click="showQrCode(item)">兑换码</view>
|
||
<view v-else class="right not-btn">已停用</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="closeQrCode()">关闭</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import { siteManage, getSiteQrCode } from '@/api/exchange.js';
|
||
import {mapGetters} from "vuex";
|
||
import authorize from '@/components/Authorize';
|
||
import emptyPage from '@/components/emptyPage.vue';
|
||
|
||
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;
|
||
// 点击按钮触发弹框输入框的显示
|
||
uni.showModal({
|
||
title: '兑换商品金额', // 弹框标题
|
||
content: '',
|
||
editable: true,//是否显示输入框
|
||
placeholderText: '请输入用户兑换商品的总金额',//输入框提示内容
|
||
showCancel: true, // 是否显示取消按钮
|
||
cancelText: '取消', // 取消按钮文字
|
||
confirmText: '确定', // 确认按钮文字
|
||
success: (res) => {
|
||
console.log(res)
|
||
if (res.confirm && Number(res.content) > 0) {
|
||
let inputValue = Number(res.content);
|
||
let params = {
|
||
point_id: item.id,
|
||
total_money: inputValue,
|
||
};
|
||
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
|
||
});
|
||
});
|
||
} else if (res.cancel) {
|
||
console.log('用户点击了取消');
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 关闭二维码
|
||
closeQrCode(){
|
||
this.$refs.qrCodePopup.close();
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
}
|
||
}
|
||
</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;
|
||
}
|
||
.not-btn{
|
||
background-color: #909399!important;
|
||
border-color: #909399!important;
|
||
color: #fff!important;
|
||
}
|
||
}
|
||
.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>
|