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

剧场演出

master
jiazhipeng 1 year ago
parent
0c61222316
commit
91c06ed1bd
11 changed files with 2175 additions and 310 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. 13
      app.wxss
  2. 786
      pages/info/showInfo/index.js
  3. 4
      pages/info/showInfo/index.json
  4. 242
      pages/info/showInfo/index.wxml
  5. 918
      pages/info/showInfo/index.wxss
  6. 53
      pages/list/theatre/index.js
  7. 7
      pages/list/theatre/index.wxml
  8. 158
      pages/order/show/index.js
  9. 59
      pages/order/show/index.wxml
  10. 241
      pages/order/show/index.wxss
  11. 4
      utils/https.js

13
app.wxss
View File

@ -144,6 +144,19 @@ page{
.no-scrollbar::-webkit-scrollbar{
display: none;
}
.flex-1{
flex: 1;
}
.w-1rpx{
width: 1rpx;
}
.h-1rpx{
height: 1rpx;
}
.flex-shrink-0{
flex-shrink: 0;
}
/* page {
filter: grayscale(100%);
} */

786
pages/info/showInfo/index.js
View File

@ -1,115 +1,709 @@
// pages/info/showInfo/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({
/**
* 页面的初始数据
*/
data: {
info:null,
retailId:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
if(options.retailId){
this.setData({
retailId:options.retailId
})
}
commonApi.user_post('product/get_product_detail',{
id:options.id
}).then(res=>{
res.data.display_tags = (res.data.display_tags?res.data.display_tags.split(","):[]).splice(0,2);
this.setData({
info:res.data
})
this.BroswerRecord()
})
},
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/showInfo/index?id="+this.data.info.id,
uuid:app.globalData.uuid
}).then(res=>{
})
}
else {
this.BroswerRecord();
}
},500)
},
order:function(){
if(this.data.info.sku.length==0){
wx.showToast({
title: '该演出暂时无法预约',
icon:'none'
})
return;
}
app.globalData.retailId = this.data.retailId;
app.globalData.couponInfo = null;
app.globalData.product = this.data.info;
wx.navigateTo({
url: '/pages/order/show/index?id='+this.data.id,
})
},
/**
* 页面的初始数据
*/
data: {
autoPlay: true,
fixed: false,
type: 1,
top: 0,
isLike: 0,
commentTotal: 0,
comment: [],
info: null,
skuFlag: null,
producNum: 1,
skuIndex: 0,
aniSkuIndex: -1,
retailId: "",
cartTop: 0,
cartImgInfo: null,
cartCount: 0,
shareImg: null,
showShareFlag: false,
allowance_data: null,
showAllowance: false,
tjList: [], //推荐商品列表
iShop: false,
supplierId: null,
showQrCode: false,
wxqrcode: null,
showDetail: false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//删除临时存储的联系人
wx.removeStorageSync('linkMan')
let rect = wx.getMenuButtonBoundingClientRect(),
that = this;
let height = (rect.top - device.statusBarHeight) * 2 + rect.height + device.statusBarHeight;
this.setData({
top: height,
id: options.id
})
// 获取购物车按钮的位置
wx.createSelectorQuery().select('#cart').boundingClientRect(function (res) {
console.log(res)
that.setData({
cartTop: res.top
})
}).exec()
if (options.retailId) {
this.setData({
retailId: options.retailId
})
}
commonApi._post("product/get_product_detail", {
id: options.id
}).then(res => {
res.data.display_tags = (res.data.display_tags ? res.data.display_tags.split(",") : []).splice(0, 2);
if (options.skuid) {
let sku = res.data.sku.find(item => item.id == options.skuid);
res.data.sku = [sku];
}
res.data.flag = res.data.sku.find(item => item.flag == 'on') ? res.data.flag : 0
let resData = res.data
this.setData({
info: resData,
supplierId: res.data.supplier_id,
iShop: res.data.supplier_id ? true : false
})
this.BroswerRecord()
})
// 推荐
commonApi._post("search/product_recommend", {
offset: 0,
limit: 6,
rand: true,
type: 'post',
product_ids:options.id,
}).then(res => {
try {
this.setData({
tjList: res.data.list
})
} catch (error) {
console.log(error);
}
})
},
changeAllowance: function () {
this.setData({
showAllowance: !this.data.showAllowance
})
},
BroswerRecord: function () {
setTimeout(() => {
if (app.globalData.uuid) {
commonApi._post('browse/browse_record', {
type: "goods",
title: this.data.info.title,
drive: "mini",
source_id: this.data.info.id,
url: "/pages/info/postProductInfo/index?id=" + this.data.info.id,
uuid: app.globalData.uuid
}).then(res => {})
} else {
this.BroswerRecord();
}
}, 500)
},
like: function () {
let id = this.data.id,
isLike = this.data.isLike;
commonApi.user_post("product/" + (isLike == 1 ? "product_cancel_collection" : "product_collection"), {
product_id: id
}).then(res => {
if (res.code == 1) {
this.setData({
isLike: isLike == 1 ? 0 : 1
})
}
})
},
changeMenu: function (e) {
let index = e.currentTarget.dataset.index,
that = this;
const query = wx.createSelectorQuery(); //创建节点查询器
query.select("#box" + index).boundingClientRect() //选择toViewid获取位置信息
query.selectViewport().scrollOffset() //获取页面查询位置的
query.exec(function (res) {
let scrollTop = res[0].top + res[1].scrollTop - 110 * ratio - that.data.top;
wx.pageScrollTo({
scrollTop: scrollTop + 4,
duration: 0
})
that.setData({
type: index
})
})
},
onPageScroll: function (e) {
let that = this,
height = this.data.top;
let topHeight = height;
wx.createSelectorQuery().select('#menus').boundingClientRect(function (rect) {
if (rect.top <= topHeight) {
// 此时应该把menus固定在顶部
that.setData({
fixed: true
})
} else {
that.setData({
fixed: false
})
}
// 滚动时判断滚动到哪个部分了
const query = wx.createSelectorQuery(); //创建节点查询器
query.select("#box1").boundingClientRect() //选择toViewid获取位置信息
query.select("#box2").boundingClientRect() //选择toViewid获取位置信息
query.select("#box3").boundingClientRect() //选择toViewid获取位置信息
// query.select("#box4").boundingClientRect() //选择toViewid获取位置信息
let minHeight = that.data.fixed ? (110 * ratio + height) : topHeight;
query.exec(function (res) {
try {
if (res[2].top < minHeight) {
that.setData({
type: 3
})
}else if (res[1].top < minHeight) {
that.setData({
type: 2
})
} else {
that.setData({
type: 1
})
}
} catch(e) {}
})
}).exec()
},
showCart: function () {
commonApi.user_post('wx/get_user_keep', {
jumpurl: '/pages/info/postProductInfo/index?id=' + this.data.id,
title: this.data.info.title,
type: 'mini'
}).then(res => {
if (res.data.subscribe == 0) {
this.setData({
wxqrcode: res.data.qrcode,
showQrCode: true
})
} else {
if (this.data.info.sku.length == 0) {
wx.showToast({
title: '该产品未设置规格，不能加购',
icon: 'none'
})
return;
}
this.setData({
skuFlag: "cart"
})
let that = this
wx.createSelectorQuery().select('#skuImg').boundingClientRect(function (res) {
console.log(res)
that.setData({
cartImgInfo: 'top:' + res.top + 'px;left:' + res.left + 'px;'
})
}).exec()
}
})
},
hideSku: function () {
this.setData({
skuFlag: null,
cartImgInfo: null
})
},
minus: function () {
if (this.data.producNum == 1) return;
this.setData({
producNum: this.data.producNum - 1
})
},
add: function () {
this.setData({
producNum: this.data.producNum + 1
})
},
selectSku: function (e) {
let index = e.currentTarget.dataset.index;
this.setData({
skuIndex: index
})
},
showOrder: function () {
// if(this.data.info.sku.length==0){
// wx.showToast({
// title: '该演出暂时无法预约',
// icon:'none'
// })
// return;
// }
app.globalData.couponInfo = null;
app.globalData.product = this.data.info;
app.globalData.retailId = this.data.retailId;
wx.navigateTo({
url: '/pages/order/show/index?id='+this.data.id,
})
},
order: function () {
app.globalData.postProduct = []
app.globalData.list = []
commonApi.user_post("/product/checkStock", {
sku_id: this.data.info.sku[this.data.skuIndex].id,
}).then(res => {
if (res && res.code != 1) {
return;
} else {
if (this.data.skuFlag == 'order') {
wx.setStorageSync('login_from', 'product_order_login')
wx.setStorageSync('order_from', 'product_order_submit')
app.globalData.couponInfo = null;
// 购买
let product = [{
product: this.data.info,
sku: this.data.info.sku[this.data.skuIndex],
productNum: this.data.producNum
}];
app.globalData.postProduct = product;
app.globalData.retailId = this.data.retailId;
app.globalData.listName = null
if (this.data.info.is_package) {
app.globalData.product = product[0];
wx.navigateTo({
url: '/pages/order/WineSceneOrder/index',
})
} else {
wx.navigateTo({
url: '/pages/order/postOrder/index',
})
}
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
} else {
let tag_id = this.data.info.tag_id,type = ''
if (tag_id.includes(20) || tag_id.includes(19)) { //文创
type = '1'
}else if (tag_id.includes(5)) { //非遗
type = '2'
}else {
type = ''
}
commonApi.user_post("cart/add_sku", {
sku_id: this.data.info.sku[this.data.skuIndex].id,
num: this.data.producNum,
type:type
}).then(res => {
if (res.code == 1) {
commonApi.user_post('cart/get_list', {}).then(res => {
this.setData({
cartCount: res.data.length
})
})
// 加动效
this.setData({
skuFlag: null,
aniSkuIndex: this.data.skuIndex,
cartImgInfo: null
})
setTimeout(() => {
this.setData({
aniSkuIndex: -1
})
wx.showModal({
title: "提示",
content: "去购物车结算？",
success: function (res) {
if (res.confirm) {
wx.navigateTo({
url: '/pages/user/cartlist/list',
})
}
}
})
}, 650)
}
})
}
}
})
},
// 分享
share: function () {
if (!wx.getStorageSync("jstrip_token")) {
commonApi.user_post("user/getMyInfo", {}).then(res => {
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
})
return;
}
if (!this.data.shareImg) {
wx.showToast({
title: '图片生成中，稍后再试',
icon: 'none'
})
return;
}
this.setData({
showShareFlag: !this.data.showShareFlag
})
},
// 保存
save() {
let url = this.data.shareImg,
that = this;
wx.authorize({
/* 这个就是保存相册的 */
scope: 'scope.writePhotosAlbum',
success() {
wx.saveImageToPhotosAlbum({
filePath: url,
success(res) {
wx.showToast({
title: '保存成功',
icon: "success"
})
that.setData({
showShareFlag: !this.data.showShareFlag
})
},
fail(res) {
wx.showToast({
title: '保存失败',
icon: 'none'
})
}
})
},
complete(res) {
console.log(res);
/* 这里判断一下如果没有授权重新打开设置选项 */
wx.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
/* 打开设置的方法 */
// opensit();
wx.showToast({
title: '请打开权限后再试',
icon: 'none'
})
}
}
});
}
});
},
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
// 绘制海报
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);
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
//如果数组长度大于2 则截取前两个
if (row.length > 2) {
var rowCut = row.slice(0, 2);
var rowPart = rowCut[1];
var test = "";
var empty = [];
for (var a = 0; a < rowPart.length; a++) {
if (ctx.measureText(test).width < canvasWidth - 30 * ratio) {
test += rowPart[a];
} else {
break;
}
}
empty.push(test);
var group = empty[0] + "..." //这里只显示两行，超出的用...表示
rowCut.splice(1, 1, group);
row = rowCut;
}
for (var b = 0; b < row.length; b++) {
ctx.fillText(row[b], x, y + b * 40 * ratio, canvasWidth);
}
},
gotoDetail: function (e) {
let item = e.currentTarget.dataset.item;
if (item.type == 'travels') {
// 游记做特殊处理 其他都按照原来的来
wx.navigateTo({
url: '/pages/info/strategyInfo/index?id=' + item.s_id,
})
} else {
util.gotoDetail(item);
}
},
},
gotolocation: function () {
let info = this.data.info;
wx.openLocation({
latitude: Number(info.scene_lat),
longitude: Number(info.scene_lon),
name:info.scene_name,
address:info.scene_address
})
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
// 演出详情展开收起
changeShowDetail: function (e) {
let showDetail = e.currentTarget.dataset.flag;
this.setData({showDetail: showDetail})
},
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
app.globalData.postProduct = []
if (!wx.getStorageSync('jstrip_token')) {
return;
}
if (this.data.info && this.data.info.id) {
commonApi.user_post("product/is_product_collection", {
product_id: this.data.info.id
}).then(res => {
this.setData({
isLike: res.data
})
this.drawImg()
})
commonApi.user_post('cart/get_list', {}).then(res => {
this.setData({
cartCount: res.data.length
})
})
} else {
setTimeout(() => {
this.onShow()
}, 200)
}
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
}
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})

4
pages/info/showInfo/index.json
View File

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

242
pages/info/showInfo/index.wxml
View File

@ -1,32 +1,216 @@
<!--pages/info/showInfo/index.wxml-->
<!--pages/info/hotelProductInfo/index.wxml-->
<wxs src="../../../utils/filter.wxs" module="tool" />
<title title="产品详情"></title>
<title title="演出详情"></title>
<view wx:if="{{info}}">
<swiper class="swiper" indicator-dots="{{true}}"
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-box">
<view class="title">{{info.title}}</view>
<view class="tags">
<view class="tag" wx:for="{{info.display_tags}}">{{item}}</view>
</view>
<view class="time">演出时间：<text wx:for="{{info.sku[0].sku_model.next_show_date}}">{{item}}</text></view>
<view class="show-location">{{info.scene_name}}</view>
<view class="show-address"><text class="iconfont icon-location"></text>{{info.scene_address}}</view>
</view>
</view>
<view class="all-title">演出详情</view>
<rich-text wx:if="{{info}}" class="detail" nodes="{{tool.formateRichText(info.content)}}"></rich-text>
<view class="all-title">预定须知</view>
<!-- <rich-text class="detail"></rich-text> -->
<rich-text wx:if="{{info}}" class="detail" nodes="{{tool.formateRichText(info.book_info)}}"></rich-text>
<view style="height:120rpx"></view>
<view class="top-info">
<view class="product-base-info">
<image class="headImg" src="{{info.headimg}}"></image>
<view class="base-info">
<view class="title textOver2">{{info.title}}</view>
<view class="tags-box textOver">
<view class="tag textOver" wx:for="{{info.display_tags}}">{{item}}<view class="line"></view>
</view>
</view>
<view class="subtitle">演出时间：<text wx:for="{{info.sku[0].sku_model.next_show_date}}">{{item}}</text></view>
<view class="bottom-price">
<view class="tags-price">
<text>￥</text><text>{{info.price/100}}</text><text>起</text>
</view>
</view>
</view>
</view>
<view class="address-info" bindtap="gotolocation">
<view class="map-container">
<view style="width: 526rpx;">
<view class="textOver" style="font-size: 31rpx;color: #000000;padding-top: 12rpx;">{{info.scene_name}}</view>
<view class="textOver2" style="padding-top: 26rpx;">{{info.scene_address}}</view>
</view>
<view style="text-align: center;">
<image src="https://static.ticket.sz-trip.com/uploads/20241119/a98e35f23497c1a8ddf7c7769fbd4fd1.png"></image>
<view style="padding-top: 14rpx;">25.5km</view>
</view>
</view>
</view>
<view class="show-tip">
<view class="com-flex"><image src="https://static.ticket.sz-trip.com/uploads/20241119/a98e35f23497c1a8ddf7c7769fbd4fd1.png"></image>不支持退款</view>
<view class="com-flex">不支持退款</view>
<view class="com-flex">不支持退款</view>
</view>
</view>
</view>
<view class="scroll-all-box" id="menus" wx:if="{{info}}">
<view class="scroll-menus{{fixed?' fixed-menus':''}}" style="top:{{top}}px">
<view class="scroll-menu-item{{type==1?' active':''}}" bindtap="changeMenu" data-index="1">详情</view>
<view class="scroll-menu-item{{type==2?' active':''}}" bindtap="changeMenu" data-index="2">须知</view>
<view class="scroll-menu-item{{type==3?' active':''}}" bindtap="changeMenu" data-index="3">推荐</view>
</view>
<view style="height:85rpx" wx:if="{{fixed}}"></view>
<view class="content-text">
<view class="info-box info-box-line" id="box1">
<view class="info-title">演出详情</view>
<view class="{{showDetail?'':'max-details'}}">
<rich-text class="details" nodes="{{tool.formateRichText(info.content)}}"></rich-text>
<view wx:if="{{!showDetail}}" class="white-placholder">123</view>
</view>
<view class="show-btn">
<view bindtap="changeShowDetail" data-flag="{{true}}">展开全部</view>
<view bindtap="changeShowDetail" data-flag="{{false}}">收起</view>
</view>
</view>
<view class="info-box" id="box2">
<view class="info-title">演出须知</view>
<rich-text class="details" nodes="{{tool.formateRichText(info.book_info)}}"></rich-text>
</view>
<view class="info-box info-box-line" >
<view class="info-title">观看提示</view>
<rich-text class="details" nodes="{{tool.formateRichText(info.book_info)}}"></rich-text>
</view>
<view class="info-box" id="box3">
<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 src="{{item.headimg}}"></image>
</view>
<view class="item-bm">
<view class="protitle textOver">{{item.title}}</view>
<view class="pro-price">
{{item.price/100}}
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view style="height:140rpx"></view>
<view class="fixed-bottom">
<view class="btn" bindtap="order" wx:if="{{info && info.flag==1}}">立即预约</view>
<view class="btn disable" wx:else>该商品已下架</view>
</view>
<view class="['left-img',{{!iShop?'no-shop':''}}]">
<navigator url="/pages/index/index" class="shop-box">
<view class="shop-box">
<image class="icon-shop" src="https://static.ticket.sz-trip.com/uploads/20241119/868addcaedbc5d63ebdfa150fcace34d.png" mode="aspectFill"/>
<view>首页</view>
</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>
<view class="btns">
<!-- <view class="btn" bindtap="showCart">加入购物车</view> -->
<view class="btn" bindtap="showOrder" >立即购买</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>
<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">{{allowance_data.title}}</view>
<rich-text nodes="{{allowance_data.content}}"></rich-text>
</view>
</view>
<code showModel="{{showQrCode}}" qrcode = "{{wxqrcode}}">
</code>

