@@ -80,4 +80,12 @@ export const apiUrl = { | |||
* 积分新增 | |||
*/ | |||
addCredit:"/api/credit/add", | |||
/** | |||
* 获取会员可赠送的券列表 | |||
*/ | |||
wxMerchantcouponSend:"/api/couponSend/list", | |||
/** | |||
* 商户注券操作 | |||
*/ | |||
wxMerchantcouponhandSel: "/api/couponSend/handSel", | |||
} |
@@ -1,11 +1,11 @@ | |||
<template> | |||
<div class="box"> | |||
<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 class="active" @click="goHome">返回首页</div> | |||
</div> | |||
</template> | |||
@@ -14,12 +14,21 @@ export default { | |||
methods: { | |||
lookBilling(){ | |||
this.$router.push('/billing') | |||
}, | |||
goHome(){ | |||
this.$router.push('/home') | |||
} | |||
}, | |||
}; | |||
</script> | |||
<style scoped> | |||
.Box{ | |||
width: 100%; | |||
overflow: hidden; | |||
height: 100%; | |||
} | |||
.succeed { | |||
width: 3.5rem; | |||
height: 3.5rem; | |||
@@ -1,46 +1,59 @@ | |||
<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="Box"> | |||
<div class="topImgBox">{{ thenDate }}</div> | |||
<div style="margin-top: 1.5rem"></div> | |||
<van-list | |||
v-model="loading" | |||
:finished="finished" | |||
finished-text="没有更多了" | |||
@load="onLoad" | |||
style="background-color: #f8f8fa;" | |||
> | |||
<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 class="left">券状态</div> | |||
<div | |||
class="right" | |||
:style="'color:' + setStype(item.couponOrderStatus, 'cl')" | |||
> | |||
{{ setStype(item.couponOrderStatus, "name") }} | |||
</div> | |||
</div> | |||
<div class="bul_Box"> | |||
<div class="left">券名称</div> | |||
<div class="right" style="color: #b8b8b8;" >护肤品通用券(B端)</div> | |||
<div class="left">券名称</div> | |||
<div class="right" style="color: #b8b8b8">{{item.title}}</div> | |||
</div> | |||
<div class="bul_Box"> | |||
<div class="left">券码</div> | |||
<div class="right" style="color: #b8b8b8;" >470088618483941376</div> | |||
<div class="left">券码</div> | |||
<div class="right" style="color: #b8b8b8">{{item.id}}</div> | |||
</div> | |||
<div class="bul_Box"> | |||
<div class="left">核销时间</div> | |||
<div class="right" style="color: #b8b8b8;" >2020-09-27 15:26:09</div> | |||
<div class="left">{{item.couponOrderStatus==1?'核销时间':'退款时间'}}</div> | |||
<div class="right" style="color: #b8b8b8">{{setTiem(item.updateDate,"YYYY-MM-DD HH:mm:ss")}}</div> | |||
</div> | |||
<div class="bul_Box"> | |||
<div class="left">购买用户</div> | |||
<div class="right" style="color: #b8b8b8;" >18872592633</div> | |||
<div class="left">购买用户</div> | |||
<div class="right" style="color: #b8b8b8">{{item.cuserPhone}}</div> | |||
</div> | |||
<div class="bul_Box"> | |||
<div class="left">核销员</div> | |||
<div class="right" style="color: #b8b8b8;" >周思琦</div> | |||
<div class="left">核销员</div> | |||
<div class="right" style="color: #b8b8b8">{{item.buserName}}</div> | |||
</div> | |||
<div class="bul_Box"> | |||
<div class="left">券面额</div> | |||
<div class="right" style="color: #b8b8b8;" >0.01元</div> | |||
<div class="left">{{item.type==8?'原价':'券面额'}}</div> | |||
<div class="right" style="color: #b8b8b8">{{item.price/100}}元</div> | |||
</div> | |||
<div class="bul_Box"> | |||
<div class="left">券售价</div> | |||
<div class="right" style="color: #b8b8b8;" >0元</div> | |||
<div class="left">{{item.type==8?'底价':'券售价'}}</div> | |||
<div class="right" style="color: #b8b8b8">{{item.couponPrice/100}}元</div> | |||
</div> | |||
</div> | |||
<div class="calendar" @click="show = !show"> | |||
<img src="@/assets/images/calendar.png" alt="" class="calendar_img"> | |||
</div> | |||
</van-list> | |||
<div class="calendar" @click="show = !show"> | |||
<img src="@/assets/images/calendar.png" alt="" class="calendar_img" /> | |||
</div> | |||
<van-calendar | |||
v-model="show" | |||
color="#52a0fd" | |||
@@ -54,62 +67,116 @@ | |||
<script> | |||
import { formatDate } from "@/utils/cloud-utils"; | |||
import Vue from "vue"; | |||
import { Calendar,Toast } from "vant"; | |||
Vue.use(Calendar).use(Toast); | |||
import { Calendar, Toast, List } from "vant"; | |||
import moment from "moment"; | |||
Vue.use(Calendar, Toast, List); | |||
export default { | |||
data() { | |||
return { | |||
loading: false, | |||
finished: false, | |||
thenDate: "", | |||
show: false, | |||
minDate: new Date(2015, 0, 1), | |||
maxDate: new Date(2025, 0, 1), | |||
pageNum:1, | |||
pageSize:10, | |||
pitchTiem:'', | |||
list:[], | |||
pageNum: 1, | |||
pageSize: 10, | |||
pitchTiem: "", | |||
list: [], | |||
scrollTopFalg: "", | |||
statusList: [ | |||
{ | |||
value: 0, | |||
name: "未核销", | |||
cl: "#FFAE00", | |||
}, | |||
{ | |||
value: 1, | |||
name: "已核销", | |||
cl: "#52A0FD", | |||
}, | |||
{ | |||
value: 2, | |||
name: "已过期", | |||
cl: "#FF5700", | |||
}, | |||
{ | |||
value: 3, | |||
name: "已退款", | |||
cl: "#FF5700", | |||
}, | |||
], | |||
}; | |||
}, | |||
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{ | |||
//时间处理 | |||
setTiem(temp, format) { | |||
//第一个参数是时间戳 第二个参数是格式 参考momentJS | |||
return moment(Number(temp)).format(format); | |||
}, | |||
//下拉加载 | |||
onLoad() { | |||
this.pageNum += 1; | |||
this.getLsit(); | |||
}, | |||
// status 状态值 value 返回类型 | |||
setStype(status, value) { | |||
if (value == "cl") { | |||
return this.statusList.filter((res) => { | |||
return res.value == status; | |||
})[0].cl; | |||
} else { | |||
return this.statusList.filter((res) => { | |||
return res.value == status; | |||
})[0].name; | |||
} | |||
}, | |||
onConfirm(date) { | |||
let tmepTime = formatDate(new Date(date), "yyyy-MM-dd"); | |||
this.pitchTiem = tmepTime; | |||
console.log(this.pitchTiem); | |||
//查询 | |||
}, | |||
getLsit() { | |||
this.loading = true; | |||
this.$http | |||
.couponOrderListVerified({ | |||
methods: "get", | |||
params: { | |||
date: this.pitchTiem, | |||
pageNum: this.pageNum, | |||
pageSize: 10, | |||
}, | |||
}) | |||
.then((res) => { | |||
const { code, data } = res; | |||
if (code == 200) { | |||
this.loading = false; | |||
this.list = this.list.concat(data.list.list); | |||
this.finished = data.list.list.length === 0; | |||
} else { | |||
Toast(message); | |||
return; | |||
} | |||
}).catch(res=>{ | |||
Toast(res); | |||
}) | |||
}, | |||
.catch((res) => { | |||
Toast(res); | |||
}); | |||
}, | |||
}, | |||
mounted() { | |||
this.thenDate = formatDate(new Date(), "yyyy-MM-dd"); | |||
this.pitchTiem = this.thenDate | |||
this.getLsit() | |||
this.pitchTiem = this.thenDate; | |||
this.getLsit(); | |||
}, | |||
}; | |||
</script> | |||
<style scoped> | |||
#Box { | |||
.Box { | |||
width: 100%; | |||
height: 100%; | |||
background-color: #f8f8fa; | |||
} | |||
.topImgBox { | |||
@@ -126,39 +193,38 @@ export default { | |||
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; | |||
.bill { | |||
width: 96%; | |||
margin: 0 2%; | |||
background-color: #ffffff; | |||
border-radius: 0.2rem; | |||
margin-bottom: 0.5rem; | |||
} | |||
.bul_Box{ | |||
overflow: hidden; | |||
.bul_Box { | |||
overflow: hidden; | |||
} | |||
.right{ | |||
float: right; | |||
font-size: 0.4rem; | |||
text-align: right; | |||
padding: 0.3rem 0.5rem; | |||
.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; | |||
.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 { | |||
width: 2rem; | |||
height: 2rem; | |||
background-color: #52a0fd; | |||
position: fixed; | |||
border-radius: 50%; | |||
bottom: 2rem; | |||
margin-left: 40%; | |||
} | |||
.calendar_img{ | |||
margin: 0.5rem; | |||
.calendar_img { | |||
margin: 0.5rem; | |||
} | |||
</style> |
@@ -1,40 +1,40 @@ | |||
<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 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 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 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 class="user" @click="ifuse">使用</div> | |||
</div> | |||
</template> | |||
@@ -43,144 +43,161 @@ 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); | |||
}) | |||
data() { | |||
return { | |||
list: {}, | |||
createDate: "", | |||
expiredTime: "", | |||
stateText: [ | |||
{ | |||
val: 0, | |||
name: "未核销", | |||
}, | |||
gstTicketState(value){ | |||
let temp = this.stateText.filter(res=>{ | |||
return res.val == value | |||
})[0].name | |||
// console.log(temp); | |||
// return temp.name | |||
} | |||
{ | |||
val: 1, | |||
name: "已核销", | |||
}, | |||
{ | |||
val: 2, | |||
name: "已过期", | |||
}, | |||
{ | |||
val: 3, | |||
name: "已退款", | |||
}, | |||
], | |||
}; | |||
}, | |||
methods: { | |||
ifuse() { | |||
Toast.loading({ | |||
duration: 0, // 持续展示 toast | |||
forbidClick: true, | |||
message: "加载中...", | |||
forbidClick: true, | |||
}); | |||
//调用使用接口 | |||
this.$http | |||
.cancel({ | |||
method: "post", | |||
data: { | |||
couponOrderId: this.list.id, | |||
}, | |||
}) | |||
.then((res) => { | |||
const { code, message, data } = res; | |||
if (code == 200) { | |||
Toast.clear(); | |||
this.$router.push("/accomplish"); | |||
} else { | |||
Toast.clear(); | |||
Toast(message); | |||
} | |||
}) | |||
.catch((res) => { | |||
Toast.clear(); | |||
Toast(res); | |||
}); | |||
}, | |||
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"); | |||
} | |||
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; | |||
#Box { | |||
width: 96%; | |||
margin: 0 2%; | |||
height: 100%; | |||
overflow: hidden; | |||
} | |||
.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> |
@@ -34,6 +34,12 @@ export default { | |||
Toast("券码不能为空"); | |||
return; | |||
} else { | |||
Toast.loading({ | |||
message: "加载中...", | |||
duration: 0, // 持续展示 toast | |||
forbidClick: true, | |||
forbidClick: true, | |||
}); | |||
this.$http | |||
.ticketDetails({ | |||
method: "get", | |||
@@ -44,7 +50,7 @@ export default { | |||
.then((res) => { | |||
const { code, data, message } = res; | |||
if (code == 200) { | |||
console.log(data); | |||
Toast.clear(); | |||
this.$router.push({ | |||
path: "/commodity", | |||
query: { | |||
@@ -52,11 +58,13 @@ export default { | |||
}, | |||
}); | |||
} else { | |||
Toast.clear(); | |||
Toast(message); | |||
return; | |||
} | |||
}) | |||
.catch((res) => { | |||
Toast.clear(); | |||
Toast(res); | |||
}); | |||
} | |||
@@ -79,6 +87,7 @@ export default { | |||
border-radius: 0.2rem; | |||
box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.15); | |||
overflow: hidden; | |||
background-color: #fff; | |||
} | |||
.text { | |||
float: left; | |||
@@ -5,20 +5,37 @@ | |||
<img src="@/assets/images/tick.png" alt="" class="succeedBox_left" /> | |||
<div class="succeedBox_right">操作成功</div> | |||
</div> | |||
<div class="succeedBox_Bot">{{ `本次积分:+100 ` }}</div> | |||
<div class="succeedBox_Bot">{{ text }}</div> | |||
</div> | |||
<div class="backBox"> | |||
<div class="goNo">继续</div> | |||
<div class="goBack">返回首页</div> | |||
<div class="goNo" @click="goBack">继续</div> | |||
<div class="goBack" @click="goHome">返回首页</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
props: ["text"], | |||
methods: { | |||
goBack() { | |||
this.$emit("goBack", false); | |||
}, | |||
goHome() { | |||
this.$router.push("/home"); | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style scoped> | |||
.Box { | |||
width: 100%; | |||
height: 100%; | |||
background: #f6f6f8; | |||
position: fixed; | |||
top: 0; | |||
left: 0; | |||
} | |||
.succeedBox { | |||
width: 80%; | |||
@@ -31,13 +31,18 @@ | |||
</div> | |||
<div class="integral" v-show="addFalg">{{ integral }}</div> | |||
<div class="submit" v-show="addFalg" @click="addIntegral">提交</div> | |||
<add-end text="添加成功!" @goBack ="control()" v-if="addBackFalg"></add-end> | |||
</div> | |||
</template> | |||
<script> | |||
import Vue from "vue"; | |||
import { mapState } from "vuex"; | |||
import addEnd from "./AddEnd" | |||
import { Toast } from "vant"; | |||
export default { | |||
components:{ | |||
addEnd | |||
}, | |||
data() { | |||
return { | |||
phone: "", | |||
@@ -45,12 +50,17 @@ export default { | |||
addFalg: false, | |||
list: "", | |||
integral: 0, | |||
addBackFalg: false, | |||
}; | |||
}, | |||
computed: { | |||
...mapState(["merchant_id"]), | |||
}, | |||
methods: { | |||
// 接收子组件的值 关闭子组件 | |||
control(data){ | |||
this.addBackFalg = data | |||
}, | |||
//提交添加积分 | |||
addIntegral() { | |||
const reg = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/; | |||
@@ -64,12 +74,13 @@ export default { | |||
operatorType: 3, | |||
receiptUrl:"", | |||
spendStr: this.integral, | |||
tags:[] | |||
tags:[], | |||
}, | |||
}).then(res=>{ | |||
const {code ,data,message} = res | |||
if(code == 200){ | |||
Toast('操作成功') | |||
console.log(6666666666); | |||
this.addBackFalg = true | |||
}else{ | |||
Toast(message) | |||
} | |||
@@ -137,6 +148,7 @@ export default { | |||
<style scoped> | |||
.Box { | |||
background: #f6f6f6; | |||
height: 100%; | |||
} | |||
.topBg { | |||
height: 0.8rem; | |||
@@ -39,6 +39,7 @@ export default { | |||
<style lang="less" scoped> | |||
.page-home { | |||
height: 100%; | |||
text-align: left; | |||
.back-box { | |||
position: absolute; | |||
@@ -4,15 +4,15 @@ | |||
<div class="textBox"> | |||
<div class="chieBox"> | |||
<div class="left">会员姓名(昵称):</div> | |||
<div class="right">乐</div> | |||
<div class="right">{{ list.name != undefined ? list.name : "" }}</div> | |||
</div> | |||
<div class="chieBox"> | |||
<div class="left">会员等级:</div> | |||
<div class="right">普通会员</div> | |||
<div class="right">{{ list.level != undefined ? list.level : "" }}</div> | |||
</div> | |||
<div class="chieBox"> | |||
<div class="left">手机号码:</div> | |||
<div class="right">17671632874</div> | |||
<div class="right">{{ phone }}</div> | |||
</div> | |||
</div> | |||
<div class="noData" v-show="noData"> | |||
@@ -20,16 +20,36 @@ | |||
<div style="color: #999">暂无可赠送优惠券</div> | |||
</div> | |||
<div class="ticketListBox"> | |||
<div | |||
class="ticketListBox" | |||
v-for="(item, index) in ticketList" | |||
:key="index" | |||
@click="setSign(index)" | |||
> | |||
<div class="ticketList"> | |||
<img src="@/assets/images/selected2.png" alt="" class="ticketListImg" /> | |||
<img | |||
v-if="item.sign" | |||
src="@/assets/images/selected2.png" | |||
alt="" | |||
class="ticketListImg" | |||
/> | |||
<div class="nameBox"> | |||
<div class="nameBox_left">蛋糕通用券</div> | |||
<div class="nameBox_right">库存:9</div> | |||
<div class="nameBox_left">{{ item.title }}</div> | |||
<div class="nameBox_right">{{ "库存:" + item.merchantRemain }}</div> | |||
</div> | |||
<div class="validity"> | |||
{{ | |||
item.validStartDate != undefined | |||
? `有效期:${setTiem( | |||
item.validStartDate, | |||
"YYYY-MM-DD HH:mm:ss" | |||
)}至${setTiem(item.validEndDate, "YYYY-MM-DD HH:mm:ss")}` | |||
: "有效期:自领取后" + item.validDays + "日内有效" | |||
}} | |||
</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"> | |||
@@ -39,36 +59,142 @@ | |||
<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 class="discounts" v-for="item in pitcnOn" :key="item.id"> | |||
<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 class="bnt1" @click="submit">确认</div> | |||
<div class="bnt2" @click="show = !show">取消</div> | |||
</div> | |||
</div> | |||
</van-popup> | |||
<add-end text="赠券成功!" @goBack ="control()" v-if="addFalg"></add-end> | |||
</div> | |||
</template> | |||
<script> | |||
import Vue from "vue"; | |||
import { Popup } from "vant"; | |||
Vue.use(Popup); | |||
import { Popup, Toast } from "vant"; | |||
import moment from "moment"; | |||
import addEnd from "../integral/AddEnd" | |||
Vue.use(Popup, Toast); | |||
export default { | |||
components:{ | |||
addEnd | |||
}, | |||
data() { | |||
return { | |||
noData: false, | |||
show: false, | |||
list: "", | |||
phone: "", | |||
ticketList: [], | |||
pitcnOn: [], //选中的券列表 | |||
addFalg: false, | |||
}; | |||
}, | |||
methods: { | |||
// 接收子组件的值 关闭子组件 | |||
control(data){ | |||
this.addFalg = data | |||
this.show = data | |||
}, | |||
//提交 | |||
submit() { | |||
let arr = [] | |||
this.pitcnOn.map(item=>{ | |||
arr.push(item.id) | |||
}) | |||
this.$http.wxMerchantcouponhandSel({ | |||
method: "post", | |||
data: { | |||
cUserId: this.list.id, | |||
wxCouponSendIds: arr, | |||
}, | |||
}).then(res=>{ | |||
const {code ,data,message} = res | |||
if(code == 200){ | |||
this.show = !this.show | |||
this.addFalg = true | |||
}else{ | |||
this.show = !this.show | |||
Toast(message); | |||
} | |||
}).catch(res=>{ | |||
this.show = !this.show | |||
Toast(res); | |||
}) | |||
}, | |||
//时间处理 | |||
setTiem(temp, format) { | |||
//第一个参数是时间戳 第二个参数是格式 参考momentJS | |||
return moment(Number(temp)).format(format); | |||
}, | |||
//改变选中状态展示图片 | |||
setSign(index) { | |||
this.ticketList[index].sign = !this.ticketList[index].sign; | |||
}, | |||
showPopup() { | |||
console.log( this.show ,666); | |||
this.pitcnOn = this.ticketList.filter((item) => { | |||
return item.sign == true; | |||
}); | |||
this.show = true; | |||
}, | |||
getTicketList() { | |||
this.$http | |||
.wxMerchantcouponSend({ | |||
methods: "get", | |||
params: { | |||
pageNum: 1, | |||
pageSize: 6, | |||
sendType: 7, | |||
expired: 0, | |||
status: 0, | |||
}, | |||
}) | |||
.then((res) => { | |||
const { code, data, message } = res; | |||
if (code == 200) { | |||
data.list.map((res) => { | |||
res.sign = false; | |||
}); | |||
this.ticketList = data.list; | |||
} else { | |||
Toast(message); | |||
} | |||
}) | |||
.catch((res) => { | |||
Toast(res); | |||
}); | |||
}, | |||
getUserInfo() { | |||
this.$http | |||
.findByPhone({ | |||
methods: "get", | |||
params: { | |||
phone: this.phone, | |||
}, | |||
}) | |||
.then((res) => { | |||
const { code, data, message } = res; | |||
if (code == 200) { | |||
this.list = data; | |||
} else { | |||
Toast(message); | |||
} | |||
}) | |||
.catch((res) => { | |||
Toast(res); | |||
}); | |||
}, | |||
}, | |||
mounted() { | |||
this.phone = this.$route.query.phone; | |||
this.getUserInfo(); | |||
this.getTicketList(); | |||
}, | |||
}; | |||
</script> | |||
@@ -189,38 +315,37 @@ export default { | |||
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; | |||
} | |||
.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> |