my-shop.vue 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056
  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. <!-- ross弹窗 -->
  409. <cmRossPopup v-if="showRossHtml" :popupShow="showRossHtml"></cmRossPopup>
  410. <!-- 侧边 -->
  411. <scroll-top :isScrollTop="isScrollTop" :bottom="200"></scroll-top>
  412. </view>
  413. </template>
  414. <script>
  415. import { mapState, mapMutations } from 'vuex'
  416. import custom from './components/custom.vue' //自定义导航
  417. import banner from '../components/banner.vue'
  418. import uniGrader from '@/components/uni-grade/uni-grade.vue'
  419. import cmRossPopup from '@/components/cm-module/cm-ross/cm-ross-popup'
  420. import authorize from '@/common/config/authorize.js'
  421. import wxLogin from '@/common/config/wxLogin.js'
  422. import cmSrsMixins from '@/mixins/cmSrsMixins.js'
  423. export default {
  424. components: {
  425. custom,
  426. banner,
  427. uniGrader,
  428. cmRossPopup
  429. },
  430. mixins: [cmSrsMixins],
  431. data() {
  432. return {
  433. CustomBar:this.CustomBar,
  434. headerBtnPosi: this.setHeaderBtnPosi(), // 获取设备顶部胶囊高度
  435. systeminfo: this.setSysteminfo(), // 获取设备信息
  436. headerColor: false,
  437. backPage: 1,
  438. userId: 0,
  439. supplierId: 0,
  440. shopId: 0,
  441. iconClass: 'icon-aixin',
  442. iconColor: '#ff9100',
  443. iconNoneData: 'https://static.caimei365.com/app/img/icon/icon-prnone.png',
  444. iconNoneData1: 'https://static.caimei365.com/app/img/icon/icon-pbnone.png',
  445. isScrollTop: false,
  446. shopName: '',
  447. shopLogo: '',
  448. normalNum: 0,
  449. isFocus: false,
  450. isEmpty: false,
  451. isShowClose: false, //是否显示清空输入框图标
  452. skeletonShow: true,
  453. bannerImageList: [],
  454. recommendList: [],
  455. productList: [],
  456. userIdentity: 0,
  457. firstClubType:0,
  458. listQuery: {
  459. keyword: '',
  460. pageSize: 10,
  461. pageNum: 1,
  462. id: 0,
  463. identity:0
  464. },
  465. isHomeProduct: false,
  466. total: 0
  467. }
  468. },
  469. computed: {
  470. ...mapState(['hasLogin', 'userInfo', 'isActivity', 'identity', 'clubType'])
  471. },
  472. onLoad(option) {
  473. if (option.type == 'share') {
  474. wxLogin.wxLoginAuthorize()
  475. }
  476. this.listQuery.id = this.supplierId = this.handleShopId = option.shopId
  477. this.initGetStotage()
  478. },
  479. filters: {
  480. NumFormat: function(text) {
  481. //处理金额
  482. return Number(text).toFixed(2)
  483. }
  484. },
  485. methods: {
  486. ...mapMutations(['login', 'logout']),
  487. setHeaderBtnPosi() {
  488. // 获得胶囊按钮位置信息
  489. let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
  490. return headerBtnPosi
  491. },
  492. setSysteminfo() {
  493. let systeminfo
  494. uni.getSystemInfo({
  495. // 获取设备信息
  496. success: res => {
  497. systeminfo = res
  498. }
  499. })
  500. return systeminfo
  501. },
  502. async initGetStotage(option) {
  503. const userInfo = await this.$api.getStorage()
  504. this.shopId = userInfo.shopId ? userInfo.shopId : 0
  505. this.userId = userInfo.userId ? userInfo.userId : 0
  506. this.listQuery.identity = this.identity
  507. this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
  508. this.vipFlag = userInfo.vipFlag ? userInfo.vipFlag : 0
  509. this.firstClubType = this.clubType
  510. //初始化请求数据
  511. this.GetSupplierHomeBanner()
  512. this.GetSupplierHomeDeatils()
  513. this.GetSupplierHomeProduct()
  514. this.GetSupplierHomeProductList()
  515. this.checkedIsRossSet()
  516. this.skeletonShow = false
  517. },
  518. GetSupplierHomeBanner() {
  519. //轮播图
  520. this.ShopService.GetSupplierHomeBanner({ shopId: this.supplierId })
  521. .then(response => {
  522. this.bannerImageList = response.data
  523. })
  524. .catch(error => {
  525. this.$util.msg(error.msg, 2000)
  526. })
  527. },
  528. GetSupplierHomeDeatils() {
  529. //商铺详情
  530. this.ShopService.GetSupplierHomeDeatils({ shopId: this.supplierId })
  531. .then(response => {
  532. let data = response.data
  533. this.normalNum = data.normalNum
  534. this.shopName = data.name
  535. this.shopLogo = data.logo
  536. })
  537. .catch(error => {
  538. this.$util.msg(error.msg, 2000)
  539. })
  540. },
  541. GetSupplierHomeProduct() {
  542. //主推商品
  543. this.ShopService.GetSupplierHomeProduct({ shopId: this.supplierId, identity: this.identity })
  544. .then(response => {
  545. let data = response.data
  546. if (data.length > 0) {
  547. this.isHomeProduct = false
  548. this.QueryProductPrice(data)
  549. } else {
  550. this.isHomeProduct = true
  551. }
  552. })
  553. .catch(error => {
  554. this.$util.msg(error.msg, 2000)
  555. })
  556. },
  557. GetSupplierHomeProductList() {
  558. //全部商品
  559. this.ShopService.GetSupplierHomeProductList(this.listQuery)
  560. .then(response => {
  561. let data = JSON.parse(response.data)
  562. console.log('全部商品', data)
  563. let dataList = data.items
  564. this.total = data.total
  565. if (this.total > 0) {
  566. this.isEmpty = false
  567. this.productList = dataList
  568. this.QueryProductPrice1(this.productList)
  569. } else {
  570. this.isEmpty = true
  571. }
  572. })
  573. .catch(error => {
  574. this.$util.msg(error.msg, 2000)
  575. })
  576. },
  577. GetMoreSupplierHomeProductList() {
  578. //加载分页
  579. this.listQuery.pageNum += 1
  580. this.ShopService.GetSupplierHomeProductList(this.listQuery)
  581. .then(response => {
  582. let data = JSON.parse(response.data)
  583. this.total = data.total
  584. this.productList = this.productList.concat(data.items)
  585. this.QueryProductPrice1(this.productList)
  586. })
  587. .catch(error => {
  588. this.$util.msg(error.msg, 2000)
  589. })
  590. },
  591. QueryProductPrice(data) {
  592. //处理主推商品商品或者活动价格
  593. let productIdArr = []
  594. let productIds = ''
  595. data.map(item => {
  596. // 0公开价格 1不公开价格 2仅对资质机构公开
  597. productIdArr.push(item.productId)
  598. })
  599. productIds = productIdArr.join(',')
  600. this.ProductService.querySearchProductPrice({
  601. userId: this.userId,
  602. productIds: productIds,
  603. source: 2
  604. })
  605. .then(response => {
  606. this.recommendList = this.ReturnNewProducts(data, response.data)
  607. })
  608. .catch(error => {
  609. this.$util.msg(error.msg, 2000)
  610. })
  611. },
  612. QueryProductPrice1(data) {
  613. //获取商品或者活动价格
  614. let productIdArr = []
  615. let productIds = ''
  616. data.map(item => {
  617. // 0公开价格 1不公开价格 2仅对资质机构公开
  618. productIdArr.push(item.productId)
  619. })
  620. productIds = productIdArr.join(',')
  621. this.ProductService.querySearchProductPrice({
  622. userId: this.userId,
  623. productIds: productIds,
  624. source: 2
  625. })
  626. .then(response => {
  627. this.productList = this.ReturnNewProducts(data, response.data)
  628. })
  629. .catch(error => {
  630. this.$util.msg(error.msg, 2000)
  631. })
  632. },
  633. ReturnNewProducts(listA, listB) {
  634. let NewArray = []
  635. listA.map(item => {
  636. for (let i = 0; i < listB.length; i++) {
  637. if (item.productId == listB[i].productId) {
  638. NewArray.push(Object.assign(item, listB[i]))
  639. }
  640. }
  641. })
  642. return NewArray
  643. },
  644. SubMitSearch() {
  645. //搜索
  646. this.listQuery.pageNum = 1
  647. this.GetSupplierHomeProductList()
  648. },
  649. PromotionsFormat(promo) {
  650. //促销活动类型数据处理
  651. if (promo != null) {
  652. if (promo.type == 1 && promo.mode == 1) {
  653. return true
  654. } else {
  655. return false
  656. }
  657. }
  658. return false
  659. },
  660. onShowClose() {
  661. //输入框输入时触发
  662. this.inputEmpty(this.listQuery.keyword)
  663. },
  664. onFocus() {
  665. //输入框获取焦点时触发
  666. this.inputEmpty(this.listQuery.keyword)
  667. },
  668. delInputText() {
  669. //清除输入框内容
  670. this.listQuery.keyword = ''
  671. this.isShowClose = false
  672. this.isShowWrapper = false
  673. this.inputEmpty(this.listQuery.keyword)
  674. this.initGetSerachRecord()
  675. },
  676. inputEmpty(val) {
  677. if (val != '') {
  678. this.isShowClose = true
  679. this.isFocus = true
  680. } else {
  681. this.isShowClose = false
  682. this.isFocus = true
  683. }
  684. },
  685. isInterceptHtmlFn(text) {
  686. let name = this.$reg.interceptHtmlFn(text)
  687. return name
  688. },
  689. goSupplier() {
  690. //跳供应商资料页
  691. this.$api.navigateTo('/pages/supplier/user/supplier?shopId=' + this.supplierId)
  692. },
  693. navToDetailPage(id) {
  694. //跳转商品详情页
  695. this.$api.navigateTo(`/pages/goods/product?id=${id}`)
  696. },
  697. isShowVipFlag(pros) {
  698. /**
  699. *显示SVIP和超级会员价格:
  700. * 个人机构(不是超级会员,但价格所有机构可见),
  701. * 资质机构(不是超级会员,但价格所有机构可见或仅会员可见),
  702. * 超级会员(价格所有机构可见或仅会员可见),超级会员(是医美机构,价格仅医美可见)
  703. *商品价格是否可见:priceFlag 0:所有机构可见 1:未公开价格 2:仅会员可见 3:仅医美机构可见
  704. * 普通机构
  705. * 超级会员 && priceFlag === 0
  706. * 资质机构
  707. * priceFlag !== 1 ||
  708. * 超级会员
  709. * 商品priceFlag === 3 && 是否是医美机构
  710. */
  711. // 未登录 || 非会员
  712. if(!this.hasLogin || !this.vipFlag === 1) return false
  713. // 商品所有机构可见
  714. if(pros.priceFlag === 0 ) return true
  715. // 商品价格仅资质机构可见
  716. if((pros.priceFlag === 2 && this.userIdentity === 2) || this.userIdentity === 1) return true
  717. // 商品价格仅医美机构可见
  718. if((pros.priceFlag === 3 && this.userIdentity === 2 && this.firstClubType == 1) || this.userIdentity === 1) return true
  719. // 其它
  720. return false
  721. },
  722. },
  723. onPageScroll(e) {
  724. //实时获取到滚动的值
  725. if (e.scrollTop > 400) {
  726. this.isScrollTop = true
  727. } else {
  728. this.isScrollTop = false
  729. }
  730. },
  731. onReachBottom() {
  732. //上滑加载分页
  733. if (this.total > this.productList.length) {
  734. this.loadding = true
  735. this.pullUpOn = true
  736. this.GetMoreSupplierHomeProductList()
  737. }
  738. },
  739. onShareAppMessage(res) {
  740. //分享转发
  741. if (res.from === 'button') {
  742. // 来自页面内转发按钮
  743. }
  744. return {
  745. title: '进入店铺,发现惊喜',
  746. path: `pages/supplier/user/my-shop?type=share&shopId=${this.listQuery.id}`
  747. }
  748. },
  749. onShow() {}
  750. }
  751. </script>
  752. <style lang="scss">
  753. page {
  754. background-color: #f7f7f7;
  755. }
  756. .shop {
  757. width: 100%;
  758. height: auto;
  759. }
  760. .shop-search-main {
  761. width: 100%;
  762. height: 86rpx;
  763. background-color: #ffffff;
  764. box-sizing: border-box;
  765. padding: 10rpx 24rpx;
  766. .shop-search {
  767. width: 100%;
  768. height: 66rpx;
  769. border-radius: 33rpx;
  770. background-color: #f7f7f7;
  771. box-sizing: border-box;
  772. position: relative;
  773. .icon-sousuo {
  774. width: 80rpx;
  775. height: 66rpx;
  776. display: block;
  777. float: left;
  778. color: #707070;
  779. line-height: 66rpx;
  780. text-align: center;
  781. font-size: 36rpx;
  782. }
  783. .icon-shanchu1 {
  784. width: 80rpx;
  785. height: 66rpx;
  786. display: block;
  787. color: #8a8a8a;
  788. line-height: 66rpx;
  789. text-align: center;
  790. font-size: 36rpx;
  791. position: absolute;
  792. right: 0;
  793. top: 0;
  794. z-index: 100;
  795. }
  796. .input {
  797. width: 580rpx;
  798. height: 66rpx;
  799. box-sizing: border-box;
  800. color: #666666;
  801. overflow: hidden;
  802. font-size: $font-size-24;
  803. }
  804. }
  805. }
  806. .container-shop {
  807. width: 100%;
  808. height: auto;
  809. padding: 24rpx;
  810. box-sizing: border-box;
  811. background-color: #ffffff;
  812. margin-top: 10rpx;
  813. }
  814. .product-supplier {
  815. width: 100%;
  816. height: 140rpx;
  817. padding: 30rpx 0 10rpx 0;
  818. box-sizing: border-box;
  819. background-color: #ffffff;
  820. position: relative;
  821. box-sizing: border-box;
  822. .logo {
  823. width: 128rpx;
  824. height: 92rpx;
  825. float: left;
  826. border: 1px solid #efefef;
  827. border-radius: 6rpx;
  828. image {
  829. width: 100%;
  830. height: 100%;
  831. display: block;
  832. border-radius: 6rpx;
  833. }
  834. }
  835. .main {
  836. width: 470rpx;
  837. height: 92rpx;
  838. float: left;
  839. margin-left: 20rpx;
  840. .name {
  841. width: 100%;
  842. line-height: 46rpx;
  843. float: left;
  844. font-size: $font-size-28;
  845. color: $text-color;
  846. float: right;
  847. overflow: hidden;
  848. text-overflow: ellipsis;
  849. white-space: nowrap;
  850. text-align: left;
  851. }
  852. .massgs {
  853. width: 100%;
  854. line-height: 46rpx;
  855. float: left;
  856. font-size: $font-size-24;
  857. color: #999999;
  858. .label {
  859. float: left;
  860. }
  861. .p-stars {
  862. float: left;
  863. margin-left: 20rpx;
  864. }
  865. .acount {
  866. float: right;
  867. text {
  868. color: $color-system;
  869. }
  870. }
  871. }
  872. }
  873. .icon-xiayibu {
  874. line-height: 154rpx;
  875. display: inline-block;
  876. position: absolute;
  877. width: 48rpx;
  878. top: 0;
  879. right: 0;
  880. color: #b2b2b2;
  881. }
  882. }
  883. .container-section {
  884. width: 100%;
  885. height: auto;
  886. background-color: #f7f7f7;
  887. box-sizing: border-box;
  888. padding: 0 24rpx;
  889. .tab-title {
  890. width: 100%;
  891. height: 88rpx;
  892. line-height: 88rpx;
  893. font-size: $font-size-30;
  894. font-weight: bold;
  895. }
  896. .section-product {
  897. width: 100%;
  898. height: auto;
  899. .floor-item-none {
  900. min-height: 300rpx;
  901. display: flex;
  902. flex-direction: column;
  903. align-items: center;
  904. .none-image {
  905. width: 260rpx;
  906. height: 260rpx;
  907. }
  908. .none-text {
  909. text-align: center;
  910. font-size: $font-size-28;
  911. color: #999999;
  912. line-height: 40rpx;
  913. }
  914. }
  915. .floor-item {
  916. width: 341rpx;
  917. height: auto;
  918. margin-right: 20rpx;
  919. font-size: $font-size-24;
  920. color: $text-color;
  921. background: #ffffff;
  922. line-height: 36rpx;
  923. border-radius: 20rpx;
  924. margin-bottom: 20rpx;
  925. float: left;
  926. box-sizing: border-box;
  927. padding-bottom: 10rpx;
  928. position: relative;
  929. &:nth-child(2n) {
  930. margin-right: 0;
  931. }
  932. .floor-item-type{
  933. width: 64rpx;
  934. height: 64rpx;
  935. text-align: justify;
  936. box-sizing: border-box;
  937. padding: 10rpx;
  938. border-radius: 0 0 8rpx 8rpx;
  939. background-color: #33CCBF;
  940. font-size: $font-size-22;
  941. color: #FFFFFF;
  942. line-height: 25rpx;
  943. position: absolute;
  944. top: 0;
  945. right: 16rpx;
  946. }
  947. .item-img {
  948. width: 341rpx;
  949. height: 341rpx;
  950. border-radius: 20rpx 20rpx 0 0;
  951. display: block;
  952. margin-bottom: 20rpx;
  953. }
  954. .floor-item-content {
  955. width: 311rpx;
  956. padding: 0 15rpx;
  957. }
  958. .floor-item-act {
  959. display: block;
  960. width: 100%;
  961. height: 68rpx;
  962. text-align: center;
  963. box-sizing: border-box;
  964. padding: 16rpx 0;
  965. margin-top: 8rpx;
  966. }
  967. .title-none {
  968. font-size: $font-size-26;
  969. color: #ff2a2a;
  970. line-height: 54rpx;
  971. .btn {
  972. display: inline-block;
  973. float: right;
  974. width: 112rpx;
  975. height: 44rpx;
  976. background: $btn-confirm;
  977. line-height: 44rpx;
  978. font-size: $font-size-24;
  979. color: #ffffff;
  980. text-align: center;
  981. border-radius: 22rpx;
  982. margin-top: 17rpx;
  983. }
  984. }
  985. .title {
  986. width: 100%;
  987. height: 72rpx;
  988. display: flex;
  989. flex-direction: column;
  990. margin-bottom: 15rpx;
  991. padding: 0;
  992. position: relative;
  993. .mclap {
  994. width: 100%;
  995. line-height: 40rpx;
  996. text-overflow: ellipsis;
  997. display: -webkit-box;
  998. word-break: break-all;
  999. -webkit-box-orient: vertical;
  1000. -webkit-line-clamp: 2;
  1001. overflow: hidden;
  1002. font-size: 26rpx;
  1003. &.indent {
  1004. text-indent: 95rpx;
  1005. }
  1006. }
  1007. .mclap-tag {
  1008. display: block;
  1009. width: 84rpx;
  1010. height: 32rpx;
  1011. background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
  1012. border-radius: 4rpx 48rpx 4px 4px;
  1013. line-height: 32rpx;
  1014. font-size: $font-size-22;
  1015. color: #ffffff;
  1016. text-align: center;
  1017. position: absolute;
  1018. left: 0;
  1019. top: 0;
  1020. }
  1021. }
  1022. .no-price {
  1023. height: 54rpx;
  1024. line-height: 54rpx;
  1025. display: flex;
  1026. box-sizing: border-box;
  1027. .p-no {
  1028. font-size: $font-size-30;
  1029. color: $text-color;
  1030. display: block;
  1031. float: left;
  1032. }
  1033. .p-stars {
  1034. float: left;
  1035. }
  1036. }
  1037. .price {
  1038. color: #ff2a2a;
  1039. line-height: 54rpx;
  1040. &.none {
  1041. text-decoration: line-through;
  1042. color: #999999;
  1043. }
  1044. .sm {
  1045. font-size: $font-size-24;
  1046. }
  1047. .big {
  1048. font-size: $font-size-28;
  1049. }
  1050. }
  1051. }
  1052. }
  1053. }
  1054. </style>