Kaynağa Gözat

【导航栏合并】

master
GL 4 yıl önce
ebeveyn
işleme
c2e17b26c7
26 değiştirilmiş dosya ile 2103 ekleme ve 10 silme
  1. +2
    -1
      package.json
  2. BIN
      src/assets/images/calendar.png
  3. BIN
      src/assets/images/gou.png
  4. BIN
      src/assets/images/search.png
  5. +105
    -0
      src/routers/index.js
  6. +10
    -4
      src/services/apiUrl.js
  7. +1
    -1
      src/services/request.js
  8. +69
    -1
      src/views/home/index.vue
  9. +2
    -2
      src/views/login/index.vue
  10. +63
    -0
      src/views/navigation/accomplish.vue
  11. +329
    -0
      src/views/navigation/accounts/marketingClose.vue
  12. +164
    -0
      src/views/navigation/billing.vue
  13. +186
    -0
      src/views/navigation/commodity.vue
  14. +213
    -0
      src/views/navigation/consume/current.vue
  15. +58
    -0
      src/views/navigation/consume/memberGathering.vue
  16. +122
    -0
      src/views/navigation/consume/todayConsume.vue
  17. +124
    -0
      src/views/navigation/details.vue
  18. +74
    -0
      src/views/navigation/integral/integralParticulars.vue
  19. +26
    -0
      src/views/navigation/integral/memberIntegral.vue
  20. +139
    -0
      src/views/navigation/integral/userMessage.vue
  21. +31
    -0
      src/views/navigation/memberCancel.vue
  22. +58
    -0
      src/views/navigation/memberPublic.vue
  23. +74
    -0
      src/views/navigation/ticket/chPhone.vue
  24. +26
    -0
      src/views/navigation/ticket/memberTicket.vue
  25. +226
    -0
      src/views/navigation/ticket/ticketDetails.vue
  26. +1
    -1
      vue.config.js

+ 2
- 1
package.json Dosyayı Görüntüle

@@ -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",


BIN
src/assets/images/calendar.png Dosyayı Görüntüle

Önce Sonra
Genişlik: 32  |  Yükseklik: 32  |  Boyut: 366 B

BIN
src/assets/images/gou.png Dosyayı Görüntüle

Önce Sonra
Genişlik: 48  |  Yükseklik: 48  |  Boyut: 599 B

BIN
src/assets/images/search.png Dosyayı Görüntüle

Önce Sonra
Genişlik: 48  |  Yükseklik: 48  |  Boyut: 1.2 KiB

+ 105
- 0
src/routers/index.js Dosyayı Görüntüle

@@ -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
},

];



+ 10
- 4
src/services/apiUrl.js Dosyayı Görüntüle

@@ -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',
}

+ 1
- 1
src/services/request.js Dosyayı Görüntüle

@@ -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"


+ 69
- 1
src/views/home/index.vue Dosyayı Görüntüle

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

+ 2
- 2
src/views/login/index.vue Dosyayı Görüntüle

@@ -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'
})


+ 63
- 0
src/views/navigation/accomplish.vue Dosyayı Görüntüle

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

+ 329
- 0
src/views/navigation/accounts/marketingClose.vue Dosyayı Görüntüle

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

+ 164
- 0
src/views/navigation/billing.vue Dosyayı Görüntüle

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

+ 186
- 0
src/views/navigation/commodity.vue Dosyayı Görüntüle

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

+ 213
- 0
src/views/navigation/consume/current.vue Dosyayı Görüntüle

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

+ 58
- 0
src/views/navigation/consume/memberGathering.vue Dosyayı Görüntüle

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

+ 122
- 0
src/views/navigation/consume/todayConsume.vue Dosyayı Görüntüle

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

+ 124
- 0
src/views/navigation/details.vue Dosyayı Görüntüle

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



+ 74
- 0
src/views/navigation/integral/integralParticulars.vue Dosyayı Görüntüle

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

+ 26
- 0
src/views/navigation/integral/memberIntegral.vue Dosyayı Görüntüle

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

+ 139
- 0
src/views/navigation/integral/userMessage.vue Dosyayı Görüntüle

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

+ 31
- 0
src/views/navigation/memberCancel.vue Dosyayı Görüntüle

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

+ 58
- 0
src/views/navigation/memberPublic.vue Dosyayı Görüntüle

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

+ 74
- 0
src/views/navigation/ticket/chPhone.vue Dosyayı Görüntüle

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

+ 26
- 0
src/views/navigation/ticket/memberTicket.vue Dosyayı Görüntüle

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

+ 226
- 0
src/views/navigation/ticket/ticketDetails.vue Dosyayı Görüntüle

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

+ 1
- 1
vue.config.js Dosyayı Görüntüle

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


Yükleniyor…
İptal
Kaydet