Skip to content

G
gxpt_wechat
Commit 56eee374 by zhangzhen
Options

完善订单界面

parent 4cd335da
Showing with 444 additions and 290 deletions
components/module/f-navbar/f-navbar.vue
......@@ -188,7 +188,6 @@ export default {
}
},
scrollTop(val) {
console.log(val,909090)
this.pageScroll({
scrollTop: val
});
......
components/storeList/storeList.vue
......@@ -71,7 +71,7 @@
onNavToHome(val){
uni.setStorageSync("storeId",val.id)
uni.switchTab({
url:`/pages/index/index`
url:`/pages/index/index?storeId=${val.id}`
})
},
onPreview(item) {
......
config/index.config.js
......@@ -2,8 +2,8 @@ const CONFIG = {
// 开发环境配置
development: {
assetsPath: '/static', // 静态资源路径
baseUrl: 'http://10.106.30.136:8883/front', // 后台接口请求地址
hostUrl: 'http://10.106.30.136:8882', // H5地址(前端运行地址)
baseUrl: 'http://10.106.30.135:8883/front', // 后台接口请求地址
hostUrl: 'http://10.106.30.135:8882', // H5地址(前端运行地址)
// baseUrl: 'http://192.168.43.242:8883/front', // 后台接口请求地址
// hostUrl: 'http://192.168.43.242:8882', // H5地址(前端运行地址)
websocketUrl: '', // websocket服务端地址
......
pages/index/index.vue
<template>
<view class="home" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
<f-navbar title="凑角" :isShowTransparentTitle="false" :isShowLeft="false" fontColor="#ffffff" bgColor="#e40583"
<f-navbar title="凑角" :isShowTransparentTitle="false" :isShowLeft="false" fontColor="#ffffff" :fontSize="46" bgColor="#e40583"
:scrollTop="scrollTop" navbarType='5'></f-navbar>
<scroll-view class="scroll-view" scroll-y="true" @scroll="onScroll">
<view class="content-box">
......@@ -84,9 +84,9 @@
</view>
<view class="flex-1 flex-between">
<view class="flex-row room-type">
<text>房间套餐</text>
<view v-for="(item,i) in options" :key="i" class="item">
<text>{{item.label}}</text>
<text>优惠套餐：</text>
<view v-for="(item,i) in item.packList" :key="i" class="item">
<text>{{item.name}}</text>
</view>
</view>
<view class="confirm" @tap="onNavToOrder(item)">
......@@ -123,6 +123,7 @@
return {
scrollTop: 0,
storeId: '',
storeList:[],
storeInfo: {},
statusBarHeight: this.statusBarHeight,
hostUrl: config.hostUrl,
......@@ -170,14 +171,31 @@
}
},
onShow() {
if (uni.getStorageSync("storeId")) {
if (uni.getStorageSync("storeId") && this.storeList.length) {
this.storeId = uni.getStorageSync("storeId")
let obj = this.storeList.filter(item => item.id === this.storeId)[0]
console.log(obj,909090)
if (obj.roomVoList.length) {
this.storeInfo = {
...obj,
roomVoList: obj.roomVoList.map(item => {
return {
...item,
images: item.images ? item.images
.split(",").map(val => this.hostUrl + val) : []
}
})
}
this.$forceUpdate();
}
console.log(this.storeInfo, 9999)
}else{
uni.showLoading({
title: "加载中"
})
this.onLoading()
}
uni.showLoading({
title: "加载中"
})
this.onLoading()
},
onReachBottom() {
if (this.status == 'loadmore') {
......@@ -190,11 +208,10 @@
},
onLoad(option) {
console.log(option, 909090)
},
methods: {
onScroll(e){
console.log(e,90909090)
this.scrollTop = e.target.scrollTop;
},
onLoading() {
this.onGetListStore()
......@@ -207,6 +224,7 @@
}).then(res => {
uni.hideLoading()
if (res.data.code == 200 && res.data.data.length) {
this.storeList = res.data.data;
let obj = {}
if (this.storeId) {
obj = res.data.data.filter(item => item.id === this.storeId)[0]
......@@ -226,7 +244,6 @@
}
}
console.log(this.storeInfo, 9999)
}
})
},
......@@ -300,13 +317,21 @@
</style>
<style lang="scss" scoped>
.home {
width: 100vw;
height: 100vh;
overflow-x: hidden;
}
.scroll-view{
position: relative;
width: 100vw;
height: 100%;
.content-box{
display: flex;
flex-direction: column;
align-items: center;
width: 100vw;
overflow-x: hidden;
width: 100%;
}
}
.header-content {
display: flex;
justify-content: center;
......@@ -320,15 +345,6 @@
margin-top: -16upx;
}
}
.scroll-view{
width: 100vw;
.content-box{
display: flex;
flex-direction: column;
width: 100%;
}
}
.store-nav {
position: relative;
display: flex;
......@@ -602,8 +618,8 @@
display: flex;
justify-content: center;
align-items: center;
width: 90rpx;
height: 44rpx;
padding: 0 8upx;
background: #FFFFFF;
border-radius: 11rpx 11rpx 11rpx 11rpx;
border: 2rpx solid #130F26;
......
pages/order/order.vue
......@@ -32,8 +32,8 @@
<view class="bg-box" :style="{left:20*dateIndex+'%'}"></view>
<view v-for="(item,k) in dateList" :key="k" class="flex-1 flex-col date-item"
:class="{active:dateIndex === k}" @tap="onDateChange(k)">
<text class="text-title">{{ item.date}}</text>
<text class="text-title">{{ k>0?item.weekday: '今天'}}</text>
<text class="text-title text-bold text-lg" >{{ item.date}}</text>
<text class="text-title text-bold text-lg" >{{ k>0?item.weekday: '今天'}}</text>
</view>
</view>
<view v-show="index==1" class="flex-row package-mode">
......@@ -43,9 +43,9 @@
<view class="flex-1 package-box">
<view v-for="(item,index) in packageMode" :key="index" class="flex-col item"
:class="{active: modeIndex===index}" @tap="onChangeMode(index)">
<text class="text-title">凑够{{item.duration}}小时</text>
<text class="text-title">{{item.name}}</text>
<view class="flex-row">
<text>￥</text><text class="text-title text-bold text-xl">{{item.realPrice}}</text>
<text>￥</text><text class="text-title text-bold text-xl">{{item.price}}</text>
</view>
</view>
</view>
......@@ -83,7 +83,6 @@
<view class="date-interval">
<view class="flex-1 flex-row">
<view class="round-box pink">
</view>
<text>已选时段</text>
</view>
......@@ -95,14 +94,18 @@
</view>
<view class="flex-1 flex-row">
<view class="round-box gray">
</view>
<text>不可选时段</text>
</view>
<view class="flex-1 flex-row">
<view class="round-box error">
</view>
<text>重叠时段</text>
</view>
</view>
<view class="date-point-box">
<view v-for="(item,k) in dateIntervalList" :key="k" class="date-point-item">
<view class="date-point" :class="item.status==1?'free':item.status==2?'used':'checked'">
<view v-for="(item,k) in intervalList" :key="k" class="date-point-item">
<view class="date-point" :class="item.status === 0?'free':item.status==1?'used': item.status==2?'checked':'error'">
</view>
<text class="text-gray">{{item.hour}}</text>
......@@ -114,7 +117,7 @@
<text class="text-title text-bold text-xl text-blank">订单总价</text>
<view class="flex-row">
<text class="text-pink">￥</text>
<text class="text-pink text-xl">{{Number(duration*roomInfo.price).toFixed(2)}}</text>
<text class="text-pink text-xl">{{(Number(roomInfo.price)*duration).toFixed(2)}}</text>
</view>
</view>
<view class="flex-between price">
......@@ -128,16 +131,20 @@
<view class="line"></view>
<view class="flex-between price">
<text class="text-title text-lg">优惠券</text>
<view class="flex-row">
<text class="text-gray text-lg">暂无可用</text>
<text class="text-gray cuIcon-right "></text>
<view class="flex-row" @tap="onNavToSelectCoupon">
<text class="text-lg" :class="useCouponList.length?'text-pink':'text-gray'"> {{useCouponList.length? useCouponList[selectCouponIndex].name: '暂无可用'}}</text>
<text class="cuIcon-right " :class="useCouponList.length?'text-pink':'text-gray'"></text>
</view>
</view>
<view class="flex-between price">
<text class="text-title text-lg">套餐优惠</text>
<text class="text-title text-lg text-pink">{{couponList.length?'-￥20.00':'0'}} </text>
<text class="text-title text-lg">预约优惠</text>
<text class="text-title text-lg text-pink">
{{Number(roomInfo.price)*duration > computePriceInfo.payFee ?'-￥'+ Number(Number(roomInfo.price)*duration - computePriceInfo.payFee).toFixed(2):'￥0'}}
</text>
</view>
<!-- <view class="flex-between price">
<!-- <view class="flex-between price">
<text class="text-title text-lg">账户余额</text>
<view class="flex-row text-pink">
<text class="text-title text-lg">0.00 元</text>
......@@ -150,7 +157,7 @@
<text class="text-title text-lg">优惠价</text>
<view class="flex-row margin-left">
<text class="text-lg">￥</text>
<text class="text-xxl">{{Number(duration*roomInfo.price).toFixed(2)}}</text>
<text class="text-xxl">{{Number(computePriceInfo.payFee).toFixed(2)}}</text>
</view>
</view>
<view class="">
......@@ -268,22 +275,25 @@
],
// 套餐
modeIndex: 0,
packageMode: [{
packageMode: [
{
id:'',
label: "",
label: "优惠套餐1",
duration: 4,
originalPrice: 100,
realPrice: 78
},
{
id:'',
label: "",
label: "优惠套餐2",
duration: 8,
originalPrice: 200,
realPrice: 138
}
],
// 原数据
dateIntervalList: [],
intervalList: [],
duration: 0,
couponList: [],
checkedIndex: [],
......@@ -299,77 +309,45 @@
3: "充值"
},
editDuration: [],
checkedCouponInfo:{
id:''
checkedCouponInfo:'',
useDateStatus:true,
selectCouponIndex:0,
useCouponList:[],//可使用的优惠券
computePriceInfo:{
couponFee: '',
payFee: '',
totalFee: '',
}
};
},
onLoad(option) {
this.id = option.roomId;
this.id = option.roomId || 106;
uni.showLoading({
title: "加载中"
})
this.onLoading()
},
methods: {
//计算支付金额
onComputePrice() {
uni.showLoading({
title:"计算价格中..."
})
let dateObj = this.onSetDateTime(this.startTime,this.endTime);
let params = {
storeId: this.roomInfo.storeId,
roomId: this.roomInfo.id,
buyType: this.orderTypeList[this.index].type,
couponId: this.checkedCouponInfo.id,
orderType: this.orderType,
preStartDate: dateObj.startDate,
preEndDate: dateObj.endDate
}
if(this.index>0){
params.packId = this.packageMode[this.modeIndex].id;
}
computePrice(params).then(res => {
uni.hideLoading()
console.log(res)
})
},
// 获取可用优惠券
onGetUseCoupon() {
let dateObj = this.onSetDateTime(this.startTime,this.endTime);
console.log(this.startTime,this.endTime,909090)
getUseCoupon({
storeId: this.roomInfo.storeId,
roomId: this.roomInfo.id,
preStartDate: dateObj.startDate,
preEndDate: dateObj.endDate
}).then(res => {
if (res.statusCode == 200) {
if (res.data && res.data.length) {
this.index = 1;
this.packageMode = res.data;
}
}
this.onComputePrice();
})
},
// 获取房间信息相关
onLoading() {
roomInfo({
id: this.id
}).then(res => {
uni.hideLoading()
console.log(res)
if (res.data.code == 200) {
this.roomInfo = {
...res.data.data,
images: res.data.data.images ? res.data.data.images
.split(",").map(val => this.hostUrl + val) : []
}
if(this.roomInfo.packList&&this.roomInfo.packList.length){
this.packageMode = this.roomInfo.packList
this.index = 1;
this.modeIndex = 0;
}
this.onGetSortDistance()
}
})
},
onGetSortDistance() {
listSortDistance({
......@@ -379,46 +357,20 @@
}).then(res => {
uni.hideLoading()
console.log(res)
this.onSetEndTime()
this.dateIntervalList = res.data.data.map((item, index) => {
return {
...item,
hour: index > 0 && index - 24 == 0 ? '次日' : index > 24 ? index - 24 : index
}
})
this.onSetEndTime()
})
},
onTypeChange(i) {
// if (this.index === i) return;
// this.index = i
// if (this.index == 1) {
// this.modeIndex = 0
// }
// this.onSetEndTime()
},
onChangeMode(i) {
if (this.modeIndex === i) return;
this.modeIndex = i
this.onSetEndTime()
},
onDurationChange(i) {
if (i >= this.distanceMode.length - 1) {
this.onEditDuration();
return
}
if (this.distanceIndex === i) return;
this.distanceIndex = i
this.onSetEndTime()
},
onDateChange(k) {
if (this.dateIndex === k) return;
this.dateIndex = k
},
//设置预定结束时间
onSetEndTime() {
if (this.index == 1) {
// 套餐模式
this.duration = this.packageMode[this.modeIndex].duration;
this.duration = Number(this.packageMode[this.modeIndex].duration);
this.endTime = this.startTime.split(":").map((item, k) => {
let num = ''
if (k == 0) {
......@@ -428,14 +380,14 @@
num = Number(item) + this.duration
}
} else {
num = item
num = Number(item)
}
return num>=10 ? num : `0${num}`
}).join(":")
} else {
// 小时模式
this.duration = this.distanceMode[this.distanceIndex].duration;
this.duration = Number(this.distanceMode[this.distanceIndex].duration);
this.endTime = this.startTime.split(":").map((item, k) => {
let num = ''
if (k == 0) {
......@@ -445,14 +397,158 @@
num = Number(item) + this.duration
}
} else {
num = item
num = Number(item)
}
return num>=10 ? num : `0${num}`
}).join(":")
}
this.onGetUseCoupon()
this.onUpdateIntervalList()
},
// 更新时间的选取状态
onUpdateIntervalList(){
this.useDateStatus = true
console.log(this.dateIntervalList,"dateIntervalList")
let start = Number(this.startTime.split(":")[0])
let end = Number(this.endTime.split(":")[0])
console.log(start,end,"start")
if(end <= start){
end += 24
}
// 重新将数据还原到元数据
this.intervalList = [
...this.dateIntervalList
]
for(start;start<=end;start++){
if(this.dateIntervalList[start].status ===1){
// 表示时间点被占用,无法选择
this.useDateStatus = false
this.intervalList[start]= {
...this.dateIntervalList[start],
status:3
}
}else{
this.intervalList[start]= {
...this.dateIntervalList[start],
status:2
}
}
}
this.$forceUpdate();
setTimeout(()=>{
if(!this.useDateStatus){
uni.showToast({
icon:"none",
title:"时间选择有重叠"
})
}
},1500)
},
// 获取可用优惠券
onGetUseCoupon() {
let dateObj = this.onSetDateTime(this.startTime,this.endTime);
getUseCoupon({
storeId: this.roomInfo.storeId,
roomId: this.roomInfo.id,
orderMode:this.orderTypeList[this.index].type,
preStartDate: dateObj.startDate,
preEndDate: dateObj.endDate
}).then(res => {
console.log(res.data.data,"优惠券")
if (res.statusCode == 200) {
if (res.data && res.data.data.length) {
this.useCouponList = res.data.data.filter(item=>item.isAvailable===0).sort((a,b)=>b.subPrice-a.subPrice);
console.log(this.useCouponList)
}
}
this.onComputePrice();
})
},
onNavToSelectCoupon(){
let dateObj = this.onSetDateTime(this.startTime,this.endTime);
let that = this;
if(this.useCouponList.length){
uni.navigateTo({
url:"/pages/useCoupon/index",
events: {
getSelectData(data) {
console.log(data)
that.selectCouponIndex = that.useCouponList.findIndex(item=>item.id === data.couponId)
}
},
success(res) {
res.eventChannel.emit('sendData', {
storeId: that.roomInfo.storeId,
roomId: that.roomInfo.id,
orderMode:that.orderTypeList[that.index].type,
preStartDate: dateObj.startDate,
preEndDate: dateObj.endDate,
selectId:that.useCouponList[that.selectCouponIndex].id
})
}
})
}
},
//计算支付金额
onComputePrice() {
uni.showLoading({
title:"计算价格中..."
})
let dateObj = this.onSetDateTime(this.startTime,this.endTime);
let params = {
storeId: this.roomInfo.storeId,
roomId: this.roomInfo.id,
buyType: this.orderTypeList[this.index].type,
couponId:this.useCouponList.length? this.useCouponList[this.selectCouponIndex].id:'',
orderType: this.orderType,
preStartDate: dateObj.startDate,
preEndDate: dateObj.endDate,
orderMode:this.orderTypeList[this.index].type,
}
if(this.index===1){
params.packId = this.packageMode[this.modeIndex].id;
}
computePrice(params).then(res => {
uni.hideLoading()
if(res.data.code == 200){
this.computePriceInfo = res.data.data;
}
})
},
// 下单模式切换
onTypeChange(i) {
if (this.index === i || !this.packageMode.length) return;
this.index = i
this.modeIndex = 0;
this.distanceIndex = 0;
this.onSetEndTime()
},
onChangeMode(i) {
if (this.modeIndex === i) return;
this.modeIndex = i
this.onSetEndTime()
},
onDurationChange(i) {
if (i >= this.distanceMode.length - 1) {
this.onEditDuration();
return
}
if (this.distanceIndex === i) return;
this.distanceIndex = i
this.onSetEndTime()
},
onDateChange(k) {
if (this.dateIndex === k) return;
this.dateIndex = k
this.onGetSortDistance()
},
onSelectDate() {
if (!this.checkedIndex.length) {
......@@ -524,6 +620,7 @@
orderType: 1,
buyType: 1,
payType: 1,
couponId:this.useCouponList.length? this.useCouponList[this.selectCouponIndex].id:'',
preStartDate: "2023-10-25 00:00:00",
preEndDate: "2023-10-25 04:00:00",
totalFee: 100,
......@@ -557,12 +654,12 @@
endDate:''
}
let startArr = startTime.split(":")
let endArr = startTime.split(":")
obj.startDate =`${moment().format("YYYY-MM-DD")} ${startTime}:00`
if(Number(endArr[0])>=Number(startArr[0])){
obj.endDate =`${moment().add(1,"days").format("YYYY-MM-DD")} ${endTime}:00`
let endArr = endTime.split(":")
obj.startDate =`${this.dateList[this.dateIndex].readDate} ${startTime}:00`
if(Number(endArr[0])<=Number(startArr[0])){
obj.endDate =`${moment(this.dateList[this.dateIndex].readDate).add(1,"days").format("YYYY-MM-DD")} ${endTime}:00`
}else{
obj.endDate =`${moment().format("YYYY-MM-DD")} ${endTime}:00`
obj.endDate =`${this.dateList[this.dateIndex].readDate} ${endTime}:00`
}
console.log(obj)
return obj;
......@@ -672,13 +769,13 @@
z-index: 10;
text {
color: #333333;
color: #000000;
}
}
.active {
.text-title {
color: #000000;
color: #333333;
}
}
......@@ -784,6 +881,9 @@
.gray {
background-color: #bfbfbf;
}
.error{
background-color: #ff0000;
}
}
.date-point-box {
......@@ -817,6 +917,9 @@
.checked {
background-color: #e03997;
}
.error{
background-color: #ff0000;
}
>text {
font-size: 20upx;
......
pages/useCoupon/index.vue
<template>
<view class="coupon-list-box">
<view v-for="(item,index) in list" :key="index" class="coupon-item">
<view v-for="(item,index) in list" :key="index" class="coupon-item" :class="{active: current === index}"
@tap="onSelect(item,index)">
<view class="part-left">
<image :src="item.useStatus==1? '../../static/coupon_icon.png':'../../static/coupon_icon_gray.png'" mode="widthFix"></image>
<image :src="item.isAvailable === 0? '../../static/coupon_icon.png':'../../static/coupon_icon_gray.png'"
mode="widthFix"></image>
</view>
<view class="part-right">
<view class="coupon-name">
<text class="text-title text-lg text-bold">{{item.name}}</text>
<text class="text-lg" :class="item.useStatus==1?'text-pink':'text-gray'">{{item.useStatus==1?'待使用':'已使用'}}</text>
<text class="text-lg"
:class="item.isAvailable === 0?'text-pink':'text-gray'">{{item.useStatus==0?'可使用':'无法使用'}}</text>
</view>
<view class="flex-row margin-top">
<text class="">使用说明：</text>
......@@ -29,196 +32,228 @@
<text class="text-gray">有效期限：</text>
<text class="text-gray">{{item.startDate}}至{{item.endDate}}</text>
</view>
<view v-if="item.isAvailable !== 0" class="coupon-name margin-top">
<text class="text-gray">不可用原因：</text>
<text class="text-gray">{{item.reason}}</text>
</view>
</view>
</view>
<view v-if="list.length == 0" class="empty-box">
<!-- 列表数量为0时 -->
<u-empty text="暂无门店数据" textColor='#C1C1C1' width="60"
:icon="storeListBlankImage">
</u-empty>
</view>
<!-- 当数据没有更多时 -->
<view v-if="list.length" style="padding: 12px 6% 0;">
<u-loadmore :status="status" :icon="true" :line='true' :loading-text="loadingText"
:loadmore-text="loadmoreText" :nomore-text="nomoreText" />
<view class="box-content">
<button class="cu-btn round bg-gray " @tap="onCancle">返回</button>
<button class="cu-btn round bg-pink " @tap="onConfirm">选择</button>
</view>
</view>
</template>
<script>
import indexConfig from "@/config/index.config";
import FixedHeader from "@/components/fixedHeader/index";
import {getCouponList} from "@/api/coupon"
import {
getUseCoupon
} from "@/api/coupon"
export default {
data() {
return {
status: 'nomore ',
loadingText: '努力加载中',
loadmoreText: '上划加载',
nomoreText: '已展示全部门店',
scrollTop: 0,
current: '',
current: undefined,
hostUrl: indexConfig.hostUrl,
statusBarHeight: this.statusBarHeight,
titleBarHeight: this.titleBarHeight,
list: [
{
couponId:"111",
couponCode:"111",
name:"任意房型8小时通用券",
roomType:"标准",
couponTimeStart:"00:00",
couponTimeEnd:"08:00",
couponType:"满减券(2)",
maxDuration:8,
duration:8,
minPrice:200,
subPrice:62,
sourceType:"领取(1)",
platformType:1,
startDate:"2023-10-23",
endDate:"2023-11-23",
useStatus:1,
useDate:""
list: [{
couponId: "111",
couponCode: "111",
name: "任意房型8小时通用券",
roomType: "标准",
couponTimeStart: "00:00",
couponTimeEnd: "08:00",
couponType: "满减券(2)",
maxDuration: 8,
duration: 8,
minPrice: 200,
subPrice: 62,
sourceType: "领取(1)",
platformType: 1,
startDate: "2023-10-23",
endDate: "2023-11-23",
useStatus: 1,
useDate: ""
},
{
couponId:"2222",
couponCode:"2222",
name:"任意房型4小时通用券",
roomType:"标准",
couponTimeStart:"",
couponTimeEnd:"",
couponType:"满减券(2)",
maxDuration:4,
duration:4,
minPrice:100,
subPrice:22,
sourceType:"领取(1)",
platformType:2,
startDate:"2023-10-23",
endDate:"2023-11-23",
useStatus:1,
useDate:""
couponId: "2222",
couponCode: "2222",
name: "任意房型4小时通用券",
roomType: "标准",
couponTimeStart: "",
couponTimeEnd: "",
couponType: "满减券(2)",
maxDuration: 4,
duration: 4,
minPrice: 100,
subPrice: 22,
sourceType: "领取(1)",
platformType: 2,
startDate: "2023-10-23",
endDate: "2023-11-23",
useStatus: 1,
useDate: ""
},
{
couponId:"8888",
couponCode:"8888",
name:"任意房型8小时通用券",
roomType:"标准",
couponTimeStart:"",
couponTimeEnd:"",
couponType:"满减券(2)",
maxDuration:8,
duration:8,
minPrice:200,
subPrice:62,
sourceType:"领取(1)",
platformType:2,
startDate:"2023-10-23",
endDate:"2023-11-23",
useStatus:2,
useDate:""
couponId: "8888",
couponCode: "8888",
name: "任意房型8小时通用券",
roomType: "标准",
couponTimeStart: "",
couponTimeEnd: "",
couponType: "满减券(2)",
maxDuration: 8,
duration: 8,
minPrice: 200,
subPrice: 62,
sourceType: "领取(1)",
platformType: 2,
startDate: "2023-10-23",
endDate: "2023-11-23",
useStatus: 2,
useDate: ""
}
],
height: 120,
queryParams: {
pageSize: 2,
pageNum: 1,
useStatus: '',
storeId: '',
roomId: '',
orderMode: '',
preStartDate: '',
preEndDate: ''
},
eventChannel:null,
tipText:"",
show:false,
eventChannel: null,
tipText: "",
show: false,
eventChannel: null,
selectId: ''
};
},
components: {
'fixed-header': FixedHeader
},
onReachBottom() {
if(this.status=='loadmore'){
this.queryParams.pageNum+=1;
this.onLoading();
}
},
onLoad() {
this.onLoading();
this.eventChannel = this.getOpenerEventChannel();
// eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from test page'});
this.eventChannel.on('sendData', (data) => {
this.selectId = data.selectId
this.onLoading(data);
})
},
methods: {
onLoading(){
getCouponList(this.queryParams).then(res=>{
console.log(res,909090909)
if(res.data.code === 200 ){
this.list = res.data.rows
this.total = res.data.total
if (this.list.length < this.total) {
this.status = 'loadmore';
} else {
this.status = 'nomore'
onLoading(d) {
console.log(d, 90909)
getUseCoupon(d).then(res => {
console.log(res.data.data, "优惠券")
if (res.statusCode == 200) {
if (res.data && res.data.data.length) {
this.list = res.data.data.sort((a, b) => b.subPrice - a.subPrice);
this.current = this.list.findIndex(item=>item.id === this.selectId)
}
}
})
},
onSelect(item, i) {
if (item.isAvailable !== 0 || this.current === i) return
this.current = i
},
onCancle() {
uni.navigateBack()
},
onConfirm() {
this.eventChannel.emit('getSelectData', {
couponId: this.list[this.current].id
});
this.onCancle();
}
}
}
</script>
<style scoped lang="scss">
.coupon-list-box{
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
.coupon-item{
display: flex;
flex-direction: row;
width: 92%;
border-radius: 20upx;
background-color: #ffffff;
margin: 12upx 0;
padding: 30upx 20upx;
.part-left{
display: flex;
justify-content: center;
align-items: center;
width: 160upx;
margin-right: 20upx;
image{
display: block;
width: 100%;
max-height:140upx ;
}
}
.part-right{
display: flex;
flex: 1;
flex-direction: column;
.coupon-name{
display: flex;
justify-content: space-between;
}
.des{
display: flex;
justify-content: space-between;
align-items: center;
.flex-row{
display: flex;
flex-direction: row;
align-items: center;
}
}
}
}
}
.empty-box{
display: flex;
justify-content: center;
align-items: center;
min-height: 400upx;
}
</style>
.coupon-list-box {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding-bottom: 140upx;
.coupon-item {
display: flex;
flex-direction: row;
width: 92%;
border-radius: 20upx;
background-color: #ffffff;
margin: 12upx 0;
padding: 30upx 20upx;
.part-left {
display: flex;
justify-content: center;
align-items: center;
width: 160upx;
margin-right: 20upx;
image {
display: block;
width: 100%;
max-height: 140upx;
}
}
.part-right {
display: flex;
flex: 1;
flex-direction: column;
.coupon-name {
display: flex;
justify-content: space-between;
}
.des {
display: flex;
justify-content: space-between;
align-items: center;
.flex-row {
display: flex;
flex-direction: row;
align-items: center;
}
}
}
.margin-top {
margin-top: 12upx;
}
}
.active {
box-shadow: 0 0 10upx #ff55ff;
}
}
.box-content {
position: fixed;
left: 0;
bottom: 0;
width: 100vw;
height: 120upx;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #ffffff;
.cu-btn {
width: 40%;
margin: 0 5%;
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment