509 lines
14 KiB
Vue
509 lines
14 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="container">
|
||
<view class="my-header">
|
||
<view class="my-icons" @click="goback"> <uni-icons type="left" size="16"></uni-icons> </view>
|
||
<view class="my-text">{{title||"详情页"}}</view>
|
||
<view class="my-icons"></view>
|
||
</view>
|
||
<!-- 顶部区域 -->
|
||
<view style="height: 200px;!important">
|
||
<view style="text-align: center;">
|
||
<image src="../../static/imgs/xfyl.png" v-if="title == '消费有礼活动'"></image>
|
||
<image src="../../static/imgs/zkyx.png" v-if="title == '折扣营销活动'"></image>
|
||
<image src="../../static/imgs/mjyh.png" v-if="title == '满减营销活动'"></image>
|
||
<image src="../../static/imgs/xryl.png" v-if="title == '新人有礼活动'"></image>
|
||
<image src="../../static/imgs/yqyl.png" v-if="title == '推荐有礼活动'"></image>
|
||
<image src="../../static/imgs/chongzhi.png" v-if="title == '储值卡充值活动'"></image>
|
||
<image src="../../static/imgs/oilCard.png" v-if="title == '囤油卡充值活动'"></image>
|
||
</view>
|
||
<view class="center-box" v-for="(item,index) in datas" :key="index" v-if="title == '消费有礼活动'">
|
||
<view class=" title-box">活动介绍</view>
|
||
<view class="h_size">{{item.discountActiveDescribe || ""}}</view>
|
||
<view class="box-bottom">
|
||
<view class="">活动时间</view>
|
||
<view>{{item.time}}</view>
|
||
</view>
|
||
<view class="title-box">参与油品</view>
|
||
<view class="w_box">
|
||
<view class="w_oil" v-for="(item,index) in item.oilName" :key="index">{{item}}</view>
|
||
</view>
|
||
<view class="h_bottom">
|
||
<view class="dis-box">
|
||
<view class="dian"></view>
|
||
<view class="h_size">参与会员：{{item.adaptUserType}}</view>
|
||
</view>
|
||
<view class="dis-box">
|
||
<view class="dian" style="background: #FA5E03;"></view>
|
||
<view class="h_size">获得奖励：赠送{{item.points}}积分</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="center-box" v-for="(item,index) in datas" :key="index" v-if="title == '折扣营销活动'">
|
||
<view class=" title-box">活动介绍</view>
|
||
<view class="h_size">{{item.discountActiveDescribe || ""}}</view>
|
||
<view class="box-bottom">
|
||
<view class="">活动时间</view>
|
||
<view>{{item.time}}</view>
|
||
</view>
|
||
<view class="title-box">参与油品</view>
|
||
<view class="w_box">
|
||
<view class="w_oil" v-for="(item,index) in item.oilName" :key="index">{{item}}</view>
|
||
</view>
|
||
<view class="h_bottom">
|
||
<view class="dis-box">
|
||
<view class="dian"></view>
|
||
<view class="h_size">参与会员：{{item.adaptUserType}}</view>
|
||
</view>
|
||
<!-- <view class="dis-box">
|
||
<view class="dian" style="background: #FA5E03;"></view>
|
||
<view class="h_size">获得折扣：赠送{{item.points}}积分</view>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<view class="center-box" v-for="(item,index) in datas" :key="index" v-if="title == '满减营销活动'">
|
||
<view class=" title-box">活动介绍</view>
|
||
<view class="h_size">{{item.discountActiveDescribe || ""}}</view>
|
||
<view class="box-bottom">
|
||
<view class="">活动时间</view>
|
||
<view>{{item.time}}</view>
|
||
</view>
|
||
<view class="title-box">参与油品</view>
|
||
<view class="w_box">
|
||
<view class="w_oil" v-for="(item,index) in item.oilName" :key="index">{{item}}</view>
|
||
</view>
|
||
<view class="h_bottom">
|
||
<view class="dis-box">
|
||
<view class="dian"></view>
|
||
<view class="h_size">参与会员：{{item.adaptUserType}}</view>
|
||
</view>
|
||
<!-- <view class="dis-box">
|
||
<view class="dian" style="background: #FA5E03;"></view>
|
||
<view class="h_size">获得折扣：赠送10积分</view>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<view class="center-box" v-for="(item,index) in datas" :key="index" v-if="title == '储值卡充值活动'">
|
||
<view class=" title-box">活动介绍</view>
|
||
<view class="h_size">{{item.discountActiveDescribe || ""}}</view>
|
||
<view class="box-bottom">
|
||
<view class="">活动时间：{{item.time}}</view>
|
||
</view>
|
||
<!-- <view class="title-box">参与油品</view>
|
||
<view class="w_box">
|
||
<view class="w_oil" v-for="(item,index) in 3" :key="index">#95</view>
|
||
</view> -->
|
||
<view class="h_bottom">
|
||
<view class="dis-box">
|
||
<view class="dian"></view>
|
||
<view class="h_size">参与会员：{{item.adaptUserType}}</view>
|
||
</view>
|
||
<view class="dis-box">
|
||
<view class="dian" style="background: #FA5E03;"></view>
|
||
<view class="h_size">获得折扣：赠送{{item.points}}积分</view>
|
||
</view>
|
||
<view class="dis-box">
|
||
<view class="dian" style="background: #FA5E03;"></view>
|
||
<view class="h_size">获得折扣：赠送{{item.growaValue}}成长值</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="center-box" v-for="(item,index) in datas" :key="index" v-if="title == '囤油卡充值活动'">
|
||
<view class=" title-box">活动介绍</view>
|
||
<view class="h_size">{{item.discountActiveDescribe || ""}}</view>
|
||
<view class="box-bottom">
|
||
<view class="">活动时间：{{item.time}}</view>
|
||
</view>
|
||
<!-- <view class="title-box">参与油品</view>
|
||
<view class="w_box">
|
||
<view class="w_oil" v-for="(item,index) in 3" :key="index">#95</view>
|
||
</view> -->
|
||
<view class="h_bottom">
|
||
<view class="dis-box" v-if="item.adaptUserType">
|
||
<view class="dian"></view>
|
||
<view class="h_size">参与会员：{{item.adaptUserType}}</view>
|
||
</view>
|
||
<view class="dis-box">
|
||
<view class="dian" style="background: #FA5E03;"></view>
|
||
<view class="h_size">获得折扣：赠送{{item.points || 0}}积分</view>
|
||
</view>
|
||
<view class="dis-box">
|
||
<view class="dian" style="background: #FA5E03;"></view>
|
||
<view class="h_size">获得折扣：赠送{{item.growaValue || 0}}成长值</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="center-box" v-for="(item,index) in datas" :key="index" v-if="title == '新人有礼活动'">
|
||
<view class=" title-box">活动介绍</view>
|
||
<view class="h_size">{{item.discountActiveDescribe || ""}}</view>
|
||
<view class="box-bottom">
|
||
<view class="">活动时间</view>
|
||
<view>{{item.time || ''}}</view>
|
||
</view>
|
||
<!-- <view class="title-box">参与油品</view> -->
|
||
<!-- <view class="w_box">
|
||
<view class="w_oil" v-for="(item,index) in 3" :key="index">#95</view>
|
||
</view> -->
|
||
<view class="h_bottom">
|
||
<!-- <view class="dis-box">
|
||
<view class="dian"></view>
|
||
<view class="h_size">参与会员：普通会员、银牌会员、V2</view>
|
||
</view> -->
|
||
<view class="dis-box">
|
||
<view class="dian" style="background: #FA5E03;"></view>
|
||
<view class="h_size">赠送{{item.points || ''}}积分</view>
|
||
</view>
|
||
<view class="dis-box">
|
||
<view class="dian" style="background: #FA5E03;"></view>
|
||
<view class="h_size">赠送{{item.growaValue || ''}}成长值</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="center-box" v-for="(item,index) in datas" :key="index" v-if="title == '推荐有礼活动'">
|
||
<view class=" title-box">活动介绍</view>
|
||
<view class="h_size">{{item.discountActiveDescribe || ""}}</view>
|
||
<view class="box-bottom">
|
||
<view class="">活动时间：{{item.time}}</view>
|
||
</view>
|
||
<!-- <view class="title-box">参与油品</view>
|
||
<view class="w_box">
|
||
<view class="w_oil" v-for="(item,index) in 3" :key="index">#95</view>
|
||
</view> -->
|
||
<view class="h_bottom">
|
||
<!-- <view class="dis-box">
|
||
<view class="dian"></view>
|
||
<view class="h_size">参与会员：普通会员、银牌会员、V2</view>
|
||
</view> -->
|
||
<view class="dis-box">
|
||
<view class="dian" style="background: #FA5E03;"></view>
|
||
<view class="h_size">赠送{{item.points || ''}}积分</view>
|
||
</view>
|
||
<view class="dis-box">
|
||
<view class="dian" style="background: #FA5E03;"></view>
|
||
<view class="h_size">赠送{{item.growaValue || ''}}成长值</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="anniu" @click="goTopup()">
|
||
去参与
|
||
</view>
|
||
<!-- <view class="g-box" v-for="(item,index) in datas" :key="index" v-if="title == '消费有礼活动'">
|
||
<text>{{item.activeDescribe || ""}}</text>
|
||
</view>
|
||
<view class="g-box" v-for="(item,index) in datas" :key="index" v-if="title == '折扣营销活动'">
|
||
<text>{{item.discountActiveDescribe || ""}}</text>
|
||
</view>
|
||
<view class="g-box" v-for="(item,index) in datas" :key="index" v-if="title == '满减营销活动'">
|
||
<text>{{item.fullminusActiveDescribe || ""}}</text>
|
||
</view>
|
||
<view class="g-box" v-for="(item,index) in datas" :key="index" v-if="title == '储值卡充值活动'">
|
||
<text>{{item.discountActiveDescribe || ""}}</text>
|
||
</view>
|
||
<view class="g-box" v-if="title == '新人有礼活动'">
|
||
<text>{{datas.newlywedsActiveDescribe || ""}}</text>
|
||
</view>
|
||
<view class="g-box" v-if="title == '推荐有礼活动'">
|
||
<text>{{datas.recommendActiveDescribeIn || ""}}</text>
|
||
<text>{{datas.recommendActiveDescribeOut || ""}}</text>
|
||
</view> -->
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '../../utils/request'
|
||
export default {
|
||
data() {
|
||
return {
|
||
query: {
|
||
storeId: ''
|
||
},
|
||
oilName: [],
|
||
title: '',
|
||
datas: [],
|
||
}
|
||
},
|
||
components: {
|
||
|
||
},
|
||
onLoad(option) {
|
||
this.query.storeId = uni.getStorageSync("storeId");
|
||
this.title = option.name
|
||
console.log(option.name);
|
||
this.getInfo(option.type)
|
||
// this.getData(option.name);
|
||
},
|
||
methods: {
|
||
goTopup() {
|
||
// pagesMy/invite/invite
|
||
if (this.title == '推荐有礼活动') {
|
||
uni.navigateTo({
|
||
url: '/pagesMy/invite/invite'
|
||
})
|
||
}
|
||
if (this.title == '消费有礼活动') {
|
||
uni.navigateTo({
|
||
url: '/pages/refuel/refuel'
|
||
})
|
||
}
|
||
if (this.title == '折扣营销活动') {
|
||
uni.navigateTo({
|
||
url: '/pages/refuel/refuel'
|
||
})
|
||
}
|
||
if (this.title == '满减营销活动') {
|
||
uni.navigateTo({
|
||
url: '/pages/refuel/refuel'
|
||
})
|
||
}
|
||
if (this.title == '储值卡充值活动') {
|
||
uni.navigateTo({
|
||
url: '/pagesHome/oilRecharge/oilRecharge?id=0'
|
||
})
|
||
}
|
||
if (this.title == '新人有礼活动') {
|
||
uni.navigateTo({
|
||
url: '/pagesMy/invite/invite'
|
||
})
|
||
}
|
||
/* uni.navigateTo({
|
||
url: '/pagesHome/oilRecharge/oilRecharge'
|
||
}) */
|
||
},
|
||
getInfo(type){
|
||
uni.showLoading({
|
||
title: '加载中'
|
||
});
|
||
this.query.type = type
|
||
request({
|
||
url: 'business/marketingActivity/activeApplet/appletActiveByType',
|
||
method: 'get',
|
||
params: this.query
|
||
}).then(res => {
|
||
if (res.code == 200) {
|
||
this.datas = res.data,
|
||
uni.hideLoading();
|
||
}
|
||
|
||
})
|
||
},
|
||
getData(name) {
|
||
uni.showLoading({
|
||
//title: '加载中'
|
||
});
|
||
if (name == '消费有礼活动') {
|
||
request({
|
||
url: '/business/marketingActivity/activeConsumption/appletList',
|
||
method: 'get',
|
||
params: this.query
|
||
}).then(res => {
|
||
if (res.code == 200) {
|
||
this.datas = res.data,
|
||
uni.hideLoading();
|
||
}
|
||
|
||
})
|
||
}
|
||
if (name == '折扣营销活动') {
|
||
request({
|
||
url: '/business/marketingActivity/activeDiscount/appletList',
|
||
method: 'get',
|
||
params: this.query
|
||
}).then(res => {
|
||
if (res.code == 200) {
|
||
this.datas = res.data
|
||
uni.hideLoading();
|
||
}
|
||
})
|
||
}
|
||
if (name == '推荐有礼活动') {
|
||
request({
|
||
url: '/business/marketingActivity/activeRecommend/applet',
|
||
method: 'get',
|
||
params: this.query
|
||
}).then(res => {
|
||
if (res.code == 200) {
|
||
this.datas = res.data
|
||
uni.hideLoading();
|
||
}
|
||
})
|
||
}
|
||
if (name == '新人有礼活动') {
|
||
request({
|
||
url: '/business/marketingActivity/activeNewlyweds/applet',
|
||
method: 'get',
|
||
params: this.query
|
||
}).then(res => {
|
||
if (res.code == 200) {
|
||
this.datas = res.data
|
||
uni.hideLoading();
|
||
}
|
||
})
|
||
}
|
||
if (name == '满减营销活动') {
|
||
request({
|
||
url: '/business/marketingActivity/activeFullminus/appletList',
|
||
method: 'get',
|
||
params: this.query
|
||
}).then(res => {
|
||
if (res.code == 200) {
|
||
this.datas = res.data
|
||
uni.hideLoading();
|
||
}
|
||
})
|
||
}
|
||
if (name == '储值卡充值活动') {
|
||
request({
|
||
url: '/business/marketingActivity/cardValue/appletList',
|
||
method: 'get',
|
||
params: this.query
|
||
}).then(res => {
|
||
if (res.code == 200) {
|
||
this.datas = res.data
|
||
uni.hideLoading();
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
},
|
||
goback() {
|
||
uni.navigateBack()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.content {
|
||
background: #f4f5f6;
|
||
height: 100vh;
|
||
}
|
||
|
||
image {
|
||
|
||
width: 95%;
|
||
height: 160px;
|
||
border-radius: 8px;
|
||
|
||
}
|
||
|
||
.container {
|
||
width: 100%;
|
||
|
||
background: #f4f5f6;
|
||
box-sizing: border-box;
|
||
padding-top: 88px;
|
||
padding-bottom: 20px;
|
||
}
|
||
|
||
.my-header {
|
||
width: 100%;
|
||
height: 88px;
|
||
background: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
color: #000;
|
||
box-sizing: border-box;
|
||
padding: 0px 15px;
|
||
padding-top: 40px;
|
||
|
||
.my-icons {
|
||
width: 20px;
|
||
|
||
}
|
||
|
||
position: fixed;
|
||
top: 0px;
|
||
}
|
||
|
||
.center-box {
|
||
border-radius: 8px;
|
||
background: #ffffff;
|
||
margin: 10px auto;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
width: 95%;
|
||
}
|
||
|
||
.title-box {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
margin: 10px auto;
|
||
|
||
}
|
||
|
||
.g-box {
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
padding: 4px 0px;
|
||
font-size: 14px;
|
||
color: #333333;
|
||
}
|
||
|
||
.w_box {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.h_size {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #777777;
|
||
}
|
||
|
||
.w_oil {
|
||
border-radius: 4px 4px 4px 4px;
|
||
box-sizing: border-box;
|
||
padding: 5px 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 10px;
|
||
border: 1px solid #2F72F7;
|
||
color: #2F72F7;
|
||
}
|
||
|
||
.h_bottom {
|
||
width: 100%;
|
||
background: #F4F4F4;
|
||
border-radius: 4px;
|
||
box-sizing: border-box;
|
||
padding: 10px 5px;
|
||
margin: 10px auto;
|
||
}
|
||
|
||
.dian {
|
||
width: 6px;
|
||
height: 6px;
|
||
background: #2F72F7;
|
||
border-radius: 50%;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.dis-box {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
}
|
||
|
||
.anniu {
|
||
width: 90%;
|
||
height: 42px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
background: #2F72F7;
|
||
border-radius: 8px;
|
||
position: fixed;
|
||
bottom: 20px;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
</style> |