收货地址
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;
|
||||
|
||||
</style>
|
||||
.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':'']"
|
||||
: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-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">
|
||||
<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':'']"
|
||||
: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">
|
||||
<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">
|
||||
<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'
|
||||
|
||||
if(!item.selected && item.disabled){
|
||||
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) {
|
||||
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;
|
||||
}
|
||||
@ -818,4 +849,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@ -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();
|
||||
}
|
||||
@ -193,9 +200,9 @@
|
||||
}
|
||||
defValue = defItem
|
||||
}
|
||||
if (defValue || defValue === 0) {
|
||||
this.emit(defValue)
|
||||
}
|
||||
if (defValue || defValue === 0) {
|
||||
this.emit(defValue)
|
||||
}
|
||||
}
|
||||
const def = this.mixinDatacomResData.find(item => item.value === defValue)
|
||||
this.current = def ? this.formatItemName(def) : ''
|
||||
@ -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,
|
||||
@ -514,4 +528,4 @@
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user