剧场演出

app.wxss

@@ -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%);
 } */

pages/info/showInfo/index.js

@@ -1,5 +1,9 @@
-// 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({
 
@@ -7,28 +11,101 @@ Page({
      * 页面的初始数据
      */
     data: {
+        autoPlay: true,
+        fixed: false,
+        type: 1,
+        top: 0,
+        isLike: 0,
+        commentTotal: 0,
+        comment: [],
         info: null,
-    retailId:''
+        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.user_post('product/get_product_detail',{
+        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:res.data
+                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(() => {
@@ -38,31 +115,526 @@ Page({
                     title: this.data.info.title,
                     drive: "mini",
                     source_id: this.data.info.id,
-          url:"/pages/info/showInfo/index?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
                 })
             }
-      else {
-        this.BroswerRecord();
+        })
+    },
+    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
+                })
             }
-    },500)
+            // 滚动时判断滚动到哪个部分了
+            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()
+
     },
-  order:function(){
+    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: '该演出暂时无法预约',
+                        title: '该产品未设置规格，不能加购',
                         icon: 'none'
                     })
                     return;
                 }
-    app.globalData.retailId = this.data.retailId;
+                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',
+                        })
+                    }
+
+
+                    
+                } else {
+                    let tag_id = this.data.info.tag_id,type = ''
+                    if (tag_id.includes(20) || tag_id.includes(19)) {  //文创
+                      type = '1'
+                    }else if (tag_id.includes(5)) { //非遗
+                      type = '2'
+                    }else {
+                      type = ''
+                    }
+                    commonApi.user_post("cart/add_sku", {
+                        sku_id: this.data.info.sku[this.data.skuIndex].id,
+                        num: this.data.producNum,
+                        type:type
+                    }).then(res => {
+                        if (res.code == 1) {
+                            commonApi.user_post('cart/get_list', {}).then(res => {
+                                this.setData({
+                                    cartCount: res.data.length
+                                })
+                            })
+                            // 加动效
+                            this.setData({
+                                skuFlag: null,
+                                aniSkuIndex: this.data.skuIndex,
+                                cartImgInfo: null
+                            })
+                            setTimeout(() => {
+                                this.setData({
+                                    aniSkuIndex: -1
+                                })
+                                wx.showModal({
+                                    title: "提示",
+                                    content: "去购物车结算？",
+                                    success: function (res) {
+                                        if (res.confirm) {
+                                            wx.navigateTo({
+                                                url: '/pages/user/cartlist/list',
+                                            })
+                                        }
+                                    }
+                                })
+                            }, 650)
+                        }
+                    })
+                }
+            }
+        })
+
+    },
+    // 分享
+    share: function () {
+        if (!wx.getStorageSync("jstrip_token")) {
+            commonApi.user_post("user/getMyInfo", {}).then(res => {
+
+            })
+            return;
+        }
+        if (!this.data.shareImg) {
+            wx.showToast({
+                title: '图片生成中，稍后再试',
+                icon: 'none'
+            })
+            return;
+        }
+        this.setData({
+            showShareFlag: !this.data.showShareFlag
+        })
+    },
+    // 保存
+    save() {
+        let url = this.data.shareImg,
+            that = this;
+        wx.authorize({
+            /* 这个就是保存相册的 */
+            scope: 'scope.writePhotosAlbum',
+            success() {
+                wx.saveImageToPhotosAlbum({
+                    filePath: url,
+                    success(res) {
+                        wx.showToast({
+                            title: '保存成功',
+                            icon: "success"
+                        })
+                        that.setData({
+                            showShareFlag: !this.data.showShareFlag
+                        })
+                    },
+                    fail(res) {
+                        wx.showToast({
+                            title: '保存失败',
+                            icon: 'none'
+                        })
+                    }
+                })
+            },
+            complete(res) {
+                console.log(res);
+                /* 这里判断一下如果没有授权重新打开设置选项 */
+                wx.getSetting({
+                    success(res) {
+                        if (!res.authSetting['scope.writePhotosAlbum']) {
+                            /* 打开设置的方法 */
+                            // opensit();
+                            wx.showToast({
+                                title: '请打开权限后再试',
+                                icon: 'none'
+                            })
+                        }
+                    }
+                });
+            }
+        });
+
+    },
+
+    // 绘制海报
+    drawImg: function () {
+        var that = this,
+            userinfo = wx.getStorageSync('jstrip_userInfo');
+        if (!userinfo) {
+            // 去登录
+            return false;
+        }
+        const ctx = wx.createCanvasContext('imageCanvas');
+        // const device = wx.getSystemInfoSync();
+        // const ratio = device.screenWidth / 750;
+
+        // 先获取到图片信息
+        let promise2 = new Promise(function (resolve, reject) {
+            wx.getImageInfo({
+                src: that.data.info.headimg,
+                success: function (res) {
+                    resolve(res);
+                },
+                fail: function (res) {
+                    reject(res);
+                }
+            })
+        })
+        let promise3 = new Promise(function (resolve, reject) {
+            let userid = wx.getStorageSync('jstrip_userid')
+            new QRCode('myQrcode', {
+                text: 'https://m.cloud.sz-trip.com/MailMerchandiseDetail?id=' + that.data.info.id + '&sharedUserId=' + userid + '&channel=-1',
+                width: 500,
+                height: 500,
+                padding: 12, // 生成二维码四周自动留边宽度，不传入默认为0
+                correctLevel: QRCode.CorrectLevel.H, // 二维码可辨识度
+                callback: (res) => {
+                    resolve(res);
+                }
+            })
+        })
+        //成功得到图片信息后，开始绘图
+        Promise.all([promise2, promise3]).then(imgs => {
+            ctx.save();
+            ctx.beginPath(); //开始绘制
+            that.handleBorderRect(ctx, 0, 0, 551 * ratio, 407 * ratio, 25 * ratio, '#ccc')
+            ctx.clip(); //画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
+            ctx.drawImage(imgs[0].path, 0, 0, 551 * ratio, 407 * ratio);
+            ctx.restore();
+            ctx.save();
+            that.handleBorderRect2(ctx, 0, 407 * ratio, 551 * ratio, 236 * ratio, 25 * ratio, '#fff')
+            ctx.restore();
+            // 绘制二维码
+            ctx.drawImage(imgs[1].path, 373 * ratio, 495 * ratio, 137 * ratio, 137 * ratio);
+            // 开始文字绘制
+            ctx.setFillStyle("#000");
+            ctx.setFontSize(30 * ratio); //字大小
+            ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+            that.drawText(ctx, that.data.info.title, 25 * ratio, 450 * ratio, 480 * ratio, ratio);
+            // 售价
+            ctx.setFillStyle("#D62828");
+            ctx.setFontSize(40 * ratio); //字大小
+            ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+            let price = "￥" + (that.data.info.price / 100);
+            let width = ctx.measureText(price).width;
+            ctx.fillText(price, 25 * ratio, 620 * ratio);
+            // 副标题
+            ctx.setFillStyle("#999999");
+            ctx.setFontSize(28 * ratio); //字大小
+            ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+            let subtitle = that.data.info.subtitle;
+            if (that.data.info.subtitle.length > 10) {
+                subtitle = that.data.info.subtitle.substr(0, 10) + '...'
+            }
+            ctx.fillText(subtitle, 25 * ratio, 540 * ratio);
+            // ctx.draw();
+            // 划线价
+            ctx.setFillStyle("#999999");
+            ctx.setFontSize(32 * ratio); //字大小
+            ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+            let market_price = "￥" + (that.data.info.market_price / 100)
+            ctx.fillText(market_price, 40 * ratio + width, 620 * ratio);
+            let market_price_width = ctx.measureText(market_price).width;
+            // 划线
+            ctx.beginPath()
+            ctx.setLineWidth(1)
+            ctx.moveTo(40 * ratio + width, 608 * ratio)
+            ctx.lineTo(45 * ratio + width + market_price_width, 608 * ratio)
+            ctx.stroke();
+            // 长按识别二维码
+            // ctx.setFillStyle("#666");
+            // ctx.setFontSize(22 * ratio); //字大小
+            // ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+            // ctx.fillText("长按识别二维码", 404*ratio, 710*ratio);
+            // 长按图片转发或保存
+            // ctx.setFillStyle("#000");
+            // ctx.setFontSize(24 * ratio); //字大小
+            // ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
+            // ctx.fillText("长按图片保存到本地",(592*ratio - ctx.measureText("长按图片保存到本地").width)/2, 740*ratio);
+            ctx.draw();
+            // 转为图片
+            setTimeout(() => {
+                wx.canvasToTempFilePath({
+                    x: 0,
+                    y: 0,
+                    canvasId: 'imageCanvas',
+                    success: function (res) {
+                        that.setData({
+                            shareImg: res.tempFilePath
+                        })
+                    },
+                    fail(err) {
+                        console.log('agdgjgdajhg', err)
+                    }
+                })
+            }, 500)
+            return false;
+        }).catch(err => {
+            console.log("this err", err)
+        })
+    },
+    // 圆角矩形
+    handleBorderRect(ctx, x, y, w, h, r, color) {
+        ctx.beginPath();
+        ctx.moveTo(x + w, y + h);
+        ctx.lineTo(x, y + h)
+        // 左上角
+        ctx.arc(x + r, y + r, r, Math.PI, 1.5 * Math.PI);
+        ctx.moveTo(x + r, y);
+        ctx.lineTo(x + w - r, y);
+        ctx.lineTo(x + w, y + r);
+        // 右上角
+        ctx.arc(x + w - r, y + r, r, 1.5 * Math.PI, 2 * Math.PI);
+        ctx.lineTo(x + w, y + h);
+        ctx.lineTo(x + w - r, y + h);
+        ctx.fillStyle = color;
+        ctx.fill();
+        ctx.closePath();
+    },
+    handleBorderRect2(ctx, x, y, w, h, r, color) {
+        ctx.beginPath();
+        ctx.moveTo(x, y);
+        ctx.lineTo(x + w, y)
+        // 右下角
+        ctx.arc(x + w - r, y + h - r, r, 0, 0.5 * Math.PI);
+        ctx.lineTo(x + r, y + h);
+        ctx.lineTo(x, y + h - r);
+        // 左下角
+        ctx.arc(x + r, y + h - r, r, 0.5 * Math.PI, Math.PI);
+        ctx.lineTo(x, y);
+        ctx.lineTo(x, y);
+        ctx.fillStyle = color;
+        ctx.fill();
+        ctx.closePath();
+    },
+    // 绘制两行文字
+    drawText: function (ctx, str, x, y, canvasWidth, ratio) {
+        let row = [],
+            temp = "",
+            chr = str.split("");
+        for (var a = 0; a < chr.length; a++) {
+            if (ctx.measureText(temp).width < canvasWidth) {
+                temp += chr[a];
+            } else {
+                a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
+                row.push(temp);
+                temp = "";
+            }
+        }
+        row.push(temp);
+
+        //如果数组长度大于2 则截取前两个
+        if (row.length > 2) {
+            var rowCut = row.slice(0, 2);
+            var rowPart = rowCut[1];
+            var test = "";
+            var empty = [];
+            for (var a = 0; a < rowPart.length; a++) {
+                if (ctx.measureText(test).width < canvasWidth - 30 * ratio) {
+                    test += rowPart[a];
+                } else {
+                    break;
+                }
+            }
+            empty.push(test);
+            var group = empty[0] + "..." //这里只显示两行，超出的用...表示
+            rowCut.splice(1, 1, group);
+            row = rowCut;
+        }
+        for (var b = 0; b < row.length; b++) {
+            ctx.fillText(row[b], x, y + b * 40 * ratio, canvasWidth);
+        }
+    },
+    gotoDetail: function (e) {
+        let item = e.currentTarget.dataset.item;
+        if (item.type == 'travels') {
+            // 游记做特殊处理 其他都按照原来的来
+            wx.navigateTo({
+                url: '/pages/info/strategyInfo/index?id=' + item.s_id,
+            })
+        } else {
+            util.gotoDetail(item);
+        }
+    },
+
+    gotolocation: function () {
+        let info = this.data.info;
+        wx.openLocation({
+          latitude: Number(info.scene_lat),
+          longitude: Number(info.scene_lon),
+          name:info.scene_name,
+            address:info.scene_address
+        })
+    },
+
+    // 演出详情展开收起
+    changeShowDetail: function (e) {
+        let showDetail = e.currentTarget.dataset.flag;
+        this.setData({showDetail: showDetail})
+    },
 
     /**
      * 生命周期函数--监听页面初次渲染完成
@@ -75,7 +647,29 @@ Page({
      * 生命周期函数--监听页面显示
      */
     onShow: function () {
-
+        app.globalData.postProduct = []
+        if (!wx.getStorageSync('jstrip_token')) {
+            return;
+        }
+        if (this.data.info && this.data.info.id) {
+            commonApi.user_post("product/is_product_collection", {
+                product_id: this.data.info.id
+            }).then(res => {
+                this.setData({
+                    isLike: res.data
+                })
+                this.drawImg()
+            })
+            commonApi.user_post('cart/get_list', {}).then(res => {
+                this.setData({
+                    cartCount: res.data.length
+                })
+            })
+        } else {
+            setTimeout(() => {
+                this.onShow()
+            }, 200)
+        }
     },
 
     /**

pages/info/showInfo/index.json

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

pages/info/showInfo/index.wxml

@@ -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 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>

pages/info/showInfo/index.wxss

@@ -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;
+}
+.product-base-info .headImg{
+    width: 187rpx;
+    height: 240rpx;
+    background: #D1D7CB;
+    border-radius: 13rpx;
+    margin-right: 20rpx;
+    flex-shrink: 0;
 }
-.top-box .title {
+
+.product-base-info .title {
+font-family: PingFang SC;
+font-weight: bold;
 font-size: 32rpx;
-  color: #000;
+color: #111111;
+}
+
+.product-base-info .subtitle {
+    margin-top: 20rpx;
     font-weight: 500;
-  margin-bottom: 10rpx;
+    font-size: 27rpx;
+    color: #888888;
 }
-.top-box .tags {
+.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;
+  align-items: center;
+  height: 50rpx;
+  overflow-y: hidden;
+  overflow-x: auto;
+}
+
+.tags-box .tag {
+    font-weight: 500;
+    font-size: 24rpx;
     color: #0B898E;
-  font-size: 20rpx;
-  margin-bottom: 20rpx;
+    padding: 7rpx 16rpx;
+    background: #E6F3F3;
+    border-radius: 19rpx;
+  margin-right: 13rpx;
 }
-.top-box .tag {
-  margin-right: 20rpx;
-  padding: 0 15rpx;
-  line-height: 30rpx;
-  border-radius: 16rpx;
-  border: 1rpx solid;
+
+.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;
 }
-.top-box .time {
-  font-size: 27rpx;
-  color: #333;
-  padding-bottom: 20rpx;
-  border-bottom: 1rpx solid #ccc;
+
+.bottom-price {
+    flex: 1;
+    height: 1rpx;
+  color: #E52910;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
 }
-.show-location {
-  margin: 20rpx 0;
-  font-size: 28rpx;
-  color: #666;
+
+.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: 35rpx;
+    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;
   }
-.detail {
-  padding: 0 27rpx;
+  
+  .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;
+}
+
+.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;
+}
+

pages/list/theatre/index.js

@@ -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()
-    }
+    // // 距离排序
+    // 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({

pages/list/theatre/index.wxml

@@ -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>

pages/order/show/index.js

@@ -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({
       })
     }
   },
-  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',
+
+  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(){
+    
   },
   /**
    * 生命周期函数--监听页面初次渲染完成
@@ -76,7 +138,49 @@ 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()
+            }
+        })
     },
 
   /**

pages/order/show/index.wxml

@@ -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>总价：<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>

pages/order/show/index.wxss

@@ -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-content{
+    margin-bottom: 50rpx;
+    width: 100%;
 }
+
 .box-title{
-  line-height: 113rpx;
-  border-bottom: 1rpx solid #ccc;
-  padding: 0 20rpx;
+    font-family: PingFang SC;
+    font-weight: bold;
+    font-size: 35rpx;
+    color: #333333;
+    margin-bottom: 38rpx;
 }
-.order-line-item {
-  margin: 0 20rpx;
+.flex-between{
     display: flex;
     align-items: center;
-  border: 1rpx solid #333;
-  border-radius: 10rpx;
-  margin-top: 30rpx;
+    justify-content: space-between;
+}
+.flex-wrap{
+    display: flex;
+    flex-wrap: wrap;
+}
+.sku-box{
+    display: flex;
+    flex-direction: column;
+}
+.sku-box .tag{
+    width: fit-content;
+}
+.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;
-  padding: 0 22rpx;
-  line-height: 70rpx;
-  box-sizing: border-box;
+    color: #333333;
+    margin-bottom: 17rpx;
 }
-.order-line-item text {
-  margin-right: 15rpx;
+
+.tag.active{
+    background: #0B898E;
+    border: none;
+    color: #FFFFFF;
 }
-.order-line-item .state {
-  width: 78rpx;
-  line-height: 34rpx;
-  border: 1rpx solid;
-  border-radius: 17rpx;
-  box-sizing: border-box;
+
+.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;
-  font-size: 24rpx;
-  color: #D62828;
+    width: 67rpx;
+    line-height: 67rpx;
+    font-size: 33rpx;
+    color: #000;
   }
-.order-line-item.disable .state {
-  color: #666;
+  
+  .number-box view.disable {
     border-color: #ccc;
+    color: #999;
   }
-.order-line-item.disable {
-  color: #666666;
-}
-.order-line-item.active .state {
-  color: #fff;
+  
+  .number-box view.number {
+    width: 80rpx;
+    margin: 0 10rpx;
+    border: none;
   }
-.order-line-item.active {
+  .number-box .add{
     background: #0B898E;
-  border-color: #0B898E;
-  color: #fff;
+    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;
+
+
+/* 购物车 */
+.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;
-  color: #fff;
-  font-size: 33rpx;
-  font-weight: 500;
+    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;
   }

utils/https.js

@@ -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/"