收货地址
This commit is contained in:
Vinjor
parent
5188107ad3
commit
872e59cea7
12
pages.json
12
pages.json
@ -109,6 +109,18 @@
|
||||
"style": {
|
||||
"navigationBarTitleText": "编辑名片"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/addr/addr-list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "收货地址"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/addr/addr-detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "编辑地址"
|
||||
}
|
||||
}
|
||||
],
|
||||
"subPackages": [{
|
||||
|
||||
230
pages/mine/addr/addr-detail.vue
Normal file
230
pages/mine/addr/addr-detail.vue
Normal file
@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<view class="my-card-box">
|
||||
<view class="card-detail">
|
||||
<view class="title">地址信息</view>
|
||||
<view class="item-field">
|
||||
<view class="item-lable is-required">
|
||||
<image src="@/static/mine/required.png" mode="aspectFit"></image>收件人名称
|
||||
</view>
|
||||
<view class="item-value">
|
||||
<input class="uni-input" v-model="dataObj.name" type="number" placeholder="请输入" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-field">
|
||||
<view class="item-lable is-required">
|
||||
<image src="@/static/mine/required.png" mode="aspectFit"></image>联系电话
|
||||
</view>
|
||||
<view class="item-value">
|
||||
<input class="uni-input" v-model="dataObj.tel" type="tel" placeholder="请输入" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-field">
|
||||
<view class="item-lable is-required">
|
||||
<image src="@/static/mine/required.png" mode="aspectFit"></image>收件地址
|
||||
</view>
|
||||
<view class="item-value">
|
||||
<uni-data-picker placeholder="请选择" popup-title="请选择收件地址" :localdata="dataTree"
|
||||
v-model="dataObj.city" @change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened"
|
||||
@popupclosed="onpopupclosed">
|
||||
</uni-data-picker>
|
||||
<textarea style="margin-top: 10rpx;" v-model="dataObj.detail" placeholder="请输入详细地址" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-field">
|
||||
<view class="item-lable is-required">
|
||||
<image src="@/static/mine/required.png" mode="aspectFit"></image>是否默认
|
||||
</view>
|
||||
<view class="item-value">
|
||||
<uni-data-checkbox v-model="dataObj.isDefault" :localdata="chooseArray" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-field" style="align-items: center;">
|
||||
<view class="submit-box" @click="submit()">提交</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from '@/config'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 单选数据源
|
||||
chooseArray: [{
|
||||
text: '是',
|
||||
value: "1"
|
||||
}, {
|
||||
text: '否',
|
||||
value: "0"
|
||||
}],
|
||||
dataTree: [{
|
||||
text: "山东省",
|
||||
value: "山东省",
|
||||
children: [{
|
||||
text: "济南市",
|
||||
value: "济南市",
|
||||
children: [{
|
||||
text: "历城区",
|
||||
value: "历城区",
|
||||
children: [{
|
||||
text: "华山街道",
|
||||
value: "华山街道"
|
||||
},
|
||||
{
|
||||
text: "东风街道",
|
||||
value: "东风街道"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "历下区",
|
||||
value: "历下区"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "临沂市",
|
||||
value: "临沂市",
|
||||
children: [{
|
||||
text: "兰陵县",
|
||||
value: "兰陵县",
|
||||
children: [{
|
||||
text: "向城镇",
|
||||
value: "向城镇"
|
||||
}]
|
||||
}]
|
||||
}
|
||||
]
|
||||
}],
|
||||
//名片数据对象
|
||||
dataObj: {
|
||||
name: "",
|
||||
tel: "",
|
||||
city: "",
|
||||
detail: "",
|
||||
isDefault: "0"
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onnodeclick(e) {
|
||||
console.log(e);
|
||||
},
|
||||
onpopupopened(e) {
|
||||
console.log('popupopened');
|
||||
},
|
||||
onpopupclosed(e) {
|
||||
console.log('popupclosed');
|
||||
},
|
||||
onchange(e) {
|
||||
console.log('onchange:', e);
|
||||
},
|
||||
submit() {
|
||||
console.log(this.dataObj)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.my-card-box {
|
||||
border-top: 1rpx solid #F4F4F4;
|
||||
padding: 30rpx;
|
||||
width: 100%;
|
||||
color: #363636;
|
||||
font-size: 30rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: self-start;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.card-detail {
|
||||
width: 100%;
|
||||
padding: 20rpx;
|
||||
background-color: white;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: self-start;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
font-size: 33rpx;
|
||||
width: 100%;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 1rpx solid #F4F4F4;
|
||||
}
|
||||
|
||||
.item-field {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: self-start;
|
||||
justify-content: center;
|
||||
|
||||
.is-required {
|
||||
image {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-lable {
|
||||
padding: 15rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
.item-value {
|
||||
width: 100%;
|
||||
|
||||
input {
|
||||
padding-left: 20rpx;
|
||||
line-height: 1;
|
||||
height: 70rpx;
|
||||
border: 1rpx solid #dcdfe6;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.choose-add {
|
||||
color: #686868;
|
||||
padding: 10rpx 0 10rpx 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
border: 1rpx solid #dcdfe6;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 150rpx;
|
||||
color: #686868;
|
||||
padding: 10rpx 0 10rpx 20rpx;
|
||||
border: 1rpx solid #dcdfe6;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-box {
|
||||
padding: 15rpx 0;
|
||||
background-color: #FC1F3E;
|
||||
color: white;
|
||||
width: 70%;
|
||||
border-radius: 10rpx;
|
||||
margin-top: 80rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
249
pages/mine/addr/addr-list.vue
Normal file
249
pages/mine/addr/addr-list.vue
Normal file
@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<view class="addr-box">
|
||||
<view class="opt-box">
|
||||
<view v-if="!ifEdit" class="item-dom" @click="manager(true)"><uni-icons type="bars" color="#FC1F3E"
|
||||
size="16"></uni-icons><text>管理</text></view>
|
||||
<view v-if="!ifEdit" class="item-dom" @click="addNew()">
|
||||
<uni-icons type="plusempty" color="#FC1F3E" size="16"></uni-icons>
|
||||
<text>新增地址</text>
|
||||
</view>
|
||||
<view v-if="ifEdit" class="item-dom" @click="manager(false)"><uni-icons type="closeempty" color="#FC1F3E"
|
||||
size="16"></uni-icons><text>退出管理</text></view>
|
||||
</view>
|
||||
<view class="addr-list-box">
|
||||
<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="onReachBottomCus" refresher-enabled
|
||||
@refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered">
|
||||
<view v-for="(item,index) in dataList" class="addr-item-box">
|
||||
<view class="addr-item-top">
|
||||
<view class="item-info">
|
||||
<view class="text little-1">广东省 深圳市 宝安区 新安街道</view>
|
||||
<view class="text">宝安中心区画像年华A栋</view>
|
||||
<view class="text little-2 item-flex">
|
||||
网二 17777777777 <view v-if="item.isDefault=='1'" class="item-icon">默认</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-opt">
|
||||
<uni-icons type="compose" color="#565656" size="16"></uni-icons><text>编辑</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="addr-item-opt" v-if="ifEdit">
|
||||
<view class="opt-button choose" v-if="item.isDefault!='1'">设为默认</view>
|
||||
<view class="opt-button">复制</view>
|
||||
<view class="opt-button">删除</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="text-align: center" v-if="dataList.length==0">
|
||||
<image class="" src="@/static/images/nothing.png"></image>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ifEdit: false,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
total: 0,
|
||||
//下来刷新状态
|
||||
isTriggered: false,
|
||||
dataList: [{
|
||||
id: null,
|
||||
tel: "",
|
||||
name: "",
|
||||
city: "",
|
||||
detail: "",
|
||||
isDefault: "1",
|
||||
}, {
|
||||
id: null,
|
||||
tel: "",
|
||||
name: "",
|
||||
city: "",
|
||||
detail: "",
|
||||
isDefault: "0",
|
||||
}, {
|
||||
id: null,
|
||||
tel: "",
|
||||
name: "",
|
||||
city: "",
|
||||
detail: "",
|
||||
isDefault: "0",
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addNew() {
|
||||
this.$tab.navigateTo(`/pages/mine/addr/addr-detail`)
|
||||
},
|
||||
/**
|
||||
* 进入管理
|
||||
*/
|
||||
manager(flag) {
|
||||
this.ifEdit = flag
|
||||
},
|
||||
/**
|
||||
* 上滑加载数据
|
||||
*/
|
||||
onReachBottomCus() {
|
||||
//判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
|
||||
if (this.queryParams.pageNum * this.queryParams.pageSize >= this.total) {
|
||||
toast("没有更多数据了")
|
||||
return
|
||||
}
|
||||
//页码+1,调用获取数据的方法获取第二页数据
|
||||
this.queryParams.pageNum++
|
||||
},
|
||||
/**
|
||||
* 下拉刷新数据
|
||||
*/
|
||||
onRefresherrefresh() {
|
||||
this.isTriggered = true
|
||||
this.queryParams.pageNum = 1
|
||||
this.total = 0
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.addr-box {
|
||||
border-top: 1rpx solid #F4F4F4;
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
color: #363636;
|
||||
font-size: 32rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: self-start;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.opt-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
color: #FC1F3E;
|
||||
padding: 25rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom: 1rpx solid #F2F2F2;
|
||||
|
||||
.item-dom {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
text {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.addr-list-box {
|
||||
height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 57rpx);
|
||||
padding: 0 30rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.addr-item-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #F2F2F2;
|
||||
|
||||
.addr-item-top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.item-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: self-start;
|
||||
justify-content: center;
|
||||
|
||||
.text {
|
||||
padding: 5rpx;
|
||||
}
|
||||
|
||||
.little-1 {
|
||||
color: #929292;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.little-2 {
|
||||
color: #363636;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.item-flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.item-icon {
|
||||
font-size: 18rpx;
|
||||
margin-left: 10rpx;
|
||||
border-radius: 10rpx;
|
||||
padding: 3rpx 18rpx;
|
||||
background-color: #FEE8EB;
|
||||
color: #FC3753;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-opt {
|
||||
font-size: 26rpx;
|
||||
width: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
text {
|
||||
padding-left: 5rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.addr-item-opt {
|
||||
width: 100%;
|
||||
padding-top: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
.opt-button {
|
||||
margin: 0 15rpx;
|
||||
font-size: 26rpx;
|
||||
color: #363636;
|
||||
background-color: #E2E2E2;
|
||||
border-radius: 20rpx;
|
||||
padding: 10rpx 30rpx;
|
||||
}
|
||||
|
||||
.choose {
|
||||
background-color: #FEE8EB;
|
||||
color: #FC3753;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -1,22 +1,227 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
<view class="my-card-box">
|
||||
<view class="card-detail">
|
||||
<view class="title">名片信息</view>
|
||||
<view class="item-field">
|
||||
<view class="item-lable is-required">
|
||||
<image src="@/static/mine/required.png" mode="aspectFit"></image>平台
|
||||
</view>
|
||||
<view class="item-value">
|
||||
<uni-data-select v-model="dataObj.platformCode" :localdata="range"
|
||||
@change="change($event,'platformCode')" :clear="false"
|
||||
:imgCode="dataObj.platformCode"></uni-data-select>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-field">
|
||||
<view class="item-lable is-required">
|
||||
<image src="@/static/mine/required.png" mode="aspectFit"></image>粉丝数
|
||||
</view>
|
||||
<view class="item-value">
|
||||
<input class="uni-input" v-model="dataObj.fansNum" type="number" placeholder="请输入" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-field">
|
||||
<view class="item-lable is-required">
|
||||
<image src="@/static/mine/required.png" mode="aspectFit"></image>联系电话
|
||||
</view>
|
||||
<view class="item-value">
|
||||
<input class="uni-input" v-model="dataObj.tel" type="tel" placeholder="请输入" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-field">
|
||||
<view class="item-lable is-required">
|
||||
<image src="@/static/mine/required.png" mode="aspectFit"></image>收货地址
|
||||
</view>
|
||||
<view class="item-value">
|
||||
<view class="choose-add" @click="chooseAddr()">请选择收货地址</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-field">
|
||||
<view class="item-lable">
|
||||
商单自报价（选填）
|
||||
</view>
|
||||
<view class="item-value">
|
||||
<input class="uni-input" v-model="dataObj.price" type="decimal" placeholder="请输入" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-field">
|
||||
<view class="item-lable">
|
||||
所在领域/合作方式（选填）
|
||||
</view>
|
||||
<view class="item-value">
|
||||
<textarea v-model="dataObj.content" placeholder="请输入" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-field">
|
||||
<view class="item-lable is-required">
|
||||
<image src="@/static/mine/required.png" mode="aspectFit"></image>证明材料
|
||||
</view>
|
||||
<view class="item-value">
|
||||
<uni-file-picker :value="fileList" :sizeType="sizeType" @select="afterRead" @delete="deleteFile"
|
||||
limit="9"></uni-file-picker>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-field" style="align-items: center;">
|
||||
<view class="submit-box">提交</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from '@/config'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
//所有可选的平台
|
||||
range: [{
|
||||
value: 'xiaohongshu',
|
||||
text: "小红书"
|
||||
},
|
||||
{
|
||||
value: 'douyin',
|
||||
text: "抖音"
|
||||
}
|
||||
],
|
||||
sizeType: ['compressed'],
|
||||
//图片数组
|
||||
fileList: [],
|
||||
//名片数据对象
|
||||
dataObj: {
|
||||
platformCode: "xiaohongshu",
|
||||
fansNum: null,
|
||||
tel: null
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//改变选中值
|
||||
change(e, type) {},
|
||||
/**
|
||||
* 选择收货地址
|
||||
*/
|
||||
chooseAddr() {
|
||||
|
||||
},
|
||||
afterRead(file) {
|
||||
for (let i = 0; i < file.tempFilePaths.length; i++) {
|
||||
upload({
|
||||
url: '',
|
||||
filePath: file.tempFilePaths[i]
|
||||
}).then((res) => {
|
||||
this.fileList.push({
|
||||
url: config.baseUrl + res.data
|
||||
})
|
||||
console.log(this.fileList)
|
||||
})
|
||||
}
|
||||
},
|
||||
deleteFile(file, index) {
|
||||
console.log('删除文件');
|
||||
this.fileList.splice(index, 1);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
.my-card-box {
|
||||
border-top: 1rpx solid #F4F4F4;
|
||||
padding: 30rpx;
|
||||
width: 100%;
|
||||
color: #363636;
|
||||
font-size: 30rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: self-start;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.card-detail {
|
||||
width: 100%;
|
||||
padding: 20rpx;
|
||||
background-color: white;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: self-start;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
font-size: 33rpx;
|
||||
width: 100%;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 1rpx solid #F4F4F4;
|
||||
}
|
||||
|
||||
.item-field {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: self-start;
|
||||
justify-content: center;
|
||||
|
||||
.is-required {
|
||||
image {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-lable {
|
||||
padding: 15rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
.item-value {
|
||||
width: 100%;
|
||||
|
||||
input {
|
||||
padding-left: 20rpx;
|
||||
line-height: 1;
|
||||
height: 70rpx;
|
||||
border: 1rpx solid #dcdfe6;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.choose-add {
|
||||
color: #686868;
|
||||
padding: 10rpx 0 10rpx 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
border: 1rpx solid #dcdfe6;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 150rpx;
|
||||
color: #686868;
|
||||
padding: 10rpx 0 10rpx 20rpx;
|
||||
border: 1rpx solid #dcdfe6;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-box {
|
||||
padding: 15rpx 0;
|
||||
background-color: #FC1F3E;
|
||||
color: white;
|
||||
width: 70%;
|
||||
border-radius: 10rpx;
|
||||
margin-top: 80rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -67,7 +67,7 @@
|
||||
<image src="@/static/mine/shezhi.png" mode="aspectFit"></image>
|
||||
<view>设置</view>
|
||||
</view>
|
||||
<view class="menu-item">
|
||||
<view class="menu-item" @click="goMyAddr()">
|
||||
<image src="@/static/mine/dizhi.png" mode="aspectFit"></image>
|
||||
<view>地址</view>
|
||||
</view>
|
||||
@ -153,11 +153,17 @@
|
||||
this.$tab.navigateTo('/pages/mine/info/index')
|
||||
},
|
||||
/**
|
||||
*
|
||||
* 跳转名片列表
|
||||
*/
|
||||
goMyCard() {
|
||||
this.$tab.navigateTo('/pages/mine/card/my-card')
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 跳转地址列表
|
||||
*/
|
||||
goMyAddr() {
|
||||
this.$tab.navigateTo('/pages/mine/addr/addr-list')
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -2,36 +2,46 @@
|
||||
<view class="uni-data-checklist" :style="{'margin-top':isTop+'px'}">
|
||||
<template v-if="!isLocal">
|
||||
<view class="uni-data-loading">
|
||||
<uni-load-more v-if="!mixinDatacomErrorMessage" status="loading" iconType="snow" :iconSize="18" :content-text="contentText"></uni-load-more>
|
||||
<uni-load-more v-if="!mixinDatacomErrorMessage" status="loading" iconType="snow" :iconSize="18"
|
||||
:content-text="contentText"></uni-load-more>
|
||||
<text v-else>{{mixinDatacomErrorMessage}}</text>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<checkbox-group v-if="multiple" class="checklist-group" :class="{'is-list':mode==='list' || wrap}" @change="chagne">
|
||||
<label class="checklist-box" :class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
|
||||
<checkbox-group v-if="multiple" class="checklist-group" :class="{'is-list':mode==='list' || wrap}"
|
||||
@change="chagne">
|
||||
<label class="checklist-box"
|
||||
:class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
|
||||
:style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
|
||||
<checkbox class="hidden" hidden :disabled="disabled || !!item.disabled" :value="item[map.value]+''" :checked="item.selected" />
|
||||
<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="checkbox__inner" :style="item.styleIcon">
|
||||
<checkbox class="hidden" hidden :disabled="disabled || !!item.disabled" :value="item[map.value]+''"
|
||||
:checked="item.selected" />
|
||||
<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')"
|
||||
class="checkbox__inner" :style="item.styleIcon">
|
||||
<view class="checkbox__inner-icon"></view>
|
||||
</view>
|
||||
<view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
|
||||
<text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
|
||||
<view v-if="mode === 'list' && icon === 'right'" class="checkobx__list" :style="item.styleBackgroud"></view>
|
||||
<view v-if="mode === 'list' && icon === 'right'" class="checkobx__list"
|
||||
:style="item.styleBackgroud"></view>
|
||||
</view>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
<radio-group v-else class="checklist-group" :class="{'is-list':mode==='list','is-wrap':wrap}" @change="chagne">
|
||||
<radio-group v-else class="checklist-group" :class="{'is-list':mode==='list','is-wrap':wrap}"
|
||||
@change="chagne">
|
||||
<!-- -->
|
||||
<label class="checklist-box" :class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
|
||||
<label class="checklist-box"
|
||||
:class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
|
||||
:style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
|
||||
<radio class="hidden" hidden :disabled="disabled || item.disabled" :value="item[map.value]+''" :checked="item.selected" />
|
||||
<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="radio__inner"
|
||||
:style="item.styleBackgroud">
|
||||
<radio class="hidden" hidden :disabled="disabled || item.disabled" :value="item[map.value]+''"
|
||||
:checked="item.selected" />
|
||||
<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')"
|
||||
class="radio__inner" :style="item.styleBackgroud">
|
||||
<view class="radio__inner-icon" :style="item.styleIcon"></view>
|
||||
</view>
|
||||
<view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
|
||||
<text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
|
||||
<view v-if="mode === 'list' && icon === 'right'" :style="item.styleRightIcon" class="checkobx__list"></view>
|
||||
<view v-if="mode === 'list' && icon === 'right'" :style="item.styleRightIcon"
|
||||
class="checkobx__list"></view>
|
||||
</view>
|
||||
</label>
|
||||
</radio-group>
|
||||
@ -68,7 +78,7 @@
|
||||
export default {
|
||||
name: 'uniDataChecklist',
|
||||
mixins: [uniCloud.mixinDatacom || {}],
|
||||
emits:['input','update:modelValue','change'],
|
||||
emits: ['input', 'update:modelValue', 'change'],
|
||||
props: {
|
||||
mode: {
|
||||
type: String,
|
||||
@ -88,7 +98,7 @@
|
||||
// TODO vue3
|
||||
modelValue: {
|
||||
type: [Array, String, Number],
|
||||
default() {
|
||||
default () {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
@ -122,20 +132,20 @@
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
emptyText:{
|
||||
emptyText: {
|
||||
type: String,
|
||||
default: '暂无数据'
|
||||
},
|
||||
disabled:{
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
map:{
|
||||
map: {
|
||||
type: Object,
|
||||
default(){
|
||||
default () {
|
||||
return {
|
||||
text:'text',
|
||||
value:'value'
|
||||
text: 'text',
|
||||
value: 'value'
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -177,18 +187,18 @@
|
||||
contentrefresh: '加载中',
|
||||
contentnomore: '没有更多'
|
||||
},
|
||||
isLocal:true,
|
||||
isLocal: true,
|
||||
styles: {
|
||||
selectedColor: '#2979ff',
|
||||
selectedTextColor: '#666',
|
||||
},
|
||||
isTop:0
|
||||
isTop: 0
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
dataValue(){
|
||||
if(this.value === '')return this.modelValue
|
||||
if(this.modelValue === '') return this.value
|
||||
computed: {
|
||||
dataValue() {
|
||||
if (this.value === '') return this.modelValue
|
||||
if (this.modelValue === '') return this.value
|
||||
return this.value
|
||||
}
|
||||
},
|
||||
@ -223,15 +233,15 @@
|
||||
},
|
||||
methods: {
|
||||
loadData() {
|
||||
this.mixinDatacomGet().then(res=>{
|
||||
this.mixinDatacomGet().then(res => {
|
||||
this.mixinDatacomResData = res.result.data
|
||||
if(this.mixinDatacomResData.length === 0){
|
||||
if (this.mixinDatacomResData.length === 0) {
|
||||
this.isLocal = false
|
||||
this.mixinDatacomErrorMessage = this.emptyText
|
||||
}else{
|
||||
} else {
|
||||
this.isLocal = true
|
||||
}
|
||||
}).catch(err=>{
|
||||
}).catch(err => {
|
||||
this.mixinDatacomErrorMessage = err.message
|
||||
})
|
||||
},
|
||||
@ -383,13 +393,13 @@
|
||||
*/
|
||||
setStyleBackgroud(item) {
|
||||
let styles = {}
|
||||
let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
|
||||
let selectedColor = this.selectedColor ? this.selectedColor : '#2979ff'
|
||||
if (this.selectedColor) {
|
||||
if (this.mode !== 'list') {
|
||||
styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
|
||||
styles['border-color'] = item.selected ? selectedColor : '#DCDFE6'
|
||||
}
|
||||
if (this.mode === 'tag') {
|
||||
styles['background-color'] = item.selected? selectedColor:'#f5f5f5'
|
||||
styles['background-color'] = item.selected ? selectedColor : '#f5f5f5'
|
||||
}
|
||||
}
|
||||
let classles = ''
|
||||
@ -402,13 +412,13 @@
|
||||
let styles = {}
|
||||
let classles = ''
|
||||
if (this.selectedColor) {
|
||||
let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
|
||||
styles['background-color'] = item.selected?selectedColor:'#fff'
|
||||
styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
|
||||
let selectedColor = this.selectedColor ? this.selectedColor : '#2979ff'
|
||||
styles['background-color'] = item.selected ? selectedColor : '#fff'
|
||||
styles['border-color'] = item.selected ? selectedColor : '#DCDFE6'
|
||||
|
||||
if(!item.selected && item.disabled){
|
||||
if (!item.selected && item.disabled) {
|
||||
styles['background-color'] = '#F2F6FC'
|
||||
styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
|
||||
styles['border-color'] = item.selected ? selectedColor : '#DCDFE6'
|
||||
}
|
||||
}
|
||||
for (let i in styles) {
|
||||
@ -420,13 +430,14 @@
|
||||
let styles = {}
|
||||
let classles = ''
|
||||
if (this.selectedColor) {
|
||||
let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
|
||||
let selectedColor = this.selectedColor ? this.selectedColor : '#2979ff'
|
||||
if (this.mode === 'tag') {
|
||||
styles.color = item.selected?(this.selectedTextColor?this.selectedTextColor:'#fff'):'#666'
|
||||
styles.color = item.selected ? (this.selectedTextColor ? this.selectedTextColor : '#fff') : '#666'
|
||||
} else {
|
||||
styles.color = item.selected?(this.selectedTextColor?this.selectedTextColor:selectedColor):'#666'
|
||||
styles.color = item.selected ? (this.selectedTextColor ? this.selectedTextColor : selectedColor) :
|
||||
'#666'
|
||||
}
|
||||
if(!item.selected && item.disabled){
|
||||
if (!item.selected && item.disabled) {
|
||||
styles.color = '#999'
|
||||
}
|
||||
}
|
||||
@ -439,7 +450,7 @@
|
||||
let styles = {}
|
||||
let classles = ''
|
||||
if (this.mode === 'list') {
|
||||
styles['border-color'] = item.selected?this.styles.selectedColor:'#DCDFE6'
|
||||
styles['border-color'] = item.selected ? this.styles.selectedColor : '#DCDFE6'
|
||||
}
|
||||
for (let i in styles) {
|
||||
classles += `${i}:${styles[i]};`
|
||||
@ -452,9 +463,9 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$uni-primary: #2979ff !default;
|
||||
$uni-primary: #FC1F3E !default;
|
||||
$border-color: #DCDFE6;
|
||||
$disable:0.4;
|
||||
$disable: 0.4;
|
||||
|
||||
@mixin flex {
|
||||
/* #ifndef APP-NVUE */
|
||||
@ -476,6 +487,7 @@
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
flex: 1;
|
||||
|
||||
// 多选样式
|
||||
.checklist-group {
|
||||
@include flex;
|
||||
@ -506,6 +518,7 @@
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.checklist-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
@ -517,7 +530,7 @@
|
||||
border-right-width: 1px;
|
||||
border-right-color: #007aff;
|
||||
border-right-style: solid;
|
||||
border-bottom-width:1px;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: #007aff;
|
||||
border-bottom-style: solid;
|
||||
height: 12px;
|
||||
@ -542,6 +555,7 @@
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
|
||||
.checkbox__inner-icon {
|
||||
position: absolute;
|
||||
/* #ifdef APP-NVUE */
|
||||
@ -556,7 +570,7 @@
|
||||
border-right-width: 1px;
|
||||
border-right-color: #fff;
|
||||
border-right-style: solid;
|
||||
border-bottom-width:1px ;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: #fff;
|
||||
border-bottom-style: solid;
|
||||
opacity: 0;
|
||||
@ -597,6 +611,7 @@
|
||||
&.is-disable {
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed;
|
||||
|
||||
/* #endif */
|
||||
.checkbox__inner {
|
||||
background-color: #F2F6FC;
|
||||
@ -610,6 +625,7 @@
|
||||
background-color: #F2F6FC;
|
||||
border-color: $border-color;
|
||||
}
|
||||
|
||||
.checklist-text {
|
||||
color: #999;
|
||||
}
|
||||
@ -626,16 +642,20 @@
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.radio__inner {
|
||||
border-color: $uni-primary;
|
||||
|
||||
.radio__inner-icon {
|
||||
opacity: 1;
|
||||
background-color: $uni-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.checklist-text {
|
||||
color: $uni-primary;
|
||||
}
|
||||
|
||||
// 选中禁用
|
||||
&.is-disable {
|
||||
.checkbox__inner {
|
||||
@ -645,6 +665,7 @@
|
||||
.checklist-text {
|
||||
opacity: $disable;
|
||||
}
|
||||
|
||||
.radio__inner {
|
||||
opacity: $disable;
|
||||
}
|
||||
@ -667,6 +688,7 @@
|
||||
/* #endif */
|
||||
border: 1px #eee solid;
|
||||
opacity: $disable;
|
||||
|
||||
.checkbox__inner {
|
||||
background-color: #F2F6FC;
|
||||
border-color: $border-color;
|
||||
@ -674,6 +696,7 @@
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.radio__inner {
|
||||
background-color: #F2F6FC;
|
||||
border-color: $border-color;
|
||||
@ -681,6 +704,7 @@
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.checklist-text {
|
||||
color: #999;
|
||||
}
|
||||
@ -688,9 +712,11 @@
|
||||
|
||||
&.is-checked {
|
||||
border-color: $uni-primary;
|
||||
|
||||
.checkbox__inner {
|
||||
border-color: $uni-primary;
|
||||
background-color: $uni-primary;
|
||||
|
||||
.checkbox__inner-icon {
|
||||
opacity: 1;
|
||||
transform: rotate(45deg);
|
||||
@ -747,6 +773,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 列表样式
|
||||
&.is--list {
|
||||
/* #ifndef APP-NVUE */
|
||||
@ -764,6 +791,7 @@
|
||||
&.is-disable {
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed;
|
||||
|
||||
/* #endif */
|
||||
.checkbox__inner {
|
||||
background-color: #F2F6FC;
|
||||
@ -772,6 +800,7 @@
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.checklist-text {
|
||||
color: #999;
|
||||
}
|
||||
@ -787,11 +816,13 @@
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.radio__inner {
|
||||
.radio__inner-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.checklist-text {
|
||||
color: $uni-primary;
|
||||
}
|
||||
|
||||
@ -4,10 +4,12 @@
|
||||
<view class="uni-stat-box" :class="{'uni-stat__actived': current}">
|
||||
<view class="uni-select" :class="{'uni-select--disabled':disabled}">
|
||||
<view class="uni-select__input-box" @click="toggleSelector">
|
||||
<image v-if="''!=imgCode" class="cus-img" :src="'/static/platform/'+imgCode+'.png'"
|
||||
mode="aspectFit"></image>
|
||||
<view v-if="current" class="uni-select__input-text">{{current}}</view>
|
||||
<view v-else class="uni-select__input-text uni-select__input-placeholder">{{typePlaceholder}}</view>
|
||||
<view v-if="current && clear && !disabled" @click.stop="clearVal" >
|
||||
<uni-icons type="clear" color="#c0c4cc" size="24"/>
|
||||
<view v-if="current && clear && !disabled" @click.stop="clearVal">
|
||||
<uni-icons type="clear" color="#c0c4cc" size="24" />
|
||||
</view>
|
||||
<view v-else>
|
||||
<uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" />
|
||||
@ -20,9 +22,10 @@
|
||||
<view class="uni-select__selector-empty" v-if="mixinDatacomResData.length === 0">
|
||||
<text>{{emptyTips}}</text>
|
||||
</view>
|
||||
<view v-else class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResData" :key="index"
|
||||
@click="change(item)">
|
||||
<text :class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</text>
|
||||
<view v-else class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResData"
|
||||
:key="index" @click="change(item)">
|
||||
<text
|
||||
:class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
@ -68,6 +71,10 @@
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
imgCode: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请选择'
|
||||
@ -125,7 +132,7 @@
|
||||
common + placeholder :
|
||||
common
|
||||
},
|
||||
valueCom(){
|
||||
valueCom() {
|
||||
// #ifdef VUE3
|
||||
return this.modelValue;
|
||||
// #endif
|
||||
@ -156,7 +163,7 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
debounce(fn, time = 100){
|
||||
debounce(fn, time = 100) {
|
||||
let timer = null
|
||||
return function(...args) {
|
||||
if (timer) clearTimeout(timer)
|
||||
@ -166,11 +173,11 @@
|
||||
}
|
||||
},
|
||||
// 执行数据库查询
|
||||
query(){
|
||||
query() {
|
||||
this.mixinDatacomEasyGet();
|
||||
},
|
||||
// 监听查询条件变更事件
|
||||
onMixinDatacomPropsChange(){
|
||||
onMixinDatacomPropsChange() {
|
||||
if (this.collection) {
|
||||
this.debounceGet();
|
||||
}
|
||||
@ -258,7 +265,7 @@
|
||||
let str = "";
|
||||
str = this.format;
|
||||
for (let key in item) {
|
||||
str = str.replace(new RegExp(`{${key}}`,"g"),item[key]);
|
||||
str = str.replace(new RegExp(`{${key}}`, "g"), item[key]);
|
||||
}
|
||||
return str;
|
||||
} else {
|
||||
@ -272,26 +279,26 @@
|
||||
}
|
||||
},
|
||||
// 获取当前加载的数据
|
||||
getLoadData(){
|
||||
getLoadData() {
|
||||
return this.mixinDatacomResData;
|
||||
},
|
||||
// 获取当前缓存key
|
||||
getCurrentCacheKey(){
|
||||
getCurrentCacheKey() {
|
||||
return this.collection;
|
||||
},
|
||||
// 获取缓存
|
||||
getCache(name=this.getCurrentCacheKey()){
|
||||
getCache(name = this.getCurrentCacheKey()) {
|
||||
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
||||
return cacheData[name];
|
||||
},
|
||||
// 设置缓存
|
||||
setCache(value, name=this.getCurrentCacheKey()){
|
||||
setCache(value, name = this.getCurrentCacheKey()) {
|
||||
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
||||
cacheData[name] = value;
|
||||
uni.setStorageSync(this.cacheKey, cacheData);
|
||||
},
|
||||
// 删除缓存
|
||||
removeCache(name=this.getCurrentCacheKey()){
|
||||
removeCache(name = this.getCurrentCacheKey()) {
|
||||
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
||||
delete cacheData[name];
|
||||
uni.setStorageSync(this.cacheKey, cacheData);
|
||||
@ -379,6 +386,12 @@
|
||||
color: $uni-secondary-color;
|
||||
}
|
||||
|
||||
.cus-img {
|
||||
margin-right: 8rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.uni-select__input-box {
|
||||
height: 35px;
|
||||
position: relative;
|
||||
@ -431,6 +444,7 @@
|
||||
max-height: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.uni-select__selector-empty,
|
||||
|
||||
@ -1,74 +1,34 @@
|
||||
<template>
|
||||
<view class="uni-easyinput" :class="{ 'uni-easyinput-error': msg }" :style="boxStyle">
|
||||
<view class="uni-easyinput__content" :class="inputContentClass" :style="inputContentStyle">
|
||||
<uni-icons v-if="prefixIcon" class="content-clear-icon" :type="prefixIcon" color="#c0c4cc" @click="onClickIcon('prefix')" size="22"></uni-icons>
|
||||
<textarea
|
||||
v-if="type === 'textarea'"
|
||||
class="uni-easyinput__content-textarea"
|
||||
:class="{ 'input-padding': inputBorder }"
|
||||
:name="name"
|
||||
:value="val"
|
||||
:placeholder="placeholder"
|
||||
:placeholderStyle="placeholderStyle"
|
||||
:disabled="disabled"
|
||||
placeholder-class="uni-easyinput__placeholder-class"
|
||||
:maxlength="inputMaxlength"
|
||||
:focus="focused"
|
||||
:autoHeight="autoHeight"
|
||||
:cursor-spacing="cursorSpacing"
|
||||
@input="onInput"
|
||||
@blur="_Blur"
|
||||
@focus="_Focus"
|
||||
@confirm="onConfirm"
|
||||
@keyboardheightchange="onkeyboardheightchange"
|
||||
></textarea>
|
||||
<input
|
||||
v-else
|
||||
:type="type === 'password' ? 'text' : type"
|
||||
class="uni-easyinput__content-input"
|
||||
:style="inputStyle"
|
||||
:name="name"
|
||||
:value="val"
|
||||
:password="!showPassword && type === 'password'"
|
||||
:placeholder="placeholder"
|
||||
:placeholderStyle="placeholderStyle"
|
||||
placeholder-class="uni-easyinput__placeholder-class"
|
||||
:disabled="disabled"
|
||||
:maxlength="inputMaxlength"
|
||||
:focus="focused"
|
||||
:confirmType="confirmType"
|
||||
:cursor-spacing="cursorSpacing"
|
||||
@focus="_Focus"
|
||||
@blur="_Blur"
|
||||
@input="onInput"
|
||||
@confirm="onConfirm"
|
||||
@keyboardheightchange="onkeyboardheightchange"
|
||||
/>
|
||||
<uni-icons v-if="prefixIcon" class="content-clear-icon" :type="prefixIcon" color="#c0c4cc"
|
||||
@click="onClickIcon('prefix')" size="22"></uni-icons>
|
||||
<textarea v-if="type === 'textarea'" class="uni-easyinput__content-textarea"
|
||||
:class="{ 'input-padding': inputBorder }" :name="name" :value="val" :placeholder="placeholder"
|
||||
:placeholderStyle="placeholderStyle" :disabled="disabled"
|
||||
placeholder-class="uni-easyinput__placeholder-class" :maxlength="inputMaxlength" :focus="focused"
|
||||
:autoHeight="autoHeight" :cursor-spacing="cursorSpacing" @input="onInput" @blur="_Blur" @focus="_Focus"
|
||||
@confirm="onConfirm" @keyboardheightchange="onkeyboardheightchange"></textarea>
|
||||
<input v-else :type="type === 'password' ? 'text' : type" class="uni-easyinput__content-input"
|
||||
:style="inputStyle" :name="name" :value="val" :password="!showPassword && type === 'password'"
|
||||
:placeholder="placeholder" :placeholderStyle="placeholderStyle"
|
||||
placeholder-class="uni-easyinput__placeholder-class" :disabled="disabled" :maxlength="inputMaxlength"
|
||||
:focus="focused" :confirmType="confirmType" :cursor-spacing="cursorSpacing" @focus="_Focus"
|
||||
@blur="_Blur" @input="onInput" @confirm="onConfirm" @keyboardheightchange="onkeyboardheightchange" />
|
||||
<template v-if="type === 'password' && passwordIcon">
|
||||
<!-- 开启密码时显示小眼睛 -->
|
||||
<uni-icons
|
||||
v-if="isVal"
|
||||
class="content-clear-icon"
|
||||
:class="{ 'is-textarea-icon': type === 'textarea' }"
|
||||
:type="showPassword ? 'eye-slash-filled' : 'eye-filled'"
|
||||
:size="22"
|
||||
:color="focusShow ? primaryColor : '#c0c4cc'"
|
||||
@click="onEyes"
|
||||
></uni-icons>
|
||||
<uni-icons v-if="isVal" class="content-clear-icon" :class="{ 'is-textarea-icon': type === 'textarea' }"
|
||||
:type="showPassword ? 'eye-slash-filled' : 'eye-filled'" :size="22"
|
||||
:color="focusShow ? primaryColor : '#c0c4cc'" @click="onEyes"></uni-icons>
|
||||
</template>
|
||||
<template v-else-if="suffixIcon">
|
||||
<uni-icons v-if="suffixIcon" class="content-clear-icon" :type="suffixIcon" color="#c0c4cc" @click="onClickIcon('suffix')" size="22"></uni-icons>
|
||||
<uni-icons v-if="suffixIcon" class="content-clear-icon" :type="suffixIcon" color="#c0c4cc"
|
||||
@click="onClickIcon('suffix')" size="22"></uni-icons>
|
||||
</template>
|
||||
<template v-else>
|
||||
<uni-icons
|
||||
v-if="clearable && isVal && !disabled && type !== 'textarea'"
|
||||
class="content-clear-icon"
|
||||
:class="{ 'is-textarea-icon': type === 'textarea' }"
|
||||
type="clear"
|
||||
:size="clearSize"
|
||||
:color="msg ? '#dd524d' : focusShow ? primaryColor : '#c0c4cc'"
|
||||
@click="onClear"
|
||||
></uni-icons>
|
||||
<uni-icons v-if="clearable && isVal && !disabled && type !== 'textarea'" class="content-clear-icon"
|
||||
:class="{ 'is-textarea-icon': type === 'textarea' }" type="clear" :size="clearSize"
|
||||
:color="msg ? '#dd524d' : focusShow ? primaryColor : '#c0c4cc'" @click="onClear"></uni-icons>
|
||||
</template>
|
||||
<slot name="right"></slot>
|
||||
</view>
|
||||
@ -76,7 +36,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
/**
|
||||
* Easyinput 输入框
|
||||
* @description 此组件可以实现表单的输入与校验，包括 "text" 和 "textarea" 类型。
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=3455
|
||||
@ -119,7 +79,7 @@
|
||||
* @event {Function} iconClick 点击图标时触发
|
||||
* @example <uni-easyinput v-model="mobile"></uni-easyinput>
|
||||
*/
|
||||
function obj2strClass(obj) {
|
||||
function obj2strClass(obj) {
|
||||
let classess = '';
|
||||
for (let key in obj) {
|
||||
const val = obj[key];
|
||||
@ -128,19 +88,21 @@ function obj2strClass(obj) {
|
||||
}
|
||||
}
|
||||
return classess;
|
||||
}
|
||||
}
|
||||
|
||||
function obj2strStyle(obj) {
|
||||
function obj2strStyle(obj) {
|
||||
let style = '';
|
||||
for (let key in obj) {
|
||||
const val = obj[key];
|
||||
style += `${key}:${val};`;
|
||||
}
|
||||
return style;
|
||||
}
|
||||
export default {
|
||||
}
|
||||
export default {
|
||||
name: 'uni-easyinput',
|
||||
emits: ['click', 'iconClick', 'update:modelValue', 'input', 'focus', 'blur', 'confirm', 'clear', 'eyes', 'change', 'keyboardheightchange'],
|
||||
emits: ['click', 'iconClick', 'update:modelValue', 'input', 'focus', 'blur', 'confirm', 'clear', 'eyes', 'change',
|
||||
'keyboardheightchange'
|
||||
],
|
||||
model: {
|
||||
prop: 'modelValue',
|
||||
event: 'update:modelValue'
|
||||
@ -225,11 +187,11 @@ export default {
|
||||
},
|
||||
primaryColor: {
|
||||
type: String,
|
||||
default: '#2979ff'
|
||||
default: '#FC1F3E'
|
||||
},
|
||||
styles: {
|
||||
type: Object,
|
||||
default() {
|
||||
default () {
|
||||
return {
|
||||
color: '#333',
|
||||
backgroundColor: '#fff',
|
||||
@ -430,7 +392,9 @@ export default {
|
||||
}
|
||||
// 失去焦点时参与表单校验
|
||||
if (this.form && this.formItem) {
|
||||
const { validateTrigger } = this.form;
|
||||
const {
|
||||
validateTrigger
|
||||
} = this.form;
|
||||
if (validateTrigger === 'blur') {
|
||||
this.formItem.onFieldChange();
|
||||
}
|
||||
@ -471,7 +435,7 @@ export default {
|
||||
* @param {Object} event
|
||||
*/
|
||||
onkeyboardheightchange(event) {
|
||||
this.$emit("keyboardheightchange",event);
|
||||
this.$emit("keyboardheightchange", event);
|
||||
},
|
||||
|
||||
/**
|
||||
@ -496,14 +460,14 @@ export default {
|
||||
return str;
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$uni-error: #e43d33;
|
||||
$uni-border-1: #dcdfe6 !default;
|
||||
$uni-error: #e43d33;
|
||||
$uni-border-1: #dcdfe6 !default;
|
||||
|
||||
.uni-easyinput {
|
||||
.uni-easyinput {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
/* #endif */
|
||||
@ -512,9 +476,9 @@ $uni-border-1: #dcdfe6 !default;
|
||||
text-align: left;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.uni-easyinput__content {
|
||||
.uni-easyinput__content {
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
@ -528,9 +492,9 @@ $uni-border-1: #dcdfe6 !default;
|
||||
border-color: #fff;
|
||||
transition-property: border-color;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
.uni-easyinput__content-input {
|
||||
.uni-easyinput__content-input {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: auto;
|
||||
/* #endif */
|
||||
@ -541,23 +505,23 @@ $uni-border-1: #dcdfe6 !default;
|
||||
font-size: 14px;
|
||||
height: 35px;
|
||||
// min-height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.uni-easyinput__placeholder-class {
|
||||
.uni-easyinput__placeholder-class {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
// font-weight: 200;
|
||||
}
|
||||
}
|
||||
|
||||
.is-textarea {
|
||||
.is-textarea {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.is-textarea-icon {
|
||||
.is-textarea-icon {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.uni-easyinput__content-textarea {
|
||||
.uni-easyinput__content-textarea {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
@ -571,23 +535,23 @@ $uni-border-1: #dcdfe6 !default;
|
||||
min-height: 80px;
|
||||
width: auto;
|
||||
/* #endif */
|
||||
}
|
||||
}
|
||||
|
||||
.input-padding {
|
||||
.input-padding {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-clear-icon {
|
||||
.content-clear-icon {
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.label-icon {
|
||||
.label-icon {
|
||||
margin-right: 5px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
// 显示边框
|
||||
.is-input-border {
|
||||
// 显示边框
|
||||
.is-input-border {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
@ -599,9 +563,9 @@ $uni-border-1: #dcdfe6 !default;
|
||||
/* #ifdef MP-ALIPAY */
|
||||
overflow: hidden;
|
||||
/* #endif */
|
||||
}
|
||||
}
|
||||
|
||||
.uni-error-message {
|
||||
.uni-error-message {
|
||||
position: absolute;
|
||||
bottom: -17px;
|
||||
left: 0;
|
||||
@ -609,43 +573,43 @@ $uni-border-1: #dcdfe6 !default;
|
||||
color: $uni-error;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.uni-error-msg--boeder {
|
||||
.uni-error-msg--boeder {
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.is-input-error-border {
|
||||
.is-input-error-border {
|
||||
border-color: $uni-error;
|
||||
|
||||
.uni-easyinput__placeholder-class {
|
||||
color: mix(#fff, $uni-error, 50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.uni-easyinput--border {
|
||||
.uni-easyinput--border {
|
||||
margin-bottom: 0;
|
||||
padding: 10px 15px;
|
||||
// padding-bottom: 0;
|
||||
border-top: 1px #eee solid;
|
||||
}
|
||||
}
|
||||
|
||||
.uni-easyinput-error {
|
||||
.uni-easyinput-error {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.is-first-border {
|
||||
.is-first-border {
|
||||
/* #ifndef APP-NVUE */
|
||||
border: none;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
border-width: 0;
|
||||
/* #endif */
|
||||
}
|
||||
}
|
||||
|
||||
.is-disabled {
|
||||
.is-disabled {
|
||||
background-color: #f7f6f6;
|
||||
color: #d5d5d5;
|
||||
|
||||
@ -653,5 +617,5 @@ $uni-border-1: #dcdfe6 !default;
|
||||
color: #d5d5d5;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user