Skip to content

G
gxpt_wechat
Commit 56eee374 by zhangzhen
Options

完善订单界面

parent 4cd335da
Showing with 236 additions and 185 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/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