1597 lines
39 KiB
Vue
1597 lines
39 KiB
Vue
<template>
|
||
<view class="view-main liu-chooseAddress-container">
|
||
<view class="hander" v-if="showSearchIpunt">
|
||
<uni-nav-bar
|
||
title=""
|
||
:fixed="true"
|
||
:statusBar="false"
|
||
:border="false"
|
||
:left-width="'132rpx'"
|
||
:right-width="'0rpx'"
|
||
>
|
||
<block slot="left">
|
||
<view class="left-block" @click="handerSkip">
|
||
<text class="iconfontAili icon-dingwei1"></text>
|
||
<text class="city-block">{{
|
||
originalData.result.addressComponent.city
|
||
}}</text>
|
||
<text class="iconfontAili icon-xiala"></text>
|
||
</view>
|
||
</block>
|
||
<view class="input-view">
|
||
<uni-icons
|
||
type="search"
|
||
size="22"
|
||
color="#666666"
|
||
style="line-height: 60rpx"
|
||
/>
|
||
<input
|
||
confirm-type="search"
|
||
class="input"
|
||
type="text"
|
||
placeholder="请输入收货地址"
|
||
@click="onSearch"
|
||
@input="handerAddress"
|
||
/>
|
||
</view>
|
||
</uni-nav-bar>
|
||
</view>
|
||
<map
|
||
v-if="!showSearchAddress && !isFound"
|
||
:latitude="latitude"
|
||
:longitude="longitude"
|
||
:scale="16"
|
||
style="width: 100%; height: 100vh; top: -200px"
|
||
ref="map"
|
||
id="map"
|
||
:enable-zoom="isEnableScroll"
|
||
:enable-scroll="isEnableScroll"
|
||
:markers="markers"
|
||
@regionchange="handerRegionchange"
|
||
>
|
||
<image class="map-marker" v-if="isDragMarker" :src="markerIcon"></image>
|
||
</map>
|
||
<view class="page-con" v-if="!showPoisList && !showSearchAddress">
|
||
<view class="con-hd" v-if="showCurrAdd">
|
||
<view class="current-block-left">
|
||
<view class="current-name">{{ currAddress }}</view>
|
||
<view class="current-address">{{ currRoadAddress }}</view>
|
||
</view>
|
||
<view class="current-block-right" @click="chooseAddressView">
|
||
<view class="btn-edit-block">修改地址</view>
|
||
</view>
|
||
</view>
|
||
<view class="con-bd">
|
||
<view
|
||
class="choose-address"
|
||
@click="chooseAddressView"
|
||
v-if="showSelectAddBtn"
|
||
>
|
||
选择收货地址<text class="iconfontAili icon-right"></text>
|
||
</view>
|
||
<view class="con-bd-item">
|
||
<view class="con-bd-item-name">门牌号</view>
|
||
<view class="con-bd-item-con">
|
||
<input
|
||
type="text"
|
||
v-model="formData.detailAddress"
|
||
placeholder="详细地址，例如1层101室"
|
||
placeholder-class="input-placeholder"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<view class="con-bd-item">
|
||
<view class="con-bd-item-name">标签</view>
|
||
<view class="con-bd-item-con">
|
||
<view
|
||
:class="
|
||
formData.lableName == index
|
||
? 'lable-item lable-item-on'
|
||
: 'lable-item'
|
||
"
|
||
v-for="(item, index) in labelData"
|
||
:key="index"
|
||
@click="chooseLable(index)"
|
||
>{{ item }}</view
|
||
>
|
||
</view>
|
||
</view>
|
||
<view class="con-bd-item">
|
||
<view class="con-bd-item-name">联系人</view>
|
||
<view class="con-bd-item-con con-bd-item-con2">
|
||
<input
|
||
type="text"
|
||
v-model="formData.userName"
|
||
placeholder="请填写收货人姓名"
|
||
placeholder-class="input-placeholder"
|
||
/>
|
||
<view class="con-bd-sex-box" @click="chooseSex(1)">
|
||
<image
|
||
:class="['choose-sex-icon', formData.sexType == 1]"
|
||
:src="formData.sexType == 1 ? sele2Icon : noseleIcon"
|
||
mode=""
|
||
></image>
|
||
先生
|
||
</view>
|
||
<view class="con-bd-sex-box" @click="chooseSex(2)">
|
||
<image
|
||
class="choose-sex-icon"
|
||
:src="formData.sexType == 2 ? sele2Icon : noseleIcon"
|
||
mode=""
|
||
></image>
|
||
女士
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="con-bd-item">
|
||
<view class="con-bd-item-name">手机号</view>
|
||
<view class="con-bd-item-con">
|
||
<input
|
||
type="number"
|
||
maxlength="11"
|
||
v-model="formData.userPhone"
|
||
placeholder="请填写收货人手机号码"
|
||
placeholder-class="input-placeholder"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="con-bd-agree" @click="changeAgree">
|
||
<image
|
||
class="agreeicon"
|
||
:src="agreeState ? seleIcon : noseleIcon"
|
||
mode=""
|
||
></image>
|
||
<view class="agreetext">设为默认地址</view>
|
||
</view> -->
|
||
<view
|
||
:class="[
|
||
'con-ft-btn',
|
||
{
|
||
'con-ft-btn1': addressInfo && addressInfo.address,
|
||
'con-ft-btn3': !addressInfo || !addressInfo.address,
|
||
},
|
||
]"
|
||
@click="submitAddress"
|
||
>
|
||
保存地址
|
||
</view>
|
||
<view
|
||
v-if="ud_id"
|
||
class="con-ft-btn con-ft-btn2"
|
||
@click="deleteAddress"
|
||
>
|
||
删除地址
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="address-list" v-if="showPoisList && !showSearchAddress">
|
||
<scroll-view
|
||
class="uni-swiper-list"
|
||
scroll-y
|
||
:scroll-top="0"
|
||
enhanced
|
||
:show-scrollbar="false"
|
||
>
|
||
<view
|
||
class="address-item"
|
||
v-for="(item, index) of nearbyAddressList"
|
||
:key="index"
|
||
@click="handerSetAddress(item)"
|
||
>
|
||
<view class="item-left">
|
||
<view class="item-name">{{ item.name }}</view>
|
||
<view class="item-address">{{ item.addr }}</view>
|
||
</view>
|
||
<view class="item-right">
|
||
<image
|
||
class="item-active"
|
||
:src="acitveAddress(item)"
|
||
mode=""
|
||
></image>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view
|
||
class="reposition-block"
|
||
v-if="showReposition"
|
||
@click="getLocation('found')"
|
||
>
|
||
<text class="iconfontAili icon-zhongxindingwei"></text>
|
||
</view>
|
||
<uMask
|
||
:show="showMask"
|
||
v-if="showMask"
|
||
:zIndex="2"
|
||
@click="showMask = false"
|
||
></uMask>
|
||
</view>
|
||
<scroll-view
|
||
v-if="showSearchAddress && searchAddress.length > 0"
|
||
class="uni-swiper-search-list"
|
||
scroll-y
|
||
scroll-with-animation="true"
|
||
:scroll-top="scrollTop"
|
||
>
|
||
<view class="search-address-list">
|
||
<view
|
||
class="search-address-item"
|
||
v-for="(item, index) of searchAddress"
|
||
:key="index"
|
||
>
|
||
<view
|
||
class="search-address-item-left"
|
||
@click="handerSetAddress(item)"
|
||
>
|
||
<view class="item-left-name" v-html="item.searchName"></view>
|
||
<view class="item-left-address">{{
|
||
item.detailedInformation
|
||
}}</view>
|
||
</view>
|
||
<view class="search-address-item-right">{{ item.distance }}km</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import uMask from "./umask.vue";
|
||
import BMapLib from "../../helpers/GeoUtils.js";
|
||
import { mapState, mapMutations } from "vuex";
|
||
var bmap = require("../../libs/bmap-wx.js");
|
||
export default {
|
||
components: { uMask },
|
||
data() {
|
||
return {
|
||
map: null,
|
||
showMask: false,
|
||
originalData: {
|
||
result: {
|
||
addressComponent: {
|
||
city: "正在定位",
|
||
},
|
||
sematic_description: "定位中..",
|
||
},
|
||
},
|
||
nearbyAddressList: [],
|
||
formData: {
|
||
detailAddress: "",
|
||
userName: "",
|
||
userPhone: "",
|
||
lableName: null,
|
||
sexType: 1, //1 先生 2 女士
|
||
},
|
||
labelData: ["家", "公司", "学校"],
|
||
addressInfo: {}, //选中的地址信息
|
||
agreeState: false, //是否是默认地址
|
||
longitude: null,
|
||
latitude: null,
|
||
markerIcon: "/static/images/marker.png",
|
||
seleIcon: require("./static/sele.png"),
|
||
sele2Icon: "/static/images/sele2.png",
|
||
noseleIcon: require("./static/no-sele.png"),
|
||
oldObj: "",
|
||
showMarkerIcon: false,
|
||
showPoisList: false,
|
||
showSearchAddress: false,
|
||
searchAddress: [],
|
||
map_markers: [],
|
||
markers: [],
|
||
showSelectAddBtn: true,
|
||
showSearchIpunt: false,
|
||
showCurrAdd: false,
|
||
isDragMarker: false,
|
||
isEnableScroll: false,
|
||
showReposition: false,
|
||
currAddress: "",
|
||
currRoadAddress: "",
|
||
ud_id: null,
|
||
areaData: [],
|
||
cityData: [],
|
||
provinceData: [],
|
||
isFound: false,
|
||
issub: false,
|
||
options: {},
|
||
spid: "",
|
||
};
|
||
},
|
||
computed: {
|
||
...mapState([
|
||
"Config",
|
||
"StateCode",
|
||
"notice",
|
||
"plantformInfo",
|
||
"shopInfo",
|
||
"userInfo",
|
||
"hasLogin",
|
||
]),
|
||
},
|
||
onUnload() {
|
||
uni.removeStorageSync("city");
|
||
},
|
||
onShow(options) {
|
||
this.getAppDistrict();
|
||
let city = uni.getStorageSync("city");
|
||
if (city) {
|
||
this.originalData.result.addressComponent.city = city;
|
||
} else {
|
||
if (this.ud_id && this.ud_id != "-1") {
|
||
this.getCurrAddress();
|
||
} else {
|
||
this.getLocation();
|
||
}
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
if (options.ud_id) {
|
||
this.ud_id = options.ud_id;
|
||
}
|
||
|
||
this.setData({
|
||
issub: options.issub,
|
||
ud_id: options.ud_id || 0,
|
||
spid: options.spid || "",
|
||
options: options,
|
||
});
|
||
},
|
||
methods: {
|
||
getAppDistrict() {
|
||
let that = this;
|
||
// 读取地区数据 【为了不同项目的小程序包体大小考虑，这里不能直接把数据放前端，可以使用服务端缓存和浏览器与小程序的本地存储来优化】
|
||
let district_data = uni.getStorageSync("district_data");
|
||
if (!district_data) {
|
||
that.$.request({
|
||
url: that.cf.URL.getAppDistrict,
|
||
data: {},
|
||
loading: false,
|
||
ajaxCache: {
|
||
timeout: this.cf.CACHE_EXPIRE,
|
||
},
|
||
success: function (data, status, msg, code) {
|
||
if (status == 200) {
|
||
uni.setStorageSync("district_data", data);
|
||
that.setDistrictData(data);
|
||
}
|
||
},
|
||
});
|
||
} else {
|
||
that.setDistrictData(district_data);
|
||
}
|
||
},
|
||
setDistrictData(district_data) {
|
||
this.provinceData = district_data.provinceData;
|
||
this.cityData = district_data.cityData;
|
||
this.areaData = district_data.areaData;
|
||
},
|
||
getCurrAddress() {
|
||
let that = this;
|
||
|
||
var params = {
|
||
ud_id: that.ud_id,
|
||
};
|
||
|
||
that.$.request({
|
||
url: this.Config.URL.user.address_get,
|
||
data: params,
|
||
success: function (data, status, msg, code) {
|
||
if (status == 200) {
|
||
that.formData.detailAddress = data.ud_street_no;
|
||
that.formData.userName = data.ud_name;
|
||
that.formData.userPhone = data.ud_mobile;
|
||
that.formData.lableName = data.ud_label - 1;
|
||
that.formData.sexType = data.ud_gender;
|
||
let item = {
|
||
name: data.ud_marker,
|
||
location: {
|
||
lat: data.ud_latitude,
|
||
lng: data.ud_longitude,
|
||
},
|
||
addr: data.ud_street_addr,
|
||
};
|
||
that.handerSetAddress(item);
|
||
|
||
let moveMarke = {
|
||
id: 94,
|
||
latitude: data.ud_latitude,
|
||
longitude: data.ud_longitude,
|
||
iconPath: that.markerIcon,
|
||
width: 20,
|
||
height: 30,
|
||
};
|
||
that.$nextTick(() => {
|
||
that.markers.push(moveMarke);
|
||
});
|
||
}
|
||
},
|
||
});
|
||
},
|
||
getBaiduOriginalData(location, type, type2) {
|
||
let that = this;
|
||
|
||
let BMap = new bmap.BMapWX({
|
||
ak: "LkqqCMB1qZmjYEkzx0Y1PTfmAUrkWPog",
|
||
});
|
||
|
||
if (type2 == "found") {
|
||
that.isFound = true;
|
||
uni.removeStorageSync("city");
|
||
}
|
||
|
||
let fail = function (res) {
|
||
console.log("fail", res);
|
||
};
|
||
|
||
let success = function (res) {
|
||
that.latitude = res.originalData.result.location.lat;
|
||
that.longitude = res.originalData.result.location.lng;
|
||
|
||
console.log(that.latitude, that.longitude);
|
||
|
||
that.originalData = res.originalData;
|
||
|
||
let city = uni.getStorageSync("city");
|
||
if (city) {
|
||
that.originalData.result.addressComponent.city = city;
|
||
}
|
||
|
||
let array = res.originalData.result.pois;
|
||
|
||
let nearbyObject = array.find((item) => item.distance === "附近");
|
||
let numericDistances = array.filter((item) => item.distance !== "附近");
|
||
numericDistances.sort(
|
||
(a, b) => parseInt(a.distance, 10) - parseInt(b.distance, 10)
|
||
);
|
||
if (nearbyObject) {
|
||
that.nearbyAddressList = [nearbyObject, ...numericDistances];
|
||
} else {
|
||
that.nearbyAddressList = numericDistances;
|
||
}
|
||
|
||
if (that.markers.length > 0 && that.isFound) {
|
||
let item = that.nearbyAddressList[0];
|
||
that.markers[0].latitude = that.latitude;
|
||
that.markers[0].longitude = that.longitude;
|
||
that.markers[1].latitude = that.latitude;
|
||
that.markers[1].longitude = that.longitude;
|
||
that.markers[0].callout = {
|
||
content: item.name,
|
||
color: "#000",
|
||
fontSize: 14,
|
||
borderRadius: 6, //边框圆角
|
||
bgColor: "#fff",
|
||
borderWidth: 1,
|
||
borderColor: "rgba(0, 0, 0, 0.4)",
|
||
padding: 8,
|
||
display: "ALWAYS",
|
||
textAlign: "center",
|
||
};
|
||
that.currAddress = "";
|
||
}
|
||
that.isFound = false;
|
||
};
|
||
|
||
BMap.regeocoding({
|
||
location: location,
|
||
coordtype: type,
|
||
ret_coordtype: "gcj02ll",
|
||
fail: fail,
|
||
success: success,
|
||
});
|
||
},
|
||
handerSetAddress(item) {
|
||
let that = this;
|
||
that.showMarkerIcon = true;
|
||
that.showCurrAdd = true;
|
||
that.showMask = false;
|
||
that.showSearchAddress = false;
|
||
that.showPoisList = false;
|
||
that.showSelectAddBtn = false;
|
||
that.showSearchIpunt = false;
|
||
that.isEnableScroll = false;
|
||
that.showReposition = false;
|
||
that.currAddress = item.name;
|
||
that.isDragMarker = false;
|
||
|
||
that.currRoadAddress = item.addr
|
||
? item.addr
|
||
: item.province + item.address.replace(/-/g, "");
|
||
var location = item.location
|
||
? item.location.lat + "," + item.location.lng
|
||
: item.point.y + "," + item.point.x;
|
||
|
||
that.getBaiduOriginalData(location, "gcj02ll");
|
||
},
|
||
onSearch() {
|
||
this.showMask = true;
|
||
},
|
||
handerSkip() {
|
||
uni.navigateTo({
|
||
url: `/address/selectCity?isAdd=true`,
|
||
});
|
||
},
|
||
// 地图移动时
|
||
handerRegionchange(e) {
|
||
console.log(e);
|
||
|
||
if (e.type == "begin" && this.markers.length > 0) {
|
||
if (this.showPoisList) {
|
||
this.isDragMarker = true;
|
||
}
|
||
this.markers[0].latitude = 0;
|
||
this.markers[0].longitude = 0;
|
||
this.markers[0].iconPath = "";
|
||
|
||
if (!this.isDragMarker && this.showCurrAdd) {
|
||
this.clearMarkes();
|
||
}
|
||
|
||
console.log("触发了：begin");
|
||
}
|
||
|
||
if (e.type == "end" && this.showMarkerIcon && !this.showCurrAdd) {
|
||
console.log("触发了:", "end");
|
||
if (!e.target.centerLocation) return;
|
||
console.log(e.target.centerLocation);
|
||
this.isDragMarker = false;
|
||
|
||
let { latitude, longitude } = e.target.centerLocation;
|
||
|
||
if (this.markers.length > 0) {
|
||
this.markers[0].latitude = latitude;
|
||
this.markers[0].longitude = longitude;
|
||
this.markers[0].iconPath = this.markerIcon;
|
||
}
|
||
|
||
let location = latitude + "," + longitude;
|
||
|
||
let that = this;
|
||
|
||
let BMap = new bmap.BMapWX({
|
||
ak: "LkqqCMB1qZmjYEkzx0Y1PTfmAUrkWPog",
|
||
});
|
||
|
||
let fail = function (res) {
|
||
console.log("fail", res);
|
||
};
|
||
|
||
let success = function (res) {
|
||
console.log("结果地址", res);
|
||
|
||
that.originalData = res.originalData;
|
||
let array = res.originalData.result.pois;
|
||
|
||
let nearbyObject = array.find((item) => item.distance === "附近");
|
||
let numericDistances = array.filter(
|
||
(item) => item.distance !== "附近"
|
||
);
|
||
numericDistances.sort(
|
||
(a, b) => parseInt(a.distance, 10) - parseInt(b.distance, 10)
|
||
);
|
||
if (nearbyObject) {
|
||
that.nearbyAddressList = [nearbyObject, ...numericDistances];
|
||
} else {
|
||
that.nearbyAddressList = numericDistances;
|
||
}
|
||
|
||
let item = that.nearbyAddressList[0];
|
||
|
||
that.markers[0].callout = {
|
||
content: item.name,
|
||
color: "#000",
|
||
fontSize: 14,
|
||
borderRadius: 6, //边框圆角
|
||
bgColor: "#fff",
|
||
borderWidth: 1,
|
||
borderColor: "rgba(0, 0, 0, 0.4)",
|
||
padding: 8,
|
||
display: "ALWAYS",
|
||
textAlign: "center",
|
||
};
|
||
};
|
||
|
||
BMap.regeocoding({
|
||
location: location,
|
||
coordtype: "gcj02ll",
|
||
ret_coordtype: "gcj02ll",
|
||
fail: fail,
|
||
success: success,
|
||
});
|
||
}
|
||
},
|
||
//数据回显时使用此方法
|
||
// setData(obj) {
|
||
// this.oldObj = obj;
|
||
// this.formData.detailAddress = obj.detailAddress;
|
||
// this.formData.userName = obj.userName;
|
||
// this.formData.userPhone = obj.userPhone;
|
||
// this.formData.lableName = obj.lableName;
|
||
// this.formData.sexType = obj.sexType;
|
||
// this.addressInfo.title = obj.title;
|
||
// this.addressInfo.address = obj.address;
|
||
// this.addressInfo.latitude = obj.latitude;
|
||
// this.addressInfo.longitude = obj.longitude;
|
||
// this.agreeState = obj.agreeState;
|
||
// },
|
||
//获取当前的地理位置
|
||
getLocation(type) {
|
||
let that = this;
|
||
|
||
console.log(that.markers);
|
||
|
||
uni.showLoading({
|
||
title: "正在获取定位中...",
|
||
});
|
||
uni.getLocation({
|
||
type: "wgs84",
|
||
isHighAccuracy: true,
|
||
geocode: "true",
|
||
highAccuracyExpireTime: 3500,
|
||
success: (res) => {
|
||
uni.hideLoading();
|
||
|
||
var location = res.latitude + "," + res.longitude;
|
||
|
||
that.getBaiduOriginalData(location, "wgs84ll", type);
|
||
},
|
||
fail: (res) => {
|
||
if (res.errMsg == "getLocation:fail auth deny") {
|
||
uni.showModal({
|
||
content: "检测到您没打开获取信息功能权限，是否去设置打开？",
|
||
confirmText: "确认",
|
||
cancelText: "取消",
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.openSetting({
|
||
success: (res) => {},
|
||
});
|
||
} else {
|
||
return false;
|
||
}
|
||
},
|
||
});
|
||
}
|
||
},
|
||
});
|
||
},
|
||
isValidPhoneNumber(phoneNumber) {
|
||
// 定义正则表达式，校验中国大陆手机号码
|
||
const phoneRegex = /^1[3-9]\d{9}$/;
|
||
return phoneRegex.test(phoneNumber);
|
||
},
|
||
fuzzyMatch(shortStr, longStr) {
|
||
if (!shortStr || !longStr) {
|
||
console.log("找不到地址");
|
||
return;
|
||
}
|
||
|
||
const lowerShortStr = shortStr.toLowerCase();
|
||
const lowerLongStr = longStr.toLowerCase();
|
||
|
||
return lowerShortStr.includes(lowerLongStr);
|
||
},
|
||
//保存地址
|
||
submitAddress() {
|
||
if (!this.currAddress) {
|
||
uni.showToast({
|
||
title: "请选择收货地址",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
// if (!this.formData.detailAddress) {
|
||
// uni.showToast({
|
||
// title: "请输入门牌号",
|
||
// icon: "none",
|
||
// });
|
||
// return;
|
||
// }
|
||
if (!this.formData.userName) {
|
||
uni.showToast({
|
||
title: "请输入联系人",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (!this.formData.userPhone) {
|
||
uni.showToast({
|
||
title: "请输入手机号",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
|
||
let isValid = this.isValidPhoneNumber(this.formData.userPhone);
|
||
|
||
if (!isValid) {
|
||
uni.showToast({
|
||
title: "请输入正确的手机号",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
|
||
let item = this.originalData;
|
||
|
||
let province = {
|
||
label: "",
|
||
value: 0,
|
||
};
|
||
|
||
let city = {
|
||
label: "",
|
||
value: 0,
|
||
};
|
||
|
||
let county = {
|
||
label: "",
|
||
value: 0,
|
||
};
|
||
|
||
this.provinceData.forEach((group) => {
|
||
let isFind = this.fuzzyMatch(
|
||
item.result.addressComponent.province,
|
||
group.label
|
||
);
|
||
if (isFind) {
|
||
province = group;
|
||
}
|
||
});
|
||
|
||
this.cityData.forEach((group) => {
|
||
group.forEach((group1) => {
|
||
let isFind = this.fuzzyMatch(
|
||
group1.label,
|
||
item.result.addressComponent.city
|
||
);
|
||
if (isFind) {
|
||
city = group1;
|
||
}
|
||
});
|
||
});
|
||
|
||
this.areaData.forEach((group) => {
|
||
group.forEach((group1) => {
|
||
group1.forEach((group2) => {
|
||
let isFind = this.fuzzyMatch(
|
||
group2.label,
|
||
item.result.addressComponent.district
|
||
);
|
||
if (isFind) {
|
||
county = group2;
|
||
}
|
||
});
|
||
});
|
||
});
|
||
|
||
let lableName = this.formData.lableName;
|
||
if (lableName === "" || lableName == -1) {
|
||
lableName = "";
|
||
} else {
|
||
lableName = lableName + 1;
|
||
}
|
||
|
||
let parms = {
|
||
ud_id: this.ud_id || 0,
|
||
ud_city: item.result.addressComponent.city,
|
||
ud_gender: this.formData.sexType,
|
||
ud_intl: "+86",
|
||
ud_mobile: this.formData.userPhone,
|
||
ud_name: this.formData.userName,
|
||
ud_marker: this.currAddress,
|
||
ud_street_addr: this.currRoadAddress,
|
||
ud_street_no: this.formData.detailAddress,
|
||
ud_latitude: this.latitude,
|
||
ud_longitude: this.longitude,
|
||
ud_label: lableName || "",
|
||
ud_province_id: province.value, // 省份ID
|
||
ud_province: province.label, // 省份名称
|
||
ud_city_id: city.value, // ud_city_id 城市ID
|
||
ud_city: city.label, // 城市名称
|
||
ud_county_id: county.value, // 区ID
|
||
ud_county: county.label, // 区名字
|
||
ud_address: this.currAddress + this.formData.detailAddress,
|
||
ud_is_default: 1,
|
||
};
|
||
|
||
let that = this;
|
||
var options = that.options;
|
||
|
||
this.$.request({
|
||
url: this.Config.URL.user.address_edit,
|
||
method: "post",
|
||
data: parms,
|
||
success: (data, status, msg, code) => {
|
||
if (status == 200) {
|
||
this.$.showToast({
|
||
title: "添加成功",
|
||
icon: "success",
|
||
duration: 2e3,
|
||
});
|
||
if (options.issub) {
|
||
that.$.navigateBack(1, function () {
|
||
options.ud_id = data.ud_id;
|
||
that.notice.postNotificationName("RefreshOrder", options);
|
||
});
|
||
} else {
|
||
that.$.navigateBack(1, function () {
|
||
that.notice.postNotificationName("RefreshAddress", 1);
|
||
});
|
||
}
|
||
}
|
||
},
|
||
});
|
||
},
|
||
//删除地址
|
||
deleteAddress() {
|
||
var that = this;
|
||
that.$.showModal({
|
||
title: that.__("提示"),
|
||
content: that.__("确认删除这个地址吗？"),
|
||
showCancel: true,
|
||
success: function (n) {
|
||
if (n.confirm) {
|
||
var params = {
|
||
ud_id: that.ud_id,
|
||
};
|
||
that.$.request({
|
||
url: that.Config.URL.user.address_remove,
|
||
method: "post",
|
||
data: params,
|
||
success: function (data, status, msg, code) {
|
||
if (200 == status) {
|
||
that.$.showToast({
|
||
title: that.__("删除成功！"),
|
||
});
|
||
|
||
that.notice.postNotificationName("RefreshOrder", 0);
|
||
uni.navigateBack();
|
||
}
|
||
},
|
||
});
|
||
}
|
||
},
|
||
});
|
||
},
|
||
//选择地址、修改编辑地址
|
||
chooseAddressView() {
|
||
this.showMarkerIcon = true;
|
||
this.showPoisList = true;
|
||
this.showSearchIpunt = true;
|
||
this.isEnableScroll = true;
|
||
this.showCurrAdd = false;
|
||
this.showReposition = true;
|
||
|
||
var item = {};
|
||
|
||
let group = this.nearbyAddressList.find(
|
||
(item) => item.name == this.currAddress
|
||
);
|
||
if (group) {
|
||
item = group;
|
||
} else {
|
||
item = this.nearbyAddressList[0];
|
||
}
|
||
|
||
let { x, y } = item.point;
|
||
console.log(x, y);
|
||
let moveMarke = {
|
||
id: 94,
|
||
latitude: y,
|
||
longitude: x,
|
||
iconPath: this.markerIcon,
|
||
width: 20,
|
||
height: 30,
|
||
callout: {
|
||
content: item.name,
|
||
color: "#000",
|
||
fontSize: 14,
|
||
borderRadius: 6, //边框圆角
|
||
bgColor: "#fff",
|
||
borderWidth: 1,
|
||
borderColor: "rgba(0, 0, 0, 0.4)",
|
||
padding: 8,
|
||
display: "ALWAYS",
|
||
textAlign: "center",
|
||
},
|
||
};
|
||
|
||
let currMarke = {
|
||
id: 2,
|
||
latitude: Number(this.latitude),
|
||
longitude: Number(this.longitude),
|
||
iconPath: this.sele2Icon,
|
||
width: 25,
|
||
height: 25,
|
||
};
|
||
|
||
let list = [];
|
||
|
||
list.push(moveMarke);
|
||
list.push(currMarke);
|
||
|
||
this.$nextTick(() => {
|
||
this.markers = list;
|
||
});
|
||
},
|
||
//联系人性别选择
|
||
chooseSex(type) {
|
||
this.formData.sexType = type;
|
||
},
|
||
clearMarkes() {
|
||
this.$nextTick(() => {
|
||
console.log(this.latitude, this.longitude);
|
||
this.markers[0].latitude = this.latitude;
|
||
this.markers[0].longitude = this.longitude;
|
||
this.markers[0].iconPath = this.markerIcon;
|
||
this.markers[0].callout = {};
|
||
if (this.markers[1]) {
|
||
this.markers[1].iconPath = "";
|
||
this.markers[1].latitude = 0;
|
||
this.markers[1].longitude = 0;
|
||
}
|
||
});
|
||
},
|
||
//标签选择
|
||
chooseLable(inedx) {
|
||
if (this.formData.lableName == inedx) {
|
||
this.formData.lableName = -1;
|
||
} else {
|
||
this.formData.lableName = inedx;
|
||
}
|
||
},
|
||
//点击隐私协议
|
||
changeAgree() {
|
||
this.agreeState = !this.agreeState;
|
||
},
|
||
acitveAddress(item) {
|
||
if (item.name == this.currAddress) {
|
||
return this.sele2Icon;
|
||
} else {
|
||
return this.noseleIcon;
|
||
}
|
||
},
|
||
// 搜索地址
|
||
handerAddress(e) {
|
||
let that = this;
|
||
|
||
let value = e.target.value;
|
||
if (value.length == 0) {
|
||
this.showSearchAddress = false;
|
||
} else {
|
||
this.showSearchAddress = true;
|
||
}
|
||
|
||
var fail = function (res) {
|
||
console.log("fail", res);
|
||
};
|
||
|
||
var currentPoint = {
|
||
lat: that.originalData.result.location.lat,
|
||
lng: that.originalData.result.location.lng,
|
||
};
|
||
|
||
var metersToKilometers = function (meters) {
|
||
let kilometers = meters / 1000;
|
||
|
||
// 保留两位小数
|
||
return kilometers.toFixed(2);
|
||
};
|
||
|
||
var success = function (res) {
|
||
console.log("结果地址", res);
|
||
if (res.data.status != 0) {
|
||
uni.showToast({
|
||
title: res.message,
|
||
icon: "none",
|
||
duration: 3000,
|
||
});
|
||
return;
|
||
}
|
||
|
||
that.searchAddress = res.data.result
|
||
.filter((item) => "location" in item)
|
||
.map((item) => {
|
||
let obj = {
|
||
...item,
|
||
name: item.name,
|
||
detailedInformation: item.address.replace(/-/g, ""),
|
||
distance: metersToKilometers(
|
||
BMapLib.GeoUtils.getDistance(currentPoint, item.location)
|
||
),
|
||
};
|
||
return obj;
|
||
});
|
||
console.log("that.searchAddress", that.searchAddress);
|
||
|
||
that.searchAddress.forEach((item) => {
|
||
if (item.name.indexOf(value) >= 0) {
|
||
item.searchName = item.name.replaceAll(
|
||
value,
|
||
"<font style='color:#ee852f;padding:0 4px'>" + value + "</font>"
|
||
);
|
||
} else {
|
||
item.searchName = item.name;
|
||
}
|
||
});
|
||
console.log("searchAddress", that.searchAddress);
|
||
};
|
||
|
||
let params = {
|
||
query: value,
|
||
region: this.originalData.result.addressComponent.city,
|
||
output: "json",
|
||
city_limit: true,
|
||
ak: "qWKt2xbrqXsp2yK35YYXVBNZgrbiCG5v",
|
||
ret_coordtype: "gcj02ll",
|
||
};
|
||
|
||
let city = that.originalData.result.addressComponent.city;
|
||
if (city) {
|
||
params.center = "";
|
||
}
|
||
|
||
if (this.time !== null) {
|
||
clearTimeout(this.time);
|
||
}
|
||
|
||
this.time = setTimeout(() => {
|
||
uni.request({
|
||
url: `https://api.map.baidu.com/place/v2/suggestion`,
|
||
data: params,
|
||
success: success,
|
||
fail: fail,
|
||
});
|
||
}, 600);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* 隐藏滚动条 */
|
||
.scroll-view {
|
||
scrollbar-width: none; /* Firefox */
|
||
}
|
||
|
||
.scroll-view::-webkit-scrollbar {
|
||
display: none; /* Chrome, Safari */
|
||
}
|
||
|
||
.liu-chooseAddress-container {
|
||
background: #fff !important;
|
||
|
||
.hander {
|
||
.uni-navbar__header {
|
||
align-items: center;
|
||
padding: 10rpx 20rpx !important;
|
||
}
|
||
|
||
.left-block {
|
||
display: flex;
|
||
align-items: center;
|
||
line-height: 60rpx;
|
||
}
|
||
.city-block {
|
||
white-space: nowrap; /* 确保文本在一行内显示 */
|
||
overflow: hidden; /* 隐藏超出容器的文本 */
|
||
text-overflow: ellipsis; /* 使用省略符号表示文本超出 */
|
||
max-width: 140rpx;
|
||
padding-right: 4rpx;
|
||
}
|
||
|
||
.icon-dingwei {
|
||
font-size: 40rpx;
|
||
}
|
||
|
||
.icon-right {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.uni-swiper-list {
|
||
height: 50vh;
|
||
}
|
||
|
||
.current-block-left {
|
||
width: 78%;
|
||
max-width: 78%;
|
||
}
|
||
|
||
.current-block-right {
|
||
width: 22%;
|
||
}
|
||
|
||
.current-name,
|
||
.current-address {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.current-name {
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.current-address {
|
||
font-size: 24rpx;
|
||
color: #848484;
|
||
}
|
||
|
||
.btn-edit-block {
|
||
padding: 8rpx;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
border-radius: 12rpx;
|
||
border: 1px solid #3579ff;
|
||
color: #3579ff;
|
||
}
|
||
|
||
.input-view {
|
||
width: 92%;
|
||
display: flex;
|
||
background-color: #f5f5f5;
|
||
height: 60rpx;
|
||
border-radius: 30rpx;
|
||
padding: 0 4%;
|
||
flex-wrap: nowrap;
|
||
margin: 10rpx 0;
|
||
line-height: 60rpx;
|
||
margin-left: 10rpx;
|
||
color: #b9b9b9;
|
||
}
|
||
|
||
.input-view .uni-icon {
|
||
line-height: 60rpx !important;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.input-view .uni-icons {
|
||
font-size: 32rpx !important;
|
||
}
|
||
|
||
.input-view .input {
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
width: 94%;
|
||
padding: 0 2%;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
/* 隐藏滚动条 */
|
||
.scroll-view {
|
||
scrollbar-width: none; /* Firefox */
|
||
}
|
||
|
||
.scroll-view::-webkit-scrollbar {
|
||
display: none; /* Chrome, Safari */
|
||
}
|
||
|
||
.address-list {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 26rpx;
|
||
width: 654rpx;
|
||
height: 50vh;
|
||
padding: 8rpx 24rpx 0;
|
||
margin-top: 24rpx;
|
||
background: #ffffff;
|
||
border-radius: 24rpx 24rpx 0rpx 0rpx;
|
||
|
||
.address-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 14px 0;
|
||
border-bottom: 1px solid #f8f8f8;
|
||
|
||
.item-left {
|
||
width: 90%;
|
||
max-width: 90%;
|
||
|
||
.item-name,
|
||
.item-address {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.item-name {
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.item-address {
|
||
font-size: 24rpx;
|
||
color: #848484;
|
||
}
|
||
}
|
||
|
||
.item-right {
|
||
width: 10%;
|
||
|
||
.item-active {
|
||
margin-left: 28rpx;
|
||
margin-top: 28rpx;
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.search-address-list {
|
||
margin: 40rpx;
|
||
|
||
.search-address-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20rpx 0;
|
||
border-bottom: 2rpx solid #f0f0f0;
|
||
|
||
.search-address-item-left {
|
||
width: 80%;
|
||
}
|
||
|
||
.search-address-item-right {
|
||
color: #d7d7d7;
|
||
width: 20%;
|
||
text-align: right;
|
||
}
|
||
|
||
rich-text {
|
||
// max-width: 90%;
|
||
max-height: 27px;
|
||
overflow: hidden;
|
||
word-break: break-all; /* break-all(允许在单词内换行。) */
|
||
text-overflow: ellipsis; /* 超出部分省略号 */
|
||
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
|
||
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
|
||
-webkit-line-clamp: 2; /** 显示的行数 **/
|
||
}
|
||
|
||
// .item-left-name rich-text {
|
||
// white-space: nowrap; /* 确保文本在一行内显示 */
|
||
// overflow: hidden; /* 隐藏超出容器的文本 */
|
||
// text-overflow: ellipsis; /* 使用省略符号表示文本超出 */
|
||
// -webkit-box-orient: vertical;
|
||
// max-width: 90%;
|
||
// display: -webkit-box;
|
||
// box-sizing: border-box;
|
||
// }
|
||
|
||
.item-left-address {
|
||
font-size: 24rpx;
|
||
color: #848484;
|
||
white-space: nowrap; /* 确保文本在一行内显示 */
|
||
overflow: hidden; /* 隐藏超出容器的文本 */
|
||
text-overflow: ellipsis; /* 使用省略符号表示文本超出 */
|
||
max-width: 90%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.reposition-block {
|
||
position: absolute;
|
||
top: -20%;
|
||
right: 24rpx;
|
||
width: 68rpx;
|
||
height: 68rpx;
|
||
line-height: 68rpx;
|
||
border-radius: 12rpx;
|
||
text-align: center;
|
||
background: #fff;
|
||
z-index: 1;
|
||
|
||
.icon-zhongxindingwei {
|
||
display: block;
|
||
font-size: 44rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.view-main {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #f3f3f3;
|
||
}
|
||
|
||
.map-marker {
|
||
width: 20px;
|
||
height: 30px;
|
||
position: absolute;
|
||
top: 48%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.map-tip {
|
||
font-size: 20rpx;
|
||
color: #b6b6b6;
|
||
line-height: 42rpx;
|
||
padding: 0 20rpx;
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 30rpx;
|
||
box-shadow: 0px 1px 10px 1px rgba(153, 153, 153, 0.34);
|
||
background-color: #fff;
|
||
border-radius: 4px;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.poiss-box {
|
||
width: 100%;
|
||
padding: 20rpx 0;
|
||
background-color: #ffffff;
|
||
font-size: 26rpx;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.poiss-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: calc(100% - 48rpx);
|
||
height: 100rpx;
|
||
padding: 0 24rpx;
|
||
border-bottom: 1px solid #f9f9f9;
|
||
}
|
||
|
||
.poiss-item-l {
|
||
width: calc(100% - 184rpx);
|
||
}
|
||
|
||
.poiss-item-lhd {
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
line-height: 48rpx;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.poiss-item-lbd {
|
||
font-size: 28rpx;
|
||
color: #b6b6b6;
|
||
line-height: 42rpx;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.poiss-item-r {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
margin: 0 30rpx;
|
||
}
|
||
|
||
.primary-btn {
|
||
width: 688rpx;
|
||
height: 88rpx;
|
||
margin: 0 auto;
|
||
margin-top: 28rpx;
|
||
background: #3579ff;
|
||
border-radius: 44rpx;
|
||
font-size: 32rpx;
|
||
color: #ffffff;
|
||
line-height: 88rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.page-con {
|
||
width: 702rpx;
|
||
height: 75vh;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 24rpx;
|
||
}
|
||
|
||
.con-hd {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 654rpx;
|
||
height: 128rpx;
|
||
margin: 0 auto;
|
||
background: #ffffff;
|
||
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(88, 102, 123, 0.2);
|
||
border-radius: 24rpx;
|
||
padding: 0 24rpx;
|
||
}
|
||
|
||
.choose-address {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 92%;
|
||
height: 64rpx;
|
||
margin: 36rpx auto;
|
||
border-radius: 12rpx;
|
||
border: 2rpx solid #3579ff;
|
||
font-size: 32rpx;
|
||
color: #3579ff;
|
||
|
||
.icon-right {
|
||
padding-left: 12rpx;
|
||
}
|
||
}
|
||
|
||
.choose-address2 {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: calc(100% - 48rpx);
|
||
padding: 0 24rpx;
|
||
}
|
||
|
||
.address2-l {
|
||
width: calc(100% - 184rpx);
|
||
}
|
||
|
||
.address2-lhd {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
line-height: 48rpx;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.address2-lbd {
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
line-height: 42rpx;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.address2-r {
|
||
width: 144rpx;
|
||
height: 60rpx;
|
||
background: #ffffff;
|
||
border-radius: 12rpx;
|
||
border: 2rpx solid #3579ff;
|
||
font-size: 28rpx;
|
||
color: #3579ff;
|
||
line-height: 60rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.con-bd {
|
||
width: 654rpx;
|
||
height: calc(90vh - 160rpx);
|
||
padding: 8rpx 24rpx 0;
|
||
margin-top: 24rpx;
|
||
background: #ffffff;
|
||
border-radius: 24rpx 24rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.con-bd-item {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 110rpx;
|
||
}
|
||
|
||
.con-bd-item-name {
|
||
width: 120rpx;
|
||
height: 110rpx;
|
||
text-align: left;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
line-height: 110rpx;
|
||
}
|
||
|
||
.con-bd-item-con {
|
||
display: flex;
|
||
align-items: center;
|
||
width: calc(100% - 120rpx);
|
||
height: 108rpx;
|
||
border-bottom: 2rpx solid #f7f7f7;
|
||
}
|
||
|
||
.con-bd-item-con input {
|
||
width: 100%;
|
||
height: 60rpx;
|
||
}
|
||
|
||
.lable-item {
|
||
width: 88rpx;
|
||
height: 48rpx;
|
||
margin-right: 18rpx;
|
||
background: #ffffff;
|
||
border-radius: 6rpx;
|
||
border: 2rpx solid #e3e3e3;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
line-height: 48rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.lable-item-on {
|
||
background: #3579ff !important;
|
||
border: 2rpx solid #3579ff;
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
.con-bd-item-con2 input {
|
||
width: 50%;
|
||
height: 60rpx;
|
||
}
|
||
|
||
.con-bd-sex-box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-left: 16rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.choose-sex-icon {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.con-bd-agree {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
margin-top: 40rpx;
|
||
width: 100%;
|
||
}
|
||
|
||
.agreeicon {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
margin-right: 20rpx;
|
||
margin-top: 2rpx;
|
||
}
|
||
|
||
.agreetext {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
line-height: 28rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.con-ft-btn {
|
||
width: 644rpx;
|
||
height: 72rpx;
|
||
margin-top: 60rpx;
|
||
border-radius: 12rpx;
|
||
font-size: 32rpx;
|
||
line-height: 72rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.con-ft-btn:last-child {
|
||
margin-top: 32rpx;
|
||
}
|
||
|
||
.con-ft-btn1 {
|
||
background: #3579ff;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.con-ft-btn2 {
|
||
background: #ffffff;
|
||
border: 2rpx solid #dedede;
|
||
}
|
||
|
||
.con-ft-btn3 {
|
||
background: #3579ff;
|
||
border: 2rpx solid #dedede;
|
||
font-size: 32rpx;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.input-placeholder {
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
}
|
||
</style> |