465 lines
12 KiB
Vue
465 lines
12 KiB
Vue
<template>
|
||
<div>
|
||
<div v-if="isShopListBtn === false">
|
||
<div class="shoplist-service">
|
||
<div style="display:flex;align-items:center;">
|
||
|
||
<image mode="aspectFit" src="https://eshangtech.com/ShopICO/icos/shop-dw.png" style="margin-right:8rpx;width:33rpx;height:33rpx;"></image>
|
||
|
||
<span class="service-name" style="flex:5">
|
||
<!-- 萧山服务区 -->
|
||
{{serverPart.ServerPart_Name}}
|
||
</span>
|
||
|
||
</div>
|
||
<div class="service-btn" @click="toggleSever">更换服务区<span class='sj'></span></div>
|
||
</div>
|
||
<!-- 门店列表 -->
|
||
<div class="shoplist">
|
||
|
||
<div class="shop-unit " v-for="(item,o) in shopData" :key="o">
|
||
<div class="coupon-card" @click="goShop(item)">
|
||
<div class="conpon-img">
|
||
<image :src="item.MERCHANTS_LOGO || 'https://eshangtech.com/ShopICO/no-picture.png'"></image>
|
||
</div>
|
||
<div style="flex:7;">
|
||
<div class="flex-b">
|
||
<span class="coupon-title">{{item.MERCHANTS_NAME}}</span>
|
||
<span class="title-ico" v-if="item.SCANCODE_ORDER===1"></span>
|
||
</div>
|
||
<div class="flex-s">
|
||
<van-rate
|
||
:value='item.MERCHANTS_SCORE'
|
||
size="12"
|
||
allow-half=true
|
||
color="#f28c44"
|
||
void-color="#eee"
|
||
void-icon="star"
|
||
readonly
|
||
>
|
||
</van-rate>
|
||
<span class="text263 mr32 ">{{" "+item.MERCHANTS_SCORE}}</span>
|
||
<span class="text263">月售{{item.MONTHLYSALES}}</span>
|
||
</div>
|
||
<div class="flex-s text246">
|
||
<span class="text246 mr32 icon-trade">{{item.SHOPTRADE_TEXT || "品类"}}</span>
|
||
<span class="text246">人均 ￥{{item.PERCAPITA}}</span>
|
||
</div>
|
||
<div class="flex-b mtb16">
|
||
<span class="shop-comment-text">{{item.COMMENT ? '"'+item.COMMENT+'"' : '"等你来评价哟"'}}</span>
|
||
<span v-show="item.CouponList.length>0" class="icon-coupon">优惠券</span>
|
||
</div>
|
||
<hr/>
|
||
</div>
|
||
<!-- <image class="my-ico4" src="https://eshangtech.com/ShopICO/you-ico.png"></image> -->
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="loading-text" v-if="shopData.length>0 ">{{pageMsg.isLoadMore? '正在加载数据...':'——— 尽请期待更多精彩 ———'}}</div>
|
||
<div v-if="pageMsg.isLoadMore===false">
|
||
<no-data :text="''" :isShow="shopData.length" />
|
||
</div>
|
||
<div v-if="isShopListBtn === true" class="set-qx">
|
||
|
||
<!-- <div >开通权限，我们才能提供附近的服务区门店信息给您！</div> -->
|
||
<!-- <div v-else-if="isShopListShow === false">开启GPS刷新页面，我们才能提供附近的服务区门店信息给您！</div> -->
|
||
<!-- <div v-else-if="isShopListBtn && isShopListShow === false">开启GPS或者微信权限，我们才能提供附近的服务区门店信息给您！</div> -->
|
||
<button type="primary" @click="bindopensetting" open-type="openSetting" @opensetting='bindopensetting' class="set-btn" >开启定位</button>
|
||
<!-- <div>未开启GPS，我们才能提供附近的服务区门店信息给您！</div>
|
||
<div @click="open" class="set-btn">开通权限</div> -->
|
||
</div>
|
||
<van-popup :show="isShow"
|
||
position="bottom"
|
||
overlay="false"
|
||
@close="onClose">
|
||
<van-picker show-toolbar @cancel="isShow=false" @confirm="chosePart" :columns="serverList" value-key="showName"/>
|
||
</van-popup>
|
||
<!-- <popGet/> -->
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import noData from '@/components/noData.vue'
|
||
// import { CITY_GET_LOCATION } from '@/store/mutation-types'
|
||
import { mapMutations, mapGetters } from 'vuex'
|
||
export default {
|
||
data () {
|
||
return {
|
||
isShow: false,
|
||
shopData: [],
|
||
isShopListShow: true,
|
||
isShopListBtn: false,
|
||
isHidden: false, // 控制折叠
|
||
serverPartList: [],
|
||
serverPart: {},
|
||
currentIndex: 0,
|
||
canIuse: false,
|
||
sessionKey: '',
|
||
pageMsg: {
|
||
pageSize: 10,
|
||
pageIndex: 1,
|
||
total: 0,
|
||
isLoadMore: false
|
||
}
|
||
}
|
||
},
|
||
components: {
|
||
noData
|
||
},
|
||
computed: {
|
||
...mapGetters({
|
||
homeserverPart: 'serverPart',
|
||
// 'provinceCode': 'provinceCode',
|
||
'user': 'user',
|
||
'serverList': 'severList',
|
||
'appointServerPart': 'appointServerPart'
|
||
})
|
||
},
|
||
methods: {
|
||
// ...mapActions('city', {
|
||
// 'getLocation': CITY_GET_LOCATION
|
||
// }),
|
||
...mapMutations({
|
||
// 'setprovinceCode': 'setprovinceCode',
|
||
setSeverList: 'severList',
|
||
setServerPart: 'setAppointServerPart',
|
||
'setArea': 'setHomeServer'
|
||
}),
|
||
|
||
toggleSever () {
|
||
if (this.serverList.length > 0) {
|
||
this.isShow = !this.isShow
|
||
} else {
|
||
mpvue.showToast({title: '没有可选择服务区数据。', icon: 'none'})
|
||
}
|
||
},
|
||
collapse (item) {
|
||
item.isShow = !item.isShow
|
||
// this.$forceUpdate()
|
||
},
|
||
getShopList () {
|
||
let _this = this
|
||
_this.$api.getCoop({
|
||
action_type: 'GetSellerList',
|
||
showSales: 1,
|
||
showCoupon: 1,
|
||
showComment: 1,
|
||
serverpartId: this.serverPart.ServerPart_Id,
|
||
provinceCode: this.serverPart.ProvinceCode,
|
||
scancodeOrder: 1,
|
||
pageSize: _this.pageMsg.pageSize,
|
||
pageIndex: _this.pageMsg.pageIndex
|
||
}).then(function (data) {
|
||
if (data.ResultCode === '100') {
|
||
data.Data.List.map(n => {
|
||
if (n.COUPON_TYPE === 1000) {
|
||
n.coast = Math.round((n.WITH_AMOUNT - n.USED_AMOUNT) * 100) / 100
|
||
}
|
||
})
|
||
_this.shopData = _this.shopData.concat(data.Data.List)
|
||
if (data.Data.TotalCount > _this.shopData.length) {
|
||
_this.pageMsg.isLoadMore = true
|
||
} else {
|
||
_this.pageMsg.isLoadMore = false
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
getLocalServer () { // 根据定位获取周边服务区
|
||
let _this = this
|
||
mpvue.choosePoi({
|
||
type: 'wgs84',
|
||
success: function (res) {
|
||
let latitude = res.latitude
|
||
let longitude = res.longitude
|
||
_this.$api.getCoop({
|
||
action_type: 'getServerPartByLocation',
|
||
action_data: latitude,
|
||
action_record: longitude,
|
||
distance: 150,
|
||
type: 1000
|
||
}).then(function (data) {
|
||
if (data.ResultCode === '100') {
|
||
let _data = data.Data.List
|
||
_data.map(n => { n.showName = n.ServerPart_Name + '(' + Math.round(n.Distance * 100) / 100 + 'km)' })
|
||
_this.serverPartList = _data
|
||
_this.setSeverList(_data)
|
||
let hasIt = _data.findIndex(element => {
|
||
return _this.serverPart.ServerPart_Id === element.ServerPart_Id
|
||
})
|
||
if (hasIt === -1) {
|
||
_this.serverPart = _data[0]
|
||
_this.setArea(_data[0])
|
||
// _this.setServerPart(_data[0])
|
||
}
|
||
_this.getShopList()
|
||
_this.isShopListBtn = false
|
||
}
|
||
})
|
||
},
|
||
fail (res) {
|
||
_this.isShopListBtn = true
|
||
}
|
||
})
|
||
},
|
||
bindopensetting (e) {
|
||
if (e.mp.detail.authSetting && e.mp.detail.authSetting['scope.userLocation']) {
|
||
this.getLocalServer()
|
||
}
|
||
},
|
||
goShop (item) {
|
||
let id = item.SERVERPARTSHOP_IDS.split(',')[0]
|
||
// let arr = {
|
||
// id: id,
|
||
// shopName: item.MERCHANTS_NAME,
|
||
// serverpartId: item.SERVERPART_ID
|
||
|
||
// }
|
||
// this.setprovinceCode(item.PROVINCE_CODE)
|
||
// this.$store.commit('nowStore', arr)
|
||
mpvue.navigateTo({url: '/pages/shopPages/shop/main?id=' + id + '&mid=' + item.MERCHANTS_ID + '&province=' + item.PROVINCE_CODE})
|
||
},
|
||
chosePart (event) {
|
||
let index = event.target.index
|
||
this.serverPart = this.serverList[index]
|
||
this.setServerPart(this.serverList[index])
|
||
this.pageMsg.pageIndex = 1
|
||
this.pageMsg.isLoadMore = true
|
||
this.shopData = []
|
||
this.onClose()
|
||
this.getShopList()
|
||
},
|
||
onClose () {
|
||
this.isShow = false
|
||
}
|
||
},
|
||
onReachBottom () {
|
||
if (this.pageMsg.isLoadMore) {
|
||
this.pageMsg.pageIndex += 1
|
||
this.getShopList()
|
||
}
|
||
},
|
||
onShow () {
|
||
if (this.homeserverPart.ServerPart_Id === this.appointServerPart.ServerPart_Id) {
|
||
if (this.serverPart.ServerPart_Id !== this.appointServerPart.ServerPart_Id) {
|
||
this.serverPart = this.homeserverPart
|
||
this.shopData = []
|
||
this.pageMsg.pageIndex = 1
|
||
this.pageMsg.isLoadMore = true
|
||
// this.getLocalServer()
|
||
this.getShopList()
|
||
}
|
||
}
|
||
},
|
||
onPullDownRefresh () {
|
||
let _this = this
|
||
_this.shopData = []
|
||
_this.pageMsg.isLoadMore = true
|
||
_this.pageMsg.pageIndex = 1
|
||
_this.getLocalServer()
|
||
|
||
setTimeout(function () {
|
||
mpvue.stopPullDownRefresh()
|
||
}, 1000)
|
||
},
|
||
onLoad () {
|
||
this.$utils.addUserBehaviorNew();
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus" scoped>
|
||
.mr32
|
||
margin-right 32rpx
|
||
.mt8
|
||
margin-top 16rpx
|
||
.text263
|
||
font-size 26rpx
|
||
color #333
|
||
.text246
|
||
font-size 24rpx
|
||
color #666
|
||
.flex-s
|
||
display flex
|
||
align-items center
|
||
.flex-b
|
||
display flex
|
||
align-items center
|
||
justify-content space-between
|
||
.mtb16
|
||
margin 16rpx 0 24rpx 0
|
||
hr
|
||
color #eeeeee
|
||
height 2rpx
|
||
width 100%
|
||
background: #eee
|
||
|
||
.shoplist-service {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 20rpx 30rpx;
|
||
font-size: 24rpx;
|
||
height: 64rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
background:#fff;
|
||
}
|
||
.service-btn
|
||
border-radius 8rpx
|
||
/* width: 120rpx; */
|
||
height 40rpx
|
||
color #d5c59d
|
||
background #383838
|
||
padding 8rpx 16rpx
|
||
border-radius 16rpx
|
||
line-height 40rpx
|
||
display flex
|
||
align-items baseline
|
||
|
||
|
||
.service-name {
|
||
color: #555;
|
||
font-weight: bolder;
|
||
font-size: 28rpx;
|
||
display: inline-block;
|
||
}
|
||
|
||
.sj {
|
||
width:0;
|
||
height:0;
|
||
border: 0;
|
||
border-left: 16rpx solid transparent;
|
||
border-bottom: 14rpx solid #C6A375;
|
||
margin-left: 16rpx;
|
||
}
|
||
.shoplist
|
||
|
||
margin-top 16rpx
|
||
|
||
.Service {
|
||
background-color: #f2f2f2;
|
||
}
|
||
|
||
.title-ico
|
||
background url(https://eshangtech.com/wanmeiyizhanImg/shoplist/kyy.png) no-repeat
|
||
width 80rpx
|
||
height 34rpx
|
||
background-size contain
|
||
margin-left 16rpx
|
||
|
||
.shop-unit
|
||
// margin 36rpx 36rpx
|
||
padding 26rpx 26rpx 0 26rpx
|
||
background-color #ffffff
|
||
// border-radius 16rpx
|
||
.icon-coupon
|
||
background url(https://eshangtech.com/ShopICO/icos/y-yhq.png) no-repeat left center
|
||
background-size contain
|
||
padding-left 40rpx
|
||
height 27rpx
|
||
line-height 27rpx
|
||
font-size 24rpx
|
||
color #EC5930
|
||
.icon-trade
|
||
display flex
|
||
align-items center
|
||
.icon-trade:before
|
||
content ''
|
||
background url(https://eshangtech.com/wanmeiyizhanImg/trade.png) no-repeat center
|
||
background-size contain
|
||
width 27rpx
|
||
height 24rpx
|
||
margin-right 4rpx
|
||
|
||
.shop-comment-text
|
||
color #F3B680
|
||
background #FDF5EC
|
||
padding 0 4rpx
|
||
border-radius 2rpx
|
||
font-size 20rpx
|
||
max-width 318rpx
|
||
.coupon-card
|
||
display flex
|
||
// justify-content space-between
|
||
align-items center
|
||
font-family 'PingFang SC '
|
||
// padding-bottom 24rpx
|
||
|
||
.conpon-img
|
||
margin-right 24rpx
|
||
width 190rpx
|
||
height 190rpx
|
||
.conpon-img image
|
||
width 180rpx
|
||
height 180rpx
|
||
border-radius 8rpx
|
||
.coupon-title
|
||
font-size 30rpx
|
||
font-family 'PingFang SC Bold'
|
||
color #313131
|
||
font-weight bolder
|
||
.coupon-store
|
||
font-size 28rpx
|
||
color #444
|
||
|
||
.coupon-detail
|
||
display flex
|
||
justify-content space-between
|
||
align-items flex-end
|
||
.coupon-price
|
||
color #D74942
|
||
font-size 40rpx
|
||
.coupon-price-unit
|
||
color #d7493f
|
||
font-size 20rpx
|
||
.coupon-price-though
|
||
// text-decoration line-through
|
||
color #a1a1a1
|
||
font-size 24rpx
|
||
margin-left 32rpx
|
||
.coupon-price-sell
|
||
color #454246
|
||
font-size 24rpx
|
||
display flex
|
||
justify-content space-between
|
||
align-items center
|
||
.coupon-get-btn
|
||
background #C6A375
|
||
border-radius 32rpx
|
||
width 164rpx
|
||
height 50rpx
|
||
color #fff
|
||
line-height 50rpx
|
||
font-size 24rpx
|
||
text-align center
|
||
box-shadow none
|
||
|
||
// 定位权限
|
||
.set-qx
|
||
position fixed
|
||
top 50%
|
||
left 50%
|
||
width 80%
|
||
transform translate(-50%,-50%)
|
||
text-align center
|
||
font-size 30rpx
|
||
|
||
.set-btn
|
||
padding 0rpx 40rpx
|
||
/* background #444 */
|
||
display inline-block
|
||
border-radius 10rpx
|
||
text-align center
|
||
margin-top 60rpx
|
||
font-size 24rpx
|
||
|
||
.loading-text
|
||
text-align center
|
||
font-size 24rpx
|
||
color #a1a1a1
|
||
line-height 80rpx
|
||
</style> |