|
@@ -1,939 +1,967 @@
|
|
|
-<template>
|
|
|
- <view class="core">
|
|
|
- <!-- nav -->
|
|
|
- <u-navbar leftIconSize="0" :placeholder="true" bgColor="#ffffff">
|
|
|
- <view class="u-nav-slot" slot="left">
|
|
|
- <view class="u-nav-slot__input flex">
|
|
|
- <u-input v-model="goodsTitle" @confirm="toGoodsList()" confirmType="search" placeholder="搜索商品"
|
|
|
- border="none" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" />
|
|
|
- <!-- <view class="u-nav-slot__input__btn" @click="toGoodsList()">搜索</view> -->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </u-navbar>
|
|
|
- <!-- 固定顶部搜索、分类 -->
|
|
|
- <view class="fixed-top">
|
|
|
- <view class="fixed-top-classify">
|
|
|
- <u-tabs @change="changeClassify" :scrollable="true" :list="classifyList" lineWidth="20" lineHeight="2"
|
|
|
- lineColor="#FF8D0B" :activeStyle="{
|
|
|
- color: '#333',
|
|
|
- transform: 'scale(1.1)'
|
|
|
- }" :inactiveStyle="{
|
|
|
- color: '#999',
|
|
|
- transform: 'scale(1.1)'
|
|
|
- }" itemStyle="padding-left: 15px; padding-right: 15px; height: 44px; text-align: center;">
|
|
|
- </u-tabs>
|
|
|
- </view>
|
|
|
- <!-- 盲豆筛选 -->
|
|
|
- <view class="fixed-top-screen" v-if="scrollTop > 50">
|
|
|
- <view class="fixed-top-screen-content flex">
|
|
|
- <view class="fixed-top-screen-content__item flex">
|
|
|
- <view class="title">我的盲豆:</view>
|
|
|
- <view class="num">{{ initData.coinNum ? `${ initData.coinNum }` : '--' }}</view>
|
|
|
- </view>
|
|
|
- <view class="fixed-top-screen-content__item flex" @click="changeScreen(1)">
|
|
|
- <view class="title">盲豆价格</view>
|
|
|
- <view class="select flex" v-if="screenIndex == 1">
|
|
|
- <image src="../../static/core/core_up.png" mode="scaleToFill" v-if="priceShow" />
|
|
|
- <image src="../../static/core/core_down.png" mode="scaleToFill" v-else />
|
|
|
- </view>
|
|
|
- <view class="select flex" v-else>
|
|
|
- <image src="../../static/core/core_null.png" mode="scaleToFill" />
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="fixed-top-screen-content__item flex" @click="changeScreen(2)">
|
|
|
- <view class="title" v-if="!coinActionInfo.min && !coinActionInfo.max">盲豆区间</view>
|
|
|
- <view class="title flex" v-else>
|
|
|
- <view v-if="coinActionInfo.min">{{ coinActionInfo.min }}</view>
|
|
|
- <view v-if="coinActionInfo.max">-{{ coinActionInfo.max }}</view>
|
|
|
- <view>{{ coinActionInfo.desc }}</view>
|
|
|
- </view>
|
|
|
- <u-icon name="arrow-up" size="13" color="#fff" v-if="screenShow"></u-icon>
|
|
|
- <u-icon name="arrow-down" size="13" color="#fff" v-else></u-icon>
|
|
|
- </view>
|
|
|
- <view class="fixed-top-screen-content__coin" v-if="screenShow">
|
|
|
- <view class="fixed-top-screen-content__coin__list">
|
|
|
- <view class="item flex" :class="{ 'action': coinActionIndex == index }"
|
|
|
- v-for="(item, index) in coinList" :key="index" @click="selectCoin(item, index)">
|
|
|
- <text v-if="item.min">{{ item.min }}</text>
|
|
|
- <text v-if="item.max">-{{ item.max }}</text>
|
|
|
- <text>{{ item.desc }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="core-none"></view>
|
|
|
-
|
|
|
- <!-- 轮播 -->
|
|
|
- <view class="core-swiper" v-if="swiperList.length">
|
|
|
- <swiper class="core-swiper-centent" circular :indicator-dots="true" :autoplay="true" :interval="3000"
|
|
|
- indicator-active-color="#fff">
|
|
|
- <swiper-item class="swiper-item" v-for="(item, index) in swiperList" :key="index">
|
|
|
- <image :src="item.picUrl" mode="scaleToFill" @click="toPage(item)"></image>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 二级分类 -->
|
|
|
- <view class="core-category">
|
|
|
- <swiper class="core-category-swiper" :autoplay="false">
|
|
|
- <swiper-item class="swiper-item"
|
|
|
- v-for="(item, index) in classifyIndex == 0 ? classifyListFilter : classifyList[classifyIndex].list"
|
|
|
- :key="index">
|
|
|
- <view class="swiper-item-wrap">
|
|
|
- <view class="swiper-item-wrap__content" v-for="(items, indexs) in item" :key="indexs">
|
|
|
- <image :src="items.picUrl" mode="aspectFit" @click="toCategoryGoods(index, indexs)"></image>
|
|
|
- <view class="name">{{ items.name }}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 标签商品 -->
|
|
|
- <view class="tag-goods" v-for="(item, index) in exclusiveSingle" :key="index">
|
|
|
- <image class="tag-goods-imgBg" src="../../static/core/core_bg.png" mode="scaleToFill"></image>
|
|
|
- <view class="tag-goods-content">
|
|
|
- <view class="tag-goods-content-nav flex">
|
|
|
- <view class="tag-goods-content-nav__left flex">
|
|
|
- <image src="../../static/core/core_tag.png" mode="scaleToFill"></image>
|
|
|
- <view class="title">{{ item.name }}</view>
|
|
|
- <image src="../../static/core/core_tag.png" mode="scaleToFill"></image>
|
|
|
- </view>
|
|
|
- <view class="tag-goods-content-nav__right flex" @click="toTagGoods(item)">
|
|
|
- <view class="title">更多</view>
|
|
|
- <image src="../../static/core/core_right.png" mode="scaleToFill"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="tag-goods-content-list">
|
|
|
- <view class="tag-goods-content-list-item flex" v-for="(items, indexs) in item.data" :key="indexs"
|
|
|
- @click="toGoodsDetail(items)">
|
|
|
- <view class="image flex">
|
|
|
- <image :src="items.picUrl" mode="aspectFit"></image>
|
|
|
- </view>
|
|
|
- <view class="title">{{ items.exchangePrice }}盲豆</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 商品列表 -->
|
|
|
- <view class="core-goods">
|
|
|
- <view class="core-goods-list flex">
|
|
|
- <view class="core-goods-list-item flex" v-for="(item, index) in list" :key="index"
|
|
|
- @click="toGoodsDetail(item)">
|
|
|
- <view class="image-wrap flex">
|
|
|
- <image :src="item.picUrl" mode="aspectFit"></image>
|
|
|
- </view>
|
|
|
- <view class="content">
|
|
|
- <!-- #ifdef MP-ALIPAY -->
|
|
|
- <view class="content-titletwo">{{ item.title }}</view>
|
|
|
- <!-- #endif -->
|
|
|
- <!-- #ifndef MP-ALIPAY -->
|
|
|
- <view class="content-title ells-one">{{ item.title }}</view>
|
|
|
- <!-- #endif -->
|
|
|
- <view class="content-coin flex">
|
|
|
- <view class="content-coin__left flex">
|
|
|
- <image src="../../static/public/goods_coin.png" mode="scaleToFill"></image>
|
|
|
- <view class="num"><text>×</text>{{ item.exchangePrice }}</view>
|
|
|
- </view>
|
|
|
- <view class="content-coin__right" v-if="item.originPrice">{{ item.originPrice }}</view>
|
|
|
- </view>
|
|
|
- <view class="content-price">¥{{ $numberFormat(item.value) }}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- <view class="core-goods-list-item"></view> -->
|
|
|
- <view class=""></view>
|
|
|
- </view>
|
|
|
- <view class="flex empty" v-if="!list.length">
|
|
|
- <view class="center">
|
|
|
- <image class="center-img"
|
|
|
- src="https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/nodata_3.png"
|
|
|
- mode="scaleToFill"></image>
|
|
|
- <view class="center-font">还没有商品</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <u-loadmore :line="true" v-if="list.length" :status="status" :loading-text="'努力加载中'"
|
|
|
- :nomore-text="'已经到底了'" />
|
|
|
- </view>
|
|
|
-
|
|
|
- <custom-tab-bar :activeValue="'core'" />
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import env from '../../config/env.js'
|
|
|
- import $http from '@/utils/request.js'
|
|
|
- import appId from '@/config/appId.js'
|
|
|
- import CustomTabBar from '../../components/custom-tab-bar/custom-tab-bar.vue'
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- CustomTabBar,
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- status: 'nomore', //上拉刷新状态
|
|
|
- pageNum: 1,
|
|
|
- total: 0,
|
|
|
- list: [],
|
|
|
- exclusiveSingle: [],
|
|
|
- categoryId: '',
|
|
|
- classifyList: [], // 分类列表
|
|
|
- classifyIndex: 0, // 分类选中下标
|
|
|
- classifyListFilter: [],
|
|
|
- swiperList: [], // 轮播图
|
|
|
- goodsTitle: '',
|
|
|
- scrollTop: 0,
|
|
|
- screenIndex: 0,
|
|
|
- priceShow: false,
|
|
|
- priceSort: null,
|
|
|
- priceStep: 0,
|
|
|
- screenShow: false,
|
|
|
- initData: {},
|
|
|
- coinNum: {
|
|
|
- startPrice: null,
|
|
|
- endPrice: null
|
|
|
- },
|
|
|
- coinActionIndex: 0,
|
|
|
- coinActionInfo: {},
|
|
|
- coinList: [{
|
|
|
- min: null,
|
|
|
- max: null,
|
|
|
- desc: '全部'
|
|
|
- },
|
|
|
- {
|
|
|
- min: 1,
|
|
|
- max: 100,
|
|
|
- desc: ''
|
|
|
- },
|
|
|
- {
|
|
|
- min: 101,
|
|
|
- max: 200,
|
|
|
- desc: ''
|
|
|
- },
|
|
|
- {
|
|
|
- min: 201,
|
|
|
- max: 500,
|
|
|
- desc: ''
|
|
|
- },
|
|
|
- {
|
|
|
- min: 501,
|
|
|
- max: 1000,
|
|
|
- desc: ''
|
|
|
- },
|
|
|
- {
|
|
|
- min: 1001,
|
|
|
- max: 5000,
|
|
|
- desc: ''
|
|
|
- },
|
|
|
- {
|
|
|
- min: 5000,
|
|
|
- max: null,
|
|
|
- desc: '以上'
|
|
|
- },
|
|
|
- ],
|
|
|
- userInfo: '',
|
|
|
- loginState: '',
|
|
|
- };
|
|
|
- },
|
|
|
- onLoad(opthios) {
|
|
|
- if (opthios.userId) {
|
|
|
- uni.setStorageSync('shareUid', opthios.userId != 'undefined' ? opthios.userId : null)
|
|
|
- if (opthios.userId === undefined || opthios.userId === 'undefined') {
|
|
|
- uni.getSystemInfo({
|
|
|
- success(res) {
|
|
|
- log.error(
|
|
|
- `基础库:${ res.SDKVersion },设备:${ res.model }-${ res.system },页面:/pages/core/index.vue.`
|
|
|
- )
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- if (opthios.type) {
|
|
|
- uni.setStorageSync('shareType', opthios.type)
|
|
|
- }
|
|
|
- this.pageList()
|
|
|
- this.getExclusive()
|
|
|
- this.getClassify()
|
|
|
- this.getSwiper()
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- this.loginState = uni.getStorageSync('token') ? true : false
|
|
|
- if (this.loginState) {
|
|
|
- this.getBean()
|
|
|
- this.getBaseInfo()
|
|
|
- }
|
|
|
- },
|
|
|
- onPageScroll: function(e) {
|
|
|
- this.scrollTop = e.scrollTop
|
|
|
- },
|
|
|
- methods: {
|
|
|
- pageList() {
|
|
|
- this.pageNum = 1
|
|
|
- this.total = 0
|
|
|
- this.list = []
|
|
|
- this.getList()
|
|
|
- },
|
|
|
-
|
|
|
- // 获取分类
|
|
|
- getClassify() {
|
|
|
- $http.post('/api/v1/mp/user/exchange/category/listTree', {}).then(res => {
|
|
|
- if (res.code == 0) {
|
|
|
- let interval = 10
|
|
|
- this.classifyList = res && res.rows
|
|
|
- this.classifyList.forEach(item => {
|
|
|
- item.picUrl = env.filePublic + item.picUrl.split(',')[0] +
|
|
|
- '?imageView2/2/w/340'
|
|
|
- item.goodsCategoryList.forEach(ele => {
|
|
|
- ele.picUrl = env.filePublic + ele.picUrl.split(',')[0] +
|
|
|
- '?imageView2/2/w/340'
|
|
|
- })
|
|
|
- item.list = []
|
|
|
- if (item.goodsCategoryList.length > interval) {
|
|
|
- let num = Math.ceil(item.goodsCategoryList.length / interval)
|
|
|
- let arr = []
|
|
|
-
|
|
|
- let a = 0
|
|
|
- let stop = interval
|
|
|
- for (let i = 1; i <= num; i++) {
|
|
|
- arr = item.goodsCategoryList.slice(a, stop)
|
|
|
- a = i * interval
|
|
|
- stop = stop + interval
|
|
|
-
|
|
|
- }
|
|
|
- } else {
|
|
|
- item.list.push(item.goodsCategoryList)
|
|
|
- }
|
|
|
- })
|
|
|
- if (this.classifyList.length > interval) {
|
|
|
- let num = Math.ceil(this.classifyList.length / interval)
|
|
|
- let arr = []
|
|
|
-
|
|
|
- let a = 0
|
|
|
- let stop = interval
|
|
|
- for (let i = 1; i <= num; i++) {
|
|
|
- arr = this.classifyList.slice(a, stop)
|
|
|
- a = i * interval
|
|
|
- stop = stop + interval
|
|
|
- this.classifyListFilter.push(arr)
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.classifyListFilter = [
|
|
|
- [...this.classifyList]
|
|
|
- ]
|
|
|
- }
|
|
|
- this.classifyList.unshift({ name: '全部', categoryId: '' })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- //轮播图
|
|
|
- getSwiper() {
|
|
|
- $http.post(`/api/v1/mp/user/exchange/banner/list`, {
|
|
|
- noToken: true,
|
|
|
- location: "top"
|
|
|
- }).then(res => {
|
|
|
- res.data.forEach(item => item.picUrl = env.filePublic + item.picUrl.split(',')[0])
|
|
|
- this.swiperList = res.data
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- // 标签商品
|
|
|
- async getExclusive() {
|
|
|
- let resData = await $http.post(`/api/v1/mp/user/exchange/activity/list`, {
|
|
|
- noToken: true
|
|
|
- })
|
|
|
- let goodsList = []
|
|
|
- for (let item of resData.data) {
|
|
|
- let resDatas = await $http.post(`/api/v1/mp/user/exchange/goods/list?pageNum=1&pageSize=10`, {
|
|
|
- noToken: true,
|
|
|
- tagIds: item.tagId
|
|
|
- })
|
|
|
- goodsList.push({
|
|
|
- data: resDatas.rows,
|
|
|
- name: item.name,
|
|
|
- tagId: item.tagId
|
|
|
- })
|
|
|
- }
|
|
|
- goodsList.forEach(item => {
|
|
|
- item.data.forEach(items => {
|
|
|
- items.picUrl = env.filePublic + items.picUrl.split(',')[0] +
|
|
|
- '?imageView2/2/w/340'
|
|
|
- })
|
|
|
- })
|
|
|
- this.exclusiveSingle = goodsList
|
|
|
- },
|
|
|
-
|
|
|
- // 商品列表
|
|
|
- getList() {
|
|
|
- let data = {
|
|
|
- categoryId: this.categoryId,
|
|
|
- priceSort: this.priceSort,
|
|
|
- ...this.coinNum,
|
|
|
- noToken: true
|
|
|
- }
|
|
|
- $http.post(`/api/v1/mp/user/exchange/goods/list?pageNum=${this.pageNum}&pageSize=20`, data).then(
|
|
|
- res => {
|
|
|
- if (res.code == 0) {
|
|
|
- res.rows.forEach(item => {
|
|
|
- let picUrlArr = item.picUrl.split(',')
|
|
|
- item.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/340'
|
|
|
- })
|
|
|
-
|
|
|
- this.total = res.total
|
|
|
- this.list = this.list.concat(res.rows)
|
|
|
- }
|
|
|
- }).catch(() => {
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- getBean() {
|
|
|
- uni.showLoading({
|
|
|
- title: '加载中'
|
|
|
- });
|
|
|
- $http.post('/api/v1/mp/user/mine/init', {}).then(res => {
|
|
|
- uni.hideLoading();
|
|
|
- if (res.code == 0) {
|
|
|
- this.initData = res.data
|
|
|
- }
|
|
|
- }).catch(() => {
|
|
|
- uni.hideLoading();
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- // 切换分类
|
|
|
- changeClassify(e) {
|
|
|
- this.categoryId = e.categoryId
|
|
|
- this.classifyIndex = e.index
|
|
|
- this.screenIndex = 0
|
|
|
- this.priceStep = 0
|
|
|
- this.priceShow = false
|
|
|
- this.priceSort = null
|
|
|
- this.coinActionIndex = 0
|
|
|
- this.screenShow = false
|
|
|
- this.coinNum.endPrice = null
|
|
|
- this.coinNum.startPrice = null
|
|
|
- this.coinActionInfo = {}
|
|
|
- this.pageList()
|
|
|
- },
|
|
|
-
|
|
|
- // 盲豆筛选切换
|
|
|
- changeScreen(num) {
|
|
|
- this.screenIndex = num
|
|
|
- if (num == 1) {
|
|
|
- if (this.priceStep == 0) {
|
|
|
- this.priceStep++
|
|
|
- this.priceShow = true
|
|
|
- this.priceSort = 1
|
|
|
- } else if (this.priceStep == 1) {
|
|
|
- this.priceStep++
|
|
|
- this.priceShow = false
|
|
|
- this.priceSort = 2
|
|
|
- } else if (this.priceStep == 2) {
|
|
|
- this.priceStep = 0
|
|
|
- this.priceShow = false
|
|
|
- this.priceSort = null
|
|
|
- this.screenIndex = 0
|
|
|
- }
|
|
|
- this.pageList()
|
|
|
- } else if (num == 2) {
|
|
|
- this.priceStep = 0
|
|
|
- this.screenShow = !this.screenShow
|
|
|
- this.priceShow = false
|
|
|
- this.priceSort = null
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- selectCoin(item, index) {
|
|
|
- this.coinActionIndex = index
|
|
|
- this.coinActionInfo = item
|
|
|
- this.screenShow = !this.screenShow
|
|
|
- this.coinNum.endPrice = item.max
|
|
|
- this.coinNum.startPrice = item.min
|
|
|
- this.pageList()
|
|
|
- },
|
|
|
-
|
|
|
- // 跳转点击事件
|
|
|
- toPage(item) {
|
|
|
- if (item.type == "link") {
|
|
|
- uni.navigateTo({
|
|
|
- url: `/packageOperate/webview/index?linkUrl=${ item.linkUrl }`,
|
|
|
- })
|
|
|
- } else if (item.type == "tag") {
|
|
|
- uni.navigateTo({
|
|
|
- url: `/packageGoods/goods/list?name=${ item.name }&tagIds=${ item.goodsTags ? item.goodsTags : '' }`
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 商品详情
|
|
|
- toGoodsDetail(item) {
|
|
|
- uni.navigateTo({
|
|
|
- url: `/packageGoods/goods/detail?id=${ item.goodsId }`
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- // 商品列表
|
|
|
- toGoodsList() {
|
|
|
- uni.navigateTo({
|
|
|
- url: `/packageGoods/goods/list?title=${ this.goodsTitle }`
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- // 商品标签
|
|
|
- toTagGoods(item) {
|
|
|
- uni.navigateTo({
|
|
|
- url: `/packageGoods/goods/list?name=${ item.name }&tagIds=${ item.tagId ? item.tagId : '' }`
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- // 商品分类
|
|
|
- toCategoryGoods(index, indexs) {
|
|
|
- let list = this.classifyIndex == 0 ? this.classifyListFilter : this.classifyList[this.classifyIndex].list
|
|
|
- let item = list[index][indexs]
|
|
|
- uni.navigateTo({
|
|
|
- url: `/packageGoods/goods/list?name=${ item.name }&categoryId=${ item.categoryId ? item.categoryId : '' }`
|
|
|
- })
|
|
|
- },
|
|
|
- getBaseInfo() {
|
|
|
- $http.post('/api/v1/mp/user/getLoginUserinfo', { appSource: appId }).then(res => {
|
|
|
- uni.hideLoading();
|
|
|
- if (res.code == 0) {
|
|
|
- this.userInfo = res.data
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- },
|
|
|
- onReachBottom() {
|
|
|
- // 判断是否有数据
|
|
|
- if (this.total < this.pageNum * 20) return;
|
|
|
- this.status = 'loading';
|
|
|
- ++this.pageNum
|
|
|
- if (this.total < this.pageNum * 20) this.status = 'nomore';
|
|
|
- else this.status = 'loading';
|
|
|
- this.getList()
|
|
|
- },
|
|
|
- //分享好友
|
|
|
- onShareAppMessage(res) {
|
|
|
- return {
|
|
|
- title: '盲票,玩的就是有趣',
|
|
|
- path: '/pages/index/index',
|
|
|
- }
|
|
|
- },
|
|
|
- //分享朋友圈
|
|
|
- onShareTimeline() {
|
|
|
- return {
|
|
|
- title: '盲票,玩的就是有趣',
|
|
|
- query: `userId=${ this.userInfo.userId?this.userInfo.userId:null }&type=1`
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- .core {
|
|
|
- background-color: #fff;
|
|
|
-
|
|
|
- &-none {
|
|
|
- height: 120rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 搜索
|
|
|
- .u-nav-slot {
|
|
|
- text {
|
|
|
- font-size: 32rpx;
|
|
|
- }
|
|
|
-
|
|
|
- &__input {
|
|
|
- position: relative;
|
|
|
- height: 70rpx;
|
|
|
- width: 518rpx;
|
|
|
- padding-left: 30rpx;
|
|
|
- background: #F4F5F6;
|
|
|
- border-radius: 35rpx;
|
|
|
- padding-right: 30rpx;
|
|
|
-
|
|
|
- &__btn {
|
|
|
- z-index: 200;
|
|
|
- width: 140rpx;
|
|
|
- height: 70rpx;
|
|
|
- line-height: 70rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- text-align: center;
|
|
|
- font-weight: bold;
|
|
|
- color: #fff;
|
|
|
- background-color: #FF8D0B;
|
|
|
- border-radius: 35rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 固定搜索、分类
|
|
|
- .fixed-top {
|
|
|
- position: fixed;
|
|
|
- z-index: 100;
|
|
|
- width: 100%;
|
|
|
- background-color: #fff;
|
|
|
-
|
|
|
- // 搜索
|
|
|
- &-search {
|
|
|
- justify-content: space-between;
|
|
|
- padding: 14rpx 30rpx 34rpx;
|
|
|
-
|
|
|
- &__input {
|
|
|
- position: relative;
|
|
|
- flex: 1;
|
|
|
- height: 84rpx;
|
|
|
- padding-left: 46rpx;
|
|
|
- background: #F4F5F6;
|
|
|
- border-radius: 20rpx;
|
|
|
-
|
|
|
- &__btn {
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- width: 110rpx;
|
|
|
- height: 76rpx;
|
|
|
- line-height: 76rpx;
|
|
|
- font-size: 34rpx;
|
|
|
- text-align: center;
|
|
|
- font-weight: bold;
|
|
|
- color: #FFC062;
|
|
|
- background-color: #333333;
|
|
|
- border-radius: 18rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- image {
|
|
|
- width: 52rpx;
|
|
|
- height: 52rpx;
|
|
|
- margin-left: 50rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 分类
|
|
|
- &-classify {
|
|
|
- padding-bottom: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- // 盲豆筛选
|
|
|
- &-screen {
|
|
|
- height: 64rpx;
|
|
|
-
|
|
|
- &-content {
|
|
|
- position: relative;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 0 34rpx;
|
|
|
- color: #fff;
|
|
|
- height: 100%;
|
|
|
- background: #F9822C;
|
|
|
-
|
|
|
- &__item {
|
|
|
- .title {
|
|
|
- margin-right: 14rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .select {
|
|
|
- flex-direction: column;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 18rpx;
|
|
|
- height: 26rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &__coin {
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- bottom: -390rpx;
|
|
|
- width: 200rpx;
|
|
|
- height: 390rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- box-shadow: 0px 0px 2px 0px rgba(100, 100, 100, 0.1);
|
|
|
-
|
|
|
- &__list {
|
|
|
- padding-top: 20rpx;
|
|
|
- color: #666;
|
|
|
-
|
|
|
- .item {
|
|
|
- margin-bottom: 30rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- line-height: 26rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .action {
|
|
|
- color: #F9822C;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 轮播
|
|
|
- .core-swiper {
|
|
|
- margin: 0 34rpx 20rpx;
|
|
|
- border-radius: 16rpx;
|
|
|
-
|
|
|
- &-centent {
|
|
|
- height: 300rpx;
|
|
|
-
|
|
|
- .swiper-item {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border-radius: 16rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 二级分类
|
|
|
- .core-category {
|
|
|
- width: 100%;
|
|
|
- height: 360rpx;
|
|
|
- margin-bottom: 34rpx;
|
|
|
- padding: 0 34rpx;
|
|
|
-
|
|
|
- &-swiper {
|
|
|
-
|
|
|
- width: 100%;
|
|
|
- height: 360rpx;
|
|
|
-
|
|
|
- .swiper-item {
|
|
|
- width: 100%;
|
|
|
- height: 360rpx;
|
|
|
-
|
|
|
- &-wrap {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
- &__content {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- width: 20%;
|
|
|
- height: 50%;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 90%;
|
|
|
- height: 70%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 标签商品
|
|
|
- .tag-goods {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- position: relative;
|
|
|
- margin: 0 34rpx 34rpx;
|
|
|
- height: 350rpx;
|
|
|
-
|
|
|
- &-imgBg {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- width: 100%;
|
|
|
- height: 350rpx;
|
|
|
- }
|
|
|
-
|
|
|
- &-content {
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- z-index: 5;
|
|
|
- padding: 26rpx 22rpx;
|
|
|
-
|
|
|
- &-nav {
|
|
|
- justify-content: space-between;
|
|
|
- height: 40rpx;
|
|
|
- margin-bottom: 10rpx;
|
|
|
-
|
|
|
- &__left {
|
|
|
- image {
|
|
|
- width: 40rpx;
|
|
|
- height: 30rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .title {
|
|
|
- font-family: YouSheBiaoTiHei;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 40rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- padding: 0 36rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &__right {
|
|
|
- .title {
|
|
|
- font-family: YouSheBiaoTiHei;
|
|
|
- font-weight: 400;
|
|
|
- color: #FFFFFF;
|
|
|
- margin-right: 12rpx;
|
|
|
- }
|
|
|
-
|
|
|
- image {
|
|
|
- width: 22rpx;
|
|
|
- height: 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &-list {
|
|
|
- display: flex;
|
|
|
- height: 260rpx;
|
|
|
- overflow-x: auto;
|
|
|
-
|
|
|
- &-item {
|
|
|
- flex-direction: column;
|
|
|
- margin-right: 14rpx;
|
|
|
-
|
|
|
- .image {
|
|
|
- width: 180rpx;
|
|
|
- height: 180rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- box-shadow: 0px 0px 4px 0px rgba(100, 100, 100, 0.13);
|
|
|
- border-radius: 4rpx;
|
|
|
- margin-bottom: 24rpx;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .title {
|
|
|
- text-align: center;
|
|
|
- line-height: 28rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 商品列表
|
|
|
- .core-goods {
|
|
|
- padding: 0 34rpx;
|
|
|
-
|
|
|
- &-list {
|
|
|
- width: 100%;
|
|
|
- justify-content: space-between;
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
- &-item {
|
|
|
- flex-direction: column;
|
|
|
- justify-content: flex-start;
|
|
|
- width: 48%;
|
|
|
- padding-bottom: 32rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- box-shadow: 0px 0px 3px 0px rgba(100, 100, 100, 0.1);
|
|
|
- border-radius: 16rpx;
|
|
|
- margin-bottom: 30rpx;
|
|
|
-
|
|
|
- .image-wrap {
|
|
|
- width: 100%;
|
|
|
- height: 320rpx;
|
|
|
- margin-bottom: 16rpx;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border-radius: 16rpx 16rpx 0 0;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .content {
|
|
|
- width: 100%;
|
|
|
- padding: 0 22rpx;
|
|
|
-
|
|
|
- &-title {
|
|
|
- height: 28rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- line-height: 28rpx;
|
|
|
- font-weight: bold;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- &-titletwo {
|
|
|
- height: 34rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- line-height: 34rpx;
|
|
|
- font-weight: bold;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
-
|
|
|
- &-coin {
|
|
|
- height: 34rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- justify-content: space-between;
|
|
|
- margin-top: 30rpx;
|
|
|
- margin-bottom: 24rpx;
|
|
|
-
|
|
|
- &__left {
|
|
|
- margin-right: 24rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: bold;
|
|
|
-
|
|
|
- text {
|
|
|
- font-weight: normal;
|
|
|
- }
|
|
|
-
|
|
|
- image {
|
|
|
- width: 34rpx;
|
|
|
- height: 34rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &__right {
|
|
|
- color: #666666;
|
|
|
- text-decoration: line-through;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &-price {
|
|
|
- font-size: 24rpx;
|
|
|
- line-height: 24rpx;
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .empty {
|
|
|
- .center {
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- &-img {
|
|
|
- width: 228rpx;
|
|
|
- height: 320rpx;
|
|
|
- }
|
|
|
-
|
|
|
- &-font {
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: 400;
|
|
|
- color: #999999;
|
|
|
- margin-bottom: 200rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
|
|
+<template>
|
|
|
+ <view class="core">
|
|
|
+ <!-- nav -->
|
|
|
+ <u-navbar leftIconSize="0" :placeholder="true" bgColor="#ffffff">
|
|
|
+ <view class="u-nav-slot" slot="left">
|
|
|
+ <view class="u-nav-slot__input flex">
|
|
|
+ <u-input v-model="goodsTitle" @confirm="toGoodsList()" confirmType="search" placeholder="搜索商品"
|
|
|
+ border="none" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" />
|
|
|
+ <!-- <view class="u-nav-slot__input__btn" @click="toGoodsList()">搜索</view> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-navbar>
|
|
|
+ <!-- 固定顶部搜索、分类 -->
|
|
|
+ <view class="fixed-top">
|
|
|
+ <view class="fixed-top-classify">
|
|
|
+ <u-tabs @change="changeClassify" :scrollable="true" :list="classifyList" lineWidth="20" lineHeight="2"
|
|
|
+ lineColor="#FF8D0B" :activeStyle="{
|
|
|
+ color: '#333',
|
|
|
+ transform: 'scale(1.1)'
|
|
|
+ }" :inactiveStyle="{
|
|
|
+ color: '#999',
|
|
|
+ transform: 'scale(1.1)'
|
|
|
+ }" itemStyle="padding-left: 15px; padding-right: 15px; height: 44px; text-align: center;">
|
|
|
+ </u-tabs>
|
|
|
+ </view>
|
|
|
+ <!-- 盲豆筛选 -->
|
|
|
+ <view class="fixed-top-screen" v-if="scrollTop > 50">
|
|
|
+ <view class="fixed-top-screen-content flex">
|
|
|
+ <view class="fixed-top-screen-content__item flex">
|
|
|
+ <view class="title">我的盲豆:</view>
|
|
|
+ <view class="num">{{ initData.coinNum ? `${ initData.coinNum }` : '--' }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="fixed-top-screen-content__item flex" @click="changeScreen(1)">
|
|
|
+ <view class="title">盲豆价格</view>
|
|
|
+ <view class="select flex" v-if="screenIndex == 1">
|
|
|
+ <image src="../../static/core/core_up.png" mode="scaleToFill" v-if="priceShow" />
|
|
|
+ <image src="../../static/core/core_down.png" mode="scaleToFill" v-else />
|
|
|
+ </view>
|
|
|
+ <view class="select flex" v-else>
|
|
|
+ <image src="../../static/core/core_null.png" mode="scaleToFill" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="fixed-top-screen-content__item flex" @click="changeScreen(2)">
|
|
|
+ <view class="title" v-if="!coinActionInfo.min && !coinActionInfo.max">盲豆区间</view>
|
|
|
+ <view class="title flex" v-else>
|
|
|
+ <view v-if="coinActionInfo.min">{{ coinActionInfo.min }}</view>
|
|
|
+ <view v-if="coinActionInfo.max">-{{ coinActionInfo.max }}</view>
|
|
|
+ <view>{{ coinActionInfo.desc }}</view>
|
|
|
+ </view>
|
|
|
+ <u-icon name="arrow-up" size="13" color="#fff" v-if="screenShow"></u-icon>
|
|
|
+ <u-icon name="arrow-down" size="13" color="#fff" v-else></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="fixed-top-screen-content__coin" v-if="screenShow">
|
|
|
+ <view class="fixed-top-screen-content__coin__list">
|
|
|
+ <view class="item flex" :class="{ 'action': coinActionIndex == index }"
|
|
|
+ v-for="(item, index) in coinList" :key="index" @click="selectCoin(item, index)">
|
|
|
+ <text v-if="item.min">{{ item.min }}</text>
|
|
|
+ <text v-if="item.max">-{{ item.max }}</text>
|
|
|
+ <text>{{ item.desc }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="core-none"></view>
|
|
|
+
|
|
|
+ <!-- 轮播 -->
|
|
|
+ <view class="core-swiper" v-if="swiperList.length">
|
|
|
+ <swiper class="core-swiper-centent" circular :indicator-dots="true" :autoplay="true" :interval="3000"
|
|
|
+ indicator-active-color="#fff">
|
|
|
+ <swiper-item class="swiper-item" v-for="(item, index) in swiperList" :key="index">
|
|
|
+ <image :src="item.picUrl" mode="scaleToFill" @click="toPage(item)"></image>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 二级分类 -->
|
|
|
+ <view class="core-category">
|
|
|
+ <swiper class="core-category-swiper" :autoplay="false">
|
|
|
+ <swiper-item class="swiper-item"
|
|
|
+ v-for="(item, index) in classifyIndex == 0 ? classifyListFilter : classifyList[classifyIndex].list"
|
|
|
+ :key="index">
|
|
|
+ <view class="swiper-item-wrap">
|
|
|
+ <view class="swiper-item-wrap__content" v-for="(items, indexs) in item" :key="indexs">
|
|
|
+ <image :src="items.picUrl" mode="aspectFit" @click="toCategoryGoods(index, indexs)"></image>
|
|
|
+ <view class="name">{{ items.name }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 标签商品 -->
|
|
|
+ <view class="tag-goods" v-for="(item, index) in exclusiveSingle" :key="index">
|
|
|
+ <image class="tag-goods-imgBg" src="../../static/core/core_bg.png" mode="scaleToFill"></image>
|
|
|
+ <view class="tag-goods-content">
|
|
|
+ <view class="tag-goods-content-nav flex">
|
|
|
+ <view class="tag-goods-content-nav__left flex">
|
|
|
+ <image src="../../static/core/core_tag.png" mode="scaleToFill"></image>
|
|
|
+ <view class="title">{{ item.name }}</view>
|
|
|
+ <image src="../../static/core/core_tag.png" mode="scaleToFill"></image>
|
|
|
+ </view>
|
|
|
+ <view class="tag-goods-content-nav__right flex" @click="toTagGoods(item)">
|
|
|
+ <view class="title">更多</view>
|
|
|
+ <image src="../../static/core/core_right.png" mode="scaleToFill"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="tag-goods-content-list">
|
|
|
+ <view class="tag-goods-content-list-item flex" v-for="(items, indexs) in item.data" :key="indexs"
|
|
|
+ @click="toGoodsDetail(items)">
|
|
|
+ <view class="image flex">
|
|
|
+ <image :src="items.picUrl" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <view class="title">{{ items.exchangePrice }}盲豆</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 商品列表 -->
|
|
|
+ <view class="core-goods">
|
|
|
+ <view class="core-goods-list flex">
|
|
|
+ <view class="core-goods-list-item flex" v-for="(item, index) in list" :key="index"
|
|
|
+ @click="toGoodsDetail(item)">
|
|
|
+ <view class="image-wrap flex">
|
|
|
+ <image :src="item.picUrl" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ <!-- #ifdef MP-ALIPAY -->
|
|
|
+ <view class="content-titletwo">{{ item.title }}</view>
|
|
|
+ <!-- #endif -->
|
|
|
+ <!-- #ifndef MP-ALIPAY -->
|
|
|
+ <view class="content-title ells-one">{{ item.title }}</view>
|
|
|
+ <!-- #endif -->
|
|
|
+ <view class="content-coin flex">
|
|
|
+ <view class="content-coin__left flex">
|
|
|
+ <image src="../../static/public/goods_coin.png" mode="scaleToFill"></image>
|
|
|
+ <view class="num"><text>×</text>{{ item.exchangePrice }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="content-coin__right" v-if="item.originPrice">{{ item.originPrice }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="content-price">¥{{ $numberFormat(item.value) }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="core-goods-list-item"></view> -->
|
|
|
+ <view class=""></view>
|
|
|
+ </view>
|
|
|
+ <view class="flex empty" v-if="!list.length">
|
|
|
+ <view class="center">
|
|
|
+ <image class="center-img"
|
|
|
+ src="https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/nodata_3.png"
|
|
|
+ mode="scaleToFill"></image>
|
|
|
+ <view class="center-font">还没有商品</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-loadmore :line="true" v-if="list.length" :status="status" :loading-text="'努力加载中'"
|
|
|
+ :nomore-text="'已经到底了'" />
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <custom-tab-bar :activeValue="'core'" />
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import env from '../../config/env.js'
|
|
|
+ import $http from '@/utils/request.js'
|
|
|
+ import appId from '@/config/appId.js'
|
|
|
+ import CustomTabBar from '../../components/custom-tab-bar/custom-tab-bar.vue'
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ CustomTabBar,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ status: 'nomore', //上拉刷新状态
|
|
|
+ pageNum: 1,
|
|
|
+ total: 0,
|
|
|
+ list: [],
|
|
|
+ exclusiveSingle: [],
|
|
|
+ categoryId: '',
|
|
|
+ classifyList: [], // 分类列表
|
|
|
+ classifyIndex: 0, // 分类选中下标
|
|
|
+ classifyListFilter: [],
|
|
|
+ swiperList: [], // 轮播图
|
|
|
+ goodsTitle: '',
|
|
|
+ scrollTop: 0,
|
|
|
+ screenIndex: 0,
|
|
|
+ priceShow: false,
|
|
|
+ priceSort: null,
|
|
|
+ priceStep: 0,
|
|
|
+ screenShow: false,
|
|
|
+ initData: {},
|
|
|
+ coinNum: {
|
|
|
+ startPrice: null,
|
|
|
+ endPrice: null
|
|
|
+ },
|
|
|
+ coinActionIndex: 0,
|
|
|
+ coinActionInfo: {},
|
|
|
+ coinList: [{
|
|
|
+ min: null,
|
|
|
+ max: null,
|
|
|
+ desc: '全部'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 1,
|
|
|
+ max: 100,
|
|
|
+ desc: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 101,
|
|
|
+ max: 200,
|
|
|
+ desc: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 201,
|
|
|
+ max: 500,
|
|
|
+ desc: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 501,
|
|
|
+ max: 1000,
|
|
|
+ desc: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 1001,
|
|
|
+ max: 5000,
|
|
|
+ desc: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 5000,
|
|
|
+ max: null,
|
|
|
+ desc: '以上'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ userInfo: '',
|
|
|
+ loginState: '',
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(opthios) {
|
|
|
+ if (opthios.userId) {
|
|
|
+ uni.setStorageSync('shareUid', opthios.userId != 'undefined' ? opthios.userId : null)
|
|
|
+ if (opthios.userId === undefined || opthios.userId === 'undefined') {
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success(res) {
|
|
|
+ log.error(
|
|
|
+ `基础库:${ res.SDKVersion },设备:${ res.model }-${ res.system },页面:/pages/core/index.vue.`
|
|
|
+ )
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ if (opthios.type) {
|
|
|
+ uni.setStorageSync('shareType', opthios.type)
|
|
|
+ }
|
|
|
+ this.pageList()
|
|
|
+ this.getExclusive()
|
|
|
+ this.getClassify()
|
|
|
+ this.getSwiper()
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.loginState = uni.getStorageSync('token') ? true : false
|
|
|
+ if (this.loginState) {
|
|
|
+ this.getBean()
|
|
|
+ this.getBaseInfo()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onPageScroll: function(e) {
|
|
|
+ this.scrollTop = e.scrollTop
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ pageList() {
|
|
|
+ this.pageNum = 1
|
|
|
+ this.total = 0
|
|
|
+ this.list = []
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取分类
|
|
|
+ getClassify() {
|
|
|
+ $http.post('/api/v1/mp/user/exchange/category/listTree', {}).then(res => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ let interval = 10
|
|
|
+ this.classifyList = res && res.rows
|
|
|
+ this.classifyList.forEach(item => {
|
|
|
+ item.picUrl = env.filePublic + item.picUrl.split(',')[0] +
|
|
|
+ '?imageView2/2/w/340'
|
|
|
+ item.goodsCategoryList.forEach(ele => {
|
|
|
+ ele.picUrl = env.filePublic + ele.picUrl.split(',')[0] +
|
|
|
+ '?imageView2/2/w/340'
|
|
|
+ })
|
|
|
+ item.list = []
|
|
|
+ if (item.goodsCategoryList.length > interval) {
|
|
|
+ let num = Math.ceil(item.goodsCategoryList.length / interval)
|
|
|
+ let arr = []
|
|
|
+
|
|
|
+ let a = 0
|
|
|
+ let stop = interval
|
|
|
+ for (let i = 1; i <= num; i++) {
|
|
|
+ arr = item.goodsCategoryList.slice(a, stop)
|
|
|
+ a = i * interval
|
|
|
+ stop = stop + interval
|
|
|
+
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ item.list.push(item.goodsCategoryList)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (this.classifyList.length > interval) {
|
|
|
+ let num = Math.ceil(this.classifyList.length / interval)
|
|
|
+ let arr = []
|
|
|
+
|
|
|
+ let a = 0
|
|
|
+ let stop = interval
|
|
|
+ for (let i = 1; i <= num; i++) {
|
|
|
+ arr = this.classifyList.slice(a, stop)
|
|
|
+ a = i * interval
|
|
|
+ stop = stop + interval
|
|
|
+ this.classifyListFilter.push(arr)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.classifyListFilter = [
|
|
|
+ [...this.classifyList]
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ this.classifyList.unshift({ name: '全部', categoryId: '' })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ //轮播图
|
|
|
+ getSwiper() {
|
|
|
+ $http.post(`/api/v1/mp/user/exchange/banner/list`, {
|
|
|
+ noToken: true,
|
|
|
+ location: "top"
|
|
|
+ }).then(res => {
|
|
|
+ res.data.forEach(item => item.picUrl = env.filePublic + item.picUrl.split(',')[0])
|
|
|
+ this.swiperList = res.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 标签商品
|
|
|
+ async getExclusive() {
|
|
|
+ let resData = await $http.post(`/api/v1/mp/user/exchange/activity/list`, {
|
|
|
+ noToken: true
|
|
|
+ })
|
|
|
+ let goodsList = []
|
|
|
+ for (let item of resData.data) {
|
|
|
+ let resDatas = await $http.post(`/api/v1/mp/user/exchange/goods/list?pageNum=1&pageSize=10`, {
|
|
|
+ noToken: true,
|
|
|
+ tagIds: item.tagId
|
|
|
+ })
|
|
|
+ goodsList.push({
|
|
|
+ data: resDatas.rows,
|
|
|
+ name: item.name,
|
|
|
+ tagId: item.tagId
|
|
|
+ })
|
|
|
+ }
|
|
|
+ goodsList.forEach(item => {
|
|
|
+ item.data.forEach(items => {
|
|
|
+ items.picUrl = env.filePublic + items.picUrl.split(',')[0] +
|
|
|
+ '?imageView2/2/w/340'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.exclusiveSingle = goodsList
|
|
|
+ },
|
|
|
+
|
|
|
+ // 商品列表
|
|
|
+ getList() {
|
|
|
+ let data = {
|
|
|
+ categoryId: this.categoryId,
|
|
|
+ priceSort: this.priceSort,
|
|
|
+ ...this.coinNum,
|
|
|
+ noToken: true
|
|
|
+ }
|
|
|
+ $http.post(`/api/v1/mp/user/exchange/goods/list?pageNum=${this.pageNum}&pageSize=20`, data).then(
|
|
|
+ res => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ res.rows.forEach(item => {
|
|
|
+ let picUrlArr = item.picUrl.split(',')
|
|
|
+ item.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/340'
|
|
|
+ })
|
|
|
+
|
|
|
+ this.total = res.total
|
|
|
+ this.list = this.list.concat(res.rows)
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ getBean() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ });
|
|
|
+ $http.post('/api/v1/mp/user/mine/init', {}).then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.initData = res.data
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 切换分类
|
|
|
+ changeClassify(e) {
|
|
|
+ this.categoryId = e.categoryId
|
|
|
+ this.classifyIndex = e.index
|
|
|
+ this.screenIndex = 0
|
|
|
+ this.priceStep = 0
|
|
|
+ this.priceShow = false
|
|
|
+ this.priceSort = null
|
|
|
+ this.coinActionIndex = 0
|
|
|
+ this.screenShow = false
|
|
|
+ this.coinNum.endPrice = null
|
|
|
+ this.coinNum.startPrice = null
|
|
|
+ this.coinActionInfo = {}
|
|
|
+ this.pageList()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 盲豆筛选切换
|
|
|
+ changeScreen(num) {
|
|
|
+ this.screenIndex = num
|
|
|
+ if (num == 1) {
|
|
|
+ if (this.priceStep == 0) {
|
|
|
+ this.priceStep++
|
|
|
+ this.priceShow = true
|
|
|
+ this.priceSort = 1
|
|
|
+ } else if (this.priceStep == 1) {
|
|
|
+ this.priceStep++
|
|
|
+ this.priceShow = false
|
|
|
+ this.priceSort = 2
|
|
|
+ } else if (this.priceStep == 2) {
|
|
|
+ this.priceStep = 0
|
|
|
+ this.priceShow = false
|
|
|
+ this.priceSort = null
|
|
|
+ this.screenIndex = 0
|
|
|
+ }
|
|
|
+ this.pageList()
|
|
|
+ } else if (num == 2) {
|
|
|
+ this.priceStep = 0
|
|
|
+ this.screenShow = !this.screenShow
|
|
|
+ this.priceShow = false
|
|
|
+ this.priceSort = null
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ selectCoin(item, index) {
|
|
|
+ this.coinActionIndex = index
|
|
|
+ this.coinActionInfo = item
|
|
|
+ this.screenShow = !this.screenShow
|
|
|
+ this.coinNum.endPrice = item.max
|
|
|
+ this.coinNum.startPrice = item.min
|
|
|
+ this.pageList()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 跳转点击事件
|
|
|
+ toPage(item) {
|
|
|
+ if (item.type == "link") {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/packageOperate/webview/index?linkUrl=${ item.linkUrl }`,
|
|
|
+ })
|
|
|
+ } else if (item.type == "tag") {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/packageGoods/goods/list?name=${ item.name }&tagIds=${ item.goodsTags ? item.goodsTags : '' }`
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 商品详情
|
|
|
+ toGoodsDetail(item) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/packageGoods/goods/detail?id=${ item.goodsId }`
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 商品列表
|
|
|
+ toGoodsList() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/packageGoods/goods/list?title=${ this.goodsTitle }`
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 商品标签
|
|
|
+ toTagGoods(item) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/packageGoods/goods/list?name=${ item.name }&tagIds=${ item.tagId ? item.tagId : '' }`
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 商品分类
|
|
|
+ toCategoryGoods(index, indexs) {
|
|
|
+ let list = this.classifyIndex == 0 ? this.classifyListFilter : this.classifyList[this.classifyIndex].list
|
|
|
+ let item = list[index][indexs]
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/packageGoods/goods/list?name=${ item.name }&categoryId=${ item.categoryId ? item.categoryId : '' }`
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getBaseInfo() {
|
|
|
+ $http.post('/api/v1/mp/user/getLoginUserinfo', { appSource: appId }).then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.userInfo = res.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ // 判断是否有数据
|
|
|
+ if (this.total < this.pageNum * 20) return;
|
|
|
+ this.status = 'loading';
|
|
|
+ ++this.pageNum
|
|
|
+ if (this.total < this.pageNum * 20) this.status = 'nomore';
|
|
|
+ else this.status = 'loading';
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ //分享好友
|
|
|
+ onShareAppMessage(res) {
|
|
|
+ return {
|
|
|
+ title: '盲票,玩的就是有趣',
|
|
|
+ path: '/pages/index/index',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //分享朋友圈
|
|
|
+ onShareTimeline() {
|
|
|
+ return {
|
|
|
+ title: '盲票,玩的就是有趣',
|
|
|
+ query: `userId=${ this.userInfo.userId?this.userInfo.userId:null }&type=1`
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .core {
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ &-none {
|
|
|
+ height: 120rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 搜索
|
|
|
+ .u-nav-slot {
|
|
|
+ text {
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* #ifdef H5 */
|
|
|
+ &__input {
|
|
|
+ position: relative;
|
|
|
+ height: 70rpx;
|
|
|
+ width: 700rpx;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ background: #F4F5F6;
|
|
|
+ border-radius: 35rpx;
|
|
|
+
|
|
|
+ &__btn {
|
|
|
+ z-index: 200;
|
|
|
+ width: 300rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ line-height: 70rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #FF8D0B;
|
|
|
+ border-radius: 35rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* #endif */
|
|
|
+ /* #ifndef H5 */
|
|
|
+ &__input {
|
|
|
+ position: relative;
|
|
|
+ height: 70rpx;
|
|
|
+ width: 518rpx;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ background: #F4F5F6;
|
|
|
+ border-radius: 35rpx;
|
|
|
+ padding-right: 30rpx;
|
|
|
+
|
|
|
+ &__btn {
|
|
|
+ z-index: 200;
|
|
|
+ width: 140rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ line-height: 70rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #FF8D0B;
|
|
|
+ border-radius: 35rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* #endif */
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // 固定搜索、分类
|
|
|
+ .fixed-top {
|
|
|
+ position: fixed;
|
|
|
+ z-index: 100;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ // 搜索
|
|
|
+ &-search {
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 14rpx 30rpx 34rpx;
|
|
|
+
|
|
|
+ &__input {
|
|
|
+ position: relative;
|
|
|
+ flex: 1;
|
|
|
+ height: 84rpx;
|
|
|
+ padding-left: 46rpx;
|
|
|
+ background: #F4F5F6;
|
|
|
+ border-radius: 20rpx;
|
|
|
+
|
|
|
+ &__btn {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ width: 110rpx;
|
|
|
+ height: 76rpx;
|
|
|
+ line-height: 76rpx;
|
|
|
+ font-size: 34rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFC062;
|
|
|
+ background-color: #333333;
|
|
|
+ border-radius: 18rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 52rpx;
|
|
|
+ height: 52rpx;
|
|
|
+ margin-left: 50rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 分类
|
|
|
+ &-classify {
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 盲豆筛选
|
|
|
+ &-screen {
|
|
|
+ height: 64rpx;
|
|
|
+
|
|
|
+ &-content {
|
|
|
+ position: relative;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 34rpx;
|
|
|
+ color: #fff;
|
|
|
+ height: 100%;
|
|
|
+ background: #F9822C;
|
|
|
+
|
|
|
+ &__item {
|
|
|
+ .title {
|
|
|
+ margin-right: 14rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .select {
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 18rpx;
|
|
|
+ height: 26rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__coin {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: -390rpx;
|
|
|
+ width: 200rpx;
|
|
|
+ height: 390rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px 0px 2px 0px rgba(100, 100, 100, 0.1);
|
|
|
+
|
|
|
+ &__list {
|
|
|
+ padding-top: 20rpx;
|
|
|
+ color: #666;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ line-height: 26rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .action {
|
|
|
+ color: #F9822C;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 轮播
|
|
|
+ .core-swiper {
|
|
|
+ margin: 0 34rpx 20rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+
|
|
|
+ &-centent {
|
|
|
+ height: 300rpx;
|
|
|
+
|
|
|
+ .swiper-item {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 二级分类
|
|
|
+ .core-category {
|
|
|
+ width: 100%;
|
|
|
+ height: 360rpx;
|
|
|
+ margin-bottom: 34rpx;
|
|
|
+ padding: 0 34rpx;
|
|
|
+
|
|
|
+ &-swiper {
|
|
|
+
|
|
|
+ width: 100%;
|
|
|
+ height: 360rpx;
|
|
|
+
|
|
|
+ .swiper-item {
|
|
|
+ width: 100%;
|
|
|
+ height: 360rpx;
|
|
|
+
|
|
|
+ &-wrap {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ &__content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 20%;
|
|
|
+ height: 50%;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 90%;
|
|
|
+ height: 70%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 标签商品
|
|
|
+ .tag-goods {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ margin: 0 34rpx 34rpx;
|
|
|
+ height: 350rpx;
|
|
|
+
|
|
|
+ &-imgBg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 350rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-content {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ z-index: 5;
|
|
|
+ padding: 26rpx 22rpx;
|
|
|
+
|
|
|
+ &-nav {
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 40rpx;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+
|
|
|
+ &__left {
|
|
|
+ image {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-family: YouSheBiaoTiHei;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ padding: 0 36rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__right {
|
|
|
+ .title {
|
|
|
+ font-family: YouSheBiaoTiHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-right: 12rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 22rpx;
|
|
|
+ height: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-list {
|
|
|
+ display: flex;
|
|
|
+ height: 260rpx;
|
|
|
+ overflow-x: auto;
|
|
|
+
|
|
|
+ &-item {
|
|
|
+ flex-direction: column;
|
|
|
+ margin-right: 14rpx;
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 180rpx;
|
|
|
+ height: 180rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px 0px 4px 0px rgba(100, 100, 100, 0.13);
|
|
|
+ border-radius: 4rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ text-align: center;
|
|
|
+ line-height: 28rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 商品列表
|
|
|
+ .core-goods {
|
|
|
+ padding: 0 34rpx;
|
|
|
+
|
|
|
+ &-list {
|
|
|
+ width: 100%;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ &-item {
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: flex-start;
|
|
|
+ width: 48%;
|
|
|
+ padding-bottom: 32rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px 0px 3px 0px rgba(100, 100, 100, 0.1);
|
|
|
+ border-radius: 16rpx;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+
|
|
|
+ .image-wrap {
|
|
|
+ width: 100%;
|
|
|
+ height: 320rpx;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 16rpx 16rpx 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 22rpx;
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ height: 28rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 28rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-titletwo {
|
|
|
+ height: 34rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 34rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-coin {
|
|
|
+ height: 34rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+
|
|
|
+ &__left {
|
|
|
+ margin-right: 24rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 34rpx;
|
|
|
+ height: 34rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__right {
|
|
|
+ color: #666666;
|
|
|
+ text-decoration: line-through;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-price {
|
|
|
+ font-size: 24rpx;
|
|
|
+ line-height: 24rpx;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .empty {
|
|
|
+ .center {
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ &-img {
|
|
|
+ width: 228rpx;
|
|
|
+ height: 320rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-font {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ margin-bottom: 200rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|