徐总多门店
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

2292 lines
55 KiB

<template>
<view>
<view class="headerBg">
<image :src="info.background_image" mode="aspectFill" class="image"></image>
<view class="shade"></view>
<!-- #ifdef MP || APP -->
<view :style="{height: getHeight.barTop+'px'}"></view>
<view :style="{height: getHeight.barHeight+'px'}"></view>
<!-- #endif -->
<view style="height: 224rpx;"></view>
</view>
<view class="page acea-row row-column">
<view class="search-box" :style="{height: headerHeight ? (headerHeight+'px') : 'auto'}">
<view class="input-box" id="input-box" :class="{fixed: scrollTop > 0}">
<!-- #ifdef MP || APP -->
<view :style="{height: getHeight.barTop+'px'}"></view>
<!-- #endif -->
<!-- 顶部搜索框 -->
<!-- #ifdef MP -->
<view class="input-wrapper acea-row row-middle" :style="{height: getHeight.barHeight+'px'}">
<view class="menu_box flex-center" @tap="moreNav">
<text class="iconfont icon-a-icon_menu1x"></text>
</view>
<navigator url="/pages/goods/goods_search/index" class="input acea-row row-middle" hover-class="none">
<text class="iconfont icon-ic_search"></text>搜索商品
</navigator>
<view v-if="info.store_splicing_switch" class="group-btn" @click="onCollage">
<image :src="imgHost+'/statics/images/group-btn.png'" mode="aspectFit" class="img"></image>
</view>
<view :style="{width: getHeight.barWidth+'px'}"></view>
</view>
<!-- #endif -->
<!-- #ifndef MP -->
<view class="input-wrapper acea-row row-middle">
<view class="menu_box flex-center" @tap="moreNav">
<text class="iconfont icon-a-icon_menu1x"></text>
</view>
<navigator url="/pages/goods/goods_search/index" class="input acea-row row-middle" hover-class="none">
<text class="iconfont icon-ic_search"></text>搜索商品
</navigator>
<!-- #ifdef H5 -->
<view v-if="info.store_splicing_switch && $wechat.isWeixin()" class="group-btn" @click="onCollage">
<image :src="imgHost+'/statics/images/group-btn.png'" mode="aspectFit" class="img"></image>
</view>
<!-- #endif -->
</view>
<!-- #endif -->
</view>
</view>
<!-- 门店地址详情 -->
<view class="store-section">
<view class="panel">
<view class="acea-row row-middle store-name">
<view class="name-wrap">
<navigator :url="'/pages/store/info/index?store_id='+info.id" hover-class="none" class="acea-row row-middle name-inner">
<text class="iconfont icon-ic_mall"></text>
<view class="name line1">{{info.name}}</view>
<text class="iconfont icon-ic_rightarrow"></text>
</navigator>
</view>
<view class="switch acea-row" v-if="deliveryList.length > 1">
<view v-for="(item, index) in deliveryList" :key="item.key" :class="{ on: switchNum == item.key }" class="btn" @click="swithFn(item.key)">
{{item.name}}
</view>
</view>
<view class="tips" v-else-if="deliveryList.length == 1">门店支持{{deliveryList[0].name}}</view>
</view>
<view class="address-wrap acea-row row-bottom">
<view class="address-box">
<view class="time">营业时间:{{info.day_time}}</view>
<view class="address-info">
<text class="distance">距您{{info.range}}km</text>
{{info.address}}{{info.detailed_address}}
</view>
</view>
<view class="acea-row btn-box">
<view class="btn" @click="showMaoLocation">
<text class="iconfont icon-ic_location5"></text>
<view class="">地图</view>
</view>
<view class="btn" @click="goKefu">
<text class="iconfont icon-ic_customerservice"></text>
<view class="">客服</view>
</view>
</view>
</view>
</view>
</view>
<view class="category acea-row" v-if="level == 3">
<scroll-view scroll-x="true" class="scroll-view">
<view class="item" :class="{ on: navOneActive == index }" v-for="(item,index) in categoryList" :key="item.id" @click="tapNavOne(item,index)">
<view class="img-box">
<image :src="item.pic" class="img"></image>
</view>
<view class="title">{{item.cate_name}}</view>
</view>
</scroll-view>
<view class="btn acea-row row-column row-center row-middle" @click="navOneOpen">
<view class="">全</view>
<view class="">部</view>
<image class="w-28 h-28 block mt-8" src="@/static/img/all_pic.png"></image>
<image src="../static/shade.png" class="img"></image>
</view>
</view>
<view class="conter acea-row" id="conter-box">
<view class="aside-box">
<scroll-view scroll-y="true" class="aside" :class="{ fixed: scrollTop && conterTop <= headerHeight }" :style="{ top: headerHeight+'px' }">
<view class='item' :class="{
on: index==navActive,
btr: index-1==navActive,
bbr: index+1==navActive
}" v-for="(item,index) in categoryErList" :key="index" @click="tapNav(index,item)">
<view class="inner acea-row row-center-wrapper">
<text>{{item.cate_name}}</text>
</view>
</view>
<view class="cartIcon-placeholder"></view>
<view class="safe-area-inset-bottom"></view>
</scroll-view>
</view>
<view class="wrapper">
<view class="bgcolor-box">
<view class="bgcolor acea-row" :class="{ fixed: scrollTop && conterTop <= headerHeight }" :style="{ top: headerHeight+'px' }">
<view class="longTab acea-row row-middle">
<scroll-view scroll-x="true" style="white-space: nowrap;" scroll-with-animation :scroll-left="tabLeft" show-scrollbar="true">
<view class="longItem" :style='"width:"+isWidth+"px"' :class="index===tabClick?'click':''" v-for="(item,index) in categoryThreeList" :key="index"
@click="longClick(index,item)">
<view class="inner">{{item.cate_name}}</view>
</view>
</scroll-view>
</view>
<view class="openList">
<view class="btn" @click="openTap">
<text class="iconfont icon-ic_downarrow"></text>
</view>
<image src="../static/shade.png" class="img"></image>
</view>
</view>
</view>
<!--商品列表 -->
<goodClass :tempArr="tempArr" :isLogin="isLogin" @gocartduo="goCartDuo" @gocartdan="goCartDan" @ChangeCartNumDan="ChangeCartNumDan" @detail="goDetail"></goodClass>
<view class='loadingicon acea-row row-center-wrapper' v-if="tempArr.length">
<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
</view>
<emptyPage v-if="page>1 && !tempArr.length" title="暂无商品,去看点别的吧~"></emptyPage>
<view class="safe-area-inset-bottom"></view>
</view>
</view>
<view class="footer">
<view class="inner-box" :class="{ open: footerOpen }">
<view class="inner acea-row row-between row-middle">
<view class="acea-row row-bottom" style="flex-wrap: nowrap;">
<BaseMoney :money="totalPrice" symbolSize="32" integerSize="48" decimalSize="32" color="#FFFFFF"></BaseMoney>
<view style="white-space: nowrap;" class="detail-btn" @click="getCartLists">查看明细<text class="iconfont icon-ic_uparrow"></text></view>
</view>
<view class="btn" @click="subOrder">去结算({{cartNums}})</view>
</view>
</view>
<view class="cartIcon" @click="getCartLists">
<uni-badge :text="cartNums" absolute="rightTop" :offset="[6, 4]" :custom-style="{background: 'var(--view-theme)'}">
<view class="image-wrap">
<image src="@/static/img/cart_pic.png" class="image"></image>
</view>
</uni-badge>
</view>
</view>
</view>
<!-- </scroll-view> -->
<!-- #ifdef H5 || MP -->
<tuiDrawer :visible="collageVisible" :zIndex="970" :maskZIndex="960" mode="bottom" backgroundColor="transparent" @close="onCollageClose">
<view class="dialog">
<view class="dialog-head acea-row row-between row-middle">
<view>发起「一起拼」</view>
<view class="btn" @click="onCollageClose">
<text class="iconfont icon-ic_close"></text>
</view>
</view>
<view class="dialog-body">
<view class="navbar" v-if="deliveryList.length > 1">
<view class="navbar-bg"></view>
<view class="active-bg acea-row row-bottom" :class="{'row-right':collageDelivery==1}">
<image v-if="collageDelivery==1" class="image2" src="../static/navbar-right-2.png"></image>
<image class="image1" src="../static/navbar-left-1.png"></image>
<image v-if="collageDelivery==2" class="image2" src="../static/navbar-left-2.png"></image>
</view>
<view class="inner acea-row">
<view v-for="(item, index) in deliveryList" :key="item.key" :class="{ on: collageDelivery == item.key }" class="item acea-row row-center-wrapper"
@click="collageDeliveryChange(item, index)">
<text :class="'iconfont '+item.icon"></text>
{{item.name}}
</view>
</view>
</view>
<view class="dialog-content" :class="{
btl:collageIndex==deliveryList.length-1,
btr:!collageIndex
}">
<scroll-view v-if="collageDelivery == 1 && addressList.length" :scroll-y="addressList.length > 3" :style="{ height: addressList.length > 3 ? '388rpx' : 'auto' }"
class="address-box">
<view class="list" id="list">
<view v-for="(item, index) in addressList" :key="item.id" :class="{ on: item.id == addressId }" class="item acea-row row-middle" @click="onAddressChange(item)">
<view class="text">
<view class="info">{{item.province}}{{item.city}}{{item.district}}{{item.street}}{{item.detail}}</view>
<view class="name">{{item.real_name}} {{item.phone}}</view>
</view>
<text class="iconfont icon-ic_complete"></text>
</view>
</view>
</scroll-view>
<navigator v-if="collageDelivery == 1 && !addressList.length" class="link" url="/pages/users/user_address/index?fromType=1" hover-class="none">
<view class="title acea-row row-between-wrapper">
<view>添加配送地址</view>
<text class="iconfont icon-ic_rightarrow"></text>
</view>
<view>您还未添加配送地址,先去添加地址再下单吧~</view>
</navigator>
<view v-if="collageDelivery == 2" class="store-box acea-row">
<view class="text">
<view class="name">{{collageStore.name}}</view>
<view class="info acea-row">
<text class="iconfont icon-ic_location51"></text>
<view class="value">{{collageStore.address}}{{collageStore.detailed_address}}</view>
</view>
<view class="info acea-row">
<text class="iconfont icon-icon_clock"></text>
<view class="value">营业时间:{{collageStore.day_time}}</view>
</view>
</view>
<view class="map-box">
<image src="../static/map2.png" class="map"></image>
<view class="img-box">
<image :src="collageStore.image" class="img"></image>
<view class="range">距您{{collageStore.range}}km</view>
<view class="dot"></view>
</view>
</view>
</view>
<view class="btn-box acea-row row-center-wrapper" v-if="collageDelivery == 1 && addressList.length">
<navigator url="/pages/users/user_address/index?fromType=1" hover-class="none">
添加地址
<text class="iconfont icon-ic_rightarrow"></text>
</navigator>
</view>
</view>
</view>
<view class="dialog-foot">
<view class="btn" @click="initCollage">发起拼单</view>
</view>
</view>
</tuiDrawer>
<!-- #endif -->
<!-- 分类购物车下拉列表 -->
<cartList :cartNums='cartNums' :cartData="cartData" @closeList="closeList" @ChangeCartNumDan="ChangeCartList" @ChangeSubDel="ChangeSubDel" @ChangeOneDel="ChangeOneDel"></cartList>
<!-- 产品属性组件 -->
<productWindow :attr="attr" :isShow='1' :iSplus='1' :iScart='1' :type="2" @myevent="onMyEvent" @ChangeAttr="ChangeAttr" @ChangeCartNum="ChangeCartNumDuo" @attrVal="attrVal"
@iptCartNum="iptCartNum" @goCat="goCatNum" :is_vip="is_vip" id='product-window'></productWindow>
<!-- 客服弹窗 -->
<Kefu ref="kefu" @closeKefu="closeKefu" :customerList="customerList" :customerType="customerType"></Kefu>
<homeList :currentPage="currentPage" :navH="getHeight.barTop+40" :openNavList="diyProduct.navList"></homeList>
<tuiDrawer :visible="!iSlong" mode="top" backgroundColor="transparent" @close="closeTap">
<view class="downTab acea-row row-column">
<!-- #ifdef MP || APP -->
<view :style="{height: getHeight.barTop+'px'}"></view>
<view :style="{height: getHeight.barHeight+'px'}"></view>
<!-- #endif -->
<view class="title">{{categoryTitle}}</view>
<scroll-view scroll-y="true" class="scroll-view">
<view class="children">
<view class="acea-row row-middle">
<view class="item line1" :class="index===tabClick?'click':''" v-for="(item,index) in categoryThreeList" :key="index" @click="longClick(index,item)">
<view class="inner">{{item.cate_name}}</view>
</view>
</view>
</view>
</scroll-view>
<view class="btn acea-row row-center-wrapper" @click="closeTap">
点击收起<text class="iconfont icon-ic_uparrow"></text>
</view>
</view>
</tuiDrawer>
<tuiDrawer :visible="oneVisible" mode="top" backgroundColor="transparent" @close="navOneClose">
<view class="category-dialog acea-row row-column">
<!-- #ifdef MP || APP -->
<view :style="{height: getHeight.barTop+'px'}"></view>
<view :style="{height: getHeight.barHeight+'px'}"></view>
<!-- #endif -->
<scroll-view scroll-y="true" class="scroll-view">
<view class="acea-row" style="flex-wrap: wrap;">
<view class="item" :class="{ on: navOneActive == index }" v-for="(item,index) in categoryList" :key="item.id" @click="tapNavOne(item,index)">
<view class="img-box">
<image :src="item.pic" class="img"></image>
</view>
<view class="title">{{item.cate_name}}</view>
</view>
</view>
</scroll-view>
<view class="btn acea-row row-center-wrapper" @click="navOneClose">
点击收起<text class="iconfont icon-ic_uparrow"></text>
</view>
</view>
</tuiDrawer>
</view>
</template>
<script>
import {
vcartList,
getCartCounts,
cartDel
} from '@/api/order.js';
import {
getCategoryList,
getAttr,
postCartNum,
initCollage,
hasCollage,
isWithin,
} from '@/api/store.js';
import {
getProducts,
getCustomerList,
getStoreCategory,
getStoreBrand
} from '@/api/new_store.js';
import productWindow from '@/components/productWindow/index';
import goodClass from '@/components/goodClass';
import cartList from '@/components/cartList';
import {
getAddressList,
} from '@/api/user.js';
import Kefu from '@/components/kefu/index.vue';
import homeList from '@/components/homeList/index.vue';
import tuiDrawer from '@/components/tui-drawer/tui-drawer.vue';
import emptyPage from '@/components/emptyPage.vue';
import {
mapState,
mapGetters
} from 'vuex';
import {
goShopDetail
} from '@/libs/order.js';
import {
toLogin
} from '@/libs/login.js';
import {
HTTP_REQUEST_URL
} from '@/config/app';
export default {
computed: {
...mapState({
cartNum: state => state.indexData.cartNum
}),
...mapGetters(['isLogin', 'uid', 'cartNum', 'diyCategory', 'diyProduct']),
level() {
return this.diyCategory.level
}
},
components: {
productWindow,
goodClass,
cartList,
Kefu,
homeList,
tuiDrawer,
emptyPage,
},
props: {
info: {
type: Object,
default: {}
},
customerType: {
type: Number,
default: 1
},
},
provide: {
parent: {}
},
data() {
return {
getHeight: this.$util.getWXStatusHeight(),
imgHost: HTTP_REQUEST_URL,
deliveryList: [{
name: '自提',
key: 2,
icon: 'icon-icon_shop1'
},
{
name: '配送',
key: 1,
icon: 'icon-icon_electromobile'
},
],
switchNum: 1,
categoryList: [],
navOneActive: 0,
navActive: 0,
categoryTitle: '',
categoryErList: [],
tabLeft: 0,
isWidth: 0, //每个导航栏占位
tabClick: 0, //导航栏被点击
iSlong: true,
tempArr: [],
loading: false,
loadend: false,
loadTitle: '加载更多',
page: 1,
limit: 10,
cid: 0, //一级分类
sid: 0, //二级分类
tid: 0, //三级分类
delivery_type: 3, // 配送方式
isAuto: false, //没有授权的不会自动授权
attr: {
cartAttr: false,
productAttr: [],
productSelect: {},
deliveryType: [],
},
productValue: [],
attrValue: '', //已选属性
storeName: '', //多属性产品名称
id: 0,
cartData: {
cartList: [],
iScart: false
},
totalPrice: 0.00,
lengthCart: 0,
is_vip: 0, //是否是会员
cart_num: 0,
storeInfo: {},
// #ifdef H5 || MP
collageVisible: false,
collageDelivery: 2,
collageIndex: 0,
collageStore: this.info,
collageAddress: {}, // 选择的配送地址
// #endif
customerList: [], // 客服数据
footerOpen: false,
categoryTwoList: [],
categoryThreeList: [],
currentPage: false,
addressList: [], // 地址列表
oneVisible: false,
headerHeight: 0,
conterTop: 0,
scrollTop: 0, //已滚动的距离
addressId: 0, // 配送地址id
cartNums: 0, //门店购物车总数量;
listH: 0
}
},
watch: {
// #ifdef H5 || MP
collageDelivery: {
handler(val) {
this.collageStore = this.info;
},
immediate: true
}
// #endif
},
mounted() {
let that = this;
let default_delivery = this.info.default_delivery;
for (let i = 0; i < this.deliveryList.length; i++) {
if (this.deliveryList[i].key == 2 && (!this.info.store_self_mention || !this.info.is_store)) {
this.deliveryList.splice(i, 1);
i--;
}
}
if (this.deliveryList.length == 1) {
default_delivery = this.deliveryList[0].key;
}
this.collageDelivery = default_delivery;
// 获取设备宽度
uni.getSystemInfo({
success(e) {
that.isWidth = e.windowWidth / 5
that.windowHeight = e.windowHeight
}
});
// 监听到支付订单页,返回时的数据更新;
uni.$off('newCartNum');
uni.$on('newCartNum', (data) => {
if (data.length) {
this.tempArr.forEach((item) => {
data.forEach(j => {
if (item.id == j.product_id) {
item.cart_num = 0
}
})
})
this.cartNums = 0;
this.totalPrice = 0;
}
})
let view = uni.createSelectorQuery().in(this).select("#conter-box");
// 页面滚动
uni.$on('onPageScroll', ({
scrollTop
}) => {
this.scrollTop = scrollTop;
this.footerOpen = false;
this.currentPage = false;
view
.boundingClientRect((data) => {
this.conterTop = data.top;
})
.exec();
});
// 页面滚动到底部
uni.$on('onReachBottom', () => {
this.getProducts();
});
uni.$on('activeAddress', () => {
this.getAddressList();
});
this.switchNumFun(default_delivery);
that.getAllCategory();
that.getCartNum();
that.getAddressList();
},
methods: {
showMaoLocation() {
let data = {
latitude: Number(this.info.latitude),
longitude: Number(this.info.longitude),
name: this.info.name,
address: `${this.info.address}${this.info.detailed_address}`,
};
// #ifdef H5
if (this.$wechat.isWeixin()) {
data.scale = 13;
return this.$wechat.seeLocation(data);
}
// #endif
uni.openLocation(data);
},
// #ifdef H5 || MP
// 点击拼单
onCollage() {
if (!this.isLogin) {
return toLogin();
}
hasCollage().then(res => {
const collageId = res.data.collageId;
if (collageId) {
uni.navigateTo({
url: `/pages/store/group_buy/index?collage_id=${collageId}`
});
} else {
this.collageVisible = true;
}
});
},
// 发起拼单
initCollage() {
let data = {
store_id: this.collageStore.id,
address_id: this.addressId || 0,
shipping_type: this.collageDelivery == 1 ? 3 : 2
};
initCollage(data).then(res => {
this.collageVisible = false;
uni.navigateTo({
url: `/pages/store/group_buy/index?collage_id=${res.data.collageId}`
});
}).catch(err => {
this.$util.Tips({
title: err
});
});
},
// 选择配送地址
onAddressChange(data) {
isWithin({
store_id: this.collageStore.id,
address_id: data.id
}).then(() => {
this.addressId = data.id;
}).catch(() => {
this.$util.Tips({
title: '您选择的地址超出门店配送范围,请重新选择'
});
});
},
onCollageClose() {
this.collageVisible = false;
},
// 选择自提、配送
collageDeliveryChange(item, index) {
if (item.key != 2 || this.info.is_store) {
this.collageDelivery = item.key;
this.collageIndex = index;
}
},
// #endif
getNoCart() {
if (this.cartNum <= 0) {
this.tempArr.forEach((item) => {
item.cart_num = 0
})
this.totalPrice = 0;
}
},
updateFun(e) {
if (e.cartNum) {
this.tempArr.forEach((item) => {
if (item.id == e.id) {
item.cart_num = e.cartNum
}
})
this.getCartNum()
}
},
// 商品列表
getProducts() {
let that = this;
if (that.loadend) return;
if (that.loading) return;
that.loading = true;
getProducts({
page: that.page,
limit: that.limit,
type: 1,
cid: that.cid,
sid: that.sid,
tid: that.tid,
store_id: that.info.id,
delivery_type: that.delivery_type,
}).then(res => {
let list = res.data,
loadend = list.length < that.limit;
that.tempArr = that.$util.SplitArray(list, that.tempArr);
that.$set(that, 'tempArr', that.tempArr);
that.loading = false;
that.loadend = loadend;
that.loadTitle = loadend ? "没有更多内容啦~" : "加载更多";
that.page = that.page + 1;
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this);
query
.select("#input-box")
.boundingClientRect((data) => {
this.headerHeight = data.height;
})
.exec();
})
}).catch(err => {
that.loading = false;
that.loadTitle = '加载更多'
});
},
// 切换自提方式
swithFn(num) {
this.switchNumFun(num);
this.page = 1;
this.loadend = false;
this.tempArr = []
this.getProducts()
},
switchNumFun(num) {
switch (num) {
case 1:
this.switchNum = 1
this.delivery_type = '3'
break;
case 2:
this.switchNum = 2
this.delivery_type = '2'
break;
}
},
// 跳转到门店列表
goMap() {
uni.navigateTo({
// #ifdef APP
url: `/pages/store/mapnvue/index?province=${this.info.province}&city=${this.info.city}&area=${this.info.area}`
// #endif
// #ifndef APP
url: `/pages/store/map/index?province=${this.info.province}&city=${this.info.city}&area=${this.info.area}`
// #endif
})
},
// 生成订单;
subOrder: function() {
let that = this,
list = that.cartData.cartList,
ids = [];
if (list.length) {
list.forEach(item => {
if (item.attrStatus && item.status) {
ids.push(item.id)
}
});
uni.navigateTo({
url: '/pages/goods/order_confirm/index?is_store=1&cartId=' + ids.join(',') +
'&delivery_type=' + that.delivery_type + '&store_id=' + that.info.id
});
that.cartData.iScart = false;
} else {
return that.$util.Tips({
title: '请选择产品'
});
}
},
// 计算总价;
getTotalPrice: function() {
let that = this,
list = that.cartData.cartList,
totalPrice = 0.00;
list.forEach(item => {
if (item.attrStatus && item.status) {
totalPrice = that.$util.$h.Add(totalPrice, that.$util.$h.Mul(item.cart_num, item
.truePrice));
}
})
that.$set(that, 'totalPrice', totalPrice);
},
ChangeSubDel: function(event) {
let that = this,
list = that.cartData.cartList,
ids = [],
storeId = uni.getStorageSync('user_store_id');
list.forEach(item => {
ids.push(item.id)
});
cartDel(ids.join(","), storeId).then(res => {
that.$set(that.cartData, 'cartList', []);
that.cartData.iScart = false;
that.totalPrice = 0.00;
that.page = 1;
that.loadend = false;
that.tempArr = [];
that.getProducts();
that.getCartNum();
})
},
ChangeOneDel: function(id, index) {
let that = this,
list = that.cartData.cartList,
storeId = uni.getStorageSync('user_store_id');
cartDel(id.toString(), storeId).then(res => {
list.splice(index, 1);
if (!list.length) {
that.cartData.iScart = false;
that.page = 1;
that.loadend = false;
that.tempArr = [];
that.getProducts();
};
that.getCartNum();
})
},
getCartLists() {
if (this.footerOpen) {
this.getCartList();
} else {
this.footerOpen = true;
}
},
getCartList(iSshow) {
let that = this;
let data = {
store_id: that.info.id
};
vcartList(data).then(res => {
that.$set(that.cartData, 'cartList', res.data);
if (res.data.length) {
that.$set(that.cartData, 'iScart', iSshow ? false : !that.cartData.iScart);
} else {
that.$set(that.cartData, 'iScart', false);
}
// that.getTotalPrice();
})
},
closeList(e) {
this.$set(this.cartData, 'iScart', e);
},
getCartNum: function() {
let that = this;
getCartCounts(0, that.info.id).then(res => {
this.cartNums = res.data.count;
this.totalPrice = res.data.sum_price;
});
},
onMyEvent: function() {
this.$set(this.attr, 'cartAttr', false);
},
/**
* 默认选中属性
*
*/
DefaultSelect: function() {
let productAttr = this.attr.productAttr;
let value = [];
for (let key in this.productValue) {
if (this.productValue[key].stock > 0) {
value = this.attr.productAttr.length ? key.split(",") : [];
break;
}
}
for (let i = 0; i < productAttr.length; i++) {
this.$set(productAttr[i], "index", value[i]);
}
//sort();排序函数:数字-英文-汉字;
let productSelect = this.productValue[value.join(",")];
if (productSelect && productAttr.length) {
this.$set(
this.attr.productSelect,
"store_name",
this.storeName
);
this.$set(this.attr.productSelect, "image", productSelect.image);
this.$set(this.attr.productSelect, "price", productSelect.price);
this.$set(this.attr.productSelect, "stock", productSelect.stock);
this.$set(this.attr.productSelect, "unique", productSelect.unique);
this.$set(this.attr.productSelect, "cart_num", 1);
this.$set(this.attr.productSelect, 'vip_price', productSelect.vip_price);
this.$set(this, "attrValue", value.join(","));
} else if (!productSelect && productAttr.length) {
this.$set(
this.attr.productSelect,
"store_name",
this.storeName
);
this.$set(this.attr.productSelect, "image", this.storeInfo.image);
this.$set(this.attr.productSelect, "price", this.storeInfo.price);
this.$set(this.attr.productSelect, "stock", 0);
this.$set(this.attr.productSelect, "unique", "");
this.$set(this.attr.productSelect, "cart_num", 0);
this.$set(this, "attrValue", "");
this.$set(this.attr.productSelect, 'vip_price', this.storeInfo.vip_price);
} else if (!productSelect && !productAttr.length) {
this.$set(
this.attr.productSelect,
"store_name",
this.storeName
);
this.$set(this.attr.productSelect, "image", this.storeInfo.image);
this.$set(this.attr.productSelect, "price", this.storeInfo.price);
this.$set(this.attr.productSelect, "stock", this.storeInfo.stock);
this.$set(
this.attr.productSelect,
"unique",
this.storeInfo.unique || ""
);
this.$set(this.attr.productSelect, "cart_num", 1);
this.$set(this, "attrValue", "");
this.$set(this.attr.productSelect, 'vip_price', this.storeInfo.vip_price);
}
},
/**
* 属性变动赋值
*
*/
ChangeAttr: function(res) {
let productSelect = this.productValue[res];
if (productSelect && productSelect.stock > 0) {
this.$set(this.attr.productSelect, "image", productSelect.image);
this.$set(this.attr.productSelect, "price", productSelect.price);
this.$set(this.attr.productSelect, "stock", productSelect.stock);
this.$set(this.attr.productSelect, "unique", productSelect.unique);
this.$set(this.attr.productSelect, 'vip_price', productSelect.vip_price);
this.$set(this.attr.productSelect, "cart_num", 1);
this.$set(this, "attrValue", res);
} else if (productSelect && productSelect.stock == 0) {
this.$set(this.attr.productSelect, "image", productSelect.image);
this.$set(this.attr.productSelect, "price", productSelect.price);
this.$set(this.attr.productSelect, "stock", 0);
this.$set(this.attr.productSelect, "unique", "");
this.$set(this.attr.productSelect, 'vip_price', productSelect.vip_price);
this.$set(this.attr.productSelect, "cart_num", 0);
this.$set(this, "attrValue", "");
} else {
this.$set(this.attr.productSelect, "image", this.storeInfo.image);
this.$set(this.attr.productSelect, "price", this.storeInfo.price);
this.$set(this.attr.productSelect, "stock", 0);
this.$set(this.attr.productSelect, "unique", "");
this.$set(this.attr.productSelect, 'vip_price', this.storeInfo.vip_price);
this.$set(this.attr.productSelect, "cart_num", 0);
this.$set(this, "attrValue", "");
}
},
attrVal(val) {
this.$set(this.attr.productAttr[val.indexw], 'index', this.attr.productAttr[val.indexw].attr_values[val
.indexn]);
},
/**
* 购物车手动填写
*
*/
iptCartNum: function(e) {
this.$set(this.attr.productSelect, 'cart_num', e);
},
// 点击默认单属性购物车
goCartDan(item, index) {
if (!this.isLogin) {
this.getIsLogin();
} else {
this.tempArr[index].cart_num = 1;
this.$store.commit('indexData/setCartNum', parseInt(this.cartNum) + 1)
this.$set(this, 'tempArr', this.tempArr);
this.goCat(0, item.id, 1);
}
},
// 改变单属性购物车
ChangeCartNumDan(changeValue, index, item) {
let num = this.tempArr[index];
let stock = this.tempArr[index].stock;
this.ChangeCartNum(changeValue, num, stock, 0, item.id);
},
// 改变多属性购物车
ChangeCartNumDuo(changeValue) {
//获取当前变动属性
let productSelect = this.productValue[this.attrValue];
//如果没有属性,赋值给商品默认库存
if (productSelect === undefined && !this.attr.productAttr.length)
productSelect = this.attr.productSelect;
//无属性值即库存为0;不存在加减;
if (productSelect === undefined) return;
let stock = productSelect.stock || 0;
let num = this.attr.productSelect;
this.ChangeCartNum(changeValue, num, stock, 1);
},
// 已经加入购物车时的购物加减;
ChangeCartList(changeValue, index) {
let list = this.cartData.cartList;
let num = list[index];
let stock = list[index].trueStock;
this.ChangeCartNum(changeValue, num, stock, 0, num.product_id, index, 1);
if (!list.length) {
this.cartData.iScart = false;
this.page = 1;
this.loadend = false;
this.tempArr = [];
this.getProducts();
}
},
// 购物车加减计算函数
ChangeCartNum(changeValue, num, stock, isDuo, id, index, cart) {
let cartNum = this.cartNum;
if (changeValue) {
num.cart_num++;
cartNum = isDuo ? this.cartNum : parseInt(cartNum) + 1;
if (num.cart_num > stock) {
if (isDuo) {
this.$set(this.attr.productSelect, "cart_num", stock ? stock : 1);
this.$set(this, "cart_num", stock ? stock : 1);
} else {
cartNum = this.cartNum + stock;
num.cart_num = stock ? stock : 0;
this.$set(this, 'tempArr', this.tempArr);
this.$set(this.cartData, 'cartList', this.cartData.cartList);
}
return this.$util.Tips({
title: "该产品没有更多库存了"
});
} else {
if (!isDuo) {
if (cart) {
this.goCat(0, id, 1, 1, num.product_attr_unique);
// this.getTotalPrice();
this.tempArr.forEach((item) => {
if (item.id == id) {
item.cart_num++;
}
})
} else {
this.goCat(0, id, 1);
}
} else {
this.tempArr.forEach((item) => {
if (item.id == id) {
item.cart_num++;
}
})
}
}
} else {
num.cart_num--;
cartNum = isDuo ? this.cartNum : parseInt(cartNum) - 1;
if (num.cart_num == 0) {
this.cartData.cartList.splice(index, 1);
if (isDuo) {
this.$set(this.attr.productSelect, "cart_num", 1);
this.$set(this, "cart_num", 1);
}
}
if (num.cart_num < 0) {
if (isDuo) {
this.$set(this.attr.productSelect, "cart_num", 1);
this.$set(this, "cart_num", 1);
} else {
cartNum = this.cartNum
num.cart_num = 0;
this.$set(this, 'tempArr', this.tempArr);
this.$set(this.cartData, 'cartList', this.cartData.cartList);
}
} else {
if (!isDuo) {
if (cart) {
this.goCat(0, id, 0, 1, num.product_attr_unique);
// this.getTotalPrice();
this.tempArr.forEach((item) => {
if (item.id == id) {
item.cart_num--;
}
})
} else {
this.goCat(0, id, 0);
}
} else {
this.tempArr.forEach((item) => {
if (item.id == id) {
item.cart_num--;
}
})
}
}
}
this.$store.commit('indexData/setCartNum', cartNum)
},
// 多规格加入购物车;
goCatNum() {
this.goCat(1, this.id, 1);
},
/*
* 加入购物车
*/
goCat: function(duo, id, type, cart, unique) {
let that = this;
if (duo) {
let productSelect = that.productValue[this.attrValue];
//如果有属性,没有选择,提示用户选择
if (
that.attr.productAttr.length &&
productSelect === undefined
)
return that.$util.Tips({
title: "产品库存不足,请选择其它属性"
});
}
let q = {
product_id: id,
num: duo ? that.attr.productSelect.cart_num : 1,
type: type,
unique: duo ? that.attr.productSelect.unique : cart ? unique : ""
};
postCartNum(q)
.then(function(res) {
if (duo) {
that.$store.commit('indexData/setCartNum', parseInt(that.cartNum) + that.attr.productSelect.cart_num)
that.attr.cartAttr = false;
that.$util.Tips({
title: "添加购物车成功"
});
// that.page = 1;
// that.loadend = false;
that.tempArr.forEach((item, index) => {
if (item.id == that.id) {
let arrtStock = that.attr.productSelect.stock
let objNum = parseInt(item.cart_num) + parseInt(that.attr.productSelect
.cart_num);
item.cart_num = objNum > arrtStock ? arrtStock : objNum
}
})
// that.productslist();
}
that.getCartNum();
if (!cart) {
that.getCartList(1);
}
})
.catch(err => {
return that.$util.Tips({
title: err
});
});
},
goCartDuo(item) {
if (!this.isLogin) {
this.getIsLogin();
} else {
// uni.showLoading({
// title: '加载中'
// });
this.storeName = item.store_name;
this.getAttrs(item.id);
this.$set(this, 'id', item.id);
this.$set(this.attr, 'cartAttr', true);
}
},
getIsLogin() {
toLogin();
},
// 商品详情接口;
getAttrs(id) {
let that = this;
getAttr(id, 0).then(res => {
// uni.hideLoading();
that.$set(that.attr, 'productAttr', res.data.productAttr);
that.$set(that, 'productValue', res.data.productValue);
that.$set(that, 'is_vip', res.data.storeInfo.is_vip);
that.$set(that, 'storeInfo', res.data.storeInfo);
that.DefaultSelect();
})
},
// 去详情页
goDetail(item) {
goShopDetail(item, this.uid).catch(res => {
uni.navigateTo({
url: `/pages/goods_details/index?id=${item.id}&fromType=1`
});
});
},
openTap() {
this.iSlong = false
},
closeTap() {
this.iSlong = true
},
// 分类数据
getAllCategory: function() {
let that = this;
getStoreCategory().then(res => {
let data = res.data;
that.categoryList = data;
if (that.level == 2) {
that.categoryErList = that.categoryList;
} else {
that.categoryErList = that.categoryList[0].children ? that.categoryList[0].children : [];
}
that.categoryThreeList = that.categoryErList[0].children ? that.categoryErList[0]
.children : [];
if (this.categoryThreeList.length) {
this.categoryThreeList.unshift({
cate_name: '全部商品',
id: 0
})
}
that.categoryTitle = that.categoryList[0].cate_name;
that.cid = that.categoryList[0].id;
if (that.level == 2) {
that.sid = that.categoryThreeList[0].id;
} else {
that.sid = that.categoryErList[0].id;
}
// that.switchNumFun(that.info.default_delivery);
that.getProducts();
})
},
tapNav(index, item) {
this.navActive = index;
this.tabClick = 0;
this.categoryThreeList = item.children || [];
if (!this.categoryThreeList[0] || this.categoryThreeList[0].id) {
this.categoryThreeList.unshift({
cate_name: '全部商品',
id: 0
});
}
if (this.level == 2) {
this.cid = item.id;
this.sid = 0;
} else {
this.sid = item.id;
this.tid = 0;
}
this.page = 1;
this.loadend = false;
this.tempArr = [];
this.getProducts();
},
// 导航栏点击
longClick(index, item) {
if (this.categoryThreeList.length > 3) {
this.tabLeft = (index - 1) * (this.isWidth + 6) //设置下划线位置
};
this.tabClick = index; //设置导航点击了哪一个
// this.iSlong = true;
if (this.level == 2) {
this.sid = item.id;
} else {
this.tid = item.id;
}
this.page = 1;
this.loadend = false;
this.tempArr = [];
this.getProducts();
},
// 打开客服
goKefu() {
this.getCustomerList()
this.$refs.kefu.show = true
},
// 获取客服列表数据
getCustomerList() {
getCustomerList(this.info.id).then(res => {
this.customerList = res.data
})
},
// 关闭客服
closeKefu() {
this.$refs.kefu.show = false
},
tapNavOne(item, index) {
this.navOneActive = index;
this.navActive = 0;
this.tabClick = 0;
this.categoryErList = item.children;
this.categoryThreeList = this.categoryErList[0].children || [];
if (!this.categoryThreeList[0] || this.categoryThreeList[0].id) {
this.categoryThreeList.unshift({
cate_name: '全部商品',
id: 0
});
}
this.categoryTitle = item.cate_name;
this.cid = item.id;
this.sid = item.children[0] ? item.children[0].id : 0;
this.tid = 0;
this.page = 1;
this.loadend = false;
this.tempArr = [];
this.getProducts();
},
moreNav() {
this.currentPage = !this.currentPage;
},
goAddressPages() {
uni.navigateTo({
url: '/pages/users/user_address_list/index?isCollage=1&store_id=' + this.info.id
});
},
navOneOpen() {
this.oneVisible = true;
},
navOneClose() {
this.oneVisible = false;
},
getAddressList() {
getAddressList({
page: 1,
limit: 100
}).then(res => {
let addressList = res.data;
this.addressList = addressList;
})
}
},
}
</script>
<style lang="scss">
/deep/.uni-badge {
z-index: 100;
}
.cartIcon-placeholder {
height: 132rpx;
}
.safe-area-inset-bottom {
height: constant(safe-area-inset-bottom);
height: env(safe-area-inset-bottom);
}
.input-wrapper {
position: relative;
height: 78rpx;
padding: 0 24rpx;
.input {
flex: 1;
min-width: 0;
height: 58rpx;
padding-left: 24rpx;
border-radius: 29rpx;
background: rgba(255, 255, 255, 0.2);
font-size: 24rpx;
color: #FFFFFF;
.iconfont {
margin-right: 16rpx;
font-size: 32rpx;
}
}
}
/deep/.product-window.joinCart {
z-index: 999;
}
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
display: none
}
.page {
position: relative;
flex-wrap: nowrap;
min-height: 100vh;
/deep/.mask {
z-index: 99;
}
/deep/.attrProduct {
.mask {
z-index: 100;
}
}
.header {
/* #ifdef H5 */
padding: 0 20rpx 20rpx;
/* #endif */
.pageIndex {
width: 68rpx;
height: 68rpx;
border-radius: 50%;
background-color: #F7F7F7;
.iconfont {
color: #666666;
font-size: 30rpx;
}
}
.search {
flex: 1;
height: 58rpx;
border-radius: 29rpx;
background: rgba(255, 255, 255, 0.2);
font-size: 24rpx;
padding: 0 24rpx;
color: #FFFFFF;
.iconfont {
font-size: 32rpx;
margin-right: 16rpx;
color: #FFFFFF;
}
}
}
.conter {
flex-wrap: nowrap;
flex: 1;
background: #FFFFFF;
.aside-box {
width: 168rpx;
}
.aside {
width: 168rpx;
height: 100%;
background: #F5F5F5;
.item {
height: 100rpx;
width: 100%;
font-size: 26rpx;
color: #333333;
.inner {
position: relative;
height: 100%;
}
&.on {
background: #FFFFFF;
width: 100%;
text-align: center;
color: var(--view-theme);
font-weight: 500;
position: relative;
.inner::after {
content: "";
position: absolute;
width: 6rpx;
height: 48rpx;
background: var(--view-theme);
border-radius: 0 4rpx 4rpx 0;
left: 0
}
}
&.btr {
background: #FFFFFF;
.inner {
border-top-right-radius: 24rpx;
background: #F5F5F5;
}
}
&.bbr {
background: #FFFFFF;
.inner {
border-bottom-right-radius: 24rpx;
background: #F5F5F5;
}
}
}
}
.wrapper {
flex: 1;
flex-wrap: nowrap;
min-width: 0;
.bgcolor-box {
height: 104rpx;
}
.bgcolor {
flex-wrap: nowrap;
height: 104rpx;
background: #FFFFFF;
top: 0;
right: 0;
left: 168rpx;
z-index: 10;
}
.longTab {
flex: 1;
min-width: 0;
.longItem {
display: inline-block;
height: 56rpx;
border-radius: 28rpx;
margin-left: 16rpx;
background: #F5F5F5;
vertical-align: middle;
text-align: center;
font-size: 24rpx;
line-height: 54rpx;
color: #333333;
.inner {
height: 56rpx;
border: 1rpx solid transparent;
border-radius: 28rpx;
background-clip: content-box;
transform: rotateZ(360deg);
}
&.click {
background: var(--view-theme);
color: var(--view-theme);
.inner {
background-color: rgba(255, 255, 255, 0.9);
}
}
}
.underlineBox {
height: 3px;
width: 20%;
display: flex;
align-content: center;
justify-content: center;
transition: .5s;
.underline {
width: 33rpx;
height: 4rpx;
background-color: #FFFFFF;
}
}
}
.openList {
position: relative;
width: 92rpx;
text-align: center;
line-height: 104rpx;
.btn {
display: inline-block;
width: 56rpx;
height: 56rpx;
border-radius: 50%;
background: #F5F5F5;
vertical-align: middle;
line-height: 56rpx;
}
.iconfont {
vertical-align: middle;
font-size: 32rpx;
color: #333333;
}
.img {
position: absolute;
top: 0;
left: 0;
width: 18rpx;
height: 100%;
transform: translateX(-50%);
}
}
.goodsList {
margin-top: 0rpx;
padding: 0 30rpx 0 20rpx;
/deep/.item {
margin-bottom: 33rpx !important;
.text {
font-size: 26rpx;
}
.bottom {
.sales {
.money {
font-size: 34rpx;
text {
font-size: 26rpx;
}
}
}
.cart {
.pictrue {
width: 50rpx;
height: 50rpx;
}
}
}
}
}
}
}
.store-address {
width: 100%;
margin-top: 15rpx;
position: relative;
padding: 12rpx 30rpx 0 30rpx;
height: 185rpx;
background-color: #fff;
.address {
font-size: 32rpx;
font-weight: 500;
color: #333333;
.name {
max-width: 400rpx;
}
.icon-xiangyou {
font-size: 24rpx;
margin-left: 10rpx;
}
}
.distance {
margin-top: 16rpx;
font-size: 24rpx;
font-weight: 400;
color: #999999;
}
.time {
margin-top: 16rpx;
font-size: 24rpx;
font-weight: 400;
color: #333333;
}
}
}
.group-btn {
width: 80rpx;
height: 64rpx;
border-radius: 50%;
margin-left: 16rpx;
.img {
width: 100%;
height: 100%;
}
}
/* #ifdef H5 || MP */
.dialog {
padding: 44rpx 20rpx 0;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
border-radius: 40rpx 40rpx 0 0;
background: linear-gradient(180deg, #F5F5F5 0%, #F5F5F5 0%, #FFFFFF 100%);
}
.dialog-head {
padding: 0 24rpx;
font-weight: 500;
font-size: 32rpx;
color: #333333;
.btn {
width: 40rpx;
height: 40rpx;
cursor: pointer;
.iconfont {
font-size: 40rpx;
color: #BBBBBB;
}
}
}
.dialog-body {
margin-top: 48rpx;
.navbar {
flex-shrink: 0;
position: relative;
height: 82rpx;
.navbar-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 190rpx;
border-radius: 16rpx 16rpx 0 0;
background: #EEEEEE;
}
.active-bg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 96rpx;
.image1 {
width: 50%;
height: 100%;
}
.image2 {
width: 48rpx;
height: 78rpx;
}
}
.inner {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
.item {
flex: 1;
min-width: 0;
font-size: 28rpx;
line-height: 44rpx;
color: #666666;
.iconfont {
display: none;
margin-right: 8rpx;
font-size: 36rpx;
}
&.on {
font-weight: 500;
font-size: 32rpx;
color: var(--view-theme);
.iconfont {
display: inline-block;
}
}
}
}
}
.dialog-content {
position: relative;
border-radius: 0 0 16rpx 16rpx;
background: #FFFFFF;
&.btl {
border-top-left-radius: 24rpx;
}
&.btr {
border-top-right-radius: 24rpx;
}
.link {
padding: 40rpx 32rpx;
font-size: 22rpx;
line-height: 30rpx;
color: #999999;
.title {
margin-bottom: 16rpx;
font-weight: 500;
font-size: 28rpx;
line-height: 40rpx;
color: #333333;
}
.iconfont {
font-size: 32rpx;
}
}
}
.address-box {
.list {
padding: 36rpx 32rpx;
}
.item {
margin-top: 32rpx;
color: #333333;
&:first-child {
margin-top: 0;
}
.text {
flex: 1;
}
.info {
font-weight: 500;
font-size: 28rpx;
line-height: 40rpx;
}
.name {
margin-top: 8rpx;
font-size: 22rpx;
line-height: 30rpx;
color: #999999;
}
.iconfont {
visibility: hidden;
font-size: 36rpx;
}
&.on {
color: var(--view-theme);
.name {
color: var(--view-theme);
}
.iconfont {
visibility: visible;
}
}
}
}
.btn-box {
height: 88rpx;
font-size: 24rpx;
line-height: 34rpx;
color: #666666;
.iconfont {
margin-left: 4rpx;
font-size: 24rpx;
}
}
.store-box {
padding: 40rpx 28rpx 40rpx 32rpx;
.text {
flex: 1;
}
.name {
font-weight: 500;
font-size: 28rpx;
line-height: 40rpx;
color: #333333;
}
.info {
margin-top: 16rpx;
font-size: 22rpx;
line-height: 30rpx;
color: #999999;
}
.value {
flex: 1;
}
.iconfont {
margin-right: 12rpx;
font-size: 22rpx;
}
.map-box {
position: relative;
width: 188rpx;
height: 104rpx;
margin-left: 32rpx;
.map {
width: 100%;
height: 100%;
}
.img-box {
position: absolute;
bottom: 16rpx;
left: 50%;
width: 52rpx;
height: 52rpx;
padding: 6rpx;
border-radius: 6rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.0784);
transform: translateX(-50%);
}
.img {
width: 100%;
height: 100%;
border-radius: 6rpx;
}
.range {
position: absolute;
top: -40rpx;
left: 50%;
height: 36rpx;
padding: 0 16rpx;
border-radius: 6rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.0784);
transform: translateX(-50%);
white-space: nowrap;
font-size: 20rpx;
line-height: 36rpx;
color: #333333;
&::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border-width: 5rpx 9rpx;
border-style: solid;
border-color: #FFFFFF transparent transparent;
transform: translate(-50%, 100%);
}
}
.dot {
position: absolute;
bottom: -10rpx;
left: 50%;
width: 6rpx;
height: 6rpx;
border-radius: 50%;
background: var(--view-theme);
transform: translateX(-50%);
}
}
}
}
.dialog-foot {
padding: 20rpx 0;
.btn {
height: 72rpx;
border-radius: 36rpx;
background: var(--view-theme);
text-align: center;
font-weight: 500;
font-size: 26rpx;
line-height: 72rpx;
color: #FFFFFF;
}
}
/* #endif */
.store-section {
padding: 20rpx;
.panel {
padding: 0 32rpx 32rpx;
border-radius: 16rpx;
background: #FFFFFF;
}
.store-name {
height: 92rpx;
.name-wrap {
flex: 1;
min-width: 0;
}
.name-inner {
display: inline-flex;
max-width: 100%;
}
.name {
flex: 1;
min-width: 0;
margin: 0 8rpx 0 10rpx;
font-weight: 500;
font-size: 30rpx;
color: #333333;
}
.iconfont {
font-size: 32rpx;
color: #333333;
}
.tips {
font-size: 24rpx;
color: var(--view-theme);
}
}
.address-wrap {
.address-box {
flex: 1;
min-width: 0;
font-size: 22rpx;
color: #666666;
}
.address-info {
margin-top: 20rpx;
line-height: 34rpx;
}
.distance {
position: relative;
padding-right: 12rpx;
margin-right: 12rpx;
&::after {
content: "";
position: absolute;
top: 50%;
right: 0;
width: 1rpx;
height: 18rpx;
background: #CCCCCC;
transform: translateY(-50%);
}
}
.btn {
position: relative;
padding-left: 24rpx;
margin-left: 24rpx;
text-align: center;
font-size: 20rpx;
color: #333333;
&::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 2rpx;
height: 24rpx;
background: #EEEEEE;
transform: translateY(-50%);
}
&:first-child::before {
display: none;
}
.iconfont {
display: inline-block;
margin-bottom: 8rpx;
font-size: 40rpx;
}
}
}
.switch {
width: 192rpx;
height: 48rpx;
background: #F5F5F5;
border-radius: 24rpx;
margin-left: 24rpx;
.btn {
width: 96rpx;
height: 48rpx;
border-radius: 24rpx;
text-align: center;
font-size: 24rpx;
line-height: 48rpx;
color: #999999;
&.on {
background: var(--view-theme);
color: #FFFFFF;
}
}
}
}
.headerBg {
position: absolute;
top: 0;
right: 0;
left: 0;
.image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.shade {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.4047) 0%, #F5F5F5 100%);
}
}
.category {
flex-wrap: nowrap;
border-bottom: 1rpx solid #EEEEEE;
background: #FFFFFF;
.scroll-view {
flex: 1;
min-width: 0;
padding-left: 20rpx;
white-space: nowrap;
}
.item {
display: inline-block;
padding: 24rpx 0;
margin-right: 8rpx;
vertical-align: middle;
&.on {
.img-box {
border-color: var(--view-theme);
}
.title {
background: linear-gradient(90deg, var(--view-gradient) 0%, var(--view-theme) 100%);
color: #FFFFFF;
}
}
}
.img-box {
width: 104rpx;
height: 104rpx;
padding: 6rpx;
border: 3rpx solid transparent;
border-radius: 50%;
margin: 0 auto;
}
.img {
width: 92rpx;
height: 92rpx;
border-radius: 50%;
}
.title {
width: 120rpx;
height: 40rpx;
border-radius: 20rpx;
margin-top: 8rpx;
text-align: center;
font-size: 24rpx;
line-height: 40rpx;
color: #333333;
}
.btn {
position: relative;
flex-wrap: nowrap;
width: 72rpx;
font-size: 24rpx;
line-height: 34rpx;
color: #333333;
.img {
position: absolute;
top: 0;
left: 0;
width: 22rpx;
height: 100%;
transform: translateX(-50%);
}
}
}
.downTab {
flex-wrap: nowrap;
max-height: 820rpx;
border-radius: 0rpx 0rpx 32rpx 32rpx;
background: #FFFFFF;
.title {
padding: 32rpx 0 24rpx 30rpx;
font-size: 32rpx;
line-height: 44rpx;
color: #333333;
}
.scroll-view {
flex: 1;
min-height: 0;
box-sizing: border-box;
}
.children {
padding: 0 0 8rpx 30rpx;
margin: 0 -24rpx 0 0;
.item {
width: 154rpx;
height: 56rpx;
border-radius: 28rpx;
margin: 0 24rpx 24rpx 0;
background: #F5F5F5;
text-align: center;
font-size: 24rpx;
line-height: 56rpx;
color: #333333;
.inner {
width: 154rpx;
height: 56rpx;
border: 1rpx solid transparent;
border-radius: 28rpx;
background-clip: content-box;
transform: rotateZ(360deg);
}
&.click {
background: var(--view-theme);
color: var(--view-theme);
.inner {
background-color: rgba(255, 255, 255, 0.9);
}
}
}
}
.btn {
height: 80rpx;
font-size: 24rpx;
color: #999999;
.iconfont {
margin-left: 4rpx;
font-size: 24rpx;
}
}
}
.category-dialog {
border-radius: 0rpx 0rpx 32rpx 32rpx;
background: #FFFFFF;
.scroll-view {
flex: 1;
min-height: 0;
padding-left: 32rpx;
}
.item {
display: inline-block;
margin-right: 22rpx;
margin-bottom: 26rpx;
vertical-align: middle;
&.on {
.img-box {
border-color: var(--view-theme);
}
.title {
background: linear-gradient(90deg, var(--view-gradient) 0%, var(--view-theme) 100%);
color: #FFFFFF;
}
}
}
.img-box {
width: 104rpx;
height: 104rpx;
padding: 6rpx;
border: 3rpx solid transparent;
border-radius: 50%;
margin: 0 auto;
}
.img {
width: 92rpx;
height: 92rpx;
border-radius: 50%;
}
.title {
width: 120rpx;
height: 40rpx;
border-radius: 20rpx;
margin-top: 8rpx;
text-align: center;
font-size: 24rpx;
line-height: 40rpx;
color: #333333;
}
.btn {
position: relative;
flex-wrap: nowrap;
height: 80rpx;
font-size: 24rpx;
line-height: 34rpx;
color: #999999;
.iconfont {
margin-left: 4rpx;
font-size: 24rpx;
}
}
}
// .input-box.fixed {
// background: #FFFFFF;
// top: 0;
// right: 0;
// left: 0;
// z-index: 10;
// .input {
// background: #F5F5F5;
// color: #999999;
// }
// .menu_box .iconfont {
// color: #333333;
// }
// }
</style>