This commit is contained in:
parent
e2cde813e3
commit
adba793b86
5
App.vue
5
App.vue
|
|
@ -65,27 +65,22 @@
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
view {
|
view {
|
||||||
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
color: #667085;
|
color: #667085;
|
||||||
font-size: 14rpx;
|
font-size: 14rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.numcolor1 {
|
.numcolor1 {
|
||||||
background: #3336E0;
|
background: #3336E0;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.numcolor2 {
|
.numcolor2 {
|
||||||
background: #07C688;
|
background: #07C688;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.numcolor3 {
|
.numcolor3 {
|
||||||
background: #FF9521;
|
background: #FF9521;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.numcolor4 {
|
.numcolor4 {
|
||||||
background: #333333;
|
background: #333333;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
|
||||||
|
|
@ -116,22 +116,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"nativePlugins" : {
|
"nativePlugins" : {}
|
||||||
"KJ-HCNet" : {
|
|
||||||
"__plugin_info__" : {
|
|
||||||
"name" : "海康硬件产品、设备网络SDK(ios、andorid) - [试用版，仅用于自定义调试基座]",
|
|
||||||
"description" : "海康硬件产品、设备网络SDK基于设备私有网络通信协议开发、请试用合适再购买、请试用合适再购买、请试用合适再购买",
|
|
||||||
"platforms" : "Android,iOS",
|
|
||||||
"url" : "https://ext.dcloud.net.cn/plugin?id=8873",
|
|
||||||
"android_package_name" : "",
|
|
||||||
"ios_bundle_id" : "",
|
|
||||||
"isCloud" : true,
|
|
||||||
"bought" : 0,
|
|
||||||
"pid" : "8873",
|
|
||||||
"parameters" : {}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
/* 快应用特有相关 */
|
/* 快应用特有相关 */
|
||||||
"quickapp" : {},
|
"quickapp" : {},
|
||||||
|
|
@ -161,7 +146,7 @@
|
||||||
//配置跨域
|
//配置跨域
|
||||||
"proxy" : {
|
"proxy" : {
|
||||||
"/api" : {
|
"/api" : {
|
||||||
"target" : "http://192.168.1.7:8566",
|
"target" : "http://192.168.1.7:9005",
|
||||||
"changeOrigin" : true,
|
"changeOrigin" : true,
|
||||||
"secure" : false
|
"secure" : false
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,36 +0,0 @@
|
||||||
## 6.0.1（2023-10-13）
|
|
||||||
适配vue3
|
|
||||||
## 6.0（2023-10-08）
|
|
||||||
修复vue3.0bug， 兼容vue2.0
|
|
||||||
## 5.0（2023-09-16）
|
|
||||||
1:增加初始省市区默认值设置 2:优化组件体验
|
|
||||||
## 4.0.1（2023-09-03）
|
|
||||||
优化了一些问题
|
|
||||||
## 4.0.0（2023-08-26）
|
|
||||||
更新中国最新省市区数据
|
|
||||||
## 3.0.2（2023-08-26）
|
|
||||||
修改区数据格式
|
|
||||||
## 3.0.1（2023-07-31）
|
|
||||||
修复vue3.0bug
|
|
||||||
## 3.0（2023-07-19）
|
|
||||||
组件优化
|
|
||||||
## 2.0.3（2023-07-19）
|
|
||||||
修复退出界面，省市区选项显示bug
|
|
||||||
## 2.0.2（2023-07-13）
|
|
||||||
更新无锡市信息
|
|
||||||
## 2.0.1（2023-07-11）
|
|
||||||
组件优化
|
|
||||||
## 2.0.0（2023-07-11）
|
|
||||||
修复vue3.0bug, 支持vue3.0
|
|
||||||
## 1.0.6（2023-06-29）
|
|
||||||
组件优化
|
|
||||||
## 1.0.4（2023-06-29）
|
|
||||||
组件优化
|
|
||||||
## 1.0.3（2023-06-29）
|
|
||||||
组件优化
|
|
||||||
## 1.0.2（2023-06-29）
|
|
||||||
组件说明优化
|
|
||||||
## 1.0.1（2023-06-29）
|
|
||||||
组件优化
|
|
||||||
## 1.0.0（2023-06-28）
|
|
||||||
组件初始化
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,319 +0,0 @@
|
||||||
<template>
|
|
||||||
<view>
|
|
||||||
<!--自定义地址选择器-->
|
|
||||||
<view class="cc_area_mask" v-show="show == true"></view>
|
|
||||||
<view :class="'cc_area_view ' + (show ? 'show':'hide')">
|
|
||||||
<view class="cc_area_view_btns">
|
|
||||||
<text class="cc_area_view_btn_cancle" @tap="handleNYZAreaCancle">取消</text>
|
|
||||||
<text class="cc_area_view_btn_sure" @tap="handleNYZAreaSelect" :data-province="province"
|
|
||||||
:data-city="city" :data-area="area">确定</text>
|
|
||||||
</view>
|
|
||||||
<picker-view class="cc_area_pick_view" indicator-style="height: 35px;" @change="handleNYZAreaChange"
|
|
||||||
:value="value">
|
|
||||||
<picker-view-column>
|
|
||||||
<view v-for="(item, index) in provinces" :key="index" class="cc_area_colum_view">{{item}}</view>
|
|
||||||
</picker-view-column>
|
|
||||||
<picker-view-column>
|
|
||||||
<view v-for="(item, index) in citys" :key="index" class="cc_area_colum_view">{{item}}</view>
|
|
||||||
</picker-view-column>
|
|
||||||
<picker-view-column>
|
|
||||||
<view v-for="(item, index) in areas" :key="index" class="cc_area_colum_view">{{item}}</view>
|
|
||||||
</picker-view-column>
|
|
||||||
</picker-view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import {
|
|
||||||
getProvinces,
|
|
||||||
getMyCity,
|
|
||||||
getAreas
|
|
||||||
} from "./area.js"
|
|
||||||
|
|
||||||
let index = [0, 0, 0];
|
|
||||||
let provinces = getProvinces();
|
|
||||||
let citys = getMyCity(index[0]);
|
|
||||||
let areas = getMyCity(index[0], index[1]);
|
|
||||||
|
|
||||||
export default {
|
|
||||||
mixins: [{
|
|
||||||
methods: {
|
|
||||||
setData: function(obj, callback) {
|
|
||||||
let that = this;
|
|
||||||
const handleData = (tepData, tepKey, afterKey) => {
|
|
||||||
tepKey = tepKey.split('.');
|
|
||||||
tepKey.forEach(item => {
|
|
||||||
if (tepData[item] === null || tepData[item] === undefined) {
|
|
||||||
let reg = /^[0-9]+$/;
|
|
||||||
tepData[item] = reg.test(afterKey) ? [] : {};
|
|
||||||
tepData = tepData[item];
|
|
||||||
} else {
|
|
||||||
tepData = tepData[item];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return tepData;
|
|
||||||
};
|
|
||||||
const isFn = function(value) {
|
|
||||||
return typeof value == 'function' || false;
|
|
||||||
};
|
|
||||||
Object.keys(obj).forEach(function(key) {
|
|
||||||
let val = obj[key];
|
|
||||||
key = key.replace(/\]/g, '').replace(/\[/g, '.');
|
|
||||||
let front, after;
|
|
||||||
let index_after = key.lastIndexOf('.');
|
|
||||||
if (index_after != -1) {
|
|
||||||
after = key.slice(index_after + 1);
|
|
||||||
front = handleData(that, key.slice(0, index_after), after);
|
|
||||||
} else {
|
|
||||||
after = key;
|
|
||||||
front = that;
|
|
||||||
}
|
|
||||||
if (front.$data && front.$data[after] === undefined) {
|
|
||||||
Object.defineProperty(front, after, {
|
|
||||||
get() {
|
|
||||||
return front.$data[after];
|
|
||||||
},
|
|
||||||
set(newValue) {
|
|
||||||
front.$data[after] = newValue;
|
|
||||||
that.$forceUpdate();
|
|
||||||
},
|
|
||||||
enumerable: true,
|
|
||||||
configurable: true
|
|
||||||
});
|
|
||||||
|
|
||||||
// #ifndef VUE3
|
|
||||||
that.$set(front, after, val);
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
// #ifdef VUE3
|
|
||||||
Reflect.set(front, after, val);
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
} else {
|
|
||||||
|
|
||||||
// #ifndef VUE3
|
|
||||||
that.$set(front, after, val);
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
// #ifdef VUE3
|
|
||||||
Reflect.set(front, after, val);
|
|
||||||
// #endif
|
|
||||||
}
|
|
||||||
});
|
|
||||||
isFn(callback) && this.$nextTick(callback);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
provinces: getProvinces(),
|
|
||||||
citys: getMyCity(index[0]),
|
|
||||||
areas: getAreas(index[0], index[1]),
|
|
||||||
value: [0, 0, 0]
|
|
||||||
|
|
||||||
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
components: {},
|
|
||||||
props: {
|
|
||||||
// 省
|
|
||||||
province: {
|
|
||||||
//控制area_select显示隐藏
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
// 市
|
|
||||||
city: {
|
|
||||||
//控制area_select显示隐藏
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
// 区
|
|
||||||
area: {
|
|
||||||
//控制area_select显示隐藏
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
|
|
||||||
show: {
|
|
||||||
//控制area_select显示隐藏
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
maskShow: {
|
|
||||||
//是否显示蒙层
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
let provinceIndex = this.provinces.indexOf(this.province);
|
|
||||||
|
|
||||||
this.citys = getMyCity(provinceIndex);
|
|
||||||
let cityIndex = this.citys.indexOf(this.city);
|
|
||||||
|
|
||||||
this.areas = getAreas(provinceIndex, cityIndex);
|
|
||||||
let areaIndex = this.areas.indexOf(this.area);
|
|
||||||
|
|
||||||
// 设置选择序列
|
|
||||||
this.value = [provinceIndex, cityIndex, areaIndex];
|
|
||||||
console.log("this.value = " + JSON.stringify(this.value));
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
|
|
||||||
handleNYZAreaChange: function(e) {
|
|
||||||
var that = this;
|
|
||||||
console.log("e:" + JSON.stringify(e));
|
|
||||||
var value = e.detail.value;
|
|
||||||
/**
|
|
||||||
* 滚动的是省
|
|
||||||
* 省改变 市、区都不变
|
|
||||||
*/
|
|
||||||
|
|
||||||
if (index[0] != value[0]) {
|
|
||||||
index = [value[0], 0, 0];
|
|
||||||
let selectCitys = getMyCity(index[0]);
|
|
||||||
let selectAreas = getAreas(index[0], 0);
|
|
||||||
that.setData({
|
|
||||||
citys: selectCitys,
|
|
||||||
areas: selectAreas,
|
|
||||||
value: [index[0], 0, 0],
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
that.$emit("changeClick", provinces[index[0]], selectCitys[index[1]], selectAreas[index[2]]);
|
|
||||||
|
|
||||||
} else if (index[1] != value[1]) {
|
|
||||||
/**
|
|
||||||
* 市改变了 省不变 区变
|
|
||||||
*/
|
|
||||||
index = [value[0], value[1], 0];
|
|
||||||
let selectCitys = getMyCity(index[0]);
|
|
||||||
let selectAreas = getAreas(index[0], value[1]);
|
|
||||||
that.setData({
|
|
||||||
citys: selectCitys,
|
|
||||||
areas: selectAreas,
|
|
||||||
value: [index[0], index[1], 0],
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
that.$emit("changeClick", provinces[index[0]], selectCitys[index[1]], selectAreas[index[2]]);
|
|
||||||
|
|
||||||
} else if (index[2] != value[2]) {
|
|
||||||
/**
|
|
||||||
* 区改变了
|
|
||||||
*/
|
|
||||||
index = [value[0], value[1], value[2]];
|
|
||||||
let selectCitys = getMyCity(index[0]);
|
|
||||||
let selectAreas = getAreas(index[0], value[1]);
|
|
||||||
that.setData({
|
|
||||||
citys: selectCitys,
|
|
||||||
areas: selectAreas,
|
|
||||||
value: [index[0], index[1], index[2]],
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
that.$emit("changeClick", provinces[index[0]], selectCitys[index[1]], selectAreas[index[2]]);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 确定按钮的点击事件
|
|
||||||
*/
|
|
||||||
handleNYZAreaSelect: function(e) {
|
|
||||||
var myEventDetail = e; // detail对象，提供给事件监听函数
|
|
||||||
var myEventOption = {}; // 触发事件的选项
|
|
||||||
this.$emit('sureSelectArea', {
|
|
||||||
detail: myEventDetail
|
|
||||||
}, myEventOption);
|
|
||||||
|
|
||||||
index = [0, 0, 0];
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 取消按钮的点击事件
|
|
||||||
*/
|
|
||||||
handleNYZAreaCancle: function(e) {
|
|
||||||
var that = this;
|
|
||||||
console.log("e:" + JSON.stringify(e));
|
|
||||||
this.$emit('hideShow', {
|
|
||||||
detail: false
|
|
||||||
});
|
|
||||||
// 复原初始状态
|
|
||||||
index = [0, 0, 0];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.cc_area_view {
|
|
||||||
width: 100%;
|
|
||||||
position: fixed;
|
|
||||||
bottom: -1000px;
|
|
||||||
left: 0px;
|
|
||||||
background-color: #fff;
|
|
||||||
z-index: 21;
|
|
||||||
transition: all 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cc_area_pick_view {
|
|
||||||
height: 200px;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.cc_area_colum_view {
|
|
||||||
line-height: 35px;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 28upx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hide {
|
|
||||||
bottom: -1000upx;
|
|
||||||
transition: all 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.show {
|
|
||||||
bottom: 0upx;
|
|
||||||
transition: all 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cc_area_view_btns {
|
|
||||||
background-color: #fff;
|
|
||||||
border-bottom: 1px solid #eeeeee;
|
|
||||||
font-size: 30upx;
|
|
||||||
padding: 18upx 0upx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cc_area_view_btns>text {
|
|
||||||
display: inline-block;
|
|
||||||
word-spacing: 4upx;
|
|
||||||
letter-spacing: 4upx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cc_area_view_btn_cancle {
|
|
||||||
color: #939393;
|
|
||||||
padding-right: 20upx;
|
|
||||||
padding-left: 25upx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cc_area_view_btn_sure {
|
|
||||||
float: right;
|
|
||||||
padding-left: 20upx;
|
|
||||||
padding-right: 25upx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cc_area_mask {
|
|
||||||
width: 100%;
|
|
||||||
height: 100vh;
|
|
||||||
background-color: rgba(28, 28, 28, 0.6);
|
|
||||||
position: absolute;
|
|
||||||
top: 0upx;
|
|
||||||
left: 0upx;
|
|
||||||
z-index: 20;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,100 +0,0 @@
|
||||||
{
|
|
||||||
"id": "cc-selectDity",
|
|
||||||
"displayName": "自定义简单实用中国省市区三级联动选择器picker 设置收获地址界面模版(适配vue3)",
|
|
||||||
"version": "6.0.1",
|
|
||||||
"description": "自定义简单实用中国省市区三级联动选择器picker 地区选择器picker 设置收获地址界面模版",
|
|
||||||
"keywords": [
|
|
||||||
"citypicker",
|
|
||||||
"省市区",
|
|
||||||
"picker",
|
|
||||||
"三级联动",
|
|
||||||
"选择器"
|
|
||||||
],
|
|
||||||
"repository": "",
|
|
||||||
"engines": {
|
|
||||||
"HBuilderX": "^3.8.0",
|
|
||||||
"uni-app": "^3.1.0",
|
|
||||||
"uni-app-x": "^3.1.0"
|
|
||||||
},
|
|
||||||
"dcloudext": {
|
|
||||||
"type": "component-vue",
|
|
||||||
"sale": {
|
|
||||||
"regular": {
|
|
||||||
"price": "0.00"
|
|
||||||
},
|
|
||||||
"sourcecode": {
|
|
||||||
"price": "0.00"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"contact": {
|
|
||||||
"qq": ""
|
|
||||||
},
|
|
||||||
"declaration": {
|
|
||||||
"ads": "无",
|
|
||||||
"data": "无",
|
|
||||||
"permissions": "无"
|
|
||||||
},
|
|
||||||
"npmurl": "",
|
|
||||||
"darkmode": "-",
|
|
||||||
"i18n": "-",
|
|
||||||
"widescreen": "-"
|
|
||||||
},
|
|
||||||
"uni_modules": {
|
|
||||||
"dependencies": [],
|
|
||||||
"encrypt": [],
|
|
||||||
"platforms": {
|
|
||||||
"cloud": {
|
|
||||||
"tcb": "√",
|
|
||||||
"aliyun": "√"
|
|
||||||
},
|
|
||||||
"client": {
|
|
||||||
"uni-app": {
|
|
||||||
"vue": {
|
|
||||||
"vue2": "-",
|
|
||||||
"vue3": "-"
|
|
||||||
},
|
|
||||||
"web": {
|
|
||||||
"safari": "-",
|
|
||||||
"chrome": "-"
|
|
||||||
},
|
|
||||||
"app": {
|
|
||||||
"vue": "-",
|
|
||||||
"nvue": "-",
|
|
||||||
"android": "-",
|
|
||||||
"ios": "-",
|
|
||||||
"harmony": "-"
|
|
||||||
},
|
|
||||||
"mp": {
|
|
||||||
"weixin": "-",
|
|
||||||
"alipay": "-",
|
|
||||||
"toutiao": "-",
|
|
||||||
"baidu": "-",
|
|
||||||
"kuaishou": "-",
|
|
||||||
"jd": "-",
|
|
||||||
"harmony": "-",
|
|
||||||
"qq": "-",
|
|
||||||
"lark": "-"
|
|
||||||
},
|
|
||||||
"quickapp": {
|
|
||||||
"huawei": "-",
|
|
||||||
"union": "-"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"uni-app-x": {
|
|
||||||
"web": {
|
|
||||||
"safari": "-",
|
|
||||||
"chrome": "-"
|
|
||||||
},
|
|
||||||
"app": {
|
|
||||||
"android": "-",
|
|
||||||
"ios": "-",
|
|
||||||
"harmony": "-"
|
|
||||||
},
|
|
||||||
"mp": {
|
|
||||||
"weixin": "-"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,232 +0,0 @@
|
||||||
# cc-selectDity
|
|
||||||
|
|
||||||
|
|
||||||
#### 使用方法
|
|
||||||
|
|
||||||
```使用方法
|
|
||||||
<!-- 省市区选择 province city area初始省市区设置 show:是否显示 @changeClick：更改省市区事件 @sureSelectArea：确认事件 @hideShow：隐藏事件-->
|
|
||||||
<cc-selectDity :province="province" :city="city" :area="area" :show="show" @changeClick="changeClick" @sureSelectArea="onsetCity"
|
|
||||||
@hideShow="onhideShow"></cc-selectDity>
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
#### HTML代码实现部分
|
|
||||||
```html
|
|
||||||
<template>
|
|
||||||
<view>
|
|
||||||
<view class="editaddress">
|
|
||||||
<view class="content">
|
|
||||||
<view class="row">
|
|
||||||
<view class="nominal">收货人</view>
|
|
||||||
<view class="input"><input placeholder="请输入收货人姓名" v-model="addressData.name" type="text" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="row">
|
|
||||||
<view class="nominal">电话号码</view>
|
|
||||||
<view class="input"><input placeholder="请输入收货人电话号码" v-model="addressData.phone" type="number"
|
|
||||||
maxlength="11" /></view>
|
|
||||||
</view>
|
|
||||||
<view class="row">
|
|
||||||
<view class="nominal">所在地区</view>
|
|
||||||
<view class="input selectcity" @tap="openPicker">
|
|
||||||
<input placeholder="请选择省市区" disabled type="text" v-model="addressData.address" />
|
|
||||||
<image src="/static/right.png" class="rights"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="row">
|
|
||||||
<view class="nominal">详细地址</view>
|
|
||||||
<view class="input"><textarea style="font-size: 28upx;" v-model="addressData.moreAddres"
|
|
||||||
auto-height="true" placeholder="输入详细地址" v-if="show == false"></textarea></view>
|
|
||||||
</view>
|
|
||||||
<view class="row">
|
|
||||||
<view class="nominal" style="color: 666;margin-top: 10upx;">设为默认地址</view>
|
|
||||||
<view class="input switch">
|
|
||||||
<switch :color="colors" style="transform:scale(0.8)" @change="switchChange"
|
|
||||||
:checked="addressData.isdefult == 1"></switch>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="save">
|
|
||||||
<view class="btn" :style="'background:' + colors">保存地址</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 省市区选择 province city area初始省市区设置 show:是否显示 @sureSelectArea：确认事件 @hideShow：隐藏事件-->
|
|
||||||
<cc-selectDity :province="province" :city="city" :area="area" :show="show" @changeClick="changeClick" @sureSelectArea="onsetCity"
|
|
||||||
@hideShow="onhideShow"></cc-selectDity>
|
|
||||||
|
|
||||||
</view>
|
|
||||||
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
colors: '#f23a3a',
|
|
||||||
show: false,
|
|
||||||
province:"广东省",
|
|
||||||
city:"广州市",
|
|
||||||
area: "天河区",
|
|
||||||
addressData: {
|
|
||||||
name: '',
|
|
||||||
phone: '',
|
|
||||||
address: '',
|
|
||||||
moreAddres: '',
|
|
||||||
isdefult: 0
|
|
||||||
},
|
|
||||||
isShow: true
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
openPicker() {
|
|
||||||
console.log('执行打开地址选择器')
|
|
||||||
this.show = true
|
|
||||||
},
|
|
||||||
|
|
||||||
changeClick(value, value2, value3){
|
|
||||||
|
|
||||||
console.log('地址选择器 = ' + value + value2 + value3);
|
|
||||||
|
|
||||||
this.province = value;
|
|
||||||
this.city = value2;
|
|
||||||
this.area = value3;
|
|
||||||
|
|
||||||
},
|
|
||||||
onhideShow() {
|
|
||||||
this.show = false
|
|
||||||
console.log('执行了关闭地址选择器')
|
|
||||||
},
|
|
||||||
//选中省市区
|
|
||||||
onsetCity(e) {
|
|
||||||
let data = e.detail.target.dataset;
|
|
||||||
let address = data.province + data.city + data.area;
|
|
||||||
this.show = false
|
|
||||||
this.addressData.address = address
|
|
||||||
},
|
|
||||||
//
|
|
||||||
switchChange(e) {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.save {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 120upx;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.save view {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.save .btn {
|
|
||||||
box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.4);
|
|
||||||
width: 70%;
|
|
||||||
height: 80upx;
|
|
||||||
border-radius: 80upx;
|
|
||||||
background-color: #f23a3a;
|
|
||||||
color: #fff;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 30upx;
|
|
||||||
margin-bottom: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.save .btn .icon {
|
|
||||||
height: 80upx;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 30upx;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-top: 40upx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content view {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content .row {
|
|
||||||
width: 92%;
|
|
||||||
margin: 0 4%;
|
|
||||||
border-bottom: solid 1upx #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content .row .nominal {
|
|
||||||
width: 30%;
|
|
||||||
height: 80upx;
|
|
||||||
font-size: 28upx;
|
|
||||||
font-family: Droid Sans Fallback;
|
|
||||||
font-weight: 400;
|
|
||||||
color: rgba(51, 51, 51, 1);
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content .row .input {
|
|
||||||
width: 70%;
|
|
||||||
padding: 20upx 0;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 28upx;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.content .row .input input {
|
|
||||||
font-size: 28upx;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content .row .switch {
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content .row .input textarea {
|
|
||||||
min-height: 40upx;
|
|
||||||
line-height: 40upx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content .del_box {
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-right: 30upx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content .del {
|
|
||||||
width: 240upx;
|
|
||||||
height: 80upx;
|
|
||||||
float: right;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 28upx;
|
|
||||||
color: #F23A3A;
|
|
||||||
margin: 0 auto;
|
|
||||||
margin-top: 50upx;
|
|
||||||
border-radius: 38upx;
|
|
||||||
background-color: rgba(255, 0, 0, 0.05);
|
|
||||||
border-bottom: solid 1upx #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectcity input {
|
|
||||||
width: 90%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectcity image {
|
|
||||||
width: 40upx;
|
|
||||||
height: 40upx;
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
```
|
|
||||||
Loading…
Reference in New Issue