922 lines
24 KiB
Vue
922 lines
24 KiB
Vue
|
<template>
|
||
|
|
<view class="search">
|
||
|
|
<view>
|
||
|
|
<search-input @searchBtn="searchBtn" :searchValue="keyword" :show='false' />
|
||
|
|
<view v-if="rule == 1">
|
||
|
|
<view class="table" v-if="keyword">
|
||
|
|
<view v-for="item in tabList " :key="item.id" @click="onClickTab(item.id)" class="li" :class="active == item.id ? 'border' : ''">
|
||
|
|
{{item.name}}
|
||
|
|
<span v-if="item.id == 0">{{total_num}}</span>
|
||
|
|
<span v-else-if="item.id == 1">{{total_num1}}</span>
|
||
|
|
<span v-else-if="item.id == 2">{{total_num2}}</span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="search-sort" v-if="active !== 2">
|
||
|
|
<view class="search-sort-item" v-for="(item, index) in sortList" :key="index" @click.stop="chooseSort(index)">
|
||
|
|
<text :class="sortIndex === index ? 'choose' : ''">{{item}}</text>
|
||
|
|
<view class="icon" v-if="index === 2">
|
||
|
|
<up-icon name="arrow-up" size="10" :color="priceType && sortIndex === 2 ? Color : ''" />
|
||
|
|
<up-icon name="arrow-down" size="10" :color="!priceType && sortIndex === 2 ? Color : ''" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<view v-if="active == 0" style="padding: 20rpx 30rpx;">
|
||
|
|
<view class="search-list-item" v-for="(item, index) in list" :key="index" @click.stop="toGoods(item.id)">
|
||
|
|
<view class="faceImg">
|
||
|
|
<image :src="item.face_img + '?x-oss-process=image/format,webp'" :webp="true" mode="aspectFill" class="image"></image>
|
||
|
|
<view class="out" v-if="item.sold_status === 2">
|
||
|
|
<img src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/01/16/Cr6cRRhhqYNhScigxIyumyV9hXXMI3vKvsE1jgt0.png" class="out_img" />
|
||
|
|
</view>
|
||
|
|
<view class="out" v-else-if="item.sold_status === 0">
|
||
|
|
<img src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/08/21/QBhUheeYWSJ3OGM27fkAufJAlFSA8GBhWjpY5oNy.png" class="out_img" />
|
||
|
|
</view>
|
||
|
|
<view class="out" v-else-if="item.total_stock === 0">
|
||
|
|
<img src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/08/21/pMTv6QiZZEpSqkJmk7hMcbEzIuNzMyp7YVBbe42H.png" class="out_img" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="search-list-item-info">
|
||
|
|
<view>
|
||
|
|
<view class="name">{{item.title}}</view>
|
||
|
|
<view class="desc" v-if="item.match_title">{{item.match_title}}</view>
|
||
|
|
<template v-if="item.actives && item.actives.length">
|
||
|
|
<view v-for="it in item.actives" class="move_img">{{it.name}}</view>
|
||
|
|
</template>
|
||
|
|
</view>
|
||
|
|
<view class="tag">
|
||
|
|
<text class="tag-item" v-for="(tag, i) in item.tags" :key="i">{{tag}}</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="price">
|
||
|
|
<view class="vip-left">
|
||
|
|
<text class="icon">￥</text>
|
||
|
|
<text class="text" v-if="item.group_goods.length === 1">
|
||
|
|
<text v-if="item.group_goods[0].specs_type===0">
|
||
|
|
{{item.group_goods[0].price}}
|
||
|
|
</text>
|
||
|
|
<text v-else>
|
||
|
|
<text v-if="item.group_goods[0].min_price===item.group_goods[0].max_price">{{item.group_goods[0].min_price}}</text>
|
||
|
|
<text v-else-if="parseInt(item.group_goods[0].max_price)<parseInt(item.group_goods[0].min_price)">{{item.group_goods[0].max_price}}~
|
||
|
|
{{item.group_goods[0].min_price}}</text>
|
||
|
|
<text v-else>{{item.group_goods[0].min_price}}~
|
||
|
|
{{item.group_goods[0].max_price}}</text>
|
||
|
|
</text>
|
||
|
|
</text>
|
||
|
|
<text class="text" v-else>
|
||
|
|
<text v-if="item.max_price === item.min_price">{{item.min_price}}</text>
|
||
|
|
<text v-else-if="parseInt(item.max_price) < parseInt(item.min_price)">{{item.max_price}}~{{item.min_price}}</text>
|
||
|
|
<text v-else>{{item.min_price}}~{{item.max_price}}</text>
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
<view class="price-right">
|
||
|
|
<view v-if="item.group_goods.length === 1">
|
||
|
|
<view @click.stop="getGoodsSku(item.group_goods[0])" class="lit"
|
||
|
|
v-if="item.group_goods[0].specs_type == 0 && item.group_goods[0].goods.limit_type == 0">
|
||
|
|
<up-icon name="shopping-cart" :color="Color" size="25" />
|
||
|
|
</view>
|
||
|
|
<view class="lit"
|
||
|
|
v-else-if="item.group_goods[0].specs_type==0 && item.group_goods[0].goods.limit_type!=0">
|
||
|
|
<up-icon name="shopping-cart" :color="Color" size="25" />
|
||
|
|
</view>
|
||
|
|
<view @click.stop="getGoodsSku(item.group_goods[0])" class="lit"
|
||
|
|
v-if="item.group_goods[0].specs_type==1">
|
||
|
|
<up-icon name="shopping-cart" :color="Color" size="25" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="lit" v-else>
|
||
|
|
<up-icon name="shopping-cart" :color="Color" size="25" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="bottom" v-if="page >= lastPage && list.length && !loading">— 没有更多了 —</view>
|
||
|
|
<view class="emptyBox" v-if="!list.length && !loading">
|
||
|
|
<up-empty mode="search" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/search.png" text="未搜索到您想要的"></up-empty>
|
||
|
|
<view>换个关键词试试吧</view>
|
||
|
|
</view>
|
||
|
|
<view v-if="loading" class="loadbox">
|
||
|
|
<up-loading-icon text="加载中..." textSize="18"></up-loading-icon>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view v-else-if="active == 1" style="padding: 20rpx 30rpx;">
|
||
|
|
<view class="box" v-for="(item, index) in list2" :key="index" @click="hanleJump(item.id)">
|
||
|
|
<view class="img">
|
||
|
|
<image :src="item.face_img + '?x-oss-process=image/format,webp'" :webp="true" mode="aspectFill" alt="" />
|
||
|
|
</view>
|
||
|
|
<view class="head">
|
||
|
|
<view class="h1">{{item.title}}</view>
|
||
|
|
<view class="buttom">
|
||
|
|
<view class="num" v-if="item.price > 0">
|
||
|
|
<text class="icon">￥</text>
|
||
|
|
<text>{{item.price}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="num" v-else>
|
||
|
|
<text class="icon">￥</text>
|
||
|
|
<text v-if="item.max_price === item.min_price">{{item.min_price}}</text>
|
||
|
|
<text v-else>{{item.min_price}}~{{item.max_price}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="icon">
|
||
|
|
<up-icon name="shopping-cart" :color="Color" size="25" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="bottom" v-if="page2 >= lastPage2 && list2.length && !loading2">— 没有更多了 —</view>
|
||
|
|
<view class="emptyBox" v-if="!list2.length && !loading2">
|
||
|
|
<up-empty mode="search" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/search.png" text="暂无搜索结果"></up-empty>
|
||
|
|
<view>换个关键词试试吧</view>
|
||
|
|
</view>
|
||
|
|
<view v-if="loading2" class="loadbox">
|
||
|
|
<up-loading-icon text="加载中..." textSize="18"></up-loading-icon>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view v-else>
|
||
|
|
<view class="shop" v-for="(list, index) in list1" :key="index">
|
||
|
|
<view class="title">
|
||
|
|
<view class="name">
|
||
|
|
<view>{{list.name}}</view>
|
||
|
|
<view class="anniu" @click.stop="hanleJump2(list.id)">进入品牌</view>
|
||
|
|
</view>
|
||
|
|
<view class="goodscommodity">
|
||
|
|
<view class="goodsgun" v-for="(list1, index) in list.shop_goods" :key="index" @click.stop="hanleJump(list1.id)">
|
||
|
|
<image :src="list1.face_img + '?x-oss-process=image/format,webp'" :webp="true" mode="aspectFill" class="img"></image>
|
||
|
|
<view class="price_list" v-if="list1.price > 0">
|
||
|
|
<text class="icon">￥</text>
|
||
|
|
<text>{{list1.price}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="price_list" v-else>
|
||
|
|
<text class="icon">￥</text>
|
||
|
|
<text v-if="list1.max_price === list1.min_price">{{list1.min_price}}</text>
|
||
|
|
<text v-else-if=" parseInt(list1.max_price) < parseInt(list1.min_price)">{{list1.max_price}}~{{list1.min_price}}</text>
|
||
|
|
<text v-else>{{list1.min_price}}~{{list1.max_price}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view v-if="list.shop_goods.length" @click.stop="hanleJump2(list.id)">
|
||
|
|
<image src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2022/06/17/j2o8JQpmbCO8BRAFTrppzAGcELNSC4BrLmHXvDMO.png"
|
||
|
|
mode="widthFix" style="width: 214rpx;border-radius: 0rpx"></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="bottom" v-if="page1 >= lastPage1 && list1.length && !loading1">— 没有更多了 —</view>
|
||
|
|
<view class="emptyBox" v-if="!list1.length && !loading1">
|
||
|
|
<up-empty mode="search" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/search.png" text="暂无搜索结果"></up-empty>
|
||
|
|
<view>换个关键词试试吧</view>
|
||
|
|
</view>
|
||
|
|
<view v-if="loading1" class="loadbox">
|
||
|
|
<up-loading-icon text="加载中..." textSize="18"></up-loading-icon>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
|
||
|
|
<view v-if="isEmpty && hot.length">
|
||
|
|
<view class="nodata">
|
||
|
|
<view style="width: 100%;text-align: center; padding: 20rpx 0;">
|
||
|
|
<image src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/06/04/46htQZUX302oWnlo09LHUlbUL0gt1VaWftK34mUl.png"
|
||
|
|
style="width: 180px; height: 18px;"></image>
|
||
|
|
</view>
|
||
|
|
<view class="box_tite">
|
||
|
|
<view v-for="(item, index) in hot" :key="index" class="hezi" @click.stop="hanleJump1(item.id)">
|
||
|
|
<image :src="item.face_img" alt="" />
|
||
|
|
<view class="zong">
|
||
|
|
<view class="h1">{{item.title}}</view>
|
||
|
|
<view class="number" v-if="item.price > 0">
|
||
|
|
<text class="icon">￥</text>
|
||
|
|
<text>{{item.price}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="number" v-else>
|
||
|
|
<text class="icon">￥</text>
|
||
|
|
<text v-if="item.max_price === item.min_price">{{item.min_price}}</text>
|
||
|
|
<text v-else>{{item.min_price}}~{{item.max_price}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="bottom" v-if="page3 >= lastPage3">—到底啦—</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<choose-sku :show-sku="showSku" :show1='true' :sku-info="skuInfo" :skus_1='skus_1' @close="showSku = false" />
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { ref, reactive, toRefs } from 'vue'
|
||
|
|
import searchInput from '@/components/searchInput/index.vue'
|
||
|
|
import chooseSku from '@/components/sku/ChooseSku.vue'
|
||
|
|
import { get, post } from '@/api/request.js'
|
||
|
|
import { goodsItem } from '@/components/common.js'
|
||
|
|
import { Style } from '@/utils/list.js'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
searchInput,
|
||
|
|
chooseSku,
|
||
|
|
},
|
||
|
|
setup() {
|
||
|
|
const data = reactive({
|
||
|
|
rule: 0,
|
||
|
|
total_num: 0,
|
||
|
|
total_num1: 0,
|
||
|
|
total_num2: 0,
|
||
|
|
active: 0,
|
||
|
|
sortList: ['综合', '销量', '价格', '上新'],
|
||
|
|
sortIndex: 0,
|
||
|
|
priceType: false,
|
||
|
|
title: '搜索商品',
|
||
|
|
list: [],
|
||
|
|
list1: [],
|
||
|
|
list2: [],
|
||
|
|
hot: [],
|
||
|
|
tabList: [
|
||
|
|
{ id: 0, name: '团购' },
|
||
|
|
{ id: 1, name: '商品' },
|
||
|
|
{ id: 2, name: '会场' }
|
||
|
|
],
|
||
|
|
page: 1,
|
||
|
|
page2: 1,
|
||
|
|
lastPage: 0,
|
||
|
|
loading: false,
|
||
|
|
lastPage1: 0,
|
||
|
|
lastPage2: 0,
|
||
|
|
loading2: false,
|
||
|
|
page1: 1,
|
||
|
|
loading1: false,
|
||
|
|
page3: 1,
|
||
|
|
lastPage3: 0,
|
||
|
|
vipOn: 0,
|
||
|
|
isEmpty: false,
|
||
|
|
Color: '',
|
||
|
|
priceColor: ''
|
||
|
|
})
|
||
|
|
|
||
|
|
const gethot = async (setEmpty = true) => {
|
||
|
|
uni.showLoading({
|
||
|
|
title: '加载中...'
|
||
|
|
})
|
||
|
|
let res = await get('/api/app/special/hot', {
|
||
|
|
page: data.page3
|
||
|
|
})
|
||
|
|
data.list3 = setEmpty ? res.data : data.list3.concat(res.data)
|
||
|
|
data.hot = data.hot.concat(res.data)
|
||
|
|
data.lastPage3 = res.meta.last_page
|
||
|
|
uni.hideLoading()
|
||
|
|
}
|
||
|
|
|
||
|
|
const hanleJump1 = (id) => {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: '/pages/groups/index?id=' + id
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const hanleJump = (id) => {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: '/pages/productDetails/index?id=' + id
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const hanleJump2 = (id) => {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: '/pages/smallshop/index?id=' + id
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const hanlegetlist = async (setEmpty = true) => {
|
||
|
|
uni.showLoading({
|
||
|
|
title: '加载中...'
|
||
|
|
})
|
||
|
|
data.loading1 = true
|
||
|
|
await get('/api/app/special/merchant', {
|
||
|
|
page: data.page1,
|
||
|
|
limit: 5,
|
||
|
|
keyword: search.keyword
|
||
|
|
}).then((res) => {
|
||
|
|
data.list1 = setEmpty ? res.data : data.list1.concat(res.data)
|
||
|
|
data.lastPage1 = res.meta.last_page
|
||
|
|
data.total_num2 = res.meta.total
|
||
|
|
uni.hideLoading()
|
||
|
|
data.loading1 = false
|
||
|
|
}).catch(() => {
|
||
|
|
data.loading1 = false
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const hanlegetlist1 = async (setEmpty = true) => {
|
||
|
|
uni.showLoading({
|
||
|
|
title: '加载中...'
|
||
|
|
})
|
||
|
|
data.loading2 = true
|
||
|
|
await get('/api/app/special/goods', { ...search, page: data.page2 }).then((res) => {
|
||
|
|
data.list2 = setEmpty ? res.data : data.list2.concat(res.data)
|
||
|
|
data.lastPage2 = res.meta.last_page
|
||
|
|
data.total_num1 = res.meta.total
|
||
|
|
if(data.list2.length == 0 && data.list1.length == 0 && data.list.length == 0) {
|
||
|
|
data.isEmpty = true
|
||
|
|
} else {
|
||
|
|
data.isEmpty = false
|
||
|
|
}
|
||
|
|
uni.hideLoading()
|
||
|
|
data.loading2 = false
|
||
|
|
}).catch(() => {
|
||
|
|
data.loading2 = false
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const onClickTab = (e) => {
|
||
|
|
data.active = e
|
||
|
|
}
|
||
|
|
|
||
|
|
// 搜索参数
|
||
|
|
const search = reactive({
|
||
|
|
keyword: '',
|
||
|
|
shop_group_id: '',
|
||
|
|
showcases_id: '',
|
||
|
|
sales: '',
|
||
|
|
price: '',
|
||
|
|
score: 2,
|
||
|
|
new: ''
|
||
|
|
})
|
||
|
|
|
||
|
|
async function getList(setEmpty = true) {
|
||
|
|
uni.showLoading({
|
||
|
|
title: '加载中...'
|
||
|
|
})
|
||
|
|
data.loading = true
|
||
|
|
await get('/api/app/search', { ...search, page: data.page }).then((res) => {
|
||
|
|
data.list = setEmpty ? res.data : data.list.concat(res.data)
|
||
|
|
data.lastPage = res.meta.last_page
|
||
|
|
data.total_num = res.meta.total
|
||
|
|
uni.hideLoading()
|
||
|
|
data.loading = false
|
||
|
|
}).catch(() => {
|
||
|
|
data.loading = false
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
async function updateList1() {
|
||
|
|
data.page1 = 1
|
||
|
|
await hanlegetlist(true)
|
||
|
|
}
|
||
|
|
|
||
|
|
async function updateList2() {
|
||
|
|
data.page2 = 1
|
||
|
|
await hanlegetlist1()
|
||
|
|
}
|
||
|
|
|
||
|
|
async function updateList() {
|
||
|
|
data.page = 1
|
||
|
|
await getList()
|
||
|
|
}
|
||
|
|
|
||
|
|
// 排序
|
||
|
|
function chooseSort(index) {
|
||
|
|
data.sortIndex = index
|
||
|
|
if (index === 2) {
|
||
|
|
data.priceType = !data.priceType
|
||
|
|
search.price = data.priceType ? 1 : 2
|
||
|
|
search.new = ''
|
||
|
|
} else {
|
||
|
|
search.price = ''
|
||
|
|
}
|
||
|
|
search.sales = index === 1 ? 2 : ''
|
||
|
|
search.score = index === 0 ? 2 : ''
|
||
|
|
search.new = index === 3 ? 2 : ''
|
||
|
|
|
||
|
|
if (data.active == 0) {
|
||
|
|
updateList()
|
||
|
|
} else if (data.active == 1) {
|
||
|
|
updateList2()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// 搜索
|
||
|
|
async function searchBtn(e) {
|
||
|
|
if (search.keyword !== e) {
|
||
|
|
search.keyword = e
|
||
|
|
await updateList()
|
||
|
|
await updateList1()
|
||
|
|
await updateList2()
|
||
|
|
if(data.active === 0) {
|
||
|
|
data.active = data.list.length ? 0 : (data.list2.length ? 1 : data.list1.length ? 2 : 0)
|
||
|
|
}
|
||
|
|
if(data.active === 1) {
|
||
|
|
data.active = data.list2.length ? 1 : (data.list.length ? 0 : data.list1.length ? 2 : 1)
|
||
|
|
}
|
||
|
|
if(data.active === 2) {
|
||
|
|
data.active = data.list1.length ? 2 : (data.list.length ? 0 : data.list2.length ? 1 : 2)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
uni.setNavigationBarTitle({
|
||
|
|
title: search.keyword || '商品搜索'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const {
|
||
|
|
toGoods,
|
||
|
|
showSku,
|
||
|
|
getGoodsSku,
|
||
|
|
skuInfo,
|
||
|
|
skus_1
|
||
|
|
} = goodsItem()
|
||
|
|
|
||
|
|
return {
|
||
|
|
...toRefs(search),
|
||
|
|
getList,
|
||
|
|
hanlegetlist,
|
||
|
|
hanlegetlist1,
|
||
|
|
gethot,
|
||
|
|
updateList,
|
||
|
|
updateList1,
|
||
|
|
updateList2,
|
||
|
|
skus_1,
|
||
|
|
...toRefs(data),
|
||
|
|
chooseSort,
|
||
|
|
searchBtn,
|
||
|
|
toGoods,
|
||
|
|
showSku,
|
||
|
|
getGoodsSku,
|
||
|
|
skuInfo,
|
||
|
|
onClickTab,
|
||
|
|
hanleJump1,
|
||
|
|
hanleJump2,
|
||
|
|
hanleJump
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onReachBottom() {
|
||
|
|
if (this.list.length || this.list1.length || this.list2.length) {
|
||
|
|
if (this.active == 0) {
|
||
|
|
if (this.page < this.lastPage) {
|
||
|
|
this.page++
|
||
|
|
this.getList(false)
|
||
|
|
}
|
||
|
|
} else if (this.active == 1) {
|
||
|
|
if (this.page2 < this.lastPage2) {
|
||
|
|
this.page2++
|
||
|
|
this.hanlegetlist1(false)
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
if (this.page1 < this.lastPage1) {
|
||
|
|
this.page1++
|
||
|
|
this.hanlegetlist(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
if (this.page3 < this.lastPage3) {
|
||
|
|
this.page3++
|
||
|
|
this.gethot(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async onLoad(options) {
|
||
|
|
// await this.$onLaunched
|
||
|
|
const _this = this
|
||
|
|
this.Color = uni.getStorageSync('theme_color')
|
||
|
|
this.priceColor = Style[uni.getStorageSync('theme_index') * 1].priceColor
|
||
|
|
this.rule = uni.getStorageSync('rule')
|
||
|
|
_this.keyword = options.value ? decodeURIComponent(options.value) : ''
|
||
|
|
_this.title = options.title || _this.keyword || '团购商品'
|
||
|
|
_this.shop_group_id = options.groupId || ''
|
||
|
|
_this.vipOn = uni.getStorageSync('vip_on') || 0
|
||
|
|
uni.setNavigationBarTitle({
|
||
|
|
title: decodeURIComponent(_this.title)
|
||
|
|
})
|
||
|
|
|
||
|
|
if(options.sort) {
|
||
|
|
_this.priceType = options.priceType === 'true' ? false : true
|
||
|
|
_this.chooseSort(Number(options.sort))
|
||
|
|
} else {
|
||
|
|
_this.getList()
|
||
|
|
}
|
||
|
|
if (options.value) {
|
||
|
|
await _this.gethot()
|
||
|
|
await _this.hanlegetlist()
|
||
|
|
await _this.hanlegetlist1()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.box {
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
background: #fff;
|
||
|
|
padding: 20rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
border-radius: 10px;
|
||
|
|
.img {
|
||
|
|
width: 30%;
|
||
|
|
image {
|
||
|
|
width: 200rpx;
|
||
|
|
height: 200rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.head {
|
||
|
|
width: 65%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
.h1 {
|
||
|
|
font-size: 30rpx;
|
||
|
|
word-break: break-all;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
display: -webkit-box;
|
||
|
|
-webkit-box-orient: vertical;
|
||
|
|
-webkit-line-clamp: 2;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.buttom {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-top: 30rpx;
|
||
|
|
.num {
|
||
|
|
color: v-bind('priceColor');
|
||
|
|
font-size: 30rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.lit {
|
||
|
|
margin-left: 10rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-right {
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.zong {
|
||
|
|
padding: 0 20rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding-bottom: 20rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
flex-direction: column;
|
||
|
|
height: 200rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.box_tite {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content: space-between;
|
||
|
|
text-align: center;
|
||
|
|
margin: 20rpx 20rpx 0;
|
||
|
|
.hezi {
|
||
|
|
width: 48.5%;
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
}
|
||
|
|
image {
|
||
|
|
width: 100%;
|
||
|
|
height: 343rpx;
|
||
|
|
border-top-left-radius: 8rpx;
|
||
|
|
border-top-right-radius: 8rpx;
|
||
|
|
}
|
||
|
|
.h1 {
|
||
|
|
margin: 10rpx 0;
|
||
|
|
text-align: left;
|
||
|
|
font-size: 30rpx;
|
||
|
|
font-family: Source Han Sans CN;
|
||
|
|
font-weight: 400;
|
||
|
|
overflow: hidden !important;
|
||
|
|
text-overflow: ellipsis !important;
|
||
|
|
display: -webkit-box !important;
|
||
|
|
-webkit-line-clamp: 2 !important;
|
||
|
|
-webkit-box-orient: vertical !important;
|
||
|
|
}
|
||
|
|
.number {
|
||
|
|
text-align: left;
|
||
|
|
margin-bottom: 10rpx;
|
||
|
|
color: v-bind('priceColor');
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
overflow: hidden;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.nodata {
|
||
|
|
background: #f5f5f5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shop {
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
margin: 20rpx 20rpx 0;
|
||
|
|
.banner {
|
||
|
|
width: 100%;
|
||
|
|
.img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
border-top-left-radius: 10rpx;
|
||
|
|
border-top-right-radius: 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
padding: 25rpx 13rpx;
|
||
|
|
.name {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
margin: 0 15rpx;
|
||
|
|
font-weight: bolder;
|
||
|
|
font-size: 30rpx;
|
||
|
|
.anniu {
|
||
|
|
text-align: center;
|
||
|
|
line-height: 42rpx;
|
||
|
|
color: #fff;
|
||
|
|
font-weight: normal;
|
||
|
|
width: 133rpx;
|
||
|
|
height: 42rpx;
|
||
|
|
font-size: 25rpx;
|
||
|
|
border-radius: 28rpx;
|
||
|
|
background: v-bind(Color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.goodscommodity {
|
||
|
|
display: flex;
|
||
|
|
margin-top: 25rpx;
|
||
|
|
overflow: auto;
|
||
|
|
.goodsgun {
|
||
|
|
padding: 0 10rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
overflow: hidden;
|
||
|
|
flex-shrink: 0;
|
||
|
|
width: 33%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
image {
|
||
|
|
width: 200rpx;
|
||
|
|
height: 200rpx;
|
||
|
|
border-radius: 5rpx;
|
||
|
|
}
|
||
|
|
.title_list {
|
||
|
|
font-size: 26rpx;
|
||
|
|
font-family: Source Han Sans CN;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #2c2c2c;
|
||
|
|
margin: 10rpx 0;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
overflow: hidden;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price_list {
|
||
|
|
font-size: 24rpx;
|
||
|
|
font-family: Source Han Sans CN;
|
||
|
|
font-weight: 400;
|
||
|
|
margin-top: 15rpx;
|
||
|
|
.icon {
|
||
|
|
font-size: 25rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.border {
|
||
|
|
color: v-bind('Color') !important;
|
||
|
|
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.border::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
bottom: -10rpx;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
width: 20%;
|
||
|
|
height: 2px;
|
||
|
|
background: v-bind('Color');
|
||
|
|
}
|
||
|
|
|
||
|
|
.table {
|
||
|
|
display: flex;
|
||
|
|
padding: 20rpx 0;
|
||
|
|
background: #fff;
|
||
|
|
border-bottom: 1px solid #eee;
|
||
|
|
.li {
|
||
|
|
flex: 1;
|
||
|
|
font-size: 30rpx;
|
||
|
|
margin: 0 20rpx;
|
||
|
|
color: #000;
|
||
|
|
font-weight: normal;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.li:last-child {
|
||
|
|
margin-right: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.bottom {
|
||
|
|
text-align: center;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #999999;
|
||
|
|
padding: 30rpx 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search {
|
||
|
|
.search-sort {
|
||
|
|
display: flex;
|
||
|
|
background-color: #fff;
|
||
|
|
height: 90rpx;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-around;
|
||
|
|
&-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
flex: 1;
|
||
|
|
color: #666;
|
||
|
|
font-size: 28rpx;
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
margin-left: 10rpx;
|
||
|
|
|
||
|
|
.iconfont {
|
||
|
|
font-size: 24rpx;
|
||
|
|
line-height: 16rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.choose {
|
||
|
|
color: v-bind('Color');
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-list {
|
||
|
|
&-item {
|
||
|
|
display: flex;
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
padding: 20rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
.faceImg{
|
||
|
|
position: relative;
|
||
|
|
margin-right: 25rpx;
|
||
|
|
.image {
|
||
|
|
width: 200rpx;
|
||
|
|
height: 200rpx;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
}
|
||
|
|
.out{
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
.out_img{
|
||
|
|
width: 100rpx;
|
||
|
|
height: 100rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
&-info {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
flex: 1;
|
||
|
|
overflow: hidden;
|
||
|
|
.desc{
|
||
|
|
font-size: 24rpx;
|
||
|
|
line-height: 36rpx;
|
||
|
|
color: #999;
|
||
|
|
display: -webkit-box;
|
||
|
|
-webkit-box-orient: vertical;
|
||
|
|
-webkit-line-clamp: 2;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.name {
|
||
|
|
display: -webkit-box;
|
||
|
|
-webkit-box-orient: vertical;
|
||
|
|
-webkit-line-clamp: 2;
|
||
|
|
overflow: hidden;
|
||
|
|
// text-overflow: ellipsis;
|
||
|
|
// white-space: nowrap;
|
||
|
|
font-size: 28rpx;
|
||
|
|
line-height: 40rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tag {
|
||
|
|
display: flex;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: v-bind('Color');
|
||
|
|
overflow-x: auto;
|
||
|
|
|
||
|
|
&-item {
|
||
|
|
background: #fff3f4;
|
||
|
|
border-radius: 21rpx;
|
||
|
|
padding: 4rpx 16rpx;
|
||
|
|
margin-right: 10rpx;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.vip {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.tag {
|
||
|
|
margin-left: 10rpx;
|
||
|
|
font-size: 20rpx;
|
||
|
|
color: #fbe6c3;
|
||
|
|
background: #353648;
|
||
|
|
border-radius: 20rpx 0 0 0;
|
||
|
|
padding: 2rpx 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.vip-left {
|
||
|
|
color: v-bind('priceColor');
|
||
|
|
|
||
|
|
.text {
|
||
|
|
font-size: 34rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
font-size: 24rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.price {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: flex-end;
|
||
|
|
font-size: 22rpx;
|
||
|
|
color: #999999;
|
||
|
|
|
||
|
|
&-left {
|
||
|
|
color: #333;
|
||
|
|
font-size: 28rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
&-right {
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
margin-left: 20rpx;
|
||
|
|
background-color: v-bind('Color');
|
||
|
|
border-radius: 2px;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 19px;
|
||
|
|
height: 17px;
|
||
|
|
line-height: 15px;
|
||
|
|
text-align: center;
|
||
|
|
width: 17px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.move_img {
|
||
|
|
display: inline-block;
|
||
|
|
font-size: 22rpx;
|
||
|
|
color: #fff;
|
||
|
|
margin: 3px 10px 3px 0;
|
||
|
|
background-image: url('@/static/image/move_img.png');
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
padding: 0px 3px 0px 12px;
|
||
|
|
height: 40rpx;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
line-height: 40rpx;
|
||
|
|
}
|
||
|
|
.emptyBox{
|
||
|
|
text-align: center;
|
||
|
|
font-size: 30rpx;
|
||
|
|
line-height: 50rpx;
|
||
|
|
padding: 90rpx 0;
|
||
|
|
color: #888;
|
||
|
|
}
|
||
|
|
.loadbox{
|
||
|
|
padding: 30rpx 0;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #98989f;
|
||
|
|
}
|
||
|
|
</style>
|