|
@@ -1,95 +1,104 @@
|
|
<template>
|
|
<template>
|
|
- <view
|
|
|
|
- class="u-swiper"
|
|
|
|
- :style="{
|
|
|
|
|
|
+ <view class="u-swiper" :style="{
|
|
backgroundColor: bgColor,
|
|
backgroundColor: bgColor,
|
|
height: $u.addUnit(height),
|
|
height: $u.addUnit(height),
|
|
borderRadius: $u.addUnit(radius)
|
|
borderRadius: $u.addUnit(radius)
|
|
- }"
|
|
|
|
- >
|
|
|
|
- <view
|
|
|
|
- class="u-swiper__loading"
|
|
|
|
- v-if="loading"
|
|
|
|
- >
|
|
|
|
|
|
+ }">
|
|
|
|
+ <view class="u-swiper__loading" v-if="loading">
|
|
<u-loading-icon mode="circle"></u-loading-icon>
|
|
<u-loading-icon mode="circle"></u-loading-icon>
|
|
</view>
|
|
</view>
|
|
- <swiper
|
|
|
|
- v-else
|
|
|
|
- class="u-swiper__wrapper"
|
|
|
|
- :style="{
|
|
|
|
|
|
+ <swiper v-if="!loading&&type=='img'" class="u-swiper__wrapper" :style="{
|
|
height: $u.addUnit(height),
|
|
height: $u.addUnit(height),
|
|
- }"
|
|
|
|
- @change="change"
|
|
|
|
- :circular="circular"
|
|
|
|
- :interval="interval"
|
|
|
|
- :duration="duration"
|
|
|
|
- :autoplay="autoplay"
|
|
|
|
- :current="current"
|
|
|
|
- :currentItemId="currentItemId"
|
|
|
|
- :previousMargin="$u.addUnit(previousMargin)"
|
|
|
|
- :nextMargin="$u.addUnit(nextMargin)"
|
|
|
|
- :acceleration="acceleration"
|
|
|
|
- :displayMultipleItems="displayMultipleItems"
|
|
|
|
- :easingFunction="easingFunction"
|
|
|
|
- >
|
|
|
|
- <swiper-item
|
|
|
|
- class="u-swiper__wrapper__item"
|
|
|
|
- v-for="(item, index) in list"
|
|
|
|
- :key="index"
|
|
|
|
- >
|
|
|
|
- <view
|
|
|
|
- class="u-swiper__wrapper__item__wrapper"
|
|
|
|
- :style="[itemStyle(index)]"
|
|
|
|
- >
|
|
|
|
|
|
+ }" @change="change" :circular="circular" :interval="interval" :duration="duration" :autoplay="autoplay"
|
|
|
|
+ :current="current" :currentItemId="currentItemId" :previousMargin="$u.addUnit(previousMargin)"
|
|
|
|
+ :nextMargin="$u.addUnit(nextMargin)" :acceleration="acceleration"
|
|
|
|
+ :displayMultipleItems="displayMultipleItems" :easingFunction="easingFunction">
|
|
|
|
+ <swiper-item class="u-swiper__wrapper__item" v-for="(item, index) in list" :key="index">
|
|
|
|
+ <view class="u-swiper__wrapper__item__wrapper" :style="[itemStyle(index)]">
|
|
<!-- 在nvue中,image图片的宽度默认为屏幕宽度,需要通过flex:1撑开,另外必须设置高度才能显示图片 -->
|
|
<!-- 在nvue中,image图片的宽度默认为屏幕宽度,需要通过flex:1撑开,另外必须设置高度才能显示图片 -->
|
|
- <image
|
|
|
|
- class="u-swiper__wrapper__item__wrapper__image"
|
|
|
|
- v-if="getItemType(item) === 'image'"
|
|
|
|
- :src="getSource(item)"
|
|
|
|
- :mode="imgMode"
|
|
|
|
- @tap="clickHandler(index)"
|
|
|
|
- :style="{
|
|
|
|
|
|
+ <!-- borderRadius: $u.addUnit(radius) -->
|
|
|
|
+ <image class="u-swiper__wrapper__item__wrapper__image" v-if="getItemType(item) === 'image'"
|
|
|
|
+ :src="getSource(item)" :mode="imgMode" @tap="clickHandler(index)" :style="{
|
|
height: $u.addUnit(height),
|
|
height: $u.addUnit(height),
|
|
- borderRadius: $u.addUnit(radius)
|
|
|
|
- }"
|
|
|
|
- ></image>
|
|
|
|
- <video
|
|
|
|
- class="u-swiper__wrapper__item__wrapper__video"
|
|
|
|
- v-if="getItemType(item) === 'video'"
|
|
|
|
- :id="`video-${index}`"
|
|
|
|
- :enable-progress-gesture="false"
|
|
|
|
- :src="getSource(item)"
|
|
|
|
|
|
+ }" style=""></image>
|
|
|
|
+ <video class="u-swiper__wrapper__item__wrapper__video" v-if="getItemType(item) === 'video'"
|
|
|
|
+ :id="`video-${index}`" :enable-progress-gesture="false" :src="getSource(item)"
|
|
:poster="getPoster(item)"
|
|
:poster="getPoster(item)"
|
|
- :title="showTitle && $u.test.object(item) && item.title ? item.title : ''"
|
|
|
|
- :style="{
|
|
|
|
|
|
+ :title="showTitle && $u.test.object(item) && item.title ? item.title : ''" :style="{
|
|
height: $u.addUnit(height)
|
|
height: $u.addUnit(height)
|
|
- }"
|
|
|
|
- controls
|
|
|
|
- @tap="clickHandler(index)"
|
|
|
|
- ></video>
|
|
|
|
- <text
|
|
|
|
- v-if="showTitle && $u.test.object(item) && item.title && $u.test.image(getSource(item))"
|
|
|
|
- class="u-swiper__wrapper__item__wrapper__title u-line-1"
|
|
|
|
- >{{ item.title }}</text>
|
|
|
|
|
|
+ }" controls @tap="clickHandler(index)"></video>
|
|
|
|
+ <text v-if="showTitle && $u.test.object(item) && item.title && $u.test.image(getSource(item))"
|
|
|
|
+ class="u-swiper__wrapper__item__wrapper__title u-line-1">{{ item.title }}</text>
|
|
|
|
+ </view>
|
|
|
|
+ </swiper-item>
|
|
|
|
+ </swiper>
|
|
|
|
+ <swiper v-if="!loading&&type=='def'" class="u-swiper__wrapper" :style="{
|
|
|
|
+ height: $u.addUnit(height),
|
|
|
|
+ }" @change="change" :circular="circular" :interval="interval" :duration="duration" :autoplay="autoplay"
|
|
|
|
+ :current="current" :currentItemId="currentItemId" :previousMargin="$u.addUnit(previousMargin)"
|
|
|
|
+ :nextMargin="$u.addUnit(nextMargin)" :acceleration="acceleration"
|
|
|
|
+ :displayMultipleItems="displayMultipleItems" :easingFunction="easingFunction">
|
|
|
|
+ <swiper-item class="u-swiper__wrapper__item" v-for="(item, index) in defList" :key="index">
|
|
|
|
+ <view class="u-swiper__wrapper__item__wrapper" :style="[itemStyle(index)]">
|
|
|
|
+ <view class="u-swiper__wrapper__item__wrapper__image cartDef" style="background: #FDFBFA;" :style="{
|
|
|
|
+ height: $u.addUnit(height),
|
|
|
|
+ }">
|
|
|
|
+ <image src="@/static/index/logo.png" mode=""
|
|
|
|
+ style="width: 104rpx;height: 104rpx;margin-top: 64rpx;"></image>
|
|
|
|
+ <view class="companyName">
|
|
|
|
+ 吉格斯
|
|
|
|
+ </view>
|
|
|
|
+ <view class="connect">
|
|
|
|
+ <image src="@/static/index/dianhua.png" mode=""
|
|
|
|
+ style="width: 30rpx;height: 30rpx;display: inline-block;"></image>
|
|
|
|
+ <view class="txt">
|
|
|
|
+ 联系电话
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <view class="connectDes">
|
|
|
|
+ <view class="num">
|
|
|
|
+ {{item.phone}}
|
|
|
|
+ </view>
|
|
|
|
+ <view class="callBtn" @click="call(item.phone)">
|
|
|
|
+ 拨号
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <view class="addr">
|
|
|
|
+ <image src="@/static/index/weizhi.png" mode=""
|
|
|
|
+ style="width: 24rpx;height: 32rpx;display: inline-block;"></image>
|
|
|
|
+ <view class="txt">
|
|
|
|
+ {{item.addrName}}
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <view class="addrInfo">
|
|
|
|
+ <view class="txt">
|
|
|
|
+ {{item.addrInfo}}
|
|
|
|
+ </view>
|
|
|
|
+ <image @click="daohang('四川省成都市金牛区长平街70号')" src="@/static/index/daohang.png" mode=""
|
|
|
|
+ style="width: 36rpx;height: 36rpx;display: inline-block;"></image>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper-item>
|
|
</swiper>
|
|
</swiper>
|
|
<view class="u-swiper__indicator" :style="[$u.addStyle(indicatorStyle)]">
|
|
<view class="u-swiper__indicator" :style="[$u.addStyle(indicatorStyle)]">
|
|
<slot name="indicator">
|
|
<slot name="indicator">
|
|
- <u-swiper-indicator
|
|
|
|
- v-if="!loading && indicator && !showTitle"
|
|
|
|
- :indicatorActiveColor="indicatorActiveColor"
|
|
|
|
- :indicatorInactiveColor="indicatorInactiveColor"
|
|
|
|
- :length="list.length"
|
|
|
|
- :current="currentIndex"
|
|
|
|
- :indicatorMode="indicatorMode"
|
|
|
|
- ></u-swiper-indicator>
|
|
|
|
|
|
+ <u-swiper-indicator v-if="!loading && indicator && !showTitle"
|
|
|
|
+ :indicatorActiveColor="indicatorActiveColor" :indicatorInactiveColor="indicatorInactiveColor"
|
|
|
|
+ :length="list.length" :current="currentIndex" :indicatorMode="indicatorMode"></u-swiper-indicator>
|
|
</slot>
|
|
</slot>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
+ var QQMapWX = require('@/common/qqmap-wx-jssdk.min.js');
|
|
|
|
+ var qqmapsdk;
|
|
|
|
+
|
|
import props from './props.js';
|
|
import props from './props.js';
|
|
/**
|
|
/**
|
|
* Swiper 轮播图
|
|
* Swiper 轮播图
|
|
@@ -133,7 +142,7 @@
|
|
},
|
|
},
|
|
watch: {
|
|
watch: {
|
|
current(val, preVal) {
|
|
current(val, preVal) {
|
|
- if(val === preVal) return;
|
|
|
|
|
|
+ if (val === preVal) return;
|
|
this.currentIndex = val; // 和上游数据关联上
|
|
this.currentIndex = val; // 和上游数据关联上
|
|
}
|
|
}
|
|
},
|
|
},
|
|
@@ -152,17 +161,65 @@
|
|
return style
|
|
return style
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ },
|
|
|
|
+ onLoad() {
|
|
|
|
+
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- getItemType(item) {
|
|
|
|
- if (typeof item === 'string') return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image'
|
|
|
|
- if (typeof item === 'object' && this.keyName) {
|
|
|
|
- if (!item.type) return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image'
|
|
|
|
- if (item.type === 'image') return 'image'
|
|
|
|
- if (item.type === 'video') return 'video'
|
|
|
|
- return 'image'
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
|
|
+ call(phone) {
|
|
|
|
+ uni.makePhoneCall({
|
|
|
|
+ phoneNumber: phone,
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ daohang(addr) {
|
|
|
|
+ // 实例化API核心类
|
|
|
|
+ qqmapsdk = new QQMapWX({
|
|
|
|
+ key: 'W4IBZ-EVOCV-GJVPF-5QVLU-5ZJTJ-CNFUD'
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ qqmapsdk.geocoder({
|
|
|
|
+ address: addr,
|
|
|
|
+ success: function(res) {
|
|
|
|
+ console.log('根据地名解析得到的经纬度信息:', res)
|
|
|
|
+ uni.openLocation({
|
|
|
|
+ name: addr,
|
|
|
|
+ address: res.result.address_components.province + res.result
|
|
|
|
+ .address_components.city + res.result.address_components.district + res
|
|
|
|
+ .result.address_components.street + res.result.address_components
|
|
|
|
+ .street_number + '号',
|
|
|
|
+ latitude: res.result.location.lat,
|
|
|
|
+ longitude: res.result.location.lng,
|
|
|
|
+ success: function() {
|
|
|
|
+ console.log('success');
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ complete: res => {}
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ // qqmapsdk.search({
|
|
|
|
+ // keyword: '酒店',
|
|
|
|
+ // success: function(res) {
|
|
|
|
+ // console.log(res);
|
|
|
|
+ // },
|
|
|
|
+ // fail: function(res) {
|
|
|
|
+ // console.log(res);
|
|
|
|
+ // },
|
|
|
|
+ // complete: function(res) {
|
|
|
|
+ // console.log(res);
|
|
|
|
+ // }
|
|
|
|
+ // });
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ getItemType(item) {
|
|
|
|
+ if (typeof item === 'string') return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image'
|
|
|
|
+ if (typeof item === 'object' && this.keyName) {
|
|
|
|
+ if (!item.type) return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image'
|
|
|
|
+ if (item.type === 'image') return 'image'
|
|
|
|
+ if (item.type === 'video') return 'video'
|
|
|
|
+ return 'image'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
// 获取目标路径,可能数组中为字符串,对象的形式,额外可指定对象的目标属性名keyName
|
|
// 获取目标路径,可能数组中为字符串,对象的形式,额外可指定对象的目标属性名keyName
|
|
getSource(item) {
|
|
getSource(item) {
|
|
if (typeof item === 'string') return item
|
|
if (typeof item === 'string') return item
|
|
@@ -203,6 +260,7 @@
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
@import "../../libs/css/components.scss";
|
|
@import "../../libs/css/components.scss";
|
|
|
|
+ @import "./index.scss";
|
|
|
|
|
|
.u-swiper {
|
|
.u-swiper {
|
|
@include flex;
|
|
@include flex;
|
|
@@ -252,4 +310,4 @@
|
|
bottom: 10px;
|
|
bottom: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-</style>
|
|
|
|
|
|
+</style>
|