jiazhipeng
1 year ago
13 changed files with 1838 additions and 9 deletions
@ -0,0 +1,902 @@ |
|||
// 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, |
|||
|
|||
isTest: true, |
|||
retailId: "", |
|||
shareImg: null, |
|||
showShareFlag: false, |
|||
showAllowance: false, |
|||
allowance_data: null, |
|||
//购物车数量
|
|||
productNum: 1, |
|||
skuIndex: 0, |
|||
aniSkuIndex: -1, |
|||
cartCount: 0, |
|||
cartImgInfo: null, |
|||
cartTop: 0, |
|||
top: 0, |
|||
skuList: [], //立即预定的列表
|
|||
sku_ids: [], |
|||
showQrCode: false, |
|||
wxqrcode: null, |
|||
product: {}, |
|||
date: "", |
|||
time: "", |
|||
showDate:false, |
|||
showPrice:0, |
|||
showDate2:false, |
|||
|
|||
skuDoms: [], // sku 节点Dom
|
|||
activeItem: {}, // sku 侧边栏
|
|||
activeItemIndex: 0, // 年卡权益、合作景区。使用说明
|
|||
scrollLeft: 0, |
|||
menuTop: 0, |
|||
fixed: false, |
|||
ZTPoint:'', |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad: function (options) { |
|||
console.log(options); |
|||
if (!options.id) { |
|||
util.back() |
|||
return; |
|||
} |
|||
if (options.retailId) { |
|||
this.setData({ |
|||
retailId: options.retailId |
|||
}) |
|||
} |
|||
if (options.ZTPoint) {this.setData({ZTPoint: options.ZTPoint})} |
|||
|
|||
this.setData({ |
|||
id: options.id |
|||
}) |
|||
commonApi._post("scene/detail", { |
|||
id: options.id |
|||
}).then(res => { |
|||
let flag = false |
|||
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++) { //3
|
|||
for (let j = 0; j < res.data.product[i].sku.length; j++) { //4
|
|||
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]; |
|||
} |
|||
} else if (options.zhuanti_type) { |
|||
flag = true |
|||
commonApi._post("theme/getYihuFreeList", { |
|||
zhuanti_type: options.zhuanti_type |
|||
}).then(res1 => { |
|||
let skuArr = res1.data.sku_ids |
|||
let newArr = [] |
|||
for (let i = 0; i < res.data.product.length; i++) { //3
|
|||
for (let j = 0; j < res.data.product[i].sku.length; j++) { //4
|
|||
for (let k = 0; k < skuArr.length; k++) { |
|||
if (res.data.product[i].sku[j].id == skuArr[k]) { |
|||
newArr.push(res.data.product[i].sku[j]) |
|||
} |
|||
} |
|||
} |
|||
res.data.product[i].sku = newArr; |
|||
} |
|||
res.data.product.map(product => { |
|||
product.sku.map(sku => { |
|||
sku.display_tags = (sku.display_tags ? sku.display_tags.split(",") : []); |
|||
sku.display_tags_str = sku.display_tags.join(' | ') |
|||
}) |
|||
}) |
|||
this.setData({ |
|||
info: res.data |
|||
}) |
|||
var arr = [] |
|||
res.data.product.forEach((item, index) => { |
|||
item.sku.forEach(itemB => { |
|||
itemB.proIndex = index |
|||
arr.push(itemB) |
|||
}) |
|||
}); |
|||
this.setData({ |
|||
skuList: arr |
|||
}) |
|||
util.pagePoint({ |
|||
event: 'scene_view', |
|||
param: { |
|||
type: res.data.type, |
|||
id: res.data.id |
|||
} |
|||
}, 1) |
|||
this.BroswerRecord() |
|||
}) |
|||
|
|||
} |
|||
console.log(res.data.product); |
|||
if (flag) { |
|||
return |
|||
} |
|||
|
|||
res.data.product.map(product => { |
|||
product.sku.map(sku => { |
|||
sku.display_tags = (sku.display_tags ? sku.display_tags.split(",") : []) |
|||
sku.display_tags_str = sku.display_tags.join(' | ') |
|||
}) |
|||
}) |
|||
this.setData({ |
|||
info: res.data |
|||
}) |
|||
|
|||
try { |
|||
let activeItem = res.data.product[0].sku[0] |
|||
this.setData({ |
|||
activeItem: activeItem |
|||
}) |
|||
} catch(e) { |
|||
|
|||
} |
|||
|
|||
|
|||
this.drawImg() |
|||
var arr = [] |
|||
res.data.product.forEach((item, index) => { |
|||
item.sku.forEach(itemB => { |
|||
itemB.proIndex = index |
|||
arr.push(itemB) |
|||
}) |
|||
}); |
|||
this.setData({ |
|||
skuList: arr |
|||
}) |
|||
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 |
|||
}) |
|||
}) |
|||
} |
|||
|
|||
let rect = wx.getMenuButtonBoundingClientRect() |
|||
let height = (rect.top - device.statusBarHeight) * 2 + rect.height + device.statusBarHeight; |
|||
this.setData({ |
|||
menuTop: height, |
|||
}) |
|||
}, |
|||
// 获取日期
|
|||
changeDate: function (e) { |
|||
console.log(e); |
|||
this.setData({ |
|||
date: e.detail, |
|||
showPrice:e.detail.price |
|||
}) |
|||
console.log(this.data.date); |
|||
}, |
|||
// 获取分时
|
|||
changeTime: function (e) { |
|||
console.log(e); |
|||
this.setData({ |
|||
time: e.detail |
|||
}) |
|||
console.log(this.data.time); |
|||
}, |
|||
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); |
|||
commonApi.user_post(isLike != 1 ? "scene/scene_collection" : "scene/scene_cancel_collection", { |
|||
scene_id: id |
|||
}).then(res => { |
|||
if (res.code == 1) { |
|||
wx.showToast({ |
|||
title: '操作成功', |
|||
}) |
|||
this.setData({ |
|||
isLike: isLike == 1 ? 0 : 1 |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
gotolocation: function () { |
|||
let info = this.data.info; |
|||
wx.openLocation({ |
|||
latitude: Number(info.lat), |
|||
longitude: Number(info.lon) |
|||
}) |
|||
}, |
|||
|
|||
selectSku: function (e) { |
|||
console.log(e.currentTarget.dataset.item); |
|||
if (e.currentTarget.dataset.item.stock == 0 && e.currentTarget.dataset.item.is_third_stock != 1) { |
|||
wx.showToast({ |
|||
title: "该商品暂无库存", |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
let index = e.currentTarget.dataset.index; |
|||
this.setData({ |
|||
skuIndex: index, |
|||
productNum: 1 |
|||
}) |
|||
|
|||
}, |
|||
order: function (e) { |
|||
console.log(this.data.skuList) |
|||
|
|||
commonApi.user_post("/product/checkStock", { |
|||
sku_id: this.data.skuList[this.data.skuIndex].id, |
|||
}).then(res => { |
|||
if (res && res.code != 1) { |
|||
wx.showModal({ |
|||
title: "温馨提示", |
|||
content: '商品已经被抢光啦~要不要瞧瞧别的~', |
|||
showCancel: false |
|||
}) |
|||
return; |
|||
} else { |
|||
app.globalData.postProduct = [] |
|||
app.globalData.list = [] |
|||
app.globalData.listName = null |
|||
if (this.data.skuFlag == 'order') { |
|||
console.log(app.globalData.sku); |
|||
if (app.globalData.product.product.flag==0 || app.globalData.product.sku.flag=='off') return; |
|||
// if (e.currentTarget.dataset.disable === 1) return;
|
|||
util.pagePoint({ |
|||
event: 'scene_order', |
|||
param: { |
|||
type: this.data.info.type, |
|||
id: this.data.info.id |
|||
} |
|||
}, 1) |
|||
wx.setStorageSync('login_from', 'scene_order_login') |
|||
wx.setStorageSync('order_from', 'scene_order_submit') |
|||
app.globalData.couponInfo = null; |
|||
app.globalData.retailId = this.data.retailId; |
|||
// let sku = e.currentTarget.dataset.sku,product = e.currentTarget.dataset.product;
|
|||
// let sku = {sku:e.currentTarget.dataset.product.sku[this.data.skuIndex]},product = {product: e.currentTarget.dataset.product}
|
|||
// let sku = {
|
|||
// sku: this.data.skuList[this.data.skuIndex]
|
|||
// },
|
|||
// product = {
|
|||
// product: this.data.info.product[this.data.skuList[this.data.skuIndex].proIndex]
|
|||
// }
|
|||
// product.productNum = this.data.productNum
|
|||
app.globalData.product.date = this.data.date |
|||
app.globalData.product.time = this.data.time |
|||
app.globalData.product.product.ZTPoint = this.data.ZTPoint |
|||
|
|||
|
|||
// app.globalData.product = {
|
|||
// ...sku,
|
|||
// ...product
|
|||
// }
|
|||
app.globalData.index = 0 |
|||
wx.navigateTo({ |
|||
url: '/pages/order/scene/index', |
|||
}) |
|||
} else { |
|||
commonApi.user_post("cart/add_sku", { |
|||
sku_id: this.data.skuList[this.data.skuIndex].id, |
|||
num: this.data.productNum |
|||
}).then(res => { |
|||
if (res.code == 1) { |
|||
commonApi.user_post('cart/get_list', {}).then(res => { |
|||
this.setData({ |
|||
cartCount: res.data.length //5
|
|||
}) |
|||
}) |
|||
// 加动效
|
|||
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) { |
|||
/* 这里判断一下如果没有授权重新打开设置选项 */ |
|||
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); |
|||
} |
|||
}, |
|||
//加入购物车
|
|||
showCart: function () { |
|||
commonApi.user_post('wx/get_user_keep', { |
|||
jumpurl: '/pages/info/sceneProductInfo/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.product[0].sku.length == 0) { |
|||
wx.showToast({ |
|||
title: '该产品未设置规格，不能加购', |
|||
icon: 'none' |
|||
}) |
|||
return; |
|||
} |
|||
this.setData({ |
|||
skuFlag: "cart" |
|||
}) |
|||
let that = this |
|||
wx.createSelectorQuery().select('#skuImg').boundingClientRect(function (res) { |
|||
that.setData({ |
|||
cartImgInfo: 'top:' + res.top + 'px;left:' + res.left + 'px;' |
|||
}) |
|||
}).exec() |
|||
} |
|||
}) |
|||
}, |
|||
hideSku: function () { |
|||
this.setData({ |
|||
skuFlag: null, |
|||
cartImgInfo: null |
|||
}) |
|||
}, |
|||
hideDate: function () { |
|||
this.setData({ |
|||
showDate: false |
|||
}) |
|||
}, |
|||
//加减数量
|
|||
minus: function () { |
|||
if (this.data.productNum == 1) return; |
|||
this.setData({ |
|||
productNum: this.data.productNum - 1 |
|||
}) |
|||
}, |
|||
add: function () { |
|||
if (this.data.productNum == this.data.skuList[this.data.skuIndex].sku_model.traveller_limit_num) { |
|||
wx.showToast({ |
|||
title: '本产品单笔限购' + this.data.skuList[this.data.skuIndex].sku_model.traveller_limit_num, |
|||
icon: 'none' |
|||
}); |
|||
} else { |
|||
this.setData({ |
|||
productNum: this.data.productNum + 1 |
|||
}) |
|||
} |
|||
}, |
|||
// 选择日期
|
|||
selectDate(e) { |
|||
console.log(e.currentTarget.dataset); |
|||
let sku = { |
|||
sku: e.currentTarget.dataset.sku |
|||
}, |
|||
product = { |
|||
product: e.currentTarget.dataset.product |
|||
}, |
|||
ticket_type = e.currentTarget.dataset.sku.ticket_type |
|||
console.log(sku,product); |
|||
product.productNum = 1 |
|||
app.globalData.product = { |
|||
...sku, |
|||
...product |
|||
} |
|||
console.log(app.globalData.product); |
|||
console.log(ticket_type); |
|||
if (ticket_type != 2) { |
|||
this.setData({ |
|||
showDate: true, |
|||
}) |
|||
this.setData({ |
|||
product: product, |
|||
showDate2: true, |
|||
skuFlag: 'order', |
|||
showPrice:e.currentTarget.dataset.sku.price |
|||
}) |
|||
}else { |
|||
let skuIndex = this.data.skuList.findIndex(v=>v.id == sku.sku.id) |
|||
|
|||
this.setData({ |
|||
skuFlag: 'order', |
|||
skuIndex: skuIndex, |
|||
}) |
|||
this.order() |
|||
} |
|||
}, |
|||
//立即预定
|
|||
showOrder: function () { |
|||
console.log(this.data.id); |
|||
commonApi.user_post('wx/get_user_keep', { |
|||
jumpurl: '/pages/info/sceneProductInfo/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.product[0].sku.length == 0) { |
|||
wx.showToast({ |
|||
title: '该产品未设置规格，不能购买', |
|||
icon: 'none' |
|||
}) |
|||
return; |
|||
} |
|||
if (this.data.info.product[0].type == 'line') { |
|||
wx.navigateTo({ |
|||
url: '/pages/order/road/index?id=' + this.data.info.product[0].id |
|||
}) |
|||
return |
|||
} |
|||
this.setData({ |
|||
skuFlag: 'order' |
|||
}) |
|||
} |
|||
}) |
|||
|
|||
}, |
|||
|
|||
changeActiveMenu: function (e) { |
|||
let activeItem = e.currentTarget.dataset.item, |
|||
that = this; |
|||
this.setData({ |
|||
activeItem: activeItem, |
|||
activeItemIndex: 0 |
|||
}) |
|||
|
|||
|
|||
const query = wx.createSelectorQuery(); //创建节点查询器
|
|||
query.select("#menus").boundingClientRect() //选择toViewid获取位置信息
|
|||
query.selectViewport().scrollOffset() //获取页面查询位置的
|
|||
query.select("#scroll-sku-"+activeItem.id).boundingClientRect() |
|||
|
|||
query.exec(function (res) { |
|||
console.log(res) |
|||
let scrollTop = res[0].top + res[1].scrollTop - 110 * ratio - 44; |
|||
wx.pageScrollTo({ |
|||
scrollTop: scrollTop + 4, |
|||
duration: 0 |
|||
}) |
|||
|
|||
that.setData({ |
|||
scrollLeft: res[2].left |
|||
}) |
|||
}) |
|||
}, |
|||
|
|||
changeActiveIndex: function (e) { |
|||
let index = e.currentTarget.dataset.index; |
|||
this.setData({ |
|||
activeItemIndex: index |
|||
}) |
|||
}, |
|||
|
|||
|
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady: function () { |
|||
if (app.globalData.configJson) { |
|||
this.setData({ |
|||
isTest: app.globalData.configJson.isTest |
|||
}) |
|||
} else { |
|||
setTimeout(() => { |
|||
this.onReady() |
|||
}, 300) |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow: function () { |
|||
console.log(11111); |
|||
commonApi.user_post('cart/get_list', {}).then(res => { |
|||
this.setData({ |
|||
cartCount: res.data.length //1
|
|||
}) |
|||
}) |
|||
if (!wx.getStorageSync('jstrip_token')) { |
|||
return; |
|||
} |
|||
if (this.data.info && this.data.info.id) { |
|||
this.drawImg() |
|||
} else { |
|||
console.log(2222); |
|||
setTimeout(() => { |
|||
// this.onShow()
|
|||
}, 200) |
|||
} |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage: function () {} |
|||
}) |
|||
@ -0,0 +1,9 @@ |
|||
{ |
|||
"usingComponents": { |
|||
"title":"/pages/component/TitleHeader", |
|||
"notice":"/pages/component/notice/notice", |
|||
"code":"/pages/order/components/wxqrCode/index", |
|||
"date":"/pages/order/components/date" |
|||
|
|||
} |
|||
} |
|||
@ -0,0 +1,202 @@ |
|||
<!--pages/info/sceneProductInfo/index.wxml--> |
|||
<wxs src="../../../../utils/filter.wxs" module="tool" /> |
|||
<title title="{{info.title}}"></title> |
|||
<view class="iconfont icon-fenxiang" bindtap="share"></view> |
|||
<image wx:for="{{info.product}}" style="{{aniSkuIndex==index?('top:689px;'):('top:'+top+'px;'+cartImgInfo)}}" class="headimg{{aniSkuIndex==index?' active':''}}" src="{{item.headimg}}" mode="aspectFill"></image> |
|||
<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> |
|||
|
|||
|
|||
<view class="sku-type-container" wx:if="{{info}}"> |
|||
<view class="box" wx:for="{{info.product}}" wx:key="index"> |
|||
<view class="product-item" wx:for="{{item.sku}}" wx:for-item="sku" wx:for-index="itemI" |
|||
bind:tap="changeActiveMenu" data-item="{{sku}}"> |
|||
<view class="sku-title-container"> |
|||
<view class="skutitle textOver2">{{sku.sku_name}}</view> |
|||
<view class="sku-more-icon">详情 ></view> |
|||
|
|||
</view> |
|||
<view class="product-box"> |
|||
<view class="product-left textOver"> |
|||
<view class="product-tags"> |
|||
<view class="product-tag textOver" wx:for="{{sku.display_tags}}" wx:for-item="tag" wx:for-index="tagI">{{tag}}</view> |
|||
</view> |
|||
<view class="order-tip-text" data-item="{{sku}}">已售999+</view> |
|||
</view> |
|||
<view class="product-right"> |
|||
<view class="price"><text>￥</text><text>{{sku.price?sku.price/100:0}}</text></view> |
|||
<view catch:tap="selectDate" data-sku="{{sku}}" data-product="{{item}}" |
|||
data-disable="{{item.flag==0 || sku.flag=='off'?1:0}}" |
|||
class="btn{{item.flag==0 || sku.flag=='off'?' disable':''}}">购买</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="scroll-all-box" id="menus" wx:if="{{info}}"> |
|||
<scroll-view scroll-x enable-flex style="flex-direction: row;" |
|||
class="no-scrollbar scroll-menus{{fixed?' fixed-menus':''}}" |
|||
scroll-left="{{scrollLeft}}"> |
|||
<view class="scroll-menu-item-container" wx:for="{{info.product}}" wx:key="index"> |
|||
<view class="scroll-menu-item {{activeItem.id==sku.id?'active':''}}" wx:for="{{item.sku}}" |
|||
wx:for-item="sku" wx:for-index="itemI" id="scroll-sku-{{sku.id}}" |
|||
bind:tap="changeActiveMenu" data-item="{{sku}}">{{sku.sku_name}}</view> |
|||
</view> |
|||
|
|||
</scroll-view> |
|||
|
|||
|
|||
|
|||
|
|||
<view style="height:85rpx" wx:if="{{fixed}}"></view> |
|||
|
|||
|
|||
<view class="scroll-content"> |
|||
<view class="com-flex sku-info-type-container"> |
|||
<view class="sku-info-type {{activeItemIndex==0?'active':''}}" bind:tap="changeActiveIndex" data-index="0">年卡权益</view> |
|||
<view class="sku-info-type {{activeItemIndex==1?'active':''}}" bind:tap="changeActiveIndex" data-index="1">合作景区</view> |
|||
<view class="sku-info-type {{activeItemIndex==2?'active':''}}" bind:tap="changeActiveIndex" data-index="2">使用说明</view> |
|||
</view> |
|||
|
|||
<view style="padding:0 30rpx 30rpx;"> |
|||
<rich-text wx:if="{{activeItemIndex==0}}" class="details" nodes="{{tool.formateRichText(activeItem.sku_model.detailinfo)}}"></rich-text> |
|||
|
|||
<rich-text wx:if="{{activeItemIndex==1}}" class="details" nodes="{{tool.formateRichText(activeItem.sku_model.bookinfo)}}"></rich-text> |
|||
|
|||
<rich-text wx:if="{{activeItemIndex==2}}" class="details" nodes="{{tool.formateRichText(activeItem.sku_model.expenseinfo)}}"></rich-text> |
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
</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" wx:if="{{info.id!=914626}}"> |
|||
<view class="btn" bindtap="showCart" wx:if="{{info.product[0].type!='line' }}">加入购物车</view> |
|||
<!-- <view class="btn {{info.product[0].type=='line' ? 'btn-r':''}}" 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="{{showDate}}"> |
|||
<view class="mask-bg" bindtap="hideDate"></view> |
|||
<view class="mask-content1"> |
|||
<view class="iconfont icon-close" bindtap="hideDate"></view> |
|||
<date wx:if="{{showDate2}}" bind:onChangeDate="changeDate" bind:onChangeTime="changeTime" product="{{product}}"></date> |
|||
<view class="bottom-box"> |
|||
<view> |
|||
合计: <text class="totalPrice">{{showPrice/100}}</text> |
|||
</view> |
|||
<view class="next" bindtap="order" data-sku="{{sku}}" data-product="{{item}}"> |
|||
下一步 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 规格弹框 --> |
|||
<view class="mask" wx:if="{{skuFlag == 'cart'}}"> |
|||
<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="{{skuList[skuIndex].headimg||skuList[0].headimg}}" mode="aspectFill"></image> |
|||
<view class="sku-info"> |
|||
<view class="sku-price">{{skuIndex||skuIndex==0?skuList[skuIndex].price/100:skuList[0].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">已选择：{{skuList[skuIndex].sku_name || skuList[0].sku_name}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="sku-names"> |
|||
<view bindtap="selectSku" data-index="{{index}}" data-item="{{item}}" class="sku-name-item textOver{{index==skuIndex?' active':''}} {{(item.stock==0&&item.is_third_stock!=1)||item.is_salee==1?' disable':''}}" wx:for="{{skuList}}">{{item.sku_name}}</view> |
|||
</view> |
|||
<view class="number-box"> |
|||
<text>数量</text> |
|||
<view class="iconfont icon-sami-select" bindtap="minus"></view> |
|||
<view class="number">{{productNum}}</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" data-product="{{item}}" wx:if="{{info && info.flag==1}}">{{skuFlag=='cart'?'确认':'立即购买'}} |
|||
</view> |
|||
<!-- <view class="mask-btn" bindtap="order" data-product="{{item}}" wx:if="{{info && info.flag==1}}">{{skuFlag=='cart'?'确认':'立即购买'}} |
|||
</view> --> |
|||
<view class="mask-btn disable" wx:else>该商品已下架</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
<view style="height:{{safeBottom}}px"></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" style="bottom: 200rpx;"> |
|||
<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> |
|||
<code showModel="{{showQrCode}}" qrcode = "{{wxqrcode}}"> |
|||
</code> |
|||
@ -0,0 +1,683 @@ |
|||
/* pages/info/sceneProductInfo/index.wxss */ |
|||
page { |
|||
background: #f8f8f8; |
|||
} |
|||
|
|||
.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: 50rpx 40rpx; |
|||
} |
|||
|
|||
.top-info .title { |
|||
font-size: 33rpx; |
|||
font-weight: bold; |
|||
color: #000; |
|||
} |
|||
|
|||
/* sku、产品区域 */ |
|||
.box { |
|||
background: white; |
|||
border-radius: 13rpx; |
|||
} |
|||
|
|||
.sku-type-container{ |
|||
display: flex; |
|||
margin-top: 21rpx; |
|||
flex-direction: column; |
|||
padding: 26rpx 26rpx 0; |
|||
background: white; |
|||
} |
|||
|
|||
.product-item { |
|||
padding: 26rpx 20rpx; |
|||
background-color: rgba(11,137,142, .06); |
|||
border-radius: 13rpx; |
|||
margin-bottom: 26rpx; |
|||
} |
|||
|
|||
.sku-title-container{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.skutitle { |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 31rpx; |
|||
color: #000000; |
|||
flex-shrink: 0; |
|||
flex: 1; |
|||
padding-right: 20rpx; |
|||
} |
|||
.sku-more-icon{ |
|||
width: 80rpx; |
|||
font-weight: 500; |
|||
font-size: 25rpx; |
|||
color: #666666; |
|||
} |
|||
|
|||
.product-box { |
|||
display: flex; |
|||
align-items: flex-end; |
|||
justify-content: space-between; |
|||
margin-top: 13rpx; |
|||
/* margin-top: 20rpx; */ |
|||
} |
|||
|
|||
.product-left { |
|||
flex: 1; |
|||
} |
|||
|
|||
.product-tags { |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.product-tag { |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #0B898E; |
|||
margin-bottom: 13rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.product-tag::before { |
|||
content: ' '; |
|||
width: 11rpx; |
|||
height: 11rpx; |
|||
background: #0B898E; |
|||
border-radius: 50%; |
|||
display: inline-block; |
|||
margin-right: 13rpx; |
|||
} |
|||
.order-tip-text { |
|||
/* margin-top: 33rpx; |
|||
font-size: 24rpx; |
|||
color: #666; */ |
|||
margin-top: 18rpx; |
|||
|
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #666666; |
|||
} |
|||
|
|||
.product-right { |
|||
text-align: center; |
|||
flex-shrink: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.product-right .price { |
|||
font-weight: bold; |
|||
color: #D62828; |
|||
font-size: 24rpx; |
|||
/* margin-bottom: 20rpx; */ |
|||
margin-right: 19rpx; |
|||
} |
|||
|
|||
.product-right .price text:nth-child(2) { |
|||
font-size: 36rpx; |
|||
} |
|||
|
|||
.product-right .btn { |
|||
width: 107rpx; |
|||
height: 67rpx; |
|||
background: #0B898E; |
|||
border-radius: 13rpx; |
|||
font-weight: bold; |
|||
font-size: 31rpx; |
|||
color: #FFFFFF; |
|||
text-align: center; |
|||
line-height: 67rpx; |
|||
} |
|||
|
|||
.product-right .btn.disable { |
|||
background: #ccc; |
|||
} |
|||
|
|||
|
|||
/* 结束 */ |
|||
|
|||
|
|||
.mask-content { |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
} |
|||
|
|||
.mask-content .icon-close { |
|||
position: absolute; |
|||
right: 40rpx; |
|||
top: 40rpx; |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
|
|||
|
|||
|
|||
.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; |
|||
} |
|||
|
|||
.btns .btn:nth-child(2) { |
|||
border-radius: 0 39rpx 39rpx 0; |
|||
} |
|||
|
|||
.btns .btn.disable { |
|||
background: #ccc; |
|||
} |
|||
|
|||
.mask-content { |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
} |
|||
|
|||
.mask-content .icon-close { |
|||
position: absolute; |
|||
right: 40rpx; |
|||
top: 40rpx; |
|||
} |
|||
|
|||
.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: 10rpx; |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
|
|||
.sku-name-item.disable { |
|||
border-color: transparent; |
|||
color: #fff; |
|||
background: #d7d7d7; |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
|
|||
/* 购物车 */ |
|||
.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%; |
|||
} |
|||
.imgs{ |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
margin: 10rpx; |
|||
border-radius: 8rpx; |
|||
} |
|||
.img-box{ |
|||
display: inline-block; |
|||
position: relative; |
|||
} |
|||
.all{ |
|||
color: #fff; |
|||
position:absolute; |
|||
bottom: 17rpx; |
|||
right: 10rpx; |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
border-radius: 8rpx; |
|||
background-color: rgba(0, 0, 0, .5); |
|||
} |
|||
.all view{ |
|||
text-align: center; |
|||
} |
|||
.all view:first-child{ |
|||
font-size: 40rpx; |
|||
margin-top: 40rpx; |
|||
} |
|||
.all view:last-child{ |
|||
margin-top: 10rpx; |
|||
font-size: 30rpx; |
|||
|
|||
} |
|||
.sku{ |
|||
margin-left: 10rpx; |
|||
color: #666; |
|||
font-size: 24rpx; |
|||
margin-top: 8rpx; |
|||
} |
|||
.btn-r{ |
|||
border-radius: 39rpx !important; |
|||
} |
|||
.totalPrice { |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 48rpx; |
|||
color: #D62828; |
|||
} |
|||
.totalPrice::before { |
|||
content: "￥"; |
|||
font-size: 24rpx; |
|||
} |
|||
.bottom-box { |
|||
height: 133rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx -3rpx 8rpx 0rpx rgba(71,71,71,0.1); |
|||
padding: 0 50rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
} |
|||
.next { |
|||
width: 250rpx; |
|||
height: 80rpx; |
|||
background: #D62828; |
|||
border-radius: 40rpx; |
|||
font-family: PingFang; |
|||
font-weight: bold; |
|||
font-size: 32rpx; |
|||
color: #FFFFFF; |
|||
text-align: center; |
|||
line-height: 80rpx; |
|||
} |
|||
.mask-content1 { |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
background: white; |
|||
border-radius: 12rpx; |
|||
overflow-y: auto; |
|||
height: 1100rpx; |
|||
} |
|||
.icon-close { |
|||
position: absolute; |
|||
top: 30rpx; |
|||
right: 30rpx; |
|||
} |
|||
|
|||
|
|||
/* 产品sku对应锚点信息 */ |
|||
.scroll-all-box { |
|||
margin: 20rpx 0; |
|||
background: white; |
|||
} |
|||
|
|||
.scroll-menus { |
|||
display: flex; |
|||
font-size: 29rpx; |
|||
color: #333; |
|||
height: 84rpx; |
|||
border-bottom: 1px solid #CCC; |
|||
overflow-x: auto; |
|||
overflow-y: hidden; |
|||
|
|||
} |
|||
.scroll-menu-item-container{ |
|||
display: flex; |
|||
align-items: center; |
|||
height: 100%; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.scroll-menu-item { |
|||
line-height: 84rpx; |
|||
position: relative; |
|||
padding: 0 53rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
.scroll-menu-item.active{ |
|||
color: #0B898E; |
|||
} |
|||
|
|||
.scroll-menu-item.active::after { |
|||
content: "1"; |
|||
font-size: 0; |
|||
display: block; |
|||
position: absolute; |
|||
width: 60rpx; |
|||
height: 6rpx; |
|||
border-radius: 3rpx; |
|||
background: #0B898E; |
|||
left: 50%; |
|||
margin-left: -30rpx; |
|||
bottom: 0rpx; |
|||
} |
|||
.sku-info-type-container{ |
|||
padding: 57rpx 30rpx; |
|||
justify-content: space-between; |
|||
} |
|||
.sku-info-type{ |
|||
width: 200rpx; |
|||
height: 53rpx; |
|||
border-radius: 27rpx; |
|||
border: 1px solid #999999; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 28rpx; |
|||
color: #666666; |
|||
line-height: 53rpx; |
|||
text-align: center; |
|||
} |
|||
.sku-info-type.active{ |
|||
border: 1px solid #0B898E; |
|||
color: #0B898E; |
|||
} |
|||
Loading…
Reference in new issue