<template>
<view style="background-color: #f5f5f5;">
<view class='productList' :style="viewColor">
<!-- 顶部 -->
<view class="top">
<view class="head_tit">
<view class="" style="display: flex;align-items: center;width: 100%;justify-content: space-between;">
<!-- <u--image :showLoading="true" src="/static/images/LHYC/PFH.png" width="50.82rpx"
height="50.82rpx" @click='backjJump'></u--image> -->
<view style="display: flex;align-items: center;">
<i class="iconfont icon-xiangzuo" style="font-size: 31.54rpx;text-align: left;" @click='backjJump'></i>
<view class=""
style="font-size: 31.54rpx;font-weight: 700;margin-left: 20rpx;color: #F84221;">
供货采购商品
</view>
<view class=""
@click="navGoto(`/pages/nongKe/supply_chain/supplierA?tit=1&type_id=12&isDetail=1&product_type=98&cate_id=${userInfoData.mer_info.category_id}`)"
style="font-size: 31.54rpx;font-weight: 700;margin-left: 22rpx;">
供货采购市场
</view>
</view>
</view>
</view>
<view class="sswz">
<view style="position: relative;width: 694rpx;margin: 0 auto;">
<u-search borderColor="#FF6D20" bgColor="white" :showAction="false" placeholder="搜索店铺或者名称"
v-model="storeParam.keyword" @search="onInputConfirm" class="serch_cls"></u-search>
<u--image @tap="searchSubmit" class="img_cls" :showLoading="true" src="/static/images/GXSC/SSBT.png"
width="115.65rpx" height="56.82rpx"></u--image>
</view>
</view>
<view class="flags">
</view>
</view>
<view class="content">
<view class="" :style="`height:${headTop}px`">
</view>
<view class="hot_serch">
<!-- <text>热搜:</text> -->
</view>
<view class="menu_cls">
<u-scroll-list indicatorActiveColor='#FF6D20' :indicator="true">
<view class="menu_li" :class="{'menu_li_on': item.cate_name==merchant.cate_name}"
@click="changeMerchant(item)" v-for="item,index in cloudList" :key="index">
<u--image class="image" :showLoading="true" :src="item.pic" width="87.62rpx" height="87.62rpx"
shape="circle"></u--image>
<view class="li_text" style="display: block;font-size: 26.29rpx;margin-top: 10rpx;">{{item.cate_name}}
</view>
</view>
</u-scroll-list>
<view class="all" @click="showAllRef">
<view>全</view>
<view>部</view>
<image src="@/static/images/icon/all.png"></image>
</view>
</view>
</view>
<view class="container">
<scroll-view scroll-y class="left-panel" @scrolltolower="loadMoreLeft">
<!-- 左侧内容 -->
<view class="left-panel_item" v-for="(item, index) in merchant.children" :class="{'left-panel_item_active': item.cate_name==merchantTow.cate_name}" @click="changeMerchantTow(item)">{{item.cate_name}}</view>
<view style="height: 200rpx;"></view>
</scroll-view>
<view class="right-panel">
<view class="right-panel-head">
<view :class="{'active': storeParam.order==''}" @click="set_where('')">综合</view>
<view>
<view :class="{'active': storeParam.order=='sales'}" @click="set_where('sales')">销量</view>
<!-- <view :class="{'active': storeParam.order.includes('price')}" @click="set_where(price_order)">
<text style="margin-right: 5rpx;">价格</text>
<image class="icon" v-if="price_order=='procure_price_asc'&&storeParam.order.includes('price')" :src="domain+'/static/diy/up'+keyColor+'.png'"></image>
<image class="icon" v-else-if="price_order=='procure_price_desc'&&storeParam.order.includes('price')" :src="domain+'/static/diy/down'+keyColor+'.png'"></image>
<image class="icon" v-else src='/static/images/horn.png'></image>
</view> -->
</view>
</view>
<scroll-view scroll-y class="right-panel-view" @scrolltolower="loadMoreRight">
<!-- 右侧内容 -->
<view class='no-shop' v-if="goodsList.length==0 && !showLoading" v-cloak>
<view class='pictrue' style="margin: 0 auto;">
<!-- <image src='../../../static/images/noCart.png'></image> -->
<image src='@/static/images/no_short.png'></image>
<text>暂无商品，切换其他分类或地区试试</text>
</view>
</view>
<block>
<view v-if="item.product" v-for="(item, index) in goodsList" class="short_item" @click="clickProduct(item)">
<image class="image" :src="item.product.image"></image>
<view class="short_item_right">
<view class="r_name">{{item.product.store_name}}</view>
<view class="r_type">
<view v-if="item.product.store_info">{{item.product.store_info}}</view>
<view v-else-if="getSkuName(item)">{{getSkuName(item)}}</view>
<view v-else-if="item.unit_name">{{item.unit_name}}</view>
</view>
<view class="r_btn" v-if="getAttr(item)">
<view>￥<text style="font-size: 33rpx;">{{ getAttr(item).procure_price.split('.')[0] }}.</text>{{getAttr(item).procure_price.split('.')[1]}}</view>
<image src="@/static/images/icon/plus.png" style="width: 40rpx;height: 40rpx;border-radius: 40rpx;"></image>
</view>
</view>
</view>
</block>
<u-loadmore v-if="showLoading" status="loading"></u-loadmore>
<view style="height: 200rpx;"></view>
</scroll-view>
</view>
</view>
</view>
<!-- <u-loadmore v-if="storeParam.is_recommend==false && storeList.length != 0 || (storeParam.is_recommend==true)"
:status="status" /> -->
<!-- 购物车 -->
<view class="card" :style="`bottom:${30}px`"
@click="navgo('/pages/nongKe/supply_chain/shopping_trolley_a')">
<view class="left">
<view class="cart" style="position: relative;z-index: 9999999;">
<u--image :showLoading="true" src="/static/images/LHYC/GWC.png" width="63.09rpx"
height="63.09rpx"></u--image>
<view class="badge" v-show="goodsNum">
{{goodsNum}}
</view>
</view>
<view class="tot_price">
<view class="">
￥{{totalMoney}}
</view>
<!-- <view class="">
支持配送 售后无忧
</view> -->
</view>
</view>
<view class="right">
去结算
</view>
</view>
<uni-popup ref="allRef" type="right" @change="changeAllRef">
<view class="all_ref">
<view class="header">请选择商品分类</view>
<view class="all_list">
<view class="menu_li" :class="{'menu_li_on': item.cate_name==merchant.cate_name}"
@click="changeMerchant(item, true)" v-for="item,index in cloudList" :key="index">
<u--image class="image" :showLoading="true" :src="item.pic" width="87.62rpx" height="87.62rpx"
shape="circle"></u--image>
<view class="li_text" style="display: block;font-size: 26.29rpx;margin-top: 10rpx;">{{item.cate_name}}
</view>
</view>
</view>
</view>
</uni-popup>
<shortPopup ref="shortPopupRef" @addCart="loadCart"></shortPopup>
</view>
</template>
<script>
import {
getStoreList,
getGeocoder,
} from '@/api/store.js';
import {
supMenuApi
} from '@/api/requesta.js';
import recommend from '../supply_chain/component/recommend';
import rightSlider from '../supply_chain/component/rightSlider';
import {
merClassifly,
getStoreTypeApi,
getProductslist
} from '@/api/store.js';
import {
mapGetters
} from "vuex";
import {
goShopDetail
} from '@/libs/order.js'
import {
configMap
} from '@/utils';
import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue';
import {
getArea,
getStreet
} from '@/api/article.js';
import {
getIndexData,
getDiy
} from '@/api/api.js'
import {
HTTP_REQUEST_URL
} from '@/config/app';
import {
townCloud,
getCityCloundShop,
getCategoryListLevel
} from '@/api/requesta.js'
import {
getCartCounts,
getCartList,
} from '@/api/requesta.js';
import Cache from '@/utils/cache';
import shortPopup from "@/components/shortPopup.vue"
import { Toast } from '../../../libs/uniApi';
const app = getApp();
export default {
components: {
recommend,
rightSlider,
easyLoadimage,
shortPopup
},
data() {
return {
domain: HTTP_REQUEST_URL,
defaInd: [0, 0],
columnData: [],
showSerch: false,
headTop: 0,
street_id: "",
showSelect: false,
price: 0,
stock: 0,
nows: false,
loading: false,
loadingIcon: true,
loadTitle: '加载更多',
title: '',
hotPage: 1,
hotLimit: 10,
hotScroll: false,
// 筛选框
rightBox: false,
//品牌列表
brandList: [],
downKey: 0,
downStatus: false,
cloudList: [],
street: "",
showPicker: false,
status: "loadmore",
price_order: 'procure_price_asc', //价格排序方式(升降), procure_price_asc, procure_price_desc
// 下拉菜单
downMenu: [{
title: '默认',
key: 0,
order: ""
},
{
title: '销量',
key: 1,
order: 'sales'
},
{
title: '好评',
key: 2,
order: 'rate'
},
{
title: '距离',
key: 3,
order: 'location'
}
],
// 商铺列表
storeList: [],
storeParam: {
keyword: '',
page: 1,
limit: 10,
order: '',
category_id: '',
type_id: '',
street_id: '',
is_recommend: false, // 是否为推荐的参数
},
storeKey: 0,
storeScroll: true,
merchant: '', // 当前选中一级分类
merchantTow: '', //当前选中二级分类
mer_id: '',
sortId: '',
price_on: '',
price_off: '',
detaile_address: "",
recommend_address: "",
location_address: "",
latitude: "",
longitude: "",
count: 0,
storeTypeArr: [], //店铺类型
merList: [], //商户分类
product_type: 0,
show: false,
image: '', //图片,
credit_buy: '', //支持先货后款
cloudList: [], // 类型列表
trnList: [],
goodsNum: 0,
totalMoney: 0,
goodsList: [], //商品列表
showLoading: false, //是否显示加载
allShow: false, //是否显示全部类型弹窗
userInfoData: {
mer_info: {
type_id: 0
}
},
};
},
async onLoad(options) {
// console.log(options);
let userInfo = this.$store.state.app.userInfo;
if(typeof userInfo == 'string') this.userInfoData = JSON.parse(userInfo);
else this.userInfoData = userInfo;
this.product_type = 98
this.credit_buy = options.credit_buy
this.storeParam.type_id = options.type_id
this.storeParam.type_id = options.type_id && options.type_id.split(',').toString() || ''
this.storeList = [];
this.showLoading = true;
await this.getCloundShop();
let that = this
setTimeout(() => {
uni.createSelectorQuery()
.in(this)
.select('.flags')
.boundingClientRect(rect => {
// console.log(this.cartTagInfo, 6666)
// that.cartTagInfo = rect
that.headTop = rect.top
// console.log(that.headTop)
})
.exec();
}, 100)
// this.$nextTick(()=>{
// this.$refs.shortPopupRef.open();
// })
},
computed: {
downMenus: function() {
return this.downMenu.filter((item) => {
if (this.mer_location) {
return item
} else {
return item.key < 3
}
})
},
...configMap({
margin_ico_switch: 0,
margin_ico: '',
mer_location: 0,
store_street_theme: 1,
hide_mer_status: '',
}, mapGetters(['viewColor', 'keyColor'])),
},
methods: {
async getCloundShop() {
const {
data
} = await getCategoryListLevel({
type: 2
})
this.cloudList = data;
this.cloudList.unshift({
cate_name: '全部',
children: [],
pic: "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/de2be202312151001024597.png",
store_category_id: -1
})
this.cloudList.forEach((item)=>{
item.children.unshift({
cate_name: '全部',
store_category_id: item.store_category_id,
});
})
this.merchant = this.cloudList[0];
this.merchantTow = this.merchant?.children[0];
this.storeParam.category_id = this.merchantTow.store_category_id;
this.getStoreList();
return null;
},
selectLocation() {
this.isSelectPlace ? this.showPicker = true : ''
},
confirm(e) {
this.showPicker = false
this.$emit('selectPlce', e)
this.$emit('change', e)
this.street = e.value[1].name
this.$nextTick(() => {
this.$bus.$emit('value-updated', e.value[1].name + ',' + e.value[1].code);
})
this.storeParam.street_id = e.value[1].code
this.street_id = e.value[1].code
this.getStoreList()
},
changeHandler(e) {
const {
columnIndex,
value,
values,
index,
picker = this.$refs.uPicker
} = e;
if (columnIndex === 0) {
getStreet({
area_code: value[0]['code']
}).then(res => {
picker.setColumnValues(1, res.data);
});
}
},
Area() {
getArea({
city_code: 510500
}).then(res => {
this.$refs.uPicker.setColumnValues(0, res.data);
this.Street(res.data[0]['code']);
// console.log(res.data, 66666)
});
},
Street(code) {
getStreet({
area_code: code
}).then(res => {
this.$refs.uPicker.setColumnValues(1, res.data);
});
},
onInputConfirm() {
this.showSerch = false
this.searchSubmit()
},
// 对象转数组
objToArr(data) {
let obj = Object.keys(data).sort();
let m = obj.map(key => data[key]);
return m;
},
hotSerchFn(keywords) {
this.storeParam.keyword = keywords
this.searchSubmit()
},
navGoto(url) {
uni.redirectTo({
url
})
},
navgo(url) {
uni.navigateTo({
url
})
},
// 获取商户分类
getClassfication: function() {
let temp = []
merClassifly()
.then(res => {
temp = res.data.map(item => {
return {
...item,
check: false
}
})
if (this.storeParam.category_id.length > 0) {
this.storeParam.category_id.forEach((ids, index) => {
temp.forEach(el => {
if (ids == el.category_id) {
el.check = true
}
})
})
}
this.merList = temp
})
.catch(res => {
this.$util.Tips({
title: res
});
});
},
// 获取店铺类型
getStoreType: function() {
let temp = []
getStoreTypeApi().then(res => {
res.data.forEach(item => {
if (item.mer_type_id == this.storeParam.type_id) {
temp.push({
...item,
check: true
})
}
})
this.storeTypeArr = temp
})
.catch(res => {
this.$util.Tips({
title: res
});
});
},
/** 打开地图**/
showMaoLocation(lat, long) {
if (!lat || !long) return this.$util.Tips({
title: '请设置允许商城访问您的位置！'
});
//#ifdef H5
if (this.$wechat.isWeixin() === true) {
this.$wechat.seeLocation({
latitude: Number(lat),
longitude: Number(long),
name: '当前位置',
address: this.location_address
}).then(res => {
// console.log('success');
})
} else {
//#endif
uni.openLocation({
latitude: parseFloat(lat),
longitude: parseFloat(long),
name: '当前位置',
address: this.location_address,
scale: 8,
success: function(res) {
// console.log(res)
},
});
// #ifdef H5
}
//#endif
},
showStoreLocation(item) {
if (!item.lat || !item.long) return this.$util.Tips({
title: '请设置允许商城访问您的位置！'
});
//#ifdef H5
if (this.$wechat.isWeixin() === true) {
this.$wechat.seeLocation({
latitude: Number(item.lat),
longitude: Number(item.long),
name: item.mer_name,
address: item.mer_address ? item.mer_address : '',
}).then(res => {
// console.log('success');
})
} else {
//#endif
uni.openLocation({
latitude: parseFloat(item.lat),
longitude: parseFloat(item.long),
scale: 8,
name: item.mer_name,
address: item.mer_address ? item.mer_address : '',
success: function(res) {
// console.log(res)
},
});
// #ifdef H5
}
//#endif
},
selfLocation() {
let self = this
if (uni.getStorageSync('RejectTarget')){
this.getStoreList();
return;
}
if (this.$store?.state?.storage?.location?.lat) {
this.latitude = this.$store?.state?.storage?.location?.lat;
this.longitude = this.$store?.state?.storage?.location?.long;
getGeocoder({
lat: this.latitude,
long: this.longitude
}).then(res => {
// console.log(res)
this.detaile_address = res.data.address;
this.location_address = res.data.address;
this.recommend_address = res.data.address.length > 4 ? res.data.address
.slice(0, 4) + '...' :
res.data.address;
this.getStoreList();
}).catch(err => {
uni.showToast({
title: err,
icon: 'none'
})
this.getStoreList();
})
} else uni.getLocation({
type: 'gcj02',
success: (res) => {
console.log('定位');
let latitude, longitude;
latitude = res.latitude.toString();
longitude = res.longitude.toString();
this.latitude = res.latitude.toFixed(6);
this.longitude = res.longitude.toFixed(6);
this.$store.commit('setLocation', {
lat: res.latitude.toFixed(6),
long: res.longitude.toFixed(6),
});
getGeocoder({
lat: latitude,
long: longitude
}).then(res => {
// console.log(res)
this.detaile_address = res.data.address;
this.location_address = res.data.address;
this.recommend_address = res.data.address.length > 4 ? res.data.address
.slice(0, 4) + '...' :
res.data.address
this.getStoreList();
}).catch(err => {
uni.showToast({
title: err,
icon: 'none'
})
this.getStoreList();
})
},
fail: (res) => {
uni.showToast({
title: res,
icon: 'none',
duration: 1000
});
this.getStoreList();
},
});
},
// 进店
goStore(id) {
if (this.storeParam.type_id == 12) {
uni.navigateTo({
url: `/pages/nongKe/supply_chain/merchant?id=${id}`
})
} else {
if (this.hide_mer_status != 1) {
uni.navigateTo({
url: `/pages/store/home/index?id=${id}&type=7`
})
}
}
},
// 搜索
searchSubmit: function() {
console.log('搜索', this.storeParam.keyword);
let that = this;
that.$set(that.storeParam, 'keyword', this.storeParam.keyword);
this.set_where('')
this.showSerch = false
},
//点击事件处理
set_where: function(e) {
if (this.loading) return
this.storeList = []
this.storeParam.page = 1
// this.storeParam.order = this.downMenu[e].order
// this.storeParam.order = 'location' //使用距离进行排序
this.storeParam.order = e //选择排序方式
this.getStoreList();
if(e=='procure_price_asc') return this.price_order = 'procure_price_desc';
if(e=='procure_price_desc') return this.price_order = 'procure_price_asc';
},
backjJump() {
uni.navigateBack({
delta: 1
})
},
// 点击商品一级分类
changeMerchant(item, type=false) {
this.merchant = item;
this.merchantTow = item.children[0];
this.storeParam.category_id = item.children[0].store_category_id;
this.storeParam.page = 1;
this.goodsList = [];
if(type) this.$refs.allRef.close();
this.getStoreList()
},
// 点击商品二级分类
changeMerchantTow(item){
this.merchantTow = item;
this.storeParam.category_id = this.merchantTow.store_category_id;
this.storeParam.page = 1;
this.getStoreList()
},
// 商品列表
getStoreList(load=false) {
this.showLoading = true
this.status = "loading"
if(!load) {
this.storeParam.page = 1;
this.goodsList = [];
}
// console.log({...this.userInfoData.mer_info.category_id});
let query = {
product_type: this.product_type,
// cate_pid: this.storeParam.category_id,
page: this.storeParam.page,
order: this.storeParam.order,
keyword: this.storeParam.keyword,
category_id: this.userInfoData.mer_info.category_id,
};
if(this.storeParam.category_id==-1) null;
else if(!this.merchantTow.pid) query.cate_pid = this.storeParam.category_id; // 全部是查询一级分类pid
else query.cate_id = this.storeParam.category_id; // 否则查询二级分类
getProductslist(query).then((res)=>{
// console.log(res);
this.goodsList = [...this.goodsList, ...res.data.list]
this.goodsList.forEach(item => {
this.trnList.push({
left: 0,
bottom: 0
})
})
this.showLoading = false;
}).catch(e=>{
console.log(e);
Toast(e.msg||e.message||e)
this.showLoading = false;
})
// townCloud({
// street_code: this.street_id,
// category_id: this.storeParam.category_id,
// order: this.storeParam.order,
// keyword: this.storeParam.keyword,
// page: this.storeParam.page,
// location: this.latitude+','+this.longitude,
// }).then(res => {
// this.goodsList = [...this.goodsList, ...res.data.list]
// this.showLoading = false
// this.goodsList.forEach(item => {
// this.trnList.push({
// left: 0,
// bottom: 0
// })
// })
// }).catch(e=>{
// Toast(e.msg||e.message||e)
// this.showLoading = false;
// })
},
loadMoreLeft() {
// 加载更多左侧内容的逻辑
},
loadMoreRight() {
// 加载更多右侧内容的逻辑
this.storeParam.page++;
this.getStoreList(true);
},
// 购物车信息
cartFn() {
getCartList({
product_type: 98,
source: 11
}).then(res => {
this.totalMoney = 0
this.cartList = res.data.list
this.cartList.forEach(e => {
e.list.forEach(item => {
this.totalMoney += item.cart_num * item.productAttr.procure_price
})
})
this.totalMoney = this.totalMoney.toFixed(2)
})
getCartCounts({
product_type: 98,
source: 11
}).then(res => {
this.goodsNum = res.data[0].count
})
},
// 点击商品
clickProduct(data){
this.$refs.shortPopupRef.setDatas(data, this.goodsNum);
this.$refs.shortPopupRef.open();
},
// 点击全部
showAllRef(){
this.$refs.allRef.open();
},
changeAllRef(e){
this.allShow = e.show;
},
// 搜索
navToSearch(){
uni.navigateTo({
url: `/pages/columnGoods/goods_search/index?back=${true}&searchVal=${this.storeParam.keyword}`,
success:()=> {
uni.$once('searchValue', (e)=>{
this.storeParam.keyword = e;
this.searchSubmit();
})
}
})
},
// 刷新购物车
loadCart(){
this.cartFn();
},
// 获取规格名称
getSkuName(data){
try{
let str = [];
data?.product?.attrValue.forEach((e)=>{
if(e.detail){
Object.keys(e.detail).forEach((c)=>{
str.push((e.detail[c]))
})
}
})
// return Object.keys(data?.sku)?.join('/')||null;
return str.join('/') || '';
}catch(e){
return ''
}
},
// 获取第一个规格
getAttr(data){
try{
return data?.product?.attrValue[0]||{}
}catch(e){
return {}
}
},
// 选择位置
changeMap(){
uni.navigateTo({
url: `/pages/select_address/select_address_n`,
success:()=> {
uni.$once('changeAddress', (e)=>{
this.street_id = e.street.code;
this.storeParam.street_id = this.street_id;
this.street = e.street.name;
if (e.longitude) {
this.longitude = e.longitude;
this.latitude = e.latitude;
this.$store.commit('setLocation', {
lat: e.longitude,
long: e.latitude,
});
}
this.getStoreList();
})
}
})
}
},
//刷新
onPullDownRefresh() {
uni.stopPullDownRefresh()
},
onShow() {
this.showSelect = false;
this.cartFn();
},
// 页面返回
onBackPress() {
if(this.$refs.shortPopupRef.isShow){
this.$refs.shortPopupRef.close();
return true;
} else if(this.allShow){
this.$refs.allRef.close();
return true;
}
else return false;
}
}
</script>
<style lang="scss" scoped>
* {
margin: 0;
padding: 0;
}
page {
background-color: #f5f5f5;
}
.all_ref{
height: 100vh;
width: 510rpx;
background-color: #fff;
padding: 30rpx;
.header{
height: 100rpx;
font-size: 33rpx;
font-weight: bold;
display: flex;
align-items: center;
}
.all_list{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}
.menu_li {
display: flex;
flex-direction: column;
align-items: center;
width: 150rpx;
height: 150rpx;
overflow: hidden;
// width: 120rpx;
// display: inline-block;
.image {
border-radius: 50%;
border: 5rpx solid #fff;
}
.li_text {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
padding: 4rpx 10rpx;
}
}
.menu_li_on {
.image {
border: 5rpx solid #ff6d20;
border-radius: 50%;
}
.li_text {
background-color: #ff6d20;
border-radius: 2em;
color: #fff;
padding: 4rpx 10rpx;
}
}
}
.com_name {
font-size: 33.29rpx;
// background-color: red;
// max-width: 45vw;
max-width: 40vw;
white-space: nowrap;
/* 防止文字换行 */
overflow: hidden;
/* 超出部分隐藏 */
text-overflow: ellipsis;
/* 使用省略号表示溢出的内容 */
// width: 200px;
/* 可根据实际情况调整容器宽度 */
}
.head_tit {
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 0 20rpx;
}
.productList {
// padding-top: 50rpx;
// padding: 0 20rpx 0;
display: flex;
flex-direction: column;
.top {
padding-top: var(--status-bar-height);
/* #ifdef H5 */
padding-top: 30rpx;
/* #endif */
background-color: #F0F2F5;
position: fixed;
z-index: 10;
width: 100%;
top: 0;
}
.content {
flex: 1;
padding: 0 20rpx 10rpx 20rpx;
}
.menu_cls {
// background-color: white;
// height: 199.77rpx;
border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
padding: 10rpx 70rpx 0 0;
font-size: 26.29rpx;
height: 155rpx;
overflow: hidden;
position: relative;
.all{
position: absolute;
top: 0;
right: 0;
padding: 0 15rpx;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
background-color: #f5f5f5;
image{
width: 30rpx;
height: 30rpx;
}
}
.menu_li {
// margin-right: 20rpx;
// background-color: red;
// width: 50vw;
display: flex;
flex-direction: column;
align-items: center;
min-width: 140rpx;
height: auto;
// width: 120rpx;
// display: inline-block;
.image {
border-radius: 50%;
border: 5rpx solid #fff;
}
.li_text {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
padding: 1rpx 10rpx 4rpx 10rpx;
}
}
.menu_li_on {
.image {
border: 5rpx solid #ff6d20;
border-radius: 50%;
}
.li_text {
background-color: #ff6d20;
border-radius: 2em;
color: #fff;
padding: 1rpx 10rpx 4rpx 10rpx;
}
}
}
.container {
display: flex;
height: calc(100vh - 320rpx - var(--status-bar-height));
.left-panel {
width: 180rpx;
height: 100%;
font-size: 29.79rpx;
flex-shrink: 0;
.left-panel_item {
height: 100rpx;
line-height: 100rpx;
text-align: center;
box-sizing: border-box;
padding-left: 10rpx;
max-width: 180rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.left-panel_item_active {
color: #F84221;
background-color: rgba(#F84221, 0.1);
position: relative;
&::before {
content: '';
display: inline-block;
width: 10rpx;
height: 40rpx;
border-radius: 5rpx;
background-color: #F84221;
position: absolute;
left: 0;
top: 0;
transform: translate(0, 75%);
}
}
}
.right-panel {
width: calc(100vw - 180rpx);
height: 100%;
font-size: 26.29rpx;
background-color: #fff;
.right-panel-head {
height: 70rpx;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 30rpx;
color: #737373;
view {
display: flex;
align-items: center;
margin-left: 40rpx;
}
.active {
color: #333;
font-weight: bold;
}
.icon{
height: 22rpx;
width: 18rpx;
}
}
.right-panel-view {
height: calc(100vh - 400rpx - var(--status-bar-height) - 100rpx);
.short_item {
padding: 20rpx;
display: flex;
.image {
height: 145.23rpx;
width: 145.23rpx;
border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
margin-right: 20rpx;
flex-shrink: 0;
}
.short_item_right {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
.r_name {
width: 100%;
height: 64rpx;
line-height: 32rpx;
text-overflow: ellipsis;
display: -webkit-box; /* 使用弹性盒子布局 */
-webkit-box-orient: vertical; /* 设置为垂直方向布局 */
overflow: hidden; /* 隐藏超出部分 */
-webkit-line-clamp: 2; /* 限制显示两行文本 */
}
.r_type {
font-size: 22.78rpx;
color: #737373;
width: 300rpx;
view {
height: 39rpx;
line-height: 39rpx;
background: #FEF5F3;
display: inline-block;
padding: 0 16rpx;
border-radius: 39rpx;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.r_btn {
display: flex;
justify-content: space-between;
font-size: 22.78rpx;
color: #F84221;
align-items: center;
}
}
}
}
}
}
.common-hd {
display: flex;
align-items: center;
justify-content: center;
height: 60rpx;
margin-top: 30rpx;
.title {
padding: 0 80rpx;
font-size: 34rpx;
color: $theme-color;
font-weight: bold;
background-image: url("~@/static/images/index-title.png");
background-repeat: no-repeat;
background-size: 100% auto;
background-position: left center;
}
}
.goods_list {
margin-top: 20rpx;
.goods_card {
margin-top: 20rpx;
height: auto;
background-color: white;
padding: 20rpx;
// border-radius: 20rpx;
display: flex;
// align-items: center;
.left {
margin-right: 20rpx;
width: 158rpx;
height: 158rpx;
border-radius: 20rpx;
overflow: hidden;
}
.right {
flex: 1;
color: #737373;
.head {
font-weight: bold;
// color: red;
color: #333;
}
.li {
width: 100%;
display: flex;
font-size: 28.04rpx;
margin-bottom: 10rpx;
align-items: center;
text {
margin: 0 20rpx 0 5rpx;
}
}
}
}
}
.address {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
}
}
.selects {
transform: rotate(180deg);
}
.search-right.styleType2 .right-text,
.search-right.styleType3 .right-text {
color: #282828;
}
.search-right.styleType2 .icon-xiangyou,
.search-right.styleType3 .icon-xiangyou {
color: #999999;
}
.search-right.styleType2 .icon-dingwei,
.search-right.styleType3 .icon-dingwei {
color: #8A8A8A;
}
.productList .search .back {
display: flex;
align-items: center;
width: 40rpx;
height: 60rpx;
.iconfont {
color: #fff;
font-size: 36rpx;
}
}
.town_name {
overflow: hidden;
white-space: nowrap;
/* 设置文本不换行 */
text-overflow: ellipsis;
max-width: 4.2em;
font-size: 28rpx;
/* 设置溢出文本为省略号 */
}
.hot_serch {
height: 0rpx;
}
.productList .search .input {
flex: 1;
height: 60rpx;
background-color: #fff;
border-radius: 50rpx;
padding: 0 20rpx;
box-sizing: border-box;
}
.productList .search.styleType2 .input,
.productList .search.styleType3 .input {
background: #EDEDED;
}
.productList .search .input input {
flex: 1;
height: 100%;
font-size: 26rpx;
margin-left: 10rpx;
}
.productList .search .input .placeholder {
color: #999;
}
.productList .search .input .iconfont {
font-size: 35rpx;
color: #555;
}
.productList .search .icon-pailie,
.productList .search .icon-tupianpailie {
color: #fff;
width: 62rpx;
font-size: 40rpx;
height: 86rpx;
line-height: 86rpx;
}
.productList .nav-wrapper {
z-index: 9;
position: fixed;
left: 0;
top: 25px;
width: 100%;
margin-top: 86rpx;
background-color: #fff;
&.styleType1 {
background-color: var(--view-theme);
}
.tab-bar {
display: flex;
align-items: center;
.tab-item {
position: relative;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 8rpx 0 20rpx;
color: #fff;
font-size: 28rpx;
font-weight: bold;
&::after {
content: ' ';
position: absolute;
left: 50%;
bottom: 18rpx;
width: 30rpx;
height: 3rpx;
background: transparent;
transform: translateX(-50%);
}
&.on {
&::after {
background: #fff;
}
}
}
}
}
.border-picture {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: center/cover no-repeat;
}
.productList .nav {
height: 86rpx;
color: #454545;
font-size: 28rpx;
display: flex;
justify-content: space-between;
padding: 0 28rpx;
}
.productList .nav .item {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #FFFFFF;
flex: 1;
}
.productList .nav.styleType2 .item,
.productList .nav.styleType3 .item {
color: #282828;
}
.productList .nav .item.font-colors {
font-weight: 500;
color: #FFFFFF;
}
.productList .nav.styleType2 .item.font-colors,
.productList .nav.styleType3 .item.font-colors {
color: var(--view-theme);
}
.productList .nav .item .font-line {
height: 4rpx;
background-color: #fff;
margin-top: 3rpx;
width: 28rpx;
animation: line 0.3s;
-moz-animation: line 0.3s;
/* Firefox */
-webkit-animation: line 0.3s;
/* Safari 和 Chrome */
-o-animation: line 0.3s;
/* Opera */
}
.productList .nav.styleType2 .item .font-line,
.productList .nav.styleType3 .item .font-line {
background-color: var(--view-theme);
}
@keyframes line {
from {
width: 0rpx;
}
to {
width: 28rpx;
}
}
.productList .nav .item image {
width: 15rpx;
height: 19rpx;
margin-left: 10rpx;
}
.selected-list {
padding: 24rpx 14rpx;
border-radius: 10.51rpx 10.51rpx 10.51rpx 10.51rpx;
background-color: #fff;
position: absolute;
left: 100rpx;
font-size: 29.79rpx;
opacity: 0;
transition: 0.5s;
height: 0;
.triangle-up {
width: 0;
height: 0;
border-left: 10rpx solid transparent;
border-right: 10rpx solid transparent;
border-bottom: 10rpx solid white;
position: absolute;
top: -10rpx;
}
.selected-li {
margin-bottom: 35rpx;
color: #F84221;
display: flex;
align-items: center;
}
}
.actSel {
opacity: 1;
height: auto;
// transform: translateX(100rpx);
}
.store-wrapper {
margin-top: 235rpx;
border-top: 1px solid #F6F6F6;
.store-item {
margin: 20rpx auto;
.head {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
.zhezhao {
position: absolute;
width: 95%;
height: 150px;
border-radius: 20rpx;
z-index: 0;
opacity: 0.5;
background-color: #999;
}
.bgc_img {
position: absolute;
width: 95%;
height: 150px;
background-size: cover;
border-radius: 20rpx;
z-index: 0;
}
.zhezhao1 {
width: 100%;
height: 150px;
border-radius: 20rpx;
z-index: 1;
.title {
display: flex;
height: 50px;
align-items: center;
margin-left: 20px;
z-index: 1;
span {
background-color: #F84221;
color: white;
font-size: 12px;
padding: 3px;
border-radius: 5px;
margin-left: 5px;
}
}
.coent {
display: flex;
margin-left: 20px;
.avater {
width: 60px;
height: 80px;
image {
width: 60px;
height: 80px;
}
}
.text {
.text_one {
display: flex;
height: 30px;
line-height: 30px;
padding-left: 10px;
image {
width: 20px;
height: 20px;
margin-right: 10px;
}
.text_one_r {
margin-left: 10px;
}
}
.text_two {
width: 270px;
height: 30px;
line-height: 30px;
padding-left: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
image {
width: 20px;
height: 20px;
margin-right: 10px;
}
}
.text_three {
width: 270px;
height: 30px;
line-height: 30px;
padding-left: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
image {
width: 20px;
height: 20px;
margin-right: 10px;
}
}
}
}
}
}
.pro-box {
white-space: nowrap;
display: flex;
align-items: center;
padding: 20rpx 20rpx 30rpx;
.pro-item {
display: inline-block;
width: 218rpx;
margin-right: 14rpx;
.picture,
/deep/image,
uni-image {
width: 100%;
height: 214rpx;
border-radius: 8rpx;
position: relative;
}
.price {
margin-top: 5rpx;
font-size: 28rpx;
color: var(--view-priceColor);
font-weight: bold;
text {
font-size: 28rpx;
}
}
&:last-child {
margin-right: 0;
}
}
&.styleType3 {
padding: 20rpx;
.pro-item {
display: inline-block;
background-color: #fff;
border-radius: 16rpx;
text-align: center;
padding: 10rpx 0 20rpx;
.picture,
/deep/image,
uni-image {
width: 194rpx;
height: 194rpx;
text-align: center;
border-radius: 8rpx;
position: relative;
margin: 0 auto;
}
}
}
}
}
}
.mer-item2 {
padding: 20rpx;
background: #fff;
margin-bottom: 20rpx;
border-radius: 16rpx;
.mer-shop-count {
display: flex;
.mer-avatar {
width: 100rpx;
height: 100rpx;
}
.mer-top {
color: #282828;
}
.mer-shop-right {
margin-left: 20rpx;
.mer-btn {
color: #666666;
}
}
.pro-box {
white-space: nowrap;
display: flex;
align-items: center;
margin-top: 20rpx;
.pro-item {
display: inline-block;
width: 170rpx;
margin-right: 20rpx;
.picture,
/deep/image,
uni-image,
/deep/.easy-loadimage {
width: 100%;
height: 170rpx;
border-radius: 8rpx;
position: relative;
}
.price {
margin-top: 5rpx;
font-size: 28rpx;
color: var(--view-priceColor);
font-weight: bold;
text {
font-size: 28rpx;
}
}
&:last-child {
margin-right: 0;
}
}
}
}
}
.no-shop {
background-color: #fff;
// padding-bottom: calc(100% - 176rpx);
.pictrue {
display: flex;
flex-direction: column;
align-items: center;
color: $uni-nothing-text;
image {
width: 500rpx;
height: 180rpx;
}
}
}
.guanbi {
width: 20px;
height: 20px;
margin: 30px auto;
}
.img_cls {
position: absolute;
top: 50%;
right: 7rpx;
transform: translateY(-50%);
}
.pop {
z-index: 1;
}
.sswz {
margin-top: 10rpx;
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 0 20rpx;
}
.score {
display: flex;
align-items: center;
font-weight: 500;
font-size: 24rpx;
line-height: 1;
color: #000;
.score-title {
margin-right: 15rpx;
}
.score_text {
color: #fd5d2e;
}
.star {
position: relative;
width: 111rpx;
height: 19rpx;
margin-right: 10rpx;
background: url(../../columnGoods/images/star.png) left top/100% 100% no-repeat;
overflow: hidden;
view {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../../columnGoods/images/star_active.png) left top/111rpx 19rpx no-repeat;
&.star_purple {
background: url(../../columnGoods/images/star_active_purple.png) left top/111rpx 19rpx no-repeat;
}
}
}
}
.card {
width: 720rpx;
z-index: 99;
// margin:auto;
left: 50%;
transform: translateX(-50%);
position: fixed;
// bottom: 0;
background-color: #333333;
height: 101.64rpx;
border-radius: 50.82rpx;
overflow: hidden;
color: white;
display: flex;
justify-content: space-between;
box-sizing: border-box;
.left {
display: flex;
align-items: center;
padding: 10rpx 35rpx;
.badge {
position: absolute;
top: 0;
right: 0;
background-color: #F84221;
transform: translate(50%, -50%);
// padding: 10rpx 10rpx;
border-radius: 35rpx;
text-align: center;
width: 35rpx;
line-height: 35rpx;
height: 35rpx;
}
.tot_price {
display: flex;
margin-left: 42rpx;
flex-direction: column;
justify-content: space-between;
}
}
.right {
font-size: 33.29rpx;
line-height: 50px;
background: linear-gradient(to right, #F84221, #FF6D20);
width: 140.19rpx;
text-align: center;
}
}
</style>