460 lines
13 KiB
Vue
460 lines
13 KiB
Vue
<template>
|
|
<view class="content plr30 home" v-if="istrue">
|
|
<view class="flex_center flex_items mt30">
|
|
<view class="search flex_start flex_items plr10 ptb15">
|
|
<image :src="imgUrl+'search.png'" style="width: 32rpx;height: 32rpx;" mode=""></image>
|
|
<input class="uni-input pl10 f26" confirm-type="search" placeholder="搜索" v-model="form.keywords"
|
|
@confirm="doSearch" style="width:100%;" />
|
|
</view>
|
|
<!-- <view class="flex_column flex_items ml35" style="color: #414141;" @click="gomyfen">
|
|
<image :src="imgUrl+'jf.png'" style="width: 40rpx;height: 40rpx" mode=""></image>
|
|
<text class="f18" style="margin-top: -5rpx;">我的积分</text>
|
|
</view>
|
|
<view class="flex_column flex_items ml20" style="color: #414141;" @click="gomyorder">
|
|
<image :src="imgUrl+'dd.png'" style="width: 40rpx;height: 40rpx" mode=""></image>
|
|
<text class="f18" style="margin-top: -5rpx;">我的订单</text>
|
|
</view> -->
|
|
</view>
|
|
<!-- t2 -->
|
|
<view class="mt30">
|
|
<swiper indicator-dots autoplay interval="5000" duration="500">
|
|
<swiper-item v-for="(item,index) in banners" :key="index">
|
|
<image :src="item.url" style="width: 100%;height:454rpx;" mode="aspectFit"
|
|
@click="goout(item.target_url)"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<!-- t3 -->
|
|
<view class="t3 mt30 p30">
|
|
<view class="flex_between flex_items">
|
|
<text class="f32" style="color: #003A6E;">花积分</text>
|
|
<text class="f24" style="color: #999" @click="goexchange('0')">更多</text>
|
|
</view>
|
|
<view v-if="hotproducts.length!=0" class="flex_start flex_items mt30">
|
|
<view class="pl30 pt35 flex_column vhy mt30" style="border-radius: 20rpx 0rpx 0rpx 0rpx;">
|
|
<view class="f30 bold" style="color: #fff;">{{hotproducts[0].name}}</view>
|
|
<!-- <view class="mt10 f24" style="color: #FFE2E2;">省时省力/放松身心</view> -->
|
|
<view @click="goexchange('0')" class="mt80 flex_items flex_center ml10"
|
|
style="width: calc(100% - 40rpx);height:64rpx;background: linear-gradient(180deg, #FFFFFF 0%, #FFBFAC 100%);border-radius: 32rpx;">
|
|
<text class="f28" style="color: #FD6F30;">立即查看</text>
|
|
</view>
|
|
</view>
|
|
<view class="ml20 vqt">
|
|
<view class="flex_start flex_items pb10 plr10 pt20"
|
|
style="background: #FFEDEA;border-radius: 20rpx 20rpx 0 0;border-bottom: 1px solid #FAD5D5;">
|
|
<image class="" :src="imgUrl+'yphy.png'" style="height:124rpx;width:144rpx;" mode=""></image>
|
|
<view class="flex_column" @click="goexchange('1')">
|
|
<view class="f30 bold flex_start flex_items" style="color: #003A6E;">
|
|
<text>{{hotproducts[1].name}}</text>
|
|
<image :src="imgUrl+'xjt.png'" class="ml10" style="width: 10rpx;" mode="widthFix">
|
|
</image>
|
|
</view>
|
|
<!-- <view class="mt10 f24" style="color: #A6A6A6;">随时随地听音乐</view> -->
|
|
</view>
|
|
</view>
|
|
<view v-if="hotproducts.length!=0" class="flex_start flex_items pt10 plr10"
|
|
style="background: #FFEDEA;border-radius: 0 0 20rpx 20rpx;">
|
|
<image class="" :src="imgUrl+'mssh.png'" style="height:124rpx;width:144rpx;" mode=""></image>
|
|
<view class="flex_column" @click="goexchange('2')">
|
|
<view class="f30 bold flex_start flex_items" style="color: #003A6E;">
|
|
<text>{{hotproducts[2].name}}</text>
|
|
<image :src="imgUrl+'xjt.png'" class="ml10" style="width: 10rpx;" mode="widthFix">
|
|
</image>
|
|
</view>
|
|
<!-- <view class="mt10 f24" style="color: #A6A6A6;">随时分享美食</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else class="flex_center flex_items f24" style="color: #888;height:240rpx;width: 100%;">
|
|
<text>--暂无数据--</text>
|
|
</view>
|
|
<!-- 商品列表 -->
|
|
<view class="p30 mt30"
|
|
style="width:calc(100% - 60rpx);background: linear-gradient(180deg, #FDE8E5 0%, rgba(255,255,255,0) 100%);border-radius: 28rpx;">
|
|
<!-- <view class="flex_around flex_items">
|
|
<view v-for="(item,index) in mlist" :key="index">
|
|
<view :class="[index==whoindex?'chosethis':'nochossethis']" @click="chosewho(index)">
|
|
<text v-if="item.max_price_desc!='以上'" class="f30"
|
|
style="">{{item.min_price_desc}}-{{item.max_price_desc}}分</text>
|
|
<text v-else class="f30">{{item.min_price_desc}}分以上</text>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<view class="mt20">
|
|
<view v-if="goodlist.length!=0" class="flex_start flex_items"
|
|
style="width:100%;overflow-x: auto;height:260rpx;overflow-y: hidden;">
|
|
<view v-for="(item,index) in goodlist" :key="index" class="flex_column flex_items mr30">
|
|
<view class="sk flex_items flex_center" @click="godetail(item.id)">
|
|
<image :src="item.main_image" style="width: 128rpx;height: 114rpx;" mode="aspectFit">
|
|
</image>
|
|
</view>
|
|
<view class="f26 mt10 one f-center" style="color: #333">{{item.name}}</view>
|
|
<view class="mt10 f24 f-center" style="color: #FA5D5E;">{{item.price}}积分</view>
|
|
</view>
|
|
</view>
|
|
<view v-else class="flex_center flex_items f24" style="color: #888;height:240rpx;width: 100%;">
|
|
<text>--暂无数据--</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- t4 -->
|
|
<view class="mt30 p30 t3">
|
|
<view class="flex_between flex_items">
|
|
<text class="f32" style="color: #003A6E;">热门活动</text>
|
|
<text class="f24" style="color: #999" @click="moreac">更多</text>
|
|
</view>
|
|
<view v-if="hotActivity.length!=0" class="flex_column flex_items">
|
|
<view v-for="(item,index) in hotActivity" :key="index" class="mt30 pb30 bbe9s" style="width: 100%;">
|
|
<view class="flex_between flex_items" style="width: 100%;">
|
|
<view class="flex_start flex_items">
|
|
<image :src="item.banner" style="width: 72rpx;height: 72rpx;border-radius: 50%;" mode="">
|
|
</image>
|
|
<view class="flex_column ml20">
|
|
<text class="f30" style="color: #333;">{{item.active_name}}</text>
|
|
<text v-if="item.rule" class="f24 mt10"
|
|
style="color: #898989;">{{item.rule.rate}}</text>
|
|
</view>
|
|
</view>
|
|
<view @click="getp(item.id,item.active_type,item.product_id)" class="flex_items flex_center"
|
|
style="width: 144rpx;height: 48rpx;background: linear-gradient(90deg, #FF898E 0%, #F43139 100%);;box-shadow: 0rpx 4rpx 12rpx 0rpx #FFC79F;border-radius: 24rpx">
|
|
<text class="f24" style="color: #fff;">立即参与</text>
|
|
</view>
|
|
</view>
|
|
<u-line-progress class="mt20" :percentage="item.process_rate" inactiveColor="#F8DDC5"
|
|
activeColor="#F9535A"></u-line-progress>
|
|
</view>
|
|
</view>
|
|
<view v-else class="flex_center flex_items f24" style="color: #888;height:600rpx;width: 100%;">
|
|
<text>--暂无数据--</text>
|
|
</view>
|
|
</view>
|
|
<view style="width: 100%;height: 30rpx;"></view>
|
|
<Ywatermark :info="'蓝色兄弟'"></Ywatermark>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
istrue: false,
|
|
imgUrl: "",
|
|
form: {
|
|
keywords: ""
|
|
},
|
|
activits2: [{
|
|
m1: '18.8',
|
|
tt: '优酷年卡+酷狗豪华年卡',
|
|
jf: '1500',
|
|
z: 5
|
|
},
|
|
{
|
|
m1: '18.8',
|
|
tt: '优酷年卡+酷狗豪华年卡',
|
|
jf: '1500',
|
|
z: 5
|
|
},
|
|
],
|
|
// daos: [{
|
|
// tt: "机场贵宾",
|
|
// img: require('@/static/fj.png'),
|
|
// jf: 30
|
|
// }, {
|
|
// tt: "代驾",
|
|
// img: require('@/static/dj.png'),
|
|
// jf: 30
|
|
// }, {
|
|
// tt: "QQ会员",
|
|
// img: require('@/static/qq.png'),
|
|
// jf: 30
|
|
// }, {
|
|
// tt: "盒马",
|
|
// img: require('@/static/hm.png'),
|
|
// jf: 30
|
|
// }, {
|
|
// tt: "立减金",
|
|
// img: require('@/static/ljj.png'),
|
|
// jf: 30
|
|
// }, ],
|
|
mlist: [],
|
|
whop: {
|
|
min_price: "",
|
|
max_price: "",
|
|
page: 1,
|
|
pageSize: 1100
|
|
},
|
|
whoindex: 0,
|
|
goodlist: [],
|
|
banners: [],
|
|
hotActivity: [],
|
|
hotProduct: [],
|
|
hotproducts: []
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.imgUrl = this.api.imgUrl
|
|
this.gettoken()
|
|
},
|
|
methods: {
|
|
gettoken() {
|
|
uni.showLoading({
|
|
title: "加载中..."
|
|
})
|
|
this.api.login({
|
|
account: "testq12",
|
|
password: '123456'
|
|
}).then((res) => {
|
|
console.log(res)
|
|
if (res.data.code == 200) {
|
|
uni.setStorageSync("token", res.data.data.authtoken)
|
|
uni.setStorageSync("phone", res.data.data.phone)
|
|
uni.setStorageSync('uu', res.data.data.id)
|
|
this.getdata()
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data.message,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
getdata() {
|
|
this.api.homedata().then((res) => {
|
|
console.log(res)
|
|
if (res.data.code == 200) {
|
|
if (res.data.data.hotActivity.length != 0) {
|
|
res.data.data.hotActivity.forEach((item, index) => {
|
|
item.rule = JSON.parse(item.rule)
|
|
});
|
|
}
|
|
this.banners = res.data.data.banner
|
|
this.hotActivity = res.data.data.hotActivity
|
|
this.hotproducts = res.data.data.product1
|
|
this.goodlist = res.data.data.hotProduct
|
|
this.istrue = true
|
|
uni.hideLoading()
|
|
} else {
|
|
uni.showToast({
|
|
icon: "error",
|
|
title: res.data.message
|
|
})
|
|
}
|
|
})
|
|
},
|
|
getremtag() {
|
|
this.api.getremmedtag().then((res) => {
|
|
console.log(res)
|
|
if (res.data.code == 200) {
|
|
this.mlist = res.data.data
|
|
this.whop.min_price = res.data.data[0].min_price
|
|
this.whop.max_price = res.data.data[0].max_price
|
|
// this.gethotpro()
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data.message,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
gethotpro() {
|
|
this.api.gethotproduct(this.whop).then((res) => {
|
|
if (res.data.code == 200) {
|
|
this.goodlist = res.data.data.data
|
|
this.istrue = true
|
|
uni.hideLoading()
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data.message,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
doSearch() {
|
|
if (this.form.keywords == "") {
|
|
uni.showToast({
|
|
title: "请输入搜索内容",
|
|
icon: "none"
|
|
})
|
|
return false
|
|
}
|
|
uni.navigateTo({
|
|
url: "/pages/exchange/index?keywords=" + this.form.keywords
|
|
})
|
|
},
|
|
watchgo() {
|
|
uni.showToast({
|
|
title: "配置中,敬请期待",
|
|
icon: "none"
|
|
})
|
|
},
|
|
goexchange(types) {
|
|
uni.navigateTo({
|
|
url: "/pages/exchange/index?keyindex=" + types
|
|
})
|
|
},
|
|
gomyfen() {
|
|
uni.navigateTo({
|
|
url: "/pages/my/index"
|
|
})
|
|
},
|
|
gomyorder() {
|
|
uni.navigateTo({
|
|
url: "/pages/order/index"
|
|
})
|
|
},
|
|
moreac() {
|
|
uni.navigateTo({
|
|
url: "/pages/activity/index"
|
|
})
|
|
},
|
|
godetail(id) {
|
|
uni.navigateTo({
|
|
url: "/pages/product/detail?id=" + id
|
|
})
|
|
},
|
|
goout(url) {
|
|
uni.navigateTo({
|
|
url: "/pages/outline/index?src=" + url
|
|
})
|
|
// var href = url
|
|
// window.open(href, '_self')
|
|
},
|
|
getp(id, types, pid) {
|
|
if (types == 2) {
|
|
uni.navigateTo({
|
|
url: "/pages/turntable/index?id=" + id
|
|
})
|
|
} else if (types == 3) {
|
|
uni.navigateTo({
|
|
url: "/pages/scap/scratch?id=" + id
|
|
})
|
|
} else if (types == 5) {
|
|
uni.navigateTo({
|
|
url: "/pages/around/index?id=" + id
|
|
})
|
|
} else if (types == 6) {
|
|
uni.navigateTo({
|
|
url: "/pages/answer/index?id=" + id
|
|
})
|
|
} else if (types == 1) {
|
|
uni.navigateTo({
|
|
url: "/pages/product/detail?id=" + pid
|
|
})
|
|
} else {}
|
|
|
|
},
|
|
chosewho(index) {
|
|
this.whoindex = index
|
|
this.whop.min_price = this.mlist[index].min_price
|
|
if (this.mlist[index].max_price_desc != '以上') {
|
|
this.whop.max_price = this.mlist[index].max_price
|
|
} else {
|
|
this.whop.max_price = ""
|
|
}
|
|
uni.showLoading({
|
|
title: "加载中...",
|
|
})
|
|
this.gethotpro()
|
|
}
|
|
},
|
|
onShareAppMessage() {
|
|
return {
|
|
title: '浦发积分商城',
|
|
path: "/pages/index/index"
|
|
}
|
|
},
|
|
onShareTimeline() {
|
|
return {
|
|
title: '浦发积分商城',
|
|
path: "/pages/index/index"
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background: #f5f5f5 !important;
|
|
}
|
|
|
|
.search {
|
|
width: 100%;
|
|
border-radius: 46rpx;
|
|
opacity: 1;
|
|
border: 1rpx solid #D3D3D3;
|
|
}
|
|
|
|
.t3 {
|
|
/* background: linear-gradient(180deg, #FFF8EF 0%, #FFFFFF 100%); */
|
|
background: #fff;
|
|
box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.06);
|
|
border-radius: 28rpx;
|
|
font-family: PingFang SC-粗体, PingFang SC;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.dui {
|
|
/* width: 198rpx; */
|
|
height: 226rpx;
|
|
background: #FFEFDA;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.z5 {
|
|
height: 260rpx;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.z4 {
|
|
height: 192rpx;
|
|
width: 48%;
|
|
position: relative;
|
|
}
|
|
|
|
.sk {
|
|
background-image: url('https://pfapi.86698.cn/static/images/sk.png');
|
|
background-size: 100% 100%;
|
|
width: 174rpx;
|
|
height: 174rpx;
|
|
}
|
|
|
|
.vhy {
|
|
background-image: url('https://pfapi.86698.cn/static/images/video.png');
|
|
background-size: 100% 100%;
|
|
width: 48%;
|
|
height: 248rpx;
|
|
}
|
|
|
|
.vqt {
|
|
width: 56%;
|
|
height: 248rpx;
|
|
}
|
|
|
|
.one {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
width: 174rpx;
|
|
}
|
|
|
|
.chosethis {
|
|
font-weight: bold;
|
|
color: #003A6E;
|
|
}
|
|
|
|
.nochossethis {
|
|
color: #9d9d9d;
|
|
font-weight: lighter;
|
|
}
|
|
|
|
.home swiper {
|
|
height: 454rpx !important;
|
|
}
|
|
</style> |