收货地址
This commit is contained in:
Vinjor
parent
5188107ad3
commit
872e59cea7
12
pages.json
12
pages.json
@ -109,6 +109,18 @@
|
|||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "编辑名片"
|
"navigationBarTitleText": "编辑名片"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/mine/addr/addr-list",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "收货地址"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/mine/addr/addr-detail",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "编辑地址"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"subPackages": [{
|
"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>
|
<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>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import config from '@/config'
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
//所有可选的平台
|
||||||
|
range: [{
|
||||||
|
value: 'xiaohongshu',
|
||||||
|
text: "小红书"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'douyin',
|
||||||
|
text: "抖音"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
sizeType: ['compressed'],
|
||||||
|
//图片数组
|
||||||
|
fileList: [],
|
||||||
|
//名片数据对象
|
||||||
|
dataObj: {
|
||||||
|
platformCode: "xiaohongshu",
|
||||||
|
fansNum: null,
|
||||||
|
tel: null
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
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>
|
</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>
|
<image src="@/static/mine/shezhi.png" mode="aspectFit"></image>
|
||||||
<view>设置</view>
|
<view>设置</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="menu-item">
|
<view class="menu-item" @click="goMyAddr()">
|
||||||
<image src="@/static/mine/dizhi.png" mode="aspectFit"></image>
|
<image src="@/static/mine/dizhi.png" mode="aspectFit"></image>
|
||||||
<view>地址</view>
|
<view>地址</view>
|
||||||
</view>
|
</view>
|
||||||
@ -153,11 +153,17 @@
|
|||||||
this.$tab.navigateTo('/pages/mine/info/index')
|
this.$tab.navigateTo('/pages/mine/info/index')
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
*
|
* 跳转名片列表
|
||||||
*/
|
*/
|
||||||
goMyCard() {
|
goMyCard() {
|
||||||
this.$tab.navigateTo('/pages/mine/card/my-card')
|
this.$tab.navigateTo('/pages/mine/card/my-card')
|
||||||
}
|
},
|
||||||
|
/**
|
||||||
|
* 跳转地址列表
|
||||||
|
*/
|
||||||
|
goMyAddr() {
|
||||||
|
this.$tab.navigateTo('/pages/mine/addr/addr-list')
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -2,36 +2,46 @@
|
|||||||
<view class="uni-data-checklist" :style="{'margin-top':isTop+'px'}">
|
<view class="uni-data-checklist" :style="{'margin-top':isTop+'px'}">
|
||||||
<template v-if="!isLocal">
|
<template v-if="!isLocal">
|
||||||
<view class="uni-data-loading">
|
<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>
|
<text v-else>{{mixinDatacomErrorMessage}}</text>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<checkbox-group v-if="multiple" class="checklist-group" :class="{'is-list':mode==='list' || wrap}" @change="chagne">
|
<checkbox-group v-if="multiple" class="checklist-group" :class="{'is-list':mode==='list' || wrap}"
|
||||||
<label class="checklist-box" :class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
|
@change="chagne">
|
||||||
:style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
|
<label class="checklist-box"
|
||||||
<checkbox class="hidden" hidden :disabled="disabled || !!item.disabled" :value="item[map.value]+''" :checked="item.selected" />
|
:class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
|
||||||
<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="checkbox__inner" :style="item.styleIcon">
|
: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 class="checkbox__inner-icon"></view>
|
||||||
</view>
|
</view>
|
||||||
<view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
|
<view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
|
||||||
<text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
|
<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>
|
</view>
|
||||||
</label>
|
</label>
|
||||||
</checkbox-group>
|
</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"
|
||||||
:style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
|
:class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
|
||||||
<radio class="hidden" hidden :disabled="disabled || item.disabled" :value="item[map.value]+''" :checked="item.selected" />
|
:style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
|
||||||
<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="radio__inner"
|
<radio class="hidden" hidden :disabled="disabled || item.disabled" :value="item[map.value]+''"
|
||||||
:style="item.styleBackgroud">
|
: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 class="radio__inner-icon" :style="item.styleIcon"></view>
|
||||||
</view>
|
</view>
|
||||||
<view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
|
<view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
|
||||||
<text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
|
<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>
|
</view>
|
||||||
</label>
|
</label>
|
||||||
</radio-group>
|
</radio-group>
|
||||||
@ -68,7 +78,7 @@
|
|||||||
export default {
|
export default {
|
||||||
name: 'uniDataChecklist',
|
name: 'uniDataChecklist',
|
||||||
mixins: [uniCloud.mixinDatacom || {}],
|
mixins: [uniCloud.mixinDatacom || {}],
|
||||||
emits:['input','update:modelValue','change'],
|
emits: ['input', 'update:modelValue', 'change'],
|
||||||
props: {
|
props: {
|
||||||
mode: {
|
mode: {
|
||||||
type: String,
|
type: String,
|
||||||
@ -88,7 +98,7 @@
|
|||||||
// TODO vue3
|
// TODO vue3
|
||||||
modelValue: {
|
modelValue: {
|
||||||
type: [Array, String, Number],
|
type: [Array, String, Number],
|
||||||
default() {
|
default () {
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -122,20 +132,20 @@
|
|||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
emptyText:{
|
emptyText: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '暂无数据'
|
default: '暂无数据'
|
||||||
},
|
},
|
||||||
disabled:{
|
disabled: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
map:{
|
map: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default(){
|
default () {
|
||||||
return {
|
return {
|
||||||
text:'text',
|
text: 'text',
|
||||||
value:'value'
|
value: 'value'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -177,18 +187,18 @@
|
|||||||
contentrefresh: '加载中',
|
contentrefresh: '加载中',
|
||||||
contentnomore: '没有更多'
|
contentnomore: '没有更多'
|
||||||
},
|
},
|
||||||
isLocal:true,
|
isLocal: true,
|
||||||
styles: {
|
styles: {
|
||||||
selectedColor: '#2979ff',
|
selectedColor: '#2979ff',
|
||||||
selectedTextColor: '#666',
|
selectedTextColor: '#666',
|
||||||
},
|
},
|
||||||
isTop:0
|
isTop: 0
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed:{
|
computed: {
|
||||||
dataValue(){
|
dataValue() {
|
||||||
if(this.value === '')return this.modelValue
|
if (this.value === '') return this.modelValue
|
||||||
if(this.modelValue === '') return this.value
|
if (this.modelValue === '') return this.value
|
||||||
return this.value
|
return this.value
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -223,15 +233,15 @@
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
loadData() {
|
loadData() {
|
||||||
this.mixinDatacomGet().then(res=>{
|
this.mixinDatacomGet().then(res => {
|
||||||
this.mixinDatacomResData = res.result.data
|
this.mixinDatacomResData = res.result.data
|
||||||
if(this.mixinDatacomResData.length === 0){
|
if (this.mixinDatacomResData.length === 0) {
|
||||||
this.isLocal = false
|
this.isLocal = false
|
||||||
this.mixinDatacomErrorMessage = this.emptyText
|
this.mixinDatacomErrorMessage = this.emptyText
|
||||||
}else{
|
} else {
|
||||||
this.isLocal = true
|
this.isLocal = true
|
||||||
}
|
}
|
||||||
}).catch(err=>{
|
}).catch(err => {
|
||||||
this.mixinDatacomErrorMessage = err.message
|
this.mixinDatacomErrorMessage = err.message
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
@ -383,13 +393,13 @@
|
|||||||
*/
|
*/
|
||||||
setStyleBackgroud(item) {
|
setStyleBackgroud(item) {
|
||||||
let styles = {}
|
let styles = {}
|
||||||
let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
|
let selectedColor = this.selectedColor ? this.selectedColor : '#2979ff'
|
||||||
if (this.selectedColor) {
|
if (this.selectedColor) {
|
||||||
if (this.mode !== 'list') {
|
if (this.mode !== 'list') {
|
||||||
styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
|
styles['border-color'] = item.selected ? selectedColor : '#DCDFE6'
|
||||||
}
|
}
|
||||||
if (this.mode === 'tag') {
|
if (this.mode === 'tag') {
|
||||||
styles['background-color'] = item.selected? selectedColor:'#f5f5f5'
|
styles['background-color'] = item.selected ? selectedColor : '#f5f5f5'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
let classles = ''
|
let classles = ''
|
||||||
@ -402,13 +412,13 @@
|
|||||||
let styles = {}
|
let styles = {}
|
||||||
let classles = ''
|
let classles = ''
|
||||||
if (this.selectedColor) {
|
if (this.selectedColor) {
|
||||||
let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
|
let selectedColor = this.selectedColor ? this.selectedColor : '#2979ff'
|
||||||
styles['background-color'] = item.selected?selectedColor:'#fff'
|
styles['background-color'] = item.selected ? selectedColor : '#fff'
|
||||||
styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
|
styles['border-color'] = item.selected ? selectedColor : '#DCDFE6'
|
||||||
|
|
||||||
if(!item.selected && item.disabled){
|
if (!item.selected && item.disabled) {
|
||||||
styles['background-color'] = '#F2F6FC'
|
styles['background-color'] = '#F2F6FC'
|
||||||
styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
|
styles['border-color'] = item.selected ? selectedColor : '#DCDFE6'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
for (let i in styles) {
|
for (let i in styles) {
|
||||||
@ -420,13 +430,14 @@
|
|||||||
let styles = {}
|
let styles = {}
|
||||||
let classles = ''
|
let classles = ''
|
||||||
if (this.selectedColor) {
|
if (this.selectedColor) {
|
||||||
let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
|
let selectedColor = this.selectedColor ? this.selectedColor : '#2979ff'
|
||||||
if (this.mode === 'tag') {
|
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 {
|
} 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'
|
styles.color = '#999'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -439,7 +450,7 @@
|
|||||||
let styles = {}
|
let styles = {}
|
||||||
let classles = ''
|
let classles = ''
|
||||||
if (this.mode === 'list') {
|
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) {
|
for (let i in styles) {
|
||||||
classles += `${i}:${styles[i]};`
|
classles += `${i}:${styles[i]};`
|
||||||
@ -452,9 +463,9 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
$uni-primary: #2979ff !default;
|
$uni-primary: #FC1F3E !default;
|
||||||
$border-color: #DCDFE6;
|
$border-color: #DCDFE6;
|
||||||
$disable:0.4;
|
$disable: 0.4;
|
||||||
|
|
||||||
@mixin flex {
|
@mixin flex {
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
@ -476,6 +487,7 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
||||||
// 多选样式
|
// 多选样式
|
||||||
.checklist-group {
|
.checklist-group {
|
||||||
@include flex;
|
@include flex;
|
||||||
@ -506,6 +518,7 @@
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
.checklist-text {
|
.checklist-text {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #666;
|
color: #666;
|
||||||
@ -517,7 +530,7 @@
|
|||||||
border-right-width: 1px;
|
border-right-width: 1px;
|
||||||
border-right-color: #007aff;
|
border-right-color: #007aff;
|
||||||
border-right-style: solid;
|
border-right-style: solid;
|
||||||
border-bottom-width:1px;
|
border-bottom-width: 1px;
|
||||||
border-bottom-color: #007aff;
|
border-bottom-color: #007aff;
|
||||||
border-bottom-style: solid;
|
border-bottom-style: solid;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
@ -542,6 +555,7 @@
|
|||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
||||||
.checkbox__inner-icon {
|
.checkbox__inner-icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
/* #ifdef APP-NVUE */
|
/* #ifdef APP-NVUE */
|
||||||
@ -556,7 +570,7 @@
|
|||||||
border-right-width: 1px;
|
border-right-width: 1px;
|
||||||
border-right-color: #fff;
|
border-right-color: #fff;
|
||||||
border-right-style: solid;
|
border-right-style: solid;
|
||||||
border-bottom-width:1px ;
|
border-bottom-width: 1px;
|
||||||
border-bottom-color: #fff;
|
border-bottom-color: #fff;
|
||||||
border-bottom-style: solid;
|
border-bottom-style: solid;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@ -597,6 +611,7 @@
|
|||||||
&.is-disable {
|
&.is-disable {
|
||||||
/* #ifdef H5 */
|
/* #ifdef H5 */
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
|
||||||
/* #endif */
|
/* #endif */
|
||||||
.checkbox__inner {
|
.checkbox__inner {
|
||||||
background-color: #F2F6FC;
|
background-color: #F2F6FC;
|
||||||
@ -610,6 +625,7 @@
|
|||||||
background-color: #F2F6FC;
|
background-color: #F2F6FC;
|
||||||
border-color: $border-color;
|
border-color: $border-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checklist-text {
|
.checklist-text {
|
||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
@ -626,16 +642,20 @@
|
|||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.radio__inner {
|
.radio__inner {
|
||||||
border-color: $uni-primary;
|
border-color: $uni-primary;
|
||||||
|
|
||||||
.radio__inner-icon {
|
.radio__inner-icon {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
background-color: $uni-primary;
|
background-color: $uni-primary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.checklist-text {
|
.checklist-text {
|
||||||
color: $uni-primary;
|
color: $uni-primary;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 选中禁用
|
// 选中禁用
|
||||||
&.is-disable {
|
&.is-disable {
|
||||||
.checkbox__inner {
|
.checkbox__inner {
|
||||||
@ -645,6 +665,7 @@
|
|||||||
.checklist-text {
|
.checklist-text {
|
||||||
opacity: $disable;
|
opacity: $disable;
|
||||||
}
|
}
|
||||||
|
|
||||||
.radio__inner {
|
.radio__inner {
|
||||||
opacity: $disable;
|
opacity: $disable;
|
||||||
}
|
}
|
||||||
@ -667,6 +688,7 @@
|
|||||||
/* #endif */
|
/* #endif */
|
||||||
border: 1px #eee solid;
|
border: 1px #eee solid;
|
||||||
opacity: $disable;
|
opacity: $disable;
|
||||||
|
|
||||||
.checkbox__inner {
|
.checkbox__inner {
|
||||||
background-color: #F2F6FC;
|
background-color: #F2F6FC;
|
||||||
border-color: $border-color;
|
border-color: $border-color;
|
||||||
@ -674,6 +696,7 @@
|
|||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
}
|
}
|
||||||
|
|
||||||
.radio__inner {
|
.radio__inner {
|
||||||
background-color: #F2F6FC;
|
background-color: #F2F6FC;
|
||||||
border-color: $border-color;
|
border-color: $border-color;
|
||||||
@ -681,6 +704,7 @@
|
|||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
}
|
}
|
||||||
|
|
||||||
.checklist-text {
|
.checklist-text {
|
||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
@ -688,9 +712,11 @@
|
|||||||
|
|
||||||
&.is-checked {
|
&.is-checked {
|
||||||
border-color: $uni-primary;
|
border-color: $uni-primary;
|
||||||
|
|
||||||
.checkbox__inner {
|
.checkbox__inner {
|
||||||
border-color: $uni-primary;
|
border-color: $uni-primary;
|
||||||
background-color: $uni-primary;
|
background-color: $uni-primary;
|
||||||
|
|
||||||
.checkbox__inner-icon {
|
.checkbox__inner-icon {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
@ -747,6 +773,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 列表样式
|
// 列表样式
|
||||||
&.is--list {
|
&.is--list {
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
@ -764,6 +791,7 @@
|
|||||||
&.is-disable {
|
&.is-disable {
|
||||||
/* #ifdef H5 */
|
/* #ifdef H5 */
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
|
||||||
/* #endif */
|
/* #endif */
|
||||||
.checkbox__inner {
|
.checkbox__inner {
|
||||||
background-color: #F2F6FC;
|
background-color: #F2F6FC;
|
||||||
@ -772,6 +800,7 @@
|
|||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
}
|
}
|
||||||
|
|
||||||
.checklist-text {
|
.checklist-text {
|
||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
@ -787,11 +816,13 @@
|
|||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.radio__inner {
|
.radio__inner {
|
||||||
.radio__inner-icon {
|
.radio__inner-icon {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.checklist-text {
|
.checklist-text {
|
||||||
color: $uni-primary;
|
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-stat-box" :class="{'uni-stat__actived': current}">
|
||||||
<view class="uni-select" :class="{'uni-select--disabled':disabled}">
|
<view class="uni-select" :class="{'uni-select--disabled':disabled}">
|
||||||
<view class="uni-select__input-box" @click="toggleSelector">
|
<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-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-else class="uni-select__input-text uni-select__input-placeholder">{{typePlaceholder}}</view>
|
||||||
<view v-if="current && clear && !disabled" @click.stop="clearVal" >
|
<view v-if="current && clear && !disabled" @click.stop="clearVal">
|
||||||
<uni-icons type="clear" color="#c0c4cc" size="24"/>
|
<uni-icons type="clear" color="#c0c4cc" size="24" />
|
||||||
</view>
|
</view>
|
||||||
<view v-else>
|
<view v-else>
|
||||||
<uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" />
|
<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">
|
<view class="uni-select__selector-empty" v-if="mixinDatacomResData.length === 0">
|
||||||
<text>{{emptyTips}}</text>
|
<text>{{emptyTips}}</text>
|
||||||
</view>
|
</view>
|
||||||
<view v-else class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResData" :key="index"
|
<view v-else class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResData"
|
||||||
@click="change(item)">
|
:key="index" @click="change(item)">
|
||||||
<text :class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</text>
|
<text
|
||||||
|
:class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</text>
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
@ -68,6 +71,10 @@
|
|||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
|
imgCode: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
placeholder: {
|
placeholder: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '请选择'
|
default: '请选择'
|
||||||
@ -125,7 +132,7 @@
|
|||||||
common + placeholder :
|
common + placeholder :
|
||||||
common
|
common
|
||||||
},
|
},
|
||||||
valueCom(){
|
valueCom() {
|
||||||
// #ifdef VUE3
|
// #ifdef VUE3
|
||||||
return this.modelValue;
|
return this.modelValue;
|
||||||
// #endif
|
// #endif
|
||||||
@ -156,7 +163,7 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
debounce(fn, time = 100){
|
debounce(fn, time = 100) {
|
||||||
let timer = null
|
let timer = null
|
||||||
return function(...args) {
|
return function(...args) {
|
||||||
if (timer) clearTimeout(timer)
|
if (timer) clearTimeout(timer)
|
||||||
@ -166,11 +173,11 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 执行数据库查询
|
// 执行数据库查询
|
||||||
query(){
|
query() {
|
||||||
this.mixinDatacomEasyGet();
|
this.mixinDatacomEasyGet();
|
||||||
},
|
},
|
||||||
// 监听查询条件变更事件
|
// 监听查询条件变更事件
|
||||||
onMixinDatacomPropsChange(){
|
onMixinDatacomPropsChange() {
|
||||||
if (this.collection) {
|
if (this.collection) {
|
||||||
this.debounceGet();
|
this.debounceGet();
|
||||||
}
|
}
|
||||||
@ -193,9 +200,9 @@
|
|||||||
}
|
}
|
||||||
defValue = defItem
|
defValue = defItem
|
||||||
}
|
}
|
||||||
if (defValue || defValue === 0) {
|
if (defValue || defValue === 0) {
|
||||||
this.emit(defValue)
|
this.emit(defValue)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const def = this.mixinDatacomResData.find(item => item.value === defValue)
|
const def = this.mixinDatacomResData.find(item => item.value === defValue)
|
||||||
this.current = def ? this.formatItemName(def) : ''
|
this.current = def ? this.formatItemName(def) : ''
|
||||||
@ -258,7 +265,7 @@
|
|||||||
let str = "";
|
let str = "";
|
||||||
str = this.format;
|
str = this.format;
|
||||||
for (let key in item) {
|
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;
|
return str;
|
||||||
} else {
|
} else {
|
||||||
@ -272,26 +279,26 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 获取当前加载的数据
|
// 获取当前加载的数据
|
||||||
getLoadData(){
|
getLoadData() {
|
||||||
return this.mixinDatacomResData;
|
return this.mixinDatacomResData;
|
||||||
},
|
},
|
||||||
// 获取当前缓存key
|
// 获取当前缓存key
|
||||||
getCurrentCacheKey(){
|
getCurrentCacheKey() {
|
||||||
return this.collection;
|
return this.collection;
|
||||||
},
|
},
|
||||||
// 获取缓存
|
// 获取缓存
|
||||||
getCache(name=this.getCurrentCacheKey()){
|
getCache(name = this.getCurrentCacheKey()) {
|
||||||
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
||||||
return cacheData[name];
|
return cacheData[name];
|
||||||
},
|
},
|
||||||
// 设置缓存
|
// 设置缓存
|
||||||
setCache(value, name=this.getCurrentCacheKey()){
|
setCache(value, name = this.getCurrentCacheKey()) {
|
||||||
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
||||||
cacheData[name] = value;
|
cacheData[name] = value;
|
||||||
uni.setStorageSync(this.cacheKey, cacheData);
|
uni.setStorageSync(this.cacheKey, cacheData);
|
||||||
},
|
},
|
||||||
// 删除缓存
|
// 删除缓存
|
||||||
removeCache(name=this.getCurrentCacheKey()){
|
removeCache(name = this.getCurrentCacheKey()) {
|
||||||
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
||||||
delete cacheData[name];
|
delete cacheData[name];
|
||||||
uni.setStorageSync(this.cacheKey, cacheData);
|
uni.setStorageSync(this.cacheKey, cacheData);
|
||||||
@ -379,6 +386,12 @@
|
|||||||
color: $uni-secondary-color;
|
color: $uni-secondary-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cus-img {
|
||||||
|
margin-right: 8rpx;
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
.uni-select__input-box {
|
.uni-select__input-box {
|
||||||
height: 35px;
|
height: 35px;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -431,6 +444,7 @@
|
|||||||
max-height: 600px;
|
max-height: 600px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* #endif */
|
/* #endif */
|
||||||
|
|
||||||
.uni-select__selector-empty,
|
.uni-select__selector-empty,
|
||||||
@ -514,4 +528,4 @@
|
|||||||
left: 0;
|
left: 0;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user