<template>
|
<view class="elm-wrapper wrapperLayer"
|
:style="optionsCurrent==2?'background-color:#FFD100;':'background-color:#FFD100;'">
|
|
<view class="flexbox borderBox colCen"
|
:style="optionsCurrent==2?'background-color:#FFD100;':'background-color:#FFD100;'">
|
<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" @tap="navTap(items.type)" :class="{ 'yellow':items.type == optionsCurrent && [1,3].includes(optionsCurrent), 'green': items.type == optionsCurrent && optionsCurrent ==2 }">
|
<view>{{items.label}}</view>
|
</view>
|
</block>
|
<div class="items-active" :style="{'transform':'translateX('+(optionsCurrent-1) * 120 +'rpx)'}"></div>
|
</view>
|
</view>
|
|
<image class="pageBac" :src="pageBac" mode="aspectFill">
|
</image>
|
|
<view class="center-code-container rowCen borderBox">
|
<view class="white-content colCen">
|
<view class="dashed-content rowCenCen"
|
:style="optionsCurrent==2?'border-bottom: 1rpx dashed rgba(98, 188, 0, 0.6);':'border-bottom: 1rpx dashed rgba(255, 209, 0, 0.6);'">
|
<image class="stepImg" src="https://hxshapp.oss-cn-beijing.aliyuncs.com/weapp/huanstep.png" mode="">
|
</image>
|
</view>
|
|
<image class="miniCodeImg" :src="wxQrcodeUrl" mode="aspectFit"></image>
|
|
<view class="getBtn-container rowCenCen" @tap="shareClick()">
|
<view>领红包点外卖</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="rulesContent colCen borderBox">
|
<view class="txt-title">
|
规则说明：
|
</view>
|
<view class="richtext-content">
|
1.此活动为部分区域有效，以活动页面实际展示为准;红包发放数量及红包金额具有随机性;具体红包使用有效期及红包金额以实际收到为准;</br>
|
2.红包使用规则:</br>
|
(1)红包使用门槛、使用期限及使用规则等以红包券面展示信息为准;</br>
|
(2)红包可在美团或美团外卖最新版客户端、美团外卖小程序下单且选择在线支付时使用;且红包仅限非到店自取外卖订单，下午茶、夜宵、美食、蛋糕、团餐频道、甜点
|
饮品频道使用; </br>
|
(3)外卖新人首单红包限新用户(设备、手机号、 红包
|
号均未在美团外卖下过单)首次下单使用，且不与其他优惠(首减、满减、满赠、套餐增、折扣菜)同享;非首单红包可与上述优惠叠加使用;</br>
|
(4)使用红包时下单手机号码必须与收餐人手机号码、领取红包时输入的手机号码一致:</br>
|
3.订单跟单规则为您通过本活动页点击跳转至美团后只要产生有效点击即可进行跟单，点击有效期最长为7天</br>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
optionsCurrent: 1,
|
scrollTop: 0,
|
optionsList: [{
|
label: "美团",
|
type: 1
|
},
|
{
|
label: "饿了么",
|
type: 2
|
}
|
/* ,
|
{
|
label: "商超",
|
type: 2
|
}, {
|
label: "优选",
|
type: 3
|
} */
|
],
|
mtInfo: null,
|
wxQrcodeUrl: ''
|
}
|
},
|
onPageScroll(e) {
|
this.scrollTop = e.scrollTop
|
},
|
onLoad() {
|
this.IntiData()
|
},
|
onPullDownRefresh() {
|
this.IntiData()
|
},
|
computed: {
|
pageBac(){
|
let url=""
|
const obj={
|
1:()=>{
|
url = 'https://hxshapp.oss-cn-beijing.aliyuncs.com/weapp/mt1.png'
|
},
|
2:()=>{
|
url = 'https://hxshapp.oss-cn-beijing.aliyuncs.com/weapp/mt2.png'
|
},
|
3:()=>{
|
url = 'https://hxshapp.oss-cn-beijing.aliyuncs.com/weapp/mt3.png'
|
}
|
}
|
obj[this.optionsCurrent]()
|
return url
|
}
|
},
|
methods: {
|
IntiData() {
|
var that = this;
|
this.$u.api.meituanAct({type:this.optionsCurrent}).then(e => {
|
if(e.code != 0)return that.$alert(e.msg)
|
uni.stopPullDownRefresh()
|
console.log(e)
|
that.mtInfo = e.data.info;
|
that.wxQrcodeUrl = that.mtInfo.we_app_info.miniCode;
|
}).catch(function (err) {
|
})
|
},
|
back() {
|
uni.navigateBack({
|
delta: 1
|
})
|
},
|
navTap(type) {
|
if (this.optionsCurrent != type) {
|
this.optionsCurrent = type
|
if(this.optionsCurrent==2)
|
{//跳转饿了么
|
uni.redirectTo({
|
url:'./elm'
|
})
|
return;
|
}
|
else if (this.optionsCurrent == 2) {
|
uni.setNavigationBarColor({
|
frontColor: '#ffffff',
|
backgroundColor: '#62BC00'
|
})
|
} else {
|
uni.setNavigationBarColor({
|
frontColor: '#ffffff',
|
backgroundColor: '#FFD100'
|
})
|
}
|
this.IntiData()
|
}
|
},
|
jumpMini() {
|
uni.navigateToMiniProgram({
|
appId: this.mtInfo.we_app_info.app_id,
|
path: this.mtInfo.we_app_info.page_path,
|
success: (res) => {}
|
})
|
},
|
shareClick() {
|
// #ifdef APP-PLUS
|
// 1拉起微信小程序 0 不拉
|
var isAppletJump = getApp().globalData.appinfo.isAppletJump;
|
console.log("===========" + isAppletJump)
|
if (isAppletJump) {
|
if (plus.os.name == 'Android') {
|
plus.runtime.openURL(this.mtInfo.deeplink, res => {
|
this.toMiniProgram();
|
}, 'com.sankuai.meituan');
|
} else {
|
plus.runtime.openURL(this.mtInfo.deeplink, res => {
|
this.toMiniProgram();
|
}, 'com.sankuai.meituan');
|
}
|
} else {
|
plus.runtime.openURL(this.mtInfo.deeplink, res => {
|
uni.navigateTo({
|
url: '../webView/webView?url=' + (this.mtInfo.h5 == "" ? this.mtInfo.long_h5 : this.mtInfo.h5)
|
})
|
}, 'com.sankuai.meituan');
|
}
|
|
// #endif
|
},
|
toMiniProgram() {
|
var appid = this.mtInfo.we_app_info.app_id;
|
var appPath = this.mtInfo.we_app_info.page_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));
|
});
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.elm-wrapper {
|
width: 100%;
|
min-height: 100vh;
|
background-color: #FFD100;
|
|
.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: 198rpx;
|
.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;
|
// opacity: 0.6;
|
transition:0.3s ease-out;
|
}
|
.green{
|
color:#62BC00;
|
}
|
.yellow{
|
color:#FFD100;
|
}
|
}
|
}
|
|
.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;
|
}
|
|
.shareBtn-container {
|
|
border: 1rpx solid #FFD100;
|
|
|
|
color: #FFD100;
|
;
|
margin-top: 30rpx;
|
|
|
width: 580rpx;
|
height: 78rpx;
|
border-radius: 39rpx;
|
//background: linear-gradient(0deg, #F1B641 0%, #FFCE6D 100%);
|
font-size: 34rpx;
|
font-weight: 500;
|
|
}
|
|
.greenbtn {
|
color: #62BC00;
|
border-color: #62BC00;
|
}
|
}
|
}
|
|
.rulesContent {
|
width: 100%;
|
padding: 0 28rpx;
|
margin-top: 45rpx;
|
|
.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>
|