918
pages/info/showInfo/index.wxss
View File

@ -1,86 +1,898 @@
/* pages/info/showInfo/index.wxss */
/* pages/info/hotelProductInfo/index.wxss */
page {
background: #f6f6f6;
background: white;
}
.swiper,.swiper image {
display: block;
width: 100%;
height: 330rpx;
.top-info {
background: white;
margin-top: -20rpx;
padding: 48rpx 28rpx 28rpx;
}
.top-box {
border-bottom: 1rpx solid #ccc;
padding: 22rpx 27rpx;
.product-base-info{
display: flex;
}
.top-box .title {
font-size: 32rpx;
color: #000;
font-weight: 500;
margin-bottom: 10rpx;
.product-base-info .headImg{
width: 187rpx;
height: 240rpx;
background: #D1D7CB;
border-radius: 13rpx;
margin-right: 20rpx;
flex-shrink: 0;
}
.product-base-info .title {
font-family: PingFang SC;
font-weight: bold;
font-size: 32rpx;
color: #111111;
}
.top-box .tags {
.product-base-info .subtitle {
margin-top: 20rpx;
font-weight: 500;
font-size: 27rpx;
color: #888888;
}
.base-info{
flex: 1;
width: 1rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.product-base-info .tags-box {
margin-top: 18rpx;
display: flex;
color: #0B898E;
font-size: 20rpx;
margin-bottom: 20rpx;
align-items: center;
height: 50rpx;
overflow-y: hidden;
overflow-x: auto;
}
.top-box .tag {
margin-right: 20rpx;
padding: 0 15rpx;
line-height: 30rpx;
border-radius: 16rpx;
border: 1rpx solid;
.tags-box .tag {
font-weight: 500;
font-size: 24rpx;
color: #0B898E;
padding: 7rpx 16rpx;
background: #E6F3F3;
border-radius: 19rpx;
margin-right: 13rpx;
}
.top-box .time {
font-size: 27rpx;
color: #333;
padding-bottom: 20rpx;
border-bottom: 1rpx solid #ccc;
.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;
}
.show-location {
margin: 20rpx 0;
font-size: 28rpx;
color: #666;
.bottom-price {
flex: 1;
height: 1rpx;
color: #E52910;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.tags-price text:nth-child(1) {
font-size: 21rpx;
}
.show-address {
.tags-price text:nth-child(2) {
font-size: 37rpx;
font-weight: bold;
}
.tags-price text:nth-child(3) {
font-size: 21rpx;
color: #999999;
margin-left: 4rpx;
}
.tags-box .iconfont {
margin-left: 4rpx;
font-size: 24rpx;
margin-bottom: 10rpx;
}
.show-location .iconfont {
font-size: 26rpx;
margin-right: 10rpx;
.address-info{
margin-top: 26rpx;
padding-top: 15rpx;
border-top: 1px solid #D8D8D8;
}
.all-title {
margin: 27rpx;
.map-container{
width: 100%;
display: flex;
justify-content: space-between;
font-family: PingFang SC;
font-weight: 500;
font-size: 24rpx;
color: #888;
box-sizing: border-box;
}
.map-container image{
width: 53rpx;
height: 53rpx;
}
.show-tip{
margin-top: 27rpx;
width: 100%;
box-sizing: border-box;
height: 80rpx;
background: #E6F3F3;
border-radius: 13rpx;
padding: 0 26rpx;
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 500;
font-size: 24rpx;
color: #111111;
}
.show-tip image{
width: 26rpx;
height: 26rpx;
margin-right: 12rpx;
}
.scroll-all-box {
margin: 20rpx 0;
background: white;
}
.scroll-menus {
padding: 0 107rpx;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 29rpx;
color: #333;
height: 84rpx;
}
.scroll-menu-item {
position: relative;
line-height: 84rpx;
}
.scroll-menu-item.active{
color: #0B898E;
}
.scroll-menu-item.active::after {
content: "1";
font-size: 0;
display: block;
position: absolute;
width: 46rpx;
height: 6rpx;
border-radius: 3rpx;
background: #0B898E;
left: 50%;
margin-left: -23rpx;
bottom: 0rpx;
}
.fixed-menus {
position: fixed;
left: 0;
right: 0;
background: white;
z-index: 1;
}
.content-text{
padding: 0 40rpx;
}
.info-box {
padding: 30rpx 0rpx 39rpx;
}
.info-box-line{
border-bottom: 1px solid #D8D8D8;
}
.info-title {
font-size: 35rpx;
font-weight: bold;
color: #000;
margin-bottom: 30rpx;
}
#box1{
margin-top: 40rpx;
}
.max-details{
position: relative;
max-height: 650rpx;
overflow: hidden;
}
.white-placholder{
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 333rpx;
background-image: linear-gradient(to bottom, transparent, #fff);
}
.show-btn{
padding-top: 30rpx;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 70rpx;
}
.show-btn view{
width: 158rpx;
height: 44rpx;
border-radius: 22rpx;
border: 1px solid #0B898E;
font-weight: 500;
font-size: 28rpx;
color: #0B898E;
text-align: center;
line-height: 44rpx;
margin-right: 29rpx;
}
.box {
/* margin: 20rpx; */
/* background: white; */
/* border-radius: 13rpx; */
background: #f2f2f2;
padding: 20rpx;
}
.box-top {
line-height: 95rpx;
border-bottom: 1rpx solid #d9d9d9;
font-weight: 500;
color: #000;
font-size: 35rpx;
padding: 0 20rpx;
background: #fff;
border-radius: 13rpx 13rpx 0 0;
}
.detail {
padding: 0 27rpx;
display: block;
.box-top .iconfont {
color: #0B898E;
font-size: 33rpx;
margin-right: 16rpx;
}
.empty-box {
text-align: center;
padding: 40rpx 0;
font-size: 23rpx;
color: #333;
background: #fff;
border-radius: 0 0 13rpx 13rpx;
}
.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;
}
.fixed-bottom {
position: fixed;
left: 0;
right: 0;
height: 104rpx;
background: #FFFFFF;
box-shadow: -1rpx 1rpx 16rpx 0px rgba(6, 0, 1, 0.1);
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;
padding-left: 0;
}
.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: 240rpx;
line-height: 78rpx;
background: #D62828;
border-radius: 39rpx;
}
/*
.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;
}
.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;
justify-content: space-between;
}
.sku-name-item {
background: #EFEFEF;
border: 1rpx solid #EFEFEF;
/* width: 318rpx; */
line-height: 77rpx;
border-radius: 14rpx;
margin-bottom: 25rpx;
margin-right: 30rpx;
max-width: 100%;
padding: 0 15rpx;
min-width: 270rpx;
}
.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;
}
.fixed-bottom .btn {
width: 391rpx;
line-height: 74rpx;
.mask-btn {
width: 670rpx;
line-height: 78rpx;
background: #D62828;
border-radius: 37rpx;
border-radius: 39rpx;
color: #fff;
font-size: 31rpx;
text-align: center;
font-size: 33rpx;
font-weight: 500;
}
.fixed-bottom .btn.disable {
.mask-btn.disable {
background: #ccc;
}
}
/* .icon-xin,.icon-shoucang {
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-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;
font-size: 40rpx !important;
}
/* 购物车 */
.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;
}
.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;
}
.allowance-box {
height: 113rpx;
background: url("https://sz-qd.oss-cn-hangzhou.aliyuncs.com/uploads/20220602/7762b9c4be5adac1f3d0ab5228569821.png");
background-size: 100% auto;
background-repeat: no-repeat;
padding: 30rpx 30rpx 10rpx;
font-size: 24rpx;
color: #FFFFFF;
margin-top: -60rpx;
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;
}
.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: 45rpx;
margin-top: 40rpx;
}
.all view:last-child{
margin-top: 10rpx;
}
.sku{
margin-left: 10rpx;
color: #666;
font-size: 24rpx;
margin-top: 8rpx;
}
.proad{
margin: 20rpx;
}
.proad-title{
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16rpx;
}
.proad-title image{
width: 292rpx;
height: 34rpx;
}
.pro-list{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.proitem{
width: 213rpx;
}
.item-hd image{
width: 213rpx;
height: 273rpx;
background: #D1D7CB;
border-radius: 13rpx;
}
.item-bm{
padding: 8rpx 12rpx;
}
.protitle{
font-family: PingFang SC;
font-weight: 500;
font-size: 29rpx;
color: #111111;
}
.pro-price{
color: #E52910;
font-weight: 500;
font-size: 30rpx;
}
.pro-price:before {
display: inline-block;
content:"￥";
color: #E52910;
font-size: 20rpx;
}
.pro-price:after {
display: inline-block;
content:'起';
color: #999999;
font-size: 10px;
}
.icon-shop{
width: 34rpx;
height: 36rpx;
}
.left-img{
display: flex;
width: 290rpx;
flex-shrink: 0;
justify-content: space-between;
padding: 0 40rpx;
box-sizing: border-box;
}
.no-shop{
width: 230rpx;
}
.shop-box{
display:flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 70rpx;
}
.wineScene-price-container {
width: 750rpx;
height: 100rpx;
background: linear-gradient(-90deg,#FF413B, #FFAB2E);
border-radius: 20rpx 20rpx 0rpx 0rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 26rpx;
box-sizing: border-box;
color: #FFFFFF;
font-size: 24rpx;
}
.wineScene-price-container .wineSecne-price {
font-weight: bold;
font-size: 36rpx;
color: #FFFFFF;
}
.wineScene-price-container .wineSecne-money {
font-size: 24rpx;
font-weight: 500;
text-decoration-line: line-through;
padding-left: 14rpx;
}
.wineScene-price-container .wineSecne-price::before {
font-size: 24rpx;
content: '￥';
}
.hotel-custom-detail{
display: flex;
/* justify-content: space-between; */
height: fit-content;
font-family: PingFang SC;
font-weight: 500;
font-size: 24rpx;
color: #666666;
margin-bottom: 20rpx;
}
.hotel-custom-detail .tip-info{
width: 33rpx;
position: relative;
display: flex;
justify-content: center;
flex-shrink: 0;
}
.hotel-custom-detail .tip-info .tip{
font-family: PingFang SC;
font-weight: 500;
font-size: 23rpx;
color: #FFFFFF;
width: 33rpx;
height: 33rpx;
background: #6394FD;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
text-align: center;
line-height: 33rpx;
}
.hotel-custom-detail .tip-info .info{
width: 11rpx;
height: 100%;
background: #D0DFFE;
border-radius: 5rpx;
}
.hotel-custom-right>view{
margin-bottom: 20rpx;
}
.hotel-custom-right>view:last-of-type{
margin-bottom: 0;
}

53
pages/list/theatre/index.js
View File

@ -11,7 +11,7 @@ Page({
list:[],
tagList: [], // 父标签6
total:1,
type:1,
type:278,
sort:["","weight","distance","weight","price"],
order:['','desc',"asc","desc","asc"],
lat:"",
@ -52,37 +52,38 @@ Page({
getList:function(){
let list = this.data.list,that = this;
if(list.length>=this.data.total) return;
// 距离排序
if(this.data.type==2 && !this.data.lon){
wx.getLocation({
type: 'gcj02',
success: function (res) {
that.setData({
lat:res.latitude,
lon:res.longitude
})
that.realgetList()
},
fail:function(){
that.realgetList()
}
})
}
else {
this.realgetList()
}
that.realgetList()
// // 距离排序
// if(this.data.type==2 && !this.data.lon){
// wx.getLocation({
// type: 'gcj02',
// success: function (res) {
// that.setData({
// lat:res.latitude,
// lon:res.longitude
// })
// that.realgetList()
// },
// fail:function(){
// that.realgetList()
// }
// })
// }
// else {
// this.realgetList()
// }
},
realgetList:function(){
let list = this.data.list;
commonApi._post("product/get_product_by_tag",{
tag_id:"6",
tag_id: this.data.type,
offset:list.length,
limit:10,
sort:this.data.sort[this.data.type],
order:this.data.order[this.data.type],
lat:this.data.lat,
lon:this.data.lon,
// sort:this.data.sort[this.data.type],
// order:this.data.order[this.data.type],
// lat:this.data.lat,
// lon:this.data.lon,
title:this.data.keywords
}).then(res=>{
res.data.list.map(item=>{
@ -106,7 +107,7 @@ Page({
// 获取子标签
getTags () {
commonApi._post("",{
tag_id:"6",
tag_id:"278",
}).then(res=>{
let resData = res.data.list || []
this.setData({

7
pages/list/theatre/index.wxml
View File

@ -5,7 +5,7 @@
<image class="heaimg" src="https://static.ticket.sz-trip.com/uploads/20241118/5540525af7880d15a3899f56f9000237.png" mode="widthFix"></image>
<view class="sale-types no-scrollbar">
<view class="sale-type{{type==1?' active':''}}" bindtap="changeType" data-type="1">全部</view>
<view class="sale-type{{type==278?' active':''}}" bindtap="changeType" data-type="1">全部</view>
<view class="sale-type{{type==2?' active':''}}" bindtap="changeType" data-type="2">距离最近</view>
<view class="sale-type{{type==3?' active':''}}" bindtap="changeType" data-type="3">销量最高</view>
<view class="sale-type{{type==4?' active':''}}" bindtap="changeType" data-type="4">价格最低</view>
@ -21,10 +21,9 @@
<image src="{{item.headimg}}" mode="aspectFill"></image>
<view class="info">
<view class="textOver2 title">{{item.title}}</view>
<view class="textOver subtitle">{{item.subtitle?item.subtitle:""}}</view>
<view class="textOver subtitle">{{item.supplier_address}}</view>
<view class="textOver subtitle">{{"开放时间"}}</view>
<view class="textOver subtitle">{{"地址"}}</view>
<view class="tags textOver">
<!-- <view class="tag" wx:for="{{item.display_tags}}">{{item}}</view> -->
<view class="price"><text>￥</text><text>{{item.price?item.price/100:0}}</text><text>起</text></view>
</view>
</view>

158
pages/order/show/index.js
View File

@ -8,43 +8,99 @@ Page({
* 页面的初始数据
*/
data: {
times:[],
dateArr: [
{date: '2024-11-19', price: 7000},
{date: '2024-11-20', price: 7000},
{date: '2024-11-21', price: 7000},
],
times:[
{sale_date: "2024-11-19", stock_number: 0, start_time: "07:30", end_time: "08:30"},
{sale_date: "2024-11-19", stock_number: 2, start_time: "07:30", end_time: "08:30"},
{sale_date: "2024-11-19", stock_number: 2, start_time: "07:30", end_time: "08:30"},
{sale_date: "2024-11-19", stock_number: 2, start_time: "07:30", end_time: "08:30"},
{sale_date: "2024-11-19", stock_number: 2, start_time: "07:30", end_time: "08:30"},
{sale_date: "2024-11-19", stock_number: 2, start_time: "07:30", end_time: "08:30"},
],
product:null,
dateindex:-1,
timeindex:-1
timeindex:-1,
sku_id: null,
producNum: 1,
cartTop: 0,
cartImgInfo: null,
cartCount: 0,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let that = this
let product = app.globalData.product,start_date = util.formatDate(new Date());
this.setData({
product:product
})
let end_date = util.formatDate(new Date(new Date(start_date.replace(/-/g,'/')).getTime() + 30 * 24 * 60 * 60 * 1000));
commonApi.user_post("show/get_show_sku_seats_price_by_date",{
sku_id:product.sku[0].id,
commonApi.user_post("product/product_date_price",{
sku_id:1208,
start_date:start_date,
end_date:end_date
}).then(res=>{
let dateindex = -1,timeindex=-1;
for(let i=0;i<res.data.length;i++){
for(let j =0;j<res.data[i].screen.length;j++){
if(res.data[i].screen[j].is_ticket==1 && dateindex==-1 && timeindex==-1){
dateindex = i;
timeindex = j;
break;
}
}
}
this.setData({
times:res.data,
dateindex:dateindex,
timeindex:timeindex
})
// this.setData({
// times:res.data,
// dateindex:dateindex,
// timeindex:timeindex
// })
console.log(res)
// 获取购物车按钮的位置
wx.createSelectorQuery().select('#cart').boundingClientRect(function (res) {
console.log(res)
that.setData({
cartTop: res.top
})
}).exec()
})
this.initDate()
},
getDay: function (date) {
let d = new Date(date.replace(/-/g, '/')).getDay();
let days = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
return days[d];
},
// 初始化日期
initDate () {
let date = this.data.dateArr
date.forEach(v=>{
v.short_date = v.date.split("-").splice(1, 2).join("-")
})
this.setData({dateArr: date})
this.initTime()
},
// 时间处理
initTime () {
let times = this.data.times
times.forEach(v=>{
v.week = this.getDay(v.sale_date)
})
this.setData({times: times})
},
// 选择日期
changeDate:function(e){
let dateindex = e.currentTarget.dataset.date
// todo获取时间
this.setData({
dateindex: dateindex
})
},
selectTime:function(e){
@ -56,14 +112,20 @@ Page({
})
}
},
minus: function () {
if (this.data.producNum == 1) return;
this.setData({
producNum: this.data.producNum - 1
})
},
add: function () {
this.setData({
producNum: this.data.producNum + 1
})
},
next:function(){
let product = app.globalData.product;
product.timeInfo = this.data.times[this.data.dateindex];
product.timeInfo.screen = [this.data.times[this.data.dateindex].screen[this.data.timeindex]];
app.globalData.product = product;
wx.navigateTo({
url: '../showSeat/index',
})
},
/**
* 生命周期函数--监听页面初次渲染完成
@ -76,9 +138,51 @@ Page({
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.getCartNum()
},
// 获取购物车数量
getCartNum () {
commonApi.user_post('cart/get_list', {}).then(res => {
this.setData({
cartCount: res.data.length
})
})
},
// 加入购物车
showCart: function () {
commonApi.user_post('wx/get_user_keep', {
jumpurl: '/pages/info/postProductInfo/index?id=' + this.data.id,
title: this.data.info.title,
type: 'mini'
}).then(res => {
if (res.data.subscribe == 0) {
this.setData({
wxqrcode: res.data.qrcode,
showQrCode: true
})
} else {
if (this.data.info.sku.length == 0) {
wx.showToast({
title: '该产品未设置规格，不能加购',
icon: 'none'
})
return;
}
this.setData({
skuFlag: "cart"
})
let that = this
wx.createSelectorQuery().select('#skuImg').boundingClientRect(function (res) {
console.log(res)
that.setData({
cartImgInfo: 'top:' + res.top + 'px;left:' + res.left + 'px;'
})
}).exec()
}
})
},
/**
* 生命周期函数--监听页面隐藏
*/

59
pages/order/show/index.wxml
View File

@ -1,17 +1,62 @@
<!--pages/order/show/index.wxml-->
<title title="选择场次"></title>
<title title="选择票档"></title>
<view class="order-top" wx:if="{{product}}">
<view class="order-name">{{product.title}}</view>
<view class="order-subtitle">{{product.subtitle}}</view>
</view>
<view class="box">
<view class="order-name box-title">场次</view>
<view wx:for="{{times}}" wx:for-item="date" wx:for-index="dateIndex">
<view wx:for="{{date.screen}}" bindtap="selectTime" data-dateindex="{{dateIndex}}" data-timeindex="{{index}}" class="order-line-item{{item.is_ticket==0?' disable':''}}{{timeindex==index && dateIndex==dateindex?' active':''}}" ><text>{{date.sale_date}}</text><text>{{item.start_time}} ~ {{item.end_time}}</text> <view class="state">{{item.is_ticket==1?'有票':'售罄'}}</view></view>
<view class="box-content">
<view class="box-title">选择日期</view>
<view class="flex-between">
<view class="tag {{dateindex==0?'active':''}}" bindtap="changeDate" data-date="0">今天 {{dateArr[0].short_date}}</view>
<view class="tag {{dateindex==1?'active':''}}" bindtap="changeDate" data-date="1">明天 {{dateArr[1].short_date}}</view>
<view class="tag {{dateindex==2?'active':''}}" bindtap="changeDate" data-date="2">后天 {{dateArr[2].short_date}}</view>
<view class="tag">更多</view>
</view>
</view>
<view class="box-content">
<view class="box-title">场次</view>
<view class="flex-wrap flex-between">
<view wx:for="{{times}}" date-item="{{item}}" class="tag {{dateindex==key?'active':''}} {{item.stock_number<=0?'disabled':''}}"
bindtap="changeTime" data-date="{{key}}">
{{item.sale_date}} {{item.week}} {{item.start_time}}
</view>
</view>
</view>
<view class="box-content">
<view class="box-title">票档</view>
<view class="sku-box">
<view wx:for="{{times}}" date-item="{{item}}" class="tag {{dateindex==key?'active':''}} {{item.stock_number<=0?'disabled':''}}"
bindtap="changeSku" data-date="{{key}}">
{{item.sale_date}} {{item.week}} {{item.start_time}}
</view>
</view>
</view>
<view class="number-box box-content">
<text>数量</text>
<view class="iconfont icon-sami-select" bindtap="minus"></view>
<view class="number">{{producNum}}</view>
<view class="iconfont icon-add-select add" bindtap="add"></view>
</view>
</view>
<view style="height:138rpx"></view>
<view class="fixed-bottom">
<view class="fixed-btn" bindtap="next">下一步</view>
</view>
<view>总价：<text class="bottom-price">￥560.00</text></view>
<view class="btns">
<view class="btn" bindtap="showCart">加入购物车</view>
<view class="btn" bindtap="showOrder" >立即购买</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>

241
pages/order/show/index.wxss
View File

@ -1,92 +1,203 @@
/* pages/order/show/index.wxss */
page {
background: #f6f6f6;
background: white;
}
.order-top {
border-bottom: 1rpx solid #ccc;
padding: 30rpx 47rpx;
}
.order-name {
font-weight: 500;
color: #000;
font-size: 33rpx;
}
.order-subtitle {
margin-top: 20rpx;
font-size: 27rpx;
color: #666;
background: #E6F3F3;
width: 100%;
padding: 26rpx 32rpx;
font-family: PingFang SC;
font-weight: bold;
font-size: 32rpx;
color: #111111;
}
.box {
margin: 30rpx 25rpx;
background: white;
border-radius: 9rpx;
padding-bottom: 30rpx;
padding: 48rpx 26rpx;
}
.box-title {
line-height: 113rpx;
border-bottom: 1rpx solid #ccc;
padding: 0 20rpx;
.box-content{
margin-bottom: 50rpx;
width: 100%;
}
.order-line-item {
margin: 0 20rpx;
display: flex;
align-items: center;
border: 1rpx solid #333;
border-radius: 10rpx;
margin-top: 30rpx;
font-size: 27rpx;
padding: 0 22rpx;
line-height: 70rpx;
box-sizing: border-box;
.box-title{
font-family: PingFang SC;
font-weight: bold;
font-size: 35rpx;
color: #333333;
margin-bottom: 38rpx;
}
.order-line-item text {
margin-right: 15rpx;
.flex-between{
display: flex;
align-items: center;
justify-content: space-between;
}
.order-line-item .state {
width: 78rpx;
line-height: 34rpx;
border: 1rpx solid;
border-radius: 17rpx;
box-sizing: border-box;
text-align: center;
font-size: 24rpx;
color: #D62828;
.flex-wrap{
display: flex;
flex-wrap: wrap;
}
.order-line-item.disable .state {
color: #666;
border-color: #ccc;
.sku-box{
display: flex;
flex-direction: column;
}
.order-line-item.disable {
color: #666666;
.sku-box .tag{
width: fit-content;
}
.order-line-item.active .state {
color: #fff;
.tag{
padding: 0rpx 19rpx;
border: 1px solid #999999;
height: 67rpx;
line-height: 67rpx;
text-align: center;
border-radius: 13rpx;
font-family: PingFang SC;
font-weight: bold;
font-size: 27rpx;
color: #333333;
margin-bottom: 17rpx;
}
.order-line-item.active {
background: #0B898E;
border-color: #0B898E;
color: #fff;
.tag.active{
background: #0B898E;
border: none;
color: #FFFFFF;
}
.tag.disabled{
background: #CCCCCC;
border: none;
color: #FFFFFF;
}
.number-box {
display: flex;
align-items: center;
justify-content: space-between;
}
.number-box text {
flex: 1;
font-size: 35rpx;
color: #333;
font-weight: bold;
}
.number-box view {
border: 1rpx solid #999999;
border-radius: 10rpx;
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: 80rpx;
margin: 0 10rpx;
border: none;
}
.number-box .add{
background: #0B898E;
border-radius: 10rpx;
border: none;
color: white;
}
.fixed-bottom {
height: 138rpx;
background: #FFFFFF;
box-shadow: 0px 0px 16rpx 0px rgba(6, 0, 1, 0.1);
display: flex;
align-items: center;
justify-content: center;
justify-content: space-between;
position: fixed;
left: 0;
right: 0;
bottom: 0;
padding:0 26rpx;
color: #333333;
font-size: 31rpx;
font-weight: bold;
}
.fixed-btn {
width: 657rpx;
line-height: 78rpx;
background: #D62828;
border-radius: 39rpx;
text-align: center;
color: #fff;
font-size: 33rpx;
font-weight: 500;
}
/* 购物车 */
.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;
}
.btns {
font-size: 32rpx;
font-weight: bold;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border-radius: 39rpx;
border: 1px solid #D62828;
color: #D62828;
}
.btns .btn {
width: 200rpx;
height: 73rpx;
line-height: 73rpx;
background: #D62828;
}
.btns .btn:nth-child(1) {
border-radius: 39rpx 0 0 39rpx;
background: white;
}
.btns .btn:nth-child(2) {
border-radius: 0 39rpx 39rpx 0;
color: white;
}
.btns .btn.disable {
background: #ccc;
}
.bottom-price{
color: #D62828;
font-size: 36rpx;
}

4
utils/https.js
View File

@ -1,8 +1,8 @@
var app = getApp();
import util from "../utils/util"
// import userApi from "../utils/https/user.js";
// const baseUrl = "https://test.api.cloud.sz-trip.com/api/";
let baseUrl = "https://api.cloud.sz-trip.com/api/";
const baseUrl = "https://test.api.cloud.sz-trip.com/api/";
// let baseUrl = "https://api.cloud.sz-trip.com/api/";
const env = wx.getAccountInfoSync().miniProgram.envVersion
if (env == 'develop1') {
baseUrl = "https://test.api.cloud.sz-trip.com/api/"

Write Preview
Loading…
Cancel
Save