@@ -80,4 +80,12 @@ export const apiUrl = { | |||||
* 积分新增 | * 积分新增 | ||||
*/ | */ | ||||
addCredit:"/api/credit/add", | addCredit:"/api/credit/add", | ||||
/** | |||||
* 获取会员可赠送的券列表 | |||||
*/ | |||||
wxMerchantcouponSend:"/api/couponSend/list", | |||||
/** | |||||
* 商户注券操作 | |||||
*/ | |||||
wxMerchantcouponhandSel: "/api/couponSend/handSel", | |||||
} | } |
@@ -1,11 +1,11 @@ | |||||
<template> | <template> | ||||
<div class="box"> | |||||
<div class="Box"> | |||||
<div class="succeed"> | <div class="succeed"> | ||||
<img src="@/assets/images/gou.png" alt="" class="succeed_img" /> | <img src="@/assets/images/gou.png" alt="" class="succeed_img" /> | ||||
</div> | </div> | ||||
<div class="text">核销成功</div> | <div class="text">核销成功</div> | ||||
<div class="check" @click="lookBilling">查看订单</div> | <div class="check" @click="lookBilling">查看订单</div> | ||||
<div class="active">返回首页</div> | |||||
<div class="active" @click="goHome">返回首页</div> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
@@ -14,12 +14,21 @@ export default { | |||||
methods: { | methods: { | ||||
lookBilling(){ | lookBilling(){ | ||||
this.$router.push('/billing') | this.$router.push('/billing') | ||||
}, | |||||
goHome(){ | |||||
this.$router.push('/home') | |||||
} | } | ||||
}, | }, | ||||
}; | }; | ||||
</script> | </script> | ||||
<style scoped> | <style scoped> | ||||
.Box{ | |||||
width: 100%; | |||||
overflow: hidden; | |||||
height: 100%; | |||||
} | |||||
.succeed { | .succeed { | ||||
width: 3.5rem; | width: 3.5rem; | ||||
height: 3.5rem; | height: 3.5rem; | ||||
@@ -1,46 +1,59 @@ | |||||
<template> | <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="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> | ||||
<div class="bul_Box"> | <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> | ||||
<div class="bul_Box"> | <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> | ||||
<div class="bul_Box"> | <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> | ||||
<div class="bul_Box"> | <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> | ||||
<div class="bul_Box"> | <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> | ||||
<div class="bul_Box"> | <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> | ||||
<div class="bul_Box"> | <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> | |||||
<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> | </div> | ||||
<van-calendar | <van-calendar | ||||
v-model="show" | v-model="show" | ||||
color="#52a0fd" | color="#52a0fd" | ||||
@@ -54,62 +67,116 @@ | |||||
<script> | <script> | ||||
import { formatDate } from "@/utils/cloud-utils"; | import { formatDate } from "@/utils/cloud-utils"; | ||||
import Vue from "vue"; | 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 { | export default { | ||||
data() { | data() { | ||||
return { | return { | ||||
loading: false, | |||||
finished: false, | |||||
thenDate: "", | thenDate: "", | ||||
show: false, | show: false, | ||||
minDate: new Date(2015, 0, 1), | minDate: new Date(2015, 0, 1), | ||||
maxDate: new Date(2025, 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: { | 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); | Toast(message); | ||||
return; | return; | ||||
} | } | ||||
}).catch(res=>{ | |||||
Toast(res); | |||||
}) | }) | ||||
}, | |||||
.catch((res) => { | |||||
Toast(res); | |||||
}); | |||||
}, | |||||
}, | }, | ||||
mounted() { | mounted() { | ||||
this.thenDate = formatDate(new Date(), "yyyy-MM-dd"); | this.thenDate = formatDate(new Date(), "yyyy-MM-dd"); | ||||
this.pitchTiem = this.thenDate | |||||
this.getLsit() | |||||
this.pitchTiem = this.thenDate; | |||||
this.getLsit(); | |||||
}, | }, | ||||
}; | }; | ||||
</script> | </script> | ||||
<style scoped> | <style scoped> | ||||
#Box { | |||||
.Box { | |||||
width: 100%; | width: 100%; | ||||
height: 100%; | |||||
background-color: #f8f8fa; | background-color: #f8f8fa; | ||||
} | } | ||||
.topImgBox { | .topImgBox { | ||||
@@ -126,39 +193,38 @@ export default { | |||||
line-height: 3.8rem; | line-height: 3.8rem; | ||||
font-size: 0.5rem; | 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> | </style> |
@@ -1,40 +1,40 @@ | |||||
<template> | <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> | ||||
<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> | |||||
<div class="user" @click="ifuse">使用</div> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
@@ -43,144 +43,161 @@ import Vue from "vue"; | |||||
import { Toast } from "vant"; | import { Toast } from "vant"; | ||||
import moment from "moment"; | import moment from "moment"; | ||||
export default { | 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> | </script> | ||||
<style scoped> | <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> | </style> |
@@ -34,6 +34,12 @@ export default { | |||||
Toast("券码不能为空"); | Toast("券码不能为空"); | ||||
return; | return; | ||||
} else { | } else { | ||||
Toast.loading({ | |||||
message: "加载中...", | |||||
duration: 0, // 持续展示 toast | |||||
forbidClick: true, | |||||
forbidClick: true, | |||||
}); | |||||
this.$http | this.$http | ||||
.ticketDetails({ | .ticketDetails({ | ||||
method: "get", | method: "get", | ||||
@@ -44,7 +50,7 @@ export default { | |||||
.then((res) => { | .then((res) => { | ||||
const { code, data, message } = res; | const { code, data, message } = res; | ||||
if (code == 200) { | if (code == 200) { | ||||
console.log(data); | |||||
Toast.clear(); | |||||
this.$router.push({ | this.$router.push({ | ||||
path: "/commodity", | path: "/commodity", | ||||
query: { | query: { | ||||
@@ -52,11 +58,13 @@ export default { | |||||
}, | }, | ||||
}); | }); | ||||
} else { | } else { | ||||
Toast.clear(); | |||||
Toast(message); | Toast(message); | ||||
return; | return; | ||||
} | } | ||||
}) | }) | ||||
.catch((res) => { | .catch((res) => { | ||||
Toast.clear(); | |||||
Toast(res); | Toast(res); | ||||
}); | }); | ||||
} | } | ||||
@@ -79,6 +87,7 @@ export default { | |||||
border-radius: 0.2rem; | border-radius: 0.2rem; | ||||
box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.15); | box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.15); | ||||
overflow: hidden; | overflow: hidden; | ||||
background-color: #fff; | |||||
} | } | ||||
.text { | .text { | ||||
float: left; | float: left; | ||||
@@ -5,20 +5,37 @@ | |||||
<img src="@/assets/images/tick.png" alt="" class="succeedBox_left" /> | <img src="@/assets/images/tick.png" alt="" class="succeedBox_left" /> | ||||
<div class="succeedBox_right">操作成功</div> | <div class="succeedBox_right">操作成功</div> | ||||
</div> | </div> | ||||
<div class="succeedBox_Bot">{{ `本次积分:+100 ` }}</div> | |||||
<div class="succeedBox_Bot">{{ text }}</div> | |||||
</div> | </div> | ||||
<div class="backBox"> | <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> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | |||||
export default { | |||||
props: ["text"], | |||||
methods: { | |||||
goBack() { | |||||
this.$emit("goBack", false); | |||||
}, | |||||
goHome() { | |||||
this.$router.push("/home"); | |||||
}, | |||||
}, | |||||
}; | |||||
</script> | |||||
<style scoped> | <style scoped> | ||||
.Box { | .Box { | ||||
width: 100%; | |||||
height: 100%; | height: 100%; | ||||
background: #f6f6f8; | background: #f6f6f8; | ||||
position: fixed; | |||||
top: 0; | |||||
left: 0; | |||||
} | } | ||||
.succeedBox { | .succeedBox { | ||||
width: 80%; | width: 80%; | ||||
@@ -31,13 +31,18 @@ | |||||
</div> | </div> | ||||
<div class="integral" v-show="addFalg">{{ integral }}</div> | <div class="integral" v-show="addFalg">{{ integral }}</div> | ||||
<div class="submit" v-show="addFalg" @click="addIntegral">提交</div> | <div class="submit" v-show="addFalg" @click="addIntegral">提交</div> | ||||
<add-end text="添加成功!" @goBack ="control()" v-if="addBackFalg"></add-end> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import Vue from "vue"; | import Vue from "vue"; | ||||
import { mapState } from "vuex"; | import { mapState } from "vuex"; | ||||
import addEnd from "./AddEnd" | |||||
import { Toast } from "vant"; | import { Toast } from "vant"; | ||||
export default { | export default { | ||||
components:{ | |||||
addEnd | |||||
}, | |||||
data() { | data() { | ||||
return { | return { | ||||
phone: "", | phone: "", | ||||
@@ -45,12 +50,17 @@ export default { | |||||
addFalg: false, | addFalg: false, | ||||
list: "", | list: "", | ||||
integral: 0, | integral: 0, | ||||
addBackFalg: false, | |||||
}; | }; | ||||
}, | }, | ||||
computed: { | computed: { | ||||
...mapState(["merchant_id"]), | ...mapState(["merchant_id"]), | ||||
}, | }, | ||||
methods: { | methods: { | ||||
// 接收子组件的值 关闭子组件 | |||||
control(data){ | |||||
this.addBackFalg = data | |||||
}, | |||||
//提交添加积分 | //提交添加积分 | ||||
addIntegral() { | addIntegral() { | ||||
const reg = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/; | const reg = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/; | ||||
@@ -64,12 +74,13 @@ export default { | |||||
operatorType: 3, | operatorType: 3, | ||||
receiptUrl:"", | receiptUrl:"", | ||||
spendStr: this.integral, | spendStr: this.integral, | ||||
tags:[] | |||||
tags:[], | |||||
}, | }, | ||||
}).then(res=>{ | }).then(res=>{ | ||||
const {code ,data,message} = res | const {code ,data,message} = res | ||||
if(code == 200){ | if(code == 200){ | ||||
Toast('操作成功') | |||||
console.log(6666666666); | |||||
this.addBackFalg = true | |||||
}else{ | }else{ | ||||
Toast(message) | Toast(message) | ||||
} | } | ||||
@@ -137,6 +148,7 @@ export default { | |||||
<style scoped> | <style scoped> | ||||
.Box { | .Box { | ||||
background: #f6f6f6; | background: #f6f6f6; | ||||
height: 100%; | |||||
} | } | ||||
.topBg { | .topBg { | ||||
height: 0.8rem; | height: 0.8rem; | ||||
@@ -39,6 +39,7 @@ export default { | |||||
<style lang="less" scoped> | <style lang="less" scoped> | ||||
.page-home { | .page-home { | ||||
height: 100%; | |||||
text-align: left; | text-align: left; | ||||
.back-box { | .back-box { | ||||
position: absolute; | position: absolute; | ||||
@@ -4,15 +4,15 @@ | |||||
<div class="textBox"> | <div class="textBox"> | ||||
<div class="chieBox"> | <div class="chieBox"> | ||||
<div class="left">会员姓名(昵称):</div> | <div class="left">会员姓名(昵称):</div> | ||||
<div class="right">乐</div> | |||||
<div class="right">{{ list.name != undefined ? list.name : "" }}</div> | |||||
</div> | </div> | ||||
<div class="chieBox"> | <div class="chieBox"> | ||||
<div class="left">会员等级:</div> | <div class="left">会员等级:</div> | ||||
<div class="right">普通会员</div> | |||||
<div class="right">{{ list.level != undefined ? list.level : "" }}</div> | |||||
</div> | </div> | ||||
<div class="chieBox"> | <div class="chieBox"> | ||||
<div class="left">手机号码:</div> | <div class="left">手机号码:</div> | ||||
<div class="right">17671632874</div> | |||||
<div class="right">{{ phone }}</div> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="noData" v-show="noData"> | <div class="noData" v-show="noData"> | ||||
@@ -20,16 +20,36 @@ | |||||
<div style="color: #999">暂无可赠送优惠券</div> | <div style="color: #999">暂无可赠送优惠券</div> | ||||
</div> | </div> | ||||
<div class="ticketListBox"> | |||||
<div | |||||
class="ticketListBox" | |||||
v-for="(item, index) in ticketList" | |||||
:key="index" | |||||
@click="setSign(index)" | |||||
> | |||||
<div class="ticketList"> | <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"> | ||||
<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> | ||||
<div class="validity">有效期:2020-09-25至2020-09-30</div> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="confirm" @click="showPopup">确认</div> | <div class="confirm" @click="showPopup">确认</div> | ||||
<van-popup v-model="show" :round="true"> | <van-popup v-model="show" :round="true"> | ||||
<div class="popupBox"> | <div class="popupBox"> | ||||
@@ -39,36 +59,142 @@ | |||||
<div class="constant">手机号:12345644564</div> | <div class="constant">手机号:12345644564</div> | ||||
</div> | </div> | ||||
<div class="ticket_Box"> | <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> | </div> | ||||
<div class="operation"> | <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> | ||||
</div> | </div> | ||||
</van-popup> | </van-popup> | ||||
<add-end text="赠券成功!" @goBack ="control()" v-if="addFalg"></add-end> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import Vue from "vue"; | 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 { | export default { | ||||
components:{ | |||||
addEnd | |||||
}, | |||||
data() { | data() { | ||||
return { | return { | ||||
noData: false, | noData: false, | ||||
show: false, | show: false, | ||||
list: "", | |||||
phone: "", | |||||
ticketList: [], | |||||
pitcnOn: [], //选中的券列表 | |||||
addFalg: false, | |||||
}; | }; | ||||
}, | }, | ||||
methods: { | 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() { | showPopup() { | ||||
console.log( this.show ,666); | |||||
this.pitcnOn = this.ticketList.filter((item) => { | |||||
return item.sign == true; | |||||
}); | |||||
this.show = 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> | </script> | ||||
@@ -189,38 +315,37 @@ export default { | |||||
margin: 0 5%; | margin: 0 5%; | ||||
text-align: left; | text-align: left; | ||||
margin-bottom: 0.5rem; | 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> | </style> |