liunan
/
erp-el-element
Template
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
erp-el-element/Dialog/Integralmodal.vue

695 lines
23 KiB
Vue
Raw Normal View History

22
2024-05-07 11:30:13 +08:00
<template>
<div class="main">
<el-dialog
:close-on-click-modal="false"
:visible.sync="integralVisible"
centered
width="1250px"
class="model_class"
:before-close="IntegralmodalClose"
>
<header style="width: 100%;height: 70px;">
<div class="headerclass">
<div class="headermain">
<div :class="['mode-tab', type == 1 ? 'active':'']" @click="typechange(1)">
<div class="tab-icon">
<svg class="icon" aria-hidden="true" style="width: 332px;height: 60px;">
<use :xlink:href="'#' + (type == 1 ? 'icon-jifen-01':'icon-jf1')" />
</svg>
</div>
<span :class="['tab-title', type == 1 ? 'active':'']">积分充值</span>
</div>
<div :class="['mode-tab','solo', type == 2 ? 'active':'']" @click="typechange(2)">
<div class="tab-icon">
<svg class="icon" aria-hidden="true" style="width: 332px;height: 60px;">
<use :xlink:href="'#' + (type == 2 ? 'icon-jifen-01':'icon-jf1')" />
</svg>
<svg class="icon recommend" aria-hidden="true" style="width: 65px;height: 65px;">
<use xlink:href="#icon-tuijian2" />
</svg>
</div>
<span :class="['tab-title', type == 2 ? 'active':'']">查询包月</span>
</div>
</div>
</div>
</header>
<div class="hqpGER">
<div class="left-container">
<div class="left-main">
<div v-if="type == 1">
<div class="flex-c title">
积分查询服务内容
</div>
<div style="display:flex;flex-direction:column;justify-content:center;">
<div v-for="(item,i) in integralinfo" :key="i" style="margin-top:15px">
<i class="circle" />
<span class="jieshao">{{ item.title }}</span>
<div v-if="!!item.subtitle" class="bujieshao">
{{ item.subtitle }}
</div>
</div>
<div style="color:red;margin-top:10px">
每月入库安卓机器3000台以上建议使用包月服务
</div>
</div>
</div>
<div v-else>
<div class="flex-c title">
包月服务内容
</div>
<div style="display:flex;flex-direction:column;justify-content:center;">
<div v-for="(item,i) in monthinfo" :key="i" style="margin-top:15px">
<i class="circle" />
<span style="margin-left:10px">{{ item.title }}</span>
<div v-if="!!item.subtitle" style="font-size:14px;margin-top:10px;color:rgb(93, 111, 143)">
{{ item.subtitle }}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="right-container">
<div class="right-main">
<div style="margin-bottom: 32px;">
<span class="title">当前积分:{{ aginfo ? aginfo.integral :'' }} <span v-if="type == 2" style="color:#e65555;margin-left:5px">本服务仅对安卓查询有效</span></span>
<div class="info-title" style="margin:10px">积分规则: 一积分 = 一块钱</div>
</div>
<div v-if="type == 1">
<div class="title" style="margin-bottom: 32px;">购买积分</div>
<el-row :gutter="24">
<el-col v-for="(e,i) in combo" :key="i" :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
<el-card
class="cardclass"
shadow="hover"
:style="{border:(show==i ? '2px solid #4a90e2': '2px solid #e5e5e5') }"
@click.native.prevent="hidetrue(e)"
>
<span class="points">购买{{ e.points }}积分</span>
<p class="give">赠送{{ e.give }}积分</p>
</el-card>
</el-col>
</el-row>
</div>
<div v-else>
<div class="title" style="margin-bottom: 32px;">购买包月 <span style="color:#e65555;margin-left:5px">反馈新老用户专享8折优惠</span></div>
<el-row :gutter="24">
<el-col v-for="(e,i) in monthList" :key="i" :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
<div class="monthclass" shadow="hover" :style="{border:(monthshow==i ? '2px solid #4a90e2': '2px solid #e5e5e5') }" @click="monthhidetrue(e)">
<div class="monthmain">
<i :class="'iconfont ' + e.icon" style="font-size: 20px;" />
<span style="font-size: 25px;">{{ e.title }}</span>
<el-badge :value="e.discount" class="item" style="margin-top:10px">
<h2 style="color:#e65555">￥{{ e.money }}</h2>
</el-badge>
<del>￥{{ e.oldmoney }}</del>
<div class="xianshi">
<svg class="icon " aria-hidden="true" style="width: 60px;height: 60px;">
<use xlink:href="#icon-jf2-01" />
</svg>
<div class="text">限时</div>
</div>
</div>
</div>
</el-col>
</el-row>
<div style="margin-top: 90px;font-size: 16px;font-weight: bold;">
<div v-if="!!aginfo.last_time">
剩余时间:{{ aginfo ? intervalTime(new Date().getTime(),aginfo.last_time) :'' }}
</div>
<div><el-link type="primary" @click="server">开通服务记录</el-link></div>
</div>
</div>
</div>
<div class="right-r">
<div class="title">购买详情</div>
<div class="flex-b" style="height: 32px;">
<div class="info-title">方案名称</div>
<div class="info-value">{{ type == 1 ? '购买积分' :'购买包月' }}</div>
</div>
<div class="flex-b" style="height: 32px;">
<div class="info-title">{{ type == 1 ? '购买积分' :'购买时长' }}</div>
<div class="info-value">{{ czform['price'] }}</div>
</div>
<div v-if="type == 1" class="flex-b" style="height: 32px;">
<div class="info-title">赠送积分</div>
<div class="info-value">{{ !!czform['name']?czform['name']:'无' }}</div>
</div>
<div v-else class="flex-b" style="height: 32px;">
<div class="info-title">预计到期</div>
<div class="info-value">{{ czform['lasttime'] }}</div>
</div>
<div class="flex-b" style="height: 32px;">
<div class="info-title">积分金额</div>
<div class="info-value">￥{{ czform['price'] }}</div>
</div>
<div class="right-bottom">
<h4 style="margin-top:10px">充值方式</h4>
<div>
<el-radio-group v-model="radiovalue">
<el-radio v-for="(item,i) in radioList" :key="i" style="margin-left:15px" :label="item.value">
<i :style="item.style" :class="item.icon" />
{{ item.title }}
</el-radio>
</el-radio-group>
</div>
<div class="flex-b" style="margin-top:10px">
<span style="font-size: 16px;color: rgb(93, 111, 143);">应付金额:</span>
<span style="color:#ff6b81;font-size: 24px;">￥{{ czform['price'] }}</span>
</div>
<el-button type="primary" style="width:100%;margin-top:2px" :disabled="!checked" @click="IntegralmodalOk">立即购买</el-button>
<div style="margin-top: 10px;">
<el-checkbox v-model="checked" style="margin-right:5px" />我已阅读并同意<a target="_blank" style="color: rgb(41, 141, 248);" rel="noopener noreferrer" class="tos" href="https://www.yuque.com/aiguoerp/lcgmke/oa0z3fwethsor57l?singleDoc#">《积分协议》</a>
</div>
</div>
</div>
</div>
</div>
</el-dialog>
<el-dialog :visible.sync="recordList" :close-on-click-modal="false" title="开通服务">
<el-table
:data="recordDate"
style="border-width: 1px 2px 0 2px;border-style: solid solid none solid; border-color: #ebeef5"
:cell-style="{'text-align':'center'}"
:header-cell-style="{'text-align':'center','background':'#f9f9fa','color':'#606266'}"
>
<el-table-column label="序号" type="index" />
<el-table-column label="日期" prop="add_time">
<template #default="{row}">
{{ row.add_time| dateformat("YYYY-MM-DD") }}
</template>
</el-table-column>
<el-table-column label="名称" prop="remark" />
<el-table-column label="时长">
<template #default="{row}">
<span>{{ row.months }}个月</span>
</template>
</el-table-column>
<el-table-column label="实付金额" prop="pay_amount" />
<el-table-column label="支付方式">
<template #default="{row}">
{{ row.pay_channel===1?'微信':row.pay_channel===2?'支付宝':'/' }}
</template>
</el-table-column>
<el-table-column label="支付时间">
<template #default="{row}">
{{ row.add_time| dateformat("YYYY-MM-DD HH:mm:ss") }}
</template>
</el-table-column>
</el-table>
<div style="text-align: right;margin-top: 15px">
<el-button size="small" @click="recordList=false">关闭</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { open_service_record } from '@/api/System'
export default {
data() {
return {
recordList: false,
recordDate: [],
Visible: false,
czform: { content: '', name: '', time: '', price: '' },
checked: false,
type: 2,
cardList: [
{ title: '9', text: '赠送三个月', money: '9', style: "{display:(show==0 ? 'block': 'none') }" },
{ title: '49', text: '赠送一个月', money: '49', style: "{display:(show==1 ? 'block': 'none') }" },
{ title: '99', text: '无时长赠送', money: '99', style: "{display:(show==2 ? 'block': 'none') }" },
{ title: '299', text: '无时长赠送', money: '299', style: "{display:(show==2 ? 'block': 'none') }" },
{ title: '499', text: '无时长赠送', money: '499', style: "{display:(show==2 ? 'block': 'none') }" },
{ title: '999', text: '无时长赠送', money: '999', style: "{display:(show==2 ? 'block': 'none') }" }
],
monthList: [
{ title: '1个月', text: '', money: '478', month: 1, oldmoney: '598', discount: '8折', icon: 'icona-huiyuanVIPVIPka', style: "{display:(show==0 ? 'block': 'none') }" },
// { title: '12个月', text: '', money: '5598', month: 12, oldmoney: '7176', discount: '7.8折', icon: 'iconhuiyuan', style: "{display:(show==1 ? 'block': 'none') }" }
],
radioList: [
{ title: '微信', icon: 'iconfont iconweixin1-copy', value: 1, style: 'color:#7ed321;font-size:20px' },
{ title: '支付宝', icon: 'iconfont iconzhifubao2', value: 2, style: 'color:#0d6bdb;font-size:20px' }
// {title:'paypal',icon:'iconfont iconpaypal1',value:3,style:"color:#0d6bdb;font-size:20px"},
],
monthinfo: [
{ title: '3万台/月，每台可低至2分钱', subtitle: '' },
{ title: '数量越多，优惠越大', subtitle: '' },
{ title: '保修信息查询，真伪查询', subtitle: '' },
{ title: '购买日期查询', subtitle: '' },
{ title: '支持第三方平台查询', subtitle: '拍机堂购买信息,转转黑名单信息' },
{ title: '支持多品牌查询', subtitle: '华为、OPPO、vivo、小米、荣耀、红米、黑鲨、realme、一加、三星、华硕、魅族、努比亚、中兴、摩托罗拉、联想等' }
],
integralinfo: [
{ title: '安卓查询: ￥0.05/台', subtitle: '' },
{ title: '苹果查询: ￥0.27/台', subtitle: '' },
{ title: '保修信息查询,真伪查询', subtitle: '' },
{ title: 'ID锁查询,购买日期查询', subtitle: '' },
{ title: '支持安卓机器包月查询', subtitle: '' },
{ title: '支持第三方平台查询', subtitle: '拍机堂购买信息,转转黑名单信息' },
{ title: '支持多品牌查询', subtitle: '苹果、华为、OPPO、vivo、小米、荣耀、红米、黑鲨、realme、一加、三星、华硕、魅族、努比亚、中兴、摩托罗拉、联想等' }
],
radiovalue: 1,
mon: 12,
show: 0,
monthshow: 0,
month: 1
}
},
computed: {
...mapGetters([
'expire_time'
]),
money() {
let num = 0
num = this.mon * 88
return num
}
},
props: {
aginfo: {
type: Object,
default: () => {
return {}
}
},
integralVisible: {
type: Boolean,
default: () => {
return false
}
},
combo: {
type: Array,
default: () => {
return []
}
}
},
mounted() {
this.typechange(2)
},
methods: {
async server() {
console.log('开通')
this.recordList = true
const res = await open_service_record()
console.log(res)
this.recordDate = res.datas.datas
},
addMonth(dateTar, offset) {
var date = new Date(dateTar)
if (date instanceof Date && !isNaN(offset)) {
const givenMonth = date.getMonth()
const newMonth = givenMonth + offset
date.setMonth(newMonth)
return this.getCurrentDate(date)
}
},
getCurrentDate(date) {
var seperator1 = '-'
var year = date.getFullYear()
var month = date.getMonth() + 1
var strDate = date.getDate()
if (month >= 1 && month <= 9) {
month = '0' + month
}
if (strDate >= 0 && strDate <= 9) {
strDate = '0' + strDate
}
var currentdate = year + seperator1 + month + seperator1 + strDate
return currentdate
},
typechange(e) {
this.type = e
if (e == 1) {
this.show = 0
this.hidetrue(this.combo[0])
} else {
this.monthshow = 0
this.monthhidetrue(this.monthList[0])
}
},
monthhidetrue(e) {
this.monthList.map((r, i) => {
if (e.title == r.title) {
this.monthshow = i
this.czform['content'] = this.monthList[i].title
this.czform['price'] = this.monthList[i].money
this.czform['month'] = this.monthList[i].month
this.czform['lasttime'] = this.addMonth(this.aginfo.last_time ? this.aginfo.last_time * 1000 : new Date(), this.monthList[i].month)
this.month = this.monthList[i].month
}
})
},
hidetrue(e) {
this.combo.map((r, i) => {
if (e.points == r.points) {
this.show = i
// this.$set( this.czform, 'content', e.title)
this.czform['price'] = e.points
this.czform['name'] = e.give
}
})
},
IntegralmodalOk() {
let obj = {}
if (this.type == 1) { // 积分充值
obj = { pay_type: 4, points: this.combo[this.show].points, key_id: this.combo[this.show].combo_id, pay_status: this.radiovalue }
} else { // 包月
obj = { pay_type: 5, months: this.month, actual_price: this.monthList[this.monthshow].money, pay_status: this.radiovalue }
}
this.$emit('IntegralmodalOk', obj)
console.log(obj)
this.$emit('update:integralVisible', false)
},
IntegralmodalClose() {
this.checked = false
this.$emit('update:integralVisible', false)
},
// 时间戳转化
getTime(time) {
var date = new Date(time)
var y = date.getFullYear()
var m = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
var d = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
return y + '-' + m + '-' + d
},
// 计算两个时间之间的时间差 多少天时分秒
intervalTime(startTime, endTime) {
var timestamp = new Date().getTime() // 计算当前时间戳(毫秒级)
endTime = endTime * 1000
var date1 = '' // 开始时间
if (timestamp > startTime) {
date1 = startTime
} else {
date1 = timestamp // 开始时间
}
var date2 = endTime // 结束时间
// var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数
var date3 = (date2 - date1) * 1000 // 时间差的毫秒数
// 计算出相差天数
var days = Math.floor(date3 / (24 * 3600 * 1000 * 1000))
// 计算出小时数
var leave1 = date3 % (24 * 3600 * 1000 * 1000) // 计算天数后剩余的毫秒数
var hours = Math.floor(leave1 / (3600 * 1000 * 1000))
// 计算相差分钟数
var leave2 = leave1 % (3600 * 1000 * 1000) // 计算小时数后剩余的毫秒数
var minutes = Math.floor(leave2 / (60 * 1000 * 1000))
// 计算相差秒数
var leave3 = leave2 % (60 * 1000) // 计算分钟数后剩余的毫秒数
var seconds = Math.round(leave3 / 1000)
// return days + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒"
return days + '天 '
}
}
}
</script>
<style scoped>
.jieshao{
margin-left:10px;
font-size:14px;
}
.bujieshao{
font-size:14px;
margin-top:10px;
color:rgb(93, 111, 143)
}
.model_class >>> .el-dialog__body{
padding: 0;
}
.model_class >>> .el-dialog__headerbtn{
z-index: 999;
}
.mode-tab{
cursor: pointer;
width: 332px;
height: 61px;
position: absolute;
left: 26px;
bottom: -3px;
z-index: 10;
}
.active{
z-index: 20;
color: rgb(255, 255, 255) ;
}
.tab-title.active {
color: rgb(255, 255, 255);
}
.solo{
left: 336px;
}
.tab-icon{
position: relative;
/* svg{
position: unset;
} */
}
.tab-icon >>> svg{
position: unset;
}
.recommend{
position: absolute !important;
right: 0% !important;
top: -3px !important;
width: 86px;
}
.tab-title{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 30;
font-weight: 600;
font-size: 20px;
line-height: 20px;
color: rgb(93, 111, 143);
}
.headerclass{
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
-webkit-box-align: center;
align-items: center;
}
.headermain{
position: relative;
width: 100%;
height: 100%;
margin-top: 20px;
margin-left: 256px;
}
.model_top{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
height:220px
}
.model_class{
width: 100%;
}
.hqpGER{
position: relative;
width: 100%;
height: 588px;
display: flex;
margin-top: 12px;
padding: 0px 25px 28px 24px;
}
.left-container{
}
.left-main{
position: relative;
width: 245px;
height: 560px;
padding: 32px 12px 24px;
border: 1px solid rgb(218, 235, 254);
border-radius: 8px;
background: rgb(255, 255, 255);
/* color: rgb(93, 111, 143); */
color: #000;
}
.right-container{
/* width: 916px; */
margin-left: 15px;
display: flex;
}
.right-main{
background: rgb(255, 255, 255);
width: 637px;
overflow: hidden auto;
border-radius: 0px 0px 0px 8px;
padding: 30px 23px 30px 27px;
}
.right-r{
width: 279px;
height: 100%;
background: rgb(255, 255, 255);
border-radius: 0px 8px 8px 0px;
padding: 30px 19px 22px 18px;
border-left: 1px solid rgb(229, 229, 229);
}
.right-bottom{
height: 180px;
position: absolute;
bottom: 38px;
border-top: 1px solid rgba(200, 205, 208, 0.3);
}
.info-title{
font-size: 14px;
color: rgb(93, 111, 143);
line-height: 14px;
font-weight: 400;
}
.info-value{
font-size: 14px;
color: rgb(53, 68, 93);
text-align: right;
line-height: 14px;
font-weight: 400;
}
.model_class >>> .el-dialog__header{
padding: 0;
}
.model_class >>> .el-dialog-wrap{
z-index: 9999 !important;
}
.model_class >>> .el-dialog-footer{
display: flex;
justify-content: center;
align-items: center;
border-top:0px;
}
.model_class >>>.el-dialog__body{
/* background: url('https://aiguovip2020.oss-cn-shenzhen.aliyuncs.com/aiguo_chaxun/jf_blg.png'); */
background-size: 108% 35% ;
background-repeat: no-repeat;
background: rgb(241, 248, 255);
width: 100%;
}
/* .model_class >>> .circle {
border-radius: 50% ;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: linear-gradient(rgba(255,255,255,0.5) ,rgba(255,255,255,0.2), rgba(255,255,255,0));
width: 150px;
height: 150px;
} */
.circle2{
border: 1px solid #EBEEF5;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
width: 150px;
height: 38px;
background:#fff ;
border-radius: 25px;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
}
.cardclass{
position: relative;
/* border: 2px solid #e5e5e5; */
color: #000;
font-size: 16px;
height: 100px;
width: 160px;
margin-bottom: 10px;
display: flex;
flex-direction: column;
}
.cardclass >>> .ant-divider-horizontal{
margin: 15px 0;
}
.monthclass{
cursor: pointer;
position: relative;
width: fit-content;
background-color: rgb(255, 255, 255);
border: 1px solid rgb(219, 219, 219);
border-radius: 8px;
}
.monthmain{
width: 150px;
height: 178px;
display: flex;
flex-direction: column;
-webkit-box-align: center;
align-items: center;
justify-content: center;
padding: 0px 19px;
border: 1px solid transparent;
}
.el-card{
overflow: unset;
}
.tj{
position: absolute;
top: 0px;
right: 0px;
background: #4a90e2;
padding: 0px 0px;
width: 33px;
color: #fff;
line-height: 18px;
font-size: 12px;
}
.guoguo{
position: absolute;
bottom: 0px;
right: 0px;
height: 18px;
width: 22px;
33
2024-05-07 11:51:58 +08:00
background: url(https://aiguovip2020.oss-cn-shenzhen.aliyuncs.com/static/assets/xiaogou.png) 0px bottom;
22
2024-05-07 11:30:13 +08:00
background-size: 100%;
display: none;
}
.circle {
display: inline-block;
width: 14px;
height: 14px;
}
.circle:after {
content: '';
margin: 3px;
display: table;
width: 10px;
height: 10px;
background: #2ecc71;
border-radius: 50%;
}
.title{
font-weight: 600;
font-size: 16px;
line-height: 16px;
color: rgb(53, 68, 93);
}
.xianshi{
position: absolute;
left: -10px;
top: -18px;
}
.text{
position: absolute;
top: 12px;
left: 0px;
width: 100%;
text-align: center;
font-weight: 600;
font-size: 12px;
color: rgb(255, 255, 255);
}
</style>