123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654 |
- <template>
- <view>
- <navbar :config="config" backColor="#666"></navbar>
- <view class="top-box" :style="{'top': sticky + 'px'}">
- <view class="top-nav">
- <view class="city-text" @click="addressShow=true">
- <image mode="aspectFit" src="/static/shop/location-icon.png"></image>
- <view>{{cityName}}</view>
- </view>
- <view class="searchBox">
- <image src="/static/shop/search-icon.png" mode="widthFix"></image>
- <input v-model="param.shop_name" type="text" @confirm="getShopList()" placeholder-style="color:#B3B3B3"
- placeholder="请输入关键字" @input="search()" />
- </view>
- </view>
- <view class="tabsBox">
- <view class="type-box">
- <view class="item" @click="show = true">
- <view>{{selectIndex === null ? '全部分类' : selector[selectIndex].name}}</view>
- <image mode="aspectFit" src="/static/convenienceService/drop-arrow.png"></image>
- </view>
- <view class="item" v-for="(v,i) in typeList" :key="i" :class="{activeCls:tabCurrent==i}"
- @click="tabsChange2(i)">
- <view>{{v.name}}</view>
- </view>
- </view>
- </view>
- </view>
- <view :style="{'height': placeholderH + 'px'}"></view>
- <!-- selector -->
- <!-- <view :style="{height: (statusBarHeight) + 'px'}"></view> -->
- <view class="shopListBox" v-if="list.length>0">
- <!-- 附近门店 -->
- <view class="item" v-for="(v, index) in list" :key="index" @click="goShopDetails(v)">
- <view class="shop-img">
- <image :src="v.logo" mode="aspectFill"></image>
- </view>
- <view class="right">
- <view class="title">{{v.shop_name}}</view>
- <view class="score-box">
- <view class="score">
- <rate :value="Math.round(v.average)"></rate>
- </view>
- <text class="score-text">{{v.average.toFixed(2)}}分</text>
- <text class="ju">距离:{{Math.round(v.distance/1000*100)/100}}KM</text>
- </view>
- <view class="address-box">
- <view class="left">
- <image class="location1" src="/static/shop/location-icon.png">
- </image>
- <view class="district">{{v.map_punctuation || '商户暂无地理位置'}}</view>
- </view>
- <view class="goShopping">
- <text class="iconfont3"></text>
- <text class="text">去逛逛</text>
- </view>
- </view>
- <!-- <view class="location2-box">
- <image class="location2" src="/static/convenienceService/location2.png">
- </image>
- <view>{{v.map_punctuation}}></view>
- </view> -->
- </view>
- </view>
- </view>
- <view>
- <noData v-if="list.length<=0"></noData>
- </view>
- <!-- 选择地区 -->
- <u-select v-model="addressShow" mode="mutil-column-auto" :list="cityTree" @confirm="addressConfirm">
- </u-select>
- <u-picker mode="selector" v-model="show" :range="selector" range-key="name" :default-selector="[sIndex]"
- @confirm="confirmSelect"></u-picker>
- </view>
- </template>
- <script>
- import rate from "@/components/rate.vue"
- import noData from "@/components/noData/nodata.vue"
- export default {
- components: {
- rate,
- noData
- },
- data() {
- return {
- //手机状态栏高度
- statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
- sticky: uni.getSystemInfoSync().statusBarHeight + 44,
- placeholderH: 0,
- config: {
- back: true,
- title: '同城商家',
- color: '#1a1a1a',
- backgroundColor: [1, "#fff"],
- statusBarFontColor: '#1A1A1A',
- leftSlot: true
- },
- cityName: '武汉市',
- sIndex: 0,
- param: {
- shop_name: '',
- order: 'distance',
- union_business: true
- },
- setTime: null,
- addressShow: false,
- tabCurrent: 0,
- cityTree: [],
- typeList: [{
- name: '距离优先',
- order: 'distance'
- },
- {
- name: '评分优先',
- order: 'average'
- }
- ],
- show: false,
- selector: [],
- selectIndex: null,
- list: [],
- }
- },
- onLoad(options) {
- if (options && options.id) {
- this.param.classify_id = options.id
- }
- if (options.cityName) {
- this.cityName = options.cityName
- }
- if (options.address) {
- this.param.address = options.address
- }
- if (options.area_code) {
- this.param.area_code = options.area_code
- }
- this.getCitys();
- this.getTppe(this.param.classify_id)
- },
- onShow() {
- this.$nextTick(() => {
- this.$u.getRect('.top-box').then(res => {
- console.log(res)
- this.placeholderH = res.height
- })
- })
- },
- onReady() {},
- onPullDownRefresh() {
- // this.getTppe()
- },
- methods: {
- tabsChange2(index) {
- this.tabCurrent = index;
- this.param.order = this.typeList[index].order
- this.getShopList()
- },
- confirmSelect(e) {
- this.selectIndex = e[0]
- this.sIndex = e[0]
- this.getShopList()
- },
- // 跳转 门店详情
- goShopDetails(item) {
- uni.navigateTo({
- url: "/pages/nearbyShop/shopDetail?shopId=" + item.shop_id
- })
- },
- // 跳转商品详情
- goDetails(v) {
- uni.navigateTo({
- url: "/pages/convenienceService/shopDetails?shopId=" + v.shop_id
- })
- },
- // 获取城市
- getCitys() {
- this.$http.get('/cnarea/tree-lbs').then(res => {
- if (res && res.code == 200) {
- this.cityTree = res.tree.children
- this.cityTree.forEach(v => {
- if (v.children.length <= 0) {
- v.children = [{}]
- }
- })
- }
- })
- },
- // 选择地区
- addressConfirm(e) {
- // this.param.city_code = e[2].value ? e[2].value : e[1].value ? e[1].value : e[0].value;
- this.cityName = e[2].label ? e[2].label : e[1].label ? e[1].label : e[0].label;
- this.param.area_code = e[2].value ? e[2].value : e[1].value ? e[1].value : e[0].value;
- this.getShopList()
- },
- // 便民服务分类
- getTppe(id) {
- let that = this
- this.$http.get('/union/business/classify/list')
- .then(res => {
- if (res.code == 200) {
- this.selector = [{
- name: "全部分类",
- id: ""
- }, ...res.list];
- if (id) {
- this.selector.forEach((v, i) => {
- if (v.id == id) {
- this.selectIndex = i
- }
- })
- }
- // #ifdef H5
- this.getShopList()
- // #endif
- console.log('666666666666')
- uni.getLocation({
- type: 'gcj02',
- geocode: true,
- success: function(res) {
- // that.cityName = res.address ? res.address.district : '';
- that.param.lon = res.longitude;
- that.param.lat = res.latitude;
- that.getShopList()
- if (!that.cityName) {
- uni.request({
- url: `https://restapi.amap.com/v3/geocode/regeo?key=47798318a0d39673a1fb9729aa6a468a&location=${res.longitude+','+res.latitude}`, //仅为示例,并非真实接口地址。
- method: "GET",
- header: {
- "content-type": "application/x-www-form-urlencoded"
- },
- success: (re) => {
- console.log(re);
- that.cityName = re.data.regeocode
- .addressComponent.city;
- }
- });
- }
- },
- complete(e) {
- console.log(e)
- }
- });
- }
- })
- .finally(() => {
- })
- },
- // 门店列表
- getShopList() {
- let that = this
- if (this.selectIndex === null) {
- // this.param.category_id = null
- } else {
- this.param.classify_id = this.selector[this.selectIndex].id
- }
- console.log(this.param, 1111)
- this.$http.get('/service/goods/nearby', this.param).then(res => {
- uni.stopPullDownRefresh()
- if (res && res.code == 200) {
- this.list = res.list;
- }
- })
- },
- // 搜索防抖
- search() {
- clearTimeout(this.setTime)
- this.setTime = setTimeout(() => {
- this.getShopList()
- }, 1000)
- },
- }
- }
- </script>
- <style lang="scss" scoped>
- .top-box {
- position: fixed;
- background-color: #fff;
- z-index: 3;
- }
- .top-nav {
- height: 120rpx;
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0 30rpx;
- background-color: #fff;
- }
- .city-text {
- margin-right: 20rpx;
- font-size: 30rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- text-align: center;
- color: #666666;
- display: flex;
- align-items: center;
- view {
- max-width: 100rpx;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- }
- image {
- width: 26rpx;
- height: 36rpx;
- margin-right: 10rpx;
- vertical-align: middle;
- }
- }
- .searchBox {
- width: 560rpx;
- display: flex;
- padding: 10rpx 27rpx;
- border: 1rpx solid #CCCCCC;
- border-radius: 10rpx;
- display: flex;
- align-items: center;
- image {
- width: 35rpx;
- height: 35rpx;
- margin-right: 15rpx;
- flex-shrink: 0;
- }
- input {
- text-align: left;
- }
- }
- .tabsBox {
- width: 100%;
- background-color: #fff;
- .tabsBox_tabs {
- padding: 0 10rpx;
- /deep/ .u-tab-item {
- font-weight: 700;
- }
- }
- }
- .type-box {
- display: flex;
- align-items: center;
- padding: 0 40rpx 20rpx;
- justify-content: space-between;
- .item {
- display: flex;
- font-size: 28rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- color: #4d4d4d;
- align-items: center;
- color: #4D4D4D;
- &:first-child {
- min-width: 142rpx;
- }
- image {
- width: 14rpx;
- height: 10rpx;
- margin-left: 10rpx;
- vertical-align: middle;
- }
- }
- .activeCls {
- color: #FA6138;
- }
- .item2 {
- margin-left: 100rpx;
- padding-top: 20rpx;
- }
- }
- .content-box {
- padding: 0 30rpx;
- }
- .shopListBox {
- padding: 0 30rpx;
- .shopListBox_item {
- margin-top: 30rpx;
- }
- .shopItem {
- // border-bottom: 1rpx solid #E6E6E6;
- padding-bottom: 40rpx;
- margin-bottom: 40rpx;
- .shopItem_title {
- font-size: 34rpx;
- color: #1A1A1A;
- font-weight: 700;
- margin-bottom: 20rpx;
- }
- .shopItem_data {
- display: flex;
- align-items: center;
- justify-content: space-between;
- font-size: 26rpx;
- image {
- width: 22rpx;
- height: 30rpx;
- }
- >view {
- display: flex;
- align-items: center;
- image {
- margin-right: 10rpx;
- }
- }
- .shopItem_data_distance {
- color: #666666;
- }
- }
- .gooodsBox {
- .gooods_item {
- display: flex;
- margin-top: 20rpx;
- image {
- width: 136rpx;
- height: 136rpx;
- margin-right: 35rpx;
- border-radius: 10rpx;
- flex-shrink: 0;
- }
- .gooods_item_r {
- display: flex;
- flex-direction: column;
- justify-content: space-around;
- >view {
- display: flex;
- align-items: center;
- }
- .gooods_item_r_title {
- font-size: 26rpx;
- color: #1A1A1A;
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- }
- .gooods_item_r_price {
- font-size: 36rpx;
- color: #00BF5A;
- font-weight: 600;
- text {
- font-size: 20rpx;
- display: inline-block;
- margin-right: 10rpx;
- }
- }
- .gooods_item_r_expense {
- font-size: 26rpx;
- color: #666666;
- margin-left: 52rpx;
- }
- }
- }
- }
- .lookOther {
- font-size: 24rpx;
- color: #333333;
- width: 288rpx;
- height: 59rpx;
- border-radius: 8rpx;
- background: #F2F2F2;
- display: flex;
- align-items: center;
- justify-content: center;
- margin: 20rpx auto 0;
- }
- }
- .item {
- display: flex;
- align-items: center;
- padding: 30rpx 0;
- // border-bottom: 1rpx solid #e6e6e6;
- .shop-img {
- width: 162rpx;
- height: 158rpx;
- margin-right: 40rpx;
- border-radius: 10rpx;
- overflow: hidden;
- flex-shrink: 0;
- image {
- width: 100%;
- height: 100%;
- }
- }
- .right {
- flex: 1;
- width: 0;
- .score-box,
- .address-box,
- .location2-box {
- display: flex;
- align-items: center;
- font-size: 24rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- }
- .location1,
- .location2 {
- width: 20rpx;
- height: 27rpx;
- flex-shrink: 0;
- margin-right: 9rpx;
- }
- .location2 {
- width: 23rpx;
- height: 27rpx;
- }
- .light-start,
- .startt {
- width: 30rpx;
- height: 30rpx;
- margin-right: 12rpx;
- }
- .title {
- margin-bottom: 18rpx;
- font-size: 28rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- color: #1a1a1a;
- }
- .score-box {
- align-items: normal;
- margin-bottom: 10rpx;
- font-family: PingFang SC, PingFang SC-Semibold;
- color: #333333;
- .score {
- flex-shrink: 0;
- }
- .score-text {
- font-size: 24rpx;
- font-family: PingFang SC, PingFang SC-Medium;
- font-weight: 500;
- text-align: left;
- color: #333333;
- flex-shrink: 0;
- }
- .ju {
- margin-left: 23rpx;
- font-size: 24rpx;
- color: #808080;
- text-align: left;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- }
- .address-box {
- // margin-bottom: 10rpx;
- font-family: PingFang SC;
- color: #666666;
- justify-content: space-between;
- .left {
- flex: 1;
- width: 0;
- display: flex;
- align-items: center;
- font-size: 24rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- text-align: left;
- color: #333333;
- }
- .district {
- color: #1a1a1a;
- margin-right: 40rpx;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .goShopping {
- display: flex;
- align-items: center;
- font-size: 40rpx;
- color: #FA6138;
- flex-shrink: 0;
- .text {
- font-size: 24rpx;
- font-family: PingFang SC, PingFang SC-Medium;
- font-weight: 500;
- text-align: left;
- color: #666666;
- }
- }
- }
- .location2-box {
- color: #333333;
- view {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- }
- }
- }
- }
- </style>
|