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.
1114 lines
26 KiB
1114 lines
26 KiB
<template>
|
|
<view class="container">
|
|
<global-loading />
|
|
|
|
<!-- 店铺首页 -->
|
|
<view class="content" v-if="id">
|
|
<view class="shop-top" :style="{'padding-top': topHeight + 'px'}">
|
|
<image src="https://ceres.zkthink.com/static/images/back_img04.png" class="back" @click="back"></image>
|
|
<view class="search-btn" @click="searchPro">
|
|
<image class="search-icon" src="https://ceres.zkthink.com/static/img/searchImg.png" mode="widthFix">
|
|
</image>
|
|
<text class="fs24 font-color-999 mar-left-10">请输入您想要的宝贝</text>
|
|
</view>
|
|
</view>
|
|
<view class="stopInfo">
|
|
<view class="shop-top-content">
|
|
<view class="contentLeft">
|
|
<image :src="storeInfo.shopLogo" class="photo-img"></image>
|
|
<view class="shop-info-top">
|
|
<view class="shop-name">
|
|
<text class="shop-name">{{storeInfo.shopName}}</text>
|
|
<text class="shop-num">粉丝数：{{fansNumber}}</text>
|
|
</view>
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<view v-if="hasService" class="btns flex-column-plus mar-left-10" @click="flyToService">
|
|
<image class="store-icon"
|
|
src="https://ceres.zkthink.com/static/images/service-product-detail.png"></image>
|
|
<text>客服</text>
|
|
</view>
|
|
<!-- #endif -->
|
|
</view>
|
|
</view>
|
|
<view class="contentRight">
|
|
<view class="favorites-box cur-poi" @click="collectToggle">
|
|
<image v-if="ifCollect === 0" class="store-icon"
|
|
src="https://ceres.zkthink.com/static/images/iconShoucang.png">
|
|
</image>
|
|
<image v-else class="store-icon"
|
|
src="https://ceres.zkthink.com/static/images/shoucangActive.png"></image>
|
|
<text class="text">{{ifCollect === 0? '收藏' : '取消'}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="distributorBox flex-items flex-sp-between" @click="applyForRecruit">
|
|
<view class="distributor">
|
|
<view class="flex-display flex-items">
|
|
<image class="item-btn-icon" src="https://ceres.zkthink.com/static/img/user/fenxiao2.png"
|
|
mode="widthFix"></image>
|
|
<view>成为分销员</view>
|
|
</view>
|
|
</view>
|
|
<view class="rightArrow">
|
|
<image src="https://ceres.zkthink.com/static/images/arrowRight.png"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="shopContent">
|
|
<view class="tabs-nav-warp">
|
|
<scroll-view class="tabs-nav" scroll-x="true">
|
|
<view class="ul">
|
|
<view class="li" :class="{'on':activeTab==='index'}" @click="tabChange('index')">首页</view>
|
|
<view class="li" :class="{'on':activeTab==='all'}" @click="tabChange('all')">全部</view>
|
|
<view class="li" v-for="(item,index) in classList" :key="index"
|
|
:class="{'on':activeTab===item.classifyId}" @click="tabChange(item.classifyId)">
|
|
{{item.classifyName}}
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view v-if="activeTab=== 'index'">
|
|
<canvas-page :componentsData="componentsData" :terminal="terminal" :typeId="3" :shopId="id">
|
|
</canvas-page>
|
|
</view>
|
|
<view v-else>
|
|
<view class="shop-banner-box" v-if="bannerInfo && bannerInfo.length > 0">
|
|
<swiper indicator-dots="true">
|
|
<swiper-item v-for="(item, index) in bannerInfo" :key="index" @click="applyForRecruit()">
|
|
<image :src="item.bannerImage" class="shop-banner-img"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view class="shop-list-content">
|
|
<!-- <view class="shop-list-nav">-->
|
|
<!-- <view class="nav-item padd-l" :class="{'active' : navIndex == 0}" @click="navIndexTap(0)">-->
|
|
<!-- <text class="nav-title">全部商品</text>-->
|
|
<!-- <text class="line"></text>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="nav-item padd-r" :class="{'active' : navIndex == 1}" @click="navIndexTap(1)">-->
|
|
<!-- <text class="nav-title">分类查看</text>-->
|
|
<!-- <text class="line"></text>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<block v-if='isShowGoods'>
|
|
<view class="navBox">
|
|
<view class="shop-list-nav">
|
|
<view class="nav-item-sort" @click="sortTap(1)">
|
|
<text class="nav-title" :class="{'active' : sortIndex == 1}">新品</text>
|
|
</view>
|
|
<view class="nav-item-sort" @click="sortTap(2)">
|
|
<text class="nav-title" :class="{'active' : sortIndex == 2}">价格</text>
|
|
<view class="r">
|
|
<image src="https://ceres.zkthink.com/static/images/arrowSortUp.png"
|
|
v-if="type == 1" class="arrow-img padd-t"></image>
|
|
<image src="https://ceres.zkthink.com/static/images/arrowSortDown.png"
|
|
v-if="type == 2" class="arrow-img padd-b"></image>
|
|
</view>
|
|
</view>
|
|
<view class="nav-item-sort" @click="sortTap(3)">
|
|
<text class="nav-title" :class="{'active' : sortIndex == 3}">销量</text>
|
|
<view class="r">
|
|
<image src="https://ceres.zkthink.com/static/images/arrowSortUp.png"
|
|
v-if="volume == 1" class="arrow-img padd-t"></image>
|
|
<image src="https://ceres.zkthink.com/static/images/arrowSortDown.png"
|
|
v-if="volume == 2" class="arrow-img padd-b"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="shop-list-box" v-if="total > 0">
|
|
<view class="item" v-for="(cItem, index) in storeInfolist" :key="index"
|
|
@click="goodsItemTap(cItem.productId,cItem.skuId)">
|
|
<image :src="cItem.image" class="product-img default-img"
|
|
onerror="this.src='url(https://ceres.zkthink.com/static/root/default.png) no-repeat center';this.οnerrοr=null"></image>
|
|
<view class="product-bottom-box">
|
|
<view class="product-name">{{cItem.productName}}</view>
|
|
<view class="product-num font-color-C5AA7B mar-top-10">已售{{cItem.number}}件
|
|
</view>
|
|
<view class="product-price-box">
|
|
<image v-if="cItem.activityType===1" class="iconImg"
|
|
src="https://ceres.zkthink.com/static/images/groupBuyIcon.png"
|
|
alt="拼团icon"></image>
|
|
<image v-if="cItem.activityType === 2" class="iconImg"
|
|
src="https://ceres.zkthink.com/static/images/spikeIcon.png" alt="秒杀活动">
|
|
</image>
|
|
<image v-if="cItem.activityType === 3" class="iconImg discountIcon"
|
|
src="https://zk-cereshop.oss-cn-shenzhen.aliyuncs.com/zkthink/2022-03-14/38184785db4b4fbca767ada611097ae9_discount.png"
|
|
alt="限时折扣活动"></image>
|
|
<image v-if="cItem.activityType === 4" class="iconImg"
|
|
src="https://ceres.zkthink.com/static/images/spikeIcon.png" alt="平台秒杀">
|
|
</image>
|
|
<image v-if="cItem.activityType===5" class="iconImg"
|
|
src="https://ceres.zkthink.com/static/images/discountListIcon.png"
|
|
alt="平台折扣"></image>
|
|
<image v-if="cItem.activityType===9" class="iconImg"
|
|
src="https://ceres.zkthink.com/static/images/memberCenterIcon.png"
|
|
alt="会员价"></image>
|
|
<image v-if="cItem.activityType === 8" class="iconImg"
|
|
src="https://zk-cereshop.oss-cn-shenzhen.aliyuncs.com/zkthink/2022-02-15/d0d8d96f28904167b271de4ae924d1a8_sceneMarketing.png"
|
|
alt="场景营销"></image>
|
|
<text
|
|
class="price-box fs40 font-color-C83732 mar-right-20">￥{{cItem.price}}</text>
|
|
<text class="price-through">￥{{cItem.originalPrice}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class='empty-container' v-else>
|
|
<image src="/images/kong4.png"></image>
|
|
<text>暂无商品</text>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const NET = require('../../utils/request')
|
|
const API = require('../../config/api')
|
|
import api from '@/components/canvasShow/config/api'
|
|
import canvasPage from '@/components/canvasShow/canvasShowPage.vue'
|
|
export default {
|
|
data() {
|
|
return {
|
|
componentsData: [],
|
|
navIndex: 0,
|
|
id: '',
|
|
price: 0,
|
|
storeInfo: {},
|
|
classList: [],
|
|
dataList: [],
|
|
isShowGoods: true,
|
|
sortIndex: 0,
|
|
list: [],
|
|
bannerInfo: [],
|
|
total: 0,
|
|
ifNew: 0, //是否新品
|
|
type: 1, //价格排序条件
|
|
volume: 1, //销量排序条件
|
|
page: 1, //当前页
|
|
pageSize: 20, //每页记录数
|
|
classifyId: '',
|
|
loadingType: 0,
|
|
storeInfolist: [],
|
|
isIphone: false,
|
|
activeTab: 'index',
|
|
terminal: API.terminal,
|
|
collectId: 0,
|
|
ifCollect: 0,
|
|
salesId: 0, //分销员id
|
|
fansNumber: '', // 粉丝数
|
|
topHeight: 10,
|
|
hasService: false,
|
|
isLoading: false,
|
|
}
|
|
},
|
|
components: {
|
|
canvasPage
|
|
},
|
|
onLoad(options) {
|
|
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
|
|
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
this.topHeight = menuButtonInfo.top
|
|
// #endif
|
|
// #ifdef APP
|
|
this.topHeight = 50
|
|
// #endif
|
|
this.isIphone = getApp().globalData.isIphone;
|
|
if (getApp().globalData.shopShareItem) {
|
|
const item = getApp().globalData.shopShareItem
|
|
this.id = parseInt(item.storeId)
|
|
this.salesId = parseInt(item.salesId)
|
|
getApp().globalData.shopShareItem = undefined
|
|
} else {
|
|
this.id = parseInt(options.storeId)
|
|
this.salesId = parseInt(options.salesId)
|
|
}
|
|
this.bindSalesCustomer(this.salesId, this.id)
|
|
this.canvasGet()
|
|
this.getTemplate()
|
|
this.getFindProductGroupList()
|
|
this.getShopBanner()
|
|
this.getShopInfo()
|
|
this.addBusinessBuyerUser();
|
|
// #ifdef MP-WEIXIN
|
|
this.getServiceUrl(this.id)
|
|
// #endif
|
|
},
|
|
onReachBottom() {
|
|
if (this.loadingType == 1) {
|
|
uni.stopPullDownRefresh()
|
|
} else {
|
|
this.page = this.page + 1
|
|
this.getTemplate()
|
|
}
|
|
},
|
|
methods: {
|
|
// 读取画布
|
|
canvasGet() {
|
|
var _this = this
|
|
var apiUrl = api.getCanvas + '?terminal=' + this.terminal + '&type=' + 3
|
|
if (this.id) {
|
|
apiUrl += '&shopId=' + this.id
|
|
}
|
|
let params = {
|
|
url: apiUrl,
|
|
method: 'GET'
|
|
}
|
|
// uni.showLoading({
|
|
// mask: true,
|
|
// title: '加载中...',
|
|
// })
|
|
NET.request(apiUrl, {}, 'GET').then(res => {
|
|
if (JSON.stringify(res.data) !== '{}') {
|
|
var componentsData = JSON.parse(res.data.json)
|
|
this.componentsData = componentsData
|
|
}
|
|
uni.hideLoading()
|
|
}).catch(res => {
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
getShopBanner() {
|
|
NET.request(API.GetShopBanner, {
|
|
shopId: this.id
|
|
}, 'GET').then(res => {
|
|
this.bannerInfo = res.data
|
|
}).catch(res => {
|
|
|
|
})
|
|
},
|
|
getTemplate() {
|
|
let data = {
|
|
shopId: this.id,
|
|
ifNew: this.ifNew,
|
|
type: this.type,
|
|
volume: this.volume,
|
|
page: this.page,
|
|
pageSize: this.pageSize,
|
|
groupId: this.classifyId
|
|
}
|
|
// uni.showLoading({
|
|
// title: '加载中...',
|
|
// mask: true
|
|
// });
|
|
NET.request(API.GetStore, data, 'GET').then(res => {
|
|
uni.hideLoading()
|
|
if (res.data.page.list.length == 0) {
|
|
this.loadingType = 1
|
|
this.page = this.page
|
|
}
|
|
this.storeInfo = res.data;
|
|
this.total = res.data.page.total
|
|
this.storeInfolist = this.storeInfolist.concat(res.data.page.list)
|
|
}).catch(res => {
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title: res.data.message,
|
|
duration: 2000,
|
|
icon: 'none'
|
|
});
|
|
})
|
|
},
|
|
// 查询店铺分组数据
|
|
getFindProductGroupList() {
|
|
NET.request(API.GetStoreShopClassify, {
|
|
shopId: this.id
|
|
}, 'GET').then(res => {
|
|
this.classList = res.data.filter(item => JSON.stringify(item) !== "{}")
|
|
}).catch(res => {})
|
|
},
|
|
goodsItemTap(productId, skuId) {
|
|
uni.navigateTo({
|
|
url: '../goodsModule/goodsDetails?shopId=' + this.id + '&productId=' + productId + '&skuId=' +
|
|
skuId
|
|
})
|
|
},
|
|
navIndexTap(index) {
|
|
this.storeInfolist = []
|
|
this.navIndex = index,
|
|
this.isShowGoods = index == 0
|
|
if (index == 0) {
|
|
this.page = 1
|
|
this.classifyId = ''
|
|
this.getTemplate()
|
|
} else {
|
|
this.isShowGoods = false
|
|
}
|
|
},
|
|
back() {
|
|
uni.navigateBack()
|
|
},
|
|
sortTap(index) {
|
|
this.page = 1
|
|
this.storeInfolist = []
|
|
if (index == 1) {
|
|
this.ifNew = this.ifNew != 0 ? 0 : 1,
|
|
this.type = 1,
|
|
this.volume = 1,
|
|
this.sortIndex = index
|
|
} else if (index == 2) {
|
|
this.ifNew = 0,
|
|
this.type = this.type != 1 ? 1 : 2,
|
|
this.volume = 1,
|
|
this.sortIndex = index
|
|
} else if (index == 3) {
|
|
this.ifNew = 0,
|
|
this.type = 1,
|
|
this.volume = this.volume != 1 ? 1 : 2,
|
|
this.sortIndex = index
|
|
}
|
|
this.getTemplate()
|
|
},
|
|
classItemTap(classifyId) {
|
|
this.page = 1
|
|
this.classifyId = classifyId
|
|
this.isShowGoods = true
|
|
this.storeInfolist = []
|
|
this.getTemplate()
|
|
},
|
|
// 栏目切换
|
|
tabChange(key) {
|
|
this.activeTab = key
|
|
if (key !== 'index') {
|
|
this.page = 1
|
|
this.classifyId = key === 'all' ? '' : key
|
|
this.storeInfolist = []
|
|
this.getTemplate()
|
|
}
|
|
},
|
|
//判断是否已申请成为该店铺的分销员
|
|
applyForRecruit() {
|
|
const res = uni.getStorageSync('storage_key');
|
|
const token = res.token
|
|
if (token) {
|
|
let item = {}
|
|
if (uni.getStorageSync('storage_key')) {
|
|
item = uni.getStorageSync('storage_key');
|
|
}
|
|
if (JSON.stringify(item) == '{}') {
|
|
|
|
} else {
|
|
NET.request(API.HasApply, {
|
|
shopId: this.id
|
|
}, 'GET').then(res => {
|
|
if (res.data.distributorId == undefined) {
|
|
uni.navigateTo({
|
|
url: '../distributionModule/recruit?shopId=' + this.id
|
|
})
|
|
} else if (res.data.state === 1) {
|
|
uni.showToast({
|
|
title: "您已申请成为该店铺的分销员",
|
|
icon: "none"
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: "您的申请正在审核中，请稍后查看",
|
|
icon: "none"
|
|
})
|
|
}
|
|
}).catch(res => {})
|
|
}
|
|
} else {
|
|
uni.showToast({
|
|
title: '请先登录',
|
|
icon: "none"
|
|
})
|
|
uni.navigateTo({
|
|
url: '/pages_category_page2/userModule/login'
|
|
})
|
|
}
|
|
|
|
},
|
|
bindSalesCustomer(salesId, storeId) {
|
|
if (salesId && storeId) {
|
|
//如果已登录，静默绑定客户关系，否则跳转到登录页面
|
|
if (uni.getStorageSync('storage_key')) {
|
|
NET.request(API.BindSalesCustomer, {
|
|
shopId: storeId,
|
|
distributorId: salesId
|
|
}, 'POST').then(res => {
|
|
uni.showToast({
|
|
title: "绑定成功",
|
|
icon: "none"
|
|
})
|
|
}).catch(res => {
|
|
uni.showToast({
|
|
title: res.data.msg,
|
|
icon: "none"
|
|
})
|
|
})
|
|
} else {
|
|
uni.setStorageSync('salesId', salesId)
|
|
uni.setStorageSync("shopId", storeId)
|
|
uni.navigateTo({
|
|
url: '../../pages_category_page2/userModule/login'
|
|
})
|
|
}
|
|
}
|
|
},
|
|
// 获取店铺信息
|
|
getShopInfo() {
|
|
var _this = this;
|
|
NET.request(API.getShopIndex + `?shopId=${this.id}`, null,
|
|
'GET').then(function(res) {
|
|
_this.ifCollect = res.data.ifCollect;
|
|
_this.collectId = res.data.collectId;
|
|
_this.fansNumber = res.data.fansNumber;
|
|
}).catch(function(res) {
|
|
uni.showToast({
|
|
title: '失败',
|
|
icon: "none"
|
|
});
|
|
|
|
});
|
|
},
|
|
//收藏店辅
|
|
collectToggle() {
|
|
const res = uni.getStorageSync('storage_key');
|
|
const token = res.token
|
|
if (token) {
|
|
if (this.ifCollect == 0) {
|
|
this.collectShop();
|
|
} else {
|
|
this.cancelCollectShop();
|
|
}
|
|
} else {
|
|
uni.showToast({
|
|
title: '请先登录',
|
|
icon: "none"
|
|
})
|
|
uni.navigateTo({
|
|
url: '/pages_category_page2/userModule/login'
|
|
})
|
|
}
|
|
},
|
|
//收藏
|
|
collectShop() {
|
|
var _this = this;
|
|
NET.request(API.collect, {
|
|
shopId: parseInt(this.id)
|
|
},
|
|
'POST').then(function(res) {
|
|
_this.ifCollect = 1;
|
|
uni.showToast({
|
|
title: '收藏成功',
|
|
icon: "success"
|
|
});
|
|
|
|
}).catch(function(res) {
|
|
uni.showToast({
|
|
title: '失败',
|
|
icon: "none"
|
|
});
|
|
|
|
});
|
|
},
|
|
//取消收藏
|
|
cancelCollectShop() {
|
|
var _this2 = this;
|
|
NET.request(API.cancelCollect, {
|
|
ids: [this.collectId]
|
|
},
|
|
'POST').then(function(res) {
|
|
_this2.ifCollect = 0;
|
|
uni.showToast({
|
|
title: '取消收藏成功',
|
|
icon: "success"
|
|
});
|
|
|
|
}).catch(function(res) {
|
|
uni.showToast({
|
|
title: '失败',
|
|
icon: "none"
|
|
});
|
|
|
|
});
|
|
},
|
|
addBusinessBuyerUser() {
|
|
NET.request(API.AddBusinessBuyerUser, {
|
|
shopId: this.id
|
|
}, "POST")
|
|
},
|
|
// 查询产品
|
|
searchPro(key, type) {
|
|
uni.navigateTo({
|
|
url: `/pages_category_page1/search/index/index`
|
|
})
|
|
},
|
|
// 获取客服url
|
|
getServiceUrl(id) {
|
|
if (this.isLoading || !id || id === 'null') {
|
|
return
|
|
}
|
|
const shopids = uni.getStorageSync('service_shopids') || []
|
|
const corpIds = uni.getStorageSync('service_corpIds') || []
|
|
const urls = uni.getStorageSync('service_urls') || []
|
|
|
|
const index = shopids.indexOf(id)
|
|
if (index === -1) {
|
|
this.isLoading = true
|
|
NET.request(API.CustomerService, {
|
|
id
|
|
}, 'get').then(res => {
|
|
if (res.code === '' && res.data.corpId && res.data.url) {
|
|
shopids.push(this.shopId)
|
|
corpIds.push(res.data.corpId)
|
|
urls.push(res.data.url)
|
|
|
|
uni.setStorageSync('service_shopids', shopids);
|
|
uni.setStorageSync('service_corpIds', corpIds);
|
|
uni.setStorageSync('service_urls', urls);
|
|
|
|
this.corpId = res.data.corpId
|
|
this.serviceURL = res.data.url
|
|
if (this.serviceURL) {
|
|
this.hasService = true
|
|
}
|
|
}
|
|
this.isLoading = false
|
|
}).catch(err => {
|
|
this.isLoading = false
|
|
})
|
|
} else {
|
|
this.corpId = corpIds[index]
|
|
this.serviceURL = urls[index]
|
|
if (this.serviceURL) {
|
|
this.hasService = true
|
|
}
|
|
}
|
|
},
|
|
// 跳转客服
|
|
flyToService() {
|
|
if (!this.serviceURL || !this.corpId) {
|
|
this.hasService = false
|
|
return
|
|
}
|
|
const extInfo = { // 客服信息
|
|
url: this.serviceURL // 客服链接
|
|
}
|
|
// #ifdef MP-WEIXIN
|
|
wx.openCustomerServiceChat({
|
|
extInfo,
|
|
corpId: this.corpId // 企业ID
|
|
})
|
|
// #endif
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background: #F8F8F8;
|
|
}
|
|
</style>
|
|
<style lang='scss' scoped>
|
|
page {
|
|
background: #F8F8F8;
|
|
}
|
|
|
|
.shop-top {
|
|
background: #333333;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
position: fixed;
|
|
z-index: 99;
|
|
padding-bottom: 20rpx;
|
|
}
|
|
|
|
// #ifdef APP-PLUS
|
|
.shop-top {
|
|
padding-top: 80rpx;
|
|
}
|
|
|
|
// #endif
|
|
.stopInfo {
|
|
padding: 200rpx 20rpx 20rpx 20rpx;
|
|
background: #F8F8F8;
|
|
}
|
|
|
|
// 店铺头部
|
|
.shop-top-content {
|
|
padding: 10rpx 30rpx;
|
|
background: #FFFFFF;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.contentLeft {
|
|
flex: 9;
|
|
display: flex;
|
|
|
|
.photo-img {
|
|
width: 102rpx;
|
|
height: 102rpx;
|
|
border-radius: 10rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.shop-info-top {
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.shop-name {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
|
|
.shop-num {
|
|
font-size: 26rpx;
|
|
color: #333333;
|
|
opacity: 0.7;
|
|
margin-top: 15rpx;
|
|
}
|
|
}
|
|
|
|
.btns {
|
|
width: 100rpx;
|
|
height: 95%;
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
|
|
image {
|
|
max-width: 56rpx;
|
|
max-height: 56rpx;
|
|
margin: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.contentRight {
|
|
flex: 3;
|
|
|
|
.favorites-box {
|
|
display: flex;
|
|
width: 160rpx;
|
|
height: 60rpx;
|
|
background: #C83732;
|
|
opacity: 1;
|
|
border-radius: 46rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.store-icon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.text {
|
|
font-size: 26rpx;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.rightArrow {
|
|
image {
|
|
width: 18rpx;
|
|
height: 24rpx;
|
|
}
|
|
}
|
|
|
|
.distributorBox {
|
|
background: #FFFFFF;
|
|
margin-top: 20rpx;
|
|
height: 80rpx;
|
|
padding: 0 20rpx;
|
|
display: flex;
|
|
justify-items: center;
|
|
color: #333333;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
// 首页内容
|
|
.shopContent {
|
|
width: 100%;
|
|
/* background: #fff; */
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
|
|
.tabs-nav-warp {
|
|
padding: 0 20px;
|
|
|
|
.tabs-nav {
|
|
margin-top: 20upx;
|
|
|
|
.ul {
|
|
white-space: nowrap;
|
|
|
|
.li {
|
|
display: inline-block;
|
|
margin-left: 60upx;
|
|
font-size: 28upx;
|
|
color: #999999;
|
|
position: relative;
|
|
padding-bottom: 18upx;
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
&.on {
|
|
&:after {
|
|
content: '';
|
|
width: 100%;
|
|
height: 4upx;
|
|
background: #C5AA7B;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
font-weight:bold;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.shop-banner-box {
|
|
background: #f7f7f7;
|
|
padding: 20rpx 30rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.shop-list-content {
|
|
width: 100%;
|
|
|
|
/* background: #fff; */
|
|
.navBox {
|
|
padding: 0 20rpx;
|
|
|
|
.shop-list-nav {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
height: 80rpx;
|
|
line-height: 76rpx;
|
|
background: #fff;
|
|
}
|
|
}
|
|
|
|
.shop-list-box {
|
|
width: 100%;
|
|
background: #f7f7f7;
|
|
padding: 16rpx 20rpx 0;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.item {
|
|
width: 49%;
|
|
margin: 12rpx 0;
|
|
background: #d6d6d6;
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.item:nth-of-type(2n) {
|
|
margin-left: 2%;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.shop-banner-img {
|
|
width: 100%;
|
|
height: 280rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.nav-item {
|
|
flex: 1;
|
|
font-size: 30rpx;
|
|
color: #666;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
height: 80rpx;
|
|
line-height: 76rpx;
|
|
}
|
|
|
|
.nav-item.active {
|
|
color: #ff7911;
|
|
}
|
|
|
|
.nav-item .line {
|
|
display: inline-block;
|
|
width: 80rpx;
|
|
height: 4rpx;
|
|
background: #fff;
|
|
border-radius: 2rpx;
|
|
}
|
|
|
|
.nav-item.active .line {
|
|
background: linear-gradient(0deg, rgba(255, 162, 0, 1), rgba(255, 121, 17, 1));
|
|
}
|
|
|
|
.nav-item.padd-l {
|
|
padding-left: 20%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.nav-item.padd-r {
|
|
padding-right: 20%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.nav-item-sort {
|
|
flex: 1;
|
|
font-size: 24rpx;
|
|
color: #222;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
|
|
.r {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 5rpx;
|
|
}
|
|
|
|
.r .arrow-img {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
padding: 7rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
|
|
.product-img {
|
|
width: 347rpx;
|
|
height: 347rpx;
|
|
}
|
|
|
|
.product-bottom-box {
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
background: #fff;
|
|
}
|
|
|
|
.product-name {
|
|
display: block;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.product-num {
|
|
font-size: 24rpx;
|
|
margin-top: 15rpx;
|
|
border: 2rpx solid #E4E5E6;
|
|
padding: 10rpx;
|
|
display: inline-block;
|
|
}
|
|
|
|
.product-price-box {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-top: 30rpx;
|
|
|
|
.iconImg {
|
|
width: 58rpx;
|
|
height: 36rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.discountIcon {
|
|
width: 100rpx;
|
|
}
|
|
}
|
|
|
|
.product-price-box .price-through {
|
|
text-decoration: line-through;
|
|
font-size: 24rpx;
|
|
color: #CCC;
|
|
}
|
|
|
|
.shop-sort-list {
|
|
margin-top: 20rpx;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.shop-sort-list .item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #fff;
|
|
padding: 0 30rpx 20rpx;
|
|
box-sizing: border-box;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.shop-sort-list .item .sort-title {
|
|
font-size: 30rpx;
|
|
color: #333;
|
|
padding: 30rpx 0;
|
|
}
|
|
|
|
.sort-single-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
}
|
|
|
|
.sort-single-box .single {
|
|
width: 340rpx;
|
|
height: 78rpx;
|
|
margin: 0 5rpx 10rpx 0;
|
|
background: #fff;
|
|
border: 1px solid #E5E5E5;
|
|
border-radius: 4rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.sort-single-box .single:nth-of-type(2n) {
|
|
margin-left: 5rpx;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.back {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
.empty-container {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.empty-container image {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
margin-top: 150rpx;
|
|
}
|
|
|
|
.empty-container text {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
margin-top: 30rpx;
|
|
display: block;
|
|
width: 300rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.active {
|
|
color: #ff7911;
|
|
}
|
|
|
|
|
|
.distributor {
|
|
font-size: 26upx;
|
|
border-radius: 25upx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.item-btn-icon {
|
|
width: 40upx;
|
|
height: 40upx;
|
|
margin-right: 10upx;
|
|
}
|
|
}
|
|
|
|
.search-btn {
|
|
height: 64rpx;
|
|
border-radius: 4rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-right: 30rpx;
|
|
width: 428rpx;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
|
|
.search-icon {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
margin-left: 10rpx;
|
|
margin-top: 8rpx;
|
|
}
|
|
|
|
.search-word {
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
color: rgba(153, 153, 153, 1);
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
|
|
// #ifdef H5 || APP-PLUS
|
|
.search-btn {
|
|
width: 100%;
|
|
}
|
|
|
|
// #endif
|
|
// #ifdef MP-ALIPAY
|
|
.back {
|
|
width: 25rpx;
|
|
height: 25rpx;
|
|
margin-top: 15rpx;
|
|
padding: 10rpx;
|
|
display: none;
|
|
}
|
|
|
|
.shop-top {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
.shop-top-content {
|
|
padding-top: 80rpx;
|
|
}
|
|
|
|
.nav-item-sort .r .arrow-img {
|
|
width: 16rpx;
|
|
height: 16rpx;
|
|
padding: 4rpx;
|
|
}
|
|
|
|
.tabs-nav {
|
|
margin-top: 20upx;
|
|
|
|
.ul {
|
|
.li {
|
|
&:first-child {
|
|
margin-left: 36upx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// #endif
|
|
</style>
|