<template> <view style="display: flex;flex-direction: column;"> <view class="top"> <NavBar ref="nav" navTitle="详情" :showIcon="true" :start-change-height="page.startHeight" :end-change-height="page.endHeight"> </NavBar> <view style="display: flex;flex-direction: column;margin-top: 25vw; margin-left: 5vw;"> <view style="font-size: 17px;color: #fff;height: 8vw;line-height: 8vw;margin-top: 5vw;"> {{data.state}} </view> <view style="font-size: 12px;color: white;line-height: 7vw;height: 7vw;color: #fff;box-sizing: border-box;"> 窖号:{{data.serialNumber}} </view> <view style="font-size: 12px;color: white;line-height: 7vw;height: 7vw;color: #fff;"> {{data.time}} </view> </view> </view> <view style="display: flex;flex-direction: row;justify-content: center; background-color: #fff;height: 25vw; border-top-left-radius: 25px;border-top-right-radius: 25px;margin-top: -9.06vw;"> <image src="https://supervise.yxtsoft.com/lpk/image/detail_affeection.png" mode="aspectFit" style="margin-left: 20px;margin-right: 20px; width: 80vw;height: 25vw;"></image> <view style="width: 55%; margin-left: 20vw; display: flex;flex-direction: row;margin-top: 9vw;position: absolute;z-index: 10;align-items: center; justify-content: space-between;"> <text style="color: #fff;font-size: 18px;font-weight: 600;">{{data.pname}}</text> <text style="background: #F1F2F3 ; border-radius: 25px;color: #ccc;padding: 3px 10px;">转赠亲友</text> </view> </view> <loading-state ref="pageView" @request="request"> <view style="background-color: #fff;padding: 10px 15px;"> <view style="display: flex;flex-direction: row;align-items: center;"> <view style="background: #FF9D33; border-radius: 50%;width: 12px;height: 12px;"></view> <view style="background: #FFDAB2; border-radius: 50%;width: 12px;height: 12px;"></view> <text style="margin-left: 8px;font-size: 14px;color: #333;">商品明细</text> </view> </view> <view v-for="(item,index) in data.goodsVos" :key="index" @click="itemClick(item.goodsSid)" style="display: flex;flex-direction: row;background-color: #fff;padding-left: 10px;padding-right: 10px;"> <view style="display: flex;flex-direction: row;background-color: #fff;padding: 10px 15px; border-bottom: 1px #F1F2F3 solid; width: 100%;"> <image :src="item.pic" style="width: 60px;height: 60px;flex-shrink: 0;"></image> <view style="margin-left: 10px;margin-right: 10px;flex: 1;"> <text class="text" style="font-weight: 500;">{{item.goods}} </text> <view style="font-size: 12px;color: #666666;margin-top: 5px;">{{item.remarks}}</view> <view style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 5px;"> <text style="font-size: 12px;color: #666666;margin-right: 10px;">总数:{{item.num}}{{item.unitName}} </text> <view style="font-size: 12px;color: #666666;">可预约:{{item.lnum}}{{item.unitName}}</view> </view> </view> </view> </view> <view style="background-color: #fff;margin-top: 10px;padding: 10px 15px;"> <view style="display: flex;flex-direction: row;align-items: center;"> <view style="background: #FF9D33; border-radius: 50%;width: 12px;height: 12px;"></view> <view style="background: #FFDAB2; border-radius: 50%;width: 12px;height: 12px;"></view> <text style="margin-left: 8px;font-size: 14px;color: #333;">预约记录</text> </view> </view> <view style="margin-bottom: 10px;"> <view v-for="(item,index) in data.orderCardVoList" :key="index" style="display: flex;flex-direction: row;background-color: #fff;padding-left: 10px;padding-right: 10px;"> <view style="display: flex;flex-direction: column;background-color: #fff; border-bottom: 1px #F1F2F3 solid; width: 100%;padding-left: 20px;padding-bottom: 10px;"> <view style="display: flex;flex-direction: row;align-items: center;margin-top: 10px;"> <image src="https://supervise.yxtsoft.com/lpk/image/date.png" style="width: 20px;height: 20px;"> </image> <text style="margin-left: 5px;font-size: 12px; color: #999;">提货时间:{{item.reserveDate}}</text> </view> <view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> <image src="https://supervise.yxtsoft.com/lpk/image/location.png" style="width: 20px;height: 20px;"> </image> <text style="margin-left: 5px;font-size: 12px; color: #999;">提货地点:{{item.store}}</text> </view> <view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> <image src="https://supervise.yxtsoft.com/lpk/image/user2.png" mode="aspectFill" style="width: 20px;height: 20px;"> </image> <text style="margin-left: 5px;font-size: 12px; color: #999;">提 货 人:{{item.userName}}</text> </view> <view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> <image src="https://supervise.yxtsoft.com/lpk/image/phone2.png" mode="aspectFill" style="width: 20px;height: 20px;"> </image> <text style="margin-left: 5px;font-size: 12px; color: #999;">联系电话:{{item.userPhone}}</text> </view> <view style=" display: flex;flex-direction: row;align-items: center;margin-top: 8px;"> <text style="color: #999; font-size: 12px;">- {{item.goods}}</text> </view> </view> </view> </view> <view style="background-color: #fff;margin-top: 10px;padding: 10px 15px;"> <view style="display: flex;flex-direction: row;align-items: center;"> <view style="background: #FF9D33; border-radius: 50%;width: 12px;height: 12px;"></view> <view style="background: #FFDAB2; border-radius: 50%;width: 12px;height: 12px;"></view> <text style="margin-left: 8px;font-size: 14px;color: #333;">转赠信息</text> </view> </view> <view style="margin-bottom: 50px;"> <view v-for="(item,index) in data.empCardGifts" :key="index" style="display: flex;flex-direction: row;background-color: #fff;padding-left: 10px;padding-right: 10px;"> <view style="display: flex;flex-direction: row;background-color: #fff; border-bottom: 1px #F1F2F3 solid; width: 100%;padding-left: 10px; padding-right: 10px; padding-bottom: 10px;"> <view style="display: flex;flex-direction: row;width: 100%;margin-top: 15px;"> <image src="https://supervise.yxtsoft.com/lpk/image/home_affection.png" style="width: 50px;height: 50px;margin-right: 10px;flex-shrink: 0;"></image> <view style="display: flex;flex-direction: column;width: 100%;"> <text style="font-size: 12px; color: #333;margin-top: 5px;">亲情窖编码:{{item.code}}</text> <text style="font-size: 12px; color: #333;margin-top: 5px;">提货密码:{{item.codeKey}}</text> <text style="font-size: 12px; color: #333;margin-top: 5px;">备注说明:{{item.remarks}}</text> <view style="display: flex;flex-direction: row;margin-top: 5px;align-items: center;justify-content: space-between;width: 100%;"> <text style="flex: 1;font-size: 12px; color: #A5A5A5; margin-right: 10px;">- {{item.goods}}</text> <button v-show="item.isShare=='1'" class='sharebtn' :data-info="item" open-type="share">分享窖</button> <button v-show="item.isShare=='2'" class='sharebtn2' :data-info="item" open-type="share">已分享</button> <button v-show="item.isShare=='3'" class='sharebtn3'>转赠成功</button> </view> </view> </view> </view> </view> </view> <view style="height: 50px;"></view> </loading-state> </view> </template> <script> export default { data() { return { page: { sid: '', startHeight: 0, endHeight: 0 }, data: { time: "", name: "", pname: "", state: "", notRese: false, showBtn: false, showRecord: false, goodsVos: [], value: "", userName: "", userPhone: "", } } }, onLoad(options) { this.page.sid = options.sid this.request() this.$bus.$on('order', msg => { this.$nextTick(() => { this.$refs.pageView.setLoadState(0) }) this.request(); }) let info = uni.getSystemInfoSync(); this.page.startHeight = info.windowWidth * 0.6 this.page.endHeight = info.windowWidth * 0.8 }, onUnload() { uni.$off('order'); }, onPageScroll(res) { // 渐变 this.$refs.nav.defaultColorBgAlpha(res) }, methods: { request() { let _this = this _this.$api.gifcardDetail(this.page.sid).then((resp) => { _this.data = resp _this.$nextTick(() => { _this.$refs.pageView.setLoadState(2) }) }).catch(e => { _this.$nextTick(() => { _this.$refs.pageView.setLoadState(1) }) }) }, itemClick(goodsSid) { uni.navigateTo({ url: '/pages/good/goodsDetail?sid=' + goodsSid }) }, onShareAppMessage: function(res) { console.log("res", res) console.log("data", res.target.dataset) var data = res.target.dataset.info this.shareCard(data.sid) // ① let shareData = JSON.stringify({ params: { code: data.code, codeKey: data.codeKey, customerSid: '' }, functionName: 'bindCard', url: '/pages/detail/detail_affeection?sid=' + data.sid // url:'/pages/bind/bind_pickUpCard?code=' + + &codeKey=' + data.codeKey, // FunctionName:'share! }) // 转码传输 let value = encodeURIComponent(shareData) return { title: '汇融惠享-云菜窖', // ② path: '/pages/login/login?data=' + value, imageUrl: 'https://supervise.yxtsoft.com/lpk/image/shareAffeection.png', //自定义图片路径,显示图片长宽比是 5:4。 success: function(res) { console.log('aaaa', "分享成功") }, fail: function(res) { // 转发失败 console.log('aaaa', "用户点击了取消") } } }, shareCard(sid) { let _this = this _this.$api.shareEmpCard(sid).then((resp) => { var item = _this.data.empCardGiftVos.find(item => item.sid === sid) console.log("item", item); item.share = '2' }).catch(e => {}) } } } </script> <style> .canvas-code { width: 39vw !important; height: 39vw !important; } .sharebtn { background: #FF4727; font-size: 12px; color: #fff; width: 30vw; border-radius: 20px; } .sharebtn::after { border: none; } .sharebtn2 { background: #FF7165; width: 30vw; font-size: 12px; color: #fff; border-radius: 20px; } .sharebtn2::after { border: none; } .sharebtn3 { background: #CFCFCF; width: 30vw; font-size: 12px; color: #fff; border-radius: 20px; } .sharebtn3::after { border: none; } .top { width: 100vw; /* height: 126.66vw; */ height: 65vw; /* 加载背景图 */ background-image: url(https://supervise.yxtsoft.com/lpk/image/detail_bj4.png); /* 让背景图基于容器大小伸缩 */ background-size: 100% 100%; } .text { white-space: normal; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } uni-page-body, page { background: #F1F2F3; } .btn { border: 1px solid; padding-left: 30rpx; padding-right: 30rpx; padding-top: 12rpx; padding-bottom: 12rpx; border-radius: 50rpx; height: 15px; margin-left: 25rpx; font-size: 26rpx; } /* 弹窗样式 */ .model { position: absolute; width: 100%; height: 100%; background: #000; z-index: 999; opacity: 0.5; top: 0; left: 0; } .modalDlg { /* 设置超出滚动 */ overflow: auto; width: 90%; position: fixed; top: 50vw; left: 0; right: 0; bottom: 0; z-index: 9999; margin: 0 auto; padding: 35rpx; background-color: #fff; border-radius: 20rpx; display: flex; flex-direction: column; } .windowRow { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding-bottom: 15rpx; width: 100%; } .userTitle { font-size: 42rpx; } .back { text-align: center; color: #f0a500; font-size: 30rpx; } .wishName { width: 100%; justify-content: center; flex-direction: row; display: flex; margin: 40rpx 0rpx; } .wish_put { width: 100%; border: #ededef 1rpx solid; background-color: #f6f7fb; border-radius: 12rpx; padding: 30rpx 20rpx; margin: 20rpx 0rpx; } .holder_cls { color: #909399; } .wishbnt { background-color: #fec600; text-align: center; border-radius: 50rpx; padding: 25rpx; color: white; } /*弹窗样式结束*/ /* 下面的姓名样式,不要也没什么影响 */ .jiantou { width: 35rpx; height: 35rpx; margin-left: 10rpx; } .fenge { margin-bottom: 30rpx; } .xian { border-bottom: #e5e5e5 1rpx solid; } .yellow { color: #f0a500; font-weight: 700; } .box { background-color: white; padding: 0rpx 25rpx; display: flex; flex-direction: column; } .row { height: 120rpx; display: flex; justify-content: space-between; align-items: center; } .you { height: 100%; display: flex; justify-content: space-between; align-items: center; } .zhushi { font-size: 28rpx; color: #808080; } </style>