初始化万家商超用户端仓库
This commit is contained in:
608
pages/sy/selectlocationAddress/selectlocationAddress.vue
Normal file
608
pages/sy/selectlocationAddress/selectlocationAddress.vue
Normal file
@ -0,0 +1,608 @@
|
||||
<template>
|
||||
<view class="page" :style="themeColor">
|
||||
<view class="flex flex-direction flex-wrap align-stretch benben-position-layout flex selectlocationAddress_flex_0"
|
||||
:style="{height:(200+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
|
||||
<view class='flex flex-wrap align-center justify-between selectlocationAddress_fd0_0'>
|
||||
<view class='flex flex-wrap align-center selectlocationAddress_fd0_0_c0' @tap.stop="handleJumpDiy"
|
||||
data-type="back" data-url="1">
|
||||
<text class='fu-iconfont2 selectlocationAddress_fd0_0_c0_c0'></text>
|
||||
</view>
|
||||
<view class='flex flex-wrap align-center'>
|
||||
<text class='selectlocationAddress_fd0_0_c1_c0'>选择收货地址</text>
|
||||
</view>
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<view class='flex flex-wrap align-center justify-end selectlocationAddress_fd0_0_c2' @tap.stop="handleJumpDiy"
|
||||
data-type="navigateTo" :data-url="`/pages/my/addAddress/addAddress`">
|
||||
<text class='selectlocationAddress_fd0_0_c2_c0'>新增地址</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class='flex flex-wrap align-center justify-end selectlocationAddress_fd0_0_c2'>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view class='flex align-center selectlocationAddress_fd0_1'>
|
||||
<view class='flex flex-wrap align-center' @tap.stop="handleChooseCity" data-type="navigateTo"
|
||||
:data-url="`/pages/sy/citySelection/citySelection`">
|
||||
<image class='selectlocationAddress_fd0_1_c0_c0' mode="aspectFit" :src='STATIC_URL+"52.png"'></image>
|
||||
<text class='selectlocationAddress_fd0_1_c0_c1'>{{city || '定位中'}}</text>
|
||||
</view>
|
||||
<view class='flex align-center flex-sub selectlocationAddress_fd0_1_c1'>
|
||||
<image class='selectlocationAddress_fd0_1_c1_c0' mode="aspectFill" :src='STATIC_URL+"53.png"'></image>
|
||||
<input style="margin-left: 24rpx;" type="text" placeholder="搜索地点" confirm-type="done" :maxlength="-1" @input="handleInput"
|
||||
@confirm="handleSearch" placeholder-style="color:rgba(153, 153, 153, 1);font-size:28rpx" v-model="keyword" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view :style="{height: (200+StatusBarRpx)+'rpx'}"></view>
|
||||
<!---flex布局flex布局开始-->
|
||||
<view class="flex flex-wrap align-center justify-between benben-flex-layout selectlocationAddress_flex_1">
|
||||
<view class='selectlocationAddress_fd1_0 text-cut'>{{addr || '定位中'}}</view>
|
||||
<image class='selectlocationAddress_fd1_1' mode="aspectFill" @click="getLocation" :src='STATIC_URL+"54.png"'></image>
|
||||
</view>
|
||||
|
||||
<!---flex布局flex布局结束-->
|
||||
<!---flex布局flex布局开始-->
|
||||
<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout selectlocationAddress_flex_2">
|
||||
<view class='flex flex-wrap align-center justify-between selectlocationAddress_fd2_0'>
|
||||
<view class="flex align-center">
|
||||
<image class='selectlocationAddress_fd2_0_c0' mode="aspectFit" :src='STATIC_URL+"55.png"'></image>
|
||||
<text class='selectlocationAddress_fd2_0_c1'>我的收货地址</text>
|
||||
</view>
|
||||
<text class='selectlocationAddress_fd2_0_c1' @tap.stop="handleJumpDiy"
|
||||
data-type="navigateTo" :data-url="`/pages/my/addAddress/addAddress`">新增地址</text>
|
||||
</view>
|
||||
<fu-empty-ui v-if="address_list.length === 0 && isInit"></fu-empty-ui>
|
||||
<view class='flex flex-direction flex-wrap align-stretch selectlocationAddress_fd2_1' @click="handleSelectAddress(item)" v-for="(item, index) in address_list" :key="index">
|
||||
<view class='flex flex-wrap align-center'>
|
||||
<text class='selectlocationAddress_fd2_1_c0_c0'>{{item.real_name}}</text>
|
||||
<text class='selectlocationAddress_fd2_1_c0_c1'>(</text>
|
||||
<text class='selectlocationAddress_fd2_1_c0_c2'>{{item.sex == 1 ? '先生' : '女士'}}</text>
|
||||
<text class='selectlocationAddress_fd2_1_c0_c3'>)</text>
|
||||
<text class='selectlocationAddress_fd2_1_c0_c4'>{{item.mobile}}</text>
|
||||
</view>
|
||||
<view class='flex flex-wrap align-center selectlocationAddress_fd2_1_c1'>
|
||||
<text class='selectlocationAddress_fd2_1_c1_c0'>{{item.probince || ''}}{{item.city || ''}}{{item.district || ''}}{{item.detail}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="address_list.length != allAddressList.length" class='flex flex-wrap align-center justify-center selectlocationAddress_fd2_3' @click="handleShowAll">
|
||||
<text class='selectlocationAddress_fd2_3_c0'>展开全部地址</text>
|
||||
<image class='selectlocationAddress_fd2_3_c1' mode="aspectFit" :src='STATIC_URL+"56.png"'></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!---flex布局flex布局结束-->
|
||||
<!---flex布局flex布局开始-->
|
||||
<view class="flex benben-flex-layout flex-wrap align-center selectlocationAddress_flex_3">
|
||||
</view>
|
||||
|
||||
<!---flex布局flex布局结束-->
|
||||
<!---flex布局flex布局开始-->
|
||||
<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout selectlocationAddress_flex_4">
|
||||
<view class='flex flex-wrap align-center selectlocationAddress_fd4_0'>
|
||||
<image class='selectlocationAddress_fd4_0_c0' mode="aspectFit" :src='STATIC_URL+"55.png"'></image>
|
||||
<text class='selectlocationAddress_fd4_0_c1'>附近地址</text>
|
||||
</view>
|
||||
<view class='flex flex-direction flex-wrap align-stretch selectlocationAddress_fd4_1' @click="handleSelectPoi(item)" v-for="(item, index) in poiList" :key="index">
|
||||
<view class='flex flex-wrap align-center'>
|
||||
<text class='selectlocationAddress_fd4_1_c0_c0'>{{item.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!---flex布局flex布局结束-->
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import amap from '@/common/amap-wx.js';
|
||||
export default {
|
||||
components: {},
|
||||
|
||||
|
||||
data() {
|
||||
return {
|
||||
"keyword": "",
|
||||
city: '',
|
||||
isInit: false,
|
||||
address_list: [],
|
||||
allAddressList: [],
|
||||
addr: '',
|
||||
amapPlugin: null, //new地图
|
||||
key: '886bfe2d6c32bd8eac97c2e6d821ed0b',
|
||||
poiList: [],
|
||||
latitude: '',
|
||||
longitude: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
themeColor() {
|
||||
return this.$store.getters.themeColor
|
||||
},
|
||||
|
||||
},
|
||||
watch: {},
|
||||
onLoad(options) {
|
||||
this.city = options.city || '';
|
||||
this.addr = options.addr || '';
|
||||
if (!this.addr || !this.city) {
|
||||
this.getLocation()
|
||||
}
|
||||
this.amapPlugin = new amap.AMapWX({
|
||||
key: this.key
|
||||
});
|
||||
this.getPoiList();
|
||||
|
||||
},
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
onReady() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
this.getAddressList();
|
||||
},
|
||||
onHide() {
|
||||
|
||||
},
|
||||
onResize() {
|
||||
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
onReachBottom(e) {
|
||||
|
||||
},
|
||||
onPageScroll(e) {
|
||||
|
||||
},
|
||||
methods: {
|
||||
handleSelectAddress(item) {
|
||||
let params = {
|
||||
city: item.city,
|
||||
lat: item.lat,
|
||||
lng: item.lng,
|
||||
address: item.detail
|
||||
}
|
||||
uni.$emit('SELECT_ADDRESS', params)
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
},
|
||||
handleSelectPoi(item) {
|
||||
let params = {
|
||||
city: item.cityname || this.city,
|
||||
lat: item.location.split(',')[1],
|
||||
lng: item.location.split(',')[0],
|
||||
address: item.name
|
||||
}
|
||||
uni.$emit('SELECT_ADDRESS', params)
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
},
|
||||
getLocation() {
|
||||
this.city = '定位中'
|
||||
this.addr = '定位中'
|
||||
this.amapPlugin.getRegeo({
|
||||
success: (data) => {
|
||||
//成功回调
|
||||
console.log('地理位置' + JSON.stringify(data[0].regeocodeData.pois));
|
||||
let addr = data[0].regeocodeData.pois.length ? data[0].regeocodeData.pois[0].name :
|
||||
data[0].regeocodeData.addressComponent.district;
|
||||
global.city = data[0].regeocodeData.addressComponent.city
|
||||
global.addr = addr
|
||||
this.city = global.city
|
||||
this.addr = global.addr
|
||||
},
|
||||
fail: (err) => {
|
||||
this.city = '定位失败,请选择'
|
||||
console.error(err)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleChooseCity() {
|
||||
uni.$once('CHOOSE_CITY', data => {
|
||||
console.log('监听到的数据', data)
|
||||
this.city = data.name;
|
||||
this.latitude = data.lat;
|
||||
this.longitude = data.lng;
|
||||
// this.getTipsList();
|
||||
})
|
||||
uni.navigateTo({
|
||||
url: '/pages/sy/citySelection/citySelection?city=' + this.city
|
||||
})
|
||||
},
|
||||
handleInput(e) {
|
||||
this.getTipsList()
|
||||
},
|
||||
// 去搜索
|
||||
handleSearch(e, text) {
|
||||
this.getTipsList()
|
||||
},
|
||||
_getPOIAroundList() {
|
||||
this.amapPlugin.getPoiAround({
|
||||
keywords: this.keyword,
|
||||
location: `${this.longitude},${this.latitude}`,
|
||||
success: (res) => {
|
||||
console.log('poi周边列表', res)
|
||||
if (res && res.poisData) {
|
||||
this.poiList = res.poisData
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
handleShowAll() {
|
||||
this.address_list = this.allAddressList;
|
||||
},
|
||||
getPoiList() {
|
||||
console.log(123)
|
||||
this.amapPlugin.getPoiAround({
|
||||
// location: `${this.lng},${this.lat}`,
|
||||
success: (data) => {
|
||||
console.log('poi周边列表', data)
|
||||
if (data && data.poisData) {
|
||||
this.poiList = data.poisData
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
getTipsList() {
|
||||
if (!this.keyword) {
|
||||
this.$Common.toast('请先选择当前城市')
|
||||
return
|
||||
}
|
||||
console.log(123)
|
||||
this.amapPlugin.getInputtips({
|
||||
keywords: this.keyword,
|
||||
city: this.city,
|
||||
success: (data) => {
|
||||
console.log('tips周边列表', data)
|
||||
if (data && data.tips) {
|
||||
this.poiList = data.tips
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @func 获取地址列表
|
||||
*/
|
||||
getAddressList() {
|
||||
this.$api.post(global.apiUrls.post636f7683cf195, {list_rows: 1000})
|
||||
.then((res) => {
|
||||
console.log("地址列表", res);
|
||||
if (res.data.code == 1) {
|
||||
this.address_list = res.data.data.data.slice(0, 2);
|
||||
this.allAddressList = res.data.data.data;
|
||||
this.isInit = true;
|
||||
} else {
|
||||
this.$message.info(res.data.msg);
|
||||
this.address_list = [];
|
||||
this.allAddressList = [];
|
||||
this.backData = null;
|
||||
}
|
||||
this.$nextTick(function () {
|
||||
uni.stopPullDownRefresh();
|
||||
});
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
width: 100vw;
|
||||
overflow-x: hidden;
|
||||
min-height: calc(100vh - var(--window-bottom));
|
||||
background: rgba(255, 255, 255, 1);
|
||||
background-size: 100% auto !important;
|
||||
}
|
||||
|
||||
.selectlocationAddress_flex_0 {
|
||||
background: #fff;
|
||||
width: 750rpx;
|
||||
height: 200rpx;
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
top: 0rpx;
|
||||
background-size: 100% auto !important;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd0_1_c1_c1 {
|
||||
margin: 0rpx 0rpx 0rpx 16rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd0_1_c1_c0 {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd0_1_c1 {
|
||||
flex: 1;
|
||||
background:rgba(246, 247, 249, 1);
|
||||
margin: 0rpx 0rpx 0rpx 32rpx;
|
||||
border-radius: 32rpx 32rpx 32rpx 32rpx;
|
||||
padding: 0 24rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd0_1_c0_c1 {
|
||||
color: #666666;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd0_1_c0_c0 {
|
||||
width: 28rpx;
|
||||
height: 34rpx;
|
||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||
margin: 0rpx 16rpx 0rpx 0rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd0_1 {
|
||||
margin: 34rpx 32rpx 0rpx 24rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd0_0_c2_c0 {
|
||||
line-height: 35rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd0_0_c2 {
|
||||
width: 150rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd0_0_c1_c0 {
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd0_0_c0_c0 {
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd0_0_c0 {
|
||||
width: 150rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd0_0 {
|
||||
margin: 42rpx 32rpx 0rpx 32rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_flex_1 {
|
||||
background: rgba(246, 247, 249, 1);
|
||||
height: 88rpx;
|
||||
background-size: 100% auto !important;
|
||||
padding: 0rpx 32rpx 0rpx 32rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd1_1 {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd1_0 {
|
||||
width: 500rpx;
|
||||
color: #333333;
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_flex_2 {
|
||||
padding: 32rpx 0rpx 32rpx 0rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd2_3_c1 {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||
margin: 0rpx 0rpx 0rpx 12rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd2_3_c0 {
|
||||
color: #333333;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd2_3 {
|
||||
margin: 24rpx 0rpx 0rpx 0rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd2_2_c1_c0 {
|
||||
color: #666666;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd2_2_c1 {
|
||||
margin: 16rpx 0rpx 0rpx 0rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd2_2_c0_c4 {
|
||||
margin: 0rpx 0rpx 0rpx 40rpx;
|
||||
color: #1A1A1A;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd2_2_c0_c3 {
|
||||
color: #1A1A1A;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd2_2_c0_c2 {
|
||||
color: #1A1A1A;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd2_2_c0_c1 {
|
||||
color: #1A1A1A;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd2_2_c0_c0 {
|
||||
color: #1A1A1A;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd2_2 {
|
||||
border-bottom: 1px solid #eee;
|
||||
margin: 0rpx 0rpx 0rpx 54rpx;
|
||||
padding: 24rpx 0rpx 24rpx 0rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd2_1_c1_c0 {
|
||||
color: #666666;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd2_1_c1 {
|
||||
margin: 16rpx 0rpx 0rpx 0rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd2_1_c0_c4 {
|
||||
margin: 0rpx 0rpx 0rpx 40rpx;
|
||||
color: #1A1A1A;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd2_1_c0_c3 {
|
||||
color: #1A1A1A;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd2_1_c0_c2 {
|
||||
color: #1A1A1A;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd2_1_c0_c1 {
|
||||
color: #1A1A1A;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd2_1_c0_c0 {
|
||||
color: #1A1A1A;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd2_1 {
|
||||
border-bottom: 1px solid #eee;
|
||||
margin: 0rpx 24rpx 0rpx 54rpx;
|
||||
padding: 24rpx 0rpx 24rpx 0rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd2_0_c1 {
|
||||
color: #333333;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd2_0_c0 {
|
||||
width: 6rpx;
|
||||
height: 32rpx;
|
||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||
margin: 0rpx 16rpx 0rpx 0rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd2_0 {
|
||||
margin: 0rpx 32rpx 8rpx 32rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_flex_3 {
|
||||
background: rgba(246, 247, 249, 1);
|
||||
height: 20rpx;
|
||||
background-size: 100% auto !important;
|
||||
}
|
||||
|
||||
.selectlocationAddress_flex_4 {
|
||||
padding: 32rpx 0rpx 32rpx 0rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd4_2_c0_c0 {
|
||||
color: #666666;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd4_2 {
|
||||
border-bottom: 1px solid #eee;
|
||||
margin: 0rpx 0rpx 0rpx 54rpx;
|
||||
padding: 24rpx 0rpx 24rpx 0rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd4_1_c0_c0 {
|
||||
color: #666666;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd4_1 {
|
||||
border-bottom: 1px solid #eee;
|
||||
margin: 0rpx 0rpx 0rpx 54rpx;
|
||||
padding: 24rpx 0rpx 24rpx 0rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd4_0_c1 {
|
||||
color: #333333;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd4_0_c0 {
|
||||
width: 6rpx;
|
||||
height: 32rpx;
|
||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||
margin: 0rpx 16rpx 0rpx 0rpx;
|
||||
}
|
||||
|
||||
.selectlocationAddress_fd4_0 {
|
||||
margin: 0rpx 0rpx 8rpx 32rpx;
|
||||
}
|
||||
</style>
|
||||
299
pages/sy/selectlocationAddress/selectlocationAddress1.vue
Normal file
299
pages/sy/selectlocationAddress/selectlocationAddress1.vue
Normal file
@ -0,0 +1,299 @@
|
||||
<template>
|
||||
<view class="page" :style="themeColor">
|
||||
<view class="flex flex-direction flex-wrap align-stretch benben-position-layout flex selectlocationAddress_flex_0" :style="{height:(200+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
|
||||
<view class='flex flex-wrap align-center justify-between selectlocationAddress_fd0_0' >
|
||||
<view class='flex flex-wrap align-center selectlocationAddress_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back" data-url="1" >
|
||||
<text class='fu-iconfont2 selectlocationAddress_fd0_0_c0_c0' ></text>
|
||||
</view>
|
||||
<view class='flex flex-wrap align-center' >
|
||||
<text class='selectlocationAddress_fd0_0_c1_c0' >选择收货地址</text>
|
||||
</view>
|
||||
<view class='flex flex-wrap align-center justify-end selectlocationAddress_fd0_0_c2' @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/my/addAddress/addAddress`" >
|
||||
<text class='selectlocationAddress_fd0_0_c2_c0' >新增地址</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='flex flex-wrap align-center selectlocationAddress_fd0_1' >
|
||||
<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/sy/citySelection/citySelection`" >
|
||||
<image class='selectlocationAddress_fd0_1_c0_c0' mode="aspectFit" :src='STATIC_URL+"52.png"'></image>
|
||||
<text class='selectlocationAddress_fd0_1_c0_c1' >杭州</text>
|
||||
</view>
|
||||
<view class='flex flex-wrap align-center flex-sub selectlocationAddress_fd0_1_c1' >
|
||||
<image class='selectlocationAddress_fd0_1_c1_c0' mode="aspectFit" :src='STATIC_URL+"53.png"'></image>
|
||||
<input class='selectlocationAddress_fd0_1_c1_c1' type="text" placeholder="搜索地点" confirm-type="done" :maxlength="-1" placeholder-style="color:rgba(153, 153, 153, 1);font-size:28rpx" v-model="fd0_1_c1_c1" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view :style="{height: (200+StatusBarRpx)+'rpx'}" ></view>
|
||||
<!---flex布局flex布局开始-->
|
||||
<view class="flex flex-wrap align-center justify-between benben-flex-layout selectlocationAddress_flex_1" >
|
||||
<text class='selectlocationAddress_fd1_0' >华诚国际中心</text>
|
||||
<image class='selectlocationAddress_fd1_1' mode="aspectFit" :src='STATIC_URL+"54.png"'></image>
|
||||
</view>
|
||||
|
||||
<!---flex布局flex布局结束-->
|
||||
<!---flex布局flex布局开始-->
|
||||
<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout selectlocationAddress_flex_2" >
|
||||
<view class='flex flex-wrap align-center selectlocationAddress_fd2_0' >
|
||||
<image class='selectlocationAddress_fd2_0_c0' mode="aspectFit" :src='STATIC_URL+"55.png"'></image>
|
||||
<text class='selectlocationAddress_fd2_0_c1' >我的收货地址</text>
|
||||
</view>
|
||||
<view class='flex flex-direction flex-wrap align-stretch selectlocationAddress_fd2_1' >
|
||||
<view class='flex flex-wrap align-center' >
|
||||
<text class='selectlocationAddress_fd2_1_c0_c0' >司马哥</text>
|
||||
<text class='selectlocationAddress_fd2_1_c0_c1' >(</text>
|
||||
<text class='selectlocationAddress_fd2_1_c0_c2' >先生</text>
|
||||
<text class='selectlocationAddress_fd2_1_c0_c3' >)</text>
|
||||
<text class='selectlocationAddress_fd2_1_c0_c4' >18088361234</text>
|
||||
</view>
|
||||
<view class='flex flex-wrap align-center selectlocationAddress_fd2_1_c1' >
|
||||
<text class='selectlocationAddress_fd2_1_c1_c0' >河南省郑州市二七区大学路华城国际中心</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='flex flex-direction flex-wrap align-stretch selectlocationAddress_fd2_2' >
|
||||
<view class='flex flex-wrap align-center' >
|
||||
<text class='selectlocationAddress_fd2_2_c0_c0' >司马哥</text>
|
||||
<text class='selectlocationAddress_fd2_2_c0_c1' >(</text>
|
||||
<text class='selectlocationAddress_fd2_2_c0_c2' >先生</text>
|
||||
<text class='selectlocationAddress_fd2_2_c0_c3' >)</text>
|
||||
<text class='selectlocationAddress_fd2_2_c0_c4' >18088361234</text>
|
||||
</view>
|
||||
<view class='flex flex-wrap align-center selectlocationAddress_fd2_2_c1' >
|
||||
<text class='selectlocationAddress_fd2_2_c1_c0' >河南省郑州市二七区大学路华城国际中心</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='flex flex-wrap align-center justify-center selectlocationAddress_fd2_3' >
|
||||
<text class='selectlocationAddress_fd2_3_c0' >展开全部地址</text>
|
||||
<image class='selectlocationAddress_fd2_3_c1' mode="aspectFit" :src='STATIC_URL+"56.png"'></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!---flex布局flex布局结束-->
|
||||
<!---flex布局flex布局开始-->
|
||||
<view class="flex benben-flex-layout flex-wrap align-center selectlocationAddress_flex_3" >
|
||||
</view>
|
||||
|
||||
<!---flex布局flex布局结束-->
|
||||
<!---flex布局flex布局开始-->
|
||||
<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout selectlocationAddress_flex_4" >
|
||||
<view class='flex flex-wrap align-center selectlocationAddress_fd4_0' >
|
||||
<image class='selectlocationAddress_fd4_0_c0' mode="aspectFit" :src='STATIC_URL+"55.png"'></image>
|
||||
<text class='selectlocationAddress_fd4_0_c1' >附近地址</text>
|
||||
</view>
|
||||
<view class='flex flex-direction flex-wrap align-stretch selectlocationAddress_fd4_1' >
|
||||
<view class='flex flex-wrap align-center' >
|
||||
<text class='selectlocationAddress_fd4_1_c0_c0' >华诚国际中心东门</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='flex flex-direction flex-wrap align-stretch selectlocationAddress_fd4_2' >
|
||||
<view class='flex flex-wrap align-center' >
|
||||
<text class='selectlocationAddress_fd4_2_c0_c0' >华诚国际中心东门</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!---flex布局flex布局结束-->
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components:{},
|
||||
|
||||
|
||||
data(){
|
||||
return {"fd0_1_c1_c1":""};
|
||||
},
|
||||
computed:{
|
||||
themeColor() {
|
||||
return this.$store.getters.themeColor
|
||||
},
|
||||
|
||||
},
|
||||
watch:{},
|
||||
onLoad(options){
|
||||
|
||||
},
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
onReady(){
|
||||
|
||||
},
|
||||
onShow(){
|
||||
|
||||
},
|
||||
onHide(){
|
||||
|
||||
},
|
||||
onResize(){
|
||||
|
||||
},
|
||||
onPullDownRefresh(){
|
||||
|
||||
},
|
||||
onReachBottom(e){
|
||||
|
||||
},
|
||||
onPageScroll(e){
|
||||
|
||||
},
|
||||
methods:{
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page{
|
||||
width: 100vw;
|
||||
overflow-x: hidden;
|
||||
min-height: calc(100vh - var(--window-bottom));
|
||||
background:rgba(255, 255, 255, 1);background-size: 100% auto !important;
|
||||
}
|
||||
.selectlocationAddress_flex_0{
|
||||
background:#fff;width:750rpx;height:200rpx;overflow:hidden;z-index:10;top:0rpx;background-size:100% auto !important;
|
||||
}
|
||||
.selectlocationAddress_fd0_1_c1_c1{
|
||||
margin:0rpx 0rpx 0rpx 16rpx;
|
||||
}
|
||||
.selectlocationAddress_fd0_1_c1_c0{
|
||||
width:28rpx;height:28rpx;border-radius:0rpx 0rpx 0rpx 0rpx;
|
||||
}
|
||||
.selectlocationAddress_fd0_1_c1{
|
||||
background:rgba(246, 247, 249, 1);margin:0rpx 0rpx 0rpx 32rpx;border-radius:32rpx 32rpx 32rpx 32rpx;background-size:100% auto !important;padding:12rpx 24rpx 12rpx 24rpx;
|
||||
}
|
||||
.selectlocationAddress_fd0_1_c0_c1{
|
||||
color:#666666;font-size:32rpx;font-weight:500;line-height:32rpx;
|
||||
}
|
||||
.selectlocationAddress_fd0_1_c0_c0{
|
||||
width:28rpx;height:34rpx;border-radius:0rpx 0rpx 0rpx 0rpx;margin:0rpx 16rpx 0rpx 0rpx;
|
||||
}
|
||||
.selectlocationAddress_fd0_1{
|
||||
margin:34rpx 32rpx 0rpx 24rpx;
|
||||
}
|
||||
.selectlocationAddress_fd0_0_c2_c0{
|
||||
line-height:35rpx;font-size:32rpx;font-weight:400;color:#000000;
|
||||
}
|
||||
.selectlocationAddress_fd0_0_c2{
|
||||
width:150rpx;
|
||||
}
|
||||
.selectlocationAddress_fd0_0_c1_c0{
|
||||
font-size:36rpx;font-weight:500;color:#333;line-height:36rpx;
|
||||
}
|
||||
.selectlocationAddress_fd0_0_c0_c0{
|
||||
font-size:36rpx;font-weight:500;color:#333;line-height:36rpx;
|
||||
}
|
||||
.selectlocationAddress_fd0_0_c0{
|
||||
width:150rpx;
|
||||
}
|
||||
.selectlocationAddress_fd0_0{
|
||||
margin:42rpx 32rpx 0rpx 32rpx;
|
||||
}
|
||||
.selectlocationAddress_flex_1{
|
||||
background:rgba(246, 247, 249, 1);height:88rpx;background-size:100% auto !important;padding:0rpx 32rpx 0rpx 32rpx;
|
||||
}
|
||||
.selectlocationAddress_fd1_1{
|
||||
width:38rpx;height:38rpx;border-radius:0rpx 0rpx 0rpx 0rpx;
|
||||
}
|
||||
.selectlocationAddress_fd1_0{
|
||||
color:#333333;font-size:32rpx;font-weight:400;line-height:32rpx;
|
||||
}
|
||||
.selectlocationAddress_flex_2{
|
||||
padding:32rpx 0rpx 32rpx 0rpx;
|
||||
}
|
||||
.selectlocationAddress_fd2_3_c1{
|
||||
width:28rpx;height:28rpx;border-radius:0rpx 0rpx 0rpx 0rpx;margin:0rpx 0rpx 0rpx 12rpx;
|
||||
}
|
||||
.selectlocationAddress_fd2_3_c0{
|
||||
color:#333333;font-size:28rpx;font-weight:400;line-height:32rpx;
|
||||
}
|
||||
.selectlocationAddress_fd2_3{
|
||||
margin:24rpx 0rpx 0rpx 0rpx;
|
||||
}
|
||||
.selectlocationAddress_fd2_2_c1_c0{
|
||||
color:#666666;font-size:28rpx;font-weight:400;line-height:32rpx;
|
||||
}
|
||||
.selectlocationAddress_fd2_2_c1{
|
||||
margin:16rpx 0rpx 0rpx 0rpx;
|
||||
}
|
||||
.selectlocationAddress_fd2_2_c0_c4{
|
||||
margin:0rpx 0rpx 0rpx 40rpx;color:#1A1A1A;font-size:28rpx;font-weight:500;line-height:32rpx;
|
||||
}
|
||||
.selectlocationAddress_fd2_2_c0_c3{
|
||||
color:#1A1A1A;font-size:28rpx;font-weight:500;line-height:32rpx;
|
||||
}
|
||||
.selectlocationAddress_fd2_2_c0_c2{
|
||||
color:#1A1A1A;font-size:28rpx;font-weight:500;line-height:32rpx;
|
||||
}
|
||||
.selectlocationAddress_fd2_2_c0_c1{
|
||||
color:#1A1A1A;font-size:28rpx;font-weight:500;line-height:32rpx;
|
||||
}
|
||||
.selectlocationAddress_fd2_2_c0_c0{
|
||||
color:#1A1A1A;font-size:28rpx;font-weight:500;line-height:32rpx;
|
||||
}
|
||||
.selectlocationAddress_fd2_2{
|
||||
border-bottom:1px solid #eee;margin:0rpx 0rpx 0rpx 54rpx;padding:24rpx 0rpx 24rpx 0rpx;
|
||||
}
|
||||
.selectlocationAddress_fd2_1_c1_c0{
|
||||
color:#666666;font-size:28rpx;font-weight:400;line-height:32rpx;
|
||||
}
|
||||
.selectlocationAddress_fd2_1_c1{
|
||||
margin:16rpx 0rpx 0rpx 0rpx;
|
||||
}
|
||||
.selectlocationAddress_fd2_1_c0_c4{
|
||||
margin:0rpx 0rpx 0rpx 40rpx;color:#1A1A1A;font-size:28rpx;font-weight:500;line-height:32rpx;
|
||||
}
|
||||
.selectlocationAddress_fd2_1_c0_c3{
|
||||
color:#1A1A1A;font-size:28rpx;font-weight:500;line-height:32rpx;
|
||||
}
|
||||
.selectlocationAddress_fd2_1_c0_c2{
|
||||
color:#1A1A1A;font-size:28rpx;font-weight:500;line-height:32rpx;
|
||||
}
|
||||
.selectlocationAddress_fd2_1_c0_c1{
|
||||
color:#1A1A1A;font-size:28rpx;font-weight:500;line-height:32rpx;
|
||||
}
|
||||
.selectlocationAddress_fd2_1_c0_c0{
|
||||
color:#1A1A1A;font-size:28rpx;font-weight:500;line-height:32rpx;
|
||||
}
|
||||
.selectlocationAddress_fd2_1{
|
||||
border-bottom:1px solid #eee;margin:0rpx 0rpx 0rpx 54rpx;padding:24rpx 0rpx 24rpx 0rpx;
|
||||
}
|
||||
.selectlocationAddress_fd2_0_c1{
|
||||
color:#333333;font-size:28rpx;font-weight:500;line-height:30rpx;
|
||||
}
|
||||
.selectlocationAddress_fd2_0_c0{
|
||||
width:6rpx;height:32rpx;border-radius:0rpx 0rpx 0rpx 0rpx;margin:0rpx 16rpx 0rpx 0rpx;
|
||||
}
|
||||
.selectlocationAddress_fd2_0{
|
||||
margin:0rpx 0rpx 8rpx 32rpx;
|
||||
}
|
||||
.selectlocationAddress_flex_3{
|
||||
background:rgba(246, 247, 249, 1);height:20rpx;background-size:100% auto !important;
|
||||
}
|
||||
.selectlocationAddress_flex_4{
|
||||
padding:32rpx 0rpx 32rpx 0rpx;
|
||||
}
|
||||
.selectlocationAddress_fd4_2_c0_c0{
|
||||
color:#666666;font-size:28rpx;font-weight:400;line-height:32rpx;
|
||||
}
|
||||
.selectlocationAddress_fd4_2{
|
||||
border-bottom:1px solid #eee;margin:0rpx 0rpx 0rpx 54rpx;padding:24rpx 0rpx 24rpx 0rpx;
|
||||
}
|
||||
.selectlocationAddress_fd4_1_c0_c0{
|
||||
color:#666666;font-size:28rpx;font-weight:400;line-height:32rpx;
|
||||
}
|
||||
.selectlocationAddress_fd4_1{
|
||||
border-bottom:1px solid #eee;margin:0rpx 0rpx 0rpx 54rpx;padding:24rpx 0rpx 24rpx 0rpx;
|
||||
}
|
||||
.selectlocationAddress_fd4_0_c1{
|
||||
color:#333333;font-size:28rpx;font-weight:500;line-height:30rpx;
|
||||
}
|
||||
.selectlocationAddress_fd4_0_c0{
|
||||
width:6rpx;height:32rpx;border-radius:0rpx 0rpx 0rpx 0rpx;margin:0rpx 16rpx 0rpx 0rpx;
|
||||
}
|
||||
.selectlocationAddress_fd4_0{
|
||||
margin:0rpx 0rpx 8rpx 32rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user