|
@@ -0,0 +1,317 @@
|
|
|
+<template>
|
|
|
+ <div class="container" >
|
|
|
+ <div class="container-bundleName">{{bundleName?bundleName:''}}</div>
|
|
|
+ <scroll-view scroll-y class="store-content">
|
|
|
+ <v-card style="height:auto" :thumb="item.icon" v-for="(item, index) in storeList" :key="item.id">
|
|
|
+ <div class="store-info">
|
|
|
+ <div class="title txt-clip">{{item.name}}</div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="left">
|
|
|
+ <div class="desc">
|
|
|
+ <van-rate :value="item.star" size="10" color="#ff8811" allow-half void-color="#eee" void-icon="star" />
|
|
|
+ <span class="rate-num">{{item.star}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="phone">
|
|
|
+ <van-icon name="phone" class="phone-icon" />
|
|
|
+ <div @click="callPhone(item.managerMobile)"> {{item.managerMobile}} </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right" v-if="item.distance&&item.distance>=0" @click="openLocation(item)">
|
|
|
+ <div class="navigation">
|
|
|
+ <van-icon name="location" />
|
|
|
+ 导航
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 距您{{item.distance}}KM
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div>
|
|
|
+ {{item.addrProvinceName + item.addrCityName + item.addrDistrictName + item.addrDetail}}
|
|
|
+ </div>
|
|
|
+ <div class="tags">
|
|
|
+ <div class="tag" v-for="(tag, index2) in item.storeBizList" :key="tag.id">{{tag.bizTypeName}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </v-card>
|
|
|
+ <no-data :options="storeList" name="暂无数据"/>
|
|
|
+ </scroll-view>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// import { getLookUpData } from '@/api/api';
|
|
|
+import { getBundleStore } from '@/api/store.js'
|
|
|
+import NoData from '@/components/NoData';
|
|
|
+import storage from '@/utils/storage.js'
|
|
|
+// import { province, city, area } from '@/api/address.js'
|
|
|
+export default {
|
|
|
+ name: 'packageDetail',
|
|
|
+ components: { 'no-data': NoData },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ storeList: [],
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ isloaded: false, // 判断是否请求接口完成
|
|
|
+ usedBundleId:'',
|
|
|
+ bundleName:'' ,// 套餐名称
|
|
|
+ latitude:'', // 当前位置经度
|
|
|
+ longitude:'' // 当前位置维度
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 页面初始化
|
|
|
+ pageInit () {
|
|
|
+ this.pageNo = 1;
|
|
|
+ this.storeList = [];
|
|
|
+ this.isloaded=false
|
|
|
+ },
|
|
|
+
|
|
|
+ callPhone(phone) {
|
|
|
+ wx.makePhoneCall({
|
|
|
+ phoneNumber: phone
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getStarNum(level) {
|
|
|
+ const star = (5 - 0.5 * (level - 1)).toString();
|
|
|
+ return star.indexOf('.') > -1 ? star : star + '.0';
|
|
|
+ },
|
|
|
+ openLocation(item) {
|
|
|
+ wx.openLocation({
|
|
|
+ latitude: item.lat - 0,
|
|
|
+ longitude: item.lng - 0,
|
|
|
+ name: item.name,
|
|
|
+ address: item.addrProvinceName + item.addrCityName + item.addrDistrictName + item.addrDetail
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 格式化数据
|
|
|
+ formatList(list) {
|
|
|
+ const _this = this;
|
|
|
+ if (list.length) {
|
|
|
+ list.forEach(item => {
|
|
|
+ item.distance = item.distance ? (item.distance/1000).toFixed(2) : '';
|
|
|
+ item.star = this.getStarNum(item.level);
|
|
|
+ });
|
|
|
+ return list;
|
|
|
+ } else if( _this.isloaded && !list.length){
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ return [];
|
|
|
+ },
|
|
|
+ // 获取套餐下的适用门店
|
|
|
+ getBundleStoreList(){
|
|
|
+ const _this=this
|
|
|
+ const params={bundleId:this.usedBundleId,pageNo: this.pageNo,pageSize: this.pageSize}
|
|
|
+ if(this.latitude && this.longitude){
|
|
|
+ params.store={
|
|
|
+ lat:this.latitude,
|
|
|
+ lng:this.longitude
|
|
|
+ }
|
|
|
+ }
|
|
|
+ wx.showLoading({
|
|
|
+ mask: true,
|
|
|
+ title: '加载中'
|
|
|
+ });
|
|
|
+ getBundleStore(params).then(res=>{
|
|
|
+ setTimeout(function(){
|
|
|
+ wx.hideLoading();
|
|
|
+ },500)
|
|
|
+ if(res.status == "200"){
|
|
|
+ _this.isloaded = true
|
|
|
+ if ( _this.pageNo == 1) {
|
|
|
+ console.log(res,'----------liebiaoshuju')
|
|
|
+ // _this.storeList = res.data.list
|
|
|
+ _this.storeList = _this.formatList(res.data.list)
|
|
|
+ console.log( _this.storeList,' _this.storeList','套餐下的门店')
|
|
|
+ } else {
|
|
|
+ _this.storeList = _this.storeList.concat(_this.formatList(res.data.list))
|
|
|
+ }
|
|
|
+ let len = _this.storeList.length
|
|
|
+ if(len>=res.data.count){
|
|
|
+ if(_this.pageNo!=1){
|
|
|
+ wx.showToast({
|
|
|
+ title: '已经是最后一页'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ _this.isLastPage = true
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ wx.showToast({
|
|
|
+ title: res.message,
|
|
|
+ icon: 'none',
|
|
|
+ duration: 2500
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 监听用户上拉触底事件
|
|
|
+ onReachBottom() {
|
|
|
+ if(!this.isLastPage){
|
|
|
+ this.pageNo = this.pageNo + 1
|
|
|
+ this.getBundleStoreList()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ wx.showLoading({
|
|
|
+ mask: true,
|
|
|
+ title: '加载中'
|
|
|
+ });
|
|
|
+ this.pageInit()
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.getBundleStoreList()
|
|
|
+ },500)
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ console.log(options,"sotore index options",options.bundleName,'bundleName')
|
|
|
+ // 判断当前页面的上个页面是套餐详情页 筛选条件等不显示
|
|
|
+ if(options && options.bundleId && options.bundleName){
|
|
|
+ this.usedBundleId=options.bundleId
|
|
|
+ this.bundleName=options.bundleName
|
|
|
+ }
|
|
|
+ wx.getLocation({
|
|
|
+ type: 'wgs84',
|
|
|
+ success:(res=> {
|
|
|
+ if(res.latitude && res.longitude){
|
|
|
+ this.latitude = res.latitude
|
|
|
+ this.longitude = res.longitude
|
|
|
+ }
|
|
|
+ console.log(res,'位置信息',this.latitude,this.longitude)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="stylus">
|
|
|
+._v-card .v-card{
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ height:auto;
|
|
|
+}
|
|
|
+.vcard .van-card__img{
|
|
|
+ border-radius:5px;
|
|
|
+}
|
|
|
+.container {
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .container-bundleName{
|
|
|
+ width: 100%;
|
|
|
+ padding :8px 12px
|
|
|
+ border-bottom :1px solid #eee
|
|
|
+ }
|
|
|
+}
|
|
|
+.store-content {
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.icon {
|
|
|
+ position: relative;
|
|
|
+ top: 4rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.store-info {
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 25rpx;
|
|
|
+ height: 100%;
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .content {
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .navigation {
|
|
|
+ font-size: 1em;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 1em;
|
|
|
+ padding: 10rpx 0;
|
|
|
+ font-weight:bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .desc {
|
|
|
+ color: #80848f;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rate-num {
|
|
|
+ padding: 0 15rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .phone {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 12rpx 0;
|
|
|
+ color:#57a3f3;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tags {
|
|
|
+ margin-top: 5rpx;
|
|
|
+ display: flex;
|
|
|
+ font-size: 0.8em;
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ color: #808695;
|
|
|
+ border: 1rpx solid #ff5500;
|
|
|
+ padding: 5rpx 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag + .tag {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.select-button {
|
|
|
+ border-radius :5px;
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ top: 10px;
|
|
|
+}
|
|
|
+.checkbox-group {
|
|
|
+ padding: 5px 20px 5px 40px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.radio-group {
|
|
|
+ max-height: 280px;
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+.checkbox-item {
|
|
|
+ width: 40vw;
|
|
|
+ padding: 15rpx 0;
|
|
|
+}
|
|
|
+.radiobox-item {
|
|
|
+ width :100%;
|
|
|
+ padding :10px 0;
|
|
|
+ display : flex;
|
|
|
+ align-items : center;
|
|
|
+ border-bottom :1px solid #9999;
|
|
|
+ .van-radio__label{
|
|
|
+ flex-grow : 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+.toolbar-detail-control {
|
|
|
+ display: flex;
|
|
|
+ .btn {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|