452 lines
13 KiB
Vue
452 lines
13 KiB
Vue
<template>
|
|
<view class="preferential">
|
|
<view class="ml30" style="margin-top:100rpx;">
|
|
<image :src="qmt" style="width:322rpx;height:71rpx;" mode=""></image>
|
|
</view>
|
|
<view class="ml30 mt10" style="">
|
|
<image :src="zuigao" style="width:695rpx;height:136rpx;" mode=""></image>
|
|
</view>
|
|
<view class="mt40 flex_items flex_center">
|
|
<view class="dwm flex_items flex_center f40" style="width:508rpx;height: 146rpx;color: #fff;">
|
|
<view class="flex_start flex_items" @click="submit('1')">
|
|
<text>我要订外卖</text>
|
|
<view class="f24 ml10 f-center"
|
|
style="color: #F15858;width: 48rpx;height: 48rpx;border-radius: 50%;background: #fff;line-height: 48rpx;">
|
|
Go</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex_items flex_center">
|
|
<image :src="xxiao" style="width: 752rpx;height:452rpx;" mode=""></image>
|
|
</view>
|
|
<view class="flex_items flex_center pos" style="margin-top: -80rpx;z-index: 1;">
|
|
<view class="dhb">
|
|
<view class="bold f50 f-center mt60" style="color: #DC3A2F;">满减用券巨省钱</view>
|
|
<view v-if="hbs.length!=0" class="flex_column plr20 mt100" style="">
|
|
<view class="flex_start flex_items">
|
|
<view v-for="(item,index) in hbs.slice(0,2)" :key="index" class="pb20 mr30"
|
|
style="background: linear-gradient(90deg, #F7DFB6 0%, #F8F3DD 48%, #FADAAD 100%);border-radius:24rpx;overflow: hidden;width:314rpx;height: 224rpx;">
|
|
<view class="ptb5" style="background: #E54523;width: 100%;height: 45rpx;">
|
|
<text v-if="item.full_amount==''" class="f24 ml30" style="color: #fff;">· 无门槛 ·</text>
|
|
<text v-else class="f24 ml30" style="color: #fff;">· 满{{item.full_amount}}减 ·</text>
|
|
</view>
|
|
<view class="flex_column ml30">
|
|
<view class="flex_start flex_items mt20" style="color: #E03F35;">
|
|
<text class="f24" style="margin-top: -20rpx;">￥</text>
|
|
<text class="bold f58">{{item.amount}}</text>
|
|
<!-- <text class="f26 mt35">{{item.name}}</text> -->
|
|
</view>
|
|
<text style="color: #E03F35;" class="f22">{{item.name}}</text>
|
|
<view class="f22 pb20 mt5" style="color: #E03F35;">
|
|
{{item.remark}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- two -->
|
|
<view class="flex_start flex_items mt35">
|
|
<view v-for="(item,index) in hbs.slice(2,3)" :key="index" class="pb20 mr20"
|
|
style="background: linear-gradient(90deg, #F7DFB6 0%, #F8F3DD 48%, #FADAAD 100%);border-radius:24rpx;overflow: hidden;width:224rpx;height:224rpx;">
|
|
<view class="ptb5 f-center" style="background: #E54523;width: 100%;height: 45rpx;">
|
|
<text v-if="item.full_amount==''" class="f24" style="color: #fff;">· 无门槛 ·</text>
|
|
<text v-else class="f24" style="color: #fff;">· 满{{item.full_amount}}减 ·</text>
|
|
</view>
|
|
<view class="flex_column flex_items">
|
|
<view class="flex_start flex_items mt20" style="color: #E03F35;">
|
|
<text class="f24" style="margin-top: -20rpx;">￥</text>
|
|
<text class="bold f50">{{item.amount}}</text>
|
|
</view>
|
|
<view class="f24" style="color: #E03F35;">
|
|
{{item.name}}
|
|
</view>
|
|
<view class="f24 pb10" style="color: #E03F35;">
|
|
<text
|
|
v-if="item.get_condition.limit=='2'">可领取{{item.get_condition.limit_num}}次</text>
|
|
<text v-else>不限次</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else class="mt120 pt50 f30 f-center" style="color: #FBECCF;">--暂无红包--</view>
|
|
<view v-if="hbs.length!=0" class="flex_items flex_center pos" @click="takehb">
|
|
<view class="lq f28 bold f-center" style="color: #FFF;">立即领取</view>
|
|
<image class="abs" :src="shouzhi" style="width: 112rpx;height: 114rpx;bottom: -30rpx;left: 350rpx;"
|
|
mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="width: 100%;height: 40rpx;"></view>
|
|
<!-- zj -->
|
|
<view v-if="ismask2" class="mask flex_items flex_center">
|
|
<view class="abs" style="width: 100%;left: 50%;top:50%;transform: translate(-50%,-128%);z-index: 1;">
|
|
<image :src="dhh" style="width: 100%;height: 388rpx;" mode=""></image>
|
|
</view>
|
|
<view class="abs f-center f36"
|
|
style="width: 256rpx;height: 64rpx;background: #EC4434;border-radius: 32rpx;left: 50%;transform: translate(-50%,-290rpx);line-height: 64rpx;z-index: 3;color: #fff;">
|
|
领取成功</view>
|
|
<view class="pos plr20 ptb30"
|
|
style="width:calc(100% - 80rpx);border-radius: 36rpx;background: #fff;border:5px solid #DC3A2F;z-index: 2;">
|
|
<view class="hb1 mt40 pos flex_start" style="z-index: 2;">
|
|
<view v-if="hbs[0].full_amount==''" class="f20 f-center mr30"
|
|
style="writing-mode: vertical-rl;color: #fff;letter-spacing:5rpx;width:84rpx;">无门槛
|
|
</view>
|
|
<view v-else class="f20 f-center mr30 flex_items flex_center"
|
|
style="writing-mode: vertical-rl;color: #fff;letter-spacing:5rpx;width:84rpx;">
|
|
<view>满<text class="ml20"
|
|
style="writing-mode: horizontal-tb;word-wrap:break-word">{{hbs[0].full_amount}}</text>减
|
|
</view>
|
|
</view>
|
|
<view style="width: 400rpx;" class="ml35 flex_column">
|
|
<view class="flex_start flex_items mt10" style="color: #E03F35;">
|
|
<text class="f24" style="margin-top: -20rpx;">￥</text>
|
|
<text class="bold f48">{{hbs[0].amount}}</text>
|
|
</view>
|
|
<text style="color: #E03F35;" class="f20">{{hbs[0].name}}</text>
|
|
<view class="f20 pb20 mt5" style="color: #E03F35;">
|
|
{{hbs[0].remark}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex_warp flex_items">
|
|
<view v-for="(item,index) in hbs.slice(1,4)" :key="index" class="xiaob mt20">
|
|
<view class="f-center" style="margin-top: -8rpx;">
|
|
<text v-if="item.full_amount==''" class="f20" style="color: #fff;">· 无门槛 ·</text>
|
|
<text v-else class="f20" style="color: #fff;">· 满{{item.full_amount}}减 ·</text>
|
|
</view>
|
|
<view class="flex_column flex_items">
|
|
<view class="flex_start flex_items mt10" style="color: #E03F35;">
|
|
<text class="f20" style="margin-top: -20rpx;">￥</text>
|
|
<text class="bold f44">{{item.amount}}</text>
|
|
</view>
|
|
<view class="f20" style="color: #E03F35;">
|
|
{{item.name}}
|
|
</view>
|
|
<view class="f20 pb10" style="color: #E03F35;">
|
|
<text v-if="item.get_condition.limit=='2'">可领取{{item.get_condition.limit_num}}次</text>
|
|
<text v-else>不限次</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex_items flex_center" style="width: 100%;">
|
|
<view class="hbsy f-center f28" style="color: #fff;" @click="gomt">去使用</view>
|
|
</view>
|
|
</view>
|
|
<image @click="closemsk" class="abs" :src="imgUrl+'cha.png'"
|
|
style="width: 52rpx;height: 52rpx;bottom: -100rpx;left: 50%;transform: translate(-50%);" mode="">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
<Ywatermark :info="'蓝色兄弟'"></Ywatermark>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
qmt: require("@/static/qmt.png"),
|
|
xxiao: require("@/static/xxiao.png"),
|
|
hb1: require("@/static/zjhb1.png"),
|
|
zjh: require("@/static/zjh.png"),
|
|
zuigao: require("@/static/zuigao.png"),
|
|
shouzhi: require("@/static/shouzhi.png"),
|
|
dhh: require("@/static/dhh.png"),
|
|
hbs: [],
|
|
imgUrl: "",
|
|
ismask: false,
|
|
ismask2: false,
|
|
list: [],
|
|
curindex: 0,
|
|
urls: uni.getStorageSync('uu'),
|
|
usernumber: "",
|
|
modalShow: false,
|
|
user: ""
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.imgUrl = this.api.imgUrl
|
|
this.user = options.user
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
getData() {
|
|
this.api.tjproduct().then((res) => {
|
|
console.log(res)
|
|
if (res.data.code == '200') {
|
|
this.list = JSON.parse(res.data.data)
|
|
this.gethb()
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data.message,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
gethb() {
|
|
this.api.hblist().then((res) => {
|
|
console.log(res)
|
|
if (res.data.code == '200') {
|
|
res.data.data.data.forEach((item, index) => {
|
|
item.get_condition = JSON.parse(item.get_condition)
|
|
if (index < 5) {
|
|
this.hbs.push(item)
|
|
}
|
|
})
|
|
// this.hbs = res.data.data.data
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data.message,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
closemsk() {
|
|
this.ismask = false
|
|
this.ismask2 = false
|
|
},
|
|
openmask() {
|
|
this.ismask = true
|
|
},
|
|
gomt() {
|
|
this.api.gomt({
|
|
user_number: this.user,
|
|
type: 1,
|
|
dinner_type: ''
|
|
}).then((res) => {
|
|
console.log(res)
|
|
if (res.data.code == 200) {
|
|
uni.hideLoading()
|
|
var href = res.data.url
|
|
window.open(href, '_self')
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data.message,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
|
|
},
|
|
take(id, index) {
|
|
this.curindex = index
|
|
this.api.takehb({
|
|
id: id
|
|
}).then((res) => {
|
|
console.log(res)
|
|
if (res.data.code == 200) {
|
|
this.ismask2 = true
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data.message,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
goorder(types) {
|
|
let that = this
|
|
this.types = types
|
|
this.usernumber = ""
|
|
that.modalShow = true
|
|
},
|
|
out() {
|
|
this.modalShow = false
|
|
},
|
|
yes() {
|
|
if (this.usernumber == "") {
|
|
uni.showToast({
|
|
title: "账号不能为空",
|
|
icon: "none"
|
|
})
|
|
return false
|
|
}
|
|
this.submit(this.types, this.usernumber)
|
|
},
|
|
takehb() {
|
|
let arr = []
|
|
this.hbs.forEach((item, index) => {
|
|
arr.push(item.id)
|
|
})
|
|
this.api.allhb({
|
|
id: arr
|
|
}).then((res) => {
|
|
console.log(res)
|
|
if (res.data.code == 200) {
|
|
this.ismask2 = true
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data.message,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
this.ismask2 = true
|
|
},
|
|
submit(types, dinnertype) {
|
|
if (dinnertype) {
|
|
this.dinnertype = dinnertype
|
|
} else {
|
|
this.dinnertype = ""
|
|
}
|
|
this.api.gomt({
|
|
user_number: this.user,
|
|
type: types,
|
|
dinner_type: this.dinnertype
|
|
}).then((res) => {
|
|
console.log(res)
|
|
if (res.data.code == 200) {
|
|
uni.hideLoading()
|
|
var href = res.data.url
|
|
window.open(href, '_self')
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data.message,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.preferential {
|
|
background-image: url('~@/static/pbg.jpg');
|
|
background-size: 100% 100%;
|
|
width: 100%;
|
|
/* min-height: 1936rpx; */
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.dwm {
|
|
background-image: url('~@/static/dwm.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.xiaob {
|
|
background-image: url('~@/static/xxhb.png');
|
|
background-size: 100% 100%;
|
|
width: 222rpx;
|
|
height: 192rpx;
|
|
}
|
|
|
|
.hb1 {
|
|
background-image: url('~@/static/zjhb1.png');
|
|
background-size: 100% 100%;
|
|
width: 100%;
|
|
height: 154rpx;
|
|
}
|
|
|
|
.xd {
|
|
background-image: url('~@/static/xdbtn.png');
|
|
background-size: 100% 100%;
|
|
width: 288rpx;
|
|
height: 84rpx;
|
|
line-height: 84rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
.wan {
|
|
background-image: url('~@/static/wanwan.png');
|
|
background-size: 100% 100%;
|
|
line-height: 278rpx;
|
|
height: 162rpx;
|
|
}
|
|
|
|
.hb {
|
|
background-image: url('~@/static/hbbg.png');
|
|
background-size: 100% 100%;
|
|
height: 306rpx;
|
|
width: calc(100% - 60rpx);
|
|
}
|
|
|
|
.hbtn {
|
|
background-image: url('~@/static/hbbtn.png');
|
|
background-size: 100% 100%;
|
|
height: 64rpx;
|
|
width: 336rpx;
|
|
line-height: 64rpx;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translate(-50%, -32rpx);
|
|
font-size: 34rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
.quan {
|
|
width: calc(100% - 80rpx);
|
|
height: 174rpx;
|
|
background-image: url('~@/static/quan.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.quan2 {
|
|
width: calc(100% - 60rpx);
|
|
height: 138rpx;
|
|
background-image: url('~@/static/xhb.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.mask {
|
|
width: 100%;
|
|
height: 100vh;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
background: rgba(0, 0, 0, .5);
|
|
z-index: 2;
|
|
}
|
|
|
|
.hd {
|
|
background-image: url('~@/static/hdbg.png');
|
|
background-size: 100% 100%;
|
|
height: 716rpx;
|
|
width: calc(100% - 160rpx);
|
|
position: relative;
|
|
}
|
|
|
|
.qu {
|
|
background-image: url('~@/static/qsy.png');
|
|
background-size: 100% 100%;
|
|
width: calc(100% - 60rpx);
|
|
height: 102rpx;
|
|
margin-top: 50rpx;
|
|
line-height: 102rpx;
|
|
}
|
|
|
|
.tkk {
|
|
width: 80%;
|
|
background-color: #fff;
|
|
text-align: center;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dhb {
|
|
background-image: url('~@/static/dhb.png');
|
|
background-size: 100% 100%;
|
|
width: 682rpx;
|
|
height: 940rpx;
|
|
}
|
|
|
|
.lq {
|
|
background-image: url('~@/static/lqbg.png');
|
|
background-size: 100% 100%;
|
|
width: 476rpx;
|
|
height: 196rpx;
|
|
line-height: 180rpx;
|
|
}
|
|
|
|
.hbsy {
|
|
background-image: url('~@/static/hbsy.png');
|
|
background-size: 100% 100%;
|
|
width: 458rpx;
|
|
height: 80rpx;
|
|
margin-top: 20rpx;
|
|
line-height: 80rpx;
|
|
}
|
|
</style> |