You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
644 lines
18 KiB
644 lines
18 KiB
// pages/info/hotelProductInfo/index.js
|
|
import util from "../../../utils/util"
|
|
import commonApi from "../../../utils/https/common"
|
|
let device = wx.getSystemInfoSync();
|
|
const ratio = device.windowWidth / 750;
|
|
import QRCode from '../../../utils/weapp-qrcode.js'
|
|
let app = getApp()
|
|
Page({
|
|
|
|
/**
|
|
* 页面的初始数据
|
|
*/
|
|
data: {
|
|
invoiceModes: {
|
|
1: "如需发票,请向酒店前台索取",
|
|
2: "美团开具发票",
|
|
3: "第三方开具发票"
|
|
},
|
|
showInfoFlag: false,
|
|
listimgs: [],
|
|
startDate: "",//入住时间
|
|
endDate: "",//离店时间
|
|
startDateText: "",//入住时间转文字
|
|
endDateText: "",//离店时间转文字
|
|
days: 1,//住店的日期总数
|
|
today: "",//今天，也就是入住可以选择的日期
|
|
tomorrow: "",//离店最早可以选择的日期
|
|
sceneInfo: null,
|
|
ask: [],
|
|
isLike: 0,
|
|
commentTotal: 0,
|
|
comment: [],
|
|
products: [],
|
|
isTest: true,
|
|
activeSkuIndex: -1,
|
|
skuList: [],
|
|
roomInfo: null,
|
|
retailId: "",
|
|
shareImg: null,
|
|
showShareFlag: false
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/
|
|
onLoad: function (options) {
|
|
this.setData({
|
|
id: options.id
|
|
})
|
|
if (options.retailId) {
|
|
this.setData({
|
|
retailId: options.retailId
|
|
})
|
|
}
|
|
|
|
// 先初始化日期
|
|
let today = new Date(), tomorrow = new Date(today.getTime() + 24 * 60 * 60 * 1000);
|
|
this.setData({
|
|
today: util.formatDate(today),
|
|
startDate: util.formatDate(today),
|
|
endDate: util.formatDate(tomorrow),
|
|
startDateText: util.dateToText(today),
|
|
endDateText: util.dateToText(tomorrow),
|
|
tomorrow: util.formatDate(tomorrow)
|
|
})
|
|
this.getDetail()
|
|
// this.getProduct()
|
|
},
|
|
BroswerRecord: function () {
|
|
setTimeout(() => {
|
|
if (app.globalData.uuid) {
|
|
commonApi._post('browse/browse_record', {
|
|
type: "scene",
|
|
title: this.data.sceneInfo.title,
|
|
drive: "mini",
|
|
source_id: this.data.sceneInfo.id,
|
|
url: "/pages/info/hotelProductInfo/index?id=" + this.data.sceneInfo.id,
|
|
uuid: app.globalData.uuid
|
|
}).then(res => {
|
|
})
|
|
}
|
|
else {
|
|
this.BroswerRecord();
|
|
}
|
|
}, 500)
|
|
},
|
|
getProduct: function () {
|
|
commonApi._post(this.data.sceneInfo.third_supplier_type == 'mt' ? "scene/get_mt_hotel_real_rooms_list" : "scene/get_hotel_sku_list", {
|
|
start_time: this.data.startDate,
|
|
end_time: this.data.endDate,
|
|
scene_id: this.data.id
|
|
}).then(res => {
|
|
res.data.map(item => {
|
|
item.display_tags = (item.display_tags ? item.display_tags.split(",") : []).splice(0, 2)
|
|
})
|
|
this.setData({
|
|
products: res.data
|
|
})
|
|
})
|
|
},
|
|
// 获取产品下面的规格列表
|
|
getSkuList: function (e) {
|
|
if (e.currentTarget.dataset.index == this.data.activeSkuIndex) {
|
|
this.setData({
|
|
activeSkuIndex: -1
|
|
})
|
|
return;
|
|
}
|
|
this.setData({
|
|
activeSkuIndex: e.currentTarget.dataset.index,
|
|
skuList: []
|
|
})
|
|
commonApi._post('scene/get_mt_hotel_real_rooms_sku_list', {
|
|
start_date: this.data.startDate,
|
|
end_date: this.data.endDate,
|
|
real_room_id: e.currentTarget.dataset.id
|
|
}).then(res => {
|
|
if (!res.data || res.data.length == 0) {
|
|
wx.showToast({
|
|
title: '该房型暂无房间',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
this.setData({
|
|
skuList: res.data
|
|
})
|
|
})
|
|
},
|
|
order: function (e) {
|
|
let item = e.currentTarget.dataset.item;
|
|
item.startDate = this.data.startDate;
|
|
item.endDate = this.data.endDate;
|
|
item.startDateText = this.data.startDateText;
|
|
item.endDateText = this.data.endDateText;
|
|
item.startDay = this.getDay(item.startDate);
|
|
item.endDay = this.getDay(item.endDate);
|
|
item.days = this.data.days;
|
|
app.globalData.product = item;
|
|
app.globalData.couponInfo = null;
|
|
wx.navigateTo({
|
|
url: '/pages/order/hotel/index',
|
|
})
|
|
},
|
|
orderMt: function (e) {
|
|
let item = e.currentTarget.dataset.item, product = e.currentTarget.dataset.product;
|
|
item.startDate = this.data.startDate;
|
|
item.endDate = this.data.endDate;
|
|
item.startDateText = this.data.startDateText;
|
|
item.endDateText = this.data.endDateText;
|
|
item.startDay = this.getDay(item.startDate);
|
|
item.endDay = this.getDay(item.endDate);
|
|
item.days = this.data.days;
|
|
item.id = item.sku_id;
|
|
// item.product_id = product.real_room_id;
|
|
item.sku_name = product.room_name;
|
|
item.sku_model = {};
|
|
item.sku_model.area = product.useable_area + "m²";
|
|
item.sku_model.bed_type = item.bed_type;
|
|
item.sku_model.breakfast = item.breakfast;
|
|
item.sku_model.max_room_num = item.max_room_num;
|
|
app.globalData.product = item;
|
|
app.globalData.retailId = this.data.retailId;
|
|
// return;
|
|
app.globalData.couponInfo = null;
|
|
wx.navigateTo({
|
|
url: '/pages/order/hotel/index',
|
|
})
|
|
},
|
|
getDay: function (date) {
|
|
let d = new Date(date.replace(/-/g, '/')).getDay();
|
|
let days = ["日", "一", "二", "三", "四", "五", "六"];
|
|
return days[d];
|
|
},
|
|
getDetail: function () {
|
|
// 获取详情
|
|
commonApi._post("scene/detail", {
|
|
id: this.data.id
|
|
}).then(res => {
|
|
if (!res.data) {
|
|
util.back();
|
|
return;
|
|
}
|
|
// res.data.listimg = res.data.listimg?res.data.listimg.split(","):[];
|
|
res.data.display_tags = (res.data.display_tags ? res.data.display_tags.split(",") : []).splice(0, 2);
|
|
this.setData({
|
|
sceneInfo: res.data
|
|
})
|
|
this.BroswerRecord();
|
|
this.getProduct()
|
|
})
|
|
// 获取问大家
|
|
commonApi._post("ask/getQuestionList", {
|
|
scene_id: this.data.id,
|
|
page_no: 1,
|
|
page_num: 3
|
|
}).then(res => {
|
|
console.log(res)
|
|
this.setData({
|
|
ask: res.data.rows
|
|
})
|
|
})
|
|
// 获取是否喜欢
|
|
commonApi.user_post("scene/is_scene_collection", {
|
|
scene_id: this.data.id
|
|
}).then(res => {
|
|
this.setData({
|
|
isLike: res.data
|
|
})
|
|
})
|
|
// 获取评价列表
|
|
commonApi.user_post("scene/get_comment", {
|
|
scene_id: this.data.id
|
|
}).then(res => {
|
|
res.data.list.map(item => {
|
|
item.rate = Number(item.rate)
|
|
})
|
|
this.setData({
|
|
comment: res.data.list.splice(0, 2),
|
|
commentTotal: res.data.total
|
|
})
|
|
let arr = this.data.comment
|
|
arr.map((item)=>{
|
|
if (item.img_list) {
|
|
item.img_list = item.img_list.split(',')
|
|
}else{
|
|
item.img_list=[]
|
|
}
|
|
})
|
|
this.setData({
|
|
comment:arr
|
|
})
|
|
})
|
|
},
|
|
like: function () {
|
|
let id = this.data.id, isLike = this.data.isLike;
|
|
commonApi.user_post(isLike != 1 ? "scene/scene_collection" : "scene/scene_cancel_collection", {
|
|
scene_id: id
|
|
}).then(res => {
|
|
if (res.code == 1) {
|
|
wx.showToast({
|
|
title: '操作成功',
|
|
})
|
|
this.setData({
|
|
isLike: isLike == 1 ? 0 : 1
|
|
})
|
|
}
|
|
})
|
|
},
|
|
gotoLocation: function () {
|
|
let info = this.data.sceneInfo;
|
|
wx.openLocation({
|
|
latitude: Number(info.lat),
|
|
longitude: Number(info.lon),
|
|
})
|
|
},
|
|
changeInDate: function (e) {
|
|
console.log(e)
|
|
let date = new Date(e.detail.value.replace(/-/g, '/'));
|
|
let tomorrow = new Date(date.getTime() + 24 * 60 * 60 * 1000);
|
|
this.setData({
|
|
startDate: util.formatDate(date),
|
|
startDateText: util.dateToText(date),
|
|
tomorrow: util.formatDate(tomorrow)
|
|
})
|
|
// 如果开始日期要比结束日期晚的话 那么结束日期自动变成开始日期的下一天
|
|
let endDate = new Date(this.data.endDate.replace(/-/g, '/'));
|
|
if (endDate.getTime() <= date.getTime()) {
|
|
this.setData({
|
|
endDate: util.formatDate(tomorrow),
|
|
endDateText: util.dateToText(tomorrow)
|
|
})
|
|
}
|
|
this.calcDays();
|
|
},
|
|
changeLeaveDate: function (e) {
|
|
let date = new Date(e.detail.value.replace(/-/g, '/'));
|
|
console.log(date)
|
|
this.setData({
|
|
endDate: util.formatDate(date),
|
|
endDateText: util.dateToText(date)
|
|
})
|
|
this.calcDays();
|
|
},
|
|
calcDays: function () {
|
|
let endDate = this.data.endDate.replace(/-/g, '/'), startDate = this.data.startDate.replace(/-/g, '/');
|
|
endDate = new Date(endDate).getTime();
|
|
startDate = new Date(startDate).getTime();
|
|
let days = Math.round((endDate - startDate) / (1000 * 24 * 60 * 60))
|
|
this.setData({
|
|
days: days,
|
|
activeSkuIndex: -1,
|
|
skuList: []
|
|
})
|
|
// this.getProduct()
|
|
},
|
|
showRoomInfo: function (e) {
|
|
let product = e.currentTarget.dataset.info, sku = e.currentTarget.dataset.sku;
|
|
this.setData({
|
|
showInfoFlag: true
|
|
// roomInfo:
|
|
})
|
|
commonApi.user_post("product/getMtRoomSkuInfo", {
|
|
real_room_id: product.real_room_id,
|
|
sku_id: sku.sku_id,
|
|
start_date: this.data.startDate,
|
|
end_date: this.data.endDate
|
|
}).then(res => {
|
|
this.setData({
|
|
roomInfo: {
|
|
sku: sku,
|
|
skuInfo: res.data,
|
|
productInfo: product
|
|
}
|
|
})
|
|
})
|
|
},
|
|
hideRoomInfo: function () {
|
|
this.setData({
|
|
showInfoFlag: false,
|
|
roomInfo: null
|
|
})
|
|
},
|
|
|
|
|
|
// 分享
|
|
share: function () {
|
|
if (!wx.getStorageSync("jstrip_token")) {
|
|
commonApi.user_post("user/getMyInfo", {}).then(res => {
|
|
|
|
})
|
|
return;
|
|
}
|
|
if (!this.data.shareImg) {
|
|
wx.showToast({
|
|
title: '图片生成中，稍后再试',
|
|
icon: 'none'
|
|
})
|
|
return;
|
|
}
|
|
this.setData({
|
|
showShareFlag: !this.data.showShareFlag
|
|
})
|
|
},
|
|
// 保存
|
|
save() {
|
|
let url = this.data.shareImg, that = this;
|
|
wx.authorize({
|
|
/* 这个就是保存相册的 */
|
|
scope: 'scope.writePhotosAlbum',
|
|
success() {
|
|
wx.saveImageToPhotosAlbum({
|
|
filePath: url,
|
|
success(res) {
|
|
wx.showToast({
|
|
title: '保存成功',
|
|
icon: "success"
|
|
})
|
|
that.setData({
|
|
showShareFlag: !this.data.showShareFlag
|
|
})
|
|
},
|
|
fail(res) {
|
|
wx.showToast({
|
|
title: '保存失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
complete(res) {
|
|
console.log(res);
|
|
/* 这里判断一下如果没有授权重新打开设置选项 */
|
|
wx.getSetting({
|
|
success(res) {
|
|
if (!res.authSetting['scope.writePhotosAlbum']) {
|
|
/* 打开设置的方法 */
|
|
// opensit();
|
|
wx.showToast({
|
|
title: '请打开权限后再试',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
},
|
|
// 绘制海报
|
|
drawImg: function () {
|
|
var that = this, userinfo = wx.getStorageSync('jstrip_userInfo');
|
|
if (!userinfo) {
|
|
// 去登录
|
|
return false;
|
|
}
|
|
const ctx = wx.createCanvasContext('imageCanvas');
|
|
// const device = wx.getSystemInfoSync();
|
|
// const ratio = device.screenWidth / 750;
|
|
// 先获取到图片信息
|
|
let promise2 = new Promise(function (resolve, reject) {
|
|
wx.getImageInfo({
|
|
src: that.data.sceneInfo.headimg,
|
|
success: function (res) {
|
|
resolve(res);
|
|
},
|
|
fail: function (res) {
|
|
reject(res);
|
|
}
|
|
})
|
|
})
|
|
let promise3 = new Promise(function (resolve, reject) {
|
|
let userid = wx.getStorageSync('jstrip_userid')
|
|
new QRCode('myQrcode', {
|
|
text: 'https://m.cloud.sz-trip.com/HotelDetail?id=' + that.data.sceneInfo.id + '&sharedUserId=' + userid + '&channel=-1',
|
|
width: 500,
|
|
height: 500,
|
|
padding: 12, // 生成二维码四周自动留边宽度，不传入默认为0
|
|
correctLevel: QRCode.CorrectLevel.H, // 二维码可辨识度
|
|
callback: (res) => {
|
|
resolve(res);
|
|
}
|
|
})
|
|
})
|
|
//成功得到图片信息后，开始绘图
|
|
Promise.all([promise2, promise3]).then(imgs => {
|
|
ctx.save();
|
|
ctx.beginPath(); //开始绘制
|
|
that.handleBorderRect(ctx, 0, 0, 551 * ratio, 407 * ratio, 25 * ratio, '#ccc')
|
|
ctx.clip();//画好了圆 剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
|
|
ctx.drawImage(imgs[0].path, 0, 0, 551 * ratio, 407 * ratio);
|
|
ctx.restore();
|
|
ctx.save();
|
|
that.handleBorderRect2(ctx, 0, 407 * ratio, 551 * ratio, 236 * ratio, 25 * ratio, '#fff')
|
|
ctx.restore();
|
|
// 绘制二维码
|
|
ctx.drawImage(imgs[1].path, 373 * ratio, 495 * ratio, 137 * ratio, 137 * ratio);
|
|
// 开始文字绘制
|
|
ctx.setFillStyle("#000");
|
|
ctx.setFontSize(30 * ratio); //字大小
|
|
ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
|
|
that.drawText(ctx, that.data.sceneInfo.title, 25 * ratio, 450 * ratio, 480 * ratio, ratio);
|
|
// 售价
|
|
ctx.setFillStyle("#D62828");
|
|
ctx.setFontSize(40 * ratio); //字大小
|
|
ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
|
|
let price = "￥" + (that.data.sceneInfo.price / 100);
|
|
let width = ctx.measureText(price).width;
|
|
ctx.fillText(price, 25 * ratio, 620 * ratio);
|
|
// 副标题
|
|
ctx.setFillStyle("#999999");
|
|
ctx.setFontSize(28 * ratio); //字大小
|
|
ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
|
|
let subtitle = that.data.sceneInfo.display_tags[0];
|
|
if (subtitle.length > 10) {
|
|
subtitle = subtitle.substr(0, 10) + '...'
|
|
}
|
|
ctx.fillText(subtitle, 25 * ratio, 540 * ratio);
|
|
// ctx.draw();
|
|
// 划线价
|
|
// ctx.setFillStyle("#999999");
|
|
// ctx.setFontSize(32 * ratio); //字大小
|
|
// ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
|
|
// let market_price = "￥"+(Number(that.data.sceneInfo.market_price)/100)
|
|
// ctx.fillText(market_price, 40*ratio + width, 620*ratio);
|
|
// let market_price_width = ctx.measureText(market_price).width;
|
|
// 划线
|
|
// ctx.beginPath()
|
|
// ctx.setLineWidth(1)
|
|
// ctx.moveTo(40*ratio + width, 608*ratio)
|
|
// ctx.lineTo(45*ratio + width, 608*ratio)
|
|
// ctx.stroke();
|
|
// 长按识别二维码
|
|
// ctx.setFillStyle("#666");
|
|
// ctx.setFontSize(22 * ratio); //字大小
|
|
// ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
|
|
// ctx.fillText("长按识别二维码", 404*ratio, 710*ratio);
|
|
// 长按图片转发或保存
|
|
// ctx.setFillStyle("#000");
|
|
// ctx.setFontSize(24 * ratio); //字大小
|
|
// ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
|
|
// ctx.fillText("长按图片保存到本地",(592*ratio - ctx.measureText("长按图片保存到本地").width)/2, 740*ratio);
|
|
ctx.draw();
|
|
// 转为图片
|
|
setTimeout(() => {
|
|
wx.canvasToTempFilePath({
|
|
x: 0,
|
|
y: 0,
|
|
canvasId: 'imageCanvas',
|
|
success: function (res) {
|
|
that.setData({
|
|
shareImg: res.tempFilePath
|
|
})
|
|
},
|
|
fail(err) {
|
|
console.log('agdgjgdajhg', err)
|
|
}
|
|
})
|
|
}, 500)
|
|
return false;
|
|
}).catch(err => {
|
|
console.log("this err", err)
|
|
})
|
|
},
|
|
// 圆角矩形
|
|
handleBorderRect(ctx, x, y, w, h, r, color) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(x + w, y + h);
|
|
ctx.lineTo(x, y + h)
|
|
// 左上角
|
|
ctx.arc(x + r, y + r, r, Math.PI, 1.5 * Math.PI);
|
|
ctx.moveTo(x + r, y);
|
|
ctx.lineTo(x + w - r, y);
|
|
ctx.lineTo(x + w, y + r);
|
|
// 右上角
|
|
ctx.arc(x + w - r, y + r, r, 1.5 * Math.PI, 2 * Math.PI);
|
|
ctx.lineTo(x + w, y + h);
|
|
ctx.lineTo(x + w - r, y + h);
|
|
ctx.fillStyle = color;
|
|
ctx.fill();
|
|
ctx.closePath();
|
|
},
|
|
handleBorderRect2(ctx, x, y, w, h, r, color) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, y);
|
|
ctx.lineTo(x + w, y)
|
|
// 右下角
|
|
ctx.arc(x + w - r, y + h - r, r, 0, 0.5 * Math.PI);
|
|
ctx.lineTo(x + r, y + h);
|
|
ctx.lineTo(x, y + h - r);
|
|
// 左下角
|
|
ctx.arc(x + r, y + h - r, r, 0.5 * Math.PI, Math.PI);
|
|
ctx.lineTo(x, y);
|
|
ctx.lineTo(x, y);
|
|
ctx.fillStyle = color;
|
|
ctx.fill();
|
|
ctx.closePath();
|
|
},
|
|
// 绘制两行文字
|
|
drawText: function (ctx, str, x, y, canvasWidth, ratio) {
|
|
let row = [], temp = "", chr = str.split("");
|
|
for (var a = 0; a < chr.length; a++) {
|
|
if (ctx.measureText(temp).width < canvasWidth) {
|
|
temp += chr[a];
|
|
}
|
|
else {
|
|
a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
|
|
row.push(temp);
|
|
temp = "";
|
|
}
|
|
}
|
|
row.push(temp);
|
|
|
|
//如果数组长度大于2 则截取前两个
|
|
if (row.length > 2) {
|
|
var rowCut = row.slice(0, 2);
|
|
var rowPart = rowCut[1];
|
|
var test = "";
|
|
var empty = [];
|
|
for (var a = 0; a < rowPart.length; a++) {
|
|
if (ctx.measureText(test).width < canvasWidth - 30 * ratio) {
|
|
test += rowPart[a];
|
|
}
|
|
else {
|
|
break;
|
|
}
|
|
}
|
|
empty.push(test);
|
|
var group = empty[0] + "..."//这里只显示两行，超出的用...表示
|
|
rowCut.splice(1, 1, group);
|
|
row = rowCut;
|
|
}
|
|
for (var b = 0; b < row.length; b++) {
|
|
ctx.fillText(row[b], x, y + b * 40 * ratio, canvasWidth);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面初次渲染完成
|
|
*/
|
|
onReady: function () {
|
|
if(app.globalData.configJson){
|
|
this.setData({
|
|
isTest: app.globalData.configJson.isTest
|
|
})
|
|
}
|
|
else {
|
|
setTimeout(()=>{
|
|
this.onReady()
|
|
},300)
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面显示
|
|
*/
|
|
onShow: function () {
|
|
// if(!wx.getStorageSync('jstrip_token')){
|
|
// return;
|
|
// }
|
|
// if(this.data.sceneInfo && this.data.sceneInfo.id){
|
|
// this.drawImg()
|
|
// }
|
|
// else {
|
|
// setTimeout(()=>{
|
|
// this.onShow()
|
|
// },200)
|
|
// }
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面隐藏
|
|
*/
|
|
onHide: function () {
|
|
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面卸载
|
|
*/
|
|
onUnload: function () {
|
|
|
|
},
|
|
|
|
/**
|
|
* 页面相关事件处理函数--监听用户下拉动作
|
|
*/
|
|
onPullDownRefresh: function () {
|
|
|
|
},
|
|
|
|
/**
|
|
* 页面上拉触底事件的处理函数
|
|
*/
|
|
onReachBottom: function () {
|
|
|
|
},
|
|
|
|
/**
|
|
* 用户点击右上角分享
|
|
*/
|
|
onShareAppMessage: function () {
|
|
|
|
}
|
|
})
|