bbnv1
/
test
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

美食产品改版

master
jiazhipeng 7 months ago
parent
9a85f4f88b
commit
dcdf5cb253
7 changed files with 2263 additions and 388 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 854
      pages/info/foodProductInfo/index.js
  2. 3
      pages/info/foodProductInfo/index.json
  3. 291
      pages/info/foodProductInfo/index.wxml
  4. 1257
      pages/info/foodProductInfo/index.wxss
  5. 4
      pages/order/food/index.js
  6. 24
      pages/order/food/index.wxml
  7. 50
      pages/order/food/index.wxss

854
pages/info/foodProductInfo/index.js
View File

@ -1,5 +1,9 @@
// pages/info/sceneProductInfo/index.js
// 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({
@ -7,105 +11,800 @@ Page({
* 页面的初始数据
*/
data: {
info:{},
number:['一','二','三','四','五','六','七','八','九','十','十一','十二'],
skuIndex:0,
bookingInfo:null,
skuName:"",
retailId:''
autoPlay: false,
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,
ZTPoint:'',
swiperCurrent: 0,
swiperRange: {
video: {min:0,max:0},
picture: {min:0,max:0},
sku: {min:0,max:0}
},
otherInfoShow: 0,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let api = commonApi._post
if(wx.getStorageSync("jstrip_token")){
api = commonApi.user_post
console.log(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.ZTPoint) {
this.setData({
ZTPoint: options.ZTPoint
})
}
if(options.retailId){
if (options.retailId) {
this.setData({
retailId:options.retailId
retailId: options.retailId
})
}
api("product/get_product_detail",{
id:options.id
}).then(res=>{
let tags = res.data.display_tags?res.data.display_tags.split(","):[];
res.data.tags = tags.splice(0,2);
// 如果带有指定skuid的话 那么取指定的sku展示
if(options.skuid){
for(let i = 0;i<res.data.sku.length;i++){
if(res.data.sku[i].id==options.skuid){
res.data.sku = [res.data.sku[i]];
break;
commonApi._post("product/get_product_detail", {
id: options.id
}).then(res => {
if (res.code == 0) {
wx.showToast({
title: res.msg,
icon:'none'
})
setTimeout(() => {
wx.navigateBack()
}, 1500);
return
}
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
let resData = res.data
try {
if (resData.product_data && resData.is_package==1) {
for(let key in resData.product_data) {
resData.product_data[key] = JSON.parse(resData.product_data[key])
}
res.data.sku.map(item=>{
item.display_tags = (item.display_tags?item.display_tags.split(','):[]).splice(0,2)
})
// res.data.listimg = res.data.listimg?res.data.listimg.split(","):[];
// if (resData.product_data["住"]) {
// resData.product_data["住"] = JSON.parse(resData.product_data["住"])
// }
// if (resData.product_data["游"]) {
// resData.product_data["游"] = JSON.parse(resData.product_data["游"])
// }
// if (resData.product_data["食"]) {
// resData.product_data["食"] = JSON.parse(resData.product_data["食"])
// }
}
resData.shipment_tag_arr = []
if (resData.shipment_tag) {
resData.shipment_tag_arr = resData.shipment_tag.split(',')
resData.shipment_tag_str = resData.shipment_tag_arr.join(' | ')
}
if (resData.service_tag) {
resData.service_tag_str = resData.service_tag.split(',').join(' | ')
}
if (resData.parameter_tag) {
resData.parameter_tag_str = resData.parameter_tag.split(',').join(' | ')
}
if (resData.supplier_headimg) {
resData.supplier_headimg = that.showImg(resData.supplier_headimg)
}
} catch(e) {}
let swiperRange = this.data.swiperRange;
swiperRange.video = resData.videourl? { min: 0, max: 0 } : { min: -1, max: -1 }
swiperRange.picture = {min:swiperRange.video.max+1, max:swiperRange.video.max+1+resData.listimg.length-1}
swiperRange.sku = {min:swiperRange.picture.max+1,max:swiperRange.picture.max+1+resData.sku.length-1}
console.log(swiperRange)
this.setData({
info:res.data
info: resData,
supplierId: res.data.supplier_id,
iShop: res.data.supplier_id ? true : false,
swiperRange: swiperRange,
})
// 获取补贴
// commonApi.user_post("product/getProductAllowancePrice", {
// product_code: res.data.product_code
// }).then(resTwo => {
// if (resTwo && resTwo.code == 1) {
// this.setData({
// allowance_data: resTwo.data
// })
// }
// })
this.BroswerRecord()
console.log(res)
})
},
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/foodProductInfo/index?id="+this.data.info.id,
uuid:app.globalData.uuid
}).then(res=>{
// 获取评价列表
commonApi._post("product/product_comment_list", {
product_id: options.id,
offset: 0,
limit: 3
}).then(res => {
res.data.list.map(item => {
item.rate = Number(item.rate)
item.create_time = item.create_time.substring(0, 10)
})
this.setData({
comment: res.data.list.splice(0, 5),
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 = []
}
else {
})
this.setData({
comment: arr
})
})
commonApi._post("search/product_recommend", {
offset: 0,
limit: 4,
rand: true,
type: 'post',
product_ids:options.id,
}).then(res => {
try {
this.setData({
tjList: res.data.list.slice(0,4)
})
} catch (error) {
console.log(error);
}
})
},
showImg (img) {
if (!img) { return img }
if (img.indexOf('https://') != -1 || img.indexOf('http://') != -1) {
return img;
} else {
// return "https://test.api.cloud.sz-trip.com"+img
return "https://static.ticket.sz-trip.com" + img;
}
},
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)
}, 500)
},
changeSku:function(e){
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({
skuIndex:e.currentTarget.dataset.index
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
})
})
},
showNotice:function(e){
let sku = e.currentTarget.dataset.sku;
// 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) {
// if (res[3].top < minHeight) {
// that.setData({
// type: 4
// })
// } else if (res[2].top < minHeight) {
// that.setData({
// type: 3
// })
// }else if (res[1].top < minHeight) {
// that.setData({
// type: 2
// })
// } else {
// that.setData({
// type: 1
// })
// }
// })
// }).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({
skuName:sku.sku_name,
bookingInfo:sku.sku_model
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()
}
})
},
closeMask:function(){
hideSku: function () {
this.setData({
skuName:"",
bookingInfo:null
skuFlag: null,
cartImgInfo: null
})
},
gotoLocation:function(){
let info = this.data.info;
if(info && info.lat && info.lon){
wx.openLocation({
latitude: Number(info.lat),
longitude: Number(info.lon)
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,
swiperCurrent: index+this.data.swiperRange.picture.max+1
})
},
showOrder: 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;
}
let swiperCurrent = this.data.swiperCurrent;
let skuIndex = swiperCurrent - this.data.swiperRange.sku.min
console.log(swiperCurrent, skuIndex)
if (skuIndex<0) {skuIndex=0}
this.setData({
skuFlag: 'order',
skuIndex: skuIndex,
swiperCurrent: skuIndex+this.data.swiperRange.picture.max+1
})
}
})
},
order:function(e){
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') {
util.pagePoint({
event: 'product_order',
param: {
id: this.data.info.id,
type: this.data.info.type
}
}, 1)
wx.setStorageSync('login_from', 'product_order_login')
wx.setStorageSync('order_from', 'product_order_submit')
app.globalData.couponInfo = null;
// 购买
let product = [{
product: {...this.data.info,ZTPoint:this.data.ZTPoint},
sku: this.data.info.sku[this.data.skuIndex],
productNum: this.data.producNum
}];
app.globalData.retailId = this.data.retailId;
app.globalData.product = e.currentTarget.dataset;
app.globalData.listName = null
app.globalData.product = product[0];
wx.navigateTo({
url: '/pages/order/food/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")) {
util.pagePoint({
event: 'product_share_login',
type: this.data.info.type,
id: this.data.info.id
}, 1)
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
})
util.pagePoint({
event: 'product_share_save',
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'
})
}
}
});
}
});
},
pagePoint: function (e) {
util.pagePoint(e)
},
// 绘制海报
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;
util.pagePoint({
event: 'recommend_click',
param: {
id: item.id,
type: item.type
}
}, 1)
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
})
},
viewImg:function(e){
let item = e.currentTarget.dataset.item;
if (item.img_list.length>0) {
wx.previewImage({
urls: item.img_list
})
}
},
swiperChange (e) {
if(e.detail.source == "touch") {
let index = e.detail.current
this.setData({
swiperCurrent: index
})
}
console.log(e, this.data.swiperCurrent)
},
changeSwiperCurrent (e) {
let index = e.currentTarget.dataset.index
this.setData({
swiperCurrent: index
})
},
changeSimpleVal (e) {
let keyname = e.currentTarget.dataset.keyname;
let val = e.currentTarget.dataset.val;
let param = {}
param[keyname] = val
this.setData(param)
console.log(this.data)
},
/**
* 生命周期函数--监听页面初次渲染完成
@ -118,7 +817,40 @@ Page({
* 生命周期函数--监听页面显示
*/
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
// })
// })
commonApi.user_post('cart/get_count', {noLogin: true}).then(res => {
this.setData({
cartCount: res.data //1
})
})
} else {
setTimeout(() => {
this.onShow()
}, 200)
}
},
playVideo() {
// 播放视频需要把autoplay暂停
this.setData({
autoPlay: false
})
},
/**

3
pages/info/foodProductInfo/index.json
View File

@ -1,6 +1,7 @@
{
"usingComponents": {
"title":"/pages/component/TitleHeader",
"notice":"/pages/component/notice/notice"
"code":"../../order/components/wxqrCode/index"
}
}

291
pages/info/foodProductInfo/index.wxml
View File

@ -1,79 +1,264 @@
<!--pages/info/sceneProductInfo/index.wxml-->
<!--pages/info/hotelProductInfo/index.wxml-->
<wxs src="../../../utils/filter.wxs" module="tool" />
<title title="产品详情"></title>
<view class="iconfont icon-xin"></view>
<swiper class="swiper" indicator-dots="{{true}}"
autoplay="{{true}}" interval="{{2000}}" duration="{{300}}" wx:if="{{info.listimg}}">
<view class="share-icon" bindtap="share"></view>
<image lazy-load wx:for="{{info.sku}}" style="{{aniSkuIndex==index?('top:'+cartTop+'px;'):('top:'+top+'px;'+cartImgInfo)}}" class="headimg{{aniSkuIndex==index?' active':''}}" src="{{info.headimg}}" mode="aspectFill"></image>
<view style="position: relative;">
<swiper class="swiper" wx:if="{{info}}" autoplay="{{autoPlay}}" current="{{swiperCurrent}}"
interval="{{2000}}" duration="{{300}}" bindchange="swiperChange">
<block wx:if="{{info.videourl}}" wx:key="*this">
<swiper-item>
<video bindplay="playVideo" src="{{info.videourl}}" autoplay="{{true}}" muted="{{true}}"
show-mute-btn="{{true}}" show-background-playback-button="{{false}}"
show-progress="{{false}}" enable-progress-gesture="{{false}}"></video>
<!-- <image lazy-load src="{{info.headimg}}" mode="aspectFill"></image> -->
</swiper-item>
</block>
<block wx:for="{{info.listimg}}" wx:key="*this">
<swiper-item>
<image lazy-load src="{{item}}" mode="aspectFill"></image>
</swiper-item>
</block>
</swiper>
<view class="top-info">
<view class="title">{{info.title}}</view>
<view class="tags-box textOver" style="height:auto">
<view class="tag textOver" wx:for="{{info.tags}}">{{item}}<view class="line"></view></view>
<view class="tags-price"><text>￥</text><text>{{info.price/100}}</text><text>起</text></view>
<!-- <view class="tags-text">详情 <text class="iconfont icon-you"></text></view> -->
<block wx:for="{{info.sku}}" wx:key="*this">
<swiper-item style="position: relative;">
<image lazy-load src="{{item.headimg}}" mode="aspectFill"></image>
<view class="sku-tips ">
<view class="textOver">{{item.sku_name}}</view>
</view>
</swiper-item>
</block>
</swiper>
<view class="swiper-bottom" wx:if="{{info}}">
<!-- <view class="swuper-bottom-bg">
<view class="swiper-bottom-item {{(swiperCurrent>=swiperRange.video.min&&swiperCurrent<=swiperRange.video.max)?'active':''}}"
wx:if="{{info.videourl}}" bind:tap="changeSwiperCurrent" data-index="{{0}}">视频</view>
<view class="swiper-bottom-item {{(swiperCurrent>=swiperRange.picture.min&&swiperCurrent<=swiperRange.picture.max)?'active':''}}"
bind:tap="changeSwiperCurrent" data-index="{{swiperRange.picture.min}}">图片</view>
<view class="swiper-bottom-item {{(swiperCurrent>=swiperRange.sku.min&&swiperCurrent<=swiperRange.sku.max)?'active':''}}"
bind:tap="changeSwiperCurrent" data-index="{{swiperRange.sku.min}}">款式</view>
</view> -->
<view class="swiper-bottom-item bottom-number active">{{swiperCurrent+1}}/{{swiperRange.sku.max+1}}</view>
</view>
</view>
<view class="allowance-box" wx:if="{{allowance_data}}" bindtap="changeAllowance">
补贴价
<view class="com-price two">￥{{ allowance_data.mini_price / 100 }}起</view>
<view class="yellow">单品最高补贴{{ allowance_data.max_price / 100 }}元</view>
</view>
<view wx:if="{{info}}">
<view class="top-info" style="padding: 0;" >
<view class="wineScene-price-container" >
<view class="wineSecne-price">{{info.price/100}}<text class="wineSecne-money">优惠前￥{{info.market_price/100}}</text></view>
<view>已售{{info.sales_number>1000?"1000+":(info.sales_number||0)}}</view>
</view>
<view style="padding: 20rpx 20rpx 20rpx 26rpx;">
<view class="title textOver2">{{info.title}}</view>
<view class="tags-box textOver">
<view class="tag textOver" wx:for="{{info.display_tags}}">{{item}}</view>
</view>
<view class="other-info-box" >
<view class="other-info-item" style="align-items: flex-start;"bindtap="changeSimpleVal"
data-keyname="otherInfoShow" data-val="{{1}}" wx:if="{{info.shipment_tag}}">
<image lazy-load src="https://static.ticket.sz-trip.com/uploads/20250925/50f3e2316c3f3cc906fe4c78f127e960.png"></image>
<view class="other-content textOver" >{{info.shipment_tag_str}}</view>
<!-- <view style="margin-top: 6rpx;" class="view-arrow">></view> -->
</view>
<view class="other-info-item" bindtap="changeSimpleVal" data-keyname="otherInfoShow" data-val="{{2}}"
wx:if="{{info.service_tag_str}}">
<image lazy-load src="https://static.ticket.sz-trip.com/uploads/20250925/ce4323d9bcdf2ff03a0985ae4cbdabbe.png"></image>
<view class="other-content textOver">{{info.service_tag_str}}</view>
<!-- <view class="view-arrow">></view> -->
</view>
<view class="other-info-item" bindtap="changeSimpleVal" data-keyname="otherInfoShow" data-val="{{3}}"
wx:if="{{info.parameter_tag_str}}">
<image lazy-load src="https://static.ticket.sz-trip.com/uploads/20250925/958d9a3ed9404790ba5d17548e20fee8.png"></image>
<view class="other-content textOver">{{info.parameter_tag_str}}</view>
<!-- <view class="view-arrow">></view> -->
</view>
</view>
</view>
</view>
</view>
<view class="box">
<view class="box-top" style="border-top:none;border-bottom:1rpx solid #d9d9d9">
<text>{{info.title}}</text>
<view class="scroll-all-box" id="menus" wx:if="{{info}}">
<view style="height:85rpx" wx:if="{{fixed}}"></view>
<view class="info-box" id="box1">
<view class="info-title">套餐详情</view>
<rich-text class="details" nodes="{{tool.formateRichText(info.content)}}"></rich-text>
</view>
<view class="product-item" wx:for="{{info.sku}}">
<view class="skutitle">{{item.sku_name}}</view>
<view class="product-box">
<view class="product-left textOver">
<view class="product-tags">
<view class="product-tag textOver" wx:for="{{item.display_tags}}">{{item}}</view>
<!-- <view class="info-box" id="box2">
<view class="info-title">费用说明</view>
<rich-text class="details" nodes="{{tool.formateRichText(info.expense_info)}}"></rich-text>
</view> -->
<view class="info-box" id="box3">
<view class="info-title">购买须知</view>
<rich-text class="details" nodes="{{tool.formateRichText(info.book_info)}}"></rich-text>
</view>
<view class="order-tip-text" bindtap="showNotice" data-sku="{{item}}">预订须知>></view>
<view style="height: 20rpx;width: 100%;background: #F7F7F7;"></view>
<!-- <view class="info-box" id="box4" style="padding: 20rpx 26rpx;">
<view class="info-title">产品推荐</view>
<view class="pro-list">
<view class="proitem" wx:for="{{tjList}}" bindtap="gotoDetail" data-item="{{item}}">
<view class="item-hd">
<image lazy-load src="{{item.headimg}}"></image>
</view>
<view class="product-right">
<view class="price"><text>￥</text><text>{{item.price/100}}</text><text>起</text></view>
<view wx:if="{{item.flag=='on'}}" class="btn" data-product="{{info}}" data-sku="{{item}}" bindtap="order">立即预订</view>
<view wx:else class="btn disable" >立即预订</view>
<view class="item-bm" style="height: 120rpx;display: flex;flex-direction: column;justify-content: space-between;">
<view class="protitle textOver2">{{item.title}}</view>
<view class="pro-price">{{item.price/100}}</view>
</view>
</view>
</view>
<!-- <view class="empty-box">
<view>这里空空如也，快去向大家提问吧!</view>
<view class="empty-btn">去提问</view>
</view> -->
</view>
<view class="box" wx:if="{{info}}">
<view class="box-top" style="border-top:none">
<text>商家信息</text>
<view style="height:140rpx"></view>
<view class="fixed-bottom">
<view class="['left-img',{{!iShop?'no-shop':''}}]">
<navigator wx:if="{{iShop}}" url="/pages/list/store/index?id={{supplierId}}" catchtap="pagePoint" data-event='product_customservice' class="shop-box">
<view class="shop-box">
<image lazy-load class="icon-shop" src="https://static.ticket.sz-trip.com/uploads/20230220/cc7bfaf50dccd354c56a1ad40d730b2e.png" mode="aspectFill"/>
<view>店铺</view>
</view>
<view class="info-address">
<text>商家电话：{{info.supplier_tel}}</text>
<view class="iconfont icon-dianhua"></view>
</navigator>
<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">
<view class="iconfont {{isLike==1?'icon-shoucang':'icon-xin'}}"></view>
<view>收藏</view>
</view> -->
<view class="kefu-box"></view>
</view>
<view class="btns">
<!-- <view class="btn" bindtap="showCart">加入购物车</view> -->
<view class="btn" bindtap="showOrder" wx:if="{{info && info.flag==1}}" style="background:#D62828;border-radius: 39rpx;" >立即购买</view>
<view class="btn disable" wx:elif="{{info}}" style="border-radius: 39rpx;">该商品已下架</view>
</view>
</view>
<!-- 购物车悬浮框 -->
<navigator url="/pages/user/cartlist/list" catchtap="pagePoint" data-event='product_cart_click' class="cart-box" id="cart">
<image lazy-load src="https://static.ticket.sz-trip.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 lazy-load id="skuImg" src="{{info.sku[skuIndex].headimg}}" mode="aspectFill"></image>
<view class="sku-info">
<view>
<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="info-address">
<text>商家地址：{{info.supplier_address}}</text>
<view class="iconfont icon-daohang" bindtap="gotoLocation"></view>
<view class="sku-name">已选择：{{info.sku[skuIndex].sku_name}}</view>
</view>
<view style="display: flex;align-items: center;">
<view class="number-box">
<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 class="limit-number" wx:if="{{info.sku[skuIndex].sku_model.traveller_limit_num>0}}">限购{{info.sku[skuIndex].sku_model.traveller_limit_num}}件</view>
</view>
</view>
</view>
<view style="font-weight: bold;font-size: 33rpx;color: #060001;margin:0rpx 25rpx 27rpx">产品分类（{{info.sku.length}}）</view>
<view class="sku-names">
<view bindtap="selectSku" data-index="{{index}}" class="sku-name-item {{index==skuIndex?' active':''}}"
wx:for="{{info.sku}}">
<image lazy-load src="{{item.headimg}}"></image>
<view class="sku-name textOver2">{{item.sku_name}}</view>
</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>
<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 lazy-load class="share-img" src="{{shareImg}}" mode="widthFix"></image>
<view class="share-tips">
<view style="position:relative">
<image lazy-load class="img" src="https://static.ticket.sz-trip.com/xcxImages/info/img.png" mode="widthFix">
</image>
<view>保存图片到相册</view>
<view class="tipimg">
<image lazy-load src="https://static.ticket.sz-trip.com/xcxImages/info/ok.png" mode="widthFix"></image>
</view>
</view>
<image lazy-load style="width:36rpx" src="https://static.ticket.sz-trip.com/xcxImages/info/arrow2.png" mode="widthFix"></image>
<view style="position:relative">
<image lazy-load class="img" src="https://static.ticket.sz-trip.com/xcxImages/info/code.png" mode="widthFix">
</image>
<view>微信识别二维码</view>
<view class="tipimg">
<image lazy-load src="https://static.ticket.sz-trip.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">{{allowance_data.title}}</view>
<rich-text nodes="{{allowance_data.content}}"></rich-text>
</view>
</view>
<code showModel="{{showQrCode}}" qrcode = "{{wxqrcode}}">
</code>
<!-- <view class="mask" wx:if="{{otherInfoShow>0}}"> -->
<view class="mask" wx:if="{{false}}">
<view class="mask-bg" bindtap="changeSimpleVal" data-keyname="otherInfoShow" data-val="{{0}}"></view>
<view class="mask-content">
<view class="iconfont icon-close" bindtap="changeSimpleVal" data-keyname="otherInfoShow" data-val="{{0}}"></view>
<view class="other-info-content">
<view class="title">{{otherInfoShow==3?"产品参数":otherInfoShow==2?"服务说明":"发货说明"}}</view>
<view wx:if="{{otherInfoShow==1}}">
<rich-text class="details" nodes="{{tool.formateRichText(info.shipment_info)}}"></rich-text>
</view>
<view class="box-top">
<text>购买须知</text>
<view wx:if="{{otherInfoShow==2}}">
<rich-text class="details" nodes="{{tool.formateRichText(info.service_info)}}"></rich-text>
</view>
<view class="sku-items">
<view class="sku-item{{skuIndex==index?' active':''}}" bindtap="changeSku" data-index="{{index}}" wx:for="{{info.sku}}">套餐{{number[index]}}</view>
<!-- <view class="sku-item">套餐一</view> -->
<!-- <view class="sku-item">套餐一</view> -->
<view wx:if="{{otherInfoShow==3}}">
<rich-text class="details" nodes="{{tool.formateRichText(info.parameter_info)}}"></rich-text>
</view>
<view class="details">
<rich-text nodes="{{tool.formateRichText(info.sku[skuIndex].sku_model.bookinfo)}}"></rich-text>
<!-- <rich-text nodes="{{tool.formateRichText(info.sku[skuIndex].sku_model.detailinfo)}}"></rich-text> -->
<!-- <rich-text nodes="{{tool.formateRichText(info.sku[skuIndex].sku_model.expenseinfo)}}"></rich-text> -->
<!-- <rich-text nodes="{{tool.formateRichText(info.sku[skuIndex].sku_model.extrainfo)}}"></rich-text> -->
</view>
<view class="box-top">
<text>产品详情</text>
<view style="height:138rpx"></view>
<view class="btn-box">
<view class="mask-btn" bindtap="changeSimpleVal" data-keyname="otherInfoShow" data-val="{{0}}">确定</view>
</view>
<view class="details">
<rich-text nodes="{{tool.formateRichText(info.content)}}"></rich-text>
</view>
</view>
<notice wx:if="{{bookingInfo}}" bind:close="closeMask" bookingInfo="{{bookingInfo}}" skuName="{{skuName}}"></notice>

1257
pages/info/foodProductInfo/index.wxss
View File

File diff suppressed because it is too large

4
pages/order/food/index.js
View File

@ -85,14 +85,14 @@ Page({
order:function(){
if(!this.data.user){
wx.showToast({
title: '请输入预订人',
title: '请输入联系人',
icon: 'none'
})
return;
}
if(!this.data.tel){
wx.showToast({
title: '请输入手机号码',
title: '请输入手机号',
icon: 'none'
})
return;

24
pages/order/food/index.wxml
View File

@ -4,32 +4,34 @@
<view class="skuinfo">
<image lazy-load src="{{product.sku.headimg}}" mode="aspectFill"></image>
<view class="right-info">
<view class="sku-name textOver2">{{product.product.title+product.sku.sku_name}}</view>
<view class="info-tips">
<view class="sku-name textOver2">{{product.product.title}}</view>
<view class="sku-name2 textOver2">{{product.sku.sku_name}}</view>
<!-- <view class="info-tips">
<view class="price"><text>￥</text>{{product.sku.price/100}}</view>
<view bindtap="showNotice">购买须知 <text class="iconfont icon-you"></text> </view>
</view> -->
</view>
<view class="info-tips"><text>￥</text>{{product.sku.price/100}}</view>
</view>
</view>
<view class="box-title">
<view style="flex:1">购票数量</view>
<view class="box-title" style="border-top: none;">
<view style="flex:1">购买数量</view>
<view class="iconfont icon-sami-select" bindtap="minus"></view>
<view class="number-box">{{productNum}}</view>
<view class="iconfont icon-add-select" bindtap="add"></view>
</view>
<view class="box-title">
<view style="flex-shrink:0">预订人：</view>
<input type="text" value="{{user}}" bindinput="userInput" placeholder="请输入预订人真实姓名"></input>
<view style="flex-shrink:0">联系人：</view>
<input type="text" value="{{user}}" bindinput="userInput" placeholder="输入您的名字"></input>
</view>
<view class="box-title">
<view style="flex-shrink:0">手机号码：</view>
<input type="number" value="{{tel}}" bindinput="telInput" placeholder="请输入手机号码"></input>
<view style="flex-shrink:0">手机号：</view>
<input type="number" value="{{tel}}" bindinput="telInput" placeholder="请输入手机号"></input>
</view>
</view>
<coupon id="coupon" money="{{product.sku.price * productNum}}" sku="{{product.sku.id}}"></coupon>
<view style="height:113rpx"></view>
<view class="fixed-bottom" wx:if="{{product}}">
<view class="fixed-price-box"><text>合计：</text><text class="price">¥{{((product.sku.price * productNum - (coupon?coupon.activity.money:0))>0?(product.sku.price * productNum - (coupon?coupon.activity.money:0)):0) / 100}}</text></view>
<view class="fixed-btn" bindtap="order">立即预约</view>
<view class="fixed-price-box"><text>订单金额：</text><text class="price">¥{{((product.sku.price * productNum - (coupon?coupon.activity.money:0))>0?(product.sku.price * productNum - (coupon?coupon.activity.money:0)):0) / 100}}</text></view>
<view class="fixed-btn" bindtap="order">提交订单</view>
</view>
<notice bind:close="closeNotice" wx:if="{{showNoticeFlag}}" bookingInfo="{{product.sku.sku_model}}" skuName="{{product.sku.sku_name}}"></notice>

50
pages/order/food/index.wxss
View File

@ -12,10 +12,11 @@ page {
margin: 0 20rpx;
font-size: 31rpx;
color: #000;
font-weight: 500;
font-weight: 600;
display: flex;
align-items: center;
}
.coupon-btn {
width: 138rpx;
line-height: 56rpx;
@ -29,48 +30,47 @@ page {
display: flex;
justify-content: space-between;
padding: 30rpx 20rpx;
margin-bottom: 30rpx;
align-items: flex-start;
}
.skuinfo image {
flex-shrink: 0;
width: 174rpx;
height: 143rpx;
border-radius: 7rpx;
margin-right: 23rpx;
background: red;
width: 147rpx;
height: 147rpx;
border-radius: 13rpx;
margin-right: 12rpx;
}
.right-info {
flex: 1;
width: 100%;
padding-right: 30rpx;
}
.sku-name {
font-size: 32rpx;
line-height: 47rpx;
height: 94rpx;
color: #333;
margin-bottom: 10rpx;
font-weight: bold;
font-size: 31rpx;
color: #333333;
}
.info-tips {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 27rpx;
color: #666;
.sku-name2{
font-weight: 500;
font-size: 27rpx;
color: #999999;
margin-top: 30rpx;
}
.info-tips .price {
.info-tips {
font-weight: bold;
font-size: 33rpx;
color: #000;
color: #000000;
flex-shrink: 0;
}
.info-tips .price text {
.info-tips text {
font-size: 24rpx;
font-weight: 400;
}
.info-tips .iconfont {
font-size: 26rpx;
}
.box-title .iconfont {
font-size: 28rpx;
flex-shrink: 0;
}
.number-box {
font-size: 29rpx;
font-weight: 500;
@ -95,7 +95,7 @@ page {
flex: 1;
display: block;
font-size: 31rpx;
color: #666;
color: #000000;
margin-left: 15rpx;
font-weight: 400;
}

Write Preview
Loading…
Cancel
Save