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.
728 lines
14 KiB
728 lines
14 KiB
<template>
|
|
<!-- 商品分类 -->
|
|
<view :style="colorStyle">
|
|
<!-- 门店的两种样式布局 -->
|
|
<storeCate1 v-if="home_style==1" :info="info" :customerType="customer_type" ref="refresh2">
|
|
</storeCate1>
|
|
<storeCate2 v-else-if="home_style==2" :cart_num="cart_num" :info="info" :customerType="customer_type" ref="refresh">
|
|
</storeCate2>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState,
|
|
mapGetters
|
|
} from 'vuex';
|
|
import colors from "@/mixins/color";
|
|
import storeCate1 from './store_cate1.vue'
|
|
import storeCate2 from './store_cate2.vue'
|
|
import {
|
|
getnearbyStore
|
|
} from '@/api/new_store.js'
|
|
import {
|
|
colorChange
|
|
} from '@/api/api.js';
|
|
import {
|
|
getCartCounts
|
|
} from '@/api/order.js';
|
|
// #ifdef MP
|
|
import util from '@/utils/util.js';
|
|
// #endif
|
|
export default {
|
|
computed: {
|
|
...mapState({
|
|
nearbyStore: state => state.app.nearbyStore
|
|
}),
|
|
...mapGetters(['isLogin', 'uid'])
|
|
},
|
|
components: {
|
|
storeCate1,
|
|
storeCate2,
|
|
},
|
|
mixins: [colors],
|
|
data() {
|
|
return {
|
|
info: {},
|
|
id: 0,
|
|
category: '',
|
|
home_style: 0,
|
|
customer_type: 1,
|
|
where: {
|
|
latitude: 0,
|
|
longitude: 0,
|
|
store_id: 0
|
|
},
|
|
cart_num: 0,
|
|
mapFrom: 0,
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
// #ifdef MP
|
|
if (options.scene) {
|
|
options = util.getUrlParams(decodeURIComponent(options.scene));
|
|
}
|
|
// #endif
|
|
this.where.store_id = this.nearbyStore;
|
|
if (options.mapFrom) {
|
|
this.mapFrom = options.mapFrom;
|
|
}
|
|
if (options.id) {
|
|
this.where.store_id = options.id;
|
|
uni.setStorageSync('user_store_id', options.id);
|
|
}
|
|
// this.mapFrom = options.mapFrom || 0;
|
|
// this.where.store_id = options.id;
|
|
// uni.setStorageSync('user_store_id', options.id);
|
|
try {
|
|
this.where.latitude = uni.getStorageSync('user_latitude');
|
|
this.where.longitude = uni.getStorageSync('user_longitude');
|
|
if (options.mapFrom == 1) {
|
|
this.getStore();
|
|
//this.getCartNum(options.id);
|
|
} else {
|
|
this.selfLocation();
|
|
if (!this.$util.checkOpenGPSServiceByAndroidIOS()) {
|
|
this.getStore();
|
|
}
|
|
}
|
|
} catch (e) {
|
|
this.getStore();
|
|
}
|
|
},
|
|
onUnload() {
|
|
this.mapFrom = 0;
|
|
},
|
|
onHide() {
|
|
this.mapFrom = 0;
|
|
},
|
|
onShow() {
|
|
if (this.mapFrom == 0) {
|
|
if (this.home_style == 1) {
|
|
setTimeout(() => {
|
|
this.$refs.refresh2.getNoCart();
|
|
}, 10)
|
|
}
|
|
}
|
|
},
|
|
onPageScroll(e) {
|
|
uni.$emit('onPageScroll', e);
|
|
uni.$emit('scroll');
|
|
},
|
|
onReachBottom: function() {
|
|
uni.$emit('onReachBottom');
|
|
},
|
|
methods: {
|
|
otherFun(object) {
|
|
if (!!object) {
|
|
if (this.home_style == 1) {
|
|
this.$refs.refresh2.updateFun(object,1);
|
|
}else{
|
|
this.$refs.refresh.updateFun(object,1);
|
|
}
|
|
}
|
|
},
|
|
selfLocation() {
|
|
let self = this
|
|
// #ifdef H5
|
|
if (self.$wechat.isWeixin()) {
|
|
self.$wechat.location().then(res => {
|
|
// this.where.latitude = res.latitude;
|
|
// this.where.longitude = res.longitude;
|
|
uni.setStorageSync('user_latitude', res.latitude);
|
|
uni.setStorageSync('user_longitude', res.longitude);
|
|
self.getStore();
|
|
}).catch(err => {
|
|
self.getStore();
|
|
})
|
|
} else {
|
|
// #endif
|
|
uni.getLocation({
|
|
type: 'gcj02',
|
|
success: (res) => {
|
|
try {
|
|
// this.where.latitude = res.latitude;
|
|
// this.where.longitude = res.longitude;
|
|
uni.setStorageSync('user_latitude', res.latitude);
|
|
uni.setStorageSync('user_longitude', res.longitude);
|
|
} catch {}
|
|
// self.getStore();
|
|
},
|
|
fail: (err) => {
|
|
// return self.$util.Tips({
|
|
// title: err.errMsg
|
|
// });
|
|
},
|
|
complete: function() {
|
|
self.getStore();
|
|
}
|
|
});
|
|
// #ifdef H5
|
|
}
|
|
// #endif
|
|
},
|
|
// 获取接口附近门店
|
|
getStore() {
|
|
// this.where.latitude = uni.getStorageSync('user_latitude');
|
|
// this.where.longitude = uni.getStorageSync('user_longitude');
|
|
getnearbyStore(this.where).then(res => {
|
|
let data = res.data;
|
|
let info = data.info;
|
|
if (Object.prototype.toString.call(info) === '[object Array]') {
|
|
info = {};
|
|
}
|
|
this.info = {
|
|
// #ifdef H5 || MP
|
|
store_splicing_switch: data.store_splicing_switch,
|
|
// #endif
|
|
store_self_mention: parseInt(data.store_self_mention),
|
|
...info,
|
|
};
|
|
this.cart_num = data.cart_num;
|
|
this.customer_type = parseInt(info.customer_type);
|
|
this.home_style = info.home_style || 0;
|
|
this.id = info.id || 0;
|
|
uni.setStorageSync('user_store_id', this.id);
|
|
if (this.home_style === 1) {
|
|
setTimeout(() => {
|
|
// this.$refs.refresh2.getAllCategory();
|
|
if (this.isLogin) {
|
|
this.$refs.refresh2.getCartList(1);
|
|
}
|
|
}, 10)
|
|
} else if (this.home_style === 2) {
|
|
setTimeout(() => {
|
|
// this.$refs.refresh.where.store_id = this.id
|
|
// this.$refs.refresh.loadend = false
|
|
// this.$refs.refresh.getProducts(true)
|
|
})
|
|
}
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
page {
|
|
background: #F5F5F5;
|
|
}
|
|
|
|
/deep/.uni-badge--error {
|
|
background-color: var(--view-theme) !important;
|
|
}
|
|
|
|
/deep/.scroll-list{
|
|
margin-bottom: 60rpx !important;
|
|
}
|
|
|
|
/deep/.footer {
|
|
position: fixed;
|
|
right: 20rpx;
|
|
left: 20rpx;
|
|
bottom: 36rpx;
|
|
bottom: calc(36rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
|
|
bottom: calc(36rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
|
|
z-index: 101;
|
|
|
|
.cartIcon {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
border-radius: 48rpx;
|
|
background: linear-gradient(-90deg, var(--view-gradient), var(--view-theme));
|
|
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
|
|
|
|
.image-wrap {
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
border-radius: 48rpx;
|
|
text-align: center;
|
|
line-height: 96rpx;
|
|
}
|
|
|
|
.image {
|
|
width: 54rpx;
|
|
height: 54rpx;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.inner-box {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
border-radius: 48rpx;
|
|
overflow: hidden;
|
|
transition: 0.3s;
|
|
|
|
&.open {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.inner {
|
|
flex-wrap: nowrap;
|
|
height: 96rpx;
|
|
padding: 0 12rpx 0 128rpx;
|
|
border-radius: 48rpx;
|
|
background: #333333;
|
|
}
|
|
|
|
.btn {
|
|
width: 186rpx;
|
|
height: 72rpx;
|
|
padding: 0 32rpx;
|
|
background: linear-gradient(-90deg, var(--view-gradient) 0%, var(--view-theme) 100%);
|
|
border-radius: 36rpx;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
line-height: 72rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.detail-btn {
|
|
margin-left: 16rpx;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
|
|
.iconfont {
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
/deep/.goodCate .uni-badge-left-margin .uni-badge--error {
|
|
background-color: #fff !important;
|
|
color: var(--view-theme);
|
|
border-color: var(--view-theme);
|
|
z-index: 8;
|
|
}
|
|
|
|
/deep/.goodCate .footer .cartIcon .uni-badge-left-margin .uni-badge--error {
|
|
right: 0 !important;
|
|
top: 10px !important;
|
|
}
|
|
|
|
/deep/.one .uni-badge-left-margin .uni-badge--error {
|
|
background-color: var(--view-theme) !important;
|
|
color: #fff;
|
|
border-color: #fff;
|
|
z-index: 8;
|
|
}
|
|
|
|
/deep/.mask {
|
|
z-index: 99;
|
|
}
|
|
|
|
/deep/.good-cate {
|
|
padding: 80rpx;
|
|
}
|
|
|
|
/deep/.address-window {
|
|
/* #ifdef H5 */
|
|
bottom: 94rpx !important;
|
|
bottom: calc(94rpx+ constant(safe-area-inset-bottom)) !important; ///兼容 IOS<11.2/
|
|
bottom: calc(94rpx + env(safe-area-inset-bottom)) !important; ///兼容 IOS>11.2/
|
|
/* #endif */
|
|
/* #ifndef H5 */
|
|
bottom: 98rpx;
|
|
bottom: calc(98rpx + constant(safe-area-inset-bottom)) !important; ///兼容 IOS<11.2/
|
|
bottom: calc(98rpx + env(safe-area-inset-bottom)) !important; ///兼容 IOS>11.2/
|
|
|
|
/* #endif */
|
|
&.ons {
|
|
bottom: 0 !important;
|
|
bottom: constant(safe-area-inset-bottom) !important; ///兼容 IOS<11.2/
|
|
bottom: env(safe-area-inset-bottom) !important; ///兼容 IOS>11.2/
|
|
}
|
|
}
|
|
|
|
/deep/.dialog_nav::before {
|
|
margin: 0;
|
|
}
|
|
|
|
/deep/.dialog_nav {
|
|
&.dialogIndex {
|
|
&::before {
|
|
left: -172rpx !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/deep/.menu_box {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-right: 20rpx;
|
|
|
|
.iconfont {
|
|
font-size: 40rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
/deep/.tui-drawer-container_right {
|
|
left: 80rpx !important;
|
|
border-radius: 50rpx 0 0 50rpx;
|
|
}
|
|
|
|
/deep/.tui-header {
|
|
.tui-list-cell {
|
|
padding: 24rpx 10rpx !important;
|
|
font-size: 24rpx !important;
|
|
color: #333333 !important;
|
|
|
|
&::after {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.open {
|
|
font-size: 20rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
.brand-box {
|
|
/deep/.tui-header {
|
|
.tui-list-cell {
|
|
padding: 24rpx 0 !important;
|
|
font-weight: 500;
|
|
font-size: 28rpx !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/deep/.input-box.fixed {
|
|
background: #FFFFFF;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 10;
|
|
|
|
.input {
|
|
background: #F5F5F5;
|
|
color: #999999;
|
|
}
|
|
|
|
.menu_box .iconfont {
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
/* #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 {
|
|
height: 388rpx;
|
|
|
|
.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 */
|
|
</style> |