|
|
@@ -1,257 +1,267 @@
|
|
|
<template>
|
|
|
- <view class="s_page">
|
|
|
- <map class="myMap" :latitude="latitude" :longitude="longitude" :markers="markers" style="width: 750rpx;flex: 1;"
|
|
|
- scale="11"></map>
|
|
|
- <!-- 左上角返回按钮 -->
|
|
|
- <image @tap.stop='navBack' class="map-back" src="/static/images/map_back.png" mode=""
|
|
|
- :style="{top:StatusBar+'px'}"></image>
|
|
|
- <!-- 申请记录按钮 -->
|
|
|
- <view class="record-application" @tap.stop="toNavigate" :style="{top:StatusBar+'px'}">
|
|
|
- <text class="record-application-text">申请记录</text>
|
|
|
- </view>
|
|
|
- <!-- 列表 -->
|
|
|
- <view class="bottom-con">
|
|
|
- <list @loadmore="loadMore" loadmoreoffset="20" show-scrollbar>
|
|
|
- <cell class="item" v-for="item in websitList" :key="item.shopId">
|
|
|
- <view class="mb20 flex_abs mt20">
|
|
|
- <text class="fw600 f32_302">{{item.shopName}}</text>
|
|
|
- <text class="f24_999">距离{{(item.distance)}}km</text>
|
|
|
- </view>
|
|
|
- <view class="flex_abs">
|
|
|
- <text class="f28_666" style="width: 520rpx;">地址：{{item.address}}</text>
|
|
|
- <tag
|
|
|
- style="width: 150rpx;height: 50rpx;background-image: linear-gradient(to bottom right, #7FDAFF, #6DA7FF);border-radius: 30rpx;">
|
|
|
- <text @tap.stop="toApplicationPartsForm(item)" class="f24_FFF">申请</text>
|
|
|
- </tag>
|
|
|
- </view>
|
|
|
- </cell>
|
|
|
- </list>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="s_page">
|
|
|
+ <map
|
|
|
+ class="myMap"
|
|
|
+ :latitude="latitude"
|
|
|
+ :longitude="longitude"
|
|
|
+ :markers="markers"
|
|
|
+ style="width: 750rpx; flex: 1"
|
|
|
+ scale="11"
|
|
|
+ ></map>
|
|
|
+ <!-- 左上角返回按钮 -->
|
|
|
+ <image
|
|
|
+ @tap.stop="navBack"
|
|
|
+ class="map-back"
|
|
|
+ src="/static/images/map_back.png"
|
|
|
+ mode=""
|
|
|
+ :style="{ top: StatusBar + 'px' }"
|
|
|
+ ></image>
|
|
|
+ <!-- 申请记录按钮 -->
|
|
|
+ <view class="record-application" @tap.stop="toNavigate" :style="{ top: StatusBar + 'px' }">
|
|
|
+ <text class="record-application-text">申请记录</text>
|
|
|
+ </view>
|
|
|
+ <!-- 列表 -->
|
|
|
+ <view class="bottom-con">
|
|
|
+ <list @loadmore="loadMore" loadmoreoffset="20" show-scrollbar>
|
|
|
+ <cell class="item" v-for="item in websitList" :key="item.websitId">
|
|
|
+ <view class="mb20 flex_abs mt20">
|
|
|
+ <text class="fw600 f32_302">{{ item.websitName }}</text>
|
|
|
+ <text class="f24_999">距离{{ item.distance }}km</text>
|
|
|
+ </view>
|
|
|
+ <view class="flex_abs">
|
|
|
+ <text class="f28_666" style="width: 520rpx">地址：{{ item.address }}</text>
|
|
|
+ <tag
|
|
|
+ style="
|
|
|
+ width: 150rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ background-image: linear-gradient(to bottom right, #7fdaff, #6da7ff);
|
|
|
+ border-radius: 30rpx;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <text @tap.stop="toApplicationPartsForm(item)" class="f24_FFF">申请</text>
|
|
|
+ </tag>
|
|
|
+ </view>
|
|
|
+ </cell>
|
|
|
+ </list>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- const sysInfo = uni.getSystemInfoSync();
|
|
|
+const sysInfo = uni.getSystemInfoSync()
|
|
|
import api from '@/common/http/'
|
|
|
- import tag from '@/components/tag.vue';
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- tag
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- StatusBar: sysInfo.statusBarHeight,
|
|
|
- latitude: '',
|
|
|
- longitude: '',
|
|
|
- markers: [{
|
|
|
- id: 'm_1',
|
|
|
- latitude: 23.183466,
|
|
|
- longitude: 113.35709,
|
|
|
- iconPath: '/static/images/order_call.png'
|
|
|
- }],
|
|
|
- websitList: [],
|
|
|
- page: 1,
|
|
|
- pageSize: 3,
|
|
|
- websit_number: ""
|
|
|
- };
|
|
|
- },
|
|
|
- async onLoad() {
|
|
|
- const getWebsit_number = uni.getStorageSync("userInfo")
|
|
|
- this.websit_number = getWebsit_number.websit_number
|
|
|
- await this.getCurrentWebsit()
|
|
|
- await this.getWebsitList()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- navBack() {
|
|
|
- uni.navigateBack({
|
|
|
- delta: 1
|
|
|
- })
|
|
|
- },
|
|
|
- toNavigate() {
|
|
|
- this.$navToPage({
|
|
|
- url: `/packageAttachment/pages/orderOfSales/index`
|
|
|
- })
|
|
|
- },
|
|
|
- toApplicationPartsForm(item) {
|
|
|
- var {
|
|
|
- shopId,
|
|
|
- shopName,
|
|
|
- partsWebsiteNumber
|
|
|
- } = item
|
|
|
- this.$navToPage({
|
|
|
- url: `/packageAttachment/pages/applicationParts/applicationPartsForm?shopId=${shopId}&shopName=${shopName}&partsWebsiteNumber=${partsWebsiteNumber}`
|
|
|
- })
|
|
|
- },
|
|
|
- loadMore() {
|
|
|
- this.page++
|
|
|
- this.getWebsitList()
|
|
|
- },
|
|
|
- getWebsitList() {
|
|
|
- let params = {
|
|
|
- latitude: this.latitude,
|
|
|
- longitude: this.longitude,
|
|
|
- pageNo: this.page,
|
|
|
- pageSize: this.pageSize,
|
|
|
- websiteNumber: this.websit_number
|
|
|
- }
|
|
|
- api.get('/app/buy/websit/list',params).then(res => {
|
|
|
- this.websitList = this.websitList.concat(res.data.records).filter(item => (item
|
|
|
- .partsWebsiteNumber))
|
|
|
- if (this.websitList.length != 0) {
|
|
|
- this.markers = this.websitList.map(item => {
|
|
|
- return {
|
|
|
- id: item.shopId,
|
|
|
- latitude: item.latitude,
|
|
|
- longitude: item.longitude,
|
|
|
- width: 28,
|
|
|
- height: 28,
|
|
|
- fontSize: 16,
|
|
|
- iconPath: '',
|
|
|
- callout: {
|
|
|
- content: item.shopName,
|
|
|
- padding: 5,
|
|
|
- display: 'ALWAYS',
|
|
|
- borderRadius: 5,
|
|
|
- color: '#E95505'
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- async getCurrentWebsit() {
|
|
|
- const addressInfo = await new Promise((resolve, reject) => {
|
|
|
- uni.getLocation({
|
|
|
- type: 'gcj02',
|
|
|
- geocode: true,
|
|
|
- success: res => {
|
|
|
- resolve({
|
|
|
- lat: res.latitude,
|
|
|
- lng: res.longitude,
|
|
|
- address: res.address
|
|
|
- })
|
|
|
- },
|
|
|
- fail: err => {
|
|
|
- reject(err)
|
|
|
- }
|
|
|
- })
|
|
|
- });
|
|
|
- let {
|
|
|
- lat,
|
|
|
- lng
|
|
|
- } = addressInfo
|
|
|
- this.latitude = lat
|
|
|
- this.longitude = lng
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
+import tag from '@/components/tag.vue'
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ tag
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ StatusBar: sysInfo.statusBarHeight,
|
|
|
+ latitude: '',
|
|
|
+ longitude: '',
|
|
|
+ markers: [
|
|
|
+ {
|
|
|
+ id: 'm_1',
|
|
|
+ latitude: 23.183466,
|
|
|
+ longitude: 113.35709,
|
|
|
+ iconPath: '/static/images/order_call.png'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ websitList: [],
|
|
|
+ page: 1,
|
|
|
+ pageSize: 3,
|
|
|
+ websit_number: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async onLoad() {
|
|
|
+ const getWebsit_number = uni.getStorageSync('userInfo')
|
|
|
+ this.websit_number = getWebsit_number.websit_number
|
|
|
+ await this.getCurrentWebsit()
|
|
|
+ await this.getWebsitList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ navBack() {
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: 1
|
|
|
+ })
|
|
|
+ },
|
|
|
+ toNavigate() {
|
|
|
+ this.$navToPage({
|
|
|
+ url: `/packageAttachment/pages/orderOfSales/index`
|
|
|
+ })
|
|
|
+ },
|
|
|
+ toApplicationPartsForm(item) {
|
|
|
+ var { websitId, websitName, partsWebsitNumber } = item
|
|
|
+ this.$navToPage({
|
|
|
+ url: `/packageAttachment/pages/applicationParts/applicationPartsForm?websitId=${websitId}&websitName=${websitName}&partsWebsitNumber=${partsWebsitNumber}`
|
|
|
+ })
|
|
|
+ },
|
|
|
+ loadMore() {
|
|
|
+ this.page++
|
|
|
+ this.getWebsitList()
|
|
|
+ },
|
|
|
+ getWebsitList() {
|
|
|
+ let params = {
|
|
|
+ latitude: this.latitude,
|
|
|
+ longitude: this.longitude,
|
|
|
+ pageNo: this.page,
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ websitNumber: this.websit_number
|
|
|
+ }
|
|
|
+ api.post('/app/buy/websit/list', params).then(res => {
|
|
|
+ this.websitList = this.websitList.concat(res.data.records).filter(item => item.partsWebsitNumber)
|
|
|
+ if (this.websitList.length != 0) {
|
|
|
+ this.markers = this.websitList.map(item => {
|
|
|
+ return {
|
|
|
+ id: item.websitId,
|
|
|
+ latitude: item.latitude,
|
|
|
+ longitude: item.longitude,
|
|
|
+ width: 28,
|
|
|
+ height: 28,
|
|
|
+ fontSize: 16,
|
|
|
+ iconPath: '',
|
|
|
+ callout: {
|
|
|
+ content: item.websitName,
|
|
|
+ padding: 5,
|
|
|
+ display: 'ALWAYS',
|
|
|
+ borderRadius: 5,
|
|
|
+ color: '#E95505'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async getCurrentWebsit() {
|
|
|
+ const addressInfo = await new Promise((resolve, reject) => {
|
|
|
+ uni.getLocation({
|
|
|
+ type: 'gcj02',
|
|
|
+ geocode: true,
|
|
|
+ success: res => {
|
|
|
+ resolve({
|
|
|
+ lat: res.latitude,
|
|
|
+ lng: res.longitude,
|
|
|
+ address: res.address
|
|
|
+ })
|
|
|
+ },
|
|
|
+ fail: err => {
|
|
|
+ reject(err)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ let { lat, lng } = addressInfo
|
|
|
+ this.latitude = lat
|
|
|
+ this.longitude = lng
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
- .confirm-btn {
|
|
|
- background-image: linear-gradient(to bottom right, #7FDAFF, #6DA7FF);
|
|
|
- }
|
|
|
+.confirm-btn {
|
|
|
+ background-image: linear-gradient(to bottom right, #7fdaff, #6da7ff);
|
|
|
+}
|
|
|
|
|
|
- .map-back {
|
|
|
- position: absolute;
|
|
|
- left: 30rpx;
|
|
|
- width: 60rpx;
|
|
|
- height: 60rpx;
|
|
|
- border-radius: 30rpx;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
+.map-back {
|
|
|
+ position: absolute;
|
|
|
+ left: 30rpx;
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
|
|
|
- .record-application {
|
|
|
- position: absolute;
|
|
|
- right: 30rpx;
|
|
|
- width: auto;
|
|
|
- height: 60rpx;
|
|
|
- border-radius: 30rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 20rpx;
|
|
|
- background: #6DA7FF;
|
|
|
- }
|
|
|
+.record-application {
|
|
|
+ position: absolute;
|
|
|
+ right: 30rpx;
|
|
|
+ width: auto;
|
|
|
+ height: 60rpx;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ background: #6da7ff;
|
|
|
+}
|
|
|
|
|
|
- .record-application-text {
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 500;
|
|
|
- text-align: center;
|
|
|
- color: #ffffff !important;
|
|
|
- line-height: 60rpx;
|
|
|
- }
|
|
|
+.record-application-text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff !important;
|
|
|
+ line-height: 60rpx;
|
|
|
+}
|
|
|
|
|
|
- .bottom-con {
|
|
|
- width: 750rpx;
|
|
|
- padding-top: 25rpx;
|
|
|
- padding-left: 25rpx;
|
|
|
- padding-bottom: 30rpx;
|
|
|
- padding-right: 25rpx;
|
|
|
- // border-radius: 40rpx;
|
|
|
- border-top-right-radius: 40rpx;
|
|
|
- border-top-left-radius: 40rpx;
|
|
|
- // box-shadow: 0px -10rpx 40rpx 0px rgba(0, 0, 0, 0.05);
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- background-color: #FFFFFF;
|
|
|
- z-index: 100;
|
|
|
- // overflow:hidden;
|
|
|
- height: 500rpx;
|
|
|
- }
|
|
|
+.bottom-con {
|
|
|
+ width: 750rpx;
|
|
|
+ padding-top: 25rpx;
|
|
|
+ padding-left: 25rpx;
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+ padding-right: 25rpx;
|
|
|
+ // border-radius: 40rpx;
|
|
|
+ border-top-right-radius: 40rpx;
|
|
|
+ border-top-left-radius: 40rpx;
|
|
|
+ // box-shadow: 0px -10rpx 40rpx 0px rgba(0, 0, 0, 0.05);
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ background-color: #ffffff;
|
|
|
+ z-index: 100;
|
|
|
+ // overflow:hidden;
|
|
|
+ height: 500rpx;
|
|
|
+}
|
|
|
|
|
|
- .item {
|
|
|
- background-color: #FFFFFF;
|
|
|
- overflow: hidden;
|
|
|
- border-bottom: 2rpx solid #F7F7F7;
|
|
|
- padding-bottom: 20rpx;
|
|
|
- }
|
|
|
+.item {
|
|
|
+ background-color: #ffffff;
|
|
|
+ overflow: hidden;
|
|
|
+ border-bottom: 2rpx solid #f7f7f7;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+}
|
|
|
|
|
|
- .flex_abs {
|
|
|
- flex-direction: row;
|
|
|
- }
|
|
|
+.flex_abs {
|
|
|
+ flex-direction: row;
|
|
|
+}
|
|
|
|
|
|
- .mask {
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- bottom: 0;
|
|
|
- right: 0;
|
|
|
- background-color: rgba(0, 0, 0, 0.3);
|
|
|
- z-index: 1000;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
+.mask {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ background-color: rgba(0, 0, 0, 0.3);
|
|
|
+ z-index: 1000;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
|
|
|
- .closes {
|
|
|
- flex-direction: row;
|
|
|
- justify-content: flex-end;
|
|
|
- }
|
|
|
+.closes {
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
|
|
|
- .closes-img {
|
|
|
- height: 40rpx;
|
|
|
- width: 40rpx;
|
|
|
- }
|
|
|
+.closes-img {
|
|
|
+ height: 40rpx;
|
|
|
+ width: 40rpx;
|
|
|
+}
|
|
|
|
|
|
- .phone-con {
|
|
|
- width: 540rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- background-color: #ffffff;
|
|
|
- text-align: center;
|
|
|
- padding: 10rpx 30rpx 40rpx 30rpx;
|
|
|
- position: relative;
|
|
|
+.phone-con {
|
|
|
+ width: 540rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ padding: 10rpx 30rpx 40rpx 30rpx;
|
|
|
+ position: relative;
|
|
|
|
|
|
- .confirm-btn {
|
|
|
- font-size: 32rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
+ .confirm-btn {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
|
|
|
- .iconfont {
|
|
|
- color: #E5E5E5;
|
|
|
- position: absolute;
|
|
|
- right: 30rpx;
|
|
|
- top: 30rpx;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- }
|
|
|
+ .iconfont {
|
|
|
+ color: #e5e5e5;
|
|
|
+ position: absolute;
|
|
|
+ right: 30rpx;
|
|
|
+ top: 30rpx;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
linwenxin