852 lines
33 KiB
JavaScript
852 lines
33 KiB
JavaScript
import Taro, { Component } from '@tarojs/taro'
|
||
import { View, Button, Text, Image, Map } from '@tarojs/components'
|
||
import { AtTag, AtIcon, } from 'taro-ui'
|
||
import URL from '../../serviceAPI.config'
|
||
|
||
|
||
import ShopTypeInteractionComp from '../../component/shopTypeInteractionComp/shopTypeInteractionComp'
|
||
import ScrollToTopComponent from '../../component/scrollToTopComponent/scrollToTopComponent'
|
||
|
||
import './shop.scss'
|
||
import ShopItem from '../../component/shopItemComponent/shopItemComponent'
|
||
//import BottomNav from '../../component/bottomNav/bottomNav'
|
||
import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'
|
||
import onClickValueService from '../../util/onClickValueService';
|
||
|
||
const locationIcon = require('../../assets/img/location.png')
|
||
|
||
class Shop extends Component {
|
||
// 项目配置
|
||
config = {
|
||
navigationBarTitleText: '店铺'
|
||
}
|
||
constructor() {
|
||
super(...arguments)
|
||
this.state = {
|
||
isShopDetailsOn: false, // 是否显示店铺说明页面
|
||
shopItem: [], // 所有商品
|
||
value: '', // 搜索框的值
|
||
shopId: '', // 店铺的id
|
||
shopName: '', // 店铺名
|
||
FilterText: '', // 筛选的可选项
|
||
filterBar: ['all', 'amount', 'newProduct', 'price', 'popularity'], //筛选选项
|
||
filterBarKeys: { all: '综合排序', amount: '销量', newProduct: '新品', price: '价格', popularity: '人气' }, // 筛选选项对应值
|
||
selectedFilterValue: 0, //筛选项
|
||
isShowFilter: false, //是否显示侧边筛选
|
||
showShopHomePage: true,// 是否显示首页页面
|
||
shopDescriptionData: '',// 店铺详情信息
|
||
shopName: '',//店铺名称
|
||
shopAddress: '',//店铺地址
|
||
contactName: '',//联系人
|
||
contactNumber: '',//联系电话
|
||
shopDescription: '',//店铺简介
|
||
filterOptions: {
|
||
all: true,
|
||
amount: false,
|
||
newProduct: false,
|
||
price: false,
|
||
popularity: false,
|
||
},
|
||
filterCondition: '',// 筛选条件
|
||
mainType: [],// 侧边筛选分类
|
||
goodType: [],//侧边商品类型
|
||
otherType: [],//侧边其他类型
|
||
widthType: [],// 侧边宽度类型
|
||
checkedFilterIdList: [],//已选的筛选id
|
||
isAddToList: false,// 请求店铺商品的时候是否添加到旧列表里
|
||
loadMorePageIndex: 1,//上拉加载页面数
|
||
isShowTopNav: false,// 是否显示返回顶部按钮
|
||
|
||
// 下面是函数的默认参数
|
||
curr_page: 1,
|
||
page_count: 10,
|
||
shop_name: false,
|
||
shop_id: this.$router.params.id,
|
||
config_id: 4,
|
||
shop_class_id: '',
|
||
order: '',
|
||
goods_class_id: '',
|
||
class_filter: '',
|
||
goods_type: '',
|
||
goodsSpec: [],
|
||
goodsParam: [],
|
||
goodsParamExt: [],
|
||
// 地图的经度和维度
|
||
longitude: '',
|
||
latitude: '',
|
||
|
||
|
||
}
|
||
}
|
||
|
||
// api 得到筛选的标签请求
|
||
getSearchParams({
|
||
shop_name = this.state.shop_name,
|
||
shop_id = this.state.shop_id,
|
||
shop_class_id = this.state.shop_class_id,
|
||
goods_class_id = this.state.goods_class_id,
|
||
class_filter = this.state.class_filter,
|
||
goods_type = this.state.goods_type,
|
||
goodsSpec = this.state.goodsSpec,
|
||
goodsParam = this.state.goodsParam,
|
||
goodsParamExt = this.state.goodsParamExt }) {
|
||
Taro.request({
|
||
url: URL.GetSearchParam,
|
||
method: 'POST',
|
||
dataType: 'json',
|
||
data: {
|
||
goods: JSON.stringify({
|
||
shop_name: shop_name,
|
||
shop_id: shop_id,
|
||
shop_class_id: shop_class_id,
|
||
goods_class_id: goods_class_id,
|
||
class_filter: class_filter,
|
||
goods_type: goods_type,
|
||
|
||
}),
|
||
goodsSpec: JSON.stringify(goodsSpec),
|
||
goodsParam: JSON.stringify(goodsParam),
|
||
goodsParamExt: JSON.stringify(goodsParamExt),
|
||
|
||
},
|
||
header: {
|
||
'content-type': 'application/x-www-form-urlencoded',
|
||
'X-Requested-With': 'XMLHttpRequest',
|
||
'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
|
||
}
|
||
})
|
||
.then(res => {
|
||
if (res.statusCode === 200) {
|
||
console.log('筛选项目成功', res)
|
||
Taro.hideLoading()
|
||
this.formatFilterData(res.data).then(data => {
|
||
this.setState({
|
||
sideFilterdata: data,
|
||
mainType: data.mainType,
|
||
goodType: data.goodType,
|
||
otherType: data.otherType,
|
||
widthType: data.widthType,
|
||
})
|
||
|
||
|
||
|
||
console.log('formated data', data)
|
||
})
|
||
} else {
|
||
console.log('筛选项目获取失败')
|
||
}
|
||
|
||
|
||
|
||
})
|
||
}
|
||
|
||
async formatFilterData(data) {
|
||
const formatedFilterOptions = {}
|
||
//侧边筛选分类
|
||
if (data.goods_class) {
|
||
let typeArray = []
|
||
// 如果后台返回的筛选项有和checkedFilterIdList重叠的 就不显示.
|
||
if (this.state.checkedFilterIdList.length) {
|
||
data.goods_class.forEach(item => {
|
||
this.state.checkedFilterIdList.forEach((checkedItem) => {
|
||
if (checkedItem.id !== item.class_id) {
|
||
typeArray.push({ id: item.class_id, name: item.class_name, checked: false })
|
||
}
|
||
})
|
||
});
|
||
} else {
|
||
data.goods_class.forEach(item => {
|
||
typeArray.push({ id: item.class_id, name: item.class_name, checked: false })
|
||
}
|
||
)
|
||
}
|
||
|
||
|
||
formatedFilterOptions.mainType = typeArray
|
||
} else {
|
||
formatedFilterOptions.mainType = []
|
||
}
|
||
//侧边筛选商品类型
|
||
if (data.goods_type) {
|
||
// console.log('数据',data.goods_type)
|
||
let goodTypeArray = []
|
||
Object.keys(data.goods_type).forEach(key => {
|
||
if (data.goods_type[key]) {
|
||
goodTypeArray.push({
|
||
id: data.goods_type[key].goods_type_id,
|
||
name: data.goods_type[key].goods_type_ch_name,
|
||
checked: false
|
||
})
|
||
}
|
||
});
|
||
formatedFilterOptions.goodType = goodTypeArray
|
||
} else {
|
||
formatedFilterOptions.goodType = []
|
||
|
||
}
|
||
//侧边筛选其他类型
|
||
if (data.goodsParam) {
|
||
let goodsParamArray = []
|
||
|
||
Object.keys(data.goodsParam).forEach(key => {
|
||
if (data.goodsParam[key]) {
|
||
const value = data.goodsParam[key]
|
||
const subArray = value.param_value.map(item => {
|
||
return { id: value.param_id, name: item, checked: false }
|
||
})
|
||
goodsParamArray.push({ [value.param_name]: subArray })
|
||
|
||
}
|
||
|
||
});
|
||
formatedFilterOptions.otherType = goodsParamArray
|
||
}
|
||
else {
|
||
formatedFilterOptions.otherType = []
|
||
|
||
}
|
||
//侧边筛选宽度类型
|
||
if (data.goodsParamExt) {
|
||
let goodsParamExtArray = []
|
||
Object.keys(data.goodsParamExt).forEach(key => {
|
||
const value = data.goodsParamExt[key]
|
||
const keyId = value.param_id
|
||
Object.keys(value.param_value).forEach(item => {
|
||
const name = value.param_value[item].value_desc
|
||
const value1 = value.param_value[item]
|
||
|
||
goodsParamExtArray.push({ name: name, value: value1, checked: false, id: keyId })
|
||
});
|
||
});
|
||
formatedFilterOptions.widthType = goodsParamExtArray
|
||
|
||
} else {
|
||
formatedFilterOptions.widthType = []
|
||
}
|
||
|
||
return formatedFilterOptions
|
||
}
|
||
|
||
|
||
// api 得到所有的产品请求
|
||
goodsSearch({
|
||
curr_page = this.state.curr_page,
|
||
page_count = this.state.page_count,
|
||
shop_name = this.state.shop_name,
|
||
shop_id = this.state.shop_id,
|
||
config_id = this.state.config_id,
|
||
shop_class_id = this.state.shop_class_id,
|
||
order = this.state.order,
|
||
goods_class_id = this.state.goods_class_id,
|
||
currPage = '', // 不知道为什么筛选的时候要加 加这个参数为1
|
||
goodsSpec = this.state.goodsSpec,
|
||
goodsParam = this.state.goodsParam,
|
||
goodsParamExt = this.state.goodsParamExt }) {
|
||
Taro.request({
|
||
url: URL.GoodsSearch,
|
||
method: 'POST',
|
||
dataType: 'json',
|
||
data: {
|
||
goods: JSON.stringify({
|
||
curr_page: curr_page,
|
||
page_count: page_count,
|
||
shop_name: shop_name,
|
||
shop_id: shop_id,
|
||
config_id: config_id,
|
||
shop_class_id: shop_class_id,
|
||
order: order,
|
||
goods_class_id: goods_class_id,
|
||
currPage: currPage
|
||
}),
|
||
goodsRegion: JSON.stringify({}),
|
||
goodsSpec: JSON.stringify(goodsSpec),
|
||
goodsParam: JSON.stringify(goodsParam),
|
||
goodsParamExt: JSON.stringify(goodsParamExt),
|
||
},
|
||
header: {
|
||
// 'content-type': 'application/x-www-form-urlencoded',
|
||
// 'X-Requested-With': 'XMLHttpRequest'
|
||
'content-type': 'application/x-www-form-urlencoded',
|
||
'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
|
||
'X-Requested-With': 'XMLHttpRequest'
|
||
}
|
||
})
|
||
.then(res => {
|
||
console.log('searchGood', res)
|
||
|
||
Taro.hideLoading()
|
||
if (res.data.goods && res.data.goods.length) {
|
||
if (this.state.isAddToList) {
|
||
this.setState({
|
||
shopItem: this.state.shopItem.concat(res.data.goods)
|
||
}, () => {
|
||
this.setState({ isAddToList: false })
|
||
})
|
||
} else {
|
||
this.setState({ shopItem: res.data.goods, filterCondition: order })
|
||
}
|
||
} else {
|
||
if (this.state.isAddToList) {
|
||
Taro.showToast({
|
||
title: '没有更多了',
|
||
icon: 'none'
|
||
})
|
||
} else {
|
||
this.setState({ shopItem: res.data.goods })
|
||
}
|
||
|
||
|
||
}
|
||
this.setState({ isAddToList: false })
|
||
|
||
})
|
||
}
|
||
|
||
// api 得到店铺详情请求
|
||
getShopDescription({ shopID = this.state.shop_id }) {
|
||
Taro.request({
|
||
url: URL.ShopDescription,
|
||
method: 'POST',
|
||
dataType: 'json',
|
||
data: {
|
||
shopID: shopID,
|
||
},
|
||
header: {
|
||
'content-type': 'application/x-www-form-urlencoded',
|
||
'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
|
||
}
|
||
})
|
||
.then(res => {
|
||
Taro.hideLoading()
|
||
if (res.data.err_code === 0) {
|
||
this.setState({
|
||
shopDescriptionData: res.data,
|
||
shopName: res.data.data.shop_name,
|
||
shopAddress: res.data.data.shop_address,
|
||
contactName: res.data.userRes.name,
|
||
contactNumber: res.data.userRes.phone,
|
||
shopDescription: res.data.data.shop_desc,
|
||
latitude: res.data.data.shop_map.split(',')[1],
|
||
longitude: res.data.data.shop_map.split(',')[0],
|
||
})
|
||
} else {
|
||
Taro.showToast({
|
||
title: res.data.err_msg,
|
||
icon: 'none'
|
||
})
|
||
|
||
}
|
||
}
|
||
)
|
||
}
|
||
|
||
getDataFromShopChild(value) {
|
||
console.log('从子组件店铺分类传回来的值', value)
|
||
this.setState({ shop_class_id: value.id }, () => {
|
||
this.goodsSearch({})
|
||
})
|
||
|
||
}
|
||
|
||
|
||
|
||
// 产品排序
|
||
accendingDescending(e) {
|
||
const value = onClickValueService(e)
|
||
Taro.showLoading({ title: '加载中' })
|
||
this.setState({ selectedFilterValue: value })
|
||
if (value == 0) {
|
||
this.setState({
|
||
filterOptions: {
|
||
all: true,
|
||
amount: false,
|
||
newProduct: false,
|
||
price: false,
|
||
popularity: false
|
||
},
|
||
curr_page: 1,
|
||
page_count: 10,
|
||
shop_name: false,
|
||
config_id: 4,
|
||
shop_class_id: '',
|
||
order: '',
|
||
goods_class_id: '',
|
||
goodsSpec: [],
|
||
goodsParam: [],
|
||
goodsParamExt: [],
|
||
}, () => {
|
||
this.goodsSearch({})
|
||
}
|
||
)
|
||
|
||
}
|
||
if (value == 1) {
|
||
this.setState({
|
||
|
||
filterOptions: {
|
||
all: false,
|
||
amount: !this.state.filterOptions.amount,
|
||
newProduct: false,
|
||
price: false,
|
||
popularity: false
|
||
}
|
||
}, () => {
|
||
this.state.filterOptions.amount ? this.goodsSearch({ currPage: 1, order: "g.sales_volume desc" }) : this.goodsSearch({ currPage: 1, order: "g.sales_volume" })
|
||
}
|
||
)
|
||
}
|
||
if (value == 2) {
|
||
this.setState({
|
||
|
||
filterOptions: {
|
||
all: false,
|
||
amount: false,
|
||
newProduct: !this.state.filterOptions.newProduct,
|
||
price: false,
|
||
popularity: false
|
||
}
|
||
}, () => {
|
||
this.state.filterOptions.newProduct ? this.goodsSearch({ currPage: 1, order: "g.create_date desc" }) : this.goodsSearch({ currPage: 1, order: "g.create_date" })
|
||
}
|
||
)
|
||
|
||
}
|
||
if (value == 3) {
|
||
|
||
this.setState({
|
||
|
||
filterOptions: {
|
||
all: false,
|
||
amount: false,
|
||
newProduct: false,
|
||
price: !this.state.filterOptions.price,
|
||
popularity: false
|
||
}
|
||
}, () => {
|
||
this.state.filterOptions.price ? this.goodsSearch({ currPage: 1, order: "g.goods_price desc" }) : this.goodsSearch({ currPage: 1, order: "g.goods_price" })
|
||
}
|
||
)
|
||
|
||
}
|
||
if (value == 4) {
|
||
|
||
this.setState({
|
||
|
||
filterOptions: {
|
||
all: false,
|
||
amount: false,
|
||
newProduct: false,
|
||
price: false,
|
||
popularity: !this.state.filterOptions.popularity
|
||
}
|
||
}, () => {
|
||
this.state.filterOptions.popularity ? this.goodsSearch({ currPage: 1, order: "g.browse_times desc", }) : this.goodsSearch({ currPage: 1, order: "g.browse_times" })
|
||
|
||
}
|
||
)
|
||
|
||
}
|
||
}
|
||
// 是否显示侧边筛选
|
||
showAndHideFilter() {
|
||
this.setState({ isShowFilter: !this.state.isShowFilter })
|
||
}
|
||
// 选择侧边筛选的标签
|
||
selectTag(name) {
|
||
const id = name.name
|
||
Taro.showLoading({ title: '加载中' })
|
||
// 处理分类筛选项
|
||
const newMainType = this.state.mainType.map((item) => {
|
||
if (item.id === id) {
|
||
item.checked = !item.checked
|
||
setTimeout(() => {
|
||
this.setState({ goods_class_id: id, checkedFilterIdList: this.state.checkedFilterIdList.concat([item]) }, () => {
|
||
this.getSearchParams({ goods_class_id: this.state.goods_class_id })
|
||
this.goodsSearch({ goods_class_id: this.state.goods_class_id })
|
||
})
|
||
}, 1000);
|
||
}
|
||
return item
|
||
})
|
||
// 处理商品类型筛选项
|
||
const newGoodType = this.state.goodType.map((item) => {
|
||
if (item.id === id) {
|
||
item.checked = !item.checked
|
||
|
||
setTimeout(() => {
|
||
this.setState({ goods_type: id, checkedFilterIdList: this.state.checkedFilterIdList.concat([item]) }, () => {
|
||
this.getSearchParams({ goods_type: this.state.goods_type })
|
||
this.goodsSearch({ goods_type: this.state.goods_type })
|
||
})
|
||
|
||
}, 1000);
|
||
}
|
||
return item
|
||
})
|
||
// 处理其他筛选项
|
||
const newOtherType = this.state.otherType.map(item => {
|
||
const value = Object.values(item)[0]
|
||
for (let each in value) {
|
||
if (value[each].name === id) {
|
||
value[each].checked = !value[each].checked
|
||
|
||
setTimeout(() => {
|
||
|
||
this.setState({ checkedFilterIdList: this.state.checkedFilterIdList.concat(value[each]), goodsParam: [{ param_id: value[each].name.id, param_value: value[each].name }] }, () => {
|
||
this.getSearchParams({ goodsParam: this.state.goodsParam })
|
||
this.goodsSearch({ goodsParam: this.state.goodsParam })
|
||
})
|
||
}, 1000);
|
||
}
|
||
}
|
||
return item
|
||
})
|
||
// 处理宽度筛选项
|
||
const newWidthType = this.state.widthType.map((item) => {
|
||
if (item.name === id) {
|
||
item.checked = !item.checked
|
||
setTimeout(() => {
|
||
this.setState({ checkedFilterIdList: this.state.checkedFilterIdList.concat(item), goodsParamExt: [{ param_id: item.id, param_ext: [item.value] }] }, () => {
|
||
this.getSearchParams({ goodsParamExt: this.state.goodsParamExt })
|
||
this.goodsSearch({ goodsParamExt: this.state.goodsParamExt })
|
||
})
|
||
}, 1000);
|
||
}
|
||
return item
|
||
})
|
||
|
||
this.setState({ mainType: newMainType, loadMorePageIndex: 1, goodType: newGoodType, widthType: newWidthType, otherType: newOtherType }, () => {
|
||
// console.log(this.state.mainType)
|
||
})
|
||
}
|
||
|
||
handleOnPageChange(value) {
|
||
Taro.showLoading({ title: '加载中' })
|
||
this.goodsSearch({ curr_page: value.current, order: this.state.filterCondition })
|
||
}
|
||
showHomePage() {
|
||
this.setState({ showShopHomePage: true })
|
||
}
|
||
showDescriptionPage() {
|
||
this.setState({ showShopHomePage: false })
|
||
}
|
||
|
||
// 确认筛选
|
||
submitFilter() {
|
||
this.setState({ isShowFilter: false })
|
||
}
|
||
|
||
//重置按键筛选
|
||
resetFilterList() {
|
||
|
||
Taro.showLoading({ title: '加载中' })
|
||
this.setState({
|
||
checkedFilterIdList: [],
|
||
curr_page: 1,
|
||
page_count: 10,
|
||
shop_name: false,
|
||
config_id: 4,
|
||
shop_class_id: '',
|
||
order: '',
|
||
curr_page: 1,
|
||
goods_class_id: '',
|
||
class_filter: '',
|
||
goods_type: '',
|
||
goodsSpec: [],
|
||
goodsParam: [],
|
||
goodsParamExt: [],
|
||
}, () => {
|
||
this.getSearchParams({})
|
||
this.goodsSearch({})
|
||
})
|
||
|
||
|
||
}
|
||
openNavMap() {
|
||
Taro.openLocation({
|
||
latitude: Number(this.state.latitude),
|
||
longitude: Number(this.state.longitude),
|
||
name: this.state.shopAddress,
|
||
|
||
})
|
||
}
|
||
componentDidMount() {
|
||
Taro.showLoading({ title: '加载中' })
|
||
//页面加载之后 得到指定店铺的商品 和 筛选标签
|
||
this.goodsSearch({}) // 加载店铺商品
|
||
this.getSearchParams({})// 加载筛选项
|
||
this.getShopDescription({}) // 加载店铺说明
|
||
}
|
||
|
||
componentDidShow() { }
|
||
|
||
componentDidHide() { }
|
||
|
||
// 底部加载
|
||
onReachBottom() {
|
||
Taro.showLoading({
|
||
title: '加载中'
|
||
})
|
||
this.setState({ isAddToList: true, loadMorePageIndex: this.state.loadMorePageIndex + 1 }, () => {
|
||
this.goodsSearch({ curr_page: this.state.loadMorePageIndex })
|
||
})
|
||
|
||
}
|
||
// 页面位置
|
||
onPageScroll(location) {
|
||
if (location.scrollTop <= 300 && this.state.isShowTopNav) {
|
||
this.setState({ isShowTopNav: false })
|
||
} else if (location.scrollTop > 300 && !this.state.isShowTopNav) {
|
||
this.setState({ isShowTopNav: true })
|
||
}
|
||
}
|
||
render() {
|
||
|
||
const ShopItemElementsArray = this.state.shopItem.length ? this.state.shopItem.map((item, index) => {
|
||
return <View key={index} className='shop-item' >
|
||
<ShopItem item={item}></ShopItem>
|
||
</View>
|
||
}) : null
|
||
|
||
const filterElementsArray = this.state.filterBar.map((item, index) => {
|
||
let isTure = this.state.filterOptions[item]
|
||
|
||
return <View key={index} onClick={this.accendingDescending.bind(this, index)} className={index === this.state.selectedFilterValue ? 'filter-title actived' : 'filter-title'}>
|
||
<Text className='text'>
|
||
{this.state.filterBarKeys[item]}
|
||
</Text>
|
||
{index !== 0 && index !== 5 && (isTure ? <AtIcon value='chevron-down' size='10' color='#F00'></AtIcon> : <AtIcon value='chevron-up' size='10' color='#F00'></AtIcon>)}
|
||
</View>
|
||
})
|
||
// 侧边已选项
|
||
const checkedFilterElementsArray = this.state.checkedFilterIdList.map((item, index) => {
|
||
return <AtTag style='margin-left:5px' key={index}
|
||
name={item.id}
|
||
type='primary'
|
||
active={item.checked}
|
||
//onClick={this.selectTag.bind(this)}
|
||
>{item.name}</AtTag>
|
||
})
|
||
|
||
|
||
|
||
// 侧边筛选的分类项
|
||
const goodsClassElementsArray = this.state.mainType.map((item, index) => {
|
||
return <AtTag style='margin-left:5px' key={index}
|
||
name={item.id}
|
||
type='primary'
|
||
active={item.checked}
|
||
onClick={this.selectTag.bind(this)}
|
||
>{item.name}</AtTag>
|
||
})
|
||
// 侧边筛选的商品类型项
|
||
const goodsTypeElementsArray = this.state.goodType.map((item, index) => {
|
||
return <AtTag style='margin-left:5px' key={index}
|
||
name={item.id}
|
||
type='primary'
|
||
active={item.checked}
|
||
onClick={this.selectTag.bind(this)}
|
||
>{item.name}</AtTag>
|
||
})
|
||
|
||
// 侧边筛选的其他项
|
||
const goodsParamElementsArray = this.state.otherType.map((item, index) => {
|
||
let titleKey = Object.keys(item)[0]
|
||
let values = item[titleKey]
|
||
return <View key={index}><View className='title' >{titleKey}</View>
|
||
{values.map((subItem, subIndex) => {
|
||
let name = subItem.name
|
||
let isCheck = subItem.checked
|
||
return <View className='button-box' key={subIndex}>
|
||
<AtTag style='margin-left:5px'
|
||
name={name}
|
||
type='primary'
|
||
active={isCheck}
|
||
onClick={this.selectTag.bind(this)}
|
||
>{name}</AtTag>
|
||
</View>
|
||
})}
|
||
</View>
|
||
})
|
||
|
||
// 侧边筛选宽度选项
|
||
const widthnessElementsArray = this.state.widthType.map((item, index) => {
|
||
return <AtTag style='margin-left:5px' key={index}
|
||
name={item.name}
|
||
type='primary'
|
||
active={item.checked}
|
||
onClick={this.selectTag.bind(this)}
|
||
>{item.name}</AtTag>
|
||
})
|
||
// 店铺页面/店铺主页
|
||
const shopHomepageElement = <View className='shop-home-page'>
|
||
<View className='filter-box'>
|
||
{filterElementsArray}
|
||
<View onClick={this.showAndHideFilter.bind(this)} className='filter-title' >
|
||
<Text className='text'>
|
||
筛选
|
||
</Text>
|
||
|
||
</View>
|
||
</View>
|
||
<View className={this.state.isShowFilter ? 'side-filter show' : 'side-filter'}>
|
||
<View className='left' onClick={this.showAndHideFilter.bind(this)}></View>
|
||
{/* 侧边筛选 */}
|
||
<View className='right'>
|
||
<View className='filter-box'>
|
||
{this.state.checkedFilterIdList.length ? <View className='title'>已选择</View> : null}
|
||
<View className='button-box'>{checkedFilterElementsArray}</View>
|
||
{this.state.mainType.length ? <View className='title'>分类</View> : null}
|
||
<View className='button-box'>{goodsClassElementsArray}</View>
|
||
{this.state.goodType.length ? <View className='title'>商品类型</View> : null}
|
||
<View className='button-box'>{goodsTypeElementsArray}</View>
|
||
{goodsParamElementsArray}
|
||
{this.state.widthType.length ? <View className='title'>宽度</View> : null}
|
||
<View className='button-box'>{widthnessElementsArray}</View>
|
||
|
||
<View className='confirm-button'>
|
||
<Button className='button' type='primary' size='mini' style='background-color:#FF7142;border:0px' onClick={this.submitFilter.bind(this)} >确认</Button>
|
||
<Button className='button' type='primary' size='mini' style='background-color:#5cb85c;border:0px' onClick={this.resetFilterList.bind(this)}>重置</Button>
|
||
<View className='gap'></View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
|
||
</View>
|
||
{/* 店铺的商品列表 */}
|
||
<View className='container'>
|
||
{this.state.shopItem.length ? ShopItemElementsArray : <View className='no-more-title'> 没有更多了</View>}
|
||
</View>
|
||
|
||
</View>
|
||
// 店铺详情
|
||
const shopDescriptionElement = <View className='shop-description'>
|
||
<View className='img-box'>
|
||
<Image src={URL.Base + 'Public/images/shop/bg_banner.png'} mode='scaleToFill' style='width: 100%;height:150px;' />
|
||
<View className='content'>
|
||
<View className='shop-name'>
|
||
{this.state.shopName}
|
||
</View>
|
||
<View className='shop-address'>
|
||
{this.state.shopAddress}
|
||
</View>
|
||
<View className='contact'>
|
||
<Text className='contact-name'>联系人:{this.state.contactName}</Text>
|
||
<Text className='contact-number'>联系电话：{this.state.contactNumber}</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
<View className='shop-description2'>
|
||
<View className='title'>
|
||
店铺简介
|
||
</View>
|
||
|
||
<View className='description'>
|
||
<Text className='title-sub'>店铺介绍：</Text>
|
||
<Text className='detail'>{this.state.shopDescription}</Text>
|
||
</View>
|
||
</View>
|
||
|
||
{/* <View className='description-img'>
|
||
<View className='img-box'> <Image mode='aspectFit' src={URL.Base + 'Public/images/shop/bg_banner.png'} style='max-width: 100%; max-height:100%;' /></View>
|
||
<View className='img-box'> <Image mode='aspectFit' src={URL.Base + 'Public/images/shop/bg_banner.png'} style='max-width: 100%;max-height:100%;' /></View>
|
||
<View className='img-box'> <Image mode='aspectFit' src={URL.Base + 'Public/images/shop/bg_banner.png'} style='max-width: 100%;max-height:100%;' /></View>
|
||
</View> */}
|
||
{/* location.png */}
|
||
<Map
|
||
id='map'
|
||
longitude={this.state.longitude}
|
||
latitude={this.state.latitude}
|
||
scale='14'
|
||
controls='{{controls}}'
|
||
bindcontroltap='controltap'
|
||
markers={[{
|
||
iconPath: locationIcon,
|
||
id: 0,
|
||
latitude: this.state.latitude,
|
||
longitude: this.state.longitude,
|
||
width: 30,
|
||
height: 30
|
||
}]}
|
||
bindmarkertap='markertap'
|
||
polyline='{{polyline}}'
|
||
bindregionchange='regionchange'
|
||
show-location
|
||
style='width: 100%; height: 300px;'
|
||
></Map>
|
||
<View className='button-box'>
|
||
<Button className='button-blue' onClick={this.openNavMap.bind(this)}>打开地图</Button>
|
||
</View>
|
||
|
||
{/* <Map
|
||
id='map'
|
||
longitude={this.state.longitude}
|
||
latitude={this.state.latitude}
|
||
scale='14'
|
||
controls='{{controls}}'
|
||
bindcontroltap='controltap'
|
||
markers='{{markers}}'
|
||
bindmarkertap='markertap'
|
||
polyline='{{polyline}}'
|
||
bindregionchange='regionchange'
|
||
show-location
|
||
style='width: 100%; height: 300px;'
|
||
></Map> */}
|
||
</View>
|
||
|
||
|
||
return (
|
||
<View className='shop' >
|
||
|
||
<View className='banner-box'>
|
||
<Image src={URL.Base + 'Public/visual_editing/img/ksh_bg.jpg'} mode='scaleToFill' style='width: 100%;height:120px; ' />
|
||
<View className='shop-name'>{this.state.shopName}</View>
|
||
</View>
|
||
<View className='nav-box'>
|
||
<View className='nav'>
|
||
<View className='shop-cate'>
|
||
<View>
|
||
<ShopTypeInteractionComp
|
||
url={URL.GetShopCategoryList} style='position:absolute;z-index:2;opacity:0;left:0'
|
||
shopId={this.state.shop_id}
|
||
onPassDataToChild={this.getDataFromShopChild.bind(this)}
|
||
></ShopTypeInteractionComp>
|
||
</View>
|
||
<View className='interactive' onClick={this.showPopUp.bind(this)}>
|
||
<Text className='text'>
|
||
店铺全部分类
|
||
</Text>
|
||
<AtIcon value='menu' size='10' color='white'></AtIcon>
|
||
</View>
|
||
</View>
|
||
|
||
<View className='homepage-link' onClick={this.showHomePage.bind()}>
|
||
<Text className='text'>
|
||
首页
|
||
</Text>
|
||
</View>
|
||
<View className='shoppage-link' onClick={this.showDescriptionPage.bind()}>
|
||
<Text className='text'>
|
||
店铺说明
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
{/* 显示店铺首页或者店铺详情 */}
|
||
{this.state.showShopHomePage ? shopHomepageElement : shopDescriptionElement}
|
||
{this.state.isShowTopNav ? <ScrollToTopComponent ></ScrollToTopComponent> : null}
|
||
<CopyrightComponent></CopyrightComponent>
|
||
|
||
<View className='gap' style='height:150rpx'>
|
||
</View>
|
||
<View className='bottom-nav-box'>
|
||
{/* <BottomNav otherData={{ menu: [{ name: '首页' }, { name: '分类' }, { name: '购物车' }, { name: '教程软件' }, { name: '更多' }] }} /> */}
|
||
</View>
|
||
</View>
|
||
)
|
||
}
|
||
}
|
||
|
||
export default Shop
|