|
|
@@ -0,0 +1,413 @@
|
|
|
+<template>
|
|
|
+ <view class="page" :style="{'height':(h-th)+'px','padding-top':mt+'px'}">
|
|
|
+ <c-nav-bar title="房间列表" :showIcon="false" :titleStyle="titleStyle"></c-nav-bar>
|
|
|
+ <view class="body">
|
|
|
+ <!-- 房型信息 -->
|
|
|
+
|
|
|
+ <view class="typeInfo">
|
|
|
+ <view class="titleInfo">
|
|
|
+ <text style="font-size: 32rpx; font-weight: 700;">房型信息</text>
|
|
|
+ </view>
|
|
|
+ <view class="cellBox">
|
|
|
+ <text style="font-size: 30rpx; margin-right: 30rpx;">房型名称</text>
|
|
|
+ <input v-model="form.name" type="text" placeholder="请输入房型" style="width: 210rpx;height: 42rpx; font-size: 30rpx;"/>
|
|
|
+ </view>
|
|
|
+ <view class="bigRoom">
|
|
|
+ <text style="font-size: 30rpx;color: black; margin-right: 90rpx;">简称</text>
|
|
|
+ <input v-model="form.shortName" type="text" placeholder="请输入简称" style="width: 210rpx;height: 42rpx; font-size: 30rpx;"/>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="shelves">
|
|
|
+ <view style="margin-left: 30rpx;">
|
|
|
+ <text style="font-size: 30rpx; " >是否上架</text>
|
|
|
+ </view>
|
|
|
+ <view style="margin-right: 30rpx;">
|
|
|
+ <u-switch v-model="checked" size="50" @change="change(status)" active-color="#07C160" ></u-switch>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 图片上传
|
|
|
+ -->
|
|
|
+ <view class="uploadPic">
|
|
|
+ <view style=" margin-left: 30rpx;">
|
|
|
+ <text style="font-size: 32rpx; font-weight: 700; ">封面图片(0/1)</text>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view style="margin-top: 20rpx; margin-left: 30rpx; color: #777; font-size: 24rpx;">
|
|
|
+ <text>仅能上传1张，需展示房间内容</text>
|
|
|
+ </view>
|
|
|
+ <view class="pic">
|
|
|
+ <!-- 图片 -->
|
|
|
+ <view v-show="false" >
|
|
|
+ <u-upload :action="action" :file-list="fileList" >
|
|
|
+ <!-- <img src="https://img.51miz.com/Element/00/77/24/47/cd39208d_E772447_a1d65d72.png" style="width: 190rpx; height: 120rpx;" /> -->
|
|
|
+ </u-upload>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <!-- 价格信息 -->
|
|
|
+ <view class="priceInfo">
|
|
|
+ <!-- 标题 -->
|
|
|
+ <view class="titleInfo">
|
|
|
+ <text style="font-size: 32rpx; font-weight: 700; margin-left: 10rpx;">价格信息</text>
|
|
|
+ </view>
|
|
|
+ <!-- 周末周日区分 -->
|
|
|
+ <view class="week">
|
|
|
+ <view class="weekend">
|
|
|
+ <view >
|
|
|
+ <text style="font-size: 30rpx; " >区分平日周末</text>
|
|
|
+ </view>
|
|
|
+ <view >
|
|
|
+ <u-switch v-model="weekedChecked" size="50" active-color="#07C160" ></u-switch>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 每日价格 -->
|
|
|
+ <view class="priceBoxWeek">
|
|
|
+ <view class="weekendBox">
|
|
|
+ <view >
|
|
|
+ <text style="font-size: 30rpx; margin-right: 90rpx; " >周一</text>
|
|
|
+ </view>
|
|
|
+ <view style="display: flex;">
|
|
|
+ <text style="font-size: 30rpx;">￥</text> <input v-model="form.mondayPrice" type="text" placeholder="请输入价格" style="width: 210rpx;height: 42rpx; font-size: 30rpx;"/>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="priceBoxWeek">
|
|
|
+ <view class="weekendBox">
|
|
|
+ <view >
|
|
|
+ <text style="font-size: 30rpx; margin-right: 90rpx; " >周二</text>
|
|
|
+ </view>
|
|
|
+ <view style="display: flex;">
|
|
|
+ <text style="font-size: 30rpx;">￥</text> <input v-model="form.tuesdayPrice" type="text" placeholder="请输入价格" style="width: 210rpx;height: 42rpx; font-size: 30rpx;"/>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="priceBoxWeek">
|
|
|
+ <view class="weekendBox">
|
|
|
+ <view >
|
|
|
+ <text style="font-size: 30rpx; margin-right: 90rpx; " >周三</text>
|
|
|
+ </view>
|
|
|
+ <view style="display: flex;">
|
|
|
+ <text style="font-size: 30rpx;">￥</text> <input v-model="form.wednesdayPrice" type="text" placeholder="请输入价格" style="width: 210rpx;height: 42rpx; font-size: 30rpx;"/>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="priceBoxWeek">
|
|
|
+ <view class="weekendBox">
|
|
|
+ <view >
|
|
|
+ <text style="font-size: 30rpx; margin-right: 90rpx; " >周四</text>
|
|
|
+ </view>
|
|
|
+ <view style="display: flex;">
|
|
|
+ <text style="font-size: 30rpx;">￥</text> <input v-model="form.thursdayPrice" type="text" placeholder="请输入价格" style="width: 210rpx;height: 42rpx; font-size: 30rpx;"/>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="priceBoxWeek">
|
|
|
+ <view class="weekendBox">
|
|
|
+ <view >
|
|
|
+ <text style="font-size: 30rpx; margin-right: 90rpx; " >周五</text>
|
|
|
+ </view>
|
|
|
+ <view style="display: flex;">
|
|
|
+ <text style="font-size: 30rpx;">￥</text> <input v-model="form.fridayPrice" type="text" placeholder="请输入价格" style="width: 210rpx;height: 42rpx; font-size: 30rpx;"/>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="priceBoxWeek">
|
|
|
+ <view class="weekendBox">
|
|
|
+ <view >
|
|
|
+ <text style="font-size: 30rpx; margin-right: 90rpx; " >周六</text>
|
|
|
+ </view>
|
|
|
+ <view style="display: flex;">
|
|
|
+ <text style="font-size: 30rpx;">￥</text> <input v-model="form.saturdayPrice" type="text" placeholder="请输入价格" style="width: 210rpx;height: 42rpx; font-size: 30rpx;"/>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="priceBoxWeek">
|
|
|
+ <view class="weekendBox" style=" border-bottom: 1rpx solid #fff;">
|
|
|
+ <view style="margin-top: 10rpx;">
|
|
|
+ <text style="font-size: 30rpx; margin-right: 90rpx; " >周日</text>
|
|
|
+ </view>
|
|
|
+ <view style="display: flex; margin-top: 10rpx;">
|
|
|
+ <text style="font-size: 30rpx;">￥</text> <input v-model="form.sundayPrice" type="text" placeholder="请输入价格" style="width: 210rpx;height: 42rpx; font-size: 30rpx;
|
|
|
+
|
|
|
+ "/>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 房间列表 -->
|
|
|
+ <view class="everyHouseList" style="padding-top: 20rpx;">
|
|
|
+ <view class="HouseListTitleInfo" >
|
|
|
+ <text style="font-size: 32rpx; font-weight: 700;">房间列表</text>
|
|
|
+ <text style="font-size: 24rpx; color: #777;">共8个房间</text>
|
|
|
+ </view>
|
|
|
+ <!-- 房间号 -->
|
|
|
+ <view class="priceBoxWeek">
|
|
|
+ <view class="weekendBox" style="display: flex; justify-content: space-between;">
|
|
|
+ <view style="display: flex;">
|
|
|
+ <text> 楼层：</text><input style="width: 50rpx;" v-model="form.roomFloor[0].floor" type="text" />
|
|
|
+ </view>
|
|
|
+ <view style="display: flex;">
|
|
|
+ <text > 房间号：</text><input style="width: 50rpx;" v-model="form.roomFloor[0].roomNumber" type="text" />
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view style="display: flex; margin-top: 10rpx;">
|
|
|
+ <u-icon name="trash"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 添加按钮 -->
|
|
|
+ <view class="submit">
|
|
|
+ <u-icon name="plus-circle" color=" #1372FF"></u-icon>
|
|
|
+ <text style="color: #1372FF; font-size: 30rpx;">添加房间</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 确定添加按钮 -->
|
|
|
+ <view class="addSubmit" @click="addNewRoom">
|
|
|
+
|
|
|
+ <text style="line-height: 96rpx; margin-left:310rpx; font-size: 32rpx; color: #fff;">确定</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default{
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ checked:false,
|
|
|
+ weekedChecked:false,
|
|
|
+ action: '',//图片服务器地址
|
|
|
+ fileList: [
|
|
|
+ {
|
|
|
+ url: '',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+
|
|
|
+ form:{
|
|
|
+ homestayId:'',
|
|
|
+ mondayPrice:'',
|
|
|
+ tuesdayPrice:'',
|
|
|
+ wednesdayPrice:'',
|
|
|
+ thursdayPrice:'',
|
|
|
+ fridayPrice:'',
|
|
|
+ saturdayPrice:'',
|
|
|
+ sundayPrice:'',
|
|
|
+ name:'',
|
|
|
+ shortName:'',
|
|
|
+ roomFloor:[
|
|
|
+ { floor:'',
|
|
|
+ roomNumber:''}
|
|
|
+ ]
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ onLoad({id}){
|
|
|
+ this.form.homestayId=id
|
|
|
+ console.log(this.form.homestayId)
|
|
|
+
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ // change(status) {
|
|
|
+ // console.log(status);
|
|
|
+ // },
|
|
|
+ addNewRoom(){
|
|
|
+ this.$api.post('/merchant/hotel/mine/addHouseBase',this.form).then(res=>{
|
|
|
+ console.log(res)
|
|
|
+ if(res.data.code===0){
|
|
|
+ this.$showToast('添加成功');
|
|
|
+ setTimeout(()=>{
|
|
|
+ uni.reLaunch({
|
|
|
+ url:'/pages/my/roomType'
|
|
|
+ })
|
|
|
+ },1500)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .page {
|
|
|
+ background: #F3F4F4;
|
|
|
+ padding-bottom: 260rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: auto;
|
|
|
+ }
|
|
|
+ .body {
|
|
|
+ padding-top: 20rpx;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ padding-right: 30rpx;
|
|
|
+ }
|
|
|
+ .typeInfo{
|
|
|
+ background-color: #fff;
|
|
|
+ width: 650rpx;
|
|
|
+ height: 290rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding-top: 30rpx;
|
|
|
+ padding-left: 15rpx;
|
|
|
+ padding-right: 30rpx;
|
|
|
+ }
|
|
|
+ .titleInfo{
|
|
|
+ // margin-top: 30rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ }
|
|
|
+ .cellBox{
|
|
|
+ margin-left: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ padding-bottom: 40rpx;
|
|
|
+ border-bottom: 1rpx solid #E1E1E1;
|
|
|
+ }
|
|
|
+ .bigRoom{
|
|
|
+ margin-left: 20rpx;
|
|
|
+ width: 100%;
|
|
|
+ height: 102rpx;
|
|
|
+ display: flex;
|
|
|
+ // justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ }
|
|
|
+ .shelves{
|
|
|
+ width: 695rpx;
|
|
|
+ height: 102rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ // padding-left: 30rpx;
|
|
|
+ // padding-right: 30rpx;
|
|
|
+ }
|
|
|
+ .uploadPic{
|
|
|
+ padding-top: 28rpx;
|
|
|
+ width: 690rpx;
|
|
|
+ height: 293rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+ .pic{
|
|
|
+ margin-left: 30rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ width: 190rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ background-color: pink;
|
|
|
+ }
|
|
|
+ // .custom-upload-button{
|
|
|
+ // width: 190rpx;
|
|
|
+ // height: 120rpx;
|
|
|
+
|
|
|
+ // }
|
|
|
+ .priceInfo{
|
|
|
+ width: 690rpx;
|
|
|
+ height: 908rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ padding-top: 30rpx;
|
|
|
+ }
|
|
|
+ .week{
|
|
|
+
|
|
|
+ padding-left: 30rpx;
|
|
|
+ padding-right: 30rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ .weekend{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: 1rpx solid #E1E1E1;
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+ }
|
|
|
+ .everyDay{
|
|
|
+ padding-left: 30rpx;
|
|
|
+ padding-right: 30rpx;
|
|
|
+ width: 100%;
|
|
|
+ // background-color: pink;
|
|
|
+ height: 102rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .days{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1rpx solid #E1E1E1;
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+ }
|
|
|
+ .priceBoxWeek{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 102rpx;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ padding-right: 30rpx;
|
|
|
+ }
|
|
|
+ .weekendBox{
|
|
|
+ width: 630rpx;
|
|
|
+ display: flex;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ // margin-right: 90rpx;
|
|
|
+ // justify-content: space-between;
|
|
|
+ border-bottom: 1rpx solid #E1E1E1;
|
|
|
+ padding-bottom: 32rpx;
|
|
|
+ }
|
|
|
+ .everyHouseList{
|
|
|
+ // padding-right: 30rpx;
|
|
|
+ width: 690rpx;
|
|
|
+ // height: 908rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ // padding-top: 30rpx;
|
|
|
+ }
|
|
|
+ .HouseListTitleInfo{
|
|
|
+ margin-right: 30rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .submit{
|
|
|
+ margin-top: 20rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ width: 690rpx;
|
|
|
+ height: 102rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .addSubmit{
|
|
|
+ position: fixed; /* 固定定位 */
|
|
|
+ bottom: 20rpx; /* 底部对齐 */
|
|
|
+ left: 0; /* 可选：左对齐 */
|
|
|
+ width: 690rpx; /* 可选：宽度为 100% */
|
|
|
+ height: 96rpx;
|
|
|
+ margin-left: 30rpx;
|
|
|
+ // padding-top: 20rpx;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ background-color: #1372FF;
|
|
|
+ border-radius: 48rpx;
|
|
|
+ }
|
|
|
+</style>
|
lifanzai