Init project

2023-09-20 21:49:33 +08:00
parent 85a5989c96
commit c9ceac9f37
710 changed files with 125705 additions and 0 deletions
@@ -0,0 +1,213 @@
+<template>
+  <view class="page-select-city">
+    <uni-search-bar class="search" :placeholder="`搜索${title}`" bgColor="#fff" @confirm="search" @input="input">
+    </uni-search-bar>
+    <view class="city-box">
+      <image :src="webUrl+'/20220903142929759087.png'" mode="scaleToFill"></image>
+      <text class="main">{{location}}</text>
+      <text class="sub">当前定位</text>
+    </view>
+
+    <view class="group" v-if="topList.length>0">
+      <view class="title" style="font-size: 28rpx;">特别推荐</view>
+      <view class="list">
+        <view class="item" v-for="item in topList" :key="item" @click="select(item)">
+          <view class="has-goods" v-if="item.hasGoods==0 && back==='specialty'">{{labelText}}</view>
+          <image :src="item.icon" mode="scaleToFill"></image>
+          <view class="city-name">{{item.cityName}}</view>
+        </view>
+      </view>
+    </view>
+
+    <view class="group">
+      <view class="title" style="font-size: 28rpx;">全国城市</view>
+
+      <view class="group" style="margin-left: 0;margin-right: 0;" v-for="group in list">
+        <view class="title">{{group.label}}</view>
+        <view class="list">
+          <view class="item" v-for="item in group.city" :key="item" @click="select(item)">
+            <view class="has-goods" v-if="item.hasGoods==0 && back==='specialty'">{{labelText}}</view>
+            <image :src="item.icon" mode="scaleToFill"></image>
+            <view class="city-name">{{item.cityName}}</view>
+          </view>
+        </view>
+      </view>
+
+    </view>
+  </view>
+</template>
+
+<script>
+  import {
+    fetchCity
+  } from "@/api/shop";
+  import {
+    getHotelCityList
+  } from "@/api/inn";
+  export default {
+    data() {
+      return {
+        webUrl: this.$VUE_APP_RESOURCES_URL,
+        back: "",
+        location: "",
+        title: "",
+        list: [],
+        topCount: 0,
+        topList: [],
+        labelText: "暂无特产"
+      }
+    },
+    onLoad: function(options) {
+      this.back = options.back;
+      this.location = options.city;
+
+      if (this.back === "specialty") {
+        this.title = "特产";
+        uni.setNavigationBarTitle({
+          title: this.title
+        });
+      }
+
+      this.fetchList();
+    },
+    methods: {
+      fetchList() {
+        switch (this.back) {
+          case "specialty":
+            fetchCity().then(res => {
+              if (res.success) {
+                this.topList = res.data.tops;
+                this.list = res.data.group;
+              }
+            })
+            break;
+            case "cloud":
+            getHotelCityList().then(res=>{
+              this.list = res.data;
+            })
+            break;
+          default:
+            break;
+        }
+      },
+
+      select(item) {
+        uni.setStorageSync("cityName", item.cityName)
+        uni.navigateBack()
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .page-select-city {
+    min-height: 100vh;
+    background: #fff;
+  }
+
+  .search {
+    .uni-searchbar {
+      padding: 20rpx 32rpx 12rpx !important;
+
+      .uni-searchbar__box {
+        border-radius: 44px !important;
+        background: #F6F6F6 !important;
+      }
+    }
+  }
+
+  .city-box {
+    display: inline-flex;
+    align-items: center;
+    margin-left: 32rpx;
+    padding: 8rpx 18rpx 8rpx 16rpx;
+    border-radius: 30px;
+    background: #fff;
+
+    image {
+      width: 32rpx;
+      height: 32rpx;
+      margin-right: 4rpx;
+    }
+
+    .main {
+      font-size: 32rpx;
+      font-weight: bold;
+      line-height: 48rpx;
+      color: #333333;
+    }
+
+    .sub {
+      margin: 14rpx 0 0 22rpx;
+      font-size: 24rpx;
+      font-weight: 400;
+      line-height: 34rpx;
+      color: #999999;
+    }
+  }
+
+  .group {
+    margin: 40rpx 32rpx 0;
+
+    .title {
+      font-size: 24rpx;
+      font-weight: bold;
+      line-height: 34rpx;
+      color: #333333;
+    }
+
+    .list {
+      display: flex;
+      flex-wrap: wrap;
+      margin-top: 18rpx;
+
+      .item {
+        position: relative;
+        width: 154rpx;
+        height: 154rpx;
+        // height: 214rpx;
+        box-sizing: border-box;
+        margin: 0 22rpx 24rpx 0;
+        // border: 2rpx solid #707070;
+        border-radius: 8px;
+
+        image {
+          width: 100%;
+          height: 100%;
+          border-radius: 8px;
+          vertical-align: middle;
+        }
+
+        .has-goods {
+          position: absolute;
+          left: 0;
+          top: 0;
+          padding: 6rpx;
+          border-radius: 8px 0 8px 0;
+          background: #f66;
+          color: #fff;
+          font-size: 24rpx;
+          line-height: 1;
+        }
+
+        .city-name {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          height: 48rpx;
+          line-height: 48rpx;
+          border-radius: 0 0 8px 8px;
+          background: rgba(0, 0, 0, .2);
+          color: #fff;
+          text-align: center;
+          font-size: 24rpx;
+        }
+      }
+
+      .item:nth-child(4n) {
+        margin-right: 0;
+      }
+    }
+  }
+</style>