Refactor:分包
This commit is contained in:
lifizer
@@ -1,57 +0,0 @@
|
||||
<template>
|
||||
<view class="components-checkbox-icon jc-center ai-center" :class="{'isSelected':isSelected}" @click="change"
|
||||
v-if="ready">
|
||||
<image class="icon-hook" :src="webUrl+'/20240109175325131970.png'" mode="scaleToFill" v-if="isSelected"/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {computed, getCurrentInstance, onMounted, ref} from '@vue/composition-api'
|
||||
import {VUE_APP_RESOURCES_URL} from '../config/index'
|
||||
|
||||
const webUrl = VUE_APP_RESOURCES_URL
|
||||
|
||||
const emit = defineEmits(['change'])
|
||||
const {proxy} = getCurrentInstance()
|
||||
const props = defineProps({
|
||||
defaultState: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
mark: Array
|
||||
})
|
||||
|
||||
const ready = ref(false)
|
||||
onMounted(() => {
|
||||
ready.value = true
|
||||
})
|
||||
|
||||
|
||||
const isSelected = computed(() => {
|
||||
return props.defaultState
|
||||
})
|
||||
const change = () => {
|
||||
emit('change', !isSelected.value, props.mark)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.components-checkbox-icon {
|
||||
display: inline-flex;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
box-sizing: border-box;
|
||||
border: 2rpx solid #D5D7D8;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.icon-hook {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
.isSelected {
|
||||
border: 3px solid #FD5749;
|
||||
background: #FD5749;
|
||||
}
|
||||
</style>
|
||||
@@ -82,7 +82,7 @@ export default {
|
||||
methods: {
|
||||
routerGo(cart) {
|
||||
this.$yrouter.push({
|
||||
path: "/pages/shop/GoodsEvaluate/index",
|
||||
path: "/pagesShop/shop/GoodsEvaluate/index",
|
||||
query: { id: cart.unique }
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,343 +0,0 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="upload">
|
||||
<block v-for="(upload,index) in uploads" :key="index">
|
||||
<view class="uplode-file">
|
||||
<image v-if="types == 'image'" class="uploade-img" :style="'width:' + upload_img_wh + 'rpx; height:' + upload_img_wh + 'rpx;'" :src="upload" :data-src="upload" @tap="previewImage"></image>
|
||||
<image v-if="types == 'image'" class="clear-one-icon" :src="clearIcon" @tap="delImage(index)"></image>
|
||||
<video v-if="types == 'video'" class="uploade-img" :style="'width:' + upload_img_wh + 'rpx; height:' + upload_img_wh + 'rpx;'" :src="upload" controls>
|
||||
<cover-image v-if="types == 'video'" class="clear-one-icon" :src="clearIcon" @tap="delImage(index)"></cover-image>
|
||||
</video>
|
||||
</view>
|
||||
</block>
|
||||
<view v-if="uploads.length < uploadCount" :class="uploadIcon ? 'uploader-icon' : 'uploader-input-box'" :style="'width:' + upload_img_wh + 'rpx; height:' + upload_img_wh + 'rpx;'" >
|
||||
<view v-if="!uploadIcon" class="uploader-input" @tap="chooseUploads"></view>
|
||||
<image v-else class="image-cion" :src="uploadIcon" @tap="chooseUploads"></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <button type="primary" v-if="types == 'image' && !autoUpload" @tap="unifiedUpload">上传</button> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
props: {
|
||||
header:{
|
||||
type:Object,
|
||||
default:{}
|
||||
},
|
||||
types: {
|
||||
type: String,
|
||||
default: 'image'
|
||||
},
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: function() {
|
||||
return []
|
||||
}
|
||||
},
|
||||
clearIcon: {
|
||||
type: String,
|
||||
default: 'http://img1.imgtn.bdimg.com/it/u=451604666,2295832001&fm=26&gp=0.jpg'
|
||||
},
|
||||
uploadIcon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
uploadUrl: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
deleteUrl: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
uploadCount: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
//上传图片大小 默认3M
|
||||
upload_max: {
|
||||
type: Number,
|
||||
default: 3
|
||||
},
|
||||
//上传视频大小 默认30M
|
||||
upload_video_max: {
|
||||
type: Number,
|
||||
default: 50
|
||||
},
|
||||
// 图片/选择宽高
|
||||
upload_img_wh: {
|
||||
type: Number,
|
||||
default: 210
|
||||
},
|
||||
autoUpload: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
//上传的图片地址
|
||||
uploadImages: [],
|
||||
//展示的图片地址
|
||||
uploads: [],
|
||||
// 超出限制数组
|
||||
exceeded_list: [],
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
dataList:{
|
||||
handler(val){
|
||||
this.uploads = val;
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
previewImage (e) {
|
||||
var current = e.target.dataset.src
|
||||
uni.previewImage({
|
||||
current: current,
|
||||
urls: this.dataList
|
||||
})
|
||||
},
|
||||
chooseUploads(){
|
||||
switch (this.types){
|
||||
case 'image':
|
||||
uni.chooseImage({
|
||||
count: this.uploadCount - this.uploads.length, //默认9
|
||||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album', 'camera'], //从相册选择
|
||||
success: (res) => {
|
||||
for(let i = 0; i< res.tempFiles.length; i++){
|
||||
if(Math.ceil(res.tempFiles[i].size / 1024) < this.upload_max * 1024){
|
||||
this.uploads.push(res.tempFiles[i].path)
|
||||
console.log(this.uploads);
|
||||
if(this.autoUpload){
|
||||
this.uploadFile(res.tempFiles[i].path)
|
||||
}else{
|
||||
this.uploadImages.push(res.tempFiles[i].path);
|
||||
}
|
||||
}else {
|
||||
this.exceeded_list.push(i === 0 ? 1 : i + 1);
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: `第${[...new Set(this.exceeded_list)].join(',')}张图片超出限制${this.upload_max}MB,已过滤`
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.showModal({
|
||||
content: JSON.stringify(err)
|
||||
});
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'video' :
|
||||
uni.chooseVideo({
|
||||
sourceType: ['camera', 'album'],
|
||||
success: (res) => {
|
||||
if(Math.ceil(res.size / 1024) < this.upload_video_max * 1024){
|
||||
this.uploads.push(res.tempFilePath)
|
||||
uni.uploadFile({
|
||||
url: this.uploadUrl, //仅为示例，非真实的接口地址
|
||||
filePath: res.tempFilePath,
|
||||
name: 'file',
|
||||
//请求参数
|
||||
formData: {
|
||||
'user': 'test'
|
||||
},
|
||||
success: (uploadFileRes) => {
|
||||
this.$emit('successVideo',uploadFileRes)
|
||||
}
|
||||
});
|
||||
}else {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: `第${[...new Set(this.exceeded_list)].join(',')}张视频超出限制${this.upload_max}MB,已过滤`
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.showModal({
|
||||
content: JSON.stringify(err)
|
||||
});
|
||||
}
|
||||
});
|
||||
break;
|
||||
}
|
||||
},
|
||||
delImage(index){
|
||||
|
||||
this.uploads.splice(index,1)
|
||||
//如果不自动上传
|
||||
if(!this.autoUpload){
|
||||
this.uploadImages.splice(index,1)
|
||||
}
|
||||
|
||||
// //第一个是判断app或者h5的 第二个是判断小程序的
|
||||
// if(this.uploads[index].substring(0,4) !== 'http' || this.uploads[index].substring(0,11) == 'http://tmp/'){
|
||||
// this.uploads.splice(index,1)
|
||||
// //如果不自动上传
|
||||
// if(!this.autoUpload){
|
||||
// this.uploadImages.splice(index,1)
|
||||
// }
|
||||
// return;
|
||||
// };
|
||||
|
||||
// if(!this.deleteUrl) {
|
||||
// uni.showModal({
|
||||
// content: '请填写删除接口'
|
||||
// });
|
||||
// return;
|
||||
// };
|
||||
// uni.request({
|
||||
// url: this.deleteUrl,
|
||||
// method: 'DELETE',
|
||||
// data: {
|
||||
// image: this.dataList[index]
|
||||
// },
|
||||
// success: res => {
|
||||
// if(res.data.status == 1) {
|
||||
// uni.showToast({
|
||||
// title: '删除成功'
|
||||
// })
|
||||
// this.uploads.splice(index,1)
|
||||
// }
|
||||
// },
|
||||
// });
|
||||
},
|
||||
uploadFile(path){
|
||||
// uni.uploadFile({
|
||||
// url: this.uploadUrl, //仅为示例，非真实的接口地址
|
||||
// filePath: path,
|
||||
// name: 'file',
|
||||
// //自定义请求参数
|
||||
// formData: {
|
||||
// 'user': 'test'
|
||||
// },
|
||||
// success: (uploadFileRes) => {
|
||||
// this.$emit('successImage',uploadFileRes)
|
||||
// }
|
||||
// });
|
||||
|
||||
uni.uploadFile({
|
||||
url: this.uploadUrl,
|
||||
filePath: path,
|
||||
header: this.header,
|
||||
name: "file",
|
||||
success: res => {
|
||||
console.log(res);
|
||||
|
||||
this.$emit('successImage',uploadFileRes)
|
||||
},
|
||||
fail: err => {
|
||||
|
||||
console.log(err);
|
||||
|
||||
},
|
||||
complete: res => {
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
unifiedUpload(){
|
||||
if(!this.uploadUrl) {
|
||||
uni.showModal({
|
||||
content: '请填写上传接口'
|
||||
});
|
||||
return;
|
||||
};
|
||||
for (let i of this.uploadImages) {
|
||||
this.uploadFile(i)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.upload {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.uplode-file {
|
||||
margin: 10rpx;
|
||||
/* width: 210upx;
|
||||
height: 210upx; */
|
||||
position: relative;
|
||||
}
|
||||
.uploade-img {
|
||||
display: block;
|
||||
/* width: 210upx;
|
||||
height: 210upx; */
|
||||
}
|
||||
.clear-one{
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
right: 0;
|
||||
}
|
||||
.clear-one-icon{
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 9;
|
||||
}
|
||||
.uploader-input-box {
|
||||
position: relative;
|
||||
margin:10upx;
|
||||
/* width: 208upx;
|
||||
height: 208upx; */
|
||||
border: 2upx solid #D9D9D9;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.uploader-input-box:before,
|
||||
.uploader-input-box:after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #D9D9D9;
|
||||
}
|
||||
.uploader-input-box:before {
|
||||
width: 4upx;
|
||||
height: 79upx;
|
||||
}
|
||||
.uploader-input-box:after {
|
||||
width: 79upx;
|
||||
height: 4upx;
|
||||
}
|
||||
.uploader-input-box:active {
|
||||
border-color: #999999;
|
||||
}
|
||||
.uploader-input-box:active:before,
|
||||
.uploader-input-box:active:after {
|
||||
background-color: #999999;
|
||||
}
|
||||
.uploader-input {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
.uploader-icon{
|
||||
position: relative;
|
||||
margin:10upx;
|
||||
/* width: 208upx;
|
||||
height: 208upx; */
|
||||
}
|
||||
.uploader-icon .image-cion{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,51 +0,0 @@
|
||||
### easy-upload 组件
|
||||
|
||||
使用方法
|
||||
```js
|
||||
<easy-upload
|
||||
:dataList="dataList"
|
||||
uploadUrl="http://localhost:3000/upload"
|
||||
deleteUrl='http://localhost:3000/upload'
|
||||
:types="types"
|
||||
@successImage="successImage"
|
||||
@successVideo="successvideo"
|
||||
/>
|
||||
|
||||
//使用 hbuilderX (easycom) 可以直接使用 或
|
||||
import easyUpload from '@/components/easy-upload/easy-upload.vue'
|
||||
export default {
|
||||
//用easycom 则省略注册组件
|
||||
components:{
|
||||
easyUpload
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataList: [],
|
||||
types: 'image'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
| 参数 | 类型 | 是否必填 | 参数描述
|
||||
| ---- | ---- | ---- | ----
|
||||
| types | String | 否 | 上传类型 image/video
|
||||
| autoUpload | Boolean | 否 | 自动上传 默认false
|
||||
| dataList | Array | 否 | 图片/视频数据展示
|
||||
| clearIcon | String | 否 | 删除图标(可以换成自己的图片)
|
||||
| uploadIcon | String | 否 | 上传图标(可以换成自己的图片)
|
||||
| uploadUrl | String | 否 | 上传的接口
|
||||
| deleteUrl | String | 否 | 删除的接口
|
||||
| uploadCount | Number | 否 | 上传图片最大个数(默认为一张)
|
||||
| upload_max | Number | 否 | 上传大小(默认为3M)
|
||||
| upload_max | Number | 否 | 上传大小(默认为3M)
|
||||
| upload_max | Number | 否 | 上传大小(默认为3M)
|
||||
|
||||
| 事件 | 是否必填 | 参数描述
|
||||
| ---- | ---- | ----
|
||||
| successImage | 否 | 上传图片成功事件
|
||||
| successVideo | 否 | 上传视频成功回调
|
||||
|
||||
示例项目中有简单的服务端代码 /server (node.js)
|
||||
如果本地测试可以先运行一下服务端的代码
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,143 +0,0 @@
|
||||
/* eslint-disable */
|
||||
var provinceData = [{
|
||||
"label": "北京市",
|
||||
"value": "11"
|
||||
},
|
||||
{
|
||||
"label": "天津市",
|
||||
"value": "12"
|
||||
},
|
||||
{
|
||||
"label": "河北省",
|
||||
"value": "13"
|
||||
},
|
||||
{
|
||||
"label": "山西省",
|
||||
"value": "14"
|
||||
},
|
||||
{
|
||||
"label": "内蒙古自治区",
|
||||
"value": "15"
|
||||
},
|
||||
{
|
||||
"label": "辽宁省",
|
||||
"value": "21"
|
||||
},
|
||||
{
|
||||
"label": "吉林省",
|
||||
"value": "22"
|
||||
},
|
||||
{
|
||||
"label": "黑龙江省",
|
||||
"value": "23"
|
||||
},
|
||||
{
|
||||
"label": "上海市",
|
||||
"value": "31"
|
||||
},
|
||||
{
|
||||
"label": "江苏省",
|
||||
"value": "32"
|
||||
},
|
||||
{
|
||||
"label": "浙江省",
|
||||
"value": "33"
|
||||
},
|
||||
{
|
||||
"label": "安徽省",
|
||||
"value": "34"
|
||||
},
|
||||
{
|
||||
"label": "福建省",
|
||||
"value": "35"
|
||||
},
|
||||
{
|
||||
"label": "江西省",
|
||||
"value": "36"
|
||||
},
|
||||
{
|
||||
"label": "山东省",
|
||||
"value": "37"
|
||||
},
|
||||
{
|
||||
"label": "河南省",
|
||||
"value": "41"
|
||||
},
|
||||
{
|
||||
"label": "湖北省",
|
||||
"value": "42"
|
||||
},
|
||||
{
|
||||
"label": "湖南省",
|
||||
"value": "43"
|
||||
},
|
||||
{
|
||||
"label": "广东省",
|
||||
"value": "44"
|
||||
},
|
||||
{
|
||||
"label": "广西壮族自治区",
|
||||
"value": "45"
|
||||
},
|
||||
{
|
||||
"label": "海南省",
|
||||
"value": "46"
|
||||
},
|
||||
{
|
||||
"label": "重庆市",
|
||||
"value": "50"
|
||||
},
|
||||
{
|
||||
"label": "四川省",
|
||||
"value": "51"
|
||||
},
|
||||
{
|
||||
"label": "贵州省",
|
||||
"value": "52"
|
||||
},
|
||||
{
|
||||
"label": "云南省",
|
||||
"value": "53"
|
||||
},
|
||||
{
|
||||
"label": "西藏自治区",
|
||||
"value": "54"
|
||||
},
|
||||
{
|
||||
"label": "陕西省",
|
||||
"value": "61"
|
||||
},
|
||||
{
|
||||
"label": "甘肃省",
|
||||
"value": "62"
|
||||
},
|
||||
{
|
||||
"label": "青海省",
|
||||
"value": "63"
|
||||
},
|
||||
{
|
||||
"label": "宁夏回族自治区",
|
||||
"value": "64"
|
||||
},
|
||||
{
|
||||
"label": "新疆维吾尔自治区",
|
||||
"value": "65"
|
||||
},
|
||||
{
|
||||
"label": "台湾",
|
||||
"value": "66"
|
||||
},
|
||||
{
|
||||
"label": "香港",
|
||||
"value": "67"
|
||||
},
|
||||
{
|
||||
"label": "澳门",
|
||||
"value": "68"
|
||||
},
|
||||
{
|
||||
"label": "钓鱼岛",
|
||||
"value": "69"
|
||||
}
|
||||
]
|
||||
export default provinceData;
|
||||
@@ -1,381 +0,0 @@
|
||||
<template>
|
||||
<view class="simple-address" v-if="showPopup" @touchmove.stop.prevent="clear">
|
||||
<!-- 遮罩层 -->
|
||||
<view
|
||||
class="simple-address-mask"
|
||||
@touchmove.stop.prevent="clear"
|
||||
v-if="maskClick"
|
||||
:class="[ani + '-mask', animation ? 'mask-ani' : '']"
|
||||
:style="{
|
||||
'background-color': maskBgColor
|
||||
}"
|
||||
@tap="hideMask(true)"
|
||||
></view>
|
||||
|
||||
<view class="simple-address-content simple-address--fixed" :class="[type, ani + '-content', animation ? 'content-ani' : '']">
|
||||
<view class="simple-address__header">
|
||||
<view class="simple-address__header-btn-box" @click="pickerCancel"><text class="simple-address__header-text">取消</text></view>
|
||||
<view class="simple-address__header-btn-box" @click="pickerConfirm"><text class="simple-address__header-text" :style="{ color: themeColor }">确定</text></view>
|
||||
</view>
|
||||
<view class="simple-address__box">
|
||||
<picker-view indicator-style="height: 70rpx;" class="simple-address-view" :value="pickerValue" @change="pickerChange">
|
||||
<picker-view-column>
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<view class="picker-item" v-for="(item, index) in provinceDataList" :key="index">{{ item.label }}</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<text class="picker-item" v-for="(item, index) in provinceDataList" :key="index">{{ item.label }}</text>
|
||||
<!-- #endif -->
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<view class="picker-item" v-for="(item, index) in cityDataList" :key="index">{{ item.label }}</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<text class="picker-item" v-for="(item, index) in cityDataList" :key="index">{{ item.label }}</text>
|
||||
<!-- #endif -->
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<view class="picker-item" v-for="(item, index) in areaDataList" :key="index">{{ item.label }}</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<text class="picker-item" v-for="(item, index) in areaDataList" :key="index">{{ item.label }}</text>
|
||||
<!-- #endif -->
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import provinceData from './city-data/province.js';
|
||||
import cityData from './city-data/city.js';
|
||||
import areaData from './city-data/area.js';
|
||||
export default {
|
||||
name: 'simpleAddress',
|
||||
props: {
|
||||
mode: {
|
||||
// 地址类型
|
||||
// default 则代表老版本根据index索引获取数据
|
||||
//
|
||||
type: String,
|
||||
default: 'default'
|
||||
},
|
||||
// 开启动画
|
||||
animation: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/* 弹出层类型，可选值；
|
||||
bottom：底部弹出层
|
||||
*/
|
||||
type: {
|
||||
type: String,
|
||||
default: 'bottom'
|
||||
},
|
||||
// maskClick
|
||||
maskClick: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
maskBgColor: {
|
||||
type: String,
|
||||
default: 'rgba(0, 0, 0, 0.4)' //背景颜色 rgba(0, 0, 0, 0.4) 为空则调用 uni.scss
|
||||
},
|
||||
themeColor: {
|
||||
type: String,
|
||||
default: '' // 主题色
|
||||
},
|
||||
/* 默认值 */
|
||||
pickerValueDefault: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [0, 0, 0];
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ani: '',
|
||||
showPopup: false,
|
||||
pickerValue: [0, 0, 0],
|
||||
provinceDataList: [],
|
||||
cityDataList: [],
|
||||
areaDataList: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
show(newValue) {
|
||||
if (newValue) {
|
||||
this.open();
|
||||
} else {
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
pickerValueDefault() {
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.handPickValueDefault(); // 对 pickerValueDefault 做兼容处理
|
||||
this.provinceDataList = provinceData;
|
||||
this.cityDataList = cityData[this.pickerValueDefault[0]];
|
||||
this.areaDataList = areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]];
|
||||
this.pickerValue = this.pickerValueDefault;
|
||||
},
|
||||
handPickValueDefault() {
|
||||
if (this.pickerValueDefault !== [0, 0, 0]) {
|
||||
if (this.pickerValueDefault[0] > provinceData.length - 1) {
|
||||
this.pickerValueDefault[0] = provinceData.length - 1;
|
||||
}
|
||||
if (this.pickerValueDefault[1] > cityData[this.pickerValueDefault[0]].length - 1) {
|
||||
this.pickerValueDefault[1] = cityData[this.pickerValueDefault[0]].length - 1;
|
||||
}
|
||||
if (this.pickerValueDefault[2] > areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]].length - 1) {
|
||||
this.pickerValueDefault[2] = areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]].length - 1;
|
||||
}
|
||||
}
|
||||
},
|
||||
pickerChange(e) {
|
||||
let changePickerValue = e.detail.value;
|
||||
if (this.pickerValue[0] !== changePickerValue[0]) {
|
||||
// 第一级发生滚动
|
||||
this.cityDataList = cityData[changePickerValue[0]];
|
||||
this.areaDataList = areaData[changePickerValue[0]][0];
|
||||
changePickerValue[1] = 0;
|
||||
changePickerValue[2] = 0;
|
||||
} else if (this.pickerValue[1] !== changePickerValue[1]) {
|
||||
// 第二级滚动
|
||||
this.areaDataList = areaData[changePickerValue[0]][changePickerValue[1]];
|
||||
changePickerValue[2] = 0;
|
||||
}
|
||||
this.pickerValue = changePickerValue;
|
||||
this._$emit('onChange');
|
||||
},
|
||||
_$emit(emitName) {
|
||||
let pickObj = {
|
||||
label: this._getLabel(),
|
||||
value: this.pickerValue,
|
||||
cityCode: this._getCityCode(),
|
||||
areaCode: this._getAreaCode(),
|
||||
provinceCode: this._getProvinceCode(),
|
||||
labelArr:this._getLabel().split('-')
|
||||
};
|
||||
console.log(this._getLabel().split('-'));
|
||||
this.$emit(emitName, pickObj);
|
||||
},
|
||||
_getLabel() {
|
||||
let pcikerLabel =
|
||||
this.provinceDataList[this.pickerValue[0]].label + '-' + this.cityDataList[this.pickerValue[1]].label + '-' + this.areaDataList[this.pickerValue[2]].label;
|
||||
return pcikerLabel;
|
||||
},
|
||||
_getCityCode() {
|
||||
return this.cityDataList[this.pickerValue[1]].value;
|
||||
},
|
||||
_getProvinceCode() {
|
||||
return this.provinceDataList[this.pickerValue[0]].value;
|
||||
},
|
||||
_getAreaCode() {
|
||||
return this.areaDataList[this.pickerValue[2]].value;
|
||||
},
|
||||
queryIndex(params = [], type = 'value') {
|
||||
// params = [ 11 ,1101,110101 ];
|
||||
// 1.获取省份的index
|
||||
let provinceIndex = provinceData.findIndex(res => res[type] == params[0]);
|
||||
let cityIndex = cityData[provinceIndex].findIndex(res => res[type] == params[1]);
|
||||
let areaIndex = areaData[provinceIndex][cityIndex].findIndex(res => res[type] == params[2]);
|
||||
return {
|
||||
index: [provinceIndex, cityIndex, areaIndex],
|
||||
data: {
|
||||
province: provinceData[provinceIndex],
|
||||
city: cityData[provinceIndex][cityIndex],
|
||||
area: areaData[cityIndex][0][areaIndex]
|
||||
}
|
||||
};
|
||||
},
|
||||
clear() {},
|
||||
hideMask() {
|
||||
this._$emit('onCancel');
|
||||
this.close();
|
||||
},
|
||||
pickerCancel() {
|
||||
this._$emit('onCancel');
|
||||
this.close();
|
||||
},
|
||||
pickerConfirm() {
|
||||
this._$emit('onConfirm');
|
||||
this.close();
|
||||
},
|
||||
open() {
|
||||
this.showPopup = true;
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.ani = 'simple-' + this.type;
|
||||
}, 100);
|
||||
});
|
||||
},
|
||||
close(type) {
|
||||
if (!this.maskClick && type) return;
|
||||
this.ani = '';
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.showPopup = false;
|
||||
}, 300);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.simple-address {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.simple-address-mask {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
transition-property: opacity;
|
||||
transition-duration: 0.3s;
|
||||
opacity: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 99;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.mask-ani {
|
||||
transition-property: opacity;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
.simple-bottom-mask {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.simple-center-mask {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.simple-address--fixed {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transition-property: transform;
|
||||
transition-duration: 0.3s;
|
||||
transform: translateY(460rpx);
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 99;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.simple-address-content {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.simple-content-bottom {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: translateY(500rpx);
|
||||
}
|
||||
|
||||
.content-ani {
|
||||
transition-property: transform, opacity;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
.simple-bottom-content {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.simple-center-content {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.simple-address__header {
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
border-bottom-color: #f2f2f2;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1rpx;
|
||||
}
|
||||
|
||||
.simple-address--fixed-top {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
border-top-color: $uni-border-color;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1rpx;
|
||||
}
|
||||
|
||||
.simple-address__header-btn-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
.simple-address__header-text {
|
||||
text-align: center;
|
||||
font-size: $uni-font-size-base;
|
||||
color: #1aad19;
|
||||
line-height: 70rpx;
|
||||
padding-left: 40rpx;
|
||||
padding-right: 40rpx;
|
||||
}
|
||||
|
||||
.simple-address__box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.simple-address-view {
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
width: 750rpx;
|
||||
/* #endif */
|
||||
height: 408rpx;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.picker-item {
|
||||
text-align: center;
|
||||
line-height: 70rpx;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -1,134 +0,0 @@
|
||||
<template>
|
||||
<view :class="[styleType === 'text'?'segmented-control--text' : 'segmented-control--button' ]" :style="{ borderColor: styleType === 'text' ? '' : activeColor }"
|
||||
class="segmented-control">
|
||||
<view v-for="(item, index) in values" :class="[ styleType === 'text'?'segmented-control__item--text': 'segmented-control__item--button' , index === currentIndex&&styleType === 'button'?'segmented-control__item--button--active': '' , index === 0&&styleType === 'button'?'segmented-control__item--button--first': '',index === values.length - 1&&styleType === 'button'?'segmented-control__item--button--last': '' ]"
|
||||
:key="index" :style="{
|
||||
backgroundColor: index === currentIndex && styleType === 'button' ? activeColor : '',borderColor: index === currentIndex&&styleType === 'text'||styleType === 'button'?activeColor:'transparent'
|
||||
}"
|
||||
class="segmented-control__item" @click="_onClick(index)">
|
||||
<text :style="{color:
|
||||
index === currentIndex
|
||||
? styleType === 'text'
|
||||
? activeColor
|
||||
: '#fff'
|
||||
: styleType === 'text'
|
||||
? '#000'
|
||||
: activeColor}"
|
||||
class="segmented-control__text">{{ item }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* SegmentedControl 分段器
|
||||
* @description 用作不同视图的显示
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=54
|
||||
* @property {Number} current 当前选中的tab索引值，从0计数
|
||||
* @property {String} styleType = [button|text] 分段器样式类型
|
||||
* @value button 按钮类型
|
||||
* @value text 文字类型
|
||||
* @property {String} activeColor 选中的标签背景色与边框颜色
|
||||
* @property {Array} values 选项数组
|
||||
* @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
|
||||
*/
|
||||
export default {
|
||||
name: 'UniSegmentedControl',
|
||||
props: {
|
||||
current: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
values: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#007aff'
|
||||
},
|
||||
styleType: {
|
||||
type: String,
|
||||
default: 'button'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentIndex: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
current(val) {
|
||||
if (val !== this.currentIndex) {
|
||||
this.currentIndex = val
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.currentIndex = this.current
|
||||
},
|
||||
methods: {
|
||||
_onClick(index) {
|
||||
if (this.currentIndex !== index) {
|
||||
this.currentIndex = index
|
||||
this.$emit('clickItem', {
|
||||
currentIndex: index
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.segmented-control {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
height: 50rpx;
|
||||
overflow: hidden;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
.segmented-control__item {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: inline-flex;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10rpx;
|
||||
}
|
||||
.segmented-control__item--button {
|
||||
border-style: solid;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-left-width: 0;
|
||||
}
|
||||
.segmented-control__item--button--first {
|
||||
border-left-width: 1px;
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
.segmented-control__item--button--last {
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
.segmented-control__item--text {
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 3px;
|
||||
}
|
||||
.segmented-control__text {
|
||||
font-size: 28rpx;
|
||||
line-height: 28rpx;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user