Files
appointment_weapp/pages/mall/order/cporderinfo.vue
2024-03-21 15:43:18 +08:00

850 lines
19 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view class="index">
<view class="onecontent">
<view class="onecontentone flex-start">
<image class="onecontentone_image" :src="listdata.host_img" mode="aspectFill"></image>
<view class="onecontentone_one flex-colum-start">
<text class="onecontentone_one_top">{{listdata.title}}</text>
<view class="onecontentone_one_view"><text>¥</text>{{listdata.price}}</view>
<!-- <view class="onecontentone_one_ts" @click="infoshow = true">
查看详情
</view> -->
</view>
</view>
</view>
<!-- <view class="onecontenttow ">
<view class="onecontenttowone flex-start">
<view class="onecontenttowone_one">
预约时间<text>必填</text>
</view>
</view>
<view class="onecontenttowtow flex-between">
<view class="onecontenttowtow_item flex-between">
<view class=" flex-colum" v-for="(item,index) in reservationlist" :key="index"
:class="reservationshow == index ? 'onecontenttowtow_item_ones':'onecontenttowtow_item_one'"
@click="reservation(item,index)">
<text class="onecontenttowtow_item_one_textone">{{item.week}}</text>
<text class="onecontenttowtow_item_one_texttow">{{item.date.slice(5,10)}}</text>
</view>
</view>
<view class="onecontenttowtow_left flex-colum" @click="calendarshow = true">
<u-icon name="calendar" color="#b4b4b4" size="20"></u-icon>
<text class="onecontenttowtow_lefttext">选择</text>
</view>
</view>
<view class="onecontenttowthere flex-start">
<view v-for="(item,index) in 14" :key="index" @click="clicktime(item,index)"
:class="timeshow == index?'onecontenttowthere_items':'onecontenttowthere_item'">
10:00
</view>
</view>
</view>
<view class="onecontenttere">
<view class="onecontentterewone flex-start">
<view class="onecontenttereone_one">
发型师
</view>
</view>
<view class="onecontentterewtow flex-start">
<view class="onecontentterewtow_item flex-colum" v-for="(item,index) in 1">
<image src="@/static/logo.png" mode="aspectFill"></image>
<text>John</text>
</view>
</view>
</view> -->
<view class="introduction">
<view class="introduction_one">
服务简介}
</view>
<view class="introduction_yow" v-html="listdata.details">
</view>
</view>
<!-- <view class="onecontentfour">
<view class="onecontentfourone flex-start">
<view class="onecontentfourone_one">
备注
</view>
</view>
<u--textarea v-model="textarea" placeholder="请输入内容" autoHeight></u--textarea>
</view> -->
<u-overlay :show="infoshow" @click="infoshow = false">
<view class="infowarp">
<view class="inforect" @tap.stop>
<view class="onerect flex-start">
<view>服务详情</view>
<u-icon @click="infoshow = false" class="onerecticon" name="backspace" color="#000000"
size="28"></u-icon>
</view>
<view class="infotowrect flex-start">
<image src="@/static/logo.png" mode="aspectFill"></image>
</view>
<view class="infothererect flex-colum-start">
<view class="infothererect_one">
洗剪吹新娘造型
</view>
<view class="infothererect_one">
¥120
</view>
</view>
<view class="infofourrect">
<view class="infofourrect_one">
服务简介
</view>
<view class="infofourrect_yow">
烫发编发洗头定型
</view>
</view>
</view>
</view>
</u-overlay>
<u-overlay :show="overlayshow" @click="overlayshow = false">
<view class="warp">
<view class="rect" @tap.stop>
<view class="onerect flex-start">
<image class="onecontentone_image" :src="listdata.img" mode="aspectFill"></image>
<view class="nonecontentone_view">{{listdata.title}}</view>
<view class="onerecticon">
<u-icon @click="overlayshow = false" name="backspace" color="#000000" size="28"></u-icon>
</view>
</view>
<!-- <view class="towrect">
<view class="towrect_one">
预约时间2023-06-16
</view>
<view class="towrect_tow">
<text>10:00</text>
</view>
</view>
<view class="thererect flex-between">
<view class="thererect_one">
预约服务
</view>
<view class="thererect_tow">
<u-number-box v-model="numberbox" button-size="24" color="#ffffff" bgColor="#9397c1"
iconStyle="color: #fff" integer @change="numberboxchange"></u-number-box>
</view>
</view> -->
<view class="fuorrect flex-between">
<view class="fuorrect_one">
合计
</view>
<view class="fuorrect_tow">
¥{{listdata.price}}
</view>
</view>
<view class="fvirect flex-center" @click="overlayshowclick">
确定
</view>
</view>
</view>
</u-overlay>
<u-calendar mode="single" @confirm="confirm" :show="calendarshow" @close="calendarshow = false"></u-calendar>
</view>
</template>
<script>
export default {
data() {
return {
overlayshow: false,
infoshow: false,
numberbox: "",
height: '',
timeshow: '',
textarea: '',
reservationshow: 0,
calendarshow: false,
reservationlist: [],
inifid: '',
listdata: {}
}
},
onLoad(e) {
console.log(e)
this.inifid = e.id
this.confirm()
this.reservationdetail()
},
mounted() {
//#ifdef MP-WEIXIN || H5
var query = uni.createSelectorQuery().in(this).select('.fixedview')
query.boundingClientRect(ele => {
var that = this;
uni.getSystemInfo({
success(res) {
that.height = (ele.height) + "px";
that = null;
}
})
}).exec();
//#endif
//#ifdef MP-ALIPAY
my.createSelectorQuery().selectAll('.fixedview').boundingClientRect().exec(ele => {
var nodeData = ele[0]
var that = this;
that.height = (nodeData.height) + "px";
that = null;
})
//#endif
},
methods: {
async reservationdetail() {
let res = await this.api.shoppingindexgoodsgoodsdetail({
goods_id: this.inifid,
type:1
})
this.listdata = res
this.listdata.details = res.details.replace(/\<img/g, '<img style="max-width:100%;height:auto" ');
console.log(this.listdata)
},
reservation(a, b) {
this.reservationshow = b
console.log(a, b)
},
clicktime(a, b) {
this.timeshow = b
console.log(a, b)
},
numberboxchange(e) {
console.log('当前值为: ' + e.value)
},
async overlayshowclick() {
let res = await this.api.useruserinfo() //p判断是否完成手机号
uni.cache.set('loginuser', res);
this.overlayshow = false
if (res.userinfo.mobile) {
uni.pro.navigateTo('order/confirm', {
id: this.inifid
})
} else {
uni.showModal({
title: '提示',
content: '确认订单需要获取您的手机号',
success: function(res) {
if (res.confirm) {
uni.redirectTo({
url: '/pages/my/setup/index'
});
} else if (res.cancel) {}
}
});
}
},
confirm(e) {
if (e) {
this.calendarshow = false
console.log(new Date(e[0]));
var now = new Date(e[0]);
} else {
//获取当前年月日
var now = new Date();
// var year = now.getFullYear(); //得到年份
// var month = now.getMonth() + 1; //得到月份
// var date = now.getDate(); //得到日期
// data = year + "年" + month + "月" + date + "日";
}
this.reservationlist = []
for (let i = 0; i < 7; i++) {
var date = new Date(now.getTime() + i * 24 * 3600 * 1000);
var year = date.getFullYear();
var month = (date.getMonth() + 1) > 9 ? (date.getMonth() + 1) : '0' + (date.getMonth() + 1);
var day = (date.getDate()) > 9 ? (date.getDate()) : '0' + (date.getDate());
var dt2 = new Date(now.getTime() + i * 24 * 3600 * 1000);
var weekDay = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
// var weekDays = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
this.reservationlist.push({
date: year + "-" + month + "-" + day,
// date: month + "-" + day,
// day: day,
// weekday: weekDays[dt2.getDay()],
week: weekDay[dt2.getDay()],
});
}
}
}
}
</script>
<style lang="scss">
page {
background: #F6F6F6;
}
/deep/ .mystyle {
width: 100% !important;
height: auto;
display: block;
}
.index {
padding: 32rpx 28rpx;
.onecontent {
width: 100%;
padding: 32rpx;
background: #FFFFFF;
border-radius: 12rpx;
.onecontentone {
flex-wrap: nowrap;
font-size: 32rpx;
font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
font-weight: normal;
color: #333333;
.onecontentone_image {
width: 176rpx;
height: 176rpx;
border-radius: 16rpx;
}
.nonecontentone_view {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
.onecontentone_one {
position: relative;
justify-content: space-evenly;
flex: 1;
margin-left: 24rpx;
height: 176rpx;
.onecontentone_one_ts {
padding: 8rpx 22rpx;
position: absolute;
top: 70%;
transform: translateY(-50%);
right: 0;
background: #F7F7F7;
border-radius: 28rpx;
font-size: 28rpx;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #666666;
}
.onecontentone_one_top {
font-size: 32rpx;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #1A1A1A;
}
.onecontentone_one_view {
text {
font-size: 28rpx;
}
font-size: 40rpx;
font-family: SourceHanSansCN-Bold-,
SourceHanSansCN-Bold;
font-weight: normal;
color: #333333;
}
}
}
}
.onecontenttow {
margin-top: 24rpx;
width: 100%;
padding: 32rpx;
background: #FFFFFF;
border-radius: 12rpx;
.onecontenttowone::before {
content: '';
display: inline-block;
width: 4rpx;
height: 24rpx;
background: #1A1A1A;
border-radius: 4rpx;
}
.onecontenttowone {
.onecontenttowone_one {
margin-left: 16rpx;
font-size: 32rpx;
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
font-weight: bold;
color: #1A1A1A;
text {
color: #999999;
}
}
}
.onecontenttowtow {
margin-top: 32rpx;
.onecontenttowtow_item {
flex: 1;
flex-wrap: nowrap;
.onecontenttowtow_item_one:nth-child(1) {
margin: 0 !important;
}
.onecontenttowtow_item_one {
padding: 6rpx;
.onecontenttowtow_item_one_textone {
font-size: 28rpx;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;
color: #333333;
}
.onecontenttowtow_item_one_texttow {
margin-top: 5rpx;
font-size: 24rpx;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #999999;
}
}
.onecontenttowtow_item_ones {
padding: 6rpx;
border-radius: 10rpx;
background: #1A1A1A;
.onecontenttowtow_item_one_textone {
font-size: 28rpx;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;
color: #FFFFFF;
}
.onecontenttowtow_item_one_texttow {
margin-top: 5rpx;
font-size: 24rpx;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
}
}
}
.onecontenttowtow_left {
border-left: 1rpx solid #f9f9f9;
background: #FFFFFF;
padding-left: 24rpx;
box-shadow: -2rpx 0px 4rpx 2rpx rgba(193, 193, 193, 0.09);
.onecontenttowtow_lefttext {
font-size: 24rpx;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #999999;
}
}
}
.onecontenttowthere {
.onecontenttowthere_item {
width: 20%;
margin: 16rpx 2.5%;
text-align: center;
background: #F7F7F7;
border-radius: 8rpx;
border: 2rpx solid #F7F7F7;
padding: 8rpx 26rpx;
font-size: 28rpx;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;
color: #999999;
}
.onecontenttowthere_items {
width: 20%;
margin: 16rpx 2.5%;
background: #F7F7F7;
border-radius: 8rpx;
border: 1rpx solid var(--bg-color-buttontow);
padding: 8rpx 26rpx;
font-size: 28rpx;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;
color: var(--bg-color-buttontow);
}
}
}
.onecontenttere {
margin-top: 24rpx;
width: 100%;
padding: 32rpx;
background: #FFFFFF;
border-radius: 12rpx;
.onecontentterewone::before {
content: '';
display: inline-block;
width: 4rpx;
height: 24rpx;
background: #1A1A1A;
border-radius: 4rpx;
}
.onecontentterewone {
.onecontenttereone_one {
margin-left: 16rpx;
font-size: 32rpx;
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
font-weight: bold;
color: #1A1A1A;
text {
color: #999999;
}
}
}
.onecontentterewtow {
.onecontentterewtow_item {
margin: 0 15rpx;
margin-top: 22rpx;
padding: 20rpx;
background: #FFFFFF;
border-radius: 8rpx;
border: 2rpx solid #F7F7F7;
image {
width: 76rpx;
height: 76rpx;
}
text {
margin-top: 6rpx;
font-size: 24rpx;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;
color: #333333;
}
}
}
}
.introduction {
margin-top: 24rpx;
width: 100%;
padding: 32rpx;
background: #FFFFFF;
border-radius: 12rpx;
.introduction_one {
font-size: 32rpx;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;
color: #1A1A1A;
}
.introduction_yow {
margin-top: 18rpx;
font-size: 28rpx;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #1A1A1A;
width: 100%;
/deep/ [alt] {
width: 100%;
}
/deep/ img {
width: 100%;
}
img {
width: 100%;
}
/deep/ p {
width: 100%;
}
}
}
.onecontentfour {
margin-top: 24rpx;
width: 100%;
padding: 32rpx;
background: #FFFFFF;
border-radius: 12rpx;
.onecontentfourone::before {
content: '';
display: inline-block;
width: 4rpx;
height: 24rpx;
background: #1A1A1A;
border-radius: 4rpx;
}
.onecontentfourone {
padding-bottom: 16rpx;
.onecontentfourone_one {
margin-left: 16rpx;
font-size: 32rpx;
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
font-weight: bold;
color: #1A1A1A;
text {
color: #999999;
}
}
}
}
.fixedview {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 24rpx 28rpx;
background: #FFFFFF;
.fixedview_one {
.fixedview_oneone {
font-size: 28rpx;
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
font-weight: normal;
color: #333333;
}
.fixedview_onetow {
font-size: 44rpx;
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
font-weight: normal;
color: #F45C4C;
font-weight: bold;
text {
font-size: 28rpx;
}
}
}
.fixedview_tow {
background: linear-gradient(143deg, #8689AF 0%, #494A5F 100%);
border-radius: 34rpx;
padding: 10rpx 44rpx;
font-size: 32rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #FFFFFF;
}
}
.infowarp {
position: relative;
height: 100%;
.inforect {
position: absolute;
bottom: 0;
width: 100%;
background: #FFFFFF;
border-radius: 60rpx 60rpx 0px 0px;
padding: 48rpx 32rpx 32rpx 32rpx;
.onerect {
position: relative;
padding-bottom: 34rpx;
border-bottom: 1rpx solid #F7F7F7;
view {
font-size: 32rpx;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;
color: #1A1A1A;
}
.onerecticon {
position: absolute;
top: 0;
right: 0;
}
}
}
.infotowrect {
width: 686rpx;
height: 640rpx;
image {
width: 100%;
height: 100%;
}
}
.infothererect {
padding-bottom: 16rpx;
border-bottom: 4rpx solid #F9F9F9;
.infothererect_one {
margin-top: 22rpx;
font-size: 32rpx;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;
color: #1A1A1A;
}
}
.infofourrect {
.infofourrect_one {
margin-top: 32rpx;
font-size: 32rpx;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;
color: #1A1A1A;
}
.infofourrect_yow {
margin-top: 18rpx;
font-size: 28rpx;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #1A1A1A;
}
}
}
.warp {
position: relative;
height: 100%;
.rect {
position: absolute;
bottom: 0;
width: 100%;
background: #FFFFFF;
border-radius: 60rpx 60rpx 0px 0px;
padding: 48rpx 32rpx 32rpx 32rpx;
.onerect {
position: relative;
padding-bottom: 34rpx;
border-bottom: 1rpx solid #F7F7F7;
image {
width: 124rpx;
height: 124rpx;
}
.nonecontentone_view {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 16rpx;
font-size: 32rpx;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;
color: #1A1A1A;
}
.onerecticon {
position: absolute;
top: 0;
right: 0;
}
}
.towrect {
padding-bottom: 34rpx;
border-bottom: 1rpx solid #F7F7F7;
padding-top: 34rpx;
.towrect_one {
font-size: 28rpx;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;
color: #1A1A1A;
}
.towrect_tow {
margin-top: 16rpx;
text {
background: #F7F7F7;
border-radius: 8rpx;
border: 2rpx solid #333333;
padding: 8rpx 26rpx;
font-size: 28rpx;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;
color: #333333;
}
}
}
.thererect {
padding: 34rpx 0;
border-bottom: 1rpx solid #F7F7F7;
border-top: 1rpx solid #F7F7F7;
.thererect_one {
font-size: 28rpx;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;
color: #1A1A1A;
}
.thererect_tow {}
}
.fuorrect {
margin-top: 32rpx;
.fuorrect_one {
font-size: 28rpx;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500;
color: #1A1A1A;
}
.fuorrect_tow {
font-weight: bold;
font-size: 32rpx;
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
color: #333333;
}
}
.fvirect {
margin-top: 200rpx;
padding: 16rpx;
text-align: center;
background: linear-gradient(115deg, #7E81A5 0%, #4D4E64 100%);
border-radius: 40rpx;
font-size: 36rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #FFFFFF;
}
}
}
}
</style>