| @@ -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': '' | |||