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>
|