index.jsx 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. import { Component } from "react";
  2. import { View, Text, Image, Button } from "@tarojs/components";
  3. import { AtIcon } from "taro-ui";
  4. import "./index.less";
  5. import { getMyShopList, getMyShopDetail, getShareShopDetail, getShareShopProductList, getShareJump,bindShareJump } from "../../../service";
  6. import storeManagement from "../../../images/storeManagement/storeManagement.png";
  7. import storeManagementIcon from "../../../images/storeManagement/storeManagementIcon.png";
  8. import ProductCard from "../../../components/ProductCard"; //卡片模块
  9. import Taro from "@tarojs/taro";
  10. export default class Index extends Component {
  11. state = {
  12. isManager: true,
  13. productList: [], //商品列表
  14. shopDetail: {}, //店铺详情
  15. page: 1, //页数
  16. loading: false, //加载状态
  17. totalPages: 1, // 添加总页数
  18. isShare: false, // 是否是分享进入
  19. shopId: '', // 店铺id
  20. };
  21. // 获取店铺详情
  22. getMyShopDetail = async () => {
  23. const res = this.state.isShare ? await getShareShopDetail({
  24. store_id: this.state.shopId
  25. }) : await getMyShopDetail();
  26. this.setState({
  27. shopDetail: res,
  28. });
  29. };
  30. // 获取商品列表
  31. getMyShopList = async (isBack) => {
  32. const { page } = this.state;
  33. this.setState({ loading: true });
  34. const res = this.state.isShare ? await getShareShopProductList({
  35. store_id: this.state.shopId,
  36. page,
  37. page_size: 10,
  38. }) : await getMyShopList({
  39. page,
  40. page_size: 10,
  41. });
  42. this.setState((prevState) => ({
  43. productList: isBack ? res.goods_list : [...prevState.productList, ...res.goods_list],
  44. totalPages: res.total_pages,
  45. loading: false,
  46. }));
  47. };
  48. componentDidShow() {
  49. const { router } = Taro.getCurrentInstance();
  50. const params = router.params;
  51. console.log(params,1111);
  52. this.setState({
  53. isManager: JSON.parse(params.isManager), //是否是店长
  54. isShare: params.isShare||false, // 是否是分享进入
  55. shopId: params.shopId||'', // 店铺id
  56. },()=>{
  57. this.getMyShopDetail(); //获取店铺详情
  58. this.getMyShopList(true); //获取店铺数据
  59. });
  60. }
  61. // 页面上拉触底
  62. onReachBottom = () => {
  63. const { page, totalPages, loading } = this.state;
  64. if (page < totalPages && !loading) {
  65. this.setState(
  66. (prevState) => ({ page: prevState.page + 1 }),
  67. () => this.getMyShopList()
  68. );
  69. }
  70. };
  71. // 更换头像
  72. handleChangeAvatar = () => {
  73. Taro.navigateTo({
  74. url: "/pages/mineSub/infoEdit/index",
  75. });
  76. };
  77. // 配置分享内容
  78. onShareAppMessage() {
  79. return {
  80. title: "店铺",
  81. path: `/pages/memberSub/storeManagement/index?shopId=${this.state.shopDetail.id}&isShare=true&isManager=false&&shareJump=${res.share_unique_value}`,
  82. imageUrl: ''
  83. }
  84. return getShareJump({
  85. share_type:2,
  86. share_id: this.state.shopDetail.id
  87. }).then(res=>{
  88. return {
  89. title: "店铺",
  90. path: `/pages/memberSub/storeManagement/index?shopId=${this.state.shopDetail.id}&isShare=true&isManager=false&&shareJump=${res.share_unique_value}`,
  91. imageUrl: ''
  92. }
  93. })
  94. }
  95. render() {
  96. const { shopDetail, productList } = this.state;
  97. return (
  98. <View className="index">
  99. {/* 头部卡片 */}
  100. <View className="header-card">
  101. <Image className="bg-image" src={storeManagement} mode="widthFix" />
  102. {/* 分享店铺 */}
  103. {!this.state.isShare && (
  104. <View className="share-shop">
  105. <Button onClick={this.handleShare} openType="share">
  106. <Text>分享店铺</Text>
  107. <AtIcon value="chevron-right" size="10" color="#fff"></AtIcon>
  108. </Button>
  109. </View>
  110. )}
  111. {/* 个人信息 */}
  112. <View className="user-info">
  113. <View onClick={this.handleChangeAvatar} className="avatar-wrapper">
  114. <Image
  115. className="avatar"
  116. mode="aspectFill"
  117. src={shopDetail.img_icon}
  118. />
  119. <View className="change-avatar-btn">更换头像</View>
  120. </View>
  121. <View className="info-content">
  122. <Text className="name">{shopDetail.store_name}</Text>
  123. <Text className="desc">{shopDetail.store_intro}</Text>
  124. </View>
  125. </View>
  126. </View>
  127. {/* 商品列表 */}
  128. <View className="product-list">
  129. <View className="product-list-title">
  130. <Text className="title">店长推荐</Text>
  131. <Text className="icon"></Text>
  132. </View>
  133. {productList && (
  134. <View className="product-card-list">
  135. {productList.map((product) => (
  136. <ProductCard key={product.id} product={product} />
  137. ))}
  138. </View>
  139. )}
  140. {/* 底部购买模块 */}
  141. {this.state.isManager && (
  142. <View className="bottom-buy">
  143. {/* <View className="bottom-buy-left">
  144. <Image src={storeManagementIcon} mode="aspectFit" />
  145. <Text className="bottom-buy-text">浏览店铺</Text>
  146. </View> */}
  147. <View className="bottom-buy-right">
  148. {/* <View className="bottom-buy-right-self">
  149. <Text className="bottom-buy-text">店铺模版</Text>
  150. </View> */}
  151. <View
  152. onClick={() =>
  153. Taro.navigateTo({
  154. url: "/pages/memberSub/productManagement/index",
  155. })
  156. }
  157. className="bottom-buy-right-share"
  158. >
  159. <Text className="bottom-buy-text">商品管理</Text>
  160. </View>
  161. </View>
  162. </View>
  163. )}
  164. </View>
  165. </View>
  166. );
  167. }
  168. }