酒店桌布为微信小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

491 lines
9.8 KiB

10 months ago
10 months ago
8 months ago
10 months ago
8 months ago
10 months ago
8 months ago
10 months ago
8 months ago
8 months ago
8 months ago
10 months ago
9 months ago
10 months ago
9 months ago
10 months ago
9 months ago
10 months ago
9 months ago
10 months ago
9 months ago
10 months ago
8 months ago
10 months ago
9 months ago
8 months ago
10 months ago
9 months ago
10 months ago
9 months ago
8 months ago
9 months ago
10 months ago
9 months ago
8 months ago
10 months ago
8 months ago
10 months ago
9 months ago
10 months ago
9 months ago
10 months ago
9 months ago
10 months ago
10 months ago
10 months ago
8 months ago
8 months ago
10 months ago
10 months ago
10 months ago
9 months ago
8 months ago
10 months ago
10 months ago
8 months ago
10 months ago
9 months ago
10 months ago
9 months ago
9 months ago
9 months ago
9 months ago
8 months ago
9 months ago
9 months ago
9 months ago
8 months ago
9 months ago
8 months ago
9 months ago
9 months ago
8 months ago
10 months ago
10 months ago
8 months ago
10 months ago
9 months ago
8 months ago
9 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
10 months ago
9 months ago
10 months ago
10 months ago
  1. <template>
  2. <view class="page">
  3. <navbar/>
  4. <view class="search" v-if="!userShop">
  5. <!-- <view @click="showSelectArea" class="left-area">
  6. <image src="@/static/image/home/address-icon.png"></image>
  7. <view class="area">{{ area }}</view>
  8. <image src="@/static/image/home/arrow-icon.png" mode="aspectFit"></image>
  9. <view class="parting-line">|</view>
  10. </view>
  11. <view class="center-area">
  12. <image
  13. style="margin-right: 20rpx;"
  14. src="@/static/image/home/search-icon.png"></image>
  15. <input v-model="queryParams.title"
  16. placeholder="桌布租赁" />
  17. </view> -->
  18. <!-- <view class="right-area">
  19. <view @click="searchAddress" class="search-button">
  20. 搜索
  21. </view>
  22. </view> -->
  23. <uv-search
  24. bgColor="#fff"
  25. @search="getGoodsPage"
  26. @custom="getGoodsPage"
  27. @change="searchChange"
  28. placeholder="请输入搜索关键字..."
  29. v-model="queryParams.name"></uv-search>
  30. </view>
  31. <view class="swipe">
  32. <uv-swiper
  33. :list="bannerList"
  34. indicator
  35. height="320rpx"
  36. keyName="pic"></uv-swiper>
  37. </view>
  38. <!-- 水洗店 -->
  39. <view class="userShop"
  40. v-if="userShop">
  41. <view class="list">
  42. <view class="item"
  43. v-for="(item, index) in statisticsKey"
  44. :key="index">
  45. <view class="">
  46. <view class="">
  47. {{ item.title }}
  48. </view>
  49. <view class="num">
  50. {{ statistics[item.key] || 0 }}
  51. </view>
  52. </view>
  53. <view class="">
  54. <image :src="`/static/image/home/${index}.png`" mode=""></image>
  55. </view>
  56. </view>
  57. </view>
  58. </view>
  59. <!-- 酒店 -->
  60. <view class="user"
  61. v-else>
  62. <uv-notice-bar
  63. fontSize="28rpx"
  64. :text="notice"></uv-notice-bar>
  65. <!-- <view class="shop" v-if="bindShop && bindShop.name">
  66. <image
  67. class="image"
  68. :src="bindShop.pic"
  69. mode="aspectFill"></image>
  70. <view class="shopInfo">
  71. <view class="title">
  72. {{bindShop.name}}
  73. </view>
  74. <view class="tags">
  75. <view class="tag">
  76. 桌布水洗
  77. </view>
  78. <view class="tag">
  79. 桌布租赁
  80. </view>
  81. </view>
  82. <view class="time">
  83. 9:00-18:00
  84. </view>
  85. <view class="address text-ellipsis-2">
  86. 长沙市天心区桂花坪街道231号
  87. {{bindShop.address}}
  88. </view>
  89. </view>
  90. <view class="btns">
  91. <view class="btn"
  92. @click="$utils.navigateTo('/pages_order/order/createWash')">
  93. 我要水洗
  94. </view>
  95. </view>
  96. <view class="tips">
  97. 关联门店主信门店
  98. </view>
  99. </view> -->
  100. <shopMain />
  101. <view class="productList">
  102. <productList :productList="productList.records"/>
  103. </view>
  104. </view>
  105. <!-- <selectArea ref="selectArea" @close="closeAreaPro" @select="selectArea"></selectArea> -->
  106. <PrivacyAgreementPoup/>
  107. <tabber select="0"/>
  108. </view>
  109. </template>
  110. <script>
  111. import PrivacyAgreementPoup from '@/components/config/PrivacyAgreementPoup.vue'
  112. import Position from '@/utils/position.js'
  113. import tabber from '@/components/base/tabbar.vue'
  114. import productList from '@/components/user/productList.vue'
  115. import { mapGetters, mapState } from 'vuex'
  116. import shopMain from '@/components/user/shopMain.vue'
  117. // import selectArea from '../../components/selectArea.vue';
  118. export default {
  119. components : {
  120. tabber,
  121. productList,
  122. PrivacyAgreementPoup,
  123. shopMain,
  124. },
  125. data() {
  126. return {
  127. area: '长沙',
  128. notice : '',
  129. queryParams: {
  130. pageNo: 1,
  131. pageSize: 10,
  132. title: '',
  133. },
  134. bannerList: [],
  135. productList: {
  136. records : [],
  137. total : 0,
  138. },
  139. statisticsKey : [
  140. {
  141. key : 'user',
  142. title : '我的客户',
  143. },
  144. {
  145. key : 'wash',
  146. title : '水洗订单',
  147. },
  148. {
  149. key : 'refund',
  150. title : '退货订单',
  151. },
  152. {
  153. key : 'worn',
  154. title : '破损换货',
  155. },
  156. ],
  157. }
  158. },
  159. onShow() {
  160. this.noticeList()
  161. this.banner()
  162. this.getGoodsPage()
  163. if(uni.getStorageSync('token')){
  164. // this.$store.commit('getUserInfo')
  165. }
  166. },
  167. // 下拉刷新
  168. onPullDownRefresh(){
  169. this.getGoodsPage()
  170. this.noticeList()
  171. this.banner()
  172. if(uni.getStorageSync('token')){
  173. this.$store.commit('getUserInfo')
  174. }
  175. },
  176. //滚动到屏幕底部
  177. onReachBottom() {
  178. if(this.queryParams.pageSize < this.productList.total){
  179. this.queryParams.pageSize += 10
  180. this.getGoodsPage()
  181. }
  182. },
  183. computed : {
  184. ...mapGetters(['userShop']),
  185. ...mapState(['bindShop', 'statistics']),
  186. },
  187. methods: {
  188. banner(){
  189. this.$api('bannerList', res => {
  190. if(res.code == 200){
  191. this.bannerList = res.result
  192. }
  193. })
  194. },
  195. noticeList(){
  196. this.$api('noticeList', res => {
  197. if(res.code == 200){
  198. this.notice = res.result && res.result.content
  199. }
  200. })
  201. },
  202. searchChange(value){
  203. if(!value){
  204. this.getGoodsPage()
  205. }
  206. },
  207. // 获取商品数据
  208. getGoodsPage(){
  209. this.$api('goodsPage', this.queryParams, res => {
  210. uni.stopPullDownRefresh()
  211. if(res.code == 200){
  212. this.productList = res.result
  213. }
  214. })
  215. },
  216. //显示选择地区
  217. showSelectArea() {
  218. // this.$refs.selectArea.open()
  219. },
  220. //搜索地址
  221. searchAddress() {
  222. Position.getLocation(res => {
  223. Position.selectAddress(res.longitude, res.latitude, success => {
  224. let address = this.extractProvinceAndCity(success)
  225. this.queryParams.title = address.city
  226. })
  227. })
  228. },
  229. //提取用户选择的地址信息(省市县信息)
  230. extractProvinceAndCity(res) { //提取用户选择的地址信息(省市)
  231. if (!res.address && res.name) { //用户直接选择城市的逻辑
  232. return {
  233. province: '',
  234. city: res.name
  235. };
  236. }
  237. if (res.address) { //用户选择了详细地址,要从详细地址中提取出省市县信息
  238. // 使用正则表达式匹配省市县
  239. const regex = /(?<province>[\u4e00-\u9fa5]+?省)(?<city>[\u4e00-\u9fa5]+?(?:市|自治州|盟|地区))/;
  240. const match = res.address.match(regex);
  241. if (match) { // 如果匹配成功,则返回省和市的信息
  242. return {
  243. province: match.groups.province,
  244. city: match.groups.city
  245. };
  246. }
  247. }
  248. return { //用户没选择地址就点了确定按钮
  249. province: '',
  250. city: ''
  251. }
  252. },
  253. }
  254. }
  255. </script>
  256. <style scoped lang="scss">
  257. .search {
  258. height: 82rpx;
  259. width: 710rpx;
  260. background: #FFFFFF;
  261. margin: 20rpx auto;
  262. border-radius: 41rpx;
  263. box-sizing: border-box;
  264. padding: 0 15rpx;
  265. display: flex;
  266. align-items: center;
  267. // justify-content: space-between;
  268. .left-area,
  269. .center-area {
  270. display: flex;
  271. align-items: center;
  272. }
  273. .left-area {
  274. max-width: 160rpx;
  275. image {
  276. flex-shrink: 0;
  277. width: 26rpx;
  278. height: 26rpx;
  279. }
  280. .area {
  281. font-size: 24rpx;
  282. display: -webkit-box;
  283. -webkit-line-clamp: 2;
  284. /* 限制显示两行 */
  285. -webkit-box-orient: vertical;
  286. overflow: hidden;
  287. text-overflow: ellipsis;
  288. color: #292929;
  289. }
  290. .parting-line {
  291. flex-shrink: 0;
  292. font-size: 26rpx;
  293. color: #ccc;
  294. margin: 0rpx 5rpx;
  295. }
  296. }
  297. .center-area {
  298. display: flex;
  299. flex-wrap: nowrap;
  300. align-items: center;
  301. width: calc(100% - 290rpx);
  302. margin-left: 30rpx;
  303. image {
  304. width: 26rpx;
  305. height: 26rpx;
  306. }
  307. .van-field {
  308. background-color: transparent;
  309. box-sizing: border-box;
  310. height: 82rpx;
  311. line-height: 82rpx;
  312. width: calc(100% - 30rpx);
  313. padding: 0rpx 10rpx 0rpx 0rpx;
  314. input {
  315. height: 82rpx;
  316. font-size: 60rpx;
  317. }
  318. }
  319. }
  320. .right-area {
  321. .search-button {
  322. background: #60BDA2;
  323. height: 60rpx;
  324. width: 130rpx;
  325. font-size: 26rpx;
  326. border-radius: 35rpx;
  327. color: white;
  328. display: flex;
  329. align-items: center;
  330. justify-content: center;
  331. }
  332. }
  333. }
  334. .swipe{
  335. overflow: hidden;
  336. border-radius: 20rpx;
  337. margin: 20rpx;
  338. }
  339. .page{
  340. & /deep/ .uv-icon__icon{
  341. font-size: 30rpx !important;
  342. }
  343. // 水洗店
  344. .userShop{
  345. .list{
  346. display: flex;
  347. flex-wrap: wrap;
  348. .item{
  349. display: flex;
  350. justify-content: center;
  351. align-items: center;
  352. width: 330rpx;
  353. margin: 20rpx;
  354. padding: 30rpx 0;
  355. color: #FFFFFF;
  356. line-height: 50rpx;
  357. border-radius: 20rpx;
  358. font-size: 28rpx;
  359. .num{
  360. font-size: 38rpx;
  361. font-weight: 900;
  362. }
  363. image{
  364. width: 110rpx;
  365. height: 110rpx;
  366. margin-left: 20rpx;
  367. }
  368. &:nth-child(1){
  369. background: #F07A77;
  370. }
  371. &:nth-child(2){
  372. background: #F48B4E;
  373. }
  374. &:nth-child(3){
  375. background: #6487E1;
  376. }
  377. &:nth-child(4){
  378. background: #61B7E6;
  379. }
  380. }
  381. }
  382. }
  383. // 酒店
  384. .user{
  385. padding: 20rpx;
  386. .shop{
  387. position: relative;
  388. display: flex;
  389. align-items: center;
  390. justify-content: center;
  391. background-color: #fff;
  392. margin-top: 20rpx;
  393. border-radius: 20rpx;
  394. padding: 20rpx;
  395. overflow: hidden;
  396. .image{
  397. width: 180rpx;
  398. height: 180rpx;
  399. margin-right: 20rpx;
  400. border-radius: 20rpx;
  401. flex-shrink: 0;
  402. }
  403. .shopInfo{
  404. font-size: 22rpx;
  405. .title{
  406. font-size: 30rpx;
  407. }
  408. .tags{
  409. display: flex;
  410. .tag{
  411. padding: 4rpx 6rpx;
  412. border: 1rpx solid #FFAC6E;
  413. color: #FFAC6E;
  414. margin-right: 10rpx;
  415. margin-top: 10rpx;
  416. font-size: 18rpx;
  417. }
  418. }
  419. .time{
  420. margin-top: 10rpx;
  421. display: flex;
  422. }
  423. .address{
  424. margin-top: 10rpx;
  425. display: flex;
  426. }
  427. }
  428. .btns{
  429. margin-left: auto;
  430. display: flex;
  431. align-items: center;
  432. justify-content: center;
  433. flex-shrink: 0;
  434. .btn{
  435. background-color: $uni-color;
  436. color: #fff;
  437. box-shadow: 0 0 5rpx 5rpx #FFAC6E;
  438. padding: 10rpx 20rpx;
  439. flex-shrink: 0;
  440. border-radius: 35rpx;
  441. }
  442. }
  443. .tips{
  444. position: absolute;
  445. top: 0;
  446. right: 0;
  447. font-size: 24rpx;
  448. color: #FFAC6E;
  449. background-color: #FEF5EE;
  450. padding: 10rpx 20rpx;
  451. border-radius: 10rpx;
  452. }
  453. }
  454. }
  455. }
  456. </style>