358 lines
11 KiB
Vue
358 lines
11 KiB
Vue
<template>
|
||
<view class="preferential">
|
||
<!-- <web-view :src="urls"></web-view> -->
|
||
<view class="f28 ptb10 f-center" style="color: #fff;background: rgba(255,238,106,0.2);margin-top:240rpx;
|
||
">购买时如有疑问或投诉，请致电客服电话：</view>
|
||
<view class="flex_items flex_center mt30">
|
||
<image :src="yhbd" style="width: 656rpx;height: 120rpx;" mode=""></image>
|
||
</view>
|
||
<view class="pos">
|
||
<view @click="openmask" class="abs f24 f-center"
|
||
style="right: 0;width: 84rpx;height: 44rpx;background: rgba(0,0,0,0.1);border-radius: 24rpx 0rpx 0rpx 24rpx;color: #ECECEC;line-height: 44rpx;">
|
||
规则
|
||
</view>
|
||
</view>
|
||
<view class="mt10">
|
||
<view class="flex_items flex_center">
|
||
<image :src="xiao" style="width: 402rpx;height:442rpx;" mode=""></image>
|
||
</view>
|
||
<view class="mt30 flex_items flex_center">
|
||
<view class="xd f-center f36" @click="submit('1')">
|
||
立即下单
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="mt40 flex_items flex_center">
|
||
<view class="p30" style="width: calc(100% - 120rpx);background: #FEE4C7;border-radius:40rpx;">
|
||
<div class="flex_start flex_items" style="width: 100%;overflow-x:auto;overflow-y:hidden;">
|
||
<div v-for="(item,index) in list" :key="index" class="mr20 pos"
|
||
style="width: 160rpx;height: 162rpx;border-radius: 40rpx;" @click="submit('1',item.key)">
|
||
<image :src="item.image" class="" style="height: 162rpx;width:160rpx;border-radius: 40rpx;"
|
||
mode="">
|
||
</image>
|
||
<div class="abs wan f26 f-center" style="bottom: 0;left: 0;width: 100%;color: #fff;">
|
||
{{item.value}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</view>
|
||
</view>
|
||
<view v-if="hbs.length!=0" style="height:1270rpx;overflow-y: auto;">
|
||
<view v-for="(item,index) in hbs" :key="index" class="mt60 flex_column flex_items">
|
||
<view class="hb pos">
|
||
<view class="f-center hbtn">
|
||
红包
|
||
</view>
|
||
<view class="flex_items flex_center mt60" style="width: 100%;">
|
||
<view class="quan flex_start flex_items">
|
||
<view style="width:360rpx;color: #fff;" class="flex_column ml30">
|
||
<text class="f32">{{item.name}}</text>
|
||
<!-- <text class="f28 mt10">{{item.name}}</text> -->
|
||
<text class="f20 mt5">{{item.remark}}</text>
|
||
</view>
|
||
<view style="width:200rpx;" class="flex_items flex_center">
|
||
<view @click="take(item.id,index)" class="f-center f34 ml30"
|
||
style="width: 144rpx;height: 60rpx;background: linear-gradient(180deg, #FFD8A9 0%, #FFA83C 100%);border-radius:30rpx;line-height: 60rpx;color: #D77600;">
|
||
领取
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="mt30 flex_items flex_center">
|
||
<view class="f24" style="width: calc(100% - 60rpx);color: #9D5905;">
|
||
活动页面以及产品均为蓝色兄弟网络科技有限公司提供，活动页面以及产品均由成都蓝色兄弟玩网络科技有限公司提供。
|
||
</view>
|
||
</view>
|
||
<view class="flex_end flex_items mb40">
|
||
<text class="f24 mr30" style="color: #9D5905;">【广告】</text>
|
||
</view>
|
||
</view>
|
||
<view v-else class="f32 flex_center ptb50" style="color: #9d5905;height:1170rpx">
|
||
<text style="margin-top: 200rpx;">--暂无红包--</text>
|
||
</view>
|
||
<!-- 规则 -->
|
||
<view v-if="ismask" class="mask flex_items flex_center">
|
||
<view class="hd">
|
||
<text class="f40 abs"
|
||
style="color: #CA7340;top: 24rpx;left: 50%;transform: translate(-50%);">活动规则</text>
|
||
<view class="plr50 flex_column f24" style="color: #9D5905;">
|
||
<view class="" style="margin-top:130rpx;">1.【活动时间】2023年11月1日至2023年12月31日。</view>
|
||
<view class="mt20">
|
||
2.【活动内容】此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容。</view>
|
||
<view class="mt20">
|
||
3.【活动细则】此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容。</view>
|
||
<view class="mt20">4【活动细则】此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为。</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>
|
||
<!-- zj -->
|
||
<view v-if="ismask2" class="mask flex_items flex_center">
|
||
<view class="pos" style="width:calc(100% - 160rpx);height: 504rpx;">
|
||
<view class="abs plr30 flex_column flex_items"
|
||
style="z-index: 2;top: 0;left: 0; width:calc(100% - 60rpx);height: 504rpx;background: linear-gradient(180deg, #FBF3DC 0%, #FFFFFF 37%);border-radius: 36rpx;">
|
||
<image class="mt50" :src="gongxi" style="width: calc(100% - 60rpx);" mode="widthFix"></image>
|
||
<view class="quan2 flex_start flex_items mt40">
|
||
<view class="f38 f-center ml10" style="width: 130rpx;color: #CF4B3F;">{{hbs[curindex].amount}}
|
||
</view>
|
||
<view style="width: 300rpx;" class="flex_column ml35">
|
||
<text class="f32 ml10" style="color: #99360F;">{{hbs[curindex].name}}</text>
|
||
<text class="f24 mt10 ml10" style="color: #B99A6C;">{{hbs[curindex].remark}}</text>
|
||
</view>
|
||
</view>
|
||
<view @click="submit('1')" class="qu f44 f-center" style="color: #fff;">去使用</view>
|
||
<view class="f20 mt15" style="color: #B99A6C;">可在【支付页面】使用</view>
|
||
</view>
|
||
<image class="abs" :src="zjh"
|
||
style="z-index:1;width: 100%;height: 388rpx;left: 0;top: -252rpx;z-index: 1;" mode=""></image>
|
||
<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>
|
||
<!-- tk -->
|
||
<view v-if="modalShow" class="flex_items flex_center"
|
||
style="width: 100%;height: 100vh;background: rgba(0,0,0,.5);position: fixed;left: 0;top: 0;z-index: 5;">
|
||
<view class="bgwhite tkk flex_column flex_items ptb30">
|
||
<text class="f36 bold" style="color: #585858;">请输入账号</text>
|
||
<input type="text" class="mt30 ptb20 plr20" v-model="usernumber" placeholder="账号"
|
||
style="text-align: left;border: 1px solid #e9e9e9;background:#d4d4d4;width:70%;">
|
||
<view class="mt10 f24" style="color:#a9a6a6;width: 65%;">访客登陆账号为：13902、13903、13904、13905、13906</view>
|
||
<view class="flex_start flex_items mt20 bte9s ptb20" style="width: 80%;">
|
||
<view @click="out" class="flex_items flex_center"
|
||
style="width: 49%;height: 40rpx;border-right: 1px solid #e9e9e9;">
|
||
<text>取消</text>
|
||
</view>
|
||
<view @click="yes" style="width: 50%;height: 40rpx;color: #167eef;">
|
||
<text>确认</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<Ywatermark :info="'蓝色兄弟'"></Ywatermark>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
yhbd: require("@/static/yhbd.png"),
|
||
xiao: require("@/static/xiao.png"),
|
||
mm: require("@/static/mmm.png"),
|
||
zjh: require("@/static/zjh.png"),
|
||
gongxi: require("@/static/gongxi.png"),
|
||
hbs: [],
|
||
imgUrl: "",
|
||
ismask: false,
|
||
ismask2: false,
|
||
list: [],
|
||
curindex: 0,
|
||
urls: uni.getStorageSync('uu'),
|
||
usernumber: "",
|
||
modalShow: false,
|
||
user: ""
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
console.log(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') {
|
||
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
|
||
},
|
||
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)
|
||
},
|
||
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/mtwmbg.jpg');
|
||
background-size: 100% 100%;
|
||
width: 100%;
|
||
/* min-height: 2540rpx; */
|
||
border: 1px solid transparent;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
</style> |