fetch传输方式
vue所利用的一种传输方式。
①在前后台传输之前，需要配置好前台画面跳转的url;
②请求封装后，传输给后台url,返回请求数据。
③将请求的到参数，导入对应的.vue,取值赋值。
<template>
<div class="detailsContainer" style="font-size: 14px;width: 100%">
<p style="text-align:center;padding-top: 20px;padding-bottom: 10px;font-size: 20px;border-bottom:2px solid floralwhite">预约者详情 </p>
<div style="background: ghostwhite;margin-top: 20px">
<el-row class="reservation_head">
<el-col :span="3" style="padding-top: 20px;padding-left: 10px"> <img src="/static/img/ll.PNG" /></el-col>
<el-col :span="4" class="reservation_head_info">
<el-row style="padding-top: 40px">
<el-col :span=24 style="margin-bottom: 10px">预约者:{{ userName }} </el-col>
</el-row>
<el-row>
<el-col :span="24">预约房源：{{ dormitoryName }}{{ roomName }}</el-col>
</el-row>
</el-col>
</el-row>
<el-row class="reservationHeadTip" style="padding-top: 20px">
<el-col :span="3" style="border-bottom: 3px solid peachpuff">{{ userName }}的信息</el-col>
</el-row>
<div style="border-top:2px solid peachpuff">
<el-row :span="16" class="reservationHeadInfo" style="margin-top: 20px">
<el-row>
<el-col :span="2" style="margin-bottom: 10px"> | 基本信息</el-col>
</el-row>
<el-row>
<!--{{ userName }}两边最好加空格-->
<el-col :span="4" :offset="3" style="margin-bottom: 30px">姓名：{{ userName }}</el-col>
<el-col :span="4" :offset="2" style="margin-bottom: 10px">预约状态更改:</el-col>
<el-col :span="8">
<div>
<div>
<el-radio v-model="appointmentStateCode" value="0" label="0" border size="medium">审核中</el-radio>
<el-radio v-model="appointmentStateCode" value="1" label="1" border size="medium">入住中</el-radio>
</div>
<div style="margin-top:20px">
<el-radio v-model="appointmentStateCode" value="2" label="2" border size="medium">预约成功</el-radio>
<el-radio v-model="appointmentStateCode" value="3" label="3" border size="medium">预约失败</el-radio>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="2" :offset="3" style="margin-bottom: 20px">年龄：{{ age }}</el-col>
</el-row>
<el-row>
<el-col :span="9" :offset="3" style="margin-bottom: 20px">联系电话：{{ phoneNumber }}</el-col>
</el-row>
<el-row>
<el-col :span="15" :offset="3" style="margin-bottom: 20px">邮箱：{{ maillAddress }}</el-col>
</el-row>
<el-row>
<el-col :span="15" :offset="3" style="margin-bottom: 20px">要求：{{ userResquest }}</el-col>
</el-row>
<el-row>
<el-col :span="2" style="margin-bottom: 20px">| 备注<i class="el-icon-edit"></i></el-col>
</el-row>
<el-row>
<el-col :span="10" :offset="3" style="margin-bottom: 10px">
<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 6}"
placeholder="输入限制在150字以下" v-model="textarea3" maxlength="150">
</el-input>
</el-col>
</el-row>
<el-row>
<el-col :span="2" :offset="13">
<!--<el-button v-on:click="toUpDate()">确认</el-button>-->
<el-button @click="dialogVisible = true">确 定</el-button>
<el-dialog title="提示" :visible.sync="dialogVisible" size="tiny" :before-close="handleClose">
<span>确定更改吗？</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="toUpDate()">确 定</el-button>
</span>
</el-dialog>
</el-col>
<el-col :span="1">
<el-button v-on:click="toinfolist()">取消</el-button>
</el-col>
</el-row>
<div>
<div class="btn" style="background:#B0C65E;margin-top: 10px;margin-bottom: 10px">保存</div>
<div class="btn" style="margin-top: 10px;margin-bottom: 10px"> 戻る</div>
</div>
</el-row>
</div>
</div>
</div>
</template>
<script>
//************************这里是将请求返回的数据导入.vue中******************
import {reservtationInfo,reservtationInfoUpDate} from "../../service/getData"
export default {
//这是页面数据入力，也是出力的数据对象，其实这里就是准备接收返回参数准备的。
data() {
return {
//审核状态
appointmentStateCode: '',
//个人信息
userName:'',
createTime:'',
dormitoryName:'',
roomName:'',
phoneNumber:'',
maillAddress:'',
userResquest:'',
textarea3: '',
age:'',
//dialog可见
dialogVisible: false
};
},
methods:{
//初始返显
created(){----------vue的生存周期，很重要。
var userAppointmentId = this.$route.query.userappointmentId;
console.log("userappointmentId",this.userappointmentId);
reservtationInfo({
userAppointmentId-------------------请求参数
}).then(res=>{---------res是返回请求集合的对象
this.userName = res.responseData.reservtationInfo.userName;---------------下面是取值并赋值给页面
this.createTime = res.responseData.reservtationInfo.createTime;
this.dormitoryName = res.responseData.reservtationInfo.dormitoryName;
this.roomName = res.responseData.reservtationInfo.roomName;
this.phoneNumber = res.responseData.reservtationInfo.phoneNumber;
this.maillAddress = res.responseData.reservtationInfo.maillAddress;
this.userResquest = res.responseData.reservtationInfo.userResquest;
this.appointmentStateCode = res.responseData.reservtationInfo.appointmentStateCode;
this.textarea3 = res.responseData.reservtationInfo.remark;
this.age = res.responseData.reservtationInfo.age
})
},
//更新预约状态及备注
toUpDate(){
var appointmentStateCode = this.appointmentStateCode;
var userAppointmentId = this.$route.query.userappointmentId;
reservtationInfoUpDate({
userAppointmentId,appointmentStateCode,remark:this.textarea3
}).then(res=>{
});
this.$router.push({path:'/manager/infolist'})--------------------这是页面跳转方式。
},
toinfolist(){
this.$router.push({path:'/manager/infolist'})
},
//dialog×掉
handleClose(done) {
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {});
}
},
}
</script>
<style scoped>
</style>