my-shop.vue 30 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051
  1. <template>
  2. <view class="container shop clearfix" :style="{ paddingTop: CustomBar + 'px' }">
  3. <custom
  4. :systeminfo="systeminfo"
  5. :navbar-data="nvabarData"
  6. :headerBtnPosi="headerBtnPosi"
  7. :headerColor="headerColor"
  8. :page="backPage"
  9. >
  10. </custom>
  11. <!-- 主页内容 -->
  12. <tui-skeleton
  13. v-if="skeletonShow"
  14. backgroundColor="#fafafa"
  15. borderRadius="10rpx"
  16. :isLoading="true"
  17. :loadingType="5"
  18. ></tui-skeleton>
  19. <template v-else>
  20. <view class="shop-search-main">
  21. <view class="shop-search">
  22. <text class="iconfont icon-sousuo"></text>
  23. <input
  24. class="input"
  25. maxlength="20"
  26. type="text"
  27. value=""
  28. @focus="onFocus"
  29. @input="onShowClose"
  30. v-model.trim="listQuery.keyword"
  31. confirm-type="search"
  32. @confirm="SubMitSearch()"
  33. placeholder="搜索本店铺商品"
  34. />
  35. <text class="iconfont icon-shanchu1" v-if="isShowClose" @click.stop="delInputText()"></text>
  36. </view>
  37. </view>
  38. <view class="container-shop tui-skeleton">
  39. <!-- 轮播 -->
  40. <view class="product-supplier" @click="goSupplier">
  41. <view class="logo"
  42. ><img
  43. :src="shopLogo ? shopLogo : 'https://static.caimei365.com/app/img/icon/icon-shoplogo.png'"
  44. alt=""
  45. /></view>
  46. <view class="main">
  47. <view class="name">{{ shopName }}</view>
  48. <view class="massgs">
  49. <view class="label">满意度:</view>
  50. <view class="p-stars">
  51. <uni-stars
  52. :stars="6"
  53. :iconClass="iconClass"
  54. :iconColor="iconColor"
  55. :fontSize="36"
  56. :widthInfo="176"
  57. ></uni-stars>
  58. </view>
  59. <!-- <view class="acount">
  60. <text> {{ normalNum }} </text>件商品
  61. </view> -->
  62. </view>
  63. </view>
  64. <view class="right"><text class="iconfont icon-xiayibu"></text></view>
  65. </view>
  66. <banner :list="bannerImageList"></banner>
  67. </view>
  68. <view class="container-section tui-skeleton" v-if="recommendList.length>0">
  69. <view class="tab-title">主推商品</view>
  70. <view class="section-product clearfix">
  71. <view class="floor-item-none" v-if="isHomeProduct">
  72. <image class="none-image" :src="iconNoneData" mode=""></image>
  73. <view class="none-text">暂无主推商品~</view>
  74. </view>
  75. <view
  76. v-else
  77. class="floor-item"
  78. v-for="(prop, index) in recommendList"
  79. :key="index"
  80. @click.stop="navToDetailPage(prop.productId)"
  81. >
  82. <image class="item-img tui-skeleton-fillet" :src="prop.image" mode="aspectFill"></image>
  83. <view class="floor-item-type" v-if="prop.productType == 2">医疗器械</view>
  84. <view class="floor-item-content">
  85. <view class="title tui-skeleton-rect">
  86. <text class="mclap-tag" v-if="prop.beautyActFlag == 1">美博会</text>
  87. <text class="mclap" :class="prop.beautyActFlag == 1 ? 'indent' : ''">{{
  88. prop.name
  89. }}</text>
  90. </view>
  91. <view class="floor-item-act">
  92. <template v-if="userIdentity === 3">
  93. <view class="coupon-tags" v-if="prop.couponsLogo">优惠券</view>
  94. <template v-if="prop.actStatus === 1">
  95. <view class="floor-tags" v-if="PromotionsFormat(prop.promotions)">
  96. {{ prop.promotions.name }}
  97. <text v-if="hasLogin && prop.priceFlag != 1 && prop.shopId == shopId"
  98. >:¥{{ prop.price | NumFormat }}</text
  99. >
  100. </view>
  101. <view class="floor-tags" v-else>{{ prop.promotions.name }}</view>
  102. </template>
  103. <template v-if="prop.svipProductFlag == 1">
  104. <template v-if="prop.priceFlag != 1">
  105. <view class="svip-tags">
  106. <view class="tags">SVIP</view>
  107. <view class="price" v-if="prop.shopId == shopId">{{
  108. prop.svipPriceTag
  109. }}</view>
  110. </view>
  111. </template>
  112. <template v-else>
  113. <view class="svip-tags"> <view class="tags none">SVIP</view> </view>
  114. </template>
  115. </template>
  116. </template>
  117. <template v-else>
  118. <view class="coupon-tags" v-if="prop.couponsLogo">优惠券</view>
  119. <template v-if="prop.actStatus === 1">
  120. <view class="floor-tags" v-if="PromotionsFormat(prop.promotions)">
  121. {{ prop.promotions.name }}
  122. <text v-if="hasLogin && prop.priceFlag != 1"
  123. >:¥{{ prop.price | NumFormat }}</text
  124. >
  125. </view>
  126. <view class="floor-tags" v-else>{{ prop.promotions.name }}</view>
  127. </template>
  128. <template v-if="prop.svipProductFlag == 1">
  129. <view class="svip-tags">
  130. <view class="tags" :class="{ none: !isShowVipFlag(prop) }">SVIP</view>
  131. <view class="price" v-if="isShowVipFlag(prop)">{{
  132. prop.svipPriceTag
  133. }}</view>
  134. </view>
  135. </template>
  136. </template>
  137. </view>
  138. <view class="" v-if="hasLogin">
  139. <template v-if="userIdentity == 3">
  140. <template v-if="prop.shopId == shopId">
  141. <view class="title-none" v-if="prop.priceFlag === 1">
  142. <text class="p big">¥未公开价格</text>
  143. </view>
  144. <view
  145. class="price tui-skeleton-rect"
  146. v-else
  147. :class="PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? 'none' : ''"
  148. >
  149. <text class="p sm">¥</text>
  150. <text class="p big">{{
  151. (PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? prop.originalPrice : prop.price)
  152. | NumFormat
  153. }}</text>
  154. </view>
  155. </template>
  156. <template v-else>
  157. <view class="no-price">
  158. <view class="p-stars">
  159. <text class="p-no">¥</text>
  160. <uni-grader :grade="Number(prop.priceGrade)" :margin="14"></uni-grader>
  161. </view>
  162. </view>
  163. </template>
  164. </template>
  165. <template v-else-if="userIdentity === 4 && vipFlag !=1">
  166. <view class="title-none" v-if="prop.priceFlag === 1">
  167. <text class="p big">¥未公开价格</text>
  168. </view>
  169. <view class="title-none" v-else-if="prop.priceFlag === 2">
  170. <text class="p big">¥价格仅会员可见</text>
  171. </view>
  172. <view class="title-none" v-else-if="prop.priceFlag === 3">
  173. <text class="p big">¥仅医美机构可见</text>
  174. </view>
  175. <view
  176. class="price tui-skeleton-rect"
  177. v-if="prop.priceFlag === 0"
  178. :class="PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? 'none' : ''"
  179. >
  180. <text class="p sm">¥</text>
  181. <text class="p big">{{
  182. (PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? prop.originalPrice : prop.price)
  183. | NumFormat
  184. }}</text>
  185. </view>
  186. </template>
  187. <template v-else-if="userIdentity === 2 || (userIdentity == 4 && vipFlag == 1)">
  188. <view class="title-none" v-if="prop.priceFlag === 1">
  189. <text class="p big">¥未公开价格</text>
  190. </view>
  191. <view class="title-none" v-else-if="prop.priceFlag === 3 && (firstClubType!=1)">
  192. <text class="p big">¥仅医美机构可见</text>
  193. </view>
  194. <view
  195. class="price tui-skeleton-rect"
  196. v-else
  197. :class="PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? 'none' : ''"
  198. >
  199. <text class="p sm">¥</text>
  200. <text class="p big">{{
  201. (PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? prop.originalPrice : prop.price)
  202. | NumFormat
  203. }}</text>
  204. </view>
  205. </template>
  206. <template v-else>
  207. <view class="title-none" v-if="prop.priceFlag === 1">
  208. <text class="p big">¥未公开价格</text>
  209. </view>
  210. <view
  211. class="price tui-skeleton-rect"
  212. v-else
  213. :class="PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? 'none' : ''"
  214. >
  215. <text class="p sm">¥</text>
  216. <text class="p big">{{
  217. (PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? prop.originalPrice : prop.price)
  218. | NumFormat
  219. }}</text>
  220. </view>
  221. </template>
  222. </view>
  223. <view v-else class="no-price">
  224. <view class="p-stars">
  225. <text class="p-no">¥</text>
  226. <uni-grader :grade="Number(prop.priceGrade)"></uni-grader>
  227. <template v-if="prop.actStatus == 1">
  228. <view class="floor-tags" v-if="PromotionsFormat(prop.promotions)">
  229. {{ prop.promotions.name
  230. }}<text v-if="hasLogin && prop.priceFlag != 1"
  231. >:¥{{ prop.price | NumFormat }}</text
  232. >
  233. </view>
  234. <view class="floor-tags" v-else>{{ prop.promotions.name }}</view>
  235. </template>
  236. </view>
  237. </view>
  238. </view>
  239. </view>
  240. </view>
  241. </view>
  242. <view class="container-section tui-skeleton">
  243. <view class="tab-title" v-if="!isEmpty">全部商品</view>
  244. <view class="section-product clearfix">
  245. <view class="floor-item-none" v-if="isEmpty">
  246. <image class="none-image" :src="iconNoneData1" mode=""></image>
  247. <view class="none-text">暂未发布任何商品~</view>
  248. </view>
  249. <view
  250. v-else
  251. class="floor-item"
  252. v-for="(prop, index) in productList"
  253. :key="index"
  254. @click.stop="navToDetailPage(prop.productId)"
  255. >
  256. <image class="item-img tui-skeleton-fillet" :src="prop.image" mode="aspectFill"></image>
  257. <view class="floor-item-type" v-if="prop.productType == 2">医疗器械</view>
  258. <view class="floor-item-content">
  259. <view class="title tui-skeleton-rect">
  260. <text class="mclap-tag" v-if="prop.beautyActFlag == 1">美博会</text>
  261. <text class="mclap" :class="prop.beautyActFlag == 1 ? 'indent' : ''">{{
  262. isInterceptHtmlFn(prop.name)
  263. }}</text>
  264. </view>
  265. <view class="floor-item-act">
  266. <template v-if="userIdentity === 3">
  267. <view class="coupon-tags" v-if="prop.couponsLogo">优惠券</view>
  268. <template v-if="prop.actStatus === 1">
  269. <view class="floor-tags" v-if="PromotionsFormat(prop.promotions)">
  270. {{ prop.promotions.name }}
  271. <text v-if="hasLogin && prop.priceFlag != 1 && prop.shopId == shopId"
  272. >:¥{{ prop.price | NumFormat }}</text
  273. >
  274. </view>
  275. <view class="floor-tags" v-else>{{ prop.promotions.name }}</view>
  276. </template>
  277. <template v-if="prop.svipProductFlag == 1">
  278. <template v-if="prop.priceFlag != 1">
  279. <view class="svip-tags">
  280. <view class="tags">SVIP</view>
  281. <view class="price" v-if="prop.shopId == shopId">{{
  282. prop.svipPriceTag
  283. }}</view>
  284. </view>
  285. </template>
  286. <template v-else>
  287. <view class="svip-tags"> <view class="tags none">SVIP</view> </view>
  288. </template>
  289. </template>
  290. </template>
  291. <template v-else>
  292. <view class="coupon-tags" v-if="prop.couponsLogo">优惠券</view>
  293. <template v-if="prop.actStatus === 1">
  294. <view class="floor-tags" v-if="PromotionsFormat(prop.promotions)">
  295. {{ prop.promotions.name }}
  296. <text v-if="hasLogin && prop.priceFlag != 1"
  297. >:¥{{ prop.price | NumFormat }}</text
  298. >
  299. </view>
  300. <view class="floor-tags" v-else>{{ prop.promotions.name }}</view>
  301. </template>
  302. <template v-if="prop.svipProductFlag == 1">
  303. <view class="svip-tags">
  304. <view class="tags" :class="{ none: !isShowVipFlag(prop) }">SVIP</view>
  305. <view class="price" v-if="isShowVipFlag(prop)">{{
  306. prop.svipPriceTag
  307. }}</view>
  308. </view>
  309. </template>
  310. </template>
  311. </view>
  312. <view class="" v-if="hasLogin">
  313. <template v-if="userIdentity == 3">
  314. <template v-if="prop.shopId == shopId">
  315. <view class="title-none" v-if="prop.priceFlag === 1">
  316. <text class="p big">¥未公开价格</text>
  317. </view>
  318. <view
  319. class="price tui-skeleton-rect"
  320. v-else
  321. :class="PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? 'none' : ''"
  322. >
  323. <text class="p sm">¥</text>
  324. <text class="p big">{{
  325. (PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? prop.originalPrice : prop.price)
  326. | NumFormat
  327. }}</text>
  328. </view>
  329. </template>
  330. <template v-else>
  331. <view class="no-price">
  332. <view class="p-stars">
  333. <text class="p-no">¥</text>
  334. <uni-grader :grade="Number(prop.priceGrade)" :margin="14"></uni-grader>
  335. </view>
  336. </view>
  337. </template>
  338. </template>
  339. <template v-else-if="userIdentity === 4 && vipFlag != 1">
  340. <view class="title-none" v-if="prop.priceFlag === 1">
  341. <text class="p big">¥未公开价格</text>
  342. </view>
  343. <view class="title-none" v-else-if="prop.priceFlag === 2">
  344. <text class="p big">¥价格仅会员可见</text>
  345. </view>
  346. <view class="title-none" v-else-if="prop.priceFlag === 3">
  347. <text class="p big">¥仅医美机构可见</text>
  348. </view>
  349. <view
  350. class="price tui-skeleton-rect"
  351. v-if="prop.priceFlag === 0"
  352. :class="PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? 'none' : ''"
  353. >
  354. <text class="p sm">¥</text>
  355. <text class="p big">{{
  356. (PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? prop.originalPrice : prop.price)
  357. | NumFormat
  358. }}</text>
  359. </view>
  360. </template>
  361. <template v-else-if="userIdentity === 2 || (userIdentity == 4 && vipFlag == 1)">
  362. <view class="title-none" v-if="prop.priceFlag === 1">
  363. <text class="p big">¥未公开价格</text>
  364. </view>
  365. <view class="title-none" v-else-if="prop.priceFlag === 3 && (firstClubType!=1)">
  366. <text class="p big">¥仅医美机构可见</text>
  367. </view>
  368. <view
  369. class="price tui-skeleton-rect"
  370. v-else
  371. :class="PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? 'none' : ''"
  372. >
  373. <text class="p sm">¥</text>
  374. <text class="p big">{{
  375. (PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? prop.originalPrice : prop.price)
  376. | NumFormat
  377. }}</text>
  378. </view>
  379. </template>
  380. <template v-else>
  381. <view class="title-none" v-if="prop.priceFlag === 1">
  382. <text class="p big">¥未公开价格</text>
  383. </view>
  384. <view
  385. class="price tui-skeleton-rect"
  386. v-else
  387. :class="PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? 'none' : ''"
  388. >
  389. <text class="p sm">¥</text>
  390. <text class="p big">{{
  391. (PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? prop.originalPrice : prop.price)
  392. | NumFormat
  393. }}</text>
  394. </view>
  395. </template>
  396. </view>
  397. <view v-else class="no-price">
  398. <view class="p-stars">
  399. <text class="p-no">¥</text>
  400. <uni-grader :grade="Number(prop.priceGrade)"></uni-grader>
  401. </view>
  402. </view>
  403. </view>
  404. </view>
  405. </view>
  406. </view>
  407. </template>
  408. <!-- 侧边 -->
  409. <scroll-top :isScrollTop="isScrollTop" :bottom="200"></scroll-top>
  410. </view>
  411. </template>
  412. <script>
  413. import { mapState, mapMutations } from 'vuex'
  414. import custom from './components/custom.vue' //自定义导航
  415. import banner from '../components/banner.vue'
  416. import uniGrader from '@/components/uni-grade/uni-grade.vue'
  417. import authorize from '@/common/config/authorize.js'
  418. import wxLogin from '@/common/config/wxLogin.js'
  419. export default {
  420. components: {
  421. custom,
  422. banner,
  423. uniGrader
  424. },
  425. data() {
  426. return {
  427. CustomBar:this.CustomBar,
  428. headerBtnPosi: this.setHeaderBtnPosi(), // 获取设备顶部胶囊高度
  429. systeminfo: this.setSysteminfo(), // 获取设备信息
  430. headerColor: false,
  431. backPage: 1,
  432. userId: 0,
  433. supplierId: 0,
  434. shopId: 0,
  435. iconClass: 'icon-aixin',
  436. iconColor: '#ff9100',
  437. iconNoneData: 'https://static.caimei365.com/app/img/icon/icon-prnone.png',
  438. iconNoneData1: 'https://static.caimei365.com/app/img/icon/icon-pbnone.png',
  439. isScrollTop: false,
  440. shopName: '',
  441. shopLogo: '',
  442. normalNum: 0,
  443. isFocus: false,
  444. isEmpty: false,
  445. isShowClose: false, //是否显示清空输入框图标
  446. skeletonShow: true,
  447. bannerImageList: [],
  448. recommendList: [],
  449. productList: [],
  450. userIdentity: 0,
  451. firstClubType:0,
  452. listQuery: {
  453. keyword: '',
  454. pageSize: 10,
  455. pageNum: 1,
  456. id: 0,
  457. identity:0
  458. },
  459. isHomeProduct: false,
  460. total: 0
  461. }
  462. },
  463. computed: {
  464. ...mapState(['hasLogin', 'userInfo', 'isActivity', 'identity', 'clubType'])
  465. },
  466. onLoad(option) {
  467. if (option.type == 'share') {
  468. wxLogin.wxLoginAuthorize()
  469. }
  470. this.listQuery.id = this.supplierId = option.shopId
  471. this.initGetStotage()
  472. },
  473. filters: {
  474. NumFormat: function(text) {
  475. //处理金额
  476. return Number(text).toFixed(2)
  477. }
  478. },
  479. methods: {
  480. ...mapMutations(['login', 'logout']),
  481. setHeaderBtnPosi() {
  482. // 获得胶囊按钮位置信息
  483. let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
  484. return headerBtnPosi
  485. },
  486. setSysteminfo() {
  487. let systeminfo
  488. uni.getSystemInfo({
  489. // 获取设备信息
  490. success: res => {
  491. systeminfo = res
  492. }
  493. })
  494. return systeminfo
  495. },
  496. async initGetStotage(option) {
  497. const userInfo = await this.$api.getStorage()
  498. this.shopId = userInfo.shopId ? userInfo.shopId : 0
  499. this.userId = userInfo.userId ? userInfo.userId : 0
  500. this.listQuery.identity = this.identity
  501. this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
  502. this.vipFlag = userInfo.vipFlag ? userInfo.vipFlag : 0
  503. this.firstClubType = this.clubType
  504. //初始化请求数据
  505. this.GetSupplierHomeBanner()
  506. this.GetSupplierHomeDeatils()
  507. this.GetSupplierHomeProduct()
  508. this.GetSupplierHomeProductList()
  509. this.skeletonShow = false
  510. },
  511. GetSupplierHomeBanner() {
  512. //轮播图
  513. this.ShopService.GetSupplierHomeBanner({ shopId: this.supplierId })
  514. .then(response => {
  515. this.bannerImageList = response.data
  516. })
  517. .catch(error => {
  518. this.$util.msg(error.msg, 2000)
  519. })
  520. },
  521. GetSupplierHomeDeatils() {
  522. //商铺详情
  523. this.ShopService.GetSupplierHomeDeatils({ shopId: this.supplierId })
  524. .then(response => {
  525. let data = response.data
  526. this.normalNum = data.normalNum
  527. this.shopName = data.name
  528. this.shopLogo = data.logo
  529. })
  530. .catch(error => {
  531. this.$util.msg(error.msg, 2000)
  532. })
  533. },
  534. GetSupplierHomeProduct() {
  535. //主推商品
  536. this.ShopService.GetSupplierHomeProduct({ shopId: this.supplierId, identity: this.identity })
  537. .then(response => {
  538. let data = response.data
  539. console.log('主推商品', data)
  540. if (data.length > 0) {
  541. this.isHomeProduct = false
  542. this.QueryProductPrice(data)
  543. } else {
  544. this.isHomeProduct = true
  545. }
  546. })
  547. .catch(error => {
  548. this.$util.msg(error.msg, 2000)
  549. })
  550. },
  551. GetSupplierHomeProductList() {
  552. //全部商品
  553. this.ShopService.GetSupplierHomeProductList(this.listQuery)
  554. .then(response => {
  555. let data = JSON.parse(response.data)
  556. console.log('全部商品', data)
  557. let dataList = data.items
  558. this.total = data.total
  559. if (this.total > 0) {
  560. this.isEmpty = false
  561. this.productList = dataList
  562. this.QueryProductPrice1(this.productList)
  563. } else {
  564. this.isEmpty = true
  565. }
  566. })
  567. .catch(error => {
  568. this.$util.msg(error.msg, 2000)
  569. })
  570. },
  571. GetMoreSupplierHomeProductList() {
  572. //加载分页
  573. this.listQuery.pageNum += 1
  574. this.ShopService.GetSupplierHomeProductList(this.listQuery)
  575. .then(response => {
  576. let data = JSON.parse(response.data)
  577. this.total = data.total
  578. this.productList = this.productList.concat(data.items)
  579. this.QueryProductPrice1(this.productList)
  580. })
  581. .catch(error => {
  582. this.$util.msg(error.msg, 2000)
  583. })
  584. },
  585. QueryProductPrice(data) {
  586. //处理主推商品商品或者活动价格
  587. let productIdArr = []
  588. let productIds = ''
  589. data.map(item => {
  590. // 0公开价格 1不公开价格 2仅对资质机构公开
  591. productIdArr.push(item.productId)
  592. })
  593. productIds = productIdArr.join(',')
  594. this.ProductService.querySearchProductPrice({
  595. userId: this.userId,
  596. productIds: productIds,
  597. source: 2
  598. })
  599. .then(response => {
  600. this.recommendList = this.ReturnNewProducts(data, response.data)
  601. })
  602. .catch(error => {
  603. this.$util.msg(error.msg, 2000)
  604. })
  605. },
  606. QueryProductPrice1(data) {
  607. //获取商品或者活动价格
  608. let productIdArr = []
  609. let productIds = ''
  610. data.map(item => {
  611. // 0公开价格 1不公开价格 2仅对资质机构公开
  612. productIdArr.push(item.productId)
  613. })
  614. productIds = productIdArr.join(',')
  615. this.ProductService.querySearchProductPrice({
  616. userId: this.userId,
  617. productIds: productIds,
  618. source: 2
  619. })
  620. .then(response => {
  621. this.productList = this.ReturnNewProducts(data, response.data)
  622. })
  623. .catch(error => {
  624. this.$util.msg(error.msg, 2000)
  625. })
  626. },
  627. ReturnNewProducts(listA, listB) {
  628. let NewArray = []
  629. listA.map(item => {
  630. for (let i = 0; i < listB.length; i++) {
  631. if (item.productId == listB[i].productId) {
  632. NewArray.push(Object.assign(item, listB[i]))
  633. }
  634. }
  635. })
  636. return NewArray
  637. },
  638. SubMitSearch() {
  639. //搜索
  640. this.listQuery.pageNum = 1
  641. this.GetSupplierHomeProductList()
  642. },
  643. PromotionsFormat(promo) {
  644. //促销活动类型数据处理
  645. if (promo != null) {
  646. if (promo.type == 1 && promo.mode == 1) {
  647. return true
  648. } else {
  649. return false
  650. }
  651. }
  652. return false
  653. },
  654. onShowClose() {
  655. //输入框输入时触发
  656. this.inputEmpty(this.listQuery.keyword)
  657. },
  658. onFocus() {
  659. //输入框获取焦点时触发
  660. this.inputEmpty(this.listQuery.keyword)
  661. },
  662. delInputText() {
  663. //清除输入框内容
  664. this.listQuery.keyword = ''
  665. this.isShowClose = false
  666. this.isShowWrapper = false
  667. this.inputEmpty(this.listQuery.keyword)
  668. this.initGetSerachRecord()
  669. },
  670. inputEmpty(val) {
  671. if (val != '') {
  672. this.isShowClose = true
  673. this.isFocus = true
  674. } else {
  675. this.isShowClose = false
  676. this.isFocus = true
  677. }
  678. },
  679. isInterceptHtmlFn(text) {
  680. let name = this.$reg.interceptHtmlFn(text)
  681. return name
  682. },
  683. goSupplier() {
  684. //跳供应商资料页
  685. this.$api.navigateTo('/pages/supplier/user/supplier?shopId=' + this.supplierId)
  686. },
  687. navToDetailPage(id) {
  688. //跳转商品详情页
  689. this.$api.navigateTo(`/pages/goods/product?id=${id}`)
  690. },
  691. isShowVipFlag(pros) {
  692. /**
  693. *显示SVIP和超级会员价格:
  694. * 个人机构(不是超级会员,但价格所有机构可见),
  695. * 资质机构(不是超级会员,但价格所有机构可见或仅会员可见),
  696. * 超级会员(价格所有机构可见或仅会员可见),超级会员(是医美机构,价格仅医美可见)
  697. *商品价格是否可见:priceFlag 0:所有机构可见 1:未公开价格 2:仅会员可见 3:仅医美机构可见
  698. * 普通机构
  699. * 超级会员 && priceFlag === 0
  700. * 资质机构
  701. * priceFlag !== 1 ||
  702. * 超级会员
  703. * 商品priceFlag === 3 && 是否是医美机构
  704. */
  705. // 未登录 || 非会员
  706. if(!this.hasLogin || !this.vipFlag === 1) return false
  707. // 商品所有机构可见
  708. if(pros.priceFlag === 0 ) return true
  709. // 商品价格仅资质机构可见
  710. if((pros.priceFlag === 2 && this.userIdentity === 2) || this.userIdentity === 1) return true
  711. // 商品价格仅医美机构可见
  712. if((pros.priceFlag === 3 && this.userIdentity === 2 && this.firstClubType == 1) || this.userIdentity === 1) return true
  713. // 其它
  714. return false
  715. },
  716. },
  717. onPageScroll(e) {
  718. //实时获取到滚动的值
  719. if (e.scrollTop > 400) {
  720. this.isScrollTop = true
  721. } else {
  722. this.isScrollTop = false
  723. }
  724. },
  725. onReachBottom() {
  726. //上滑加载分页
  727. if (this.total > this.productList.length) {
  728. this.loadding = true
  729. this.pullUpOn = true
  730. this.GetMoreSupplierHomeProductList()
  731. }
  732. },
  733. onShareAppMessage(res) {
  734. //分享转发
  735. if (res.from === 'button') {
  736. // 来自页面内转发按钮
  737. }
  738. return {
  739. title: '进入店铺,发现惊喜',
  740. path: `pages/supplier/user/my-shop?type=share&shopId=${this.listQuery.id}`
  741. }
  742. },
  743. onShow() {}
  744. }
  745. </script>
  746. <style lang="scss">
  747. page {
  748. background-color: #f7f7f7;
  749. }
  750. .shop {
  751. width: 100%;
  752. height: auto;
  753. }
  754. .shop-search-main {
  755. width: 100%;
  756. height: 86rpx;
  757. background-color: #ffffff;
  758. box-sizing: border-box;
  759. padding: 10rpx 24rpx;
  760. .shop-search {
  761. width: 100%;
  762. height: 66rpx;
  763. border-radius: 33rpx;
  764. background-color: #f7f7f7;
  765. box-sizing: border-box;
  766. position: relative;
  767. .icon-sousuo {
  768. width: 80rpx;
  769. height: 66rpx;
  770. display: block;
  771. float: left;
  772. color: #707070;
  773. line-height: 66rpx;
  774. text-align: center;
  775. font-size: 36rpx;
  776. }
  777. .icon-shanchu1 {
  778. width: 80rpx;
  779. height: 66rpx;
  780. display: block;
  781. color: #8a8a8a;
  782. line-height: 66rpx;
  783. text-align: center;
  784. font-size: 36rpx;
  785. position: absolute;
  786. right: 0;
  787. top: 0;
  788. z-index: 100;
  789. }
  790. .input {
  791. width: 580rpx;
  792. height: 66rpx;
  793. box-sizing: border-box;
  794. color: #666666;
  795. overflow: hidden;
  796. font-size: $font-size-24;
  797. }
  798. }
  799. }
  800. .container-shop {
  801. width: 100%;
  802. height: auto;
  803. padding: 24rpx;
  804. box-sizing: border-box;
  805. background-color: #ffffff;
  806. margin-top: 10rpx;
  807. }
  808. .product-supplier {
  809. width: 100%;
  810. height: 140rpx;
  811. padding: 30rpx 0 10rpx 0;
  812. box-sizing: border-box;
  813. background-color: #ffffff;
  814. position: relative;
  815. box-sizing: border-box;
  816. .logo {
  817. width: 128rpx;
  818. height: 92rpx;
  819. float: left;
  820. border: 1px solid #efefef;
  821. border-radius: 6rpx;
  822. image {
  823. width: 100%;
  824. height: 100%;
  825. display: block;
  826. border-radius: 6rpx;
  827. }
  828. }
  829. .main {
  830. width: 470rpx;
  831. height: 92rpx;
  832. float: left;
  833. margin-left: 20rpx;
  834. .name {
  835. width: 100%;
  836. line-height: 46rpx;
  837. float: left;
  838. font-size: $font-size-28;
  839. color: $text-color;
  840. float: right;
  841. overflow: hidden;
  842. text-overflow: ellipsis;
  843. white-space: nowrap;
  844. text-align: left;
  845. }
  846. .massgs {
  847. width: 100%;
  848. line-height: 46rpx;
  849. float: left;
  850. font-size: $font-size-24;
  851. color: #999999;
  852. .label {
  853. float: left;
  854. }
  855. .p-stars {
  856. float: left;
  857. margin-left: 20rpx;
  858. }
  859. .acount {
  860. float: right;
  861. text {
  862. color: $color-system;
  863. }
  864. }
  865. }
  866. }
  867. .icon-xiayibu {
  868. line-height: 154rpx;
  869. display: inline-block;
  870. position: absolute;
  871. width: 48rpx;
  872. top: 0;
  873. right: 0;
  874. color: #b2b2b2;
  875. }
  876. }
  877. .container-section {
  878. width: 100%;
  879. height: auto;
  880. background-color: #f7f7f7;
  881. box-sizing: border-box;
  882. padding: 0 24rpx;
  883. .tab-title {
  884. width: 100%;
  885. height: 88rpx;
  886. line-height: 88rpx;
  887. font-size: $font-size-30;
  888. font-weight: bold;
  889. }
  890. .section-product {
  891. width: 100%;
  892. height: auto;
  893. .floor-item-none {
  894. min-height: 300rpx;
  895. display: flex;
  896. flex-direction: column;
  897. align-items: center;
  898. .none-image {
  899. width: 260rpx;
  900. height: 260rpx;
  901. }
  902. .none-text {
  903. text-align: center;
  904. font-size: $font-size-28;
  905. color: #999999;
  906. line-height: 40rpx;
  907. }
  908. }
  909. .floor-item {
  910. width: 341rpx;
  911. height: auto;
  912. margin-right: 20rpx;
  913. font-size: $font-size-24;
  914. color: $text-color;
  915. background: #ffffff;
  916. line-height: 36rpx;
  917. border-radius: 20rpx;
  918. margin-bottom: 20rpx;
  919. float: left;
  920. box-sizing: border-box;
  921. padding-bottom: 10rpx;
  922. position: relative;
  923. &:nth-child(2n) {
  924. margin-right: 0;
  925. }
  926. .floor-item-type{
  927. width: 64rpx;
  928. height: 64rpx;
  929. text-align: justify;
  930. box-sizing: border-box;
  931. padding: 10rpx;
  932. border-radius: 0 0 8rpx 8rpx;
  933. background-color: #33CCBF;
  934. font-size: $font-size-22;
  935. color: #FFFFFF;
  936. line-height: 25rpx;
  937. position: absolute;
  938. top: 0;
  939. right: 16rpx;
  940. }
  941. .item-img {
  942. width: 341rpx;
  943. height: 341rpx;
  944. border-radius: 20rpx 20rpx 0 0;
  945. display: block;
  946. margin-bottom: 20rpx;
  947. }
  948. .floor-item-content {
  949. width: 311rpx;
  950. padding: 0 15rpx;
  951. }
  952. .floor-item-act {
  953. display: block;
  954. width: 100%;
  955. height: 68rpx;
  956. text-align: center;
  957. box-sizing: border-box;
  958. padding: 16rpx 0;
  959. margin-top: 8rpx;
  960. }
  961. .title-none {
  962. font-size: $font-size-26;
  963. color: #ff2a2a;
  964. line-height: 54rpx;
  965. .btn {
  966. display: inline-block;
  967. float: right;
  968. width: 112rpx;
  969. height: 44rpx;
  970. background: $btn-confirm;
  971. line-height: 44rpx;
  972. font-size: $font-size-24;
  973. color: #ffffff;
  974. text-align: center;
  975. border-radius: 22rpx;
  976. margin-top: 17rpx;
  977. }
  978. }
  979. .title {
  980. width: 100%;
  981. height: 72rpx;
  982. display: flex;
  983. flex-direction: column;
  984. margin-bottom: 15rpx;
  985. padding: 0;
  986. position: relative;
  987. .mclap {
  988. width: 100%;
  989. line-height: 40rpx;
  990. text-overflow: ellipsis;
  991. display: -webkit-box;
  992. word-break: break-all;
  993. -webkit-box-orient: vertical;
  994. -webkit-line-clamp: 2;
  995. overflow: hidden;
  996. font-size: 26rpx;
  997. &.indent {
  998. text-indent: 95rpx;
  999. }
  1000. }
  1001. .mclap-tag {
  1002. display: block;
  1003. width: 84rpx;
  1004. height: 32rpx;
  1005. background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
  1006. border-radius: 4rpx 48rpx 4px 4px;
  1007. line-height: 32rpx;
  1008. font-size: $font-size-22;
  1009. color: #ffffff;
  1010. text-align: center;
  1011. position: absolute;
  1012. left: 0;
  1013. top: 0;
  1014. }
  1015. }
  1016. .no-price {
  1017. height: 54rpx;
  1018. line-height: 54rpx;
  1019. display: flex;
  1020. box-sizing: border-box;
  1021. .p-no {
  1022. font-size: $font-size-30;
  1023. color: $text-color;
  1024. display: block;
  1025. float: left;
  1026. }
  1027. .p-stars {
  1028. float: left;
  1029. }
  1030. }
  1031. .price {
  1032. color: #ff2a2a;
  1033. line-height: 54rpx;
  1034. &.none {
  1035. text-decoration: line-through;
  1036. color: #999999;
  1037. }
  1038. .sm {
  1039. font-size: $font-size-24;
  1040. }
  1041. .big {
  1042. font-size: $font-size-28;
  1043. }
  1044. }
  1045. }
  1046. }
  1047. }
  1048. </style>