<template> <view class="content"> <view class="container"> <view class="faimg"> <view class="box-img"> <image src="../../static/new/top_.png" mode="aspectFit"></image> </view> </view> <view class="hbbox"> <view class="h-box"> <view class="or-box"> <image src="../../static/new/fxrwm.png" mode=""></image> <view class="min-size">分享二维码</view> </view> <view class="or-box" @click="goList()"> <image src="../../static/new/jljl.png" mode=""></image> <view class="min-size">奖励记录</view> </view> </view> <view class="or-aniu"> 立即分享 </view> </view> <view class="h_bs"> <view class="title_">推荐会员消费有礼</view> <view class="d-s" @click="goDetails()"> <view class="hui-size">详情</view> <u-icon name="arrow-right" color="#999999" size="12"></u-icon> </view> </view> <view class="si_"> <view class="">赠送优惠券</view> <view class="">50元优惠券</view> </view> <view class="h_bs"> <view class="title_">会员卡详情</view> </view> <view class="backf"> <view class="n_hang"> <view class="">特权说明</view> <view class="">加油立享优惠</view> </view> <view class="n_hang"> <view class="">有效期</view> <view class="">长期有效</view> </view> <view class="n_hang"> <view class="">使用须知</view> <view class="">仅限个人使用</view> </view> </view> <view class="si_t"> <view style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; "> <view class="title_">适用门店</view> <view class="d-s" style=" color: #FF2828; margin: 0px; "> <image src="../../static/icon/reddh.png" style="width: 14px; height: 14px; "></image> 导航 </view> </view> <view class="">中建锦绣广场二期站</view> <view class="">山东省济南市槐荫区 | 3.0km</view> </view> <!-- 顶部区域 --> <u-overlay :show="show" @click="show = false"> <view class="warp"> <view class="warp-cent" @tap.stop> <view class="title_or">扫码领会员</view> <view class="d-s"> <view class="touxiang"> <image src="../../static/logo.png" mode=""></image> </view> <view class=""> <view class="tiitle_">百业兴加油站</view> <view class="size_">油站会员卡</view> </view> </view> <view style="width: 100%;display: flex;justify-content: center; "> <w-qrcode :options="options"></w-qrcode> </view> </view> <view class="warp-bottom" @tap.stop> <view class="bott_box"> <view class=""></view> <view class="">选择方式</view> <view class="" @click="show = false"> <u-icon name="close" size="16"></u-icon> </view> </view> <view class="bott-box"> <view class=""> <view class=""> <image src="../../static/my/fztp.png" style="width: 40px; height: 40px; "></image> </view> <view class=""> 保存图片 </view> </view> <view class=""> <view class=""> <image src="../../static/my/fzlj.png" style="width: 40px; height: 40px; "></image> </view> <view class=""> 复制链接 </view> </view> </view> </view> </view> </u-overlay> </view> </view> </template> <script> import wx from 'weixin-js-sdk' // 引入微信js-sdk import request from "../../utils/request"; export default { data() { return { query: { storeId: '' }, allAmount: 0.0, activeRecommendRecordsList: [], title: '', userId: '', storeId: '', show: true, options: { code: 'https://oilapi.youkerr.com/oily?storeId=' + uni.getStorageSync('storeId') + '&userId=' + uni .getStorageSync('userId') + '&type=yaoqingyouli', // code: 'https://www.tuofeng.cc/oily?storeId=' + uni.getStorageSync('storeId') + ' &userId=' + uni // .getStorageSync('userId'), // 生成二维码的值 size: 400, // 460代表生成的二维码的宽高均为460rpx }, } }, onLoad() { // let codes = 'https://oilapi.youkerr.com/oily?storeId=' + uni.getStorageSync('storeId') + // '&userId=' + uni.getStorageSync('userId') + '&type=yaoqingyouli' // console.log(codes); // this.query.storeId = uni.getStorageSync("storeId"); }, onShareAppMessage(res) { if (res.from === 'button') { // 来自页面内分享按钮 console.log(res.target) } return { title: this.titles, path: '/pages/index/index' } }, onShareTimeline(res) { return { title: this.titles, path: '/pages/index/index' } }, components: { }, onShare() { wx.showShareMenu({ withShareTicket: true, success: function() { console.log('成功开启分享菜单') }, fail: function(res) { console.log('开启分享菜单失败', res) } }) wx.onShareAppMessage(function() { return { title: '来个油惠', path: '/pages/index/index', imageUrl: 'https://example.com/share.jpg', success: function(res) { console.log('分享成功', res) }, fail: function(res) { console.log('分享失败', res) } } }) }, onShareAppMessage(res) { if (res.from === 'button') { // 来自页面内分享按钮 console.log(res.target) } return { title: '来个油惠', path: '/pages/index/index?storeId=' + uni.getStorageSync('storeId') + '&userId=' + uni .getStorageSync('userId') + '&type=yaoqingyouli' } }, onShow() { this.getAllAmount(); this.getActiveRecommendRecords(); }, methods: { goList() { uni.navigateTo({ url: '/pagesMy/invite/list' }) }, goDetails() { uni.navigateTo({ url: '/pagesMy/invite/details' }) }, // https://www.tuofeng.cc/oilStation?storeId=19&staffId=45 close() { this.show = false }, open() { this.show = true // uni.navigateTo({ // url: '/pagesMy/invite/inviteCode' , // }) }, getAllAmount() { request({ url: 'business/marketingActivity/activeRecommendRecords/selectAllAmount', method: 'get', params: this.query }).then(res => { console.log(res) if (res.code == 200) { this.allAmount = res.data } }) }, getActiveRecommendRecords() { request({ url: 'business/marketingActivity/activeRecommendRecords', method: 'get', params: this.query }).then(res => { console.log(res) if (res.code == 200) { this.activeRecommendRecordsList = res.data.records } }) }, goback() { uni.navigateBack() } } } </script> <style scoped lang="scss"> .content { background: #F9F9F9; } .container { width: 100%; height: 100vh; box-sizing: border-box; } .box-img { width: 100%; height: 200px; image { width: 100%; height: 100%; } } .hbbox { width: 95%; margin: 0px auto; } .faimg { position: relative; } .or-box { width: 49%; height: 55px; background: #fff; border-radius: 8px; margin: 5px; text-align: center; box-sizing: border-box; display: flex; align-items: center; justify-content: center; image { width: 35px; height: 35px; margin-right: 15px; } } .h-box { width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; padding-top: 5px; } .max-size { font-size: 18px; font-weight: bold; color: #D23735; } .min-size { font-size: 14px; color: #333333; } .x-box { display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding-top: 30px; } .l-naniu { width: 147px; height: 32px; border-radius: 23px 23px 23px 23px; opacity: 1; border: 1px solid #FCDB5A; display: flex; align-items: center; justify-content: center; color: #FCDB5A; margin: 10px; } .r-naniu { width: 147px; height: 32px; border-radius: 23px 23px 23px 23px; opacity: 1; border: 1px solid #FCDB5A; background: #FCDB5A; display: flex; align-items: center; justify-content: center; color: #E9312F; margin: 10px; } .bai-box { width: 90%; background: #ffffff; border-radius: 8px; margin: 0px auto; box-sizing: border-box; // padding: 15px; margin-top: 90px; overflow: hidden; } .bai-top { width: 144px; height: 32px; background: linear-gradient(90deg, #F1DAB2 0%, #FBE5C5 50%, #F5DBB4 100%); border-radius: 0px 0px 12px 12px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: bold; color: #552304; margin: 0px auto; } .t-box { width: 100%; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 5px 15px; margin: 5px auto; } .touxiang { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; margin-right: 10px; image { width: 100%; height: 100%; } } .hong-size { font-size: 16px; font-weight: bold; color: #D23735; } .name-t { font-size: 16px; font-weight: bold; color: #333333; } .diss { display: flex; align-items: center; } .h-size { font-size: 14px; font-weight: 400; color: #999999; } .qiangzhi { background: transparent; border: none; box-shadow: 0px } .popup_box { box-sizing: border-box; padding: 15px; } .or-aniu { width: 95%; height: 40px; border-radius: 50px; display: flex; align-items: center; justify-content: center; background: #FF9655; color: #fff; margin: 10px auto; } .h_bs { width: 95%; display: flex; align-items: center; justify-content: space-between; margin: 10px auto; } .si_ { background: #fff; width: 95%; margin: 10px auto; display: flex; align-items: center; justify-content: space-between; padding: 10px; font-size: 14px; color: #333333; box-sizing: border-box; } .si_t { background: #fff; width: 95%; margin: 10px auto; padding: 10px; font-size: 14px; color: #333333; box-sizing: border-box; } .title_ { font-weight: 600; font-size: 14px; color: #333333; } button { /* 清除默认边框 */ border: 0; outline: none; /*清除默认背景 */ margin: 0px; padding: 0px !important; background-color: transparent; } .hui-size { font-size: 12px; color: #999999; } .d-s { display: flex; align-items: center; justify-content: center; margin: 15px auto; } .backf { background: #fff; width: 95%; margin: 10px auto; } .n_hang { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: #333333; box-sizing: border-box; padding: 10px; border-bottom: 1px solid #EEEEEE; width: 100%; } .warp { width: 100%; height: 100vh; position: relative; } .warp-bottom { position: absolute; left: 0px; bottom: 0px; background: #fff; width: 100%; box-sizing: border-box; padding: 10px; border-radius: 10px 10px 10px 10px; text-align: center; } .bott-box { display: flex; align-items: center; justify-content: space-around; box-sizing: border-box; padding-bottom: 15px; border-top: 1px solid #eee; padding-top: 10px; } .bott_box { box-sizing: border-box; padding: 5px; padding-bottom: 15px; display: flex; align-items: center; justify-content: space-between; } .warp-cent { width: 85%; background: #333; position: absolute; color: #fff; left: 50%; transform: translate(-50%, -50%); bottom: -5%; box-sizing: border-box; padding: 10px; padding-bottom: 60px; } .tiitle_ { font-weight: 600; font-size: 16px; color: #FFFFFF; } .title_or { color: #eeb668; text-align: center; font-size: 28px; } </style>