项目支付订单 新加选择优惠劵页面 修改选择时间组件

This commit is contained in:
Mr.jiang 2024-06-26 17:29:23 +08:00
parent ada8ffcea4
commit 6f090681ff
5 changed files with 448 additions and 26 deletions

View File

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

View File

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

View File

@ -523,6 +523,16 @@
"navigationBarTitleText": "帮助详情",
"enablePullDownRefresh": false
}
},{
"path": "hongbao/youhuijuanList",
"style": {
"navigationBarTitleText": "优惠券列表",
"enablePullDownRefresh": true,
"navigationStyle": "custom",
"app-plus": {
"titleNView": false
}
}
},{
"path": "hongbao/youhuijuan",
"style": {

View File

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

View File

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