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