ShoppingCartHome.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515
  1. import React, { Component } from 'react'
  2. import {
  3. StyleSheet,
  4. View,
  5. StatusBar,
  6. Text,
  7. TouchableOpacity,
  8. PixelRatio,
  9. PanResponder,
  10. Dimensions,
  11. ImageBackground,
  12. ScrollView,
  13. ActivityIndicator,
  14. RefreshControl,
  15. } from 'react-native'
  16. import { connect } from 'react-redux'
  17. import Checkbox from '../../components/checkbox/index'
  18. import Icon from '../../components/Iconfont/Iconfont'
  19. import { NavigationActions, createAction } from '../../utils'
  20. import { ScaleUtil } from '../../utils/utils'
  21. import ShoppingCart from './ShoppingCart'
  22. import EmptyShop from '../../static/images/Empty-shop.png'
  23. import buttonImg from '../../static/images/home-topred.png'
  24. import Toast from 'react-native-root-toast'
  25. const { width, height } = Dimensions.get('window')
  26. @connect(({ theme, shoppingcart }) => ({ ...theme, ...shoppingcart }))
  27. class ShoppingCartHome extends Component {
  28. constructor(props) {
  29. super(props)
  30. this.state = {
  31. damping: 1 - 0.6,
  32. tension: 300,
  33. edited: false,
  34. secectAll: false,
  35. change: false,
  36. Amount: 0,
  37. Loading: false,
  38. }
  39. this._this = []
  40. console.disableYellowBox = true
  41. this.panResponder = PanResponder.create({
  42. onStartShouldSetPanResponderCapture: (evt, gestureState) => {
  43. if (
  44. this &&
  45. this._this &&
  46. this._this[0] &&
  47. this._this[0].interactableElem
  48. ) {
  49. this._this[0].interactableElem.snapTo({ index: 0 })
  50. }
  51. return false
  52. },
  53. })
  54. }
  55. static navigationOptions = ({ navigation, screenProps }) => ({
  56. tabBarOnPress: obj => {
  57. obj.jumpToIndex(obj.scene.index)
  58. navigation.state.params && navigation.state.params.navigatePress()
  59. },
  60. tabBarLabel: ({ tintColor }) => (
  61. <Text
  62. style={{
  63. alignSelf: 'center',
  64. marginBottom: 2,
  65. fontSize: 10,
  66. lineHeight: 14,
  67. letterSpacing: 0.12,
  68. color: tintColor,
  69. }}
  70. >
  71. 购物车
  72. </Text>
  73. ),
  74. tabBarIcon: ({ focused, tintColor }) =>
  75. tintColor == '#333' ? (
  76. <View style={{ paddingTop: 7, paddingRight: 4 }}>
  77. <Icon name="icon-icon-gouwuche" size={28} color={tintColor} />
  78. </View>
  79. ) : (
  80. <View style={{ paddingTop: 7, paddingRight: 4 }}>
  81. <Icon
  82. name="icon-icon-gouwuchexuanzhong"
  83. size={28}
  84. color={tintColor}
  85. />
  86. </View>
  87. ),
  88. })
  89. componentDidMount = () => {
  90. this.props.navigation.setParams({
  91. navigatePress: () => this.getCartList(),
  92. })
  93. this.getCartList()
  94. }
  95. setLoading(bool) {
  96. this.setState({ Loading: bool })
  97. }
  98. getCartList() {
  99. this.props.dispatch(
  100. createAction('shoppingcart/getShoppingList')({
  101. params: {
  102. customer: CUSTOMERINFO.id,
  103. },
  104. })
  105. )
  106. }
  107. onRefresh() {
  108. this.getCartList()
  109. // delay(this.setState({ isRefreshing: false }), 500000);
  110. // this.setState({ headerView: true });
  111. }
  112. // 初始化this._this
  113. initThis() {
  114. this._this = []
  115. }
  116. calAmount(e) {
  117. let newData = JSON.parse(JSON.stringify(e))
  118. let amount = 0
  119. for (val of newData) {
  120. if (val.isChecked) {
  121. for (vasec of val.data) {
  122. amount = vasec.salePrice * vasec.orderNum + amount
  123. }
  124. } else {
  125. for (valsec of val.data) {
  126. if (valsec.isChecked) {
  127. amount = valsec.salePrice * valsec.orderNum + amount
  128. }
  129. }
  130. }
  131. }
  132. this.setState({ Amount: amount })
  133. }
  134. // 删除选中商品
  135. delSelectCart() {
  136. const { ShopList } = this.props
  137. let seletCart = []
  138. ShopList.forEach(e => {
  139. seletCart = seletCart.concat(e.data.filter(i => i.isChecked))
  140. })
  141. console.log(seletCart)
  142. if (seletCart.length > 0) {
  143. this.props.dispatch(
  144. createAction('shoppingcart/deleteShop')({
  145. params: {
  146. customer: CUSTOMERINFO.id,
  147. id: seletCart.map(e => e.id).join(",")
  148. },
  149. })
  150. )
  151. }
  152. }
  153. render() {
  154. const { appTheme, ShopList, TotalNum } = this.props
  155. return (
  156. <View
  157. {...this.panResponder.panHandlers}
  158. style={[
  159. styles.container,
  160. { backgroundColor: appTheme.backgroundColor },
  161. ]}
  162. >
  163. <StatusBar
  164. animated={true}
  165. barStyle={appTheme.barStyle}
  166. // barStyle={"dark-content"}
  167. backgroundColor={'transparent'}
  168. translucent={true}
  169. />
  170. {/* 头部 */}
  171. <View
  172. style={{
  173. height: HEADERSTYLE.height,
  174. paddingTop: HEADERSTYLE.paddingTop + 5,
  175. backgroundColor: '#fff',
  176. }}
  177. >
  178. <View
  179. style={{
  180. flex: 1,
  181. justifyContent: 'center',
  182. }}
  183. >
  184. {this.props.navigation.state.params == 'otherToShop' ? (
  185. <TouchableOpacity
  186. style={{ position: 'absolute', left: 10, paddingTop: 5 }}
  187. onPress={() => this.props.dispatch(NavigationActions.back())}
  188. >
  189. <Icon name="icon-icon-fanhui" size={24} color={'#666'} />
  190. </TouchableOpacity>
  191. ) : null}
  192. <Text
  193. style={{
  194. alignSelf: 'center',
  195. fontSize: 18,
  196. lineHeight: 25,
  197. letterSpacing: 0.22,
  198. color: '#333',
  199. }}
  200. >
  201. 购物车
  202. </Text>
  203. {ShopList && ShopList.length > 0 ? (
  204. <TouchableOpacity
  205. style={{ position: "absolute", right: 10 }}
  206. onPress={() => {
  207. this.setState({
  208. edited: !this.state.edited,
  209. secectAll: false,
  210. change: false
  211. });
  212. this.initThis();
  213. }}
  214. >
  215. <Text
  216. style={{
  217. fontSize: 14,
  218. lineHeight: 20,
  219. letterSpacing: 0.17,
  220. color: "#666"
  221. }}
  222. >
  223. 编辑
  224. </Text>
  225. </TouchableOpacity>
  226. ) : null}
  227. </View>
  228. </View>
  229. {ShopList && ShopList.length > 0 ? (
  230. <ScrollView
  231. style={{ flex: 1 }}
  232. showsHorizontalScrollIndicator={false}
  233. refreshControl={
  234. <RefreshControl
  235. refreshing={this.props.isRefreshing}
  236. onRefresh={this.onRefresh.bind(this)} //(()=>this.onRefresh)或者通过bind来绑定this引用来调用方法
  237. tintColor="red"
  238. title={this.props.isRefreshing ? '刷新中....' : '下拉刷新'}
  239. />
  240. }
  241. >
  242. <ShoppingCart
  243. onRefresh={this.onRefresh.bind(this)}
  244. pressLoading={e => this.setLoading(e)}
  245. ref={mdl => (this.mdl = mdl)}
  246. dispatch={this.props.dispatch}
  247. ShopList={ShopList}
  248. secectAll={this.state.secectAll}
  249. edited={this.state.edited}
  250. change={this.state.change}
  251. totalnum={TotalNum}
  252. secectOnchange={bool => {
  253. this.setState({ secectAll: bool, change: false })
  254. }}
  255. calAmount={e => this.calAmount(e)}
  256. addThis={e => {
  257. let ShopThis = this,
  258. itemData = []
  259. if (ShopThis._this.length == 0) {
  260. ShopThis._this.push(e)
  261. } else {
  262. for (let i in ShopThis._this) {
  263. itemData.push(ShopThis._this[i].state.itemData)
  264. }
  265. if (e && itemData.indexOf(e.state.itemData) == -1) {
  266. ShopThis._this.push(e)
  267. }
  268. }
  269. if (
  270. ShopThis._this.length == 2 &&
  271. ShopThis._this[0].interactableElem
  272. ) {
  273. ShopThis._this[0].interactableElem.snapTo({ index: 0 })
  274. ShopThis._this.splice(0, 1)
  275. }
  276. }}
  277. />
  278. </ScrollView>
  279. ) : (
  280. <ScrollView
  281. style={{ flex: 1 }}
  282. showsHorizontalScrollIndicator={false}
  283. refreshControl={
  284. <RefreshControl
  285. refreshing={this.props.isRefreshing}
  286. onRefresh={this.onRefresh.bind(this)} //(()=>this.onRefresh)或者通过bind来绑定this引用来调用方法
  287. tintColor="red"
  288. title={this.props.isRefreshing ? '刷新中....' : '下拉刷新'}
  289. />
  290. }
  291. >
  292. <ImageBackground
  293. resizeMode="contain"
  294. source={EmptyShop}
  295. style={{
  296. flex: 1,
  297. width: width - 80,
  298. height: height / 1.5,
  299. alignSelf: 'center',
  300. }}
  301. >
  302. <View
  303. style={{
  304. position: 'absolute',
  305. bottom: '15%',
  306. alignSelf: 'center',
  307. }}
  308. >
  309. <Text
  310. style={{
  311. fontSize: 14,
  312. lineHeight: 20,
  313. letterSpacing: 0.17,
  314. color: '#999',
  315. }}
  316. >
  317. 购物车是空的哦~
  318. </Text>
  319. </View>
  320. </ImageBackground>
  321. </ScrollView>
  322. )}
  323. {/* 底部 */}
  324. <View
  325. style={{
  326. height:
  327. this.props.navigation.state.params == 'otherToShop'
  328. ? 45 + HEADERSTYLE.paddingBottom
  329. : 45,
  330. paddingBottom:
  331. this.props.navigation.state.params == 'otherToShop'
  332. ? HEADERSTYLE.paddingBottom
  333. : 0,
  334. backgroundColor: '#fff',
  335. flexDirection: 'row',
  336. borderTopColor: '#EEE',
  337. borderTopWidth: 1 / PixelRatio.get(),
  338. }}
  339. >
  340. <View
  341. style={{
  342. flex: 6,
  343. flexDirection: 'row',
  344. justifyContent: 'space-between',
  345. paddingHorizontal: 10,
  346. }}
  347. >
  348. {this.state.edited ? (
  349. <View style={{ justifyContent: 'center', marginBottom: 5 }}>
  350. <Checkbox
  351. checkBoxColor={'#CCC'}
  352. checked={this.state.secectAll}
  353. size={22}
  354. label={
  355. <Text
  356. style={{
  357. fontSize: 14,
  358. lineHeight: 20,
  359. color: '#333',
  360. }}
  361. >
  362. 全选
  363. </Text>
  364. }
  365. onChange={bool =>
  366. this.setState({
  367. secectAll: bool,
  368. change: true,
  369. })
  370. }
  371. />
  372. </View>
  373. ) : null}
  374. {this.state.edited ? (
  375. <TouchableOpacity style={{ alignSelf: 'center' }}
  376. onPress={
  377. () => {
  378. if (this.toast) {
  379. Toast.hide(this.toast)
  380. }
  381. console.log(ShopList);
  382. if (!this.state.Loading && ShopList && ShopList.length > 0) {
  383. this.delSelectCart()
  384. } else {
  385. this.toast = Toast.show('购物车为空!', {
  386. position: toastHeight,
  387. })
  388. }
  389. }
  390. }
  391. >
  392. <Text
  393. style={{
  394. fontSize: 14,
  395. lineHeight: 20,
  396. color: '#333',
  397. }}
  398. >
  399. 删除选中商品
  400. </Text>
  401. </TouchableOpacity>
  402. ) : (
  403. <Text
  404. style={{
  405. alignSelf: 'center',
  406. fontSize: 14,
  407. lineHeight: 20,
  408. color: '#333',
  409. }}
  410. >
  411. 合计:<Text
  412. style={{
  413. fontSize: 16,
  414. lineHeight: 20,
  415. color: '#E14C46',
  416. }}
  417. >
  418. {CURRENCY.currencySign}
  419. {ScaleUtil(this.state.Amount, CURRENCY.currencyAmountScale)}
  420. </Text>
  421. </Text>
  422. )}
  423. </View>
  424. {this.state.edited ? (
  425. <TouchableOpacity
  426. style={{
  427. flex: 3,
  428. justifyContent: 'center',
  429. }}
  430. >
  431. <Text
  432. style={{
  433. alignSelf: 'center',
  434. fontSize: 14,
  435. lineHeight: 20,
  436. color: '#333',
  437. }}
  438. >
  439. 清空购物车
  440. </Text>
  441. </TouchableOpacity>
  442. ) : (
  443. <TouchableOpacity
  444. activeOpacity={this.state.Loading ? 1 : 0}
  445. onPress={() => {
  446. if (this.toast) {
  447. Toast.hide(this.toast)
  448. }
  449. if (!this.state.Loading && ShopList && ShopList.length > 0) {
  450. console.log(ShopList);
  451. this.mdl._settleTou()
  452. } else {
  453. this.toast = Toast.show('购物车为空!', {
  454. position: toastHeight,
  455. })
  456. }
  457. // ? null
  458. // : ShopList && ShopList.length > 0
  459. // ? this.mdl._settleTou()
  460. // : alert("购物车为空!")
  461. }}
  462. style={{
  463. flex: 3,
  464. backgroundColor:
  465. ShopList && ShopList.length > 0 ? '#E70013' : '#969696',
  466. justifyContent: 'center',
  467. }}
  468. >
  469. {this.state.Loading ? (
  470. <ActivityIndicator />
  471. ) : (
  472. <Text
  473. style={{
  474. alignSelf: 'center',
  475. fontSize: 14,
  476. lineHeight: 20,
  477. color: '#fff',
  478. }}
  479. >
  480. 结算
  481. </Text>
  482. )}
  483. </TouchableOpacity>
  484. )}
  485. </View>
  486. </View>
  487. )
  488. }
  489. }
  490. const styles = StyleSheet.create({
  491. container: {
  492. flex: 1,
  493. },
  494. icon: {
  495. width: 32,
  496. height: 32,
  497. },
  498. })
  499. export default ShoppingCartHome