jintaotao
4 years ago
18 changed files with 2631 additions and 96 deletions
@ -0,0 +1,693 @@ |
|||
// pages/info/sceneProductInfo/index.js
|
|||
let device = wx.getSystemInfoSync(); |
|||
const ratio = device.windowWidth / 750; |
|||
import commonApi from "../../../utils/https/common" |
|||
import util from "../../../utils/util" |
|||
import QRCode from '../../../utils/weapp-qrcode.js' |
|||
let app = getApp() |
|||
Page({ |
|||
|
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
info: null, |
|||
bookingInfo: null, |
|||
bookingInfoTitle: "", |
|||
safeBottom: app.globalData.safeBottom, |
|||
isLike: 0, |
|||
comment: [], |
|||
commentTotal: 0, |
|||
isTest: true, |
|||
retailId: "", |
|||
shareImg: null, |
|||
showShareFlag: false, |
|||
showAllowance: false, |
|||
allowance_data: null, |
|||
cartTop: 0, |
|||
cartImgInfo: null, |
|||
cartCount: 0, |
|||
skuFlag: null, |
|||
skuIndex: 0, |
|||
aniSkuIndex: -1, |
|||
producNum: 1 |
|||
}, |
|||
|
|||
showCart: function () { |
|||
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; |
|||
} |
|||
this.setData({ |
|||
skuFlag: 'order' |
|||
}) |
|||
}, |
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad: function (options) { |
|||
if (!options.id) { |
|||
util.back() |
|||
return; |
|||
} |
|||
if (options.retailId) { |
|||
this.setData({ |
|||
retailId: options.retailId |
|||
}) |
|||
} |
|||
this.setData({ |
|||
id: options.id |
|||
}) |
|||
commonApi._post("scene/detail", { |
|||
id: options.id |
|||
}).then(res => { |
|||
if (!res.data) { |
|||
wx.showToast({ |
|||
title: '产品已下架', |
|||
icon: 'none' |
|||
}) |
|||
setTimeout(() => { |
|||
util.back(); |
|||
}, 1000) |
|||
return; |
|||
} |
|||
res.data.display_tags = (res.data.display_tags ? res.data.display_tags.split(",") : []).splice(0, 2); |
|||
// 如果是带有指定good_id的 那么取指定的
|
|||
if (options.gid) { |
|||
let pItem = res.data.product.find(item => item.id == options.gid); |
|||
if (pItem) { |
|||
res.data.product = [pItem]; |
|||
} |
|||
} |
|||
// 如果带有指定skuid的话 那么取指定的sku展示
|
|||
if (options.skuid) { |
|||
let pItem = null; |
|||
for (let i = 0; i < res.data.product.length; i++) { |
|||
for (let j = 0; j < res.data.product[i].sku.length; j++) { |
|||
if (res.data.product[i].sku[j].id == options.skuid) { |
|||
res.data.product[i].sku = [res.data.product[i].sku[j]]; |
|||
pItem = res.data.product[i]; |
|||
break; |
|||
} |
|||
} |
|||
} |
|||
if (pItem) { |
|||
res.data.product = [pItem]; |
|||
} |
|||
} |
|||
// res.data.listimg = res.data.listimg?res.data.listimg.split(","):[];
|
|||
res.data.product.map(product => { |
|||
product.sku.map(sku => { |
|||
sku.display_tags = (sku.display_tags ? sku.display_tags.split(",") : []).splice(0, 2); |
|||
}) |
|||
}) |
|||
res.data.sku = [] |
|||
for (let i = 0; i < res.data.product.length; i++) { |
|||
res.data.sku = [...res.data.sku, ...res.data.product[i].sku] |
|||
} |
|||
this.setData({ |
|||
info: res.data |
|||
}) |
|||
util.pagePoint({ event: 'scene_view', param: { type: res.data.type, id: res.data.id } }, 1) |
|||
this.BroswerRecord() |
|||
}) |
|||
// 获取收藏的状态
|
|||
if (wx.getStorageSync("jstrip_token")) { |
|||
commonApi.user_post("scene/is_scene_collection", { |
|||
scene_id: options.id |
|||
}).then(res => { |
|||
this.setData({ |
|||
isLike: res.data |
|||
}) |
|||
}) |
|||
} |
|||
commonApi._post("ask/getQuestionList", { |
|||
scene_id: options.id, |
|||
page_no: 1, |
|||
page_num: 3 |
|||
}).then(res => { |
|||
this.setData({ |
|||
ask: res.data.rows |
|||
}) |
|||
console.log(res) |
|||
}) |
|||
// 获取评价列表
|
|||
commonApi._post("scene/get_comment", { |
|||
scene_id: options.id |
|||
}).then(res => { |
|||
res.data.list.map(item => { |
|||
item.rate = Number(item.rate) |
|||
}) |
|||
this.setData({ |
|||
comment: res.data.list.splice(0, 3), |
|||
commentTotal: res.data.total |
|||
}) |
|||
console.log(res) |
|||
}) |
|||
}, |
|||
changeAllowance: function () { |
|||
this.setData({ |
|||
showAllowance: !this.data.showAllowance |
|||
}) |
|||
}, |
|||
BroswerRecord: function () { |
|||
setTimeout(() => { |
|||
if (app.globalData.uuid) { |
|||
commonApi._post('browse/browse_record', { |
|||
type: "scene", |
|||
title: this.data.info.title, |
|||
drive: "mini", |
|||
source_id: this.data.info.id, |
|||
url: "/pages/info/sceneProductInfo/index?id=" + this.data.info.id, |
|||
uuid: app.globalData.uuid |
|||
}).then(res => { |
|||
}) |
|||
} |
|||
else { |
|||
this.BroswerRecord(); |
|||
} |
|||
}, 500) |
|||
}, |
|||
like: function () { |
|||
let id = this.data.id, isLike = Number(this.data.isLike); |
|||
console.log(isLike) |
|||
commonApi.user_post(isLike != 1 ? "scene/scene_collection" : "scene/scene_cancel_collection", { |
|||
scene_id: id |
|||
}).then(res => { |
|||
if (res.code == 1) { |
|||
console.log(isLike) |
|||
wx.showToast({ |
|||
title: '操作成功', |
|||
}) |
|||
this.setData({ |
|||
isLike: isLike == 1 ? 0 : 1 |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
gotolocation: function () { |
|||
let info = this.data.info; |
|||
wx.openLocation({ |
|||
latitude: Number(info.lat), |
|||
longitude: Number(info.lon) |
|||
}) |
|||
}, |
|||
audioGuide: function () { |
|||
wx.navigateToMiniProgram({ |
|||
appId: 'wx74f380bc721a0379', |
|||
path: '/pages/listen/listen?title=君到苏州' |
|||
}) |
|||
}, |
|||
showBookingInfo: function (e) { |
|||
this.setData({ |
|||
bookingInfo: e.currentTarget.dataset.item.sku_model, |
|||
bookingInfoTitle: e.currentTarget.dataset.item.sku_name |
|||
}) |
|||
util.pagePoint({ |
|||
event: "scene_notice", |
|||
param: { |
|||
type: this.data.info.type, |
|||
id: this.data.info.id |
|||
} |
|||
}, 1) |
|||
}, |
|||
closeMask: function () { |
|||
this.setData({ |
|||
bookingInfo: null |
|||
}) |
|||
}, |
|||
|
|||
order: function () { |
|||
if (this.data.skuFlag == 'order') { |
|||
util.pagePoint({ |
|||
event: 'scene_order', |
|||
param: { |
|||
id: this.data.info.id, |
|||
type: this.data.info.type |
|||
} |
|||
}, 1) |
|||
wx.setStorageSync('login_from', 'scene_order_login') |
|||
wx.setStorageSync('order_from', 'scene_order_submit') |
|||
app.globalData.couponInfo = null; |
|||
// 购买
|
|||
let product = { |
|||
product: this.data.info.product.find(vm => vm.id == this.data.info.sku[this.data.skuIndex].product_id), |
|||
sku: this.data.info.sku[this.data.skuIndex], |
|||
productNum: this.data.producNum |
|||
}; |
|||
app.globalData.product = product; |
|||
app.globalData.retailId = this.data.retailId; |
|||
console.log( app.globalData.product) |
|||
wx.navigateTo({ |
|||
url: '/pages/order/scene/index', |
|||
}) |
|||
} |
|||
else { |
|||
commonApi.user_post("cart/add_sku", { |
|||
sku_id: this.data.info.sku[this.data.skuIndex].id, |
|||
num: this.data.producNum |
|||
}).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) |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
pagePoint: function (e) { |
|||
util.pagePoint({ |
|||
event: e.currentTarget.dataset.event, |
|||
param: { |
|||
type: this.data.info.type, |
|||
id: this.data.info.id |
|||
} |
|||
}, 1) |
|||
}, |
|||
// 分享
|
|||
share: function () { |
|||
if (!wx.getStorageSync("jstrip_token")) { |
|||
wx.setStorageSync('login_from', 'scene_share_login') |
|||
commonApi.user_post("user/getMyInfo", {}).then(res => { |
|||
}).catch(err => { |
|||
}) |
|||
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: !that.data.showShareFlag |
|||
}) |
|||
util.pagePoint({ event: 'scene_share_save', param: { type: that.data.info.type, id: that.data.info.id } }, 1) |
|||
}, |
|||
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/ScenicDetail?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.sub_title |
|||
if (subtitle && subtitle.length > 10) { |
|||
subtitle = subtitle.substr(0, 10) + '...' |
|||
} |
|||
if (subtitle) { |
|||
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.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, 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.info && this.data.info.id) { |
|||
this.drawImg() |
|||
// 获取补贴
|
|||
if (this.data.product.length == 1) { |
|||
commonApi.user_post("product/getProductAllowancePrice", { |
|||
product_code: this.data.product[0].product.product_code |
|||
}).then(resTwo => { |
|||
console.log(resTwo) |
|||
if (resTwo && resTwo.code == 1) { |
|||
this.setData({ |
|||
allowance_data: resTwo.data |
|||
}) |
|||
let spread_price = Number(this.data.allowance_data.discount_limit_price - this.data.allowance_data.user_used_price) |
|||
let sInfo = this.data.product[0].sku |
|||
console.log(9999, this.data.allowance_data.discount_rate / 100 * sInfo.price) |
|||
console.log(9999, spread_price) |
|||
if (spread_price > 0) { |
|||
if (spread_price < this.data.allowance_data.discount_rate / 100 * sInfo.price) { |
|||
this.setData({ |
|||
allowance_price: spread_price |
|||
}) |
|||
} else { |
|||
this.setData({ |
|||
allowance_price: this.data.allowance_data.discount_rate / 100 * sInfo.price |
|||
}) |
|||
} |
|||
this.changePrice() |
|||
} else { |
|||
this.setData({ |
|||
allowance_price: 0 |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
else { |
|||
setTimeout(() => { |
|||
this.onShow() |
|||
}, 200) |
|||
} |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage: function () { |
|||
} |
|||
}) |
|||
@ -0,0 +1,6 @@ |
|||
{ |
|||
"usingComponents": { |
|||
"title":"/pages/component/TitleHeader", |
|||
"notice":"/pages/component/notice/notice" |
|||
} |
|||
} |
|||
@ -0,0 +1,217 @@ |
|||
<!--pages/info/sceneProductInfo/index.wxml--> |
|||
<title title="产品详情"></title> |
|||
<view class="iconfont icon-fenxiang" bindtap="share"></view> |
|||
<!-- <view class="iconfont {{isLike==1?'icon-shoucang':'icon-xin'}}" bindtap="like"></view> --> |
|||
<!-- <view class="audio-box" bindtap="audioGuide"> |
|||
<view>语音导览</view> |
|||
<image src="https://static.ticket.sz-trip.com/xcxImages/info/play-btn.png" mode="widthFix"></image> |
|||
</view> --> |
|||
<swiper class="swiper" indicator-dots="{{true}}" wx:if="{{info}}" autoplay="{{true}}" interval="{{2000}}" |
|||
duration="{{300}}"> |
|||
<block wx:for="{{info.listimg}}" wx:key="*this"> |
|||
<swiper-item> |
|||
<image src="{{item}}" mode="aspectFill"></image> |
|||
</swiper-item> |
|||
</block> |
|||
</swiper> |
|||
<view class="top-info" wx:if="{{info}}" style="position:relative"> |
|||
<view class="title">{{info.title}}</view> |
|||
<view class="tags-box textOver"> |
|||
<view class="tag textOver" wx:for="{{info.display_tags}}">{{item}}<view class="line"></view> |
|||
</view> |
|||
<!-- <view class="tags-text">详情 <text class="iconfont icon-you"></text></view> --> |
|||
</view> |
|||
<view class="tags-box address-box" style="height:auto"> |
|||
<view class="info-address">开园时间：{{info.open_time}}</view> |
|||
<navigator url="/pages/info/sceneInfo/index?id={{info.id}}" catchtap="pagePoint" data-event="scene_detail" |
|||
class="iconfont" style="font-size:27rpx;flex-shrink:0">优待政策 | 景点介绍 <text class="iconfont icon-you" |
|||
style="font-size:24rpx"></text></navigator> |
|||
</view> |
|||
<view class="tags-box textOver address-box"> |
|||
<view class="info-address">地址：{{info.address}}</view> |
|||
<view class="iconfont icon-daohang" bindtap="gotolocation"></view> |
|||
</view> |
|||
<view class="status-text{{info.garden_flag==0?' disable':''}}" |
|||
wx:if="{{info.garden_flag_text && info.garden_flag!=1}}">{{info.garden_flag_text}}</view> |
|||
</view> |
|||
<view class="box" wx:if="{{info}}" wx:for="{{info.product}}"> |
|||
<view class="allowance-box" wx:if="{{info.allowance}}" bindtap="changeAllowance"> |
|||
补贴价 |
|||
<view class="com-price two">￥{{ info.allowance.mini_price / 100 }}起</view> |
|||
<view class="yellow">单品最高补贴{{ info.allowance.max_price / 100 }}元</view> |
|||
</view> |
|||
<view class="box-top"> |
|||
<text>{{item.title}}</text> |
|||
</view> |
|||
<view class="product-item" wx:for="{{item.sku}}" wx:for-item="sku"> |
|||
<view class="skutitle">{{sku.sku_name}}</view> |
|||
<view class="product-box"> |
|||
<view class="product-left textOver"> |
|||
<view class="product-tags"> |
|||
<view class="product-tag textOver" wx:for="{{sku.display_tags}}">{{item}}</view> |
|||
</view> |
|||
<view class="order-tip-text" bindtap="showBookingInfo" data-item="{{sku}}">预订须知>></view> |
|||
</view> |
|||
<view class="product-right"> |
|||
<view class="price"><text>￥</text><text>{{sku.price?sku.price/100:0}}</text><text>起</text></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- <view class="empty-box"> |
|||
<view>这里空空如也，快去向大家提问吧!</view> |
|||
<view class="empty-btn">去提问</view> |
|||
</view> --> |
|||
</view> |
|||
<view class="box" wx:if="{{isTest==false}}"> |
|||
<view class="box-top"> |
|||
<text class="iconfont icon-tiwen1"></text><text>问大家</text> |
|||
</view> |
|||
<view class="empty-box" wx:if="{{!ask || ask.length==0}}"> |
|||
<view>这里空空如也，快去向大家提问吧!</view> |
|||
<navigator url="/pages/ask/index?id={{id}}" catchtap="pagePoint" data-event="scene_question" class="empty-btn">去提问 |
|||
</navigator> |
|||
</view> |
|||
<view class="ask-list" wx:else> |
|||
<navigator url="/pages/ask/info/index?id={{item.id}}" catchtap="pagePoint" data-event="scene_comment" |
|||
class="ask-item" wx:for="{{ask}}"> |
|||
<view class="item-ques"> |
|||
<image class="item-icon" src="https://static.ticket.sz-trip.com/xcxImages/ask/ask.png" mode="widthFix"></image> |
|||
<view class="ques">{{item.question_name}}</view> |
|||
<view class="ques-num" wx:if="{{item.answer.total!=0}}">{{item.answer.total}}个回答</view> |
|||
<view class="ques-num" wx:if="{{item.answer.total==0}}">暂无回答</view> |
|||
</view> |
|||
<!-- <view class="item-ques"> |
|||
<image class="item-icon" src="https://static.ticket.sz-trip.com/xcxImages/ask/ans.png" mode="widthFix"></image> |
|||
<view class="ans">{{item.answer && item.answer.lastest_answer?item.answer.lastest_answer.answer:"暂无回答"}}</view> |
|||
</view> |
|||
<view class="ques-tip"> |
|||
<view class="ques-time">{{item.created_time}}提问</view> --> |
|||
<!-- <view class="ans-number">全部{{item.answer && item.answer.total ? item.answer.total : 0}}个回答 <text class="iconfont icon-you"></text> </view> --> |
|||
<!-- </view> --> |
|||
</navigator> |
|||
<navigator style="border-top:1rpx solid #ccc" url="/pages/ask/index?id={{info.id}}" class="more-comment-btn"> |
|||
查看全部问答<text class="iconfont icon-you"></text></navigator> |
|||
</view> |
|||
</view> |
|||
<view class="box"> |
|||
<view class="box-top"> |
|||
<text class="iconfont icon-tiwen"></text><text>游客点评</text><text class="score" |
|||
wx:if="{{info && commentTotal>0}}">{{info.rate}}分</text> |
|||
<text class="all-comment-num">共{{commentTotal}}条</text> |
|||
</view> |
|||
<view class="empty-box" wx:if="{{!comment || comment.length==0}}"> |
|||
<view>这里空空如也，快去点评吧!</view> |
|||
<!-- <navigator url="/pages/ask/index?id={{id}}" class="empty-btn">去点评</navigator> --> |
|||
</view> |
|||
<navigator wx:for="{{comment}}" url="/pages/list/comments/index?id={{info.id}}" class="product-comment"> |
|||
<view class="product-comment-top"> |
|||
<image src="{{item.user.avatar}}" mode="aspectFill"></image> |
|||
<view class="comment-info"> |
|||
<view class="nickname">{{item.user.nickname}}</view> |
|||
<view class="iconfont"><text wx:for="{{item.rate}}" class="icon-xingxing"></text><text |
|||
wx:for="{{5 - item.rate}}" style="color:#999" class="icon-xingxing"></text></view> |
|||
</view> |
|||
<view class="comment-date">{{item.create_time}}</view> |
|||
</view> |
|||
<view class="comment-content">{{item.content}}</view> |
|||
</navigator> |
|||
<navigator url="/pages/list/comments/index?sceneid={{id}}" wx:if="{{comment.length>0}}" class="more-comment-btn"> |
|||
查看全部点评<text class="iconfont icon-you"></text></navigator> |
|||
</view> |
|||
<view style="height:{{safeBottom}}px"></view> |
|||
<view style="height:140rpx"></view> |
|||
<view class="fixed-bottom"> |
|||
<navigator url="/pages/user/service/index" catchtap="pagePoint" data-event='product_customservice' class="kefu-box"> |
|||
<view class="iconfont icon-kefu"></view> |
|||
<view>客服</view> |
|||
</navigator> |
|||
<view bindtap="like" class="kefu-box" style="margin-left:70rpx"> |
|||
<view class="iconfont {{isLike==1?'icon-shoucang':'icon-xin'}}"></view> |
|||
<view>收藏</view> |
|||
</view> |
|||
<view style="flex:1"></view> |
|||
<view class="btns"> |
|||
<view class="btn" bindtap="showCart">加入购物车</view> |
|||
<view class="btn" bindtap="showOrder" wx:if="{{info && info.flag==1}}">立即预订</view> |
|||
<view class="btn disable" wx:elif="{{info}}">该商品已下架</view> |
|||
</view> |
|||
</view> |
|||
<!-- 购物车悬浮框 --> |
|||
<navigator url="/pages/user/cartlist/list" catchtap="pagePoint" data-event='product_cart_click' class="cart-box" |
|||
id="cart"> |
|||
<image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/cart.png" mode="widthFix"></image> |
|||
<view class="cart-num">{{cartCount}}</view> |
|||
</navigator> |
|||
<view class="mask" wx:if="{{skuFlag}}"> |
|||
<view class="mask-bg" bindtap="hideSku"></view> |
|||
<view class="mask-content"> |
|||
<view class="iconfont icon-close" bindtap="hideSku"></view> |
|||
<view class="sku-info-box"> |
|||
<image id="skuImg" src="{{info.sku[skuIndex].headimg}}" mode="aspectFill"></image> |
|||
<view class="sku-info"> |
|||
<view class="sku-price">{{info.sku[skuIndex].price/100}} |
|||
<view class="allowance" wx:if="{{allowance_data}}"> |
|||
补贴价：￥{{ (1 - allowance_data.discount_rate / 100) * info.sku[skuIndex].price / 100 }}</view> |
|||
</view> |
|||
<view class="sku-name">已选择：{{info.sku[skuIndex].sku_name}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="sku-names"> |
|||
<view bindtap="selectSku" data-index="{{index}}" class="sku-name-item textOver{{index==skuIndex?' active':''}}" |
|||
wx:for="{{info.sku}}">{{item.sku_name}}</view> |
|||
</view> |
|||
<view class="number-box"> |
|||
<text>数量</text> |
|||
<view class="iconfont icon-sami-select" bindtap="minus"></view> |
|||
<view class="number">{{producNum}}</view> |
|||
<view class="iconfont icon-add-select" bindtap="add"></view> |
|||
</view> |
|||
<view style="height:138rpx"></view> |
|||
<view class="btn-box"> |
|||
<view class="mask-btn" bindtap="order" wx:if="{{info.sku[skuIndex].flag=='on'}}">{{skuFlag=='cart'?'确认':'立即购买'}} |
|||
</view> |
|||
<view class="mask-btn disable" wx:else>该商品已下架</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<notice bookingInfo="{{bookingInfo}}" skuName="{{bookingInfoTitle}}" wx:if="{{bookingInfo}}" bind:close="closeMask"> |
|||
</notice> |
|||
<view style="position:absolute;right:0;left:-10000rpx;top:-20000rpx;z-index:-1"> |
|||
<canvas canvas-id='imageCanvas' class='imageCanvas' style="width:551rpx;height:643rpx;" disable-scroll='true'> |
|||
</canvas> |
|||
<canvas class="canvasCode" style="opacity:0;width:500px;height:500px" canvas-id="myQrcode"></canvas> |
|||
</view> |
|||
<view class="mask" wx:if="{{showShareFlag}}" style="align-items: center;"> |
|||
<view class="mask-bg" bindtap="share"></view> |
|||
<view class="mask-content share-img-box"> |
|||
<image class="share-img" src="{{shareImg}}" mode="widthFix"></image> |
|||
<view class="share-tips"> |
|||
<view style="position:relative"> |
|||
<image class="img" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/img.png" mode="widthFix"> |
|||
</image> |
|||
<view>保存图片到相册</view> |
|||
<view class="tipimg"> |
|||
<image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/ok.png" mode="widthFix"></image> |
|||
</view> |
|||
</view> |
|||
<image style="width:36rpx" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/arrow2.png" |
|||
mode="widthFix"></image> |
|||
<view style="position:relative"> |
|||
<image class="img" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/code.png" mode="widthFix"> |
|||
</image> |
|||
<view>微信识别二维码</view> |
|||
<view class="tipimg"> |
|||
<image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/ok1.png" mode="widthFix"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="save-btn" bindtap="save">保存到相册</view> |
|||
</view> |
|||
</view> |
|||
<view class="mask mask-allowance" wx:if="{{showAllowance}}"> |
|||
<view bindtap="changeAllowance" class="mask-bg"></view> |
|||
<view class="mask-content rule-box"> |
|||
<view class="rule-title">{{info.allowance.title}}</view> |
|||
<rich-text nodes="{{info.allowance.content}}"></rich-text> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,799 @@ |
|||
/* pages/info/sceneProductInfo/index.wxss */ |
|||
page { |
|||
background: #f2f2f2; |
|||
} |
|||
|
|||
.swiper { |
|||
width: 100%; |
|||
height: 400rpx; |
|||
} |
|||
|
|||
.swiper image { |
|||
height: 400rpx; |
|||
display: block; |
|||
width: 100%; |
|||
} |
|||
|
|||
.top-info { |
|||
border-radius: 20rpx 20rpx 0 0; |
|||
background: white; |
|||
position: relative; |
|||
z-index: 1; |
|||
margin-top: -20rpx; |
|||
padding: 20rpx 40rpx; |
|||
} |
|||
|
|||
.top-info .title { |
|||
font-size: 32rpx; |
|||
font-weight: 500; |
|||
color: #000; |
|||
} |
|||
|
|||
.tags-box { |
|||
margin-top: 10rpx; |
|||
margin-bottom: 20rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
color: #0B898E; |
|||
font-size: 27rpx; |
|||
height: 50rpx; |
|||
} |
|||
|
|||
.tags-box .tag { |
|||
position: relative; |
|||
line-height: 20rpx; |
|||
font-size: 20rpx; |
|||
font-weight: 500; |
|||
line-height: 50rpx; |
|||
margin-right: 10rpx; |
|||
} |
|||
|
|||
.tags-box .tag .line { |
|||
content: "1"; |
|||
display: block; |
|||
font-size: 0; |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
background: #DAF3E9; |
|||
height: 8rpx; |
|||
top: 30rpx; |
|||
z-index: -1; |
|||
} |
|||
|
|||
.tags-text { |
|||
flex: 1; |
|||
text-align: right; |
|||
} |
|||
|
|||
.tags-box .iconfont { |
|||
margin-left: 4rpx; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.address-box { |
|||
justify-content: space-between; |
|||
margin-top: 0; |
|||
} |
|||
|
|||
.info-address { |
|||
color: #666; |
|||
font-size: 27rpx; |
|||
margin-bottom: 0rpx; |
|||
line-height: 40rpx; |
|||
} |
|||
|
|||
.address-box .iconfont { |
|||
font-size: 34rpx; |
|||
} |
|||
|
|||
.box { |
|||
margin: 20rpx; |
|||
background: white; |
|||
border-radius: 13rpx; |
|||
} |
|||
|
|||
.box-top { |
|||
line-height: 95rpx; |
|||
border-bottom: 1rpx solid #d9d9d9; |
|||
font-weight: 500; |
|||
color: #000; |
|||
font-size: 35rpx; |
|||
padding: 0 20rpx; |
|||
} |
|||
|
|||
.product-item { |
|||
margin: 0 20rpx; |
|||
padding: 27rpx 0; |
|||
border-bottom: 1rpx solid #ccc; |
|||
} |
|||
|
|||
.skutitle { |
|||
font-size: 29rpx; |
|||
color: #333; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.product-box { |
|||
display: flex; |
|||
align-items: flex-end; |
|||
justify-content: space-between; |
|||
margin-top: 20rpx; |
|||
} |
|||
|
|||
.product-left { |
|||
flex: 1; |
|||
} |
|||
|
|||
.product-tags { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.product-tag { |
|||
font-size: 20rpx; |
|||
color: #0B898E; |
|||
border-radius: 16rpx; |
|||
line-height: 30rpx; |
|||
border: 1rpx solid; |
|||
padding: 0 15rpx; |
|||
margin-right: 13rpx; |
|||
} |
|||
|
|||
.product-tags .product-tags:last-child { |
|||
margin-right: 0; |
|||
} |
|||
|
|||
.order-tip-text { |
|||
margin-top: 33rpx; |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
|
|||
.product-right { |
|||
text-align: center; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.product-right .price { |
|||
color: #D62828; |
|||
font-size: 24rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.product-right .price text:nth-child(2) { |
|||
font-weight: 500; |
|||
font-size: 33rpx; |
|||
} |
|||
|
|||
.product-right .price text:nth-child(3) { |
|||
color: #8D8D8D; |
|||
font-size: 20rpx; |
|||
} |
|||
|
|||
.product-right .btn { |
|||
background: #D62828; |
|||
color: #fff; |
|||
border-radius: 30px; |
|||
line-height: 60rpx; |
|||
font-size: 29rpx; |
|||
font-weight: 500; |
|||
width: 176rpx; |
|||
} |
|||
|
|||
.product-right .btn.disable { |
|||
background: #ccc; |
|||
} |
|||
|
|||
.box .product-item:last-child { |
|||
border-bottom: none; |
|||
} |
|||
|
|||
.box-top .iconfont { |
|||
color: #0B898E; |
|||
font-size: 33rpx; |
|||
margin-right: 16rpx; |
|||
} |
|||
|
|||
.empty-box { |
|||
text-align: center; |
|||
padding: 40rpx 0; |
|||
font-size: 23rpx; |
|||
color: #333; |
|||
} |
|||
|
|||
.empty-btn { |
|||
margin: 0 auto; |
|||
margin-top: 30rpx; |
|||
width: 283rpx; |
|||
line-height: 79rpx; |
|||
border: 1rpx solid #0B898E; |
|||
border-radius: 39rpx; |
|||
color: #0B898E; |
|||
font-size: 32rpx; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
|
|||
.box-top .score { |
|||
color: #D62828; |
|||
font-size: 30rpx; |
|||
font-weight: 400; |
|||
margin-left: 11rpx; |
|||
} |
|||
|
|||
.product-comment { |
|||
margin: 0 20rpx; |
|||
border-bottom: 1rpx solid #ccc; |
|||
padding: 33rpx 0; |
|||
} |
|||
|
|||
.product-comment-top { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
color: #999999; |
|||
align-items: center; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.product-comment-top image { |
|||
flex-shrink: 0; |
|||
width: 57rpx; |
|||
height: 57rpx; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.product-comment-top .comment-info { |
|||
flex: 1; |
|||
margin: 0 15rpx; |
|||
color: #666; |
|||
font-size: 21rpx; |
|||
} |
|||
|
|||
.product-comment-top .comment-info .iconfont { |
|||
color: #D62828; |
|||
font-size: 22rpx; |
|||
} |
|||
|
|||
.product-comment-top .comment-info .iconfont text { |
|||
margin-right: 6rpx; |
|||
} |
|||
|
|||
.comment-content { |
|||
margin-left: 72rpx; |
|||
margin-top: 36rpx; |
|||
font-size: 28rpx; |
|||
color: #000; |
|||
} |
|||
|
|||
.more-comment-btn { |
|||
line-height: 93rpx; |
|||
margin-right: 20rpx; |
|||
text-align: right; |
|||
color: #999; |
|||
font-size: 27rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.more-comment-btn .iconfont { |
|||
margin-left: 6rpx; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.all-comment-num { |
|||
float: right; |
|||
color: #999999; |
|||
font-size: 27rpx; |
|||
font-weight: 400; |
|||
} |
|||
|
|||
.ask-list .ask-item:nth-child(1) { |
|||
margin-top: 40rpx; |
|||
} |
|||
|
|||
.ask-item { |
|||
padding: 0 25rpx; |
|||
margin-bottom: 40rpx; |
|||
} |
|||
|
|||
.item-ques { |
|||
display: flex; |
|||
color: #000; |
|||
align-items: center; |
|||
font-size: 29rpx; |
|||
line-height: 38rpx; |
|||
} |
|||
|
|||
.item-ques image { |
|||
width: 36rpx; |
|||
margin-right: 18rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.item-ques .ques { |
|||
font-size: 32rpx; |
|||
font-weight: 500; |
|||
flex: 1; |
|||
} |
|||
|
|||
.ques-tip { |
|||
margin-left: 54rpx; |
|||
color: #999999; |
|||
font-size: 24rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.ans-number { |
|||
color: #0B898E; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.ans-number .iconfont { |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.sku-info-box { |
|||
margin: 50rpx 40rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.sku-info-box image { |
|||
width: 218rpx; |
|||
height: 180rpx; |
|||
border-radius: 13rpx; |
|||
display: block; |
|||
margin-right: 40rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.sku-info { |
|||
flex: 1; |
|||
} |
|||
|
|||
.sku-price { |
|||
font-size: 40rpx; |
|||
font-weight: 500; |
|||
color: #D62828; |
|||
margin: 20rpx 0; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
} |
|||
|
|||
.sku-price::before { |
|||
content: "￥"; |
|||
font-weight: 400; |
|||
font-size: 27rpx; |
|||
vertical-align: baseline; |
|||
} |
|||
|
|||
.sku-price view { |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
background-color: #D62828; |
|||
border-radius: 22rpx; |
|||
line-height: 44rpx; |
|||
margin-left: 7rpx; |
|||
padding: 0 20rpx; |
|||
} |
|||
|
|||
.sku-name { |
|||
font-size: 27rpx; |
|||
color: #666666; |
|||
} |
|||
|
|||
.sku-names { |
|||
display: flex; |
|||
font-size: 29rpx; |
|||
color: #333; |
|||
margin: 0 40rpx; |
|||
text-align: center; |
|||
flex-wrap: wrap; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.sku-name-item { |
|||
background: #EFEFEF; |
|||
border: 1rpx solid #EFEFEF; |
|||
width: 318rpx; |
|||
line-height: 77rpx; |
|||
border-radius: 14rpx; |
|||
margin-bottom: 25rpx; |
|||
margin-right: 30rpx; |
|||
} |
|||
|
|||
.sku-name-item:nth-child(2n) { |
|||
margin-right: 0; |
|||
} |
|||
|
|||
.sku-name-item.active { |
|||
color: #0B898E; |
|||
border-color: #0B898E; |
|||
background: rgba(11, 137, 142, 0.1); |
|||
} |
|||
|
|||
.number-box { |
|||
display: flex; |
|||
align-items: center; |
|||
border-top: 1rpx solid #ccc; |
|||
justify-content: space-between; |
|||
margin: 0 40rpx; |
|||
padding: 40rpx 0; |
|||
} |
|||
|
|||
.number-box text { |
|||
flex: 1; |
|||
font-size: 29rpx; |
|||
color: #333; |
|||
} |
|||
|
|||
.number-box view { |
|||
border: 1rpx solid #666; |
|||
border-radius: 7rpx; |
|||
text-align: center; |
|||
width: 67rpx; |
|||
line-height: 67rpx; |
|||
font-size: 33rpx; |
|||
color: #000; |
|||
} |
|||
|
|||
.number-box view.disable { |
|||
border-color: #ccc; |
|||
color: #999; |
|||
} |
|||
|
|||
.number-box view.number { |
|||
width: 94rpx; |
|||
margin: 0 15rpx; |
|||
} |
|||
|
|||
.btn-box { |
|||
height: 138rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0px 0px 16rpx 0px rgba(6, 0, 1, 0.1); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
} |
|||
|
|||
.mask-btn { |
|||
width: 670rpx; |
|||
line-height: 78rpx; |
|||
background: #D62828; |
|||
border-radius: 39rpx; |
|||
color: #fff; |
|||
text-align: center; |
|||
font-size: 33rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.mask-btn.disable { |
|||
background: #ccc; |
|||
} |
|||
/* .icon-xin, |
|||
.icon-shoucang { |
|||
position: absolute; |
|||
right: 100rpx; |
|||
margin-top: 20rpx; |
|||
width: 60rpx; |
|||
line-height: 60rpx; |
|||
background: rgba(0, 0, 0, 0.4); |
|||
border-radius: 50%; |
|||
text-align: center; |
|||
color: #fff; |
|||
font-size: 36rpx; |
|||
z-index: 1; |
|||
} */ |
|||
|
|||
.icon-fenxiang { |
|||
position: absolute; |
|||
right: 20rpx; |
|||
margin-top: 20rpx; |
|||
width: 60rpx; |
|||
line-height: 60rpx; |
|||
background: rgba(0, 0, 0, 0.4); |
|||
border-radius: 50%; |
|||
text-align: center; |
|||
color: #fff; |
|||
font-size: 36rpx; |
|||
z-index: 1; |
|||
} |
|||
.icon-shoucang { |
|||
color: #D62828; |
|||
} |
|||
|
|||
.ques-num { |
|||
flex-shrink: 0; |
|||
margin-left: 10rpx; |
|||
font-size: 29rpx; |
|||
color: #999; |
|||
font-weight: 400; |
|||
} |
|||
|
|||
.audio-box { |
|||
display: flex; |
|||
align-items: center; |
|||
position: absolute; |
|||
left: 0; |
|||
height: 64rpx; |
|||
background: rgba(0, 0, 0, 0.4); |
|||
color: #fafafa; |
|||
width: 211rpx; |
|||
justify-content: center; |
|||
border-radius: 0 32rpx 32rpx 0; |
|||
margin-top: 282rpx; |
|||
font-size: 31rpx; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.audio-box image { |
|||
width: 45rpx; |
|||
display: block; |
|||
margin-left: 10rpx; |
|||
} |
|||
|
|||
|
|||
.mask-content { |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
} |
|||
|
|||
.mask-content .icon-close { |
|||
position: absolute; |
|||
right: 40rpx; |
|||
top: 40rpx; |
|||
} |
|||
|
|||
|
|||
/* 购物车 */ |
|||
.cart-box { |
|||
position: fixed; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.2); |
|||
border-radius: 50%; |
|||
right: 20rpx; |
|||
bottom: 166rpx; |
|||
} |
|||
|
|||
.cart-box image { |
|||
display: block; |
|||
width: 49rpx; |
|||
} |
|||
|
|||
.cart-num { |
|||
width: 26rpx; |
|||
border: 1rpx solid; |
|||
border-radius: 50%; |
|||
line-height: 26rpx; |
|||
text-align: center; |
|||
font-size: 23rpx; |
|||
color: #D20000; |
|||
position: absolute; |
|||
right: -2rpx; |
|||
top: -5rpx; |
|||
} |
|||
|
|||
.headimg { |
|||
position: fixed; |
|||
z-index: 3; |
|||
left: -218rpx; |
|||
width: 218rpx; |
|||
height: 180rpx; |
|||
top: 0; |
|||
} |
|||
|
|||
.headimg.active { |
|||
transition: left .6s linear, top .6s cubic-bezier(0.5, -0.5, 1, 1), width .6s ease, height .6s ease; |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
left: 650rpx; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.share-img-box { |
|||
/* width: 551rpx; */ |
|||
position: static; |
|||
background: none; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.share-img { |
|||
display: block; |
|||
width: 551rpx; |
|||
} |
|||
|
|||
.share-tips { |
|||
width: 426rpx; |
|||
height: 150rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 25rpx; |
|||
margin-top: 25rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 0 65rpx; |
|||
color: #999; |
|||
font-size: 24rpx; |
|||
text-align: center; |
|||
line-height: 40rpx; |
|||
} |
|||
|
|||
.share-tips .img { |
|||
display: block; |
|||
width: 55rpx; |
|||
margin: 0 auto; |
|||
margin-bottom: 4rpx; |
|||
} |
|||
|
|||
.tipimg { |
|||
position: absolute; |
|||
left: 50%; |
|||
margin-left: 16rpx; |
|||
width: 24rpx; |
|||
height: 24rpx; |
|||
background: #D62828; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
top: 34rpx; |
|||
} |
|||
|
|||
.tipimg image { |
|||
width: 21rpx; |
|||
display: block; |
|||
|
|||
} |
|||
|
|||
.save-btn { |
|||
width: 403rpx; |
|||
line-height: 77rpx; |
|||
background: #D62828; |
|||
border-radius: 39rpx; |
|||
text-align: center; |
|||
color: #fff; |
|||
font-size: 31rpx; |
|||
font-weight: 500; |
|||
margin-top: 50rpx; |
|||
} |
|||
|
|||
.status-text { |
|||
position: absolute; |
|||
right: 0; |
|||
top: 22rpx; |
|||
width: 140rpx; |
|||
line-height: 47rpx; |
|||
background: rgba(11, 137, 142, .1); |
|||
text-align: center; |
|||
color: #0B898E; |
|||
font-size: 25rpx; |
|||
font-weight: bold; |
|||
border-radius: 23rpx 0px 0px 23rpx; |
|||
} |
|||
|
|||
.status-text.disable { |
|||
width: 120rpx; |
|||
background: rgba(51, 51, 51, .1); |
|||
color: #666666; |
|||
} |
|||
|
|||
.allowance-box { |
|||
height: 113rpx; |
|||
background: url("https://sz-qd.oss-cn-hangzhou.aliyuncs.com/uploads/20220606/0b2895725088c04fb182e09ec186f895.png"); |
|||
background-size: 100% auto; |
|||
background-repeat: no-repeat; |
|||
padding: 30rpx 30rpx 10rpx; |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
position: relative; |
|||
display: flex; |
|||
justify-content: start; |
|||
align-items: baseline; |
|||
} |
|||
|
|||
.allowance-box .com-price { |
|||
font-size: 30rpx; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.allowance-box .com-price:before { |
|||
font-size: 18rpx; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.allowance-box .com-price:after { |
|||
font-size: 18rpx; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.allowance-box .yellow { |
|||
color: #DF2115; |
|||
padding: 8rpx 14rpx; |
|||
background-color: #FDEDD4; |
|||
margin-left: 20rpx; |
|||
border-radius: 30rpx; |
|||
} |
|||
|
|||
.mask-allowance .mask-content { |
|||
margin: auto; |
|||
width: auto; |
|||
top: initial; |
|||
bottom: initial; |
|||
padding: 20rpx; |
|||
width: 80%; |
|||
} |
|||
|
|||
.mask-allowance .mask-content .rule-title { |
|||
text-align: center; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
|
|||
.fixed-bottom { |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
height: 140rpx; |
|||
background: white; |
|||
display: flex; |
|||
align-items: center; |
|||
box-shadow: 0px 0px 16rpx 0px rgba(6, 0, 1, 0.1); |
|||
padding: 0 40rpx; |
|||
color: #666666; |
|||
font-size: 23rpx; |
|||
justify-content: space-between; |
|||
text-align: center; |
|||
} |
|||
|
|||
.fixed-bottom .iconfont { |
|||
font-size: 34rpx; |
|||
line-height: 40rpx; |
|||
} |
|||
|
|||
.btns { |
|||
color: #fff; |
|||
font-size: 32rpx; |
|||
font-weight: 500; |
|||
border-radius: 39rpx; |
|||
text-align: center; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.btns .btn { |
|||
width: 216rpx; |
|||
line-height: 78rpx; |
|||
background: #D62828; |
|||
} |
|||
|
|||
.btns .btn:nth-child(1) { |
|||
margin-right: 3rpx; |
|||
border-radius: 39rpx 0 0 39rpx; |
|||
} |
|||
|
|||
.btns .btn:nth-child(2) { |
|||
border-radius: 0 39rpx 39rpx 0; |
|||
} |
|||
|
|||
.btns .btn.disable { |
|||
background: #ccc; |
|||
} |
|||
@ -0,0 +1,391 @@ |
|||
// pages/order/scene/index.js
|
|||
let app = getApp() |
|||
import util from "../../../utils/util" |
|||
import commonApi from "../../../utils/https/common" |
|||
Page({ |
|||
|
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
product: app.globalData.product, |
|||
productNum: 1, |
|||
linkmanList: [], |
|||
date: "", |
|||
time: "", |
|||
remark: "", |
|||
singlePrice: 0, |
|||
type: null, |
|||
coupon: app.globalData.couponInfo, |
|||
isLogin: false, |
|||
kjId: null, |
|||
gp_id: null, |
|||
groupName: "", |
|||
prizeId: null, |
|||
select_allowance: false, |
|||
showAllowance: false, |
|||
allowance_data: null, |
|||
allowance_price: 0, |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad: function (options) { |
|||
this.setData({ |
|||
type: options.type, |
|||
kjId: app.globalData.kjId, |
|||
gp_id: app.globalData.gp_id || app.globalData.team_id, |
|||
prizeId: wx.getStorageSync('prizeId') |
|||
}) |
|||
if (!app.globalData.product) { |
|||
util.back(); |
|||
return; |
|||
} |
|||
if (app.globalData.product.productNum) { |
|||
this.setData({ |
|||
productNum: app.globalData.product.productNum < 1 ? 1 : app.globalData.product.productNum |
|||
}) |
|||
} |
|||
this.setData({ |
|||
product: app.globalData.product, |
|||
singlePrice: this.data.gp_id ? app.globalData.product.sku.event_price : app.globalData.product.sku.price |
|||
}) |
|||
if (!this.data.kjId && !this.data.gp_id && this.data.product.isGroup != 1) { |
|||
this.couponCom = this.selectAllComponents("#coupon")[0]; |
|||
} |
|||
}, |
|||
changeGroupName: function (e) { |
|||
this.setData({ |
|||
groupName: e.detail.value |
|||
}) |
|||
}, |
|||
setLinkman: function (e) { |
|||
let linkmanList = e.detail; |
|||
if (this.data.productNum != linkmanList.length && this.data.coupon) { |
|||
wx.showToast({ |
|||
title: '订单价格发生变化，请重新选择优惠券', |
|||
icon: 'none' |
|||
}) |
|||
if (!this.data.kjId && !this.data.gp_id && this.data.product.isGroup != 1) { |
|||
this.couponCom.setNullCoupon() |
|||
} |
|||
app.globalData.couponInfo = null; |
|||
this.setData({ |
|||
coupon: null |
|||
}) |
|||
} |
|||
let productNum = linkmanList.length == 0 ? 1 : linkmanList.length; |
|||
if (this.data.gp_id) { |
|||
productNum = app.globalData.product.maxNum; |
|||
} |
|||
this.setData({ |
|||
productNum: productNum, |
|||
linkmanList: linkmanList |
|||
}) |
|||
this.changePrice() |
|||
}, |
|||
add: function () { |
|||
if (this.data.product.sku.sku_model.traveller_limit_num != 0 && this.data.productNum == this.data.product.sku.sku_model.traveller_limit_num) { |
|||
wx.showToast({ |
|||
title: '出行人限购' + this.data.product.sku.sku_model.traveller_limit_num + "份", |
|||
icon: 'none' |
|||
}) |
|||
return; |
|||
} |
|||
this.setData({ |
|||
productNum: this.data.productNum + 1 |
|||
}) |
|||
this.changePrice() |
|||
}, |
|||
minus: function () { |
|||
if (this.data.productNum == 1) return; |
|||
if (this.data.coupon) { |
|||
wx.showToast({ |
|||
title: '订单价格发生变化，请重新选择优惠券', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
if (!this.data.kjId && !this.data.gp_id && this.data.product.isGroup != 1) { |
|||
this.couponCom.setNullCoupon() |
|||
} |
|||
app.globalData.couponInfo = null; |
|||
this.setData({ |
|||
productNum: (this.data.productNum - 1), |
|||
coupon: null |
|||
}) |
|||
this.changePrice() |
|||
}, |
|||
changeDate: function (e) { |
|||
if (e.detail.price != this.data.singlePrice && this.data.coupon) { |
|||
wx.showToast({ |
|||
title: '订单价格发生变化，请重新选择优惠券', |
|||
icon: 'none' |
|||
}) |
|||
this.setData({ |
|||
coupon: null |
|||
}) |
|||
if (!this.data.kjId && !this.data.gp_id && this.data.product.isGroup != 1) { |
|||
this.couponCom.setNullCoupon() |
|||
} |
|||
app.globalData.couponInfo = null; |
|||
} |
|||
this.setData({ |
|||
date: e.detail, |
|||
singlePrice: this.data.gp_id ? this.data.product.sku.event_price : e.detail.price |
|||
}) |
|||
this.changePrice() |
|||
}, |
|||
changeTime: function (e) { |
|||
this.setData({ |
|||
time: e.detail |
|||
}) |
|||
}, |
|||
changeAllowance: function () { |
|||
this.setData({ |
|||
showAllowance: !this.data.showAllowance |
|||
}) |
|||
}, |
|||
changeRemark: function (e) { |
|||
this.setData({ |
|||
remark: e.detail.value |
|||
}) |
|||
}, |
|||
/** |
|||
* 补贴价 |
|||
*/ |
|||
changePrice: function () { |
|||
let product = this.data.product, price = product.sku.price; |
|||
if (this.data.allowance_data && this.data.select_allowance && this.data.allowance_price) { |
|||
let spread_price = Number(this.data.allowance_data.discount_limit_price - this.data.allowance_data.user_used_price); |
|||
price -= this.data.allowance_price < spread_price ? this.data.allowance_price : spread_price |
|||
} |
|||
this.setData({ |
|||
singlePrice: app.globalData.kjId ? 0 : price |
|||
}) |
|||
}, |
|||
order: function () { |
|||
let linkmanList = this.data.linkmanList, productNum = this.data.productNum, date = this.data.date, time = this.data.time, remark = this.data.remark, product = this.data.product; |
|||
let linkmanIds = []; |
|||
if (linkmanList.length < productNum && app.globalData.product.isGroup != 1) { |
|||
wx.showToast({ |
|||
title: '请选择' + productNum + "个出行人", |
|||
icon: "none" |
|||
}) |
|||
return; |
|||
} |
|||
if (!date) { |
|||
wx.showToast({ |
|||
title: '请选择使用日期', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
if (!time && date.is_time_stock == true) { |
|||
wx.showToast({ |
|||
title: '请选择使用时间', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
if (app.globalData.product.isGroup == 1 && !this.data.groupName) { |
|||
wx.showToast({ |
|||
title: '请输入团队主体名称', |
|||
icon: 'none' |
|||
}) |
|||
return; |
|||
} |
|||
linkmanList.map(item => { |
|||
linkmanIds.push(item.id) |
|||
}) |
|||
let data = { |
|||
coupon_id: this.data.coupon ? this.data.coupon.id : null, |
|||
source: "WECHATXCX", |
|||
product_list: [{ |
|||
type: product.product.type, |
|||
product_id: product.product.id, |
|||
sku_id: date.sku_id ? date.sku_id : product.sku.id, |
|||
start_time: time.start_time, |
|||
end_time: time.end_time, |
|||
use_date: date.date, |
|||
visitors: linkmanIds.join(","), |
|||
remark: remark, |
|||
product_num: app.globalData.product.isGroup == 1 ? 1 : productNum |
|||
}], |
|||
originate_order_id: this.data.kjId, |
|||
gp_id: app.globalData.gp_id, |
|||
team_id: app.globalData.team_id |
|||
} |
|||
if (app.globalData.from) { |
|||
data.system_name = app.globalData.from; |
|||
} |
|||
if (app.globalData.retailId) { |
|||
data.commission_code = app.globalData.retailId; |
|||
app.globalData.retailId = null; |
|||
} |
|||
if (app.globalData.category_id) { |
|||
data.category_id = app.globalData.category_id; |
|||
} |
|||
if (this.data.prizeId) { |
|||
data.lottery_id = this.data.prizeId |
|||
} |
|||
let service = 'order/create', postData = { |
|||
data: JSON.stringify(data) |
|||
} |
|||
if (app.globalData.product.isGroup == 1) { |
|||
service = "team_order/appoint" |
|||
postData.member_num = this.data.productNum |
|||
postData.team_name = this.data.groupName |
|||
postData.type = 1; |
|||
} |
|||
|
|||
commonApi.user_post(service, postData).then(res => { |
|||
if (app.globalData.kjId) { |
|||
this.setData({ |
|||
kjId: null |
|||
}); |
|||
app.globalData.kjId = null; |
|||
} |
|||
if (app.globalData.gp_id) { |
|||
this.setData({ |
|||
gp_id: null |
|||
}); |
|||
app.globalData.gp_id = null; |
|||
} |
|||
if (res.code == 1 && app.globalData.product.isGroup == 1) { |
|||
// 团购跳转到团购详情
|
|||
wx.navigateTo({ |
|||
url: '/pages/info/groupOrderInfo/index?id=' + res.data.order_id + '&from=order' |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
// 活动预约
|
|||
activityOrder: function () { |
|||
if (this.data.linkmanList && this.data.linkmanList.length > 0) { |
|||
commonApi.user_post("pbservice/Culture/booking", { |
|||
id: this.data.product.product.id, |
|||
name: this.data.linkmanList[0].name, |
|||
card_number: this.data.linkmanList[0].id_number, |
|||
tel: this.data.linkmanList[0].tel |
|||
}).then(res => { |
|||
if (res.code == 1) { |
|||
wx.showToast({ |
|||
title: '预约成功', |
|||
icon: 'success' |
|||
}) |
|||
setTimeout(() => { |
|||
wx.navigateBack() |
|||
}, 1000) |
|||
return; |
|||
} |
|||
}) |
|||
} |
|||
else { |
|||
wx.showToast({ |
|||
title: '请选择出行人', |
|||
icon: 'none' |
|||
}) |
|||
return; |
|||
} |
|||
|
|||
}, |
|||
/** |
|||
* 选择补贴 |
|||
*/ |
|||
selectAllowance: function () { |
|||
this.setData({ |
|||
select_allowance: !this.data.select_allowance |
|||
}) |
|||
this.changePrice() |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow: function () { |
|||
if (!this.data.isLogin) { |
|||
commonApi.user_post("token/check").then(res => { |
|||
if (res.code == 1) { |
|||
this.setData({ |
|||
isLogin: true |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
this.setData({ |
|||
coupon: app.globalData.couponInfo |
|||
}) |
|||
// 获取补贴
|
|||
if (this.data.product) { |
|||
commonApi.user_post("product/getProductAllowancePrice", { |
|||
product_code: this.data.product.product.product_code |
|||
}).then(resTwo => { |
|||
console.log(resTwo) |
|||
if (resTwo && resTwo.code == 1) { |
|||
this.setData({ |
|||
allowance_data: resTwo.data |
|||
}) |
|||
let spread_price = Number(this.data.allowance_data.discount_limit_price - this.data.allowance_data.user_used_price) |
|||
let sInfo = this.data.product.sku |
|||
if (spread_price > 0) { |
|||
if (spread_price < this.data.allowance_data.discount_rate / 100 * sInfo.price) { |
|||
this.setData({ |
|||
allowance_price: spread_price |
|||
}) |
|||
} else { |
|||
this.setData({ |
|||
allowance_price: this.data.allowance_data.discount_rate / 100 * sInfo.price |
|||
}) |
|||
} |
|||
this.changePrice() |
|||
} else { |
|||
this.setData({ |
|||
allowance_price: 0 |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload: function () { |
|||
this.setData({ |
|||
kjId: null, |
|||
gp_id: null |
|||
}); |
|||
app.globalData.kjId = null; |
|||
app.globalData.gp_id = null; |
|||
}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom: function () { |
|||
|
|||
} |
|||
}) |
|||
@ -0,0 +1,8 @@ |
|||
{ |
|||
"usingComponents": { |
|||
"title":"/pages/component/TitleHeader", |
|||
"date":"../components/date/index", |
|||
"contact":"../components/contact/index", |
|||
"coupon":"../components/coupon/index" |
|||
} |
|||
} |
|||
@ -0,0 +1,59 @@ |
|||
<!--pages/order/scene/index.wxml--> |
|||
<view class="{{product && product.isGroup==1?'group-order':''}}"> |
|||
<title title="订单填写"></title> |
|||
<view class="product-info" wx:if="{{product}}"> |
|||
<view class="product-title">{{product.product.title + product.isGroup==1?'（团体预约）':product.sku.sku_name}}</view> |
|||
<view class="product-price" wx:if="{{type=='museum' || type=='activity'}}">免费</view> |
|||
</view> |
|||
<date wx:if="{{isLogin && type!='activity'}}" bind:onChangeDate="changeDate" bind:onChangeTime="changeTime" |
|||
product="{{product}}"></date> |
|||
<view class="box" wx:if="{{product && product.isGroup==1}}"> |
|||
<view class="box-title"> |
|||
<view style="flex-shrink:0">团体主体名称：</view> |
|||
<input type="text" placeholder="请输入名称" bindinput="changeGroupName"></input> |
|||
</view> |
|||
</view> |
|||
<view class="box"> |
|||
<view class="box-title"> |
|||
<view style="flex:1">{{product && product.isGroup!=1?'购票数量':'预约人数'}}</view> |
|||
<view class="iconfont icon-sami-select" wx:if="{{!kjId && !gp_id && type!='activity'}}" bindtap="minus"></view> |
|||
<view class="number-box">{{productNum}}</view> |
|||
<view class="iconfont icon-add-select" wx:if="{{!kjId && !gp_id && type!='activity'}}" bindtap="add"></view> |
|||
</view> |
|||
</view> |
|||
<contact wx:if="{{isLogin}}" type="{{type}}" bind:setLinkman="setLinkman"></contact> |
|||
<!-- 补贴 --> |
|||
<view class="box"> |
|||
<view class="box-title allowance" wx:if="{{allowance_price}}"> |
|||
<view bindtap="changeAllowance">惠民补贴</view> |
|||
<view class="com-flex-tao" bindtap="selectAllowance"> |
|||
-￥{{allowance_price / 100}} |
|||
<image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/uploads/20220602/6ecdbc41527c0c603608686967d4493b.png" |
|||
alt="" wx:if="{{select_allowance}}"></image> |
|||
<view class="border" wx:else></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<coupon wx:if="{{!kjId && !gp_id && type!='activity' && product && product.isGroup!=1}}" id="coupon" |
|||
money="{{singlePrice * productNum}}" sku="{{product.sku.id}}"></coupon> |
|||
<view class="box" wx:if="{{type!='activity' && product && product.isGroup!=1}}"> |
|||
<view class="box-title"> |
|||
<view style="flex-shrink:0">订单备注</view> |
|||
<input type="text" bindinput="changeRemark" placeholder="选填"></input> |
|||
</view> |
|||
</view> |
|||
|
|||
<view style="{{type=='museum' || type=='activity'?'height:138rpx':'height:113rpx'}}"></view> |
|||
<view class="fixed-bottom" wx:if="{{type!='museum' && type!='activity'}}"> |
|||
<view class="fixed-price-box" wx:if="{{kjId || prizeId}}"><text>合计：</text><text class="price">¥0</text></view> |
|||
<!-- <view class="fixed-price-box" wx:elif="{{prizeId}}"><text>合计：</text><text class="price">¥0</text></view> --> |
|||
<view class="fixed-price-box" wx:else><text>合计：</text><text |
|||
class="price">¥{{((singlePrice * productNum - (coupon?coupon.activity.money:0))>0?(singlePrice * productNum - (coupon?coupon.activity.money:0)):0)/ 100}}</text> |
|||
</view> |
|||
<view class="fixed-btn" bindtap="order">提交订单</view> |
|||
</view> |
|||
<view class="fixed-bottom yuyue-box" wx:else> |
|||
<view class="fixed-btn yuyue-btn" bindtap="order" wx:if="{{type=='museum'}}">立即预约</view> |
|||
<view class="fixed-btn yuyue-btn" bindtap="activityOrder" wx:else>立即预约</view> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,279 @@ |
|||
/* pages/.wxss */ |
|||
page { |
|||
background: #f6f6f6; |
|||
} |
|||
|
|||
.group-order { |
|||
background: #fff; |
|||
} |
|||
|
|||
.product-info { |
|||
padding: 20rpx 47rpx; |
|||
border-bottom: 1rpx solid #ccc; |
|||
} |
|||
|
|||
.product-title { |
|||
font-size: 33rpx; |
|||
color: #000; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.product-price { |
|||
color: #D62828; |
|||
font-size: 27rpx; |
|||
} |
|||
|
|||
.group-order .box-title { |
|||
margin: 0; |
|||
} |
|||
|
|||
.group-order .box, |
|||
.group-order .date-box { |
|||
border-bottom: 1rpx solid #D8D8D8; |
|||
border-radius: 0; |
|||
margin: 0 25rpx; |
|||
} |
|||
|
|||
.group-order .dates-boxes { |
|||
border-top: none; |
|||
padding-top: 0; |
|||
} |
|||
|
|||
.group-order .date-time.disable { |
|||
background: #CCCCCC; |
|||
color: #fff; |
|||
} |
|||
|
|||
.box { |
|||
margin: 30rpx 25rpx; |
|||
background: white; |
|||
border-radius: 9rpx; |
|||
} |
|||
|
|||
.box-title { |
|||
height: 113rpx; |
|||
margin: 0 20rpx; |
|||
font-size: 31rpx; |
|||
color: #000; |
|||
font-weight: 500; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.dates-boxes { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 31rpx 21rpx; |
|||
border-top: 1rpx solid #ccc; |
|||
} |
|||
|
|||
.date-item { |
|||
width: 162rpx; |
|||
height: 97rpx; |
|||
border-radius: 10rpx; |
|||
border: 1rpx solid #333; |
|||
text-align: center; |
|||
font-size: 27rpx; |
|||
color: #000; |
|||
margin-right: 20rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.date-item.active { |
|||
border-color: #0B898E; |
|||
color: #fff; |
|||
background: #0B898E; |
|||
} |
|||
|
|||
.date-item.disable { |
|||
border-color: #CCCCCC; |
|||
color: #666; |
|||
} |
|||
|
|||
.date-item .price { |
|||
font-size: 25rpx; |
|||
color: #D62828; |
|||
} |
|||
|
|||
.date-item.active .price { |
|||
color: #fff; |
|||
} |
|||
|
|||
.date-item.disable .price { |
|||
color: #666; |
|||
} |
|||
|
|||
.more-item { |
|||
width: 99rpx; |
|||
margin-right: 0; |
|||
} |
|||
|
|||
.date-times { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin: 0 21rpx; |
|||
padding-top: 34rpx; |
|||
padding-bottom: 10rpx; |
|||
border-top: 1rpx dashed #ccc; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.date-time { |
|||
width: 315rpx; |
|||
line-height: 58rpx; |
|||
border: 1px solid #333; |
|||
border-radius: 10rpx; |
|||
text-align: center; |
|||
font-size: 25rpx; |
|||
flex-shrink: 0; |
|||
margin-bottom: 24rpx; |
|||
color: #000; |
|||
} |
|||
|
|||
.date-time.disable { |
|||
border-color: #ccc; |
|||
color: #666666; |
|||
} |
|||
|
|||
.date-time.active { |
|||
border-color: #0B898E; |
|||
background: #0B898E; |
|||
color: #fff; |
|||
} |
|||
|
|||
.box-title .iconfont { |
|||
font-size: 28rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.number-box { |
|||
font-size: 29rpx; |
|||
font-weight: 500; |
|||
color: #000; |
|||
flex-shrink: 0; |
|||
width: 67rpx; |
|||
line-height: 49rpx; |
|||
background: #F0F0F0; |
|||
border-radius: 7rpx; |
|||
text-align: center; |
|||
margin: 0 20rpx; |
|||
} |
|||
|
|||
.fixed-bottom { |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
height: 113rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
background: white; |
|||
z-index: 1; |
|||
box-shadow: 0px 0px 16rpx 0px rgba(6, 0, 1, 0.1); |
|||
} |
|||
|
|||
.yuyue-box { |
|||
height: 138rpx; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.fixed-btn { |
|||
width: 320rpx; |
|||
line-height: 113rpx; |
|||
background: #D62828; |
|||
color: #fff; |
|||
text-align: center; |
|||
font-size: 36rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.fixed-price-box { |
|||
margin-left: 25rpx; |
|||
flex-shrink: 0; |
|||
font-size: 29rpx; |
|||
color: #333; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.fixed-price-box .price { |
|||
color: #D62828; |
|||
font-size: 36rpx; |
|||
margin-left: 10rpx; |
|||
} |
|||
|
|||
.allowance { |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.allowance>view:nth-child(2) { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.allowance image { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
margin-left: 10rpx; |
|||
} |
|||
|
|||
.allowance .border { |
|||
width: 30rpx; |
|||
height: 30rpx; |
|||
border-radius: 50%; |
|||
border: 4rpx solid #0B98BE; |
|||
margin-left: 10rpx; |
|||
} |
|||
|
|||
.coupon-btn { |
|||
width: 138rpx; |
|||
line-height: 56rpx; |
|||
border: 1px solid #333333; |
|||
border-radius: 29rpx; |
|||
text-align: center; |
|||
font-size: 28rpx; |
|||
color: #000; |
|||
} |
|||
|
|||
.box-title input { |
|||
flex: 1; |
|||
display: block; |
|||
font-size: 31rpx; |
|||
color: #666; |
|||
margin-left: 15rpx; |
|||
font-weight: 400; |
|||
text-align: right; |
|||
} |
|||
|
|||
.yuyue-btn { |
|||
width: 657rpx; |
|||
line-height: 78rpx; |
|||
border-radius: 39rpx; |
|||
} |
|||
|
|||
.group-order .yuyue-box { |
|||
height: 100rpx; |
|||
} |
|||
|
|||
.group-order .yuyue-btn { |
|||
width: 100%; |
|||
/* height: 100%; */ |
|||
line-height: 100rpx; |
|||
border-radius: 0; |
|||
} |
|||
|
|||
.mask-allowance .mask-content { |
|||
margin: auto; |
|||
top: initial; |
|||
bottom: initial; |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
.mask-allowance .mask-content .rule-title { |
|||
text-align: center; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
Loading…
Reference in new issue