mqzheng/cf-wx-app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

添加优惠卷 询价 api

Browse Source
This commit is contained in:
郑茂强
2018-12-14 17:10:23 +08:00
parent 161862d12f
commit 6bacc5be25
19 changed files with 924 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/component/bottomNav/bottomNav.js
View File

@@ -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: '' },
]

252
src/component/filteredShopComponent/filteredShopComponent.js
View File

@@ -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 <View className='goods-img-box' key={index}>
<Image className='goods-img' onClick={this.goToShop.bind(this, this.props.shop)} mode='aspectFit' style='max-height: 100%; max-width: 100%;'src={URL.Base+item.goods_url} />
<Image className='goods-img' onClick={this.goToShop.bind(this, this.props.shop)} mode='aspectFit' style='max-height: 100%; max-width: 100%;' src={URL.Base + item.goods_url} />
</View>
}):null
}) : null
// 优惠卷和咨询元素
const voucherModalElement = <AtModal className='voucher-modal' isOpened={this.state.isOpenVouhcer}>
<AtModalHeader>优惠卷须知：</AtModalHeader>
<AtModalContent>
<AtNoticebar className='warning' icon='volume-plus'>
提示：具体可以前往实体店进行领取优惠卷或通过电话进行咨询
</AtNoticebar>
<View className='voucher-left'>当前优惠卷{voucherLeft}张</View>
<AtInput
disabled
name='value'
title='联系人：'
type='text'
placeholder='123'
/>
<AtInput
disabled
name='value'
title='联系电话：'
type='number'
placeholder='需求标题'
/>
{!this.state.voucherCanConsult ? <View className='voucher-ResponseMsg'>{this.state.voucherResponseMsg}</View> : null}
</AtModalContent>
<AtModalAction> <Button onClick={this.voucherModalClose.bind(this)} >取消</Button> <Button onClick={this.voucherModalConfirm.bind(this)}>确定</Button> </AtModalAction>
</AtModal>
const consultModalElement = <AtModal isOpened={this.state.isOpenConsult}>
<AtModalHeader>咨询</AtModalHeader>
<AtModalContent>
<View className='tip'> <Text>提示:</Text><Text className='tip-info'>{this.state.consultTip}</Text></View>
<AtInput
name='value'
title='联系人：'
type='text'
placeholder='123'
/>
<AtInput
name='value'
title='联系电话：'
type='number'
placeholder='需求标题'
/>
</AtModalContent>
<AtModalAction> <Button onClick={this.consultModalClose.bind(this)} >取消</Button> <Button onClick={this.consultModalConfirm.bind(this)}>确定</Button> </AtModalAction>
</AtModal>
// 请提示元素
const toast = <AtToast
isOpened={this.state.isToast}
text={this.state.consultResponseMsg}
// iconSize={iconSize}
// iconType={iconType}
// iconColor={iconColor}
// isHiddenIcon={isHiddenIcon}
></AtToast>
return (
<View className='shop-list-box' >
{voucherModalElement}
{consultModalElement}
{toast}
<View className='header'>
<View className='title'>
<Image src={ads==0 ? hornIcon :houseIcon} style='width:12px; height:12px; vertical-align: middle;'/>
<Image src={ads !== 0 ? hornIcon : houseIcon} style='width:12px; height:12px; vertical-align: middle;' />
<Text style='margin-left:2px; vertical-align: middle;'> {title}</Text>
</View>
<View className='consult-voucher-button' >
<Button style='padding:0' className={voucherLeft ? 'voucher-button-text voucher' : 'voucher-button-text'} >优惠卷</Button>
<Button style='padding:0' className='consult-button-text'>咨询</Button>
<Button onClick={this.isOpenVoucher.bind(this)} style='padding:0' className={voucherLeft ? 'voucher-button-text voucher' : 'voucher-button-text'} >优惠卷</Button>
<Button onClick={this.isOpenConsult.bind(this)} style='padding:0' className='consult-button-text'>询价</Button>
</View>
</View>
<View className='body'>
<View className='shop-img' onClick={this.goToShop.bind(this, this.props.shop)}>
<Image mode='aspectFit' style=' max-height: 100%; max-width: 100%;' src={imgUrl}/>
<Image mode='aspectFit' style=' max-height: 100%; max-width: 100%;' src={imgUrl} />
</View>
{goods.length !== 1 ? goodsElementsArray:<View className='details'>
<View className='details-block'><Text className='details-text'>商品:</Text> <Text>{ProductName}</Text></View>
{goods.length !== 1 ? <View className='images'>{goodsElementsArray}</View> : <View className='details'>
<View className='details-block'><Text className='details-text'>商品:</Text> {ProductName}</View>
<View className='details-block'><Text className='details-text'>价格: </Text><Text>{price}</Text></View>
</View>}
</View>
<View className='footer'>
<View className='address'>
<AtIcon value='map-pin' size='15' color='#FF7142'></AtIcon>
{address} </View>
{address} </View>
<View className='distance'><Text>{distance}</Text></View>
</View>
</View>
)

62
src/component/filteredShopComponent/filteredShopComponent.scss
View File

@@ -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;

12
src/component/searchBarComponent/searchBarComponent.js
View File

@@ -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 (
<View className='searchBarComponent'>
<View className='searchBar-box'>
<AtSearchBar className='search-button'
actionName='搜索'
@@ -38,6 +43,7 @@ class SearchBarComponent extends Component {
onActionClick={this.onActionClick.bind(this)}
/>
</View>
</View>
)
}

19
src/component/searchBarComponent/searchBarComponent.scss
View File

@@ -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
}
}
}

18
src/component/shopItemComponent/shopItemComponent.js
View File

@@ -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}
</View>
<View className='image-box'>
<Image mode='aspectFit' style=' max-height: 100%; max-width: 100%;' className='img' src={imgURL}/>
<Image mode='aspectFit' style=' max-height: 100%; max-width: 100%;' alt={name} className='img' src={imgURL} onError={this.onError.bind(this)} />
</View>
<View className='price-box'>
<Text class='new-price'>￥{newPrice+' '}</Text>