项目支付订单 新加选择优惠劵页面 修改选择时间组件
This commit is contained in:
parent
ada8ffcea4
commit
6f090681ff
|
@ -0,0 +1,278 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- <view class="flex align-center justify-between you-nav">
|
||||
<view v-for="(item,index) in tab" :key="index" class="text-center box"
|
||||
:class="tabIndex == index?'tanColor':''" @click="bindTab(item.state)">
|
||||
<view style="z-index: 9;">{{item.name}}</view>
|
||||
<view class="" :class="tabIndex == index?'line':''"></view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view @tap="queding()">确定</view>
|
||||
<checkbox-group @change="checkboxChange">
|
||||
<view class="youhui-weiyong youhui-list" v-for="(item,index) in hongbao" :key="index">
|
||||
<view class="youhui-view-left">
|
||||
<view class="youhui-view-left-yuan">
|
||||
<span class="youhui-view-left-num">{{item.money}}</span>
|
||||
<span class="youhui-view-left-text">元</span>
|
||||
</view>
|
||||
<view class="youhui-view-left-bottom">
|
||||
满{{item.minMoney}}元可用
|
||||
</view>
|
||||
</view>
|
||||
<view class="youhui-view-right">
|
||||
<view class="youhui-view-right-top">
|
||||
<view class="youhui-view-right-title">{{item.couponName}}</view>
|
||||
<view class="youhui-view-right-time">{{item.endDate}}</view>
|
||||
</view>
|
||||
<label class="tui-radio">
|
||||
<checkbox activeBackgroundColor="#096f4b" color="#096f4b" :value="item.id.toString()" :checked="checkbox"/>
|
||||
</label>
|
||||
<!-- <view class="youhui-view-right-btn" @tap="shiYong()">立即使用</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</checkbox-group>
|
||||
|
||||
|
||||
|
||||
<empty v-if="hongbao.length==0"></empty>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import empty from '@/components/empty.vue'
|
||||
export default {
|
||||
components:{
|
||||
empty
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
checkbox:false,
|
||||
tab: [{
|
||||
name: '可使用',
|
||||
state: 0
|
||||
}, {
|
||||
name: '已使用',
|
||||
state: 1
|
||||
}, {
|
||||
name: '已失效',
|
||||
state: 2
|
||||
}],
|
||||
tabIndex: 0,
|
||||
hongbao: [],
|
||||
page: 1,
|
||||
size: 10,
|
||||
loadingType: 0,
|
||||
scrollTop: false,
|
||||
contentText: {
|
||||
contentdown: '上拉显示更多',
|
||||
contentrefresh: '正在加载...',
|
||||
contentnomore: '没有更多数据了'
|
||||
},
|
||||
couponId:''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getMyList();
|
||||
},
|
||||
methods: {
|
||||
queding(){
|
||||
this.$queue.setData('youhui',this.couponId);
|
||||
uni.navigateTo({
|
||||
url:'/my/order/payModify'
|
||||
})
|
||||
},
|
||||
checkboxChange(e){
|
||||
this.couponId=e.detail.value.join(",")
|
||||
},
|
||||
shiYong(){
|
||||
uni.switchTab({
|
||||
url:'/pages/index/index'
|
||||
})
|
||||
},
|
||||
getMyList() {
|
||||
this.loadingType = 1;
|
||||
uni.showLoading({
|
||||
title: '加载中...'
|
||||
});
|
||||
this.$Request.getT('/app/coupon/selectCouponUserList?page='+this.page+'&limit='+this.size+'&status=' + this.tabIndex).then(res => {
|
||||
if (res.code == 0) {
|
||||
if (this.page == 1) {
|
||||
this.hongbao = [];
|
||||
}
|
||||
res.data.list.forEach(d => {
|
||||
this.hongbao.push(d);
|
||||
});
|
||||
if (res.data.list.length === this.size) {
|
||||
this.loadingType = 0;
|
||||
} else {
|
||||
this.loadingType = 3;
|
||||
}
|
||||
} else {
|
||||
this.loadingType = 2;
|
||||
}
|
||||
uni.hideLoading();
|
||||
});
|
||||
},
|
||||
bindTab(index) {
|
||||
this.tabIndex = index
|
||||
this.hongbao = [];
|
||||
this.page = 1;
|
||||
this.getMyList();
|
||||
}
|
||||
},
|
||||
onPageScroll: function(e) {
|
||||
this.scrollTop = e.scrollTop > 200;
|
||||
},
|
||||
onReachBottom: function() {
|
||||
this.page = this.page + 1;
|
||||
this.getMyList('');
|
||||
},
|
||||
onPullDownRefresh: function() {
|
||||
this.page = 1;
|
||||
this.getMyList('Refresh');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/deep/uni-checkbox .uni-checkbox-input{
|
||||
border-radius: 50%;
|
||||
}
|
||||
.checkbox-data{
|
||||
padding: 0px 11px;
|
||||
margin: 15px 0px;
|
||||
}
|
||||
.youhui-img{
|
||||
width: 111.81rpx;
|
||||
height: 111.81rpx;
|
||||
}
|
||||
.youhui-view-right-btn{
|
||||
width: 158rpx;
|
||||
height: 64rpx;
|
||||
background: linear-gradient(-90deg, #019C88, #2DC48E);
|
||||
border-radius: 32rpx;
|
||||
text-align: center;
|
||||
line-height: 64rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0rpx 2rpx 4rpx rgba(0,119,104,0.44);
|
||||
margin-left: 10px;
|
||||
}
|
||||
.youhui-view-right-time{
|
||||
font-weight: 400;
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
}
|
||||
.youhui-view-right-title{
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.youhui-view-right-top{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.youhui-view-right{
|
||||
width: 502.08rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.youhui-view-left-bottom{
|
||||
font-weight: 400;
|
||||
font-size: 22rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.youhui-view-left-yuan{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.youhui-view-left-num{
|
||||
font-weight: bold;
|
||||
font-size: 89rpx;
|
||||
}
|
||||
.youhui-view-left-text{
|
||||
font-weight: bold;
|
||||
font-size:24.31rpx;
|
||||
}
|
||||
.youhui-view-left{
|
||||
width: 199rpx;
|
||||
height: 242rpx;
|
||||
display: flex;
|
||||
flex-direction:column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.youhui-yiyong{
|
||||
background-image: url('../../static/youhuijuan/coupons7.png');
|
||||
}
|
||||
.youhui-weiyong{
|
||||
background-image: url('../../static/youhuijuan/coupons1.png');
|
||||
}
|
||||
.youhui-list{
|
||||
width: 95%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 242rpx;
|
||||
border-radius: 21rpx;
|
||||
background-size: 100%;
|
||||
margin: 20px auto;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.you-nav{
|
||||
background: #FFFFFF;
|
||||
padding: 14px 25px 0px 25px;
|
||||
}
|
||||
page {
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
.bg {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 128upx;
|
||||
height: 60upx;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 34rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 48px;
|
||||
height: 14rpx;
|
||||
background: linear-gradient(-48deg, #019C88, #2DC48E);
|
||||
border-radius: 7rpx;
|
||||
opacity: 0.35;
|
||||
position: relative;
|
||||
top: -7px;
|
||||
z-index: -1;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.tanColor {
|
||||
color: #019C88;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 140upx;
|
||||
height: 55upx;
|
||||
border: 2upx solid #FF130A;
|
||||
border-radius: 30upx;
|
||||
text-align: center;
|
||||
line-height: 55upx;
|
||||
color: #FF130A;
|
||||
font-size: 24upx;
|
||||
}
|
||||
</style>
|
|
@ -2,13 +2,14 @@
|
|||
<view class="content">
|
||||
<view class="padding-bottom u-skeleton">
|
||||
<view class="bgImg u-skeleton-fillet" style="padding: 0 29rpx;">
|
||||
<view class="padding margin-top-sm header-view" @click="getAddressList()">
|
||||
<view class="padding margin-top-sm header-view">
|
||||
<view v-if="!detailaddress">请选择地址</view>
|
||||
<view class="margin-right-xs">
|
||||
<view class="flex justify-between margin-top-lg">
|
||||
<view class="header-view-text">联系人</view>
|
||||
<view class="header-view-data">
|
||||
<text>{{name}}</text>
|
||||
<text class="xuanzhe" @click="getAddressList()">选择</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex justify-between margin-top-lg">
|
||||
|
@ -41,10 +42,17 @@
|
|||
<view class="fuwu-title">
|
||||
服务时间
|
||||
</view>
|
||||
<view class="fuwu-time-view" @change="changeLog">
|
||||
<!-- <view class="fuwu-time-view" @change="changeLog">
|
||||
<uni-datetime-picker :hide-second='true' v-model="single" type="datetime">{{single==''?order.serveTime:single}}</uni-datetime-picker>
|
||||
<!-- <span>{{order.serveTime}}</span> -->
|
||||
<image style="margin-left: 5px;" class="fuwu-img" src="../../static/images/my/jiantou.png" mode=""></image>
|
||||
</view> -->
|
||||
<view class="flex align-center justify-between"
|
||||
style="height: 100rpx;line-height: 100rpx;padding: 0rpx 10rpx;">
|
||||
<view class="flex justify-between margin-tb-sm" @click="openData()">
|
||||
<view v-if="startTime">{{startTime}}</view>
|
||||
<view class="tetx-sm" style="color:#999999;" v-else>请选择预约时间</view>
|
||||
<u-icon name="arrow-right" color="#999999"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="liliao" @click="liliaoshi">
|
||||
|
@ -58,8 +66,20 @@
|
|||
<image class="fuwu-img" src="../../static/images/my/jiantou.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="liliao" @click="youhuijuan">
|
||||
<view class="liliao-top" style="width: 30%;">
|
||||
<span>平台优惠劵</span>
|
||||
</view>
|
||||
<view class="header-bottom-money-zhen">
|
||||
<view v-if="couponDataList" class="" style="margin-right: 5px;">
|
||||
<span>-¥{{couponDataList}}</span>
|
||||
</view>
|
||||
<span v-else>选择优惠劵</span>
|
||||
<image class="fuwu-img" src="../../static/images/my/jiantou.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<checkbox-group @change="checkboxChange">
|
||||
<!-- <checkbox-group @change="checkboxChange">
|
||||
<view class="youhui-weiyong youhui-list" v-for="(itemY,indexY) in couponData" :key="itemY.id">
|
||||
<view class="youhui-view-left">
|
||||
<view class="youhui-view-left-yuan">
|
||||
|
@ -80,8 +100,8 @@
|
|||
</label>
|
||||
</view>
|
||||
</view>
|
||||
</checkbox-group>
|
||||
<!-- <view class="head-top">
|
||||
</checkbox-group> -->
|
||||
<!-- <view class="head-top">
|
||||
<view class="head-top-view">
|
||||
<image class="head-top-view-img" src="../../static/yuyue.png" mode=""></image>
|
||||
<view class="head-top-view-right">
|
||||
|
@ -202,7 +222,16 @@
|
|||
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
<!-- 预约弹窗 -->
|
||||
<u-popup v-model="isTrue" mode="bottom">
|
||||
<view>
|
||||
<scroll-view scroll-y="true">
|
||||
<its-calendar :sta_num="0" :end_num="24" :int_num="msTimeDate" :msTimeList="msTimeList" :classifyId="classifyId"
|
||||
@getTime="TimeData">
|
||||
</its-calendar>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
@ -211,7 +240,11 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
single:'2024-06-19',
|
||||
startTime: '',
|
||||
msTimeList: [],
|
||||
msTimeDate: 0,
|
||||
isTrue1: false,
|
||||
single:'请选择时间',
|
||||
radio1:'',
|
||||
sex: [{
|
||||
text: '我已同意《盛安健康服务协议》',
|
||||
|
@ -253,8 +286,6 @@
|
|||
user: {},
|
||||
game: {}
|
||||
},
|
||||
isTrue: 0,
|
||||
|
||||
phone: '',
|
||||
isVip: false,
|
||||
birthDate: '',
|
||||
|
@ -277,7 +308,7 @@
|
|||
city:'',
|
||||
district:'',
|
||||
addressId:'',
|
||||
isTrues: true,
|
||||
isTrue: false,
|
||||
jishiName:'',
|
||||
checkbox:false,
|
||||
couponData:[],
|
||||
|
@ -285,19 +316,32 @@
|
|||
textareaData:'',
|
||||
ordersId:'',
|
||||
userPackageDetailId:'',
|
||||
couponDataList:''
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.jishiName=this.$queue.getData('getJishi');
|
||||
// setTimeout(() => {
|
||||
// // this.loading = false;
|
||||
// }, 2000)
|
||||
this.isTrue = e.isTrue
|
||||
if (this.isTrue) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '订单详情'
|
||||
})
|
||||
if (this.$queue.getData('msTimeDate')) {
|
||||
this.msTimeDate = parseInt(this.$queue.getData('msTimeDate'));
|
||||
} else {
|
||||
this.msTimeDate = 60;
|
||||
}
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
let month = (parseInt(date.getMonth()) + 1) > 9 ? (parseInt(date.getMonth()) + 1) : "0" + (parseInt(
|
||||
date.getMonth()) + 1) // 当前月份
|
||||
let days = (date.getDate()) > 9 ? date.getDate() : "0" + date.getDate() //当前日期
|
||||
let fullDate = `${month}-${days}`
|
||||
let Time = year + '-' + fullDate
|
||||
this.yearsDate = Time;
|
||||
var classifyId=this.$queue.getData('classifyId')
|
||||
this.classifyId = classifyId;
|
||||
this.getMsTime(Time);
|
||||
this.jishiName=this.$queue.getData('getJishi');
|
||||
this.couponId=this.$queue.getData('youhui');
|
||||
if(this.couponId){
|
||||
this.youhuiF(this.couponId)
|
||||
}
|
||||
|
||||
this.ordersId = this.$queue.getData('ordersId');
|
||||
this.userPackageDetailId = this.$queue.getData('userPackageDetailId');
|
||||
this.youhui()
|
||||
|
@ -343,6 +387,54 @@
|
|||
// #endif
|
||||
},
|
||||
methods: {
|
||||
// 时间段数据
|
||||
TimeData(e) {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
// if(this.msTimeList.length > 0){
|
||||
// let startTime = year + '-' + e.days + ' ' + e.hours
|
||||
// for (var i = 0; i < this.msTimeList.length; i++) {
|
||||
// let msTime = this.msTimeList[i].artificerDate + ' ' + this.msTimeList[i].artificerTime
|
||||
// if(startTime === msTime){
|
||||
// this.isTrue = false
|
||||
// uni.showModal({
|
||||
// title: '温馨提示',
|
||||
// content: '当前时段已被预约,请更换预约时段!',
|
||||
// showCancel: true,
|
||||
// cancelText: '取消',
|
||||
// confirmText: '确定',
|
||||
// success: res => {
|
||||
// if(res.confirm){
|
||||
// this.isTrue = true
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
// return;
|
||||
// }
|
||||
// }
|
||||
// }else{
|
||||
this.startTime = year + '-' + e.days + ' ' + e.hours
|
||||
this.isTrue = false
|
||||
// }
|
||||
},
|
||||
getMsTime(artificerDate) {
|
||||
this.$Request.getT('/app/artificerTime/selectArtificerTimeListByArtificerId?artificerId=' + this
|
||||
.artificerId + '&artificerDate=' + artificerDate).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.msTimeList = res.data;
|
||||
console.log(res.data, "获取忙时时间")
|
||||
}
|
||||
})
|
||||
},
|
||||
// 打开弹窗
|
||||
openData() {
|
||||
this.isTrue = true
|
||||
},
|
||||
youhuijuan(){
|
||||
uni.navigateTo({
|
||||
url:'/my/hongbao/youhuijuanList'
|
||||
})
|
||||
},
|
||||
openpay() {//验证
|
||||
if(this.single=='2024-06-19'){
|
||||
uni.showToast({
|
||||
|
@ -369,6 +461,24 @@
|
|||
checkboxChange(e){
|
||||
this.couponId=e.detail.value.join(",")
|
||||
},
|
||||
youhuiF(couponId){//获取优惠卷
|
||||
let that = this;
|
||||
let data = {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
id:couponId,
|
||||
}
|
||||
that.$Request.get("/app/coupon/selectCouponUserList", data).then(res => {
|
||||
if (res.code == 0) {
|
||||
var list=res.data.list;
|
||||
that.couponDataList=list.reduce((sum, item) => sum + item.money, 0)
|
||||
console.log("asdasdasdasd",that.couponDataList)
|
||||
} else {
|
||||
that.$queue.showToast(res.msg)
|
||||
}
|
||||
|
||||
});
|
||||
},
|
||||
youhui(){//获取优惠卷
|
||||
let that = this
|
||||
let data = {
|
||||
|
@ -561,7 +671,7 @@
|
|||
userId: uni.getStorageSync('userId'),
|
||||
longitude:that.longitude,
|
||||
latitude:that.latitude,
|
||||
serveTime:that.single,
|
||||
serveTime:that.startTime,
|
||||
remarks:that.textareaData,
|
||||
ordersMassageList:[
|
||||
{massageId: that.userPackageDetailId? that.userPackageDetailId:that.ordersId,num: 1},
|
||||
|
@ -1223,6 +1333,16 @@
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header-bottom-money-zhen span{
|
||||
color: #F95900 !important;
|
||||
font-weight: bold !important;
|
||||
font-size: 22rpx !important;
|
||||
}
|
||||
.header-bottom-money-zhen{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
}
|
||||
/deep/uni-checkbox .uni-checkbox-input{
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
|
@ -1391,6 +1511,15 @@
|
|||
.adders-view image{
|
||||
margin-top: 5px;
|
||||
}
|
||||
.xuanzhe{
|
||||
margin-left: 5px;
|
||||
border: 1px solid;
|
||||
}
|
||||
.header-view-data{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.adders-view span,.header-view-data{
|
||||
font-size: 29rpx;
|
||||
color: #888;
|
||||
|
|
10
pages.json
10
pages.json
|
@ -523,6 +523,16 @@
|
|||
"navigationBarTitleText": "帮助详情",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},{
|
||||
"path": "hongbao/youhuijuanList",
|
||||
"style": {
|
||||
"navigationBarTitleText": "优惠券列表",
|
||||
"enablePullDownRefresh": true,
|
||||
"navigationStyle": "custom",
|
||||
"app-plus": {
|
||||
"titleNView": false
|
||||
}
|
||||
}
|
||||
},{
|
||||
"path": "hongbao/youhuijuan",
|
||||
"style": {
|
||||
|
|
|
@ -25,10 +25,10 @@
|
|||
<view class="header-bottom-money-zhen">
|
||||
<span>¥</span>
|
||||
<span>{{mainData.price}}</span>
|
||||
<span>/元套</span>
|
||||
<span>元/{{serviceCount}}次</span>
|
||||
</view>
|
||||
<view class="header-bottom-money-jia">
|
||||
¥{{mainData.oldPrice}}
|
||||
¥{{mainData.oldPrice}}元/{{serviceCount}}次
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
@ -188,7 +188,8 @@
|
|||
openWay: 1,
|
||||
paySel: 0,
|
||||
tpayMoney: '',
|
||||
mainId:''
|
||||
mainId:'',
|
||||
serviceCount:''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
@ -645,7 +646,7 @@
|
|||
|
||||
that.contentImg=that.mainData.contentImg.split(",");
|
||||
that.detailData=res.detailData.list;
|
||||
|
||||
that.serviceCount=res.detailData.list[0].serviceCount
|
||||
that.backgroundImageUrl=that.mainData.packageImg
|
||||
}
|
||||
})
|
||||
|
@ -660,6 +661,8 @@
|
|||
that.mainData=res.data.mainData;
|
||||
that.contentImg=that.mainData.contentImg.split(",");
|
||||
that.detailData=res.data.detailData;
|
||||
that.serviceCount=res.data.detailData.list[0].serviceCount
|
||||
|
||||
that.mainId=that.mainData.id
|
||||
that.backgroundImageUrl=that.mainData.packageImg
|
||||
}
|
||||
|
|
|
@ -90,7 +90,7 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="detail-btn" v-if="getList.status=='1'" @click="goumai(getList)">
|
||||
立即购买
|
||||
立即预约
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
@ -128,6 +128,8 @@
|
|||
this.$queue.setData('userPackageDetailId','');
|
||||
this.$queue.setData('ordersId',this.dataList.id);
|
||||
this.$queue.setData('daibudan','');
|
||||
this.$queue.setData('youhui','');
|
||||
this.$queue.setData('classifyId',item.classifyId)
|
||||
uni.navigateTo({
|
||||
url:'/my/order/payModify?ordersId='+this.dataList.id
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue