@@ -31,7 +31,8 @@ | |||
"vant": "^2.10.3", | |||
"vue": "^2.6.10", | |||
"vue-router": "^3.0.3", | |||
"vuex": "^3.0.1" | |||
"vuex": "^3.0.1", | |||
"moment": "^2.29.1" | |||
}, | |||
"devDependencies": { | |||
"@vue/cli-plugin-babel": "^3.10.0", | |||
@@ -5,6 +5,21 @@ | |||
import Vue from 'vue'; | |||
import Router from 'vue-router'; | |||
import marketingClose from "@/views/navigation/accounts/marketingClose" | |||
import memberCancel from "@/views/navigation/memberCancel" | |||
import memberGathering from "@/views/navigation/consume/memberGathering" | |||
import memberIntegral from "@/views/navigation/integral/memberIntegral" | |||
import memberTicket from "@/views/navigation/ticket/memberTicket" | |||
import ticketDetails from "@/views/navigation/ticket/ticketDetails" | |||
import chPhone from "@/views/navigation/ticket/chPhone" | |||
import details from "@/views/navigation/details" | |||
import commodity from "@/views/navigation/commodity" | |||
import accomplish from "@/views/navigation/accomplish" | |||
import billing from "@/views/navigation/billing" | |||
import todayConsume from "@/views/navigation/consume/todayConsume" | |||
import current from "@/views/navigation/consume/current" | |||
import integralParticulars from "@/views/navigation/integral/integralParticulars" | |||
import userMessage from "@/views/navigation/integral/userMessage" | |||
const Login = () => import(/* webpackChunkName: "login" */ '@/views/login'); | |||
const Home = () => import(/* webpackChunkName: "home" */ '@/views/home'); | |||
@@ -80,6 +95,96 @@ const routes = [ | |||
title: '登陆信息' | |||
} | |||
}, | |||
{ | |||
path: '/marketingClose',//营销结算 | |||
name: 'marketingClose', | |||
component:marketingClose | |||
}, | |||
{ | |||
path: '/memberCancel',//会员核销 | |||
name: 'memberCancel', | |||
component:memberCancel | |||
}, | |||
{ | |||
path: '/memberGathering',//消费卡收款 | |||
name: 'memberGathering', | |||
component:memberGathering | |||
}, | |||
{ | |||
path: '/memberIntegral',//会员积分integralParticulars | |||
name: 'memberIntegral', | |||
component:memberIntegral | |||
}, | |||
{ | |||
path: '/integralParticulars',//会员积分 - 查询详情页 | |||
name: 'integralParticulars', | |||
component:integralParticulars | |||
}, | |||
{ | |||
path: '/userMessage',//会员积分 - 查询详情页 -会员详情 | |||
name: 'userMessage', | |||
component:userMessage | |||
}, | |||
{ | |||
path: '/memberTicket',//会员赠券 | |||
name: 'memberTicket', | |||
component:memberTicket | |||
}, | |||
{ | |||
path: '/chPhone',//会员赠券 - 详情页 | |||
name: 'chPhone', | |||
component:chPhone | |||
}, | |||
{ | |||
path: '/ticketDetails',//会员赠券 - 详情页 | |||
name: 'ticketDetails', | |||
component:ticketDetails | |||
}, | |||
{ | |||
path: '/details',//手动核销 子页面 | |||
name: 'details', | |||
component:details | |||
}, | |||
{ | |||
path: '/commodity',//核销 详情页 | |||
name: 'commodity', | |||
component:commodity | |||
}, | |||
{ | |||
path: '/accomplish',//核销 完成返回页面 | |||
name: 'accomplish', | |||
component:accomplish | |||
}, | |||
{ | |||
path: '/billing',//核销 账单 | |||
name: 'billing', | |||
component:billing | |||
}, | |||
{ | |||
path: '/todayConsume',//消费卡收款 -当日记录 | |||
name: 'todayConsume', | |||
component:todayConsume | |||
}, | |||
{ | |||
path: '/current',//消费卡收款 -当日记录 | |||
name: 'current', | |||
component:current | |||
}, | |||
]; | |||
@@ -8,15 +8,15 @@ export const apiUrl = { | |||
//交易,核销,收银的echarts图表数据 | |||
getTabletListOrder: '/api/wxDateAmountRecord/listOrder', | |||
getTabletListVerify: '/api/wxDateAmountRecord/listVerified', | |||
getMicroPayAmountOnDate:'/api/wxDateAmountRecord/listMicropay', | |||
getMicroPayAmountOnDate: '/api/wxDateAmountRecord/listMicropay', | |||
// 检查用户是否有权限修改收款账户 | |||
permitModifiy: "/api/merchant/permitModifiy", | |||
// B端用户详情 | |||
userDetail: '/api/user/detail', | |||
//获取积分操作记录 | |||
getCreditList:"/api/credit/list", | |||
getCreditList: "/api/credit/list", | |||
//获取会员可赠送的券列表 | |||
wxMerchantcouponSend:"/api/couponSend/list", | |||
wxMerchantcouponSend: "/api/couponSend/list", | |||
// 商户注券记录 | |||
wxMerchantcouponStory: "/api/couponSend/actionLog", | |||
@@ -25,5 +25,11 @@ export const apiUrl = { | |||
// mock | |||
qryPageConfig: '/test/pageConfig', | |||
msg: '/index/securityPolicy' | |||
msg: '/index/securityPolicy', | |||
// 查询券详情 | |||
ticketDetails: '/api/couponOrder/detail', | |||
// 券核销 | |||
cancel: "/api/couponOrder/verify", | |||
// 已被核销的券包 | |||
couponOrderListVerified: '/api/couponOrder/listVerified', | |||
} |
@@ -32,7 +32,7 @@ const instance = axios.create({ | |||
instance.interceptors.request.use( | |||
function(config) { | |||
config.headers.bid = store.state.token; | |||
config.headers.token = store.state.token; | |||
// config.headers.token = store.state.token; | |||
// 在发送请求之前做处理... | |||
config.headers = Object.assign( | |||
config.method === "post" | |||
@@ -8,7 +8,16 @@ | |||
<p>富茂服务商</p> | |||
</div> | |||
</div> | |||
<div class="writeOff "> | |||
<div class="classification " > | |||
<div v-for="(item,index) in classIfyList" :key="index" class="category" @click="toWriteoff(item.path)"> | |||
<div hover-class="active" :style="`background:${item.bg}`" > | |||
<i :class="item.icon"></i> | |||
</div> | |||
<span>{{item.text}}</span> | |||
</div> | |||
</div> | |||
</div> | |||
<!-- --> | |||
<div class="line-item-box"> | |||
<!-- 111 --> | |||
@@ -67,6 +76,38 @@ export default { | |||
showJiaoyi: true, | |||
showHexiao: true, | |||
showShouyin: true, | |||
classIfyList: [ | |||
{ | |||
text: "会员核销", | |||
icon: "iconfont icon-hexiao", | |||
id: 0, | |||
path:"/memberCancel" | |||
}, | |||
{ | |||
text: "消费卡收款", | |||
icon: "iconfont icon-shouye1", | |||
id: 1, | |||
path:"/memberGathering" | |||
}, | |||
{ | |||
text: "会员积分", | |||
icon: "iconfont icon-jifen", | |||
id: 4, | |||
path:"/memberIntegral" | |||
}, | |||
{ | |||
text: "会员赠券", | |||
icon: "iconfont icon-quan", | |||
id: 5, | |||
path:"/memberTicket" | |||
}, | |||
{ | |||
text: "营销结算", | |||
icon: "iconfont icon-jiesuan", | |||
id: 6, | |||
path:"/marketingClose" | |||
}, | |||
], | |||
}; | |||
}, | |||
mounted() { | |||
@@ -76,6 +117,9 @@ export default { | |||
}, | |||
methods: { | |||
toWriteoff(path){ | |||
this.$router.push(path) | |||
}, | |||
/** | |||
* 交易记录 | |||
*/ | |||
@@ -358,6 +402,29 @@ export default { | |||
background: #f8f8fa; | |||
margin-bottom: 1.6rem; | |||
} | |||
.writeOff { | |||
width: 100%; | |||
margin-top: 0.1rem; | |||
} | |||
.classification { | |||
position: relative; | |||
width: 93%; | |||
height: 3.7rem; | |||
background: #fff; | |||
border-radius: .15rem; | |||
margin: .3rem auto; | |||
z-index: 1000; | |||
width: 9.5rem; | |||
margin: 0 auto; | |||
display: flex; | |||
flex-wrap: wrap; | |||
} | |||
.category{ | |||
border: 0.01rem #eee solid; | |||
padding: 0.2rem; | |||
width: 25%; | |||
} | |||
.header-wrap { | |||
width: 100%; | |||
height: 4rem; | |||
@@ -444,4 +511,5 @@ export default { | |||
height: 4rem; | |||
margin-top: .2rem; | |||
} | |||
</style> |
@@ -57,14 +57,14 @@ export default { | |||
data: { | |||
phone: val.userName, | |||
password: val.password, | |||
appId: "wxa2c60cdeef4ec602", | |||
appId: "wx9ff823abeef23b94", | |||
// latitude: 34.51685, | |||
// longitude: 110.89456, | |||
} | |||
}).then(res => { | |||
console.log(res) | |||
if (res.code === 200) { | |||
// this.doLogin(res) | |||
this.doLogin(res) | |||
this.$router.push({ | |||
path: '/home' | |||
}) | |||
@@ -0,0 +1,63 @@ | |||
<template> | |||
<div class="box"> | |||
<div class="succeed"> | |||
<img src="@/assets/images/gou.png" alt="" class="succeed_img" /> | |||
</div> | |||
<div class="text">核销成功</div> | |||
<div class="check" @click="lookBilling">查看订单</div> | |||
<div class="active">返回首页</div> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
methods: { | |||
lookBilling(){ | |||
this.$router.push('/billing') | |||
} | |||
}, | |||
}; | |||
</script> | |||
<style scoped> | |||
.succeed { | |||
width: 3.5rem; | |||
height: 3.5rem; | |||
background-color: #52a0fd; | |||
border-radius: 50%; | |||
margin-top: 1rem; | |||
margin-left: auto; | |||
margin-right: auto; | |||
font-size: 3rem; | |||
color: #f5f5f5; | |||
} | |||
.succeed_img { | |||
margin: 0.3rem 0; | |||
} | |||
.text { | |||
font-size: 0.5rem; | |||
margin-top: 0.3rem; | |||
} | |||
.check { | |||
width: 80%; | |||
line-height: 1.3rem; | |||
border: 0.01rem #52a0fd solid; | |||
border-radius: 0.1rem; | |||
color: #52a0fd ; | |||
margin: 3% auto; | |||
margin-top: 4rem; | |||
font-size: 0.36rem; | |||
} | |||
.active{ | |||
width: 80%; | |||
line-height: 1.3rem; | |||
background: #52a0fd; | |||
color: #fff; | |||
margin: 3% auto; | |||
font-size: 0.36rem; | |||
border-radius: 0.1rem; | |||
margin-top: 0.5rem; | |||
} | |||
</style> |
@@ -0,0 +1,329 @@ | |||
<template> | |||
<div class="Box"> | |||
<div class="navigation"> | |||
<div | |||
class="navigation_box" | |||
v-for="(item, index) in navigation" | |||
:key="index" | |||
@click="switchover(index)" | |||
> | |||
<div :class="navigationIndex == index ? 'activity' : 'title'"> | |||
{{ item.name }} | |||
</div> | |||
<img | |||
src="@/assets/images/arrow.png" | |||
alt="" | |||
:class="navigationIndex == index ? 'activity_img' : 'title_img'" | |||
/> | |||
</div> | |||
</div> | |||
<div class="status1_Box" v-if="navigationIndex == 0"> | |||
<div class="status_1" v-for="item in 4"> | |||
<div class="numBox"> | |||
<div class="numBox_left">468663580839145472</div> | |||
<div class="numBox_right">2020-09-23 16:28:35</div> | |||
</div> | |||
<div class="accountBox numBox"> | |||
<div class="numBox_left">卡消费 自主结算</div> | |||
<div class="numBox_right" style="color: rgba(255, 106, 106, 1)"> | |||
应收:400 | |||
</div> | |||
</div> | |||
<div class="backStatus_1">已结算</div> | |||
</div> | |||
</div> | |||
<div class="status2_Box" v-if="navigationIndex == 1"> | |||
<div class="beginDate" @click="beginDateShow = !beginDateShow"> | |||
{{ beginDateText }} | |||
</div> | |||
<div class="beginText">至</div> | |||
<div class="beginDate endDate" @click="endDateShow = !endDateShow"> | |||
{{ endDateText }} | |||
</div> | |||
<div class="dateCha">查询</div> | |||
</div> | |||
<div class="status3_Box" v-if="navigationIndex == 2"> | |||
<div :class="status3_index==1?'status3_activity': 'my'" @click="status3_index=1">自主结算</div> | |||
<div :class="status3_index==2?'status3_activity':'wx'" @click="status3_index=2">微信分账</div> | |||
</div> | |||
<div class="status4_Box status3_Box" v-if="navigationIndex == 3"> | |||
<div :class="status4_index==1?'status3_activity': 'my'" @click="status4_index=1">未结算</div> | |||
<div :class="status4_index==2?'status3_activity':'wx'" @click="status4_index=2">已结算</div> | |||
</div> | |||
<div class="status5_Box status3_Box" v-if="navigationIndex == 4"> | |||
<div :class="status5_index==1?'status3_activity': 'my'" @click="status5_index=1">未结算</div> | |||
<div :class="status5_index==2?'status3_activity':'wx'" @click="status5_index=2">已结算</div> | |||
<div :class="status5_index==3?'status3_activity': 'my'" @click="status5_index=3">未结算</div> | |||
<div :class="status5_index==4?'status3_activity':'wx'" @click="status5_index=4">已结算</div> | |||
<div :class="status5_index==5?'status3_activity': 'my'" @click="status5_index=5">未结算</div> | |||
<div :class="status5_index==6?'status3_activity':'wx'" @click="status5_index=6">已结算</div> | |||
</div> | |||
<!-- <div class="noData">暂无数据!</div> --> | |||
<div class="bott_sum"> | |||
<div class="text">总计应收</div> | |||
<div class="sum_num">¥800.00</div> | |||
</div> | |||
<van-popup v-model="beginDateShow" position="bottom"> | |||
<van-datetime-picker | |||
v-model="deyText" | |||
type="date" | |||
title="选择年月日" | |||
:min-date="minDate" | |||
:max-date="maxDate" | |||
@cancel="beginDateShow = !beginDateShow" | |||
@confirm="setBeginDate" | |||
/> | |||
</van-popup> | |||
<van-popup v-model="endDateShow" position="bottom"> | |||
<van-datetime-picker | |||
v-model="deyText" | |||
type="date" | |||
title="选择年月日" | |||
:min-date="endminDate" | |||
:max-date="endmaxDate" | |||
@cancel="endDateShow = !endDateShow" | |||
@confirm="setEndDate" | |||
/> | |||
</van-popup> | |||
</div> | |||
</template> | |||
<script> | |||
import { formatDate } from "@/utils/cloud-utils"; | |||
import Vue from "vue"; | |||
import { Popup, DatetimePicker } from "vant"; | |||
Vue.use(DatetimePicker, Popup); | |||
export default { | |||
data() { | |||
return { | |||
navigation: [ | |||
{ | |||
name: "全部", | |||
}, | |||
{ | |||
name: "日期", | |||
}, | |||
{ | |||
name: "类型", | |||
}, | |||
{ | |||
name: "状态", | |||
}, | |||
{ | |||
name: "来源", | |||
}, | |||
], | |||
navigationIndex: 0, | |||
beginDateShow: false, | |||
endDateShow: false, | |||
minDate: new Date(2015, 0, 1), | |||
maxDate: new Date(2025, 10, 1), | |||
endminDate: new Date(2015, 0, 1), | |||
endmaxDate: new Date(2025, 10, 1), | |||
beginDateText: "开始时间", | |||
endDateText: "结束时间", | |||
deyText: new Date(), | |||
status3_index: 0, | |||
status4_index:0, | |||
status5_index:0 | |||
}; | |||
}, | |||
methods: { | |||
switchover(index) { | |||
this.navigationIndex = index; | |||
}, | |||
setBeginDate(value) { | |||
this.beginDateText = formatDate(value, "yyyy-MM-dd"); | |||
this.beginDateShow = !this.beginDateShow; | |||
console.log(formatDate(value, "yyyy-MM-dd")); | |||
}, | |||
setEndDate(value) { | |||
this.endDateText = formatDate(value, "yyyy-MM-dd"); | |||
this.endDateShow = !this.endDateShow; | |||
console.log(formatDate(value, "yyyy-MM-dd")); | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style scoped> | |||
.Box { | |||
background: #f6f6f6; | |||
} | |||
.navigation { | |||
overflow: hidden; | |||
border-bottom: 0.01rem solid #eee; | |||
background-color: #fff; | |||
} | |||
.navigation_box { | |||
width: 20%; | |||
float: left; | |||
overflow: hidden; | |||
} | |||
.title_img { | |||
width: 0.4rem; | |||
height: 0.2rem; | |||
float: left; | |||
margin: 0.5rem 0 0 0.1rem; | |||
} | |||
.title { | |||
line-height: 1.3rem; | |||
float: left; | |||
margin-left: 0.2rem; | |||
} | |||
.activity { | |||
line-height: 1.3rem; | |||
float: left; | |||
margin-left: 0.2rem; | |||
color: #52a0fd; | |||
} | |||
.activity_img { | |||
width: 0.4rem; | |||
height: 0.2rem; | |||
float: left; | |||
margin: 0.5rem 0 0 0.1rem; | |||
transform: rotateX(180deg); | |||
} | |||
.status_1 { | |||
position: relative; | |||
width: 96%; | |||
margin: 0 2%; | |||
height: 2rem; | |||
background-color: #ffffff; | |||
border-radius: 0.2rem; | |||
box-shadow: 0 0.16rem 0.53333rem 0 rgba(0, 0, 0, 0.15); | |||
margin-top: 0.5rem; | |||
} | |||
.numBox { | |||
overflow: hidden; | |||
} | |||
.numBox_left { | |||
float: left; | |||
padding: 0.3rem 0.3rem; | |||
font-size: 0.24rem; | |||
color: rgba(125, 125, 125, 1); | |||
} | |||
.numBox_right { | |||
float: right; | |||
padding: 0.3rem 0.3rem; | |||
color: rgba(125, 125, 125, 1); | |||
font-size: 0.36rem; | |||
} | |||
.backStatus_1 { | |||
line-height: 0.6rem; | |||
position: absolute; | |||
top: 0.5rem; | |||
left: 3.5rem; | |||
transform: rotate(-30deg); | |||
border: 0.01rem solid #ff6a6a; | |||
border-radius: 0.1rem; | |||
padding: 0.1rem 0.3rem; | |||
color: #ff6a6a; | |||
} | |||
.backStatus_2 { | |||
line-height: 0.6rem; | |||
position: absolute; | |||
top: 0.5rem; | |||
left: 3.5rem; | |||
transform: rotate(-30deg); | |||
border: 0.01rem solid #659ef6; | |||
border-radius: 0.1rem; | |||
padding: 0.1rem 0.3rem; | |||
color: #659ef6; | |||
} | |||
.bott_sum { | |||
position: fixed; | |||
line-height: 1.5rem; | |||
width: 100%; | |||
bottom: 0; | |||
left: 0; | |||
background: #fff; | |||
z-index: 1000; | |||
overflow: hidden; | |||
box-shadow: 1rpx -5rpx 11rpx rgb(202, 201, 201); | |||
} | |||
.text { | |||
float: left; | |||
padding: 0.3rem 0.3rem; | |||
} | |||
.sum_num { | |||
padding: 0.3rem 0.3rem; | |||
float: right; | |||
color: #ff6a6a; | |||
} | |||
.status2_Box { | |||
color: #888; | |||
overflow: hidden; | |||
} | |||
.beginDate { | |||
float: left; | |||
line-height: 1rem; | |||
border-bottom: 0.01rem solid #eee; | |||
padding: 0.2rem 0.5rem; | |||
margin-left: 0.2rem; | |||
} | |||
.beginText { | |||
line-height: 1rem; | |||
padding: 0.2rem 0.2rem; | |||
float: left; | |||
} | |||
.dateCha { | |||
width: 2rem; | |||
float: left; | |||
line-height: 0.5rem; | |||
padding: 0.2rem 0.5rem; | |||
margin-left: 0.2rem; | |||
background-color: #659ef6; | |||
color: #fff; | |||
border-radius: 0.2rem; | |||
margin-left: 0.5rem; | |||
margin-top: 0.3rem; | |||
} | |||
.noData { | |||
margin-top: 0.6rem; | |||
} | |||
.status3_Box { | |||
color: #888; | |||
overflow: hidden; | |||
} | |||
.my { | |||
width: 28%; | |||
float: left; | |||
line-height: 1rem; | |||
padding: 0 0.5rem; | |||
border: 1px solid rgba(234, 234, 234, 1); | |||
border-radius: 0.1rem; | |||
margin-top: 0.5rem; | |||
margin-left: 0.35rem; | |||
} | |||
.wx { | |||
width: 28%; | |||
float: left; | |||
float: left; | |||
line-height: 1rem; | |||
padding: 0 0.5rem; | |||
border: 1px solid rgba(234, 234, 234, 1); | |||
border-radius: 0.1rem; | |||
margin-top: 0.5rem; | |||
margin-left: 0.35rem; | |||
} | |||
.status3_activity { | |||
width: 28%; | |||
float: left; | |||
float: left; | |||
line-height: 1rem; | |||
padding: 0 0.5rem; | |||
border: 1px solid #659ef6; | |||
border-radius: 0.1rem; | |||
margin-top: 0.5rem; | |||
margin-left: 0.35rem; | |||
color: #659ef6; | |||
} | |||
</style> |
@@ -0,0 +1,164 @@ | |||
<template> | |||
<div id="Box"> | |||
<div class="topImgBox">{{thenDate}}</div> | |||
<div style="margin-top: 1.5rem;"></div> | |||
<div class="bill" v-for="(item,index) in list" :key="index"> | |||
<div class="bul_Box"> | |||
<div class="left">券状态</div> | |||
<div class="right" style="color:#52A0FD!important">已核销</div> | |||
</div> | |||
<div class="bul_Box"> | |||
<div class="left">券名称</div> | |||
<div class="right" style="color: #b8b8b8;" >护肤品通用券(B端)</div> | |||
</div> | |||
<div class="bul_Box"> | |||
<div class="left">券码</div> | |||
<div class="right" style="color: #b8b8b8;" >470088618483941376</div> | |||
</div> | |||
<div class="bul_Box"> | |||
<div class="left">核销时间</div> | |||
<div class="right" style="color: #b8b8b8;" >2020-09-27 15:26:09</div> | |||
</div> | |||
<div class="bul_Box"> | |||
<div class="left">购买用户</div> | |||
<div class="right" style="color: #b8b8b8;" >18872592633</div> | |||
</div> | |||
<div class="bul_Box"> | |||
<div class="left">核销员</div> | |||
<div class="right" style="color: #b8b8b8;" >周思琦</div> | |||
</div> | |||
<div class="bul_Box"> | |||
<div class="left">券面额</div> | |||
<div class="right" style="color: #b8b8b8;" >0.01元</div> | |||
</div> | |||
<div class="bul_Box"> | |||
<div class="left">券售价</div> | |||
<div class="right" style="color: #b8b8b8;" >0元</div> | |||
</div> | |||
</div> | |||
<div class="calendar" @click="show = !show"> | |||
<img src="@/assets/images/calendar.png" alt="" class="calendar_img"> | |||
</div> | |||
<van-calendar | |||
v-model="show" | |||
color="#52a0fd" | |||
:min-date="minDate" | |||
:max-date="maxDate" | |||
@confirm="onConfirm" | |||
/> | |||
</div> | |||
</template> | |||
<script> | |||
import { formatDate } from "@/utils/cloud-utils"; | |||
import Vue from "vue"; | |||
import { Calendar,Toast } from "vant"; | |||
Vue.use(Calendar).use(Toast); | |||
export default { | |||
data() { | |||
return { | |||
thenDate: "", | |||
show: false, | |||
minDate: new Date(2015, 0, 1), | |||
maxDate: new Date(2025, 0, 1), | |||
pageNum:1, | |||
pageSize:10, | |||
pitchTiem:'', | |||
list:[], | |||
}; | |||
}, | |||
methods: { | |||
onConfirm(date){ | |||
let tmepTime = formatDate(new Date(date), "yyyy-MM-dd") | |||
this.pitchTiem = tmepTime | |||
console.log(this.pitchTiem); | |||
//查询 | |||
}, | |||
getLsit(){ | |||
this.$http.couponOrderListVerified({ | |||
methods:'get', | |||
params:{ | |||
date:this.pitchTiem, | |||
pageNum:1, | |||
pageSize:10 | |||
} | |||
}).then(res=>{ | |||
const {code,data}= res | |||
if(code==200){ | |||
// console.log(data.list.list); | |||
this.list = data.list.list | |||
}else{ | |||
Toast(message); | |||
return; | |||
} | |||
}).catch(res=>{ | |||
Toast(res); | |||
}) | |||
}, | |||
}, | |||
mounted() { | |||
this.thenDate = formatDate(new Date(), "yyyy-MM-dd"); | |||
this.pitchTiem = this.thenDate | |||
this.getLsit() | |||
}, | |||
}; | |||
</script> | |||
<style scoped> | |||
#Box { | |||
width: 100%; | |||
background-color: #f8f8fa; | |||
} | |||
.topImgBox { | |||
position: fixed; | |||
top: -1.4rem; | |||
left: 0; | |||
width: 100%; | |||
overflow: hidden; | |||
height: 2.5rem; | |||
background-image: url("../../assets/images/bannerbg.png"); | |||
background-size: 100% 2.5rem; | |||
text-align: center; | |||
color: #ffffff; | |||
line-height: 3.8rem; | |||
font-size: 0.5rem; | |||
} | |||
.bill{ | |||
width: 96%; | |||
margin: 0 2%; | |||
background-color: #ffffff; | |||
border-radius: 0.2rem; | |||
margin-bottom: 0.5rem; | |||
} | |||
.bul_Box{ | |||
overflow: hidden; | |||
} | |||
.right{ | |||
float: right; | |||
font-size: 0.4rem; | |||
text-align: right; | |||
padding: 0.3rem 0.5rem; | |||
} | |||
.left{ | |||
float: left; | |||
font-size: 0.4rem; | |||
text-align: left; | |||
padding: 0.3rem 0.5rem; | |||
} | |||
.calendar{ | |||
width: 2rem; | |||
height: 2rem; | |||
background-color: #52a0fd; | |||
position: fixed; | |||
border-radius: 50%; | |||
bottom: 2rem; | |||
margin-left:40% ; | |||
} | |||
.calendar_img{ | |||
margin: 0.5rem; | |||
} | |||
</style> |
@@ -0,0 +1,186 @@ | |||
<template> | |||
<div id="Box" v-if="list.length!=0"> | |||
<div class="detail_msg"> | |||
<img :src="list.coverImg" alt="" class="goodImg"> | |||
<div class="titleBox"> | |||
<div class="name">{{list.title}}</div> | |||
<div class="time">{{`有效期至${createDate}`}}</div> | |||
</div> | |||
</div> | |||
<div class="tiemBox"> | |||
<div class="getTime"> 领券时间</div> | |||
<div class="timeSuffix"> {{expiredTime}}</div> | |||
</div> | |||
<div class="ticket tiemBox"> | |||
<div class="getTime"> 券码</div> | |||
<div class="timeSuffix"> {{list.id}}</div> | |||
</div> | |||
<div class=" tiemBox activity"> | |||
<div class="getTime"> 活动规则</div> | |||
<img src="@/assets/images/jian.png" alt="" class="timeSuffix_img"> | |||
</div> | |||
<div class="tiemBox"> | |||
<div class="getTime"> 券面额</div> | |||
<div class="timeSuffix">{{list.price/100}}</div> | |||
</div> | |||
<div class="tiemBox"> | |||
<div class="getTime"> 券售价</div> | |||
<div class="selling timeSuffix">{{list.salePrice/100}}</div> | |||
</div> | |||
<div class="tiemBox"> | |||
<div class="getTime"> 券状态</div> | |||
<div class="timeSuffix sellingStatus">{{gstTicketState(list.couponOrderStatus)}}</div> | |||
</div> | |||
<div id="user" @click="ifuse"> | |||
使用 | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import Vue from "vue"; | |||
import { Toast } from "vant"; | |||
import moment from "moment"; | |||
export default { | |||
data() { | |||
return { | |||
list:{}, | |||
createDate :"", | |||
expiredTime:"", | |||
stateText:[{ | |||
val:0, | |||
name:"未核销" | |||
},{ | |||
val:1, | |||
name:"已核销" | |||
},{ | |||
val:2, | |||
name:"已过期" | |||
},{ | |||
val:3, | |||
name:"已退款" | |||
},] | |||
} | |||
}, | |||
methods: { | |||
ifuse(){ | |||
//调用使用接口 | |||
this.$http.cancel({ | |||
method:"post", | |||
data:{ | |||
couponOrderId:this.list.id | |||
} | |||
}).then(res=>{ | |||
const {code ,message,data} = res | |||
if(code==200){ | |||
this.$router.push('/accomplish') | |||
}else{ | |||
Toast(message); | |||
} | |||
}).catch(res=>{ | |||
Toast(res); | |||
}) | |||
}, | |||
gstTicketState(value){ | |||
let temp = this.stateText.filter(res=>{ | |||
return res.val == value | |||
})[0].name | |||
// console.log(temp); | |||
// return temp.name | |||
} | |||
}, | |||
mounted() { | |||
if(this.$route.query.ticket){ | |||
this.list=JSON.parse(this.$route.query.ticket) | |||
this.createDate = moment(Number(this.list.createDate)).format("YYYY-MM-DD HH:mm:ss") | |||
this.expiredTime = moment(Number(this.list.expiredTime)).format("YYYY-MM-DD HH:mm:ss") | |||
}else{ | |||
console.log("券详情为空ticket"); | |||
} | |||
}, | |||
} | |||
</script> | |||
<style scoped> | |||
#Box{ | |||
width: 96%; | |||
margin: 0 2%; | |||
} | |||
.detail_msg{ | |||
width: 100%; | |||
overflow: hidden; | |||
} | |||
.goodImg{ | |||
width: 3.6rem; | |||
height: 2.6rem; | |||
float: left; | |||
border-radius: 0.3rem; | |||
margin: 0.3rem 0.3rem 0.3rem 0; | |||
} | |||
.titleBox{ | |||
float: left; | |||
margin-top: 0.3rem; | |||
text-align: left; | |||
} | |||
.name{ | |||
font-size: 0.4rem; | |||
font-weight: 800; | |||
margin-top: 0.2rem; | |||
} | |||
.time{ | |||
margin-top: 0.7rem; | |||
text-align: left ; | |||
} | |||
.tiemBox{ | |||
height: 1.2rem; | |||
border-top: 0.01rem #f5f5f5 solid; | |||
overflow: hidden; | |||
} | |||
.getTime{ | |||
line-height: 1.2rem; | |||
float: left; | |||
} | |||
.timeSuffix{ | |||
float: right; | |||
line-height: 1.2rem; | |||
color: #b8b8b8; | |||
} | |||
.timeSuffix_img{ | |||
width: 0.8rem; | |||
height: 0.8rem; | |||
float: right; | |||
line-height: 1.2rem; | |||
color: #b8b8b8; | |||
} | |||
.activity{ | |||
margin-top: 0.5rem; | |||
} | |||
.selling{ | |||
color:#ff3434; | |||
} | |||
.selling::after{ | |||
content: "元"; | |||
color: #b8b8b8; | |||
} | |||
.sellingStatus{ | |||
color: #ffae00; | |||
} | |||
#user{ | |||
position: fixed; | |||
border-radius: 0.2rem; | |||
width: 90%; | |||
background: #52a0fd; | |||
height: 1.3rem; | |||
line-height: 1.3rem; | |||
color: #fff; | |||
bottom: 3rem; | |||
left: 0.5rem; | |||
} | |||
</style> |
@@ -0,0 +1,213 @@ | |||
<template> | |||
<div class="Box"> | |||
<div class="backBox"> | |||
<div class="timeBox"> | |||
<div class="timeBox_left"> | |||
<div style="color: #999; padding-bottom: 0.5rem">开始时间</div> | |||
<div @click="startTiemShow=!startTiemShow">{{startTiem}}</div> | |||
</div> | |||
<div class="timeBox_centre" style="color: #999">至</div> | |||
<div class="timeBox_right"> | |||
<div style="color: #999; padding-bottom: 0.5rem">结束时间</div> | |||
<div @click="endTiemShow =!endTiemShow">{{endTiem}}</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="inquire">查询</div> | |||
<div class="acounts"> | |||
<div class="title">收款总计(元)</div> | |||
<div class="num">0.2</div> | |||
<div class="title1">1笔</div> | |||
<div class="billBox"> | |||
<div class="billBox_left"> | |||
<div>已到账(元)</div> | |||
<div style="color: #333; font-weight: bold; padding-bottom: 0.5rem"> | |||
0.2 | |||
</div> | |||
</div> | |||
<div class="billBox_right"> | |||
<div>未到账(元)</div> | |||
<div | |||
style="color: #ff6a6a; font-weight: bold; padding-bottom: 0.5rem" | |||
> | |||
0 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="content"> | |||
<div class="content_left"> | |||
<div class="content_left_text">2020-09-28 09:47:53</div> | |||
</div> | |||
<div class="content_rigth"> | |||
<div class="price">¥100</div> | |||
<div style="color: red">实收 ¥0.2</div> | |||
</div> | |||
</div> | |||
<div class="noData">暂无数据</div> | |||
<van-calendar | |||
v-model="startTiemShow" | |||
color="#52a0fd" | |||
:min-date="startMinDate" | |||
:max-date="startMaxDate" | |||
@confirm="onConfirm1" | |||
/> | |||
<van-calendar | |||
v-model="endTiemShow" | |||
color="#52a0fd" | |||
:min-date="endMinDate" | |||
:max-date="endMaxDate" | |||
@confirm="onConfirm2" | |||
/> | |||
</div> | |||
</template> | |||
<script> | |||
import { formatDate } from "@/utils/cloud-utils"; | |||
import Vue from "vue"; | |||
import { Calendar } from "vant"; | |||
Vue.use(Calendar); | |||
export default { | |||
data() { | |||
return { | |||
startTiemShow: false, | |||
endTiemShow: false, | |||
startTiem: formatDate(new Date() ,"yyyy-MM-dd") , | |||
endTiem:formatDate(new Date() ,"yyyy-MM-dd"), | |||
startMinDate:new Date(2015, 0, 1), | |||
startMaxDate:new Date(2025, 0, 1), | |||
endMinDate:new Date(2015, 0, 1), | |||
endMaxDate:new Date(2025, 0, 1), | |||
}; | |||
}, | |||
methods: { | |||
onConfirm1(date){ | |||
const tmepTime = formatDate(new Date(date), "yyyy-MM-dd") | |||
this.startTiem = tmepTime | |||
this.startTiemShow = false | |||
console.log(this.startTiem ,"????"); | |||
}, | |||
onConfirm2(date){ | |||
const tmepTime = formatDate(new Date(date), "yyyy-MM-dd") | |||
this.endTiem = tmepTime | |||
this.endTiemShow = false | |||
console.log(this.endTiem ,"????"); | |||
} | |||
}, | |||
}; | |||
</script> | |||
<style scoped> | |||
.Box { | |||
background: #f6f6f6; | |||
} | |||
.timeBox { | |||
overflow: hidden; | |||
} | |||
.backBox { | |||
width: 90%; | |||
margin: 0 5%; | |||
height: 3rem; | |||
background-image: url("../../../assets/images/reviveimg.png"); | |||
background-size: 9rem 3rem; | |||
background-repeat: no-repeat; | |||
border-radius: 0.3rem 0.3rem 0 0; | |||
overflow: hidden; | |||
} | |||
.timeBox_left { | |||
width: 40%; | |||
float: left; | |||
padding-top: 1rem; | |||
} | |||
.timeBox_centre { | |||
width: 20%; | |||
float: left; | |||
padding-top: 1.5rem; | |||
} | |||
.timeBox_right { | |||
width: 40%; | |||
float: right; | |||
padding-top: 1rem; | |||
} | |||
.inquire { | |||
width: 90%; | |||
margin: 0 5%; | |||
line-height: 1rem; | |||
text-align: center; | |||
background-color: #52a0fd; | |||
color: #fff; | |||
border-radius: 0 0 0.3rem 0.3rem; | |||
} | |||
.acounts { | |||
width: 90%; | |||
margin: 0 5%; | |||
border: 0.01rem #52a0fd solid; | |||
border-radius: 0.3rem; | |||
margin-top: 0.5rem; | |||
background-color: #fff; | |||
} | |||
.title { | |||
margin-top: 0.3rem; | |||
line-height: 1rem; | |||
text-align: center; | |||
color: rgba(153, 153, 153, 1); | |||
} | |||
.title1 { | |||
width: 80%; | |||
line-height: 1rem; | |||
text-align: center; | |||
color: rgba(153, 153, 153, 1); | |||
border-bottom: #e3f0ff 0.01rem solid; | |||
margin: 0 10%; | |||
} | |||
.num { | |||
font-size: 0.84rem; | |||
font-size: #000; | |||
line-height: 2rem; | |||
text-align: center; | |||
} | |||
.billBox { | |||
margin-top: 0.5rem; | |||
overflow: hidden; | |||
} | |||
.billBox_left { | |||
width: 50%; | |||
float: left; | |||
line-height: 0.8rem; | |||
color: #999; | |||
} | |||
.billBox_right { | |||
width: 50%; | |||
float: right; | |||
line-height: 0.8rem; | |||
color: #999; | |||
} | |||
.content { | |||
overflow: hidden; | |||
background-color: #fff; | |||
margin-top: 0.5rem; | |||
} | |||
.content_left { | |||
width: 50%; | |||
float: left; | |||
} | |||
.content_rigth { | |||
width: 50%; | |||
float: right; | |||
text-indent: 1.2rem; | |||
} | |||
.price { | |||
margin-top: 0.5rem; | |||
margin-bottom: 0.05rem; | |||
} | |||
.content_left_text { | |||
margin-top: 1rem; | |||
padding: 0.3rem 0; | |||
color: #999; | |||
} | |||
.noData{ | |||
line-height: 2rem; | |||
text-align: center; | |||
} | |||
</style> |
@@ -0,0 +1,58 @@ | |||
<template> | |||
<div class="Box"> | |||
<div class="RqBox"> | |||
<div class="text">扫描二维码向我付款</div> | |||
<div class="Rq"></div> | |||
</div> | |||
<div class="record" @click="goToday">收款记录</div> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
methods: { | |||
goToday(){ | |||
this.$router.push('/todayConsume') | |||
} | |||
}, | |||
} | |||
</script> | |||
<style scoped> | |||
.Box { | |||
background-color: #52a0fd; | |||
overflow: hidden; | |||
height: 100vh; | |||
} | |||
.RqBox { | |||
width: 94%; | |||
height: 10.5rem; | |||
margin: 0 3%; | |||
background-color: #ffffff; | |||
border-radius: 0.3rem; | |||
} | |||
.text { | |||
font-size: 0.42rem; | |||
text-align: center; | |||
font-family: PingFang-SC-Medium; | |||
font-weight: 500; | |||
padding-top: 1.4rem; | |||
color: rgba(51, 51, 51, 1); | |||
} | |||
.Rq{ | |||
background-color: bisque; | |||
width: 6rem; | |||
height: 5rem; | |||
margin: 1rem auto; | |||
} | |||
.record{ | |||
width: 94%; | |||
margin: 0 3%; | |||
background-color: #ffffff; | |||
border-radius: 0.2rem; | |||
color: #52a0fd; | |||
text-align: center; | |||
font-size: 0.42rem; | |||
margin-top: 0.5rem; | |||
line-height: 1rem; | |||
} | |||
</style> |
@@ -0,0 +1,122 @@ | |||
<template> | |||
<div class="Box"> | |||
<div class="topbox"> | |||
<div class="title">今日收款总额(元)</div> | |||
<div class="num">0.2</div> | |||
<div class="piece">1 笔</div> | |||
<div class="intOne"> | |||
<div class="left"> | |||
<div class="text1">已到账(元)</div> | |||
<div class="text" style="color: #fff; font-weight: bold">5</div> | |||
</div> | |||
<div class="right"> | |||
<div class="text1">未到账(元)</div> | |||
<div class="text" style="color: #fff; font-weight: bold">6</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="clearfix"> | |||
<div class="clearfix_left">2020-9-28</div> | |||
<div class="clearfix_right" @click="goCurrent">按日期查询</div> | |||
</div> | |||
<div class="contents"> | |||
<div class="contents_left">2020-09-28 09:47:53</div> | |||
<div class="contents_right"> | |||
<div style="color: #000;line-height: 1rem;">¥120</div> | |||
<div>实收 ¥0.2</div> | |||
</div> | |||
</div> | |||
<div class="noData">暂无数据</div> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
methods: { | |||
goCurrent(){ | |||
this.$router.push('/current') | |||
} | |||
}, | |||
} | |||
</script> | |||
<style scoped> | |||
.Box { | |||
overflow: hidden; | |||
font-size: 0.42rem; | |||
} | |||
.topbox { | |||
background-color: #52a0fd; | |||
color: rgba(255, 255, 255, 1); | |||
} | |||
.title { | |||
text-align: center; | |||
line-height: 1rem; | |||
} | |||
.num { | |||
font-size: 0.86rem; | |||
text-align: center; | |||
line-height: 2rem; | |||
} | |||
.piece { | |||
border-bottom: 0.01rem solid rgba(255, 255, 255, 1); | |||
line-height: 1rem; | |||
text-align: center; | |||
} | |||
.intOne { | |||
overflow: hidden; | |||
} | |||
.left { | |||
width: 50%; | |||
float: left; | |||
} | |||
.right { | |||
width: 50%; | |||
float: right; | |||
} | |||
.text { | |||
line-height: 1.2rem; | |||
} | |||
.text1 { | |||
padding-top: 0.6rem; | |||
} | |||
.clearfix { | |||
padding: 0 0.6rem; | |||
line-height: 1rem; | |||
background: #f6f6f6; | |||
overflow: hidden; | |||
font-size: 0.42rem; | |||
font-family: PingFang-SC-Medium; | |||
font-weight: 500; | |||
color: rgba(153, 153, 153, 1); | |||
} | |||
.clearfix_left { | |||
float: left; | |||
} | |||
.clearfix_right { | |||
float: right; | |||
color: #52a0fd; | |||
} | |||
.contents { | |||
padding: 0 0.6rem; | |||
overflow: hidden; | |||
font-size: 0.42rem; | |||
font-family: PingFang-SC-Medium; | |||
font-weight: 500; | |||
border-bottom: 0.01rem solid #f6f6f6; | |||
color: rgba(153, 153, 153, 1); | |||
padding-top: 0.5rem; | |||
} | |||
.contents_left { | |||
float: left; | |||
line-height: 1rem; | |||
} | |||
.contents_right { | |||
float: right; | |||
line-height: 0.8rem; | |||
padding-bottom: 0.5rem; | |||
} | |||
.noData{ | |||
line-height: 2rem; | |||
text-align: center; | |||
} | |||
</style> |
@@ -0,0 +1,124 @@ | |||
<template> | |||
<div class="box"> | |||
<div class="case"> | |||
<div class="text">券码</div> | |||
<span class="line"></span> | |||
<input | |||
type="text" | |||
v-model="codeText" | |||
class="inp" | |||
placeholder="请输入券码" | |||
/> | |||
<div class="search" @click="search"> | |||
<img class="searchImg" src="@/assets/images/search.png" alt="" /> | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import Vue from "vue"; | |||
import { Toast } from "vant"; | |||
Vue.use(Toast); | |||
export default { | |||
data() { | |||
return { | |||
codeText: "", | |||
list: {}, | |||
}; | |||
}, | |||
methods: { | |||
search() { | |||
if (this.codeText == "" || this.codeText.length == 0) { | |||
Toast("券码不能为空"); | |||
return; | |||
} else { | |||
this.$http | |||
.ticketDetails({ | |||
method: "get", | |||
params: { | |||
couponOrderId: this.codeText, | |||
}, | |||
}) | |||
.then((res) => { | |||
const { code, data, message } = res; | |||
if (code == 200) { | |||
console.log(data); | |||
this.$router.push({ | |||
path: "/commodity", | |||
query: { | |||
ticket: JSON.stringify(data), | |||
}, | |||
}); | |||
} else { | |||
Toast(message); | |||
return; | |||
} | |||
}) | |||
.catch((res) => { | |||
Toast(res); | |||
}); | |||
} | |||
//查询卷吗 | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style scoped> | |||
.box { | |||
overflow: hidden; | |||
} | |||
.case { | |||
width: 96%; | |||
margin: 30% 2%; | |||
height: 2.1rem; | |||
border-radius: 0.2rem; | |||
box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.15); | |||
overflow: hidden; | |||
} | |||
.text { | |||
float: left; | |||
line-height: 2.1rem; | |||
margin-left: 0.3rem; | |||
padding-right: 0.3rem; | |||
} | |||
.line { | |||
background: #ccc; | |||
width: 0.01rem; | |||
float: left; | |||
height: 0.9rem; | |||
margin-top: 0.6rem; | |||
} | |||
.inp { | |||
float: left; | |||
width: 50%; | |||
height: 0.8rem; | |||
margin: 0.6rem 0.3rem; | |||
color: #bfbfbf; | |||
font-size: 0.4rem; | |||
padding: 0.5rem 0; | |||
} | |||
input::-webkit-input-placeholder { | |||
/*WebKit browsers*/ | |||
color: #bfbfbf; | |||
} | |||
.search { | |||
float: right; | |||
width: 1.5rem; | |||
height: 1.5rem; | |||
background-color: #52a0fd; | |||
border-radius: 50%; | |||
margin-right: 0.6rem; | |||
margin-top: 0.3rem; | |||
} | |||
.searchImg { | |||
width: 70%; | |||
height: 70%; | |||
margin: 15%; | |||
} | |||
</style> | |||
@@ -0,0 +1,74 @@ | |||
<template> | |||
<div class="Box"> | |||
<div class="inquireBox"> | |||
<div class="text">手机号</div> | |||
<input type="text" class="phone" placeholder="请输入" v-model="phone"/> | |||
</div> | |||
<div class="but" @click="goUserMessage">提交</div> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
phone:'', | |||
} | |||
}, | |||
methods: { | |||
goUserMessage(){ | |||
this.$router.push('/userMessage') | |||
} | |||
}, | |||
} | |||
</script> | |||
<style scoped> | |||
.Box { | |||
background: #f6f6f6; | |||
} | |||
.inquireBox { | |||
width: 96%; | |||
margin: 0 2%; | |||
height: 2rem; | |||
background-color: #ffffff; | |||
border-radius: 0.2rem; | |||
box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.15); | |||
margin-top: 0.5rem; | |||
} | |||
.text { | |||
float: left; | |||
margin-left: 0.3rem; | |||
line-height: 2rem; | |||
} | |||
.phone { | |||
float: right; | |||
width: 6rem; | |||
line-height: 1.26rem; | |||
font-size: 0.3rem; | |||
text-align: right; | |||
margin-top: 0.3rem; | |||
margin-right: 0.3rem; | |||
} | |||
.but{ | |||
width: 96; | |||
margin: 0 2%; | |||
text-align: center; | |||
line-height: 1.3rem; | |||
border-radius: 0.1rem; | |||
background: #52a0fd; | |||
color: #ffffff; | |||
margin-top: 1.6rem; | |||
} | |||
.consumption_num{ | |||
float: right; | |||
width: 6rem; | |||
line-height: 1.26rem; | |||
font-size: 0.3rem; | |||
text-align: right; | |||
margin-top: 0.3rem; | |||
margin-right: 0.3rem; | |||
} | |||
</style> |
@@ -0,0 +1,26 @@ | |||
<template> | |||
<div> | |||
<member-public :data="rule"/> | |||
</div> | |||
</template> | |||
<script> | |||
import memberPublic from '../memberPublic' | |||
export default { | |||
components:{memberPublic}, | |||
data() { | |||
return { | |||
rule:{ | |||
QrText:"识别会员码", | |||
manuallyText:'查询手机号', | |||
manuallyClick:this.goDetails | |||
} | |||
} | |||
}, | |||
methods: { | |||
goDetails(){ | |||
this.$router.push('/integralParticulars') | |||
} | |||
}, | |||
} | |||
</script> |
@@ -0,0 +1,139 @@ | |||
<template> | |||
<div class="Box"> | |||
<div class="topBg"></div> | |||
<div class="textBox"> | |||
<div class="chieBox"> | |||
<div class="left">会员姓名(昵称):</div> | |||
<div class="right">乐</div> | |||
</div> | |||
<div class="chieBox"> | |||
<div class="left">会员等级:</div> | |||
<div class="right">普通会员</div> | |||
</div> | |||
<div class="chieBox"> | |||
<div class="left">手机号码:</div> | |||
<div class="right">17671632874</div> | |||
</div> | |||
</div> | |||
<div class="add" v-show="!addFalg" @click="addFalg=!addFalg">新增积分</div> | |||
<div class="consumption" v-show="addFalg"> | |||
<div class="text">消费金额</div> | |||
<div class="consumption_text">元</div> | |||
<input | |||
type="text" | |||
class="consumption_num" | |||
placeholder="请输入" | |||
v-model="consumption" | |||
/> | |||
</div> | |||
<div class="integral" v-show="addFalg" >123</div> | |||
<div class="submit" v-show="addFalg">提交</div> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
phone: "", | |||
consumption: "", | |||
addFalg:false | |||
}; | |||
}, | |||
}; | |||
</script> | |||
<style scoped> | |||
.Box { | |||
background: #f6f6f6; | |||
} | |||
.topBg { | |||
height: 0.8rem; | |||
background-image: url("../../../assets/images/bannerbg.png"); | |||
background-size: 100% 0.8rem; | |||
} | |||
.textBox { | |||
width: 96; | |||
margin: 0 2%; | |||
border-radius: 0.2rem; | |||
border: 1px solid #eaeaea; | |||
margin-top: -0.2rem; | |||
z-index: 10; | |||
box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.15); | |||
} | |||
.chieBox { | |||
overflow: hidden; | |||
background-color: #fff; | |||
} | |||
.left { | |||
float: left; | |||
color: #999999; | |||
line-height: 1.25rem; | |||
padding-left: 0.3rem; | |||
} | |||
.right { | |||
float: right; | |||
line-height: 1.25rem; | |||
padding-right: 0.3rem; | |||
} | |||
.add { | |||
width: 96; | |||
margin: 0 2%; | |||
border-radius: 0.3rem; | |||
background-color: #52a0fd; | |||
box-shadow: 0px 10px 22px 2px rgba(82, 160, 253, 0.51); | |||
line-height: 1.75rem; | |||
text-align: center; | |||
color: #fff; | |||
margin-top: 2rem; | |||
} | |||
.consumption { | |||
width: 96; | |||
margin: 0 2%; | |||
background-color: #ffffff; | |||
box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.15); | |||
border-radius: 0.2rem; | |||
overflow: hidden; | |||
margin-top: 0.5rem; | |||
} | |||
.consumption_num { | |||
height: 2rem; | |||
float: right; | |||
text-align: right; | |||
margin-right: 0.1rem; | |||
display: block; | |||
} | |||
.consumption_text { | |||
line-height: 2rem; | |||
color: #000; | |||
float: right; | |||
margin-right: 0.5rem; | |||
} | |||
.text { | |||
float: left; | |||
margin-left: 0.3rem; | |||
line-height: 2rem; | |||
} | |||
.integral { | |||
width: 95%; | |||
margin: 1rem 0 1rem 0; | |||
text-align: right; | |||
color: red; | |||
} | |||
.integral::before { | |||
content: "本次积分"; | |||
color: #000; | |||
} | |||
.submit { | |||
width: 96; | |||
margin: 0 2%; | |||
border-radius: 0.3rem; | |||
background-color: #52a0fd; | |||
box-shadow: 0px 10px 22px 2px rgba(82, 160, 253, 0.51); | |||
line-height: 1.5rem; | |||
text-align: center; | |||
color: #fff; | |||
margin-top: 1rem; | |||
} | |||
</style> |
@@ -0,0 +1,31 @@ | |||
<template> | |||
<div> | |||
<member-public :data="rule"/> | |||
</div> | |||
</template> | |||
<script> | |||
import memberPublic from './memberPublic' | |||
import http from '../../services/request' | |||
export default { | |||
components:{memberPublic}, | |||
data() { | |||
return { | |||
rule:{ | |||
QrText:"扫码核销、识别会员码", | |||
manuallyText:'手动核销', | |||
manuallyClick:this.goDetails, | |||
} | |||
} | |||
}, | |||
methods: { | |||
goDetails(){ | |||
this.$router.push('/details') | |||
} | |||
}, | |||
mounted() { | |||
}, | |||
} | |||
</script> |
@@ -0,0 +1,58 @@ | |||
<template> | |||
<div class="box"> | |||
<div class="content"> | |||
<img class="backimg" src="@/assets/images/scan.png" alt="" /> | |||
<button class="btn1" hover-class="active" bindtap="gotoSaoyiSao"> | |||
{{data.QrText}} | |||
</button> | |||
<button class="btn2" hover-class="active" bindtap="aoto" @click="data.manuallyClick">{{data.manuallyText}}</button> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
props:['data'] | |||
} | |||
</script> | |||
<style scoped> | |||
.box { | |||
background: #52a0fd; | |||
height: 100vh; | |||
} | |||
.content { | |||
width: 90%; | |||
margin: 0 5%; | |||
height: 12rem; | |||
background-color: #ffffff; | |||
border-radius: 0.1rem; | |||
} | |||
.backimg { | |||
width: 90%; | |||
margin-top: 0.1rem; | |||
margin-left: 5%; | |||
margin-right: 5%; | |||
} | |||
.btn1 { | |||
width: 70%; | |||
margin: 5% 15%; | |||
background:rgba(255,255,255,1); | |||
background-color: #52a0fd; | |||
font-size: 0.5rem; | |||
border-radius: 0.5rem; | |||
padding: 0.2rem 0; | |||
color: rgba(255,255,255,1); | |||
} | |||
.btn2{ | |||
width: 70%; | |||
margin: 5% 15%; | |||
color:rgba(81,160,252,1); | |||
background:rgba(255,255,255,1); | |||
font-size: 0.5rem; | |||
border-radius: 0.5rem; | |||
padding: 0.2rem 0; | |||
border:1px solid rgba(180,212,249,1); | |||
} | |||
</style> |
@@ -0,0 +1,74 @@ | |||
<template> | |||
<div class="Box"> | |||
<div class="inquireBox"> | |||
<div class="text">手机号</div> | |||
<input type="text" class="phone" placeholder="请输入" v-model="phone"/> | |||
</div> | |||
<div class="but" @click="goUserMessage">提交</div> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
phone:'', | |||
} | |||
}, | |||
methods: { | |||
goUserMessage(){ | |||
this.$router.push('/ticketDetails') | |||
} | |||
}, | |||
} | |||
</script> | |||
<style scoped> | |||
.Box { | |||
background: #f6f6f6; | |||
} | |||
.inquireBox { | |||
width: 96%; | |||
margin: 0 2%; | |||
height: 2rem; | |||
background-color: #ffffff; | |||
border-radius: 0.2rem; | |||
box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.15); | |||
margin-top: 0.5rem; | |||
} | |||
.text { | |||
float: left; | |||
margin-left: 0.3rem; | |||
line-height: 2rem; | |||
} | |||
.phone { | |||
float: right; | |||
width: 6rem; | |||
line-height: 1.26rem; | |||
font-size: 0.3rem; | |||
text-align: right; | |||
margin-top: 0.3rem; | |||
margin-right: 0.3rem; | |||
} | |||
.but{ | |||
width: 96; | |||
margin: 0 2%; | |||
text-align: center; | |||
line-height: 1.3rem; | |||
border-radius: 0.1rem; | |||
background: #52a0fd; | |||
color: #ffffff; | |||
margin-top: 1.6rem; | |||
} | |||
.consumption_num{ | |||
float: right; | |||
width: 6rem; | |||
line-height: 1.26rem; | |||
font-size: 0.3rem; | |||
text-align: right; | |||
margin-top: 0.3rem; | |||
margin-right: 0.3rem; | |||
} | |||
</style> |
@@ -0,0 +1,26 @@ | |||
<template> | |||
<div> | |||
<member-public :data="rule"/> | |||
</div> | |||
</template> | |||
<script> | |||
import memberPublic from '../memberPublic' | |||
export default { | |||
components:{memberPublic}, | |||
data() { | |||
return { | |||
rule:{ | |||
QrText:"识别会员码", | |||
manuallyText:'查询手机号', | |||
manuallyClick:this.goDetails | |||
} | |||
} | |||
}, | |||
methods: { | |||
goDetails(){ | |||
this.$router.push('/chPhone') | |||
} | |||
}, | |||
} | |||
</script> |
@@ -0,0 +1,226 @@ | |||
<template> | |||
<div class="Box"> | |||
<div class="topBg"></div> | |||
<div class="textBox"> | |||
<div class="chieBox"> | |||
<div class="left">会员姓名(昵称):</div> | |||
<div class="right">乐</div> | |||
</div> | |||
<div class="chieBox"> | |||
<div class="left">会员等级:</div> | |||
<div class="right">普通会员</div> | |||
</div> | |||
<div class="chieBox"> | |||
<div class="left">手机号码:</div> | |||
<div class="right">17671632874</div> | |||
</div> | |||
</div> | |||
<div class="noData" v-show="noData"> | |||
<img src="@/assets/images/jiaoyi.png" alt="" class="noDataImg" /> | |||
<div style="color: #999">暂无可赠送优惠券</div> | |||
</div> | |||
<div class="ticketListBox"> | |||
<div class="ticketList"> | |||
<img src="@/assets/images/selected2.png" alt="" class="ticketListImg" /> | |||
<div class="nameBox"> | |||
<div class="nameBox_left">蛋糕通用券</div> | |||
<div class="nameBox_right">库存:9</div> | |||
</div> | |||
<div class="validity">有效期:2020-09-25至2020-09-30</div> | |||
</div> | |||
</div> | |||
<div class="confirm" @click="showPopup">确认</div> | |||
<van-popup v-model="show" :round="true"> | |||
<div class="popupBox"> | |||
<div class="title">会员赠券</div> | |||
<div class="text_box"> | |||
<div class="constant">会员:未绑定</div> | |||
<div class="constant">手机号:12345644564</div> | |||
</div> | |||
<div class="ticket_Box"> | |||
<div class="discounts" v-for="item in 4" > | |||
<div class="name">红烧肉20元通用券</div> | |||
<div class="tiem">有效期:自领取后1日内有效</div> | |||
</div> | |||
</div> | |||
<div class="operation"> | |||
<div class="bnt1" @click="show=!show">确认</div> | |||
<div class="bnt2">取消</div> | |||
</div> | |||
</div> | |||
</van-popup> | |||
</div> | |||
</template> | |||
<script> | |||
import Vue from "vue"; | |||
import { Popup } from "vant"; | |||
Vue.use(Popup); | |||
export default { | |||
data() { | |||
return { | |||
noData: false, | |||
show: false, | |||
}; | |||
}, | |||
methods: { | |||
showPopup() { | |||
console.log( this.show ,666); | |||
this.show = true; | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style scoped> | |||
.Box { | |||
background: #f6f6f6; | |||
} | |||
.topBg { | |||
height: 0.8rem; | |||
background-image: url("../../../assets/images/bannerbg.png"); | |||
background-size: 100% 0.8rem; | |||
} | |||
.textBox { | |||
width: 96; | |||
margin: 0 2%; | |||
border-radius: 0.2rem; | |||
border: 1px solid #eaeaea; | |||
margin-top: -0.2rem; | |||
z-index: 10; | |||
box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.15); | |||
} | |||
.chieBox { | |||
overflow: hidden; | |||
background-color: #fff; | |||
} | |||
.left { | |||
float: left; | |||
color: #999999; | |||
line-height: 1.25rem; | |||
padding-left: 0.3rem; | |||
} | |||
.right { | |||
float: right; | |||
line-height: 1.25rem; | |||
padding-right: 0.3rem; | |||
} | |||
.confirm { | |||
width: 100%; | |||
border-radius: 0.2rem; | |||
line-height: 1.3rem; | |||
text-align: center; | |||
background-color: #52a0fd; | |||
color: #fff; | |||
position: fixed; | |||
bottom: 2rem; | |||
} | |||
.noData { | |||
} | |||
.noDataImg { | |||
width: 2rem; | |||
height: 2rem; | |||
margin-top: 2rem; | |||
margin-bottom: 0.3rem; | |||
} | |||
.ticketList { | |||
position: relative; | |||
width: 96%; | |||
margin: 0 2%; | |||
height: 2rem; | |||
background-color: #ffffff; | |||
border-radius: 0.2rem; | |||
box-shadow: 0 0.16rem 0.53333rem 0 rgba(0, 0, 0, 0.15); | |||
margin-top: 0.5rem; | |||
} | |||
.ticketListImg { | |||
width: 0.8rem; | |||
height: 0.8rem; | |||
position: absolute; | |||
top: 0; | |||
right: 0; | |||
} | |||
.nameBox { | |||
overflow: hidden; | |||
} | |||
.nameBox_left { | |||
float: left; | |||
padding-left: 0.5rem; | |||
padding-top: 0.5rem; | |||
} | |||
.nameBox_right { | |||
float: right; | |||
padding-right: 0.5rem; | |||
padding-top: 0.5rem; | |||
} | |||
.validity { | |||
color: #999999; | |||
text-align: left; | |||
padding-left: 0.5rem; | |||
padding-top: 0.3rem; | |||
} | |||
.popupBox { | |||
width: 8rem; | |||
border-radius: 0.4rem; | |||
} | |||
.title { | |||
padding: 0.5rem 0; | |||
} | |||
.text_box { | |||
overflow: hidden; | |||
} | |||
.constant { | |||
text-align: left; | |||
padding: 0.3rem 0.6rem; | |||
} | |||
.ticket_Box { | |||
overflow: scroll; | |||
height: 4.5rem; | |||
} | |||
.discounts { | |||
color: #fff; | |||
background-color: #52a0fd; | |||
border-radius: 0.3rem; | |||
box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.3); | |||
width: 90%; | |||
margin: 0 5%; | |||
text-align: left; | |||
margin-bottom: 0.5rem; | |||
} | |||
.name{ | |||
font-size: 0.36rem; | |||
padding: 0.3rem 0.2rem; | |||
} | |||
.tiem{ | |||
font-size: 0.26rem; | |||
padding: 0.3rem 0.2rem; | |||
} | |||
.operation{ | |||
overflow: hidden; | |||
} | |||
.bnt1{ | |||
width: 2rem; | |||
line-height: 1rem; | |||
background-color: #52a0fd; | |||
color: #fff; | |||
margin-left: 1.3rem; | |||
margin-top: 0.5rem; | |||
border-radius: 0.2rem; | |||
margin-bottom: 0.5rem; | |||
float: left; | |||
} | |||
.bnt2{ | |||
width: 2rem; | |||
line-height: 1rem; | |||
margin-left: 1.3rem; | |||
border-radius: 0.2rem; | |||
float: left; | |||
margin-top: 0.5rem; | |||
margin-bottom: 0.5rem; | |||
border: #999999 0.01rem solid; | |||
} | |||
</style> |
@@ -20,7 +20,7 @@ module.exports = { | |||
} | |||
}, | |||
'/fumao': { | |||
target: 'https://b.malls.iformall.com/B', | |||
target: 'https://btest.malls.iformall.com/B', | |||
changeOrigin: true, | |||
pathRewrite: { | |||
'^/fumao': '' | |||