diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..9e26dfe --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/src/app.js b/src/app.js index 98fa62e..176927f 100644 --- a/src/app.js +++ b/src/app.js @@ -26,15 +26,23 @@ class App extends Component { 'pages/supplyDemandPublish/supplyDemandPublish', 'pages/mySupplyDemand/mySupplyDemand', 'pages/allDemanding/allDemanding', + 'pages/shopDescription/shopDescription', ], window: { backgroundTextStyle: 'light', navigationBarBackgroundColor: '#fff', navigationBarTitleText: 'WeChat', navigationBarTextStyle: 'black' + } + , + } + + + + componentDidMount () {} componentDidShow () {} diff --git a/src/assets/img/errorimg.png b/src/assets/img/errorimg.png new file mode 100644 index 0000000..a12100a Binary files /dev/null and b/src/assets/img/errorimg.png differ diff --git a/src/component/bottomNav/bottomNav.js b/src/component/bottomNav/bottomNav.js index 7f48ecf..b604d68 100644 --- a/src/component/bottomNav/bottomNav.js +++ b/src/component/bottomNav/bottomNav.js @@ -26,7 +26,7 @@ class bottomNav extends Component { const otherData = [ { name: '首页', url: '/pages/home/home' }, { name: '商品发布', url: '/pages/goodsPublish/goodsPublish' }, - { name: '供求发布', url: '/pages/supplyDemandPubish/supplyDemandPubish' }, + { name: '供求发布', url: '/pages/supplyDemandPublish/supplyDemandPublish' }, { name: '我的供求', url: '/pages/mySupplyDemand/mySupplyDemand' }, { name: '更多', url: '' }, ] diff --git a/src/component/filteredShopComponent/filteredShopComponent.js b/src/component/filteredShopComponent/filteredShopComponent.js index 732d958..b08bbb9 100644 --- a/src/component/filteredShopComponent/filteredShopComponent.js +++ b/src/component/filteredShopComponent/filteredShopComponent.js @@ -1,28 +1,170 @@ import Taro, { Component } from '@tarojs/taro' -import { View, Button, Text,Image } from '@tarojs/components' -import { AtIcon } from 'taro-ui' +import { View, Button, Text, Image } from '@tarojs/components' +import { AtIcon, AtModal, AtModalHeader, AtModalContent, AtModalAction, AtInput, AtToast, AtNoticebar } from 'taro-ui' + import './filteredShopComponent.scss' - import URL from '../../serviceAPI.config' + const hornIcon = require('../../icons/horn.png') const houseIcon = require('../../icons/house.png') + class recommondShop extends Component { config = { navigationBarTitleText: 'recommondShop' } + constructor() { + super(...arguments); + this.state = { + isOpenVouhcer: false, + isOpenConsult: false, + consultTip: '', + isToast: false, + consultResponseMsg: '', + voucherResponseMsg: '', + voucherCanConsult: false, + + } + } goToShop(value) { - Taro.navigateTo({ - url: '/pages/shop/shop?id='+value.shop_id+'&name='+value.shop_name + url: '/pages/shop/shop?id=' + value.shop_id + '&name=' + value.shop_name }) } - + // api 优惠卷请求 + + getVoucherInfo( {user="杨夕兵",phone="18950295811",shops=["808"],source_type=4,flag=false,source_class="1",source_level=1}) { + Taro.request({ + url: URL.GetVoucherInfo, + method: 'POST', + dataType: 'json', + data: { + user: user, + phone: phone, + shops: shops, + source_type: source_type, + flag: flag, + source_class:source_class, + source_level: source_level + }, + header: { + 'content-type': 'application/x-www-form-urlencoded', + 'X-Requested-With': 'XMLHttpRequest' + } + }) + .then(res => { + this.setState({ + voucherResponseMsg: res.data.tips, + voucherCanConsult: res.data.canConsult + }) + console.log('优惠卷请求', res) + }) + + } + // api 咨询信息 + + getConsultInfo({ user = "杨夕兵", phone = "18950295811", shops = ["1306"], source_type = "2", flag = false, source_level = 1 }) { + Taro.request({ + url: URL.GetConsultInfo, + method: 'POST', + dataType: 'json', + data: { + user: user, + phone: phone, + shops: shops, + source_type: source_type, + flag: flag, + source_level: source_level + }, + header: { + 'content-type': 'application/x-www-form-urlencoded', + 'X-Requested-With': 'XMLHttpRequest' + } + }) + .then(res => { + this.setState({ consultTip: res.data.tips }) + console.log('咨询请求', res) + }) + } + // api 购买咨询 BuyConsult + buyConsult({ user = "杨夕兵", phone = "18950295811", shops = ["1306"], source_type = "2", source_level = 1, coupons_flag = 0 }) { + + Taro.request({ + url: URL.BuyConsult, + method: 'POST', + dataType: 'json', + data: { + data: JSON.stringify({ + user: user, + phone: phone, + shops: shops, + source_type: source_type, + source_level: source_level, + coupons_flag: coupons_flag, + }) + }, + header: { + 'content-type': 'application/x-www-form-urlencoded', + 'X-Requested-With': 'XMLHttpRequest' + } + }) + .then(res => { + console.log('购买咨询请求', res) + if (res.err_code === 0 && res.err_msg === "success") { + this.setState({ consultResponseMsg: '成功' }, () => { + this.setState({ isToast: true }) + }) + // 延迟3秒 后将toast 关掉 + setTimeout(() => { + this.setState({ isToast: false }) + }, 3000); + + } else { + this.setState({ consultResponseMsg: res.data.err_msg }, () => { + this.setState({ isToast: true }) + }) + setTimeout(() => { + this.setState({ isToast: false }) + }, 3000); + + } + }) + } + + // 优惠卷弹框。取消。确认 + isOpenVoucher() { + this.setState({ isOpenVouhcer: true }) + this.getVoucherInfo({}) + } + voucherModalClose() { + this.setState({ isOpenVouhcer: false }) + } + voucherModalConfirm() { + this.setState({ isOpenVouhcer: false }) + this.buyConsult({}) + } + // 咨询弹框。取消。确认 + isOpenConsult() { + this.setState({ isOpenConsult: true }) + this.getConsultInfo({}) + } + consultModalClose() { + this.setState({ isOpenConsult: false }) + } + consultModalConfirm() { + this.setState({ isOpenConsult: false }) + this.buyConsult({}) + } + + + componentWillReceiveProps(nextProps) { //console.log(this.props, nextProps) } + componentDidMount() { + } componentWillUnmount() { } componentDidShow() { } @@ -30,52 +172,112 @@ class recommondShop extends Component { componentDidHide() { } render() { - - const title = this.props.shop?this.props.shop.shop_name:null + // console.log('店铺',this.props.shop) + + const title = this.props.shop ? this.props.shop.shop_name : null const imgUrl = this.props.shop ? URL.Base + this.props.shop.goods[0].goods_url : null const price = this.props.shop ? this.props.shop.goods[0].goods_price : null const goods = this.props.shop ? this.props.shop.goods : null const ProductName = this.props.shop ? this.props.shop.goods[0].goods_name : null const address = this.props.shop ? this.props.shop.shop_address : null const distance = this.props.shop ? this.props.shop.distance : null - const ads = this.props.shop ? this.props.shop.ads:null - // const consultText = this.props.shop.wx_open - const voucherLeft = this.props.shop?this.props.shop.left_nums:null - const slicedGoods = goods !==null?goods.slice(1):null - const goodsElementsArray = goods !== null ? slicedGoods.map((item,index)=>{ + const ads = this.props.shop ? this.props.shop.ads : null + const voucherLeft = this.props.shop ? this.props.shop.left_nums : null + // const consultText = this.props.shop.wx_open + const slicedGoods = goods !== null ? goods.slice(1) : null + const goodsElementsArray = goods !== null ? slicedGoods.map((item, index) => { return - + - }):null + }) : null + // 优惠卷和咨询元素 + const voucherModalElement = + 优惠卷须知: + + + 提示:具体可以前往实体店进行领取优惠卷或通过电话进行咨询 + + 当前优惠卷{voucherLeft}张 + + + {!this.state.voucherCanConsult ? {this.state.voucherResponseMsg} : null} + + + + + const consultModalElement = + 咨询 + + 提示:{this.state.consultTip} + + + + + + + // 请提示元素 + const toast = return ( + {voucherModalElement} + {consultModalElement} + {toast} - + {title} - - - + + + - + - {goods.length !== 1 ? goodsElementsArray: - 商品: {ProductName} + {goods.length !== 1 ? {goodsElementsArray} : + 商品: {ProductName} 价格: {price} } - + - {address} + {address} {distance} - + ) diff --git a/src/component/filteredShopComponent/filteredShopComponent.scss b/src/component/filteredShopComponent/filteredShopComponent.scss index 8ee7b19..5237178 100644 --- a/src/component/filteredShopComponent/filteredShopComponent.scss +++ b/src/component/filteredShopComponent/filteredShopComponent.scss @@ -3,6 +3,26 @@ border-radius: 3px; box-shadow: 0 5px 5px #ddd; margin-bottom: 10px; + .voucher-modal{ + background-color: black; + + .at-modal-content{ + background-color: black + } + + } + + .tip-info{ + color:#a94442 + } + + .warning, .voucher-left, .voucher-ResponseMsg{ + color:#a94442 + } + .voucher-left{ + margin-top: 20px; + text-align: center; + } .header{ border-bottom:1px solid #F2F2F2; @@ -21,6 +41,7 @@ margin-left: 200px; display: flex; //vertical-align: middle; + .consult-button-text{ color:white; font-size: 28px; @@ -28,7 +49,7 @@ width: 100px; line-height:50px; height:50px; - margin-top:15px; + margin-top:20px; } .voucher-button-text{ color:white; @@ -37,7 +58,7 @@ width: 100px; line-height:50px; height:50px; - margin-top:15px; + margin-top:20px; } .voucher{ @@ -51,24 +72,19 @@ flex-wrap: nowrap; font-size: 35px; .shop-img{ + flex:1; margin:20px; text-align: center; height: 200px; width: 200px; } - .details{ - font-size: 30px; - margin-left: 30px; - .details-block{ - margin-top: 30px; - .details-text{ - font-weight: bold; - } - } - } - .goods-img-box{ - flex:1; + .images{ + flex:3; + display: flex; + flex-wrap: nowrap; + .goods-img-box{ + width:25%; margin-top: 20px; .goods-img{ @@ -78,6 +94,24 @@ margin: 10px } } + } + .details{ + flex:3; + font-size: 30px; + padding: 30px 30px; + overflow: hidden; + .details-block{ + margin-top: 30px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + .details-text{ + font-weight: bold; + } + + } + } + } .footer{ display: flex; diff --git a/src/component/searchBarComponent/searchBarComponent.js b/src/component/searchBarComponent/searchBarComponent.js index 560017e..1032d08 100644 --- a/src/component/searchBarComponent/searchBarComponent.js +++ b/src/component/searchBarComponent/searchBarComponent.js @@ -1,6 +1,6 @@ import Taro, { Component } from '@tarojs/taro' -import { View, Button, Text } from '@tarojs/components' +import { View } from '@tarojs/components' import { AtSearchBar } from 'taro-ui' @@ -9,13 +9,17 @@ import './searchBarComponent.scss' class SearchBarComponent extends Component { - + config = { navigationBarTitleText: 'searchBarComponent' } + + + + constructor() { - + super(...arguments) this.state = { value: '' @@ -30,6 +34,7 @@ class SearchBarComponent extends Component { render() { return ( + + ) } diff --git a/src/component/searchBarComponent/searchBarComponent.scss b/src/component/searchBarComponent/searchBarComponent.scss index b0d7519..a310a94 100644 --- a/src/component/searchBarComponent/searchBarComponent.scss +++ b/src/component/searchBarComponent/searchBarComponent.scss @@ -1,8 +1,19 @@ +// 整个样式和shoppage 一样但是不生效 +// .searchBarComponent{ +// .search-button{ +// .at-search-bar__action{ +// background-color:#FF9900 +// } +// } + +// } + + +// + .search-button{ .at-search-bar__action{ - background-color: #FF9900 + background-color:#FF9900 } - - -} + } \ No newline at end of file diff --git a/src/component/shopItemComponent/shopItemComponent.js b/src/component/shopItemComponent/shopItemComponent.js index cbb7b31..7b3a7d1 100644 --- a/src/component/shopItemComponent/shopItemComponent.js +++ b/src/component/shopItemComponent/shopItemComponent.js @@ -3,19 +3,33 @@ import { View, Image, Text } from '@tarojs/components' import eyeIcon from '../../icons/eye.png' import cartIcon from '../../icons/cart.png' +import errorImg from '../../assets/img/errorimg.png' + import './shopItemComponent.scss' import URL from '../../serviceAPI.config' class ShopItem extends Component { +// errorImg:'this.src="' + require('@/assets/images/errorimg.png') + '"' , //错误图片显示路径 - + constructor() { + super(...arguments) + this.state = { + + }} shopOnClickHanlder(){ Taro.navigateTo({ url: '/pages/goods/goods?id=123&name=michael' }) } + + // 当图片无效的时候 的方法 (为什么不起作用??) + onError(e){ + + e.target.onerror = null; + e.target.src = 'https://raw.githubusercontent.com/shenghy/SmileVue/master/src/assets/images/errorimg.png' + } render() { const imgURL =this.props.item? URL.Base +this.props.item.goods_url:null const newPrice = this.props.item ? this.props.item.goods_price : null @@ -29,7 +43,7 @@ class ShopItem extends Component { {goodType} - + {name} ¥{newPrice+' '} diff --git a/src/pages/allDemanding/allDemanding.js b/src/pages/allDemanding/allDemanding.js index 936bf16..be19add 100644 --- a/src/pages/allDemanding/allDemanding.js +++ b/src/pages/allDemanding/allDemanding.js @@ -9,7 +9,7 @@ import './allDemanding.scss' import eyeIcon from '../../icons/eye.png' -let currentPage=1 +let currentPage = 1 class AllDemanding extends Component { config = { navigationBarTitleText: '全部业主需求' @@ -17,17 +17,17 @@ class AllDemanding extends Component { constructor() { super(...arguments) this.state = { - supplys:[], // 需求列表 - isMore:'more', // 上拉加载状态 - demandingState: [ '需求', '供应', '人才'], // 供求状态选择 - demandingStateSelected:'全部', // 当前供求状态 - industryCate: ['制定家具', '成品家具', '办公家具','设计'], // 行业分类状态选择 + supplys: [], // 需求列表 + isMore: 'more', // 上拉加载状态 + demandingState: ['全部', '在用', '已抢单', '已抢光'], // 供求状态选择 + demandingStateSelected: '全部', // 当前供求状态 + industryCate: ['全部', '制定家具', '成品家具', '办公家具', '设计'], // 行业分类状态选择 industryCateSelected: '全部', // 当前行业分类状态 startDateSel: '2018-04-22', endDateSel: '2018-04-22', } } - GetAllDemanding({ curr_page=1, page_count=20}) { + GetAllDemanding({ curr_page = 1, page_count = 20 }) { Taro.request({ url: URL.GetAllDemanding, method: 'POST', @@ -44,22 +44,22 @@ class AllDemanding extends Component { } }) .then(res => { - if (res.data.supplys.length){ - const newSupplys=this.state.supplys.concat(res.data.supplys) - this.setState({ supplys: newSupplys, isMore: 'more'}) - }else{ - this.setState({ isMore:'noMore'}) - } + if (res.data.supplys.length) { + const newSupplys = this.state.supplys.concat(res.data.supplys) + this.setState({ supplys: newSupplys, isMore: 'more' }) + } else { + this.setState({ isMore: 'noMore' }) + } }) } // 向上拉升延迟一秒加载数据 - handleLoadMore(){ - this.setState({isMore:'loading'}) + handleLoadMore() { + this.setState({ isMore: 'loading' }) setTimeout(() => { currentPage += 1 this.GetAllDemanding({ curr_page: currentPage }) - + }, 1000); } // 改变需求选项 @@ -74,13 +74,13 @@ class AllDemanding extends Component { industryCateSelected: this.state.industryCate[e.detail.value] }) } - //改变开始日期 + //改变开始日期 onStartDateChange = e => { this.setState({ startDateSel: e.detail.value }) } -// 改变结束日期 + // 改变结束日期 onEndDateChange = e => { this.setState({ endDateSel: e.detail.value @@ -91,10 +91,10 @@ class AllDemanding extends Component { componentWillReceiveProps(nextProps) { console.log(this.props, nextProps) } - componentDidMount(){ + componentDidMount() { // 得到第一页需求数据 this.GetAllDemanding({}) - + } componentWillUnmount() { } @@ -104,39 +104,39 @@ class AllDemanding extends Component { componentDidHide() { } render() { - const allDemandingElementArray=this.state.supplys?this.state.supplys.map((item,index)=>{ + const allDemandingElementArray = this.state.supplys ? this.state.supplys.map((item, index) => { return - + 业主:{item.user_name} - {item.class_name+' '} - | + {item.class_name + ' '} + | {item.browse_times} - - - + + + - - + + {item.sd_title} {item.sd_desc} - - - 抢单 - + + + 抢单 - - 没有数据 - 更新日期:{item.update_date} - - - }):null + + 没有数据 + 更新日期:{item.update_date} + + + + }) : null return ( @@ -201,13 +201,15 @@ class AllDemanding extends Component { 搜索 - {/* 供求页面的数据加载 */} + {/* 供求页面的数据加载 */} {allDemandingElementArray} diff --git a/src/pages/goods/goods.js b/src/pages/goods/goods.js index e8c9378..6147170 100644 --- a/src/pages/goods/goods.js +++ b/src/pages/goods/goods.js @@ -138,7 +138,7 @@ class Goods extends Component { {/* 详情和评论区 */} {/* 大类 */} - + 商品细节: diff --git a/src/pages/goods/goods.scss b/src/pages/goods/goods.scss index ba7a7d3..c71df86 100644 --- a/src/pages/goods/goods.scss +++ b/src/pages/goods/goods.scss @@ -119,6 +119,17 @@ } +//------------------------------ +.details-box{ + + .at-tabs{ + + .at-tabs__item--active{ + color:#FF7142 + } + } +} +//------------------------------ .copyright-box{ padding:0 20px; @@ -137,6 +148,7 @@ position: fixed; bottom: 0; width: 100%; + z-index: 600; .shop-bottom-nav{ display: flex; flex-wrap: nowrap; @@ -145,6 +157,7 @@ height: 90px; line-height: 90px; font-size: 30px; + .to-shop{ flex:1; diff --git a/src/pages/home/home.js b/src/pages/home/home.js index 996e06a..ebab431 100644 --- a/src/pages/home/home.js +++ b/src/pages/home/home.js @@ -1,6 +1,6 @@ import Taro, { Component } from '@tarojs/taro' -import { View, Button, Text, Swiper, SwiperItem, Image } from '@tarojs/components' -import { AtActivityIndicator } from 'taro-ui' +import { View, Button, Text, Swiper, SwiperItem, Image, } from '@tarojs/components' +import { AtModal } from 'taro-ui' import filteredShopComponent from '../../component/filteredShopComponent/filteredShopComponent' import bottomNav from '../../component/bottomNav/bottomNav' import URL from '../../serviceAPI.config' @@ -11,6 +11,7 @@ class Home extends Component { config = { navigationBarTitleText: '首页' } + constructor() { super(...arguments); this.state = { @@ -19,7 +20,8 @@ class Home extends Component { categories: [],// 大类 subCate:[], //小类 demanding: [],// 业主需求 - otherData:[] // 底部导航栏 + otherData:[], // 底部导航栏 + isOpen:false, // 抢单消息提示 } } componentWillMount(){ @@ -27,17 +29,14 @@ class Home extends Component { } componentDidMount() { // 页面加载后 得到首页的基本信息和推荐店铺的信息 + Taro.showLoading({ title: '加载中' }) this.getShops() this.getHomeCategoriesInfo() } - componentWillUnmount() { } + - componentDidShow() { } - - componentDidHide() { } - -// 得到首页的信息 +//api 得到首页的信息 getHomeCategoriesInfo() { Taro.request({ url: URL.ShopWxStore, @@ -52,7 +51,7 @@ class Home extends Component { }) }) } - // 得到推荐商店的信息 + // api 得到推荐商店的信息 getShops(parent_supply_class = 0, supply_class = '-1', supply_level = 1) { Taro.request({ url: URL.ShopSupplyShops, @@ -70,17 +69,36 @@ class Home extends Component { }, header: { 'content-type': 'application/x-www-form-urlencoded', - } }) .then(res => { console.log('所有店铺的信息', res) + Taro.hideLoading() this.setState({ shopsDetails: res.data.shops }, () => { }) } ) } - // 点击大类 + // api 抢单请求 + GrabDemand({demandId=218}){ + Taro.request({ + url: URL.GrabDemand, + method: 'POST', + dataType: 'json', + data: { + demandId: demandId + }, + header: { + 'content-type': 'application/x-www-form-urlencoded', + 'X-Requested-With': 'XMLHttpRequest' + } + }) + .then(res => { + console.log('抢单请求:',res) + }) + +} + // 点击大类icon onClickParentCate(item) { this.setState({ subCate: item.children }) this.getShops(item.parent_class_id, item.class_id) @@ -95,8 +113,40 @@ class Home extends Component { url: '/pages/allDemanding/allDemanding' }) } + grabOrder(){ + this.setState({isOpen:true}) + + } + handleGrabModalClose(){ + this.setState({isOpen:false}) + } + handleGrabModalCancel(){ + this.setState({isOpen:false}) + } + handleGrabConfirm(){ + this.setState({isOpen:false}) + // 确认抢单之后 + this.GrabDemand({}) + } + componentWillUnmount() { } + + componentDidShow() { } + + componentDidHide() { } + render() { + // 提示弹窗element + const modalMessage = const demandingElemensArray = this.state.demanding.length?this.state.demanding.map((item, index) => { return < SwiperItem key={index} > @@ -112,7 +162,7 @@ class Home extends Component { 业主:{item.user_name} - + @@ -126,7 +176,7 @@ class Home extends Component { }):null // 这里应该代码可以优化----- - const categoriesElementsArray1 = this.state.categories[0].length?this.state.categories[0].map((item, index) => { + const categoriesElementsArray1 = this.state.categories.length?this.state.categories[0].map((item, index) => { return {item.class_name} @@ -151,6 +201,7 @@ class Home extends Component { return ( + {modalMessage} {/* 第一行图片滚动条 */} diff --git a/src/pages/home/home.scss b/src/pages/home/home.scss index fd8b6c7..dc2fdfd 100644 --- a/src/pages/home/home.scss +++ b/src/pages/home/home.scss @@ -10,6 +10,16 @@ } +.modalBox{ + .at-modal-footer--simple{ + .at-modal-action{ + button:last-child:nth-child(2){ + color:#FF7142 + } + } + } +} + .container{ //margin-top: 30px; diff --git a/src/pages/index/index.js b/src/pages/index/index.js index 7478476..389592a 100644 --- a/src/pages/index/index.js +++ b/src/pages/index/index.js @@ -29,8 +29,8 @@ class Index extends Component { componentDidMount(){ Taro.navigateTo({ // url: '/pages/home/home' - // url: '/pages/goodsPublish/goodsPublish' - url: '/pages/home/home' + // url: '/pages/goodsPublish/goodsPublish' + url: '/pages/home/home' }) } componentWillReceiveProps (nextProps) { diff --git a/src/pages/mySupplyDemand/mySupplyDemand.js b/src/pages/mySupplyDemand/mySupplyDemand.js index 2937063..4754e77 100644 --- a/src/pages/mySupplyDemand/mySupplyDemand.js +++ b/src/pages/mySupplyDemand/mySupplyDemand.js @@ -1,6 +1,7 @@ import Taro, { Component } from '@tarojs/taro' import { View, Text } from '@tarojs/components' import { AtInput, AtButton, Picker,AtIcon } from 'taro-ui' +import URL from '../../serviceAPI.config' import copyrightComponent from '../../component/copyrightComponent/copyrightComponent' import searchBarComponent from '../../component/searchBarComponent/searchBarComponent' @@ -28,6 +29,26 @@ class MySupplyDemand extends Component { } } + //MySupplyDemand + getMySupplyDemand({ curr_page=1, page_count=20}) { + Taro.request({ + url: URL.MySupplyDemand, + method: 'POST', + dataType: 'json', + data: { + curr_page: curr_page, + page_count: page_count + }, + header: { + 'content-type': 'application/x-www-form-urlencoded', + 'X-Requested-With': 'XMLHttpRequest' + } + }).then(res => { + console.log('个人供求=》暂时无数据, 后台需要权限验证') + }) + + } + //修改供求类型 demSupplyCateChange = e => { this.setState({ @@ -55,13 +76,13 @@ class MySupplyDemand extends Component { endDateSel: e.detail.value }) } - - - componentWillReceiveProps(nextProps) { console.log(this.props, nextProps) } + componentDidMount () { + this.getMySupplyDemand({}) + } componentWillUnmount() { } componentDidShow() { } diff --git a/src/pages/shop/shop.js b/src/pages/shop/shop.js index 1122b6e..41ac388 100644 --- a/src/pages/shop/shop.js +++ b/src/pages/shop/shop.js @@ -1,12 +1,14 @@ import Taro, { Component } from '@tarojs/taro' import { View, Button, Text, Image } from '@tarojs/components' -import { AtSearchBar, AtTag, AtIcon } from 'taro-ui' +import { AtSearchBar, AtTag, AtIcon, AtPagination } from 'taro-ui' import URL from '../../serviceAPI.config' + import './shop.scss' import ShopItem from '../../component/shopItemComponent/shopItemComponent' import bottomNav from '../../component/bottomNav/bottomNav' import copyrightComponent from '../../component/copyrightComponent/copyrightComponent' +import ShopDescription from '../shopDescription/shopDescription'; class Shop extends Component { // 项目配置 @@ -16,21 +18,31 @@ class Shop extends Component { constructor() { super(...arguments) this.state = { - isShopDetailsOn:false, // 是否显示店铺说明页面 - shopItem:'', // 所有商品 + isShopDetailsOn: false, // 是否显示店铺说明页面 + shopItem: [], // 所有商品 value: '', // 搜索框的值 - shopId:'', // 店铺的id - shopName:'', // 店铺名 - FilterText:'', // 筛选的可选项 - filterBar:['综合排序','销量','新品','价格','人气'], - selectedFilterValue:0, //筛选项 - isShowFilter:false, //是否显示侧边筛选 - 综合排序:true, - 销量:false, - 新品:false, - 价格:false, - 人气:false, - cate:{ + shopId: '', // 店铺的id + shopName: '', // 店铺名 + FilterText: '', // 筛选的可选项 + filterBar: ['all', 'amount', 'newProduct', 'price', 'popularity'], + filterBarKeys: { all: '综合排序', amount: '销量', newProduct: '新品', price: '价格', popularity: '人气' }, + selectedFilterValue: 0, //筛选项 + isShowFilter: false, //是否显示侧边筛选 + showShopHomePage: false,// 是否显示首页页面 + shopDescriptionData: '',// 店铺详情信息 + shopName: '',//店铺名称 + shopAddress: '',//店铺地址 + contactName: '',//联系人 + contactNumber: '',//联系电话 + shopDescription: '',//店铺简介 + filterOptions: { + all: true, + amount: false, + newProduct: false, + price: false, + popularity: false, + }, + cate: { 10101: false,// "橱柜" 10102: false,// "衣柜" 10106: false,// "装饰柜" @@ -38,49 +50,54 @@ class Shop extends Component { 20103: false,// "产品设计" 30101: false,// "橱柜" 30102: false,// "衣柜" - } - + }, + filterCondition: '',// 筛选条件 + total: 0,// 信息条数 + currentPage: 1,// 当前页 + + + + } } // 搜索栏值的改变方法 onChange(value) { - this.setState({ value: value - },()=>{ + }, () => { console.log(this.state.value) }) } - // 搜索栏的方法 - getSearchBarkeyWords(){ - Taro.request({ - url: URL.SearchBarKeyWords, - method: 'POST', - dataType: 'json', - data:{ - searchContent: '背板', - searchType: 1 - }, - header: { - 'content-type': 'application/x-www-form-urlencoded', - 'X-Requested-With': 'XMLHttpRequest' - } - }).then(res => { - console.log('搜索栏的搜索结果',res) - }) + //api 搜索栏的方法请求 + getSearchBarkeyWords() { + Taro.request({ + url: URL.SearchBarKeyWords, + method: 'POST', + dataType: 'json', + data: { + searchContent: '背板', + searchType: 1 + }, + header: { + 'content-type': 'application/x-www-form-urlencoded', + 'X-Requested-With': 'XMLHttpRequest' + } + }).then(res => { + console.log('搜索栏的搜索结果', res) + }) - } + } - // 得到筛选的标签 - getSearchParams({shop_name = false, shop_id = 1305, shop_class_id = "", goods_class_id=0,class_filter=0}){ + // api 得到筛选的标签请求 + getSearchParams({ shop_name = false, shop_id = 1305, shop_class_id = "", goods_class_id = 0, class_filter = 0 }) { Taro.request({ url: URL.GetSearchParam, method: 'POST', dataType: 'json', data: { goods: JSON.stringify({ - shop_name: shop_name, - shop_id: shop_id, + shop_name: shop_name, + shop_id: shop_id, shop_class_id: shop_class_id, goods_class_id: goods_class_id, class_filter: class_filter, @@ -100,15 +117,15 @@ class Shop extends Component { this.setState({ FilterText: res.data }) }) } - - // 得到所有的产品 - goodsSearch({ curr_page = 1, page_count = 50, shop_name = false, shop_id = 1305, config_id = 4, shop_class_id = '', order = '', currPage = 1 }) { + + // api 得到所有的产品请求 + goodsSearch({ curr_page = 1, page_count = 10, shop_name = false, shop_id = 1305, config_id = 4, shop_class_id = '', order = '', currPage = 1 }) { Taro.request({ url: URL.GoodsSearch, - method:'POST', + method: 'POST', dataType: 'json', - data:{ - goods: JSON.stringify({ + data: { + goods: JSON.stringify({ curr_page: curr_page, page_count: page_count, shop_name: shop_name, @@ -117,233 +134,380 @@ class Shop extends Component { shop_class_id: shop_class_id, order: order, currPage: currPage - }), + }), goodsRegion: JSON.stringify({}), goodsSpec: JSON.stringify([]), goodsParam: JSON.stringify([]), goodsParamExt: JSON.stringify([]), - }, header: { 'content-type': 'application/x-www-form-urlencoded', - 'X-Requested-With':'XMLHttpRequest' + 'X-Requested-With': 'XMLHttpRequest' } }) .then(res => { - // console.log(res) - this.setState({ shopItem:res.data}) + this.setState({ shopItem: res.data.goods, total: res.data.goodsCount, filterCondition: order }) + }) } - // 产品排序 - accendingDescending(value){ - this.setState({selectedFilterValue:value}) - if(value==0){ - this.setState({ 综合排序: !this.state.综合排序 }) - this.goodsSearch({}) - } - if(value==1){ - this.setState({ 销量: !this.state.销量 },()=>{ - this.state.销量 ? this.goodsSearch({ order: "g.sales_volume desc" }) : this.goodsSearch({ order: "g.sales_volume" }) - }) + + // api 得到店铺详情请求 + getShopDescription({ shopID = 808 }) { + Taro.request({ + url: URL.Base + 'shop-wxShopInfo', + method: 'POST', + dataType: 'json', + data: { + shopID: shopID, + }, + header: { + 'content-type': 'application/x-www-form-urlencoded', + } + }) + .then(res => { + 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 + }, () => { + console.log(this.state.shopDescriptionData) + }) + + } + ) } - if(value==2){ - this.setState({ 新品: !this.state.新品 },()=>{ - this.state.新品 ? this.goodsSearch({ order: "g.create_date desc" }) : this.goodsSearch({ order: "g.create_date" }) - }) - } - if(value==3){ - this.setState({ 价格: !this.state.价格 },()=>{ - this.state.价格 ? this.goodsSearch({ order: "g.goods_price desc" }) : this.goodsSearch({ order: "g.goods_price" }) + + // 产品排序 + accendingDescending(value) { + this.setState({ selectedFilterValue: value }) + if (value == 0) { + this.setState({ + currentPage: 1, + filterOptions: { + all: true, + amount: false, + newProduct: false, + price: false, + popularity: false + } + } + ) + this.goodsSearch({}) + } + if (value == 1) { + this.setState({ + currentPage: 1, + filterOptions: { + all: false, + amount: !this.state.filterOptions.amount, + newProduct: false, + price: false, + popularity: false + } + }, () => { + this.state.filterOptions.amount ? this.goodsSearch({ order: "g.sales_volume desc" }) : this.goodsSearch({ order: "g.sales_volume" }) + } + ) + } + if (value == 2) { + this.setState({ + currentPage: 1, + filterOptions: { + all: false, + amount: false, + newProduct: !this.state.filterOptions.newProduct, + price: false, + popularity: false + } + }, () => { + this.state.filterOptions.newProduct ? this.goodsSearch({ order: "g.create_date desc" }) : this.goodsSearch({ order: "g.create_date" }) + } + ) - }) + } + if (value == 3) { - } - if(value==4){ - this.setState({ 人气: !this.state.人气 },()=>{ - this.state.人气 ? this.goodsSearch({ order: "g.browse_times desc" }) : this.goodsSearch({ order: "g.browse_times" }) + this.setState({ + currentPage: 1, + filterOptions: { + all: false, + amount: false, + newProduct: false, + price: !this.state.filterOptions.price, + popularity: false + } + }, () => { + this.state.filterOptions.price ? this.goodsSearch({ order: "g.goods_price desc" }) : this.goodsSearch({ order: "g.goods_price" }) + } + ) - }) - } + } + if (value == 4) { + + this.setState({ + currentPage: 1, + filterOptions: { + all: false, + amount: false, + newProduct: false, + price: false, + popularity: !this.state.filterOptions.popularity + } + }, () => { + this.state.filterOptions.popularity ? this.goodsSearch({ order: "g.browse_times desc", }) : this.goodsSearch({ order: "g.browse_times" }) + + } + ) + + } } - // 是否显示侧边筛选 - showAndHideFilter(){ + showAndHideFilter() { this.setState({ isShowFilter: !this.state.isShowFilter }) } // 选择侧边筛选的标签 - selectTag(value){ - for(let item in this.state.cate){ - if(value===item){ - this.setState(prevState => ({ - cate: { - ...prevState.cate, - [item]:!this.state.cate[item] - } - }),()=>{ - this.getSearchParams({ goods_class_id: value , class_filter :1}) - }) - } - } + selectTag(value) { + for (let item in this.state.cate) { + if (value === item) { + this.setState(prevState => ({ + cate: { + ...prevState.cate, + [item]: !this.state.cate[item] + } + }), () => { + this.getSearchParams({ goods_class_id: value, class_filter: 1 }) + }) + } + } } - + handleOnPageChange(value) { + + this.setState({ currentPage: value.current }) + // console.log('currentPage', currentPage ,'condition',this.state.filterCondition) + this.goodsSearch({ curr_page: value.current, order: this.state.filterCondition }) + } + showHomePage() { + this.setState({ showShopHomePage: true }) + } + showDescriptionPage() { + this.setState({ showShopHomePage: false }) + } + + componentWillMount() { - this.setState({ shopId: this.$router.params.id, shopName: this.$router.params.name}) // 输出 { id: 2, type: 'test' } + } - componentDidMount(){ + componentDidMount() { + this.setState({ shopId: this.$router.params.id, shopName: this.$router.params.name }) // 输出 { id: 2, type: 'test' } //页面加载之后 得到指定店铺的商品 和 筛选标签 this.goodsSearch({}) this.getSearchParams({}) + this.getShopDescription({}) // this.getSearchBarkeyWords() + } componentDidShow() { } componentDidHide() { } + + render() { - // const shopName= this.state.shopName - const ShopItemElementsArray =this.state.shopItem? this.state.shopItem.goods.map((item,index)=>{ + + + const ShopItemElementsArray = this.state.shopItem.length ? this.state.shopItem.map((item, index) => { return - - }):null - - const filterElementsArray=this.state.filterBar.map((item,index)=>{ - let isTure=this.state[item] - return + + }) : null + + const filterElementsArray = this.state.filterBar.map((item, index) => { + let isTure = this.state.filterOptions[item] + + return - {item} + {this.state.filterBarKeys[item]} - {index!==0&&index!==5&&(isTure? : )} + {index !== 0 && index !== 5 && (isTure ? : )} }) - - - - // const widthness = this.state.FilterText ? this.state.FilterText.goodsParamExt[5].param_value[0] : null // filter 宽度选项 + // const widthness = this.state.FilterText ? this.state.FilterText.goodsParamExt[5].param_value[0] : null // filter 宽度选项 // 侧边筛选的分类项 - + const goodsClassElementsArray = this.state.FilterText.goods_class ? this.state.FilterText.goods_class.map((item, index) => { - + let isTrue = this.state.cate[item.class_id] return {item.class_name} - }):null + }) : null // 侧边筛选的商品类型项 - const goodsTypeKeyArray = this.state.FilterText.goods_type ? Object.keys(this.state.FilterText.goods_type):null + const goodsTypeKeyArray = this.state.FilterText.goods_type ? Object.keys(this.state.FilterText.goods_type) : null const goodsTypeElementsArray = goodsTypeKeyArray ? goodsTypeKeyArray.map((key, index) => { let object = this.state.FilterText.goods_type return {object[key].goods_type_ch_name} - }):null - + }) : null + // 侧边筛选的其他项 - const goodsParamKeyArray = this.state.FilterText.goodsParam ? Object.keys(this.state.FilterText.goodsParam):null + const goodsParamKeyArray = this.state.FilterText.goodsParam ? Object.keys(this.state.FilterText.goodsParam) : null const goodsParamElementsArray = goodsParamKeyArray ? goodsParamKeyArray.map((key, index) => { let object = this.state.FilterText.goodsParam - return {object[key].param_name} + return {object[key].param_name} {object[key].param_value[0]} - }):null + }) : null - return ( - - - - - - - {/* {shopName} */} - - - - - - 店铺全部分类 - - - - - - - 首页 - - - - - 店铺说明 - - - - + // 店铺页面/店铺主页 + const shopHomepageElement = - {filterElementsArray} - - - 筛选 + {filterElementsArray} + + + 筛选 - - + + - - - {/* 侧边筛选 */} + + + {/* 侧边筛选 */} - - 分类 - {goodsClassElementsArray} - 商品类型 - {goodsTypeElementsArray} - {goodsParamElementsArray} - 宽度 - - {/* + 分类 + {goodsClassElementsArray} + 商品类型 + {goodsTypeElementsArray} + {goodsParamElementsArray} + 宽度 + + {/* {widthness.value_desc} */} - - - - - - + + + + + + - + - {/* 店铺的商品列表 */} + {/* 店铺的商品列表 */} - {ShopItemElementsArray} - + {ShopItemElementsArray} + + + + + + + // 店铺详情 + const shopDescriptionElement = + + + + + {this.state.shopName} + + + {this.state.shopAddress} + + + 联系人:{this.state.contactName} + 联系电话:{this.state.contactNumber} + + + + + + 店铺简介 + + + 店铺介绍: + {this.state.shopDescription} + + + + + + + + + + + + + return ( + + + + + + + {shopName} + + + + + + 店铺全部分类 + + + + + + 首页 + + + + + 店铺说明 + + + + + {/* 显示店铺首页或者店铺详情 */} + {this.state.showShopHomePage ? shopHomepageElement : shopDescriptionElement} - + - + ) } } diff --git a/src/pages/shop/shop.scss b/src/pages/shop/shop.scss index b8a31e6..b79c93b 100644 --- a/src/pages/shop/shop.scss +++ b/src/pages/shop/shop.scss @@ -12,7 +12,8 @@ position: absolute; top:100px; left:60px; - font-size: 50px + font-size: 50px; + } } .nav-box{ @@ -21,6 +22,7 @@ .nav{ display: flex; line-height: 55px; + text-align: center; .text{ color:white; font-size: 28px; @@ -34,6 +36,7 @@ .homepage-link{ flex:1; margin-left: 10%; + text-align: left; } .shoppage-link{ flex:1; @@ -64,14 +67,14 @@ z-index: 10; position: fixed; top:0; - right:0; - width:0%; + left:100%; + // width:0%; height:100%; - transition:width 1s; + transition: left 0.5s ease; display: flex; .left{ width:30%; - + background-color: rgba(0,0,0,.3) } .right{ width: 70%; @@ -103,7 +106,7 @@ } .show{ - width: 100% + left:0px } @@ -119,6 +122,10 @@ } } +.pagination{ + margin-top: 50px; + margin-bottom: 50px; +} .copyright-box{ padding:0 20px; @@ -134,3 +141,66 @@ height:150px; } +//--------- 店铺说明样式 + +.shop-description{ + .img-box{ + position: relative; + .content{ + position: absolute; + font-size: 30px; + color: white; + width: 100%; + top:20%; + text-align: center; + .shop-name{ + font-size: 60px; + // font-weight: bold; + } + .shop-address, .contact{ + margin-top: 20px; + .contact-number{ + display: inline-block; + margin-left: 20px; + } + } + + + } + } + .shop-description2{ + border: 1px solid #e5e5e5; + font-size: 30px; + padding: 20px 30px; + color: #888; + line-height: 32px; + box-shadow: 0 1px 4px 0 #d7d7d7; + margin-bottom: 10px; + height: 200px; + .title{ + font-weight: bold; + font-size: 40px; + color:black; + margin-top: 5%; + margin-left: 8%; + + } + .description{ + margin-top: 5%; + margin-left: 15%; + .title-sub{ + font-weight: bold + } + } + } + .description-img{ + margin:20px; + .img-box{ + border: 1px solid #ccc; + text-align: center; + font-size: 0; + margin-bottom: 5px; + + } + } +} \ No newline at end of file diff --git a/src/serviceAPI.config.js b/src/serviceAPI.config.js index 43290ac..86f1347 100644 --- a/src/serviceAPI.config.js +++ b/src/serviceAPI.config.js @@ -9,6 +9,12 @@ const URL = { SearchResult: LOCALURL + 'GoodsSearch-search',// 得到搜索结果 SearchBarKeyWords: LOCALURL + 'Search-getKeywords',// 搜索栏接口 GetAllDemanding: LOCALURL + 'supply-allDemandList',// 获取所有业主需求 + MySupplyDemand: LOCALURL + 'Supply-myList',// 获取所有业主需求 + ShopDescription: LOCALURL + 'shop-wxShopInfo',// 获取店铺详情 + GrabDemand: LOCALURL + 'Supply-grabDemand',// 抢单接口 + GetVoucherInfo: LOCALURL + 'Shop-couponsTips',// 优惠卷信息 + GetConsultInfo: LOCALURL + 'Shop-consultTips',// 咨询信息 + BuyConsult: LOCALURL + 'Shop-consult',// 购买咨询 }