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.
 

749 lines
25 KiB

// pages/info/roadInfo/index.js
let device = wx.getSystemInfoSync();
const ratio = device.windowWidth / 750;
import commonApi from "../../../utils/https/common"
import QRCode from '../../../utils/weapp-qrcode.js'
import util from '../../../utils/util'
let app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
autoPlay: true,
fixed: false,
type: 1,
top: 0,
isLike: 0,
commentTotal: 0,
comment: [],
info: null,
skuFlag: null,
producNum: 1,
skuIndex: 0,
aniSkuIndex: -1,
retailId: "",
cartTop: 0,
cartImgInfo: null,
cartCount: 0,
shareImg: null,
showShareFlag: false,
allowance_data: null,
showAllowance: false,
tjList: [], //推荐商品列表
iShop: false,
supplierId: null,
showQrCode: false,
wxqrcode: null,
showDetail: false,
lat:120,
lng:31,
distance: 0
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//删除临时存储的联系人
wx.removeStorageSync('linkMan')
let rect = wx.getMenuButtonBoundingClientRect(),
that = this;
let height = (rect.top - device.statusBarHeight) * 2 + rect.height + device.statusBarHeight;
this.setData({
top: height,
id: options.id
})
// 获取购物车按钮的位置
// wx.createSelectorQuery().select('#cart').boundingClientRect(function (res) {
// console.log(res)
// that.setData({
// cartTop: res.top
// })
// }).exec()
if (options.retailId) {
this.setData({
retailId: options.retailId
})
}
commonApi._post("product/get_product_detail", {
id: options.id
}).then(res => {
res.data.display_tags = (res.data.display_tags ? res.data.display_tags.split(",") : []).splice(0, 2);
if (options.skuid) {
let sku = res.data.sku.find(item => item.id == options.skuid);
res.data.sku = [sku];
}
res.data.flag = res.data.sku.find(item => item.flag == 'on') ? res.data.flag : 0
// 解析 service_desc service_images
try {
let service_desc = JSON.parse(res.data.service_desc)
let service_images = (res.data.service_images ? res.data.service_images.split(",") : [])
service_desc.forEach((v,index)=>{
v.image = 'https://static.ticket.sz-trip.com'+service_images[index]
})
res.data.serviceData = service_desc
} catch(e) {}
let resData = res.data
this.setData({
info: resData,
supplierId: res.data.supplier_id,
iShop: res.data.supplier_id ? true : false
})
this.getDistance()
this.BroswerRecord()
})
// 推荐
commonApi._post("search/product_recommend", {
offset: 0,
limit: 3,
rand: true,
type: 'show',
product_ids:options.id,
}).then(res => {
try {
this.setData({
tjList: res.data.list.slice(0,3)
})
} catch (error) {
console.log(error);
}
})
},
// 获取距离
getDistance () {
let that = this
wx.getLocation({
type: 'gcj02',
success: function (res) {
that.setData({lat: res.latitude,lon: res.longitude})
commonApi.user_post("scene/calculate_distance", {
lat1: res.latitude,
lng1:res.longitude,
lat2:that.data.info.scene_lat,
lng2:that.data.info.scene_lon
}).then(res => {
console.log(res)
if (res&&res.data && res.data.distance) {
that.setData({
distance: res.data.distance
})
}
})
}
})
},
changeAllowance: function () {
this.setData({
showAllowance: !this.data.showAllowance
})
},
BroswerRecord: function () {
setTimeout(() => {
if (app.globalData.uuid) {
commonApi._post('browse/browse_record', {
type: "goods",
title: this.data.info.title,
drive: "mini",
source_id: this.data.info.id,
url: "/pages/info/postProductInfo/index?id=" + this.data.info.id,
uuid: app.globalData.uuid
}).then(res => {})
} else {
this.BroswerRecord();
}
}, 500)
},
like: function () {
let id = this.data.id,
isLike = this.data.isLike;
commonApi.user_post("product/" + (isLike == 1 ? "product_cancel_collection" : "product_collection"), {
product_id: id
}).then(res => {
if (res.code == 1) {
this.setData({
isLike: isLike == 1 ? 0 : 1
})
}
})
},
changeMenu: function (e) {
let index = e.currentTarget.dataset.index,
that = this;
const query = wx.createSelectorQuery(); //创建节点查询器
query.select("#box" + index).boundingClientRect() //选择toViewid获取位置信息
query.selectViewport().scrollOffset() //获取页面查询位置的
query.exec(function (res) {
let scrollTop = res[0].top + res[1].scrollTop - 110 * ratio - that.data.top;
wx.pageScrollTo({
scrollTop: scrollTop + 4,
duration: 0
})
that.setData({
type: index
})
})
},
onPageScroll: function (e) {
let that = this,
height = this.data.top;
let topHeight = height;
wx.createSelectorQuery().select('#menus').boundingClientRect(function (rect) {
if (rect.top <= topHeight) {
// 此时应该把menus固定在顶部
that.setData({
fixed: true
})
} else {
that.setData({
fixed: false
})
}
// 滚动时判断滚动到哪个部分了
const query = wx.createSelectorQuery(); //创建节点查询器
query.select("#box1").boundingClientRect() //选择toViewid获取位置信息
query.select("#box2").boundingClientRect() //选择toViewid获取位置信息
query.select("#box3").boundingClientRect() //选择toViewid获取位置信息
// query.select("#box4").boundingClientRect() //选择toViewid获取位置信息
let minHeight = that.data.fixed ? (110 * ratio + height) : topHeight;
query.exec(function (res) {
try {
if (res[2].top < minHeight) {
that.setData({
type: 3
})
}else if (res[1].top < minHeight) {
that.setData({
type: 2
})
} else {
that.setData({
type: 1
})
}
} catch(e) {}
})
}).exec()
},
showCart: function () {
commonApi.user_post('wx/get_user_keep', {
jumpurl: '/pages/info/postProductInfo/index?id=' + this.data.id,
title: this.data.info.title,
type: 'mini'
}).then(res => {
if (res.data.subscribe == 0) {
this.setData({
wxqrcode: res.data.qrcode,
showQrCode: true
})
} else {
if (this.data.info.sku.length == 0) {
wx.showToast({
title: '该产品未设置规格,不能加购',
icon: 'none'
})
return;
}
this.setData({
skuFlag: "cart"
})
let that = this
wx.createSelectorQuery().select('#skuImg').boundingClientRect(function (res) {
console.log(res)
that.setData({
cartImgInfo: 'top:' + res.top + 'px;left:' + res.left + 'px;'
})
}).exec()
}
})
},
hideSku: function () {
this.setData({
skuFlag: null,
cartImgInfo: null
})
},
minus: function () {
if (this.data.producNum == 1) return;
this.setData({
producNum: this.data.producNum - 1
})
},
add: function () {
this.setData({
producNum: this.data.producNum + 1
})
},
selectSku: function (e) {
let index = e.currentTarget.dataset.index;
this.setData({
skuIndex: index
})
},
showOrder: function () {
// if(this.data.info.sku.length==0){
// wx.showToast({
// title: '该演出暂时无法预约',
// icon:'none'
// })
// return;
// }
// app.globalData.couponInfo = null;
// app.globalData.productShow = this.data.info;
// app.globalData.retailId = this.data.retailId;
wx.navigateTo({
url: '/pages/order/show/index?id='+this.data.id,
})
},
order: function () {
app.globalData.postProduct = []
app.globalData.list = []
commonApi.user_post("/product/checkStock", {
sku_id: this.data.info.sku[this.data.skuIndex].id,
}).then(res => {
if (res && res.code != 1) {
return;
} else {
if (this.data.skuFlag == 'order') {
wx.setStorageSync('login_from', 'product_order_login')
wx.setStorageSync('order_from', 'product_order_submit')
app.globalData.couponInfo = null;
// 购买
let product = [{
product: this.data.info,
sku: this.data.info.sku[this.data.skuIndex],
productNum: this.data.producNum
}];
app.globalData.postProduct = product;
app.globalData.retailId = this.data.retailId;
app.globalData.listName = null
if (this.data.info.is_package) {
app.globalData.product = product[0];
wx.navigateTo({
url: '/pages/order/WineSceneOrder/index',
})
} else {
wx.navigateTo({
url: '/pages/order/postOrder/index',
})
}
} else {
let tag_id = this.data.info.tag_id,type = ''
if (tag_id.includes(20) || tag_id.includes(19)) { //文创
type = '1'
}else if (tag_id.includes(5)) { //非遗
type = '2'
}else {
type = ''
}
commonApi.user_post("cart/add_sku", {
sku_id: this.data.info.sku[this.data.skuIndex].id,
num: this.data.producNum,
type:type
}).then(res => {
if (res.code == 1) {
commonApi.user_post('cart/get_list', {}).then(res => {
this.setData({
cartCount: res.data.length
})
})
// 加动效
this.setData({
skuFlag: null,
aniSkuIndex: this.data.skuIndex,
cartImgInfo: null
})
setTimeout(() => {
this.setData({
aniSkuIndex: -1
})
wx.showModal({
title: "提示",
content: "去购物车结算?",
success: function (res) {
if (res.confirm) {
wx.navigateTo({
url: '/pages/user/cartlist/list',
})
}
}
})
}, 650)
}
})
}
}
})
},
// 分享
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.info.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/MailMerchandiseDetail?id=' + that.data.info.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.info.title, 25 * ratio, 450 * ratio, 480 * ratio, ratio);
// 售价
ctx.setFillStyle("#D62828");
ctx.setFontSize(40 * ratio); //字大小
ctx.setTextAlign('left'); //是否居中显示,参考点画布中线
let price = "¥" + (that.data.info.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.info.subtitle;
if (that.data.info.subtitle.length > 10) {
subtitle = that.data.info.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 = "¥" + (that.data.info.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 + market_price_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);
}
},
gotoDetail: function (e) {
let item = e.currentTarget.dataset.item;
if (item.type == 'travels') {
// 游记做特殊处理 其他都按照原来的来
wx.navigateTo({
url: '/pages/info/strategyInfo/index?id=' + item.s_id,
})
} else {
util.gotoDetail(item);
}
},
gotolocation: function () {
let info = this.data.info;
wx.openLocation({
latitude: Number(info.scene_lat),
longitude: Number(info.scene_lon),
name:info.scene_name,
address:info.scene_address
})
},
// 演出详情展开收起
changeShowDetail: function (e) {
let showDetail = e.currentTarget.dataset.flag;
this.setData({showDetail: showDetail})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
app.globalData.postProduct = []
if (!wx.getStorageSync('jstrip_token')) {
return;
}
if (this.data.info && this.data.info.id) {
commonApi.user_post("product/is_product_collection", {
product_id: this.data.info.id
}).then(res => {
this.setData({
isLike: res.data
})
this.drawImg()
})
commonApi.user_post('cart/get_list', {}).then(res => {
this.setData({
cartCount: res.data.length
})
})
} else {
setTimeout(() => {
this.onShow()
}, 200)
}
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})