<template>
|
<view class="elm-wrapper wrapperLayer"
|
:style="optionsCurrent==3?'background-color:#1088FE;':'background-color:#62BC00;'">
|
<view class="flexbox borderBox colCen"
|
:style="optionsCurrent==3?'background-color:#1088FE;':'background-color:#62BC00;'">
|
<view class="topbarbox"></view>
|
<view class="leftimgbox rowCenBet" @tap="back()">
|
<view class="shadow rowCenCen" style="background:rgba(0,0,0,0);">
|
<view class="iconfont" style="color: rgb(255, 255, 255);">
|
</view>
|
</view>
|
<view class="pagetitle"
|
:style="'opacity:'+ (0+scrollTop/100)+';color:' + ((scrollTop/100)>0.5?'#FFF;':'#222222;')">
|
饿了么红包
|
</view>
|
<view class="shadow rowCenCen" style="opacity: 0;background-color:#FFF;">
|
<view class="iconfont" style="color: rgb(255, 255, 255);"></view>
|
</view>
|
</view>
|
</view>
|
<view class="options-bar-content rowCenCen">
|
<view class="center-container rowCenBet">
|
<block v-for="(items,index) in optionsList" :key="index">
|
<view class="items-content rowCenCen"
|
:style="optionsCurrent==items.type?items.type==3?'color:#1088FE;':'color:#62BC00;':''"
|
@tap="navTap(items.type,index)">
|
<view>{{items.label}}</view>
|
</view>
|
</block>
|
<div class="items-active" :style="{'transform':'translateX('+activeIndex * 120 +'rpx)'}"></div>
|
</view>
|
</view>
|
|
<image class="pageBac"
|
:src="optionsCurrent==3?'https://hxshapp.oss-cn-beijing.aliyuncs.com/weapp/elm.png':'https://hxshapp.oss-cn-beijing.aliyuncs.com/weapp/elmgs3.png'"
|
mode="aspectFill">
|
</image>
|
|
<view class="center-code-container rowCen borderBox">
|
<view class="white-content colCen">
|
<view class="dashed-content rowCenCen"
|
:style="optionsCurrent==3?'border-bottom: 1rpx dashed rgba(16, 136, 254, 0.6);':'border-bottom: 1rpx dashed rgba(98, 188, 0, 0.6);'">
|
<image class="stepImg"
|
:src="optionsCurrent==3?'https://hxshapp.oss-cn-beijing.aliyuncs.com/weapp/elmstep.png':'https://hxshapp.oss-cn-beijing.aliyuncs.com/weapp/greenstep.png'"
|
mode="">
|
</image>
|
</view>
|
|
<image class="miniCodeImg" :src="wxQrcodeUrl" mode="aspectFit"></image>
|
|
<view class="getBtn-container rowCenCen" @tap="jumpMini()">
|
<view>领红包点外卖</view>
|
</view>
|
|
<!-- <view class="getBtn-container rowCenCen" @tap="jumpShangJinMini()">
|
<view>领加餐红包②</view>
|
</view> -->
|
</view>
|
</view>
|
|
<view class="rulesContent colCen borderBox">
|
<view class="txt-title">
|
规则说明：
|
</view>
|
<view class="richtext-content">
|
1.无论用不用第一个红包,都要先领取,否则可能无返利;</br>
|
2.加餐红包和外卖红包不冲突,可以同时领取,哪个红包大用哪个;</br>
|
3.无论饿了么新老用户,外卖红包和加餐红包每个手机号每天均可领一次,红包金额随机发放;</br>
|
4.领券下单均有返利,返利按照订单实际支付金额为准;5.必须使用从本页获得的红包码领券,领券后使用红包下单才有返利;</br>
|
6.领券后在红包有效期内下单均有返利;</br>
|
7.分享红包海报给好友,好友领券下单后分享人也可以获得返利;</br>
|
8.饿了么绑定的手机号,需与领券登录的手机号一致;8.下单后10分钟内会有订单返现提醒;</br>
|
</view>
|
</view>
|
|
|
</view>
|
</template>
|
|
<script>
|
import titleBar from '../../components/backTitlebar.vue';
|
import common from '../../utils/utils.js';
|
export default {
|
|
data() {
|
return {
|
optionsCurrent: 3,
|
activeIndex: 0, // 当前选中的index
|
scrollTop: 0,
|
optionsList: [{
|
label: "外卖",
|
type: 3
|
},
|
{
|
label: "果蔬",
|
type: 5
|
}
|
],
|
pageInfo: null,
|
wxQrcodeUrl: '',
|
empowerModel: false
|
}
|
},
|
onPageScroll(e) {
|
this.scrollTop = e.scrollTop
|
},
|
onLoad() {
|
this.IntiData()
|
},
|
onPullDownRefresh() {
|
this.IntiData()
|
},
|
methods: {
|
IntiData() {
|
var that = this;
|
this.$u.api.eleAct({
|
type: this.optionsCurrent
|
}).then(e => {
|
console.log(e)
|
if (e.code != 0) return that.$alert(e.msg)
|
uni.stopPullDownRefresh()
|
that.pageInfo = e.data.info;
|
that.wxQrcodeUrl = that.pageInfo.wx_qrcode_url;
|
}).catch(function(err) {})
|
},
|
back() {
|
uni.navigateBack({
|
delta: 1
|
})
|
},
|
navTap(type, index) {
|
if (this.optionsCurrent != type) {
|
this.optionsCurrent = type
|
this.activeIndex = index
|
if (this.optionsCurrent == 5) {
|
uni.setNavigationBarColor({
|
frontColor: '#ffffff',
|
backgroundColor: '#62BC00'
|
})
|
} else {
|
uni.setNavigationBarColor({
|
frontColor: '#ffffff',
|
backgroundColor: '#1088FE'
|
})
|
}
|
this.IntiData()
|
}
|
},
|
jumpMini() {
|
var isAppletJump = getApp().globalData.appinfo.isAppletJump;
|
if(isAppletJump){
|
var appId = this.pageInfo.app_id;
|
var appPath = this.pageInfo.wx_miniprogram_path;
|
plus.share.getServices(function(res) {
|
var sweixin = null;
|
for (var i = 0; i < res.length; i++) {
|
var t = res[i];
|
if (t.id == 'weixin') {
|
sweixin = t;
|
}
|
}
|
if (sweixin) {
|
sweixin.launchMiniProgram({
|
id: appId,
|
type: 0, //0 正式 1 测试 2 体验 小程序的版本
|
path: appPath //这里你要跳的路径，可以传值
|
});
|
}
|
}, function(res) {
|
console.log(JSON.stringify(res));
|
});
|
}else{
|
// #ifdef APP-PLUS
|
if (plus.runtime.isApplicationExist({
|
pname: 'com.taobao.taobao',
|
action: 'taobao://'
|
})) {
|
const plug = uni.requireNativePlugin('xiguazhu-baichuan')
|
plug.detailPage({
|
url: this.pageInfo.click_url,
|
"openType": 0
|
}, result => {
|
// console.log(result);
|
});
|
} else {
|
uni.navigateTo({
|
url: '../webView/webView?url=' +this.pageInfo.click_url,
|
})
|
}
|
// #endif
|
}
|
},
|
|
jumpShangJinMini() {
|
var that = this;
|
this.$u.api.eleShangjin({}).then(e => {
|
if(e.code != 0) return that.$alert(e.msg)
|
console.log(e)
|
uni.hideLoading()
|
uni.stopPullDownRefresh()
|
var res = e.data;
|
var appId = res.app_id;
|
var appPath = res.app_path;
|
plus.share.getServices(function(res) {
|
var sweixin = null;
|
for (var i = 0; i < res.length; i++) {
|
var t = res[i];
|
if (t.id == 'weixin') {
|
sweixin = t;
|
}
|
}
|
if (sweixin) {
|
sweixin.launchMiniProgram({
|
id: appId,
|
type: 0, //0 正式 1 测试 2 体验 小程序的版本
|
path: appPath //这里你要跳的路径，可以传值
|
});
|
}
|
}, function(res) {
|
console.log(JSON.stringify(res));
|
});
|
}).catch(function (err) {
|
})
|
|
},
|
|
closeMdl() {
|
this.empowerModel = false
|
this.pddempowerModel = false
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.elm-wrapper {
|
width: 100%;
|
min-height: 100vh;
|
background-color: #1088FE;
|
|
.flexbox {
|
position: fixed;
|
z-index: 100;
|
width: 100%;
|
padding: 0 32rpx;
|
|
.leftimgbox {
|
width: 100%;
|
height: 90rpx;
|
|
.shadow {
|
width: 50rpx;
|
height: 50rpx;
|
font-size: 28rpx;
|
border-radius: 50%;
|
}
|
}
|
}
|
|
.options-bar-content {
|
width: 100%;
|
margin-top: 168rpx;
|
|
.center-container {
|
position: relative;
|
width: 240rpx;
|
height: 58rpx;
|
background: rgba(254, 254, 254, 0.3);
|
border-radius: 29rpx;
|
|
.items-content {
|
position: relative;
|
width: 120rpx;
|
height: 58rpx;
|
background: transparent;
|
border-radius: 29rpx;
|
font-size: 28rpx;
|
font-weight: 500;
|
z-index: 1;
|
color: rgba(255, 255, 255, 0.7);
|
}
|
|
.items-active {
|
position: absolute;
|
left: 0;
|
@extend .items-content;
|
background: #FEFEFE;
|
z-index: 0;
|
transition: 0.3s ease-out;
|
}
|
|
.green {
|
color: #62BC00;
|
}
|
|
.blue {
|
color: #1088FE;
|
}
|
}
|
}
|
|
.pageBac {
|
width: 100%;
|
height: 294rpx;
|
margin-top: 20rpx;
|
}
|
|
.center-code-container {
|
width: 100%;
|
padding: 0 28rpx;
|
|
.white-content {
|
width: 100%;
|
padding-bottom: 50rpx;
|
background-color: #FFFFFF;
|
border-radius: 16rpx;
|
|
.dashed-content {
|
width: 100%;
|
height: 194rpx;
|
|
.stepImg {
|
width: 540rpx;
|
height: 107rpx;
|
}
|
}
|
|
.miniCodeImg {
|
width: 288rpx;
|
height: 288rpx;
|
margin: 70rpx 0;
|
}
|
|
.getBtn-container {
|
width: 580rpx;
|
height: 78rpx;
|
border-radius: 39rpx;
|
background: linear-gradient(0deg, #F1B641 0%, #FFCE6D 100%);
|
font-size: 34rpx;
|
font-weight: 500;
|
color: #C03F11;
|
margin-top: 15rpx;
|
}
|
|
.shareBtn-container {
|
|
border: 1rpx solid #109BFE;
|
// border-radius: 31rpx;
|
// font-size: 30rpx;
|
//font-weight: 400;
|
color: #0D7BE8;
|
margin-top: 30rpx;
|
|
|
width: 580rpx;
|
height: 78rpx;
|
border-radius: 39rpx;
|
// background: linear-gradient(0deg, #F1B641 0%, #FFCE6D 100%);
|
font-size: 34rpx;
|
font-weight: 500;
|
//color: #C03F11;
|
}
|
|
.greenbtn {
|
color: #62BC00;
|
border-color: #62BC00;
|
}
|
}
|
}
|
|
.rulesContent {
|
width: 100%;
|
padding: 0 28rpx;
|
margin-top: 25rpx;
|
|
.txt-title {
|
width: 100%;
|
font-size: 32rpx;
|
font-weight: 500;
|
color: #FFFFFF;
|
line-height: 48rpx;
|
margin-bottom: 20rpx;
|
}
|
|
.richtext-content {
|
width: 100%;
|
margin-bottom: 40rpx;
|
font-size: 26rpx;
|
font-weight: 400;
|
line-height: 48rpx;
|
color: #FFFFFF;
|
}
|
}
|
}
|
</style>
|
