704 lines
15 KiB
Vue
704 lines
15 KiB
Vue
<template>
|
||
<!-- https://ext.dcloud.net.cn/plugin?id=2630 -->
|
||
<view class="page">
|
||
<view class="head-info">
|
||
<!-- 搜索 -->
|
||
<view style="margin-top: 95rpx;" class="head-search">
|
||
<view @click="back()" class="icon-info" style="margin-left: 20rpx;">
|
||
<text class="cuIcon-back"></text>
|
||
</view>
|
||
<uni-search-bar v-model="searchValue"
|
||
style="opacity: 0.4; margin-top: -15rpx;width: 63%;margin-left: 30rpx;" radius="10"
|
||
placeholder="搜索一下，爱上这个世界" @confirm="search" cancelButton="none" bgColor="#fff" />
|
||
</view>
|
||
<!-- 分类列表 -->
|
||
<view class="classify-list">
|
||
<view class="list" v-for="(item, index) in classList" :class="{ action: classifyShow == index }"
|
||
@click="onClassify(item, index)" :key="index">
|
||
<text>{{ item.name }}</text>
|
||
<text class="line" v-show="classifyShow == index"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" :top="0"> -->
|
||
<view class="main">
|
||
<!-- 轮播图 -->
|
||
<view class="banner">
|
||
<swiper class="screen-swiper square-dot" indicator-dots="true" circular="true" autoplay="true"
|
||
interval="3000" duration="500">
|
||
<swiper-item v-for="(item, index) in swiperList" :key="index">
|
||
<image :src="item.url" mode="aspectFill"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
|
||
<!-- 通知 -->
|
||
<view class="inform">
|
||
<view class="inform-info">
|
||
<view class="picture">
|
||
<image src="https://img.yidaima.cn/feast/gg_ico.png" mode=""></image>
|
||
</view>
|
||
<view class="info">
|
||
<swiper class="swiper" :circular="true" :vertical="true" :indicator-dots="false"
|
||
:autoplay="true" :interval="3000" :duration="1000">
|
||
<swiper-item v-for="(item,index) in exchangeList" :key="index">
|
||
<view class="swiper-item"><text class="one-omit">微信用户_{{item.recordsUserId}} 兑换了 {{item.goodsName}}</text>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 为你推荐 -->
|
||
<view class="recommend-info">
|
||
<view class="recommend-title">
|
||
<view class="title">
|
||
<image src="https://img.yidaima.cn/feast/wntj_title.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="goods-list">
|
||
<view class="list" v-for="(item, index) in goodsList" @click="onSkip(item)" :key="index">
|
||
<view class="pictrue">
|
||
<image :src="item.goodsImg"></image>
|
||
</view>
|
||
<view class="title-tag">
|
||
<view class="tag">
|
||
<text v-if="item.isHot === 0">火爆</text>
|
||
{{ item.goodsName }}
|
||
</view>
|
||
</view>
|
||
<view class="price-info">
|
||
<view class="user-price">
|
||
<text class="cuIcon-vip min"></text>
|
||
<text class="max">{{ item.goodsExchange }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 加载动图 -->
|
||
<view class="artileload" v-if="showTotal">
|
||
<image style="width: 100%;height: 100%;" src="https://img.yidaima.cn/feast/articleload.gif"
|
||
mode="aspectFit"></image>
|
||
</view>
|
||
<!-- 文章列表没有数据 -->
|
||
<view class="no-list-data" v-else>
|
||
--我的底线就到这里了--
|
||
</view>
|
||
<!-- </mescroll-body> -->
|
||
<!-- <ClassifyData v-show="classifyShow != 0"></ClassifyData> -->
|
||
<!-- tabbar -->
|
||
<!-- <TabBar :tabBarShow="0"></TabBar> -->
|
||
<u-toast ref="uToast"></u-toast>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getConfigKey
|
||
} from "@/api/app/public.js"
|
||
import {
|
||
getDicts,
|
||
listExchange,
|
||
listGoods,
|
||
appGetUserById,
|
||
exchangeGoods
|
||
} from "@/api/app/index.js"
|
||
import config from '@/config'
|
||
export default {
|
||
components: {},
|
||
data() {
|
||
return {
|
||
baseUrl: config.baseUrl,
|
||
searchValue: "",
|
||
swiperList: [],
|
||
slideNum: 0,
|
||
|
||
classList: [{
|
||
id: 0,
|
||
name: '全部'
|
||
}],
|
||
goodsList: [],
|
||
classifyShow: 0,
|
||
// 页面高度
|
||
pageHeight: 500,
|
||
exchangeList: [],
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 6,
|
||
},
|
||
total: 0,
|
||
showTotal: false,
|
||
userId: null,
|
||
};
|
||
},
|
||
onLoad() {
|
||
var that = this;
|
||
this.userId = uni.getStorageSync("userInfo").userId
|
||
//获取轮播图
|
||
getConfigKey("miniapp.index.swiper").then(response => {
|
||
|
||
that.swiperList = []
|
||
var swiper = response.msg.split(",")
|
||
for (var i = 0; i < swiper.length; i++) {
|
||
var obj = {
|
||
id: i,
|
||
type: 'image',
|
||
url: swiper[i]
|
||
}
|
||
that.swiperList.push(obj)
|
||
}
|
||
})
|
||
//获取类型标签
|
||
getDicts("exchange_goods_type").then(response => {
|
||
this.classList = [{
|
||
id: 0,
|
||
name: '全部'
|
||
}]
|
||
for (var i = 0; i < response.data.length; i++) {
|
||
var type = {
|
||
id: response.data[i].dictValue,
|
||
name: response.data[i].dictLabel
|
||
}
|
||
this.classList.push(type)
|
||
}
|
||
})
|
||
//获取兑换记录列表
|
||
listExchange({
|
||
pageNum: 1,
|
||
pageSize: 5,
|
||
}).then(response => {
|
||
that.exchangeList = response.rows
|
||
})
|
||
//获取兑换商品列表
|
||
this.getListGoods()
|
||
},
|
||
// 上拉分页
|
||
onReachBottom() {
|
||
var that = this;
|
||
var allTotal = this.queryParams.pageNum * this.queryParams.pageSize
|
||
//this.page为加载次数，this.pageSize为每一次加载的数据条数
|
||
if (allTotal < this.total) {
|
||
//this.total为请求数据的总条数。只要现有条数小于总条数就执行一下代码
|
||
this.showTotal = true;
|
||
this.queryParams.pageNum++;
|
||
//加载次数递加
|
||
//请求更多数据列表
|
||
listGoods(this.queryParams).then(response => {
|
||
that.goodsList = that.goodsList.concat(response.rows)
|
||
var allTotal2 = this.queryParams.pageNum * this.queryParams.pageSize
|
||
if (allTotal2 < this.total) {
|
||
//this.total为请求数据的总条数。只要现有条数小于总条数就执行一下代码
|
||
this.showTotal = true;
|
||
} else {
|
||
this.showTotal = false;
|
||
}
|
||
|
||
})
|
||
} else {
|
||
this.showTotal = false;
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
onSkip(e) {
|
||
console.log(e)
|
||
this.$tab.navigateTo('/pages/tool/exchangeinfo?goodsImg='+e.goodsImg+"&goodsName="+e.goodsName+"&goodsExchange="+e.goodsExchange+"&isHot="+e.isHot+"&isCami="+e.isCami+"&camiType="+e.camiType)
|
||
},
|
||
onSkip2(e) {
|
||
var that = this
|
||
if (!this.userId) {
|
||
that.$refs.uToast.show({
|
||
type: 'success',
|
||
title: '',
|
||
message: "请先授权登录",
|
||
icon: false
|
||
})
|
||
} else {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确认要消耗 ' + e.goodsExchange + " 积分兑换吗？",
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
// 执行确认后的操作
|
||
appGetUserById(that.userId).then(response => {
|
||
if (e.goodsExchange > response.user.integral) {
|
||
uni.showModal({
|
||
title: '积分不足',
|
||
content: '您的积分为 '+response.user.integral+' ,签到做任务可获得积分',
|
||
cancelText: "取消",
|
||
confirmText: "获取积分",
|
||
confirmColor:'#ff0000',
|
||
cancelColor:'#000000',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
// 执行确认后的操作
|
||
uni.switchTab({
|
||
url: '/pages/mine/index'
|
||
});
|
||
}
|
||
else {
|
||
// 执行取消后的操作
|
||
}
|
||
}
|
||
})
|
||
} else {
|
||
console.log(e)
|
||
var data = {
|
||
goodsName: e.goodsName,
|
||
recordsUserId: that.userId,
|
||
recordsNumber: e.goodsExchange,
|
||
|
||
}
|
||
exchangeGoods(data).then(response => {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '兑换成功，请到我的界面联系我们？',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
// 执行确认后的操作
|
||
uni.switchTab({
|
||
url: '/pages/mine/index'
|
||
});
|
||
}
|
||
else {
|
||
// 执行取消后的操作
|
||
}
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
|
||
})
|
||
} else {
|
||
// 执行取消后的操作
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
},
|
||
// 搜索触发
|
||
search(e) {
|
||
var json = e.value;
|
||
this.queryParams.pageNum = 1
|
||
this.queryParams.goodsName = json
|
||
this.queryParams.goodsType = null
|
||
this.classifyShow = 0;
|
||
this.getListGoods()
|
||
},
|
||
getListGoods() {
|
||
listGoods(this.queryParams).then(response => {
|
||
this.goodsList = response.rows
|
||
var allTotal = this.queryParams.pageNum * this.queryParams.pageSize
|
||
this.total = response.total
|
||
if (allTotal < this.total) {
|
||
this.showTotal = true;
|
||
} else {
|
||
this.showTotal = false;
|
||
}
|
||
})
|
||
},
|
||
back() {
|
||
uni.navigateBack()
|
||
},
|
||
/*下拉刷新的回调, 有三种处理方式:*/
|
||
downCallback() {
|
||
this.mescroll.endSuccess();
|
||
},
|
||
/*上拉加载的回调*/
|
||
upCallback(page) {
|
||
setTimeout(() => {
|
||
this.mescroll.endByPage(10, 20);
|
||
}, 2000);
|
||
},
|
||
/**
|
||
* 菜单导航滚动
|
||
*/
|
||
ScrollMenu(e) {
|
||
let scrollLeft = e.target.scrollLeft;
|
||
const query = uni.createSelectorQuery().in(this);
|
||
query
|
||
.select('.nav')
|
||
.boundingClientRect(data => {
|
||
let wid = e.target.scrollWidth - data.width - (data.left * 2 + 5);
|
||
this.slideNum = ((scrollLeft / wid) * 300) / 2;
|
||
})
|
||
.exec();
|
||
},
|
||
|
||
|
||
/**
|
||
* 分类点击
|
||
* @param {Object} item
|
||
* @param {Number} index
|
||
*/
|
||
onClassify(item, index) {
|
||
if (item.id == 0) {
|
||
this.queryParams.goodsType = null
|
||
} else {
|
||
this.queryParams.goodsType = item.id
|
||
}
|
||
this.classifyShow = index;
|
||
this.queryParams.pageNum = 1
|
||
this.queryParams.goodsName = null
|
||
this.getListGoods()
|
||
},
|
||
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
$base: #fe3b0f; // 基础颜色
|
||
$assist-clor: #ff4e17; // 辅助颜色
|
||
$change-clor: #fc603a; // 渐变色
|
||
$floor-clor: #fafafa; // 底部颜色
|
||
$price-clor: #ff0000; // 价格颜色
|
||
|
||
/* 列表没有数据 */
|
||
.no-list-data {
|
||
text-align: center;
|
||
margin: 30rpx 0px;
|
||
color: #e6e6e6;
|
||
font-size: 24upx;
|
||
}
|
||
|
||
/* 加载动图 */
|
||
.artileload {
|
||
height: 80rpx;
|
||
width: 80rpx;
|
||
margin: 20rpx auto;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.page {
|
||
// position: absolute;
|
||
// left: 0;
|
||
// top: 0;
|
||
// width: 100%;
|
||
// height: 100%;
|
||
// overflow-x: hidden;
|
||
// overflow-y: auto;
|
||
padding-bottom: 100rpx;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.head-info {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 100;
|
||
width: 100%;
|
||
height: 285rpx;
|
||
background: url(https://img.yidaima.cn/feast/head_bg.png) no-repeat;
|
||
background-size: 100% 433rpx;
|
||
background-color: #ffffff;
|
||
overflow: hidden;
|
||
|
||
.head-search {
|
||
display: flex;
|
||
|
||
.icon-info {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 100%;
|
||
|
||
text {
|
||
font-size: 50rpx;
|
||
color: #f6f6f6;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
image {
|
||
width: 42rpx;
|
||
height: 43rpx;
|
||
}
|
||
}
|
||
|
||
.search {
|
||
display: flex;
|
||
width: 60%;
|
||
padding: 0 20rpx;
|
||
height: 65rpx;
|
||
background-color: rgba(255, 255, 255, 0.3);
|
||
border-radius: 10rpx;
|
||
margin-left: 50rpx;
|
||
|
||
.icon {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 20rpx;
|
||
|
||
image {
|
||
width: 27rpx;
|
||
height: 29rpx;
|
||
}
|
||
}
|
||
|
||
.hint {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.max {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.min {
|
||
font-size: 24rpx;
|
||
color: #f6f6f6;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.classify-list {
|
||
white-space: nowrap;
|
||
width: 100%;
|
||
height: 100rpx;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
|
||
.list {
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 20%;
|
||
height: 100%;
|
||
line-height: 100rpx;
|
||
text-align: center;
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
color: #ffffff;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.line {
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 20rpx;
|
||
width: 90%;
|
||
height: 8rpx;
|
||
background: linear-gradient(to right, #f8f893, #fe9d00);
|
||
border-radius: 10rpx;
|
||
transform: translate(-50%, 0);
|
||
}
|
||
}
|
||
|
||
.action {
|
||
text {
|
||
font-size: 32rpx;
|
||
opacity: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.main {
|
||
margin-top: 285rpx;
|
||
padding-top: 20rpx;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
/* banner */
|
||
.banner {
|
||
padding: 0 25rpx;
|
||
height: 260rpx;
|
||
margin-bottom: 30rpx;
|
||
// margin: -200rpx auto 20rpx;
|
||
border-radius: 10rpx;
|
||
overflow: hidden;
|
||
|
||
.screen-swiper {
|
||
height: 100%;
|
||
min-height: 100% !important;
|
||
|
||
image {
|
||
height: 260rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 通知 */
|
||
.inform {
|
||
padding: 0 25rpx;
|
||
// height: 130rpx;
|
||
// margin: 30rpx auto;
|
||
border-bottom: 16rpx solid #f9f9f9;
|
||
|
||
.inform-info {
|
||
display: flex;
|
||
padding: 0 20rpx;
|
||
height: 70rpx;
|
||
background-color: #f7f7f7;
|
||
border-radius: 10rpx;
|
||
|
||
.picture {
|
||
width: 20%;
|
||
height: 100%;
|
||
|
||
image {
|
||
width: 93rpx;
|
||
height: 84rpx;
|
||
margin-top: -20rpx;
|
||
}
|
||
}
|
||
|
||
.info {
|
||
width: 80%;
|
||
height: 100%;
|
||
|
||
.swiper {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.swiper-item {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
color: #848281;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.one-omit {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* 为你推荐 */
|
||
.recommend-info {
|
||
width: 100%;
|
||
background-color: #f2f2f2;
|
||
|
||
.recommend-title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 100rpx;
|
||
|
||
.title {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 416rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.goods-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
padding: 0 30rpx;
|
||
|
||
.list {
|
||
width: 49%;
|
||
height: 540rpx;
|
||
margin-bottom: 20rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 10rpx;
|
||
overflow: hidden;
|
||
|
||
.pictrue {
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
image {
|
||
height: 350rpx;
|
||
width: 350rpx;
|
||
}
|
||
}
|
||
|
||
.title-tag {
|
||
// display: flex;
|
||
height: 100rpx;
|
||
padding: 20rpx;
|
||
|
||
.tag {
|
||
float: left;
|
||
margin-right: 10rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
white-space: normal;
|
||
font-size: 26rpx;
|
||
line-height: 40rpx;
|
||
|
||
text {
|
||
font-size: 24rpx;
|
||
color: #ffffff;
|
||
padding: 4rpx 16rpx;
|
||
background: linear-gradient(to right, $base, $change-clor);
|
||
border-radius: 6rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.price-info {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 20rpx;
|
||
height: 80rpx;
|
||
|
||
.user-price {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
text {
|
||
color: $price-clor;
|
||
}
|
||
|
||
.min {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.max {
|
||
font-size: 32rpx;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
|
||
.vip-price {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 26rpx;
|
||
height: 26rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
text {
|
||
color: #fcb735;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |