新增地址组件、新增滑动wiper-tab组件、新增图片选择组件
parent
62beb8931a
commit
631399f32c
2
App.vue
2
App.vue
|
|
@ -41,7 +41,7 @@
|
||||||
@import url("./commons/base.css");
|
@import url("./commons/base.css");
|
||||||
/* 项目基础样式 end */
|
/* 项目基础样式 end */
|
||||||
/* 项目页面样式 start */
|
/* 项目页面样式 start */
|
||||||
@import url("./commons/flying-monkey.css");
|
@import url("./commons/style.css");
|
||||||
/* 项目页面样式 end */
|
/* 项目页面样式 end */
|
||||||
|
|
||||||
/* 动画样式 start */
|
/* 动画样式 start */
|
||||||
|
|
|
||||||
|
|
@ -48,6 +48,7 @@
|
||||||
.posixzy{position: fixed;left: 0;right: 0;z-index: 2;bottom: 0;}
|
.posixzy{position: fixed;left: 0;right: 0;z-index: 2;bottom: 0;}
|
||||||
.posia-op{position: absolute;top: 0;right: 0;left: 0;bottom: 0;opacity: 0;}
|
.posia-op{position: absolute;top: 0;right: 0;left: 0;bottom: 0;opacity: 0;}
|
||||||
.syxzo{top: 0;left: 0;right: 0;bottom: 0;opacity: 0;}
|
.syxzo{top: 0;left: 0;right: 0;bottom: 0;opacity: 0;}
|
||||||
|
.posi-sticky{position: sticky;top: 0;z-index: 1;background-color: #FFFFFF;}
|
||||||
|
|
||||||
|
|
||||||
.dis{display: flex;}
|
.dis{display: flex;}
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "iconfont"; /* Project id 3180711 */
|
font-family: "iconfont"; /* Project id 3180711 */
|
||||||
src: url('https://at.alicdn.com/t/font_3180711_7fx7wl7itar.woff2?t=1647479558213') format('woff2'),
|
src: url('https://at.alicdn.com/t/font_3180711_mjqzq7x5vu.woff2?t=1649586677823') format('woff2'),
|
||||||
url('https://at.alicdn.com/t/font_3180711_7fx7wl7itar.woff?t=1647479558213') format('woff'),
|
url('https://at.alicdn.com/t/font_3180711_mjqzq7x5vu.woff?t=1649586677823') format('woff'),
|
||||||
url('https://at.alicdn.com/t/font_3180711_7fx7wl7itar.ttf?t=1647479558213') format('truetype');
|
url('https://at.alicdn.com/t/font_3180711_mjqzq7x5vu.ttf?t=1649586677823') format('truetype');
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
|
|
@ -13,6 +13,26 @@
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.icon-add-picture05:before {
|
||||||
|
content: "\e639";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-add-picture04:before {
|
||||||
|
content: "\e636";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-add-picture03:before {
|
||||||
|
content: "\e642";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-add-picture02:before {
|
||||||
|
content: "\e8bc";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-add-picture01:before {
|
||||||
|
content: "\e62c";
|
||||||
|
}
|
||||||
|
|
||||||
.icon-sandian:before {
|
.icon-sandian:before {
|
||||||
content: "\e769";
|
content: "\e769";
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,420 @@
|
||||||
|
<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" :style="{ color: cancelColor, fontSize: btnFontSize }">取消</text>
|
||||||
|
</view>
|
||||||
|
<view class="simple-address__header-btn-box" @click="pickerConfirm">
|
||||||
|
<text class="simple-address__header-text" :style="{ color: confirmColor || themeColor, fontSize: btnFontSize }">确定</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" :style="{ fontSize: fontSize }" v-for="(item, index) in provinceDataList" :key="index">{{ item.label }}</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
<text class="picker-item" :style="{ fontSize: fontSize }" 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" :style="{ fontSize: fontSize }" v-for="(item, index) in cityDataList" :key="index">{{ item.label }}</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
<text class="picker-item" :style="{ fontSize: fontSize }" 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" :style="{ fontSize: fontSize }" v-for="(item, index) in areaDataList" :key="index">{{ item.label }}</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
<text class="picker-item" :style="{ fontSize: fontSize }" v-for="(item, index) in areaDataList" :key="index">{{ item.label }}</text>
|
||||||
|
<!-- #endif -->
|
||||||
|
</picker-view-column>
|
||||||
|
</picker-view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* Simple-addres 地址联动组件
|
||||||
|
* @description 三级地址联动，支持（app）nvue、小程序、H5
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=1084
|
||||||
|
* @property {String} animation 是否开启动画
|
||||||
|
* @property {String} type = [bottom] 弹出层类型，暂时只支持底部弹出
|
||||||
|
* @property {Boolean} maskClick = [true | false] 是否允许点击遮罩层关闭
|
||||||
|
* @property {Boolean} show = [true | false] 显示或隐藏地址组件
|
||||||
|
* @property {String} maskBgColor 遮罩层背景颜色
|
||||||
|
* @property {String} cancelColor 取消按钮颜色，默认为：#1aad19
|
||||||
|
* @property {String} confirmColor 确认按钮颜色，默认为：themeColor
|
||||||
|
* @property {String} themeColor 主题颜色，后续会废弃该配置，建议使用`cancelColor`或`confirmColor`
|
||||||
|
* @property {String} btnFontSize 取消、确认按钮字体大小，默认为`uni.scss里的 $uni-font-size-base `
|
||||||
|
* @property {String} fontSize picker-item字体大小，默认为：28rpx
|
||||||
|
* @property {Array} pickerValueDefault 默认值，可以通过function queryIndex 获取
|
||||||
|
* @property {Function} queryIndex 根据自定义信息返回对应的index
|
||||||
|
* @property {Function} open 打开
|
||||||
|
* @example <simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor='#007AFF'></simple-address>
|
||||||
|
*/
|
||||||
|
|
||||||
|
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: '' // 确认按钮颜色（向下兼容）
|
||||||
|
},
|
||||||
|
cancelColor: {
|
||||||
|
type: String,
|
||||||
|
default: '' // 取消按钮颜色
|
||||||
|
},
|
||||||
|
confirmColor: {
|
||||||
|
type: String,
|
||||||
|
default: '' // 确认按钮颜色
|
||||||
|
},
|
||||||
|
fontSize: {
|
||||||
|
type: String,
|
||||||
|
default: '28rpx' // picker-item字体大小
|
||||||
|
},
|
||||||
|
btnFontSize: {
|
||||||
|
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('-')
|
||||||
|
};
|
||||||
|
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[provinceIndex][cityIndex][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>
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,143 @@
|
||||||
|
/* 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;
|
||||||
|
|
@ -27,7 +27,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {lotusAddressJson} from "./city.js";
|
import {lotusAddressJson} from "./address-one.js";
|
||||||
export default {
|
export default {
|
||||||
props:['lotusAddressData'],
|
props:['lotusAddressData'],
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -229,5 +229,5 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
@import "./city.css";
|
@import "./address-one.css";
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:"address-special",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,136 @@
|
||||||
|
<template>
|
||||||
|
<picker mode="multiSelector"
|
||||||
|
:value="multiIndex"
|
||||||
|
:range="multiArray"
|
||||||
|
@change="handleValueChange"
|
||||||
|
@columnchange="handleColumnChange">
|
||||||
|
<slot></slot>
|
||||||
|
</picker>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const CHINA_REGIONS = require('./regions.json')
|
||||||
|
export default {
|
||||||
|
props:{
|
||||||
|
defaultRegions:{
|
||||||
|
type:Array,
|
||||||
|
default(){
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
defaultRegionCode:{
|
||||||
|
type:String
|
||||||
|
},
|
||||||
|
defaultRegion:[String,Array]
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
cityArr:CHINA_REGIONS[0].childs,
|
||||||
|
districtArr:CHINA_REGIONS[0].childs[0].childs,
|
||||||
|
multiIndex: [0, 0, 0],
|
||||||
|
isInitMultiArray:true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch:{
|
||||||
|
defaultRegion:{
|
||||||
|
handler(region,oldRegion){
|
||||||
|
if(Array.isArray(region)){
|
||||||
|
// 避免传的是字面量的时候重复触发
|
||||||
|
oldRegion = oldRegion || []
|
||||||
|
if(region.join('')!==oldRegion.join('')){
|
||||||
|
this.handleDefaultRegion(region)
|
||||||
|
}
|
||||||
|
}else if(region&®ion.length == 6){
|
||||||
|
this.handleDefaultRegion(region)
|
||||||
|
}else{
|
||||||
|
console.warn('defaultRegion非有效格式')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate:true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
multiArray(){
|
||||||
|
return this.pickedArr.map(arr=>arr.map(item=>item.name))
|
||||||
|
},
|
||||||
|
pickedArr(){
|
||||||
|
// 进行初始化
|
||||||
|
if(this.isInitMultiArray){
|
||||||
|
return [
|
||||||
|
CHINA_REGIONS,
|
||||||
|
CHINA_REGIONS[0].childs,
|
||||||
|
CHINA_REGIONS[0].childs[0].childs
|
||||||
|
]
|
||||||
|
}
|
||||||
|
return [CHINA_REGIONS,this.cityArr,this.districtArr];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleColumnChange(e){
|
||||||
|
this.isInitMultiArray = false;
|
||||||
|
const that = this;
|
||||||
|
let col = e.detail.column;
|
||||||
|
let row = e.detail.value;
|
||||||
|
that.multiIndex[col] = row;
|
||||||
|
try{
|
||||||
|
switch(col){
|
||||||
|
case 0:
|
||||||
|
if(CHINA_REGIONS[that.multiIndex[0]].childs.length==0){
|
||||||
|
that.cityArr = that.districtArr = [CHINA_REGIONS[that.multiIndex[0]]]
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
that.cityArr = CHINA_REGIONS[that.multiIndex[0]].childs
|
||||||
|
that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[that.multiIndex[1]].childs
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[that.multiIndex[1]].childs
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}catch(e){
|
||||||
|
// console.log(e);
|
||||||
|
that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[0].childs
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
handleValueChange(e){
|
||||||
|
// 结构赋值
|
||||||
|
let [index0,index1,index2] = e.detail.value;
|
||||||
|
let [arr0,arr1,arr2] = this.pickedArr;
|
||||||
|
let address = [arr0[index0],arr1[index1],arr2[index2]];
|
||||||
|
// console.log(address);
|
||||||
|
this.$emit('getRegion',address)
|
||||||
|
},
|
||||||
|
handleDefaultRegion(region){
|
||||||
|
const isCode = !Array.isArray(region)
|
||||||
|
this.isInitMultiArray = false;
|
||||||
|
let children = CHINA_REGIONS
|
||||||
|
for(let i=0;i<3;i++){
|
||||||
|
for(let j=0;j<children.length;j++){
|
||||||
|
let condition = isCode?children[j].code==region.slice(0,(i+1)*2):children[j].name.includes(region[i]);
|
||||||
|
if(condition){
|
||||||
|
// 匹配成功进行赋值
|
||||||
|
// console.log(i,j,children.length-1);
|
||||||
|
children = children[j].childs;
|
||||||
|
if(i==0){
|
||||||
|
this.cityArr = children
|
||||||
|
}else if(i==1){
|
||||||
|
this.districtArr = children
|
||||||
|
}
|
||||||
|
this.$set(this.multiIndex,i,j)
|
||||||
|
// console.log(this.multiIndex);
|
||||||
|
break;
|
||||||
|
}else{
|
||||||
|
// 首次匹配失败就用默认的初始化
|
||||||
|
// console.log(i,j,children.length-1);
|
||||||
|
if(i==0 && j==(children.length-1)){
|
||||||
|
this.isInitMultiArray = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,217 @@
|
||||||
|
<template>
|
||||||
|
<view class="level-container">
|
||||||
|
<h1 class="title">选择收货地址</h1>
|
||||||
|
<ul class="name-list">
|
||||||
|
<li :class="showIndex==0?'select':''" @click="anewSelect(0)">{{province}}</li>
|
||||||
|
<li :class="showIndex==1?'select':''" @click="anewSelect(1)" v-if="showIndex>=1">{{city}}</li>
|
||||||
|
<li :class="showIndex==2?'select':''" @click="anewSelect(2)" v-if="showIndex>=2">{{area}}</li>
|
||||||
|
<li :class="showIndex==3?'select':''" @click="anewSelect(3)" v-if="showIndex>=3">{{street}}</li>
|
||||||
|
</ul>
|
||||||
|
<ul v-if="showIndex==0" class="content" :style="'height:'+ heightCot + 'upx'">
|
||||||
|
<li @click="selectPro(indexp,itemp.label)" v-for="(itemp,indexp) in provinceData" :key="indexp">{{itemp.label}}</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ul v-if="showIndex==1" class="content" :style="'height:'+ heightCot + 'upx'">
|
||||||
|
<li @click="selectCity(indexc,itemc.label)" v-for="(itemc,indexc) in cityData" :key="indexc">{{itemc.label}}</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ul v-if="showIndex==2" class="content" :style="'height:'+ heightCot + 'upx'">
|
||||||
|
<li @click="selectaArea(indexa,itema.label)" v-for="(itema,indexa) in areaData" :key="indexa">{{itema.label}}</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ul v-if="showIndex==3" class="content" :style="'height:'+ heightCot + 'upx'">
|
||||||
|
<li @click="selectStreet(indexs,items)" v-for="(items,indexs) in streetsData" :key="indexs">{{items}}</li>
|
||||||
|
</ul>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import provinceData from './city-data/province.js';
|
||||||
|
import getCity from './city-data/city.js';
|
||||||
|
import getArea from './city-data/area.js';
|
||||||
|
import getStreets from './city-data/streets.js';
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
province: "请选择",
|
||||||
|
city: "请选择",
|
||||||
|
area: "请选择",
|
||||||
|
street: "请选择",
|
||||||
|
cityDataAll: '', // 市的所有數據
|
||||||
|
getAreaAll: '', // 区的所有数据
|
||||||
|
getStreetsAll: '', // 街道的所有数据
|
||||||
|
presentIndex: [],
|
||||||
|
proIndex: 0,
|
||||||
|
cityIndex: 0,
|
||||||
|
areaIndex: 0,
|
||||||
|
|
||||||
|
provinceData: '', // 当前展示的省数据
|
||||||
|
cityData: '', // 当前展示的市数据
|
||||||
|
areaData: '', //当前展示的区数据
|
||||||
|
streetsData: '', //当前展示的区数据
|
||||||
|
showIndex: 0,
|
||||||
|
heightCot: 0,
|
||||||
|
bb: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
uni.getSystemInfo({
|
||||||
|
success: res => {
|
||||||
|
console.log(res.safeArea.height)
|
||||||
|
this.heightCot = (res.safeArea.height * 2) / 2
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// console.log(provinceData)
|
||||||
|
this.provinceData = provinceData;
|
||||||
|
this.cityDataAll = getCity;
|
||||||
|
this.getAreaAll = getArea;
|
||||||
|
this.getStreetsAll = getStreets
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
anewSelect(num) {
|
||||||
|
switch (num) {
|
||||||
|
case 0:
|
||||||
|
this.showIndex = 0;
|
||||||
|
this.areaData = [];
|
||||||
|
this.streetsData = [];
|
||||||
|
this.city = '请选择';
|
||||||
|
this.area = '请选择';
|
||||||
|
this.street = '请选择'
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
this.showIndex = 1;
|
||||||
|
this.areaData = [];
|
||||||
|
this.streetsData = [];
|
||||||
|
this.area = '请选择';
|
||||||
|
this.street = '请选择'
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
this.showIndex = 2;
|
||||||
|
this.streetsData = [];
|
||||||
|
this.street = '请选择'
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
console.log(11111);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
selectPro(index, label) {
|
||||||
|
console.log(index)
|
||||||
|
const {
|
||||||
|
cityDataAll
|
||||||
|
} = this;
|
||||||
|
this.proIndex = index; // 当前省的下标
|
||||||
|
this.province = label;
|
||||||
|
this.cityData = cityDataAll[index];
|
||||||
|
this.showIndex = 1;
|
||||||
|
|
||||||
|
},
|
||||||
|
selectCity(index, label) {
|
||||||
|
const {
|
||||||
|
proIndex
|
||||||
|
} = this;
|
||||||
|
// console.log(this.getAreaAll)
|
||||||
|
this.city = label;
|
||||||
|
this.cityIndex = index; // 当前市的下标
|
||||||
|
this.areaData = this.getAreaAll[proIndex][index];
|
||||||
|
this.showIndex = 2;
|
||||||
|
},
|
||||||
|
selectaArea(index, label) {
|
||||||
|
const {
|
||||||
|
proIndex,
|
||||||
|
cityIndex
|
||||||
|
} = this;
|
||||||
|
this.area = label;
|
||||||
|
this.showIndex = 3;
|
||||||
|
console.log(index)
|
||||||
|
console.log(this.getStreetsAll[proIndex][cityIndex])
|
||||||
|
console.log(this.getStreetsAll[proIndex][cityIndex][index])
|
||||||
|
this.streetsData = this.getStreetsAll[proIndex][cityIndex][index]
|
||||||
|
},
|
||||||
|
selectStreet(index, label) {
|
||||||
|
this.street = label;
|
||||||
|
const {
|
||||||
|
province,
|
||||||
|
city,
|
||||||
|
area,
|
||||||
|
street
|
||||||
|
} = this;
|
||||||
|
this.$emit('conceal',{
|
||||||
|
province,
|
||||||
|
city,
|
||||||
|
area,
|
||||||
|
street
|
||||||
|
})
|
||||||
|
// this.showIndex = 4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
ul,li{
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
.level-container {
|
||||||
|
width: 100%;
|
||||||
|
background: #fff;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
|
||||||
|
.select {
|
||||||
|
color: red;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
width: 40upx;
|
||||||
|
height: 6upx;
|
||||||
|
background: red;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
bottom: -8upx;
|
||||||
|
margin-left: -20upx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
font-size: 26upx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content,
|
||||||
|
.name-list {
|
||||||
|
padding: 0 20upx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 32upx;
|
||||||
|
margin: 30upx 20upx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name-list {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-right: 40upx;
|
||||||
|
padding-bottom: 6upx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
margin-top: 20upx;
|
||||||
|
height: 600upx;
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
|
li {
|
||||||
|
border-bottom: 1px solid #f1f1f1;
|
||||||
|
padding: 20upx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li:last-child {
|
||||||
|
border-bototm: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,139 @@
|
||||||
|
/* 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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
export default provinceData;
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,185 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="img-outside-box">
|
||||||
|
<!-- 标题 -->
|
||||||
|
<view v-if="ifTitle" class="img-title">标题</view>
|
||||||
|
<view :class="(imgList.length==showAmount || imgList.length==showAmount*2) ? 'dis-jbac-fw' : 'dis-ac-fw'">
|
||||||
|
<!-- 图片列表 -->
|
||||||
|
<view class="img-box animated bounceIn"
|
||||||
|
:style="{
|
||||||
|
width: ['100%','100%','48.4%','31.4%','22.8%'][showAmount],
|
||||||
|
marginRight: (imgList.length==showAmount && imgList.length==showAmount*2) ? '' : '20rpx'
|
||||||
|
}"
|
||||||
|
:class="[(showAmount-1==index || showAmount*2-1==index || showAmount*3-1==index || showAmount*4-1==index || showAmount*5-1==index || showAmount*6-1==index || showAmount*7-1==index || showAmount*8-1==index || showAmount*9-1==index || showAmount*10-1==index) ? 'img-box-right' : '',delIndex==index ? 'bounceOut' : '' ]"
|
||||||
|
v-for="(item,index) in imgList" :key="index" >
|
||||||
|
<!-- 图片 -->
|
||||||
|
<image @tap="preImg(index)"
|
||||||
|
class="picker-img"
|
||||||
|
:style="{
|
||||||
|
width: '100%',
|
||||||
|
height: imgH+'px',
|
||||||
|
borderRadius: imgR
|
||||||
|
}"
|
||||||
|
:src="item" mode="aspectFill" lazy-load>
|
||||||
|
</image>
|
||||||
|
<!-- 删除按钮 -->
|
||||||
|
<view class="img-del-box">
|
||||||
|
<view class="del-btn" :style="{
|
||||||
|
width: [60,60,60,50,40][showAmount]+'rpx',
|
||||||
|
height:[60,60,60,50,40][showAmount]+'rpx'
|
||||||
|
}"
|
||||||
|
@tap="delImg(index)"></view></view>
|
||||||
|
</view>
|
||||||
|
<!-- 添加图片按钮 -->
|
||||||
|
<view class="add-img-btn icon" :class="addIconList[addNum]"
|
||||||
|
v-if="imgList.length!=20"
|
||||||
|
:style="{
|
||||||
|
width: ['100%','100%','48.4%','31.4%','22.8%'][showAmount],
|
||||||
|
height: imgH+'px',
|
||||||
|
borderRadius: imgR,
|
||||||
|
marginRight: (imgList.length==(showAmount-1) || imgList.length==(showAmount-1)+showAmount || imgList.length==(showAmount-1)+showAmount*2 || imgList.length==(showAmount-1)+showAmount*3 || imgList.length==(showAmount-1)+showAmount*4 || imgList.length==(showAmount-1)+showAmount*5 || imgList.length==(showAmount-1)+showAmount*6 || imgList.length==(showAmount-1)+showAmount*7 || imgList.length==(showAmount-1)+showAmount*8 || imgList.length==(showAmount-1)+showAmount*9) ? '0rpx' : '20rpx'
|
||||||
|
}"
|
||||||
|
style="font-size: 90rpx;color: #CCCCCC;"
|
||||||
|
@tap="chooseImg">
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:"img-one",
|
||||||
|
props: {
|
||||||
|
// 一排显示数量
|
||||||
|
showAmount: {
|
||||||
|
type:Number,
|
||||||
|
default:3
|
||||||
|
},
|
||||||
|
ifTitle: {
|
||||||
|
type: Boolean,
|
||||||
|
default:false
|
||||||
|
},
|
||||||
|
// 图片圆角
|
||||||
|
imgR: {
|
||||||
|
type:String,
|
||||||
|
default:'10rpx'
|
||||||
|
},
|
||||||
|
// 一次选择图片张数1~9
|
||||||
|
imgN: {
|
||||||
|
type:Number,
|
||||||
|
default:9
|
||||||
|
},
|
||||||
|
// 哪种图标
|
||||||
|
addNum: {
|
||||||
|
type:String,
|
||||||
|
default:'0'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
let info = uni.createSelectorQuery().select(".add-img-btn");
|
||||||
|
info.boundingClientRect((data)=> { //data - 各种参数
|
||||||
|
// console.log(data.width) // 获取元素宽度
|
||||||
|
this.imgH = data.width;
|
||||||
|
}).exec()
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
imgList:[],//图片列表
|
||||||
|
imgH:'',//图片高度
|
||||||
|
delIndex:'-1',
|
||||||
|
// 添加按钮的icon图标
|
||||||
|
addIconList:['icon-add','icon-add-picture01','icon-add-picture02','icon-add-picture03','icon-add-picture04','icon-add-picture05'],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 选择图片
|
||||||
|
chooseImg() {
|
||||||
|
uni.chooseImage({
|
||||||
|
count: this.imgN,
|
||||||
|
sizeType: ['original', 'compressed'],
|
||||||
|
sourceType: ['album', 'camera'],
|
||||||
|
success: (res) => {
|
||||||
|
let files = res.tempFilePaths;
|
||||||
|
this.imgList = [...this.imgList,...files];
|
||||||
|
this.$emit('chooseEv',this.imgList);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 删除图片
|
||||||
|
delImg(index) {
|
||||||
|
this.delIndex = index;
|
||||||
|
setTimeout(()=>{
|
||||||
|
this.delIndex = '-1';
|
||||||
|
this.imgList.splice(index,1);
|
||||||
|
this.$emit('chooseEv',this.imgList);
|
||||||
|
},1000)
|
||||||
|
},
|
||||||
|
// 预览图片
|
||||||
|
preImg(index) {
|
||||||
|
uni.previewImage({
|
||||||
|
current: index,
|
||||||
|
urls: this.imgList
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.img-outside-box{padding-top: 20rpx;}
|
||||||
|
.img-title{font-size: 28rpx;margin-bottom: 20rpx;}
|
||||||
|
image {vertical-align: middle;}
|
||||||
|
.dis-ac-fw{display: flex;align-items: center;flex-wrap: wrap;}
|
||||||
|
.dis-jbac-fw{display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
|
||||||
|
.img-box{margin-bottom: 20rpx;position: relative;}
|
||||||
|
.img-box-right {
|
||||||
|
margin-right: 0rpx!important;
|
||||||
|
}
|
||||||
|
.add-img-btn {
|
||||||
|
position: relative;
|
||||||
|
background-color: #DFDFDF;
|
||||||
|
display: flex;justify-content: center;align-items: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
.icon-add::before,.icon-add::after {
|
||||||
|
content:'';
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
width: 4rpx;
|
||||||
|
height: 50%;
|
||||||
|
background-color: #CCCCCC;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
}
|
||||||
|
.icon-add::after{
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 删除按钮 */
|
||||||
|
.img-del-box {
|
||||||
|
position: absolute;
|
||||||
|
top: 10rpx;
|
||||||
|
right: 10rpx;
|
||||||
|
}
|
||||||
|
.del-btn{
|
||||||
|
position: relative;
|
||||||
|
display: flex;justify-content: center;align-items: center;
|
||||||
|
background-color: rgba(0,0,0,.6);
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
.del-btn::before,.del-btn::after{
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
width: 2rpx;
|
||||||
|
height: 46%;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius: 2rpx;
|
||||||
|
}
|
||||||
|
.del-btn::before{
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
.del-btn::after{
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -2,7 +2,6 @@
|
||||||
<view>
|
<view>
|
||||||
<view class="pad-zy30" :style="{paddingBottom: '70px'}">
|
<view class="pad-zy30" :style="{paddingBottom: '70px'}">
|
||||||
<slot name="content"></slot>
|
<slot name="content"></slot>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
<template>
|
||||||
|
<scroll-view scroll-x>
|
||||||
|
<view :class="dataList.length == 4 ? 'disjbac' : 'disac'">
|
||||||
|
<view @tap.once="goDetail(item.id)" class="posir flexs" v-for="(item,index) in dataList" :key="index" style="width: 23%;height: 214rpx;" :style="{marginRight: dataList.length != 4 ? '20rpx' : ''}">
|
||||||
|
<image style="width: 100%;height: 214rpx;" class="radius10 " :src="item.imgsrc" mode="widthFix"></image>
|
||||||
|
<view class="posia scroll-title clips1">{{item.title}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:"scroll-img",
|
||||||
|
props:{
|
||||||
|
dataList:{
|
||||||
|
type:Array,
|
||||||
|
default:()=>{
|
||||||
|
return [
|
||||||
|
{id:1,imgsrc:'/static/deleteImg/flying-img01.png',title:'控制室解决方案'},
|
||||||
|
{id:2,imgsrc:'/static/deleteImg/flying-img02.png',title:'户外屏解决方案'},
|
||||||
|
{id:3,imgsrc:'/static/deleteImg/flying-img03.png',title:'会议室解决方案'},
|
||||||
|
{id:4,imgsrc:'/static/deleteImg/flying-img04.png',title:'实体店解决方案'},
|
||||||
|
{id:5,imgsrc:'/static/deleteImg/flying-img04.png',title:'实体店解决方案'},
|
||||||
|
{id:6,imgsrc:'/static/deleteImg/flying-img04.png',title:'实体店解决方案'},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.scroll-title {
|
||||||
|
bottom: 6rpx;
|
||||||
|
left: -40rpx;
|
||||||
|
right: -40rpx;
|
||||||
|
padding: 6rpx;
|
||||||
|
background-color: rgba(255,255,255,0.6);
|
||||||
|
transform: scale(.6);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,96 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<scroll-view scroll-x>
|
||||||
|
<view :class="isCenter?'disac':'disjb'">
|
||||||
|
<view @tap="choosecate(index)"
|
||||||
|
:style="{
|
||||||
|
background : current==index ? activeb:defaultb,
|
||||||
|
fontSize:defaultf,
|
||||||
|
borderRadius:defaultRadius,
|
||||||
|
minWidth:isMinW ? minWidth:'',
|
||||||
|
color : current==index ? activec:defaultc}"
|
||||||
|
class="flexs cateitem" :class="(!isCenter && newcateList.length<=4)?'maright0':''"
|
||||||
|
v-for="(item,index) in newcateList" :key="index">{{item.title}}</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:"cate-pu",
|
||||||
|
props:{
|
||||||
|
isaaaa:{
|
||||||
|
type:Number,
|
||||||
|
default:1
|
||||||
|
},
|
||||||
|
isCenter:{
|
||||||
|
type:Boolean,
|
||||||
|
default:false
|
||||||
|
},
|
||||||
|
newcateList:{//分类列表
|
||||||
|
type:Array,
|
||||||
|
default:function(){
|
||||||
|
return [
|
||||||
|
{title:'热门问题'},
|
||||||
|
{title:'病种'},
|
||||||
|
{title:'案例日记'},
|
||||||
|
{title:'效果模拟'},
|
||||||
|
{title:'效果模拟'},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
activeb:{//选中背景色
|
||||||
|
type:String,
|
||||||
|
default:'#3875F6'
|
||||||
|
},
|
||||||
|
defaultb:{//默认背景色
|
||||||
|
type:String,
|
||||||
|
default:'#FFFFFF'
|
||||||
|
},
|
||||||
|
activec:{//选中字体颜色
|
||||||
|
type:String,
|
||||||
|
default:'#FFFFFF'
|
||||||
|
},
|
||||||
|
defaultc:{//默认字体颜色
|
||||||
|
type:String,
|
||||||
|
default:'#333333'
|
||||||
|
},
|
||||||
|
defaultf:{//默认字体大小
|
||||||
|
type:String,
|
||||||
|
default:'28rpx'
|
||||||
|
},
|
||||||
|
defaultRadius:{//圆角
|
||||||
|
type:String,
|
||||||
|
default:'10rpx'
|
||||||
|
},
|
||||||
|
isMinW:{//是否使用最小宽度
|
||||||
|
type:Boolean,
|
||||||
|
default:true
|
||||||
|
},
|
||||||
|
minWidth:{//最小宽度
|
||||||
|
type:String,
|
||||||
|
default:'110rpx'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
current:0,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
choosecate(index){
|
||||||
|
this.current = index;
|
||||||
|
this.$emit('choosecateEv',index)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.catetwomo{background-color: #FFFFFF;color: #4D4D4D;}
|
||||||
|
.disac{display: flex;align-items: center;}
|
||||||
|
.flexs{flex-shrink: 0;}
|
||||||
|
.cateitem{padding: 16rpx 20rpx;text-align: center;margin-right: 20rpx;}
|
||||||
|
.maright0{margin-right: 0!important;}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,257 @@
|
||||||
|
<template>
|
||||||
|
<view class="_tab-box" :style="{fontSize: defaultConfig.fontSize + 'rpx', color: defaultConfig.color}">
|
||||||
|
<scroll-view id="_scroll" :scroll-x="true" class="scroll-view-h" scroll-with-animation :scroll-left="slider.scrollLeft">
|
||||||
|
<view class="_scroll-content">
|
||||||
|
<view class="_tab-item-box" :class="[defaultConfig.itemWidth ? '_clamp' : '_flex']">
|
||||||
|
<block v-for="(item, index) in tabList" :key="index" >
|
||||||
|
<view
|
||||||
|
class="_item"
|
||||||
|
:id="'_tab_'+index"
|
||||||
|
:class="{ '_active': tagIndex === index }"
|
||||||
|
:style="{color: tagIndex == index ? defaultConfig.activeColor : defaultConfig.color, 'width': defaultConfig.itemWidth ? defaultConfig.itemWidth + 'rpx' : ''}"
|
||||||
|
@click="tabClick(index)">{{ item[defaultConfig.key] || item }}</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
<view class="_underline" :style="{
|
||||||
|
transform: 'translateX(' + slider.left + 'px)',
|
||||||
|
width: slider.width + 'px',
|
||||||
|
height: defaultConfig.underLineHeight + 'rpx',
|
||||||
|
backgroundColor: defaultConfig.underLineColor,
|
||||||
|
}" />
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'liuyuno-tabs',
|
||||||
|
props: {
|
||||||
|
list: {
|
||||||
|
type: Array,
|
||||||
|
default: () => ['全部', '测试', '测试宽度', '测试宽度三号', '测试宽度四号小星星', '测试宽度五号']
|
||||||
|
},
|
||||||
|
// 选中索引
|
||||||
|
activeIndex: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
config: {
|
||||||
|
type: Object,
|
||||||
|
default:() => {
|
||||||
|
return {
|
||||||
|
color: '#999999',//默认时字体颜色
|
||||||
|
activeColor: '#000000',//选中时字体颜色
|
||||||
|
underLineColor: '#000000',//下滑线颜色
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabList: [],
|
||||||
|
tagIndex: 0,
|
||||||
|
slider: {
|
||||||
|
left: 0,
|
||||||
|
width: 0,
|
||||||
|
scrollLeft: 0
|
||||||
|
},
|
||||||
|
scorll: {},
|
||||||
|
defaultConfig: {
|
||||||
|
// 要显示的key
|
||||||
|
key: 'name',
|
||||||
|
// 字体大小 rpx
|
||||||
|
fontSize: 26,
|
||||||
|
// 字体颜色
|
||||||
|
color: '#313131',
|
||||||
|
// 激活字体颜色
|
||||||
|
activeColor: '#e54d42',
|
||||||
|
// item宽度 0为自动
|
||||||
|
itemWidth: 0,
|
||||||
|
// 下划线左右边距，文字宽度加边距 rpx
|
||||||
|
underLinePadding: 10,
|
||||||
|
// 下划线宽度 rpx 注意：设置了此值 underLinePadding 失效
|
||||||
|
underLineWidth: 0,
|
||||||
|
// 下划线高度 rpx
|
||||||
|
underLineHeight: 4,
|
||||||
|
// 下划线颜色
|
||||||
|
underLineColor: '#e54d42',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
list(value) {
|
||||||
|
this.updateData();
|
||||||
|
setTimeout(() => {
|
||||||
|
this.updateTabWidth();
|
||||||
|
}, 0);
|
||||||
|
},
|
||||||
|
config(value) {
|
||||||
|
this.updateConfig();
|
||||||
|
},
|
||||||
|
activeIndex(value) {
|
||||||
|
this.tagIndex = this.activeIndex;
|
||||||
|
this.tabToIndex(this.tagIndex);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.updateConfig();
|
||||||
|
this.tagIndex = this.activeIndex;
|
||||||
|
this.updateData();
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.calcScrollPosition();
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
updateData() {
|
||||||
|
let data = [];
|
||||||
|
if (typeof(this.list[0])=='string') {
|
||||||
|
this.list.forEach((item, index) => {
|
||||||
|
data.push({
|
||||||
|
name: item,
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.defaultConfig.key = 'name';
|
||||||
|
} else {
|
||||||
|
data = JSON.parse(JSON.stringify(this.list));
|
||||||
|
}
|
||||||
|
|
||||||
|
this.tabList = data;
|
||||||
|
},
|
||||||
|
updateConfig() {
|
||||||
|
this.defaultConfig = Object.assign(this.defaultConfig, this.config);
|
||||||
|
},
|
||||||
|
calcScrollPosition() {
|
||||||
|
|
||||||
|
const query = uni.createSelectorQuery().in(this);
|
||||||
|
|
||||||
|
query.select('#_scroll').boundingClientRect((res) => {
|
||||||
|
this.scorll = res;
|
||||||
|
this.updateTabWidth();
|
||||||
|
}).exec();
|
||||||
|
},
|
||||||
|
updateTabWidth(index = 0) {
|
||||||
|
let data = this.tabList;
|
||||||
|
|
||||||
|
if (data.length == 0) return false;
|
||||||
|
|
||||||
|
const query = uni.createSelectorQuery().in(this);
|
||||||
|
|
||||||
|
query.select('#_tab_' + index).boundingClientRect((res) => {
|
||||||
|
|
||||||
|
data[index]._slider = {
|
||||||
|
width: res.width,
|
||||||
|
left: res.left,
|
||||||
|
scrollLeft: res.left - (data[index - 1] ? data[index - 1]._slider.width : 0),
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.tagIndex == index) {
|
||||||
|
this.tabToIndex(this.tagIndex);
|
||||||
|
}
|
||||||
|
|
||||||
|
index++;
|
||||||
|
if (data.length > index) {
|
||||||
|
this.updateTabWidth(index);
|
||||||
|
}
|
||||||
|
}).exec();
|
||||||
|
},
|
||||||
|
|
||||||
|
tabToIndex(index) {
|
||||||
|
|
||||||
|
let _slider = this.tabList[index]._slider;
|
||||||
|
|
||||||
|
let width = uni.upx2px(this.defaultConfig.underLineWidth);
|
||||||
|
|
||||||
|
if (!width) {
|
||||||
|
if (this.defaultConfig.itemWidth) {
|
||||||
|
width = uni.upx2px(this.defaultConfig.itemWidth);
|
||||||
|
} else {
|
||||||
|
width = this.tabList[index][this.defaultConfig.key].length * uni.upx2px(this.defaultConfig.fontSize);
|
||||||
|
}
|
||||||
|
width += uni.upx2px(this.defaultConfig.underLinePadding) * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
let scorll_left = this.scorll.left || 0;
|
||||||
|
|
||||||
|
this.slider = {
|
||||||
|
left: _slider.left - scorll_left + (_slider.width - width) / 2,
|
||||||
|
width: width,
|
||||||
|
scrollLeft: _slider.scrollLeft - scorll_left,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
tabClick(index) {
|
||||||
|
this.tagIndex = index;
|
||||||
|
this.tabToIndex(index);
|
||||||
|
this.$emit('changeEv', index);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
._tab-box {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
font-size: 26rpx;
|
||||||
|
position: relative;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
z-index: 10;
|
||||||
|
.scroll-view-h{
|
||||||
|
white-space:nowrap;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
._scroll-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position:relative;
|
||||||
|
|
||||||
|
._tab-item-box {
|
||||||
|
height: 100%;
|
||||||
|
&._flex {
|
||||||
|
display: flex;
|
||||||
|
._item {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&._clamp {
|
||||||
|
._item {
|
||||||
|
overflow:hidden;
|
||||||
|
text-overflow:ellipsis;
|
||||||
|
white-space:nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
._item {
|
||||||
|
height: 100%;
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
color: #333;
|
||||||
|
&._active {
|
||||||
|
color: #e54d42;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
._underline {
|
||||||
|
height: 4rpx;
|
||||||
|
background-color: #e54d42;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
transition: .5s;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.uni-scroll-view::-webkit-scrollbar {
|
||||||
|
// 隐藏滚动条，但依旧具备可以滚动的功能
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
<template>
|
||||||
|
<scroll-view scroll-x>
|
||||||
|
<view :class="dataList.length == 4 ? 'disjbac' : 'disac'">
|
||||||
|
<view @tap="switchType(item.id)" class="flexs" v-for="(item,index) in dataList" :key="index" style="width: 23%;" :style="{marginRight: dataList.length != 4 ? '20rpx' : ''}">
|
||||||
|
<view class="fon28 clips1">{{item.title}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:"scroll-text",
|
||||||
|
props:{
|
||||||
|
dataList:{
|
||||||
|
type:Array,
|
||||||
|
default:()=>{
|
||||||
|
return [
|
||||||
|
{id:1,title:'控制室解决方案'},
|
||||||
|
{id:2,title:'户外屏解决方案'},
|
||||||
|
{id:3,title:'会议室解决方案'},
|
||||||
|
{id:4,title:'实体店解决方案'},
|
||||||
|
{id:5,title:'实体店解决方案'},
|
||||||
|
{id:6,title:'实体店解决方案'},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
switchType(id) {
|
||||||
|
this.$emit('changeEv',id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,124 @@
|
||||||
|
<template>
|
||||||
|
<!-- 选项卡列表 swiper高度自适应 -->
|
||||||
|
<view>
|
||||||
|
<view class="posi-sticky">
|
||||||
|
<scroll-text-slide @changeEv="tabTap" :activeIndex="activeIndex"></scroll-text-slide>
|
||||||
|
</view>
|
||||||
|
<swiper :style="{ height: swiperHeight + 'rpx' }" :current="swiperCurrent" @change="swiperChange">
|
||||||
|
<swiper-item style="height: 100%" v-for="(item, index) in tabs" :key="index">
|
||||||
|
<view :class="'list' + index">
|
||||||
|
<view class="item">
|
||||||
|
<!-- 列表数据 -->
|
||||||
|
<slot :listData="item.data"></slot>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import scrollTextSlide from '@/components/scroll-views/scroll-text-slide.vue';
|
||||||
|
export default {
|
||||||
|
name: "tabsSwiper",
|
||||||
|
components:{scrollTextSlide},
|
||||||
|
props: {
|
||||||
|
tabs: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
activeIndex: 0, // tabs索引
|
||||||
|
swiperCurrent: 0, // swiper索引
|
||||||
|
swiperHeight: 0, //swiper高度
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initSwiperHeight(".list0");
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 点击tabs
|
||||||
|
tabTap(index) {
|
||||||
|
this.activeIndex = index;
|
||||||
|
this.swiperCurrent = index;
|
||||||
|
let list = ".list" + index;
|
||||||
|
this.initSwiperHeight(list);
|
||||||
|
this.$emit('currentEv',index);
|
||||||
|
},
|
||||||
|
// 手势切换
|
||||||
|
swiperChange(e) {
|
||||||
|
this.activeIndex = e.detail.current;
|
||||||
|
let list = ".list" + e.detail.current;
|
||||||
|
this.initSwiperHeight(list);
|
||||||
|
this.$emit('currentEv',e.detail.current);
|
||||||
|
},
|
||||||
|
// 计算高度
|
||||||
|
initSwiperHeight(list) {
|
||||||
|
const query = uni.createSelectorQuery().in(this);
|
||||||
|
this.$nextTick(() => {
|
||||||
|
query
|
||||||
|
.select(list)
|
||||||
|
.boundingClientRect((data) => {
|
||||||
|
this.swiperHeight = Math.ceil(data.height / (uni.upx2px(data.height) / data
|
||||||
|
.height));
|
||||||
|
})
|
||||||
|
.exec();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.tabsSwiper {
|
||||||
|
padding: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.tabs-con {
|
||||||
|
color: #333;
|
||||||
|
transition: all 0.5s;
|
||||||
|
padding: 6rpx 40rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.des {
|
||||||
|
font-size: 20rpx;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
transition: all 0.5s;
|
||||||
|
box-shadow: 0 -2rpx 2rpx 2rpx #bcbec2;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 16rpx 16rpx 0 0;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
box-shadow: 0rpx 0rpx 2rpx 2rpx #bcbec2;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 16rpx;
|
||||||
|
border-radius: 0 0 16rpx 16rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 100rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,108 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="posi-sticky">
|
||||||
|
<scrollTextSlide @changeEv="tabTap" :list="tagList" :activeIndex="activeIndex"></scrollTextSlide>
|
||||||
|
</view>
|
||||||
|
<swiper :style="{height: swiperHeight-100 + 'px'}" class=" fon30" :current="activeIndex" @change="swiperChange">
|
||||||
|
<swiper-item v-for="(item,index) in list.length" :key="index">
|
||||||
|
<scroll-view scroll-y @scrolltolower="scrollBottomEv" style="height: 100%;">
|
||||||
|
<!-- 列表数据 -->
|
||||||
|
<view class="radius20 bacf6 disjb pad20 bbot" v-for="(item1,index1) in list[index]" :key="index1">
|
||||||
|
<image class="mar-y20 flexs" src="/static/del/500478055.png" mode="" style="width: 200rpx;height: 200rpx;"></image>
|
||||||
|
<view class="width100 disjb fc" style="height: 200rpx;">
|
||||||
|
<view>
|
||||||
|
<view class="clips2">{{item1.title}}{{index1}}</view>
|
||||||
|
<view class="fon24 col9 clips2">{{item1.content}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="disjbac fon28">
|
||||||
|
<view class="colf8 bold">￥{{item1.price}}</view>
|
||||||
|
<view class="col5b">销量：{{item1.xiaol}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="pad-sx40 col9 tcenter" v-if="ifloading" style="position: fixed;bottom: 0;left: 0;right: 0;z-index: 1;">加载中...</view>
|
||||||
|
</scroll-view>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import scrollTextSlide from '@/components/scroll-views/scroll-text-slide.vue';
|
||||||
|
export default {
|
||||||
|
name:"swiper-tab-slide",
|
||||||
|
components:{
|
||||||
|
scrollTextSlide
|
||||||
|
},
|
||||||
|
props:{
|
||||||
|
ifloading:{
|
||||||
|
type:Boolean,
|
||||||
|
default:false
|
||||||
|
},
|
||||||
|
tagList:{
|
||||||
|
type:Array,
|
||||||
|
default:()=>{
|
||||||
|
return ['全部','男士外套','女士','孩童短裤','中年棉衣','老年']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
list:{
|
||||||
|
type:Array,
|
||||||
|
default:()=>{
|
||||||
|
return [
|
||||||
|
[
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
],
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
activeIndex:0,
|
||||||
|
swiperHeight:uni.getSystemInfoSync().windowHeight,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
tabTap(e) {
|
||||||
|
this.activeIndex = e;
|
||||||
|
},
|
||||||
|
swiperChange(e) {
|
||||||
|
this.activeIndex = e.detail.current;
|
||||||
|
},
|
||||||
|
scrollBottomEv(e) {
|
||||||
|
this.$emit('scrollBottom',this.activeIndex)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -8,8 +8,6 @@
|
||||||
:style="{color: (currentIndex === index ? `${itemColor}`: '')}" id="tab_item"
|
:style="{color: (currentIndex === index ? `${itemColor}`: '')}" id="tab_item"
|
||||||
@click="select(item, index)">
|
@click="select(item, index)">
|
||||||
<!-- 标题 -->
|
<!-- 标题 -->
|
||||||
<!-- <view><slot name="title" :title="item.title"></slot></view> -->
|
|
||||||
<!-- 标题 -->
|
|
||||||
<view v-if="!showTitleSlot">{{item.title}}</view>
|
<view v-if="!showTitleSlot">{{item.title}}</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -81,7 +79,7 @@
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
select(item, index) {
|
select(item, index) {
|
||||||
this.$emit('input', index)
|
this.$emit('changeEv', index)
|
||||||
},
|
},
|
||||||
setTabList() {
|
setTabList() {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
|
|
@ -143,7 +141,8 @@
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
&__item {
|
&__item {
|
||||||
// flex: 1;
|
// flex: 1;
|
||||||
width: 20%;
|
// width: 20%;
|
||||||
|
padding: 0 20rpx;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 90rpx;
|
line-height: 90rpx;
|
||||||
|
|
|
||||||
|
|
@ -625,6 +625,23 @@ const tools = {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
// 图片上传
|
||||||
|
uploadImg(count) {
|
||||||
|
let imgArr = [];
|
||||||
|
uni.chooseImage({
|
||||||
|
count:count,
|
||||||
|
sizeType:['compressed'],
|
||||||
|
sourceType:['album','camera'],
|
||||||
|
success: (res) => {
|
||||||
|
let files = res.tempFilePaths
|
||||||
|
console.log(files);
|
||||||
|
files.forEach(item=>{
|
||||||
|
imgArr.push(item);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return imgArr;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
59
pages.json
59
pages.json
|
|
@ -11,13 +11,35 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
"path": "pages/login/login",
|
"path": "pages/account-related/login/login",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "",
|
"navigationBarTitleText": "",
|
||||||
"navigationStyle": "custom" ,//禁用原生导航栏，微信小程序可用
|
"navigationStyle": "custom" ,//禁用原生导航栏，微信小程序可用
|
||||||
"navigationBarTextStyle": "white"
|
"navigationBarTextStyle": "white"
|
||||||
}
|
}
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/account-related/register/register",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"navigationStyle": "custom", //禁用原生导航栏，微信小程序可用
|
||||||
|
"navigationBarTextStyle": "black",
|
||||||
|
"app-plus": {
|
||||||
|
"titleNView": false, //禁用原生导航栏，APP和H5可用
|
||||||
|
"bounce": "none",
|
||||||
|
"scrollIndicator": "none"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/account-related/forget/forget",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "找回密码",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
"path": "pages/tabbar/pagehome/pagehome",
|
"path": "pages/tabbar/pagehome/pagehome",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "",
|
"navigationBarTitleText": "",
|
||||||
|
|
@ -37,7 +59,7 @@
|
||||||
"navigationStyle": "custom" //禁用原生导航栏，微信小程序可用
|
"navigationStyle": "custom" //禁用原生导航栏，微信小程序可用
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
"path": "pages/login/agreement",
|
"path": "pages/account-related/login/agreement",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": ""
|
"navigationBarTitleText": ""
|
||||||
}
|
}
|
||||||
|
|
@ -54,26 +76,6 @@
|
||||||
"navigationBarTitleText": "意见反馈",
|
"navigationBarTitleText": "意见反馈",
|
||||||
"enablePullDownRefresh": false
|
"enablePullDownRefresh": false
|
||||||
}
|
}
|
||||||
}, {
|
|
||||||
"path": "pages/register/register",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "",
|
|
||||||
"enablePullDownRefresh": false,
|
|
||||||
"navigationStyle": "custom", //禁用原生导航栏，微信小程序可用
|
|
||||||
"navigationBarTextStyle": "black",
|
|
||||||
"app-plus": {
|
|
||||||
"titleNView": false, //禁用原生导航栏，APP和H5可用
|
|
||||||
"bounce": "none",
|
|
||||||
"scrollIndicator": "none"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/forget/forget",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "找回密码",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"subPackages": [{ //A包
|
"subPackages": [{ //A包
|
||||||
|
|
@ -84,7 +86,16 @@
|
||||||
"navigationBarTitleText": "",
|
"navigationBarTitleText": "",
|
||||||
"enablePullDownRefresh": false
|
"enablePullDownRefresh": false
|
||||||
}
|
}
|
||||||
}]
|
} ,{
|
||||||
|
"path" : "my-address/my-address",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{ //B包
|
{ //B包
|
||||||
"root": "pagesB",
|
"root": "pagesB",
|
||||||
|
|
|
||||||
|
|
@ -74,14 +74,15 @@
|
||||||
confirm_password: this.forget_qpassword, // 确认密码
|
confirm_password: this.forget_qpassword, // 确认密码
|
||||||
affiliation: this.forget_unitname ,//单位名称
|
affiliation: this.forget_unitname ,//单位名称
|
||||||
}
|
}
|
||||||
this.$requst.post('/universal/api.login/password_find',params).then(res=>{
|
uni.navigateBack({delta:1});
|
||||||
if(res.code==1) {
|
// this.$requst.post('/universal/api.login/password_find',params).then(res=>{
|
||||||
this.$toolAll.tools.showToast('找回成功');
|
// if(res.code==1) {
|
||||||
setTimeout(()=>{uni.navigateBack({delta:1})},1000)
|
// this.$toolAll.tools.showToast('找回成功');
|
||||||
} else {
|
// setTimeout(()=>{uni.navigateBack({delta:1})},1000)
|
||||||
this.$toolAll.tools.showToast(res.msg);
|
// } else {
|
||||||
}
|
// this.$toolAll.tools.showToast(res.msg);
|
||||||
})
|
// }
|
||||||
|
// })
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 获取验证码
|
// 获取验证码
|
||||||
|
|
@ -103,7 +104,7 @@
|
||||||
}
|
}
|
||||||
},1000)
|
},1000)
|
||||||
// 调用获取短信事件
|
// 调用获取短信事件
|
||||||
this.getMessage(this.forget_phone);
|
// this.getMessage(this.forget_phone);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -62,13 +62,13 @@
|
||||||
return {
|
return {
|
||||||
windowHeight: uni.getSystemInfoSync().windowHeight,
|
windowHeight: uni.getSystemInfoSync().windowHeight,
|
||||||
ifPhone:false,
|
ifPhone:false,
|
||||||
login_phone:'',//登录手机号
|
login_phone:'18081028996',//登录手机号
|
||||||
ifCode:false,
|
ifCode:false,
|
||||||
login_code:'',//登录验证码
|
login_code:'131499',//登录验证码
|
||||||
ifunitName:false,
|
ifunitName:false,
|
||||||
login_unitName:'',//登录单位名称
|
login_unitName:'大向天诚',//登录单位名称
|
||||||
ifPassword:false,
|
ifPassword:false,
|
||||||
login_password:'',//登录密码
|
login_password:'1314520',//登录密码
|
||||||
codeText:'获取验证码' ,// 获取验证码按钮文字
|
codeText:'获取验证码' ,// 获取验证码按钮文字
|
||||||
flagCode:true ,// 允许点击获取验证码
|
flagCode:true ,// 允许点击获取验证码
|
||||||
countDown:null,
|
countDown:null,
|
||||||
|
|
@ -91,22 +91,25 @@
|
||||||
username: this.login_type == 'account' ? this.login_phone : '', //账号，login_type 为 account 时必填
|
username: this.login_type == 'account' ? this.login_phone : '', //账号，login_type 为 account 时必填
|
||||||
affiliation: this.login_unitName // 单位名称
|
affiliation: this.login_unitName // 单位名称
|
||||||
}
|
}
|
||||||
this.$requst.post('/universal/api.login/login',params).then(res=>{
|
uni.reLaunch({
|
||||||
if(res.code==1) {
|
url:'/pages/tabbar/pagehome/pagehome'
|
||||||
this.$toolAll.tools.showToast('登录成功');
|
|
||||||
// 缓存token和角色类型
|
|
||||||
uni.setStorageSync('token',res.data.token);
|
|
||||||
// 角色(1：业务员、2：客户、3：客服、4：工程师)
|
|
||||||
uni.setStorageSync('type_id',res.data.type_id);
|
|
||||||
setTimeout(()=>{
|
|
||||||
uni.reLaunch({
|
|
||||||
url:'/pages/tabbar/pagehome/pagehome'
|
|
||||||
})
|
|
||||||
},2000)
|
|
||||||
} else {
|
|
||||||
this.$toolAll.tools.showToast(res.msg);
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
// this.$requst.post('/universal/api.login/login',params).then(res=>{
|
||||||
|
// if(res.code==1) {
|
||||||
|
// this.$toolAll.tools.showToast('登录成功');
|
||||||
|
// // 缓存token和角色类型
|
||||||
|
// uni.setStorageSync('token',res.data.token);
|
||||||
|
// // 角色(1：业务员、2：客户、3：客服、4：工程师)
|
||||||
|
// uni.setStorageSync('type_id',res.data.type_id);
|
||||||
|
// setTimeout(()=>{
|
||||||
|
// uni.reLaunch({
|
||||||
|
// url:'/pages/tabbar/pagehome/pagehome'
|
||||||
|
// })
|
||||||
|
// },2000)
|
||||||
|
// } else {
|
||||||
|
// this.$toolAll.tools.showToast(res.msg);
|
||||||
|
// }
|
||||||
|
// })
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 获取验证码
|
// 获取验证码
|
||||||
|
|
@ -127,8 +130,9 @@
|
||||||
this.flagCode = true;
|
this.flagCode = true;
|
||||||
}
|
}
|
||||||
},1000)
|
},1000)
|
||||||
|
this.login_code = '131499';
|
||||||
// 调用获取短信事件
|
// 调用获取短信事件
|
||||||
this.getMessage(this.login_phone);
|
// this.getMessage(this.login_phone);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -142,6 +146,21 @@
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
// 切换登录方式
|
||||||
|
switchType(){
|
||||||
|
if(this.login_type_text=="账号密码") {
|
||||||
|
this.login_type = 'account';
|
||||||
|
this.login_type_text = '验证码';
|
||||||
|
this.login_code = '131499';
|
||||||
|
this.flagCode = true;
|
||||||
|
this.codeText = '获取验证码';
|
||||||
|
clearInterval(this.countDown);
|
||||||
|
} else {
|
||||||
|
this.login_type = 'mobile';
|
||||||
|
this.login_type_text = '账号密码';
|
||||||
|
this.login_password = '1314520';
|
||||||
|
}
|
||||||
|
},
|
||||||
// 检测是否某个输入框为空
|
// 检测是否某个输入框为空
|
||||||
checkEmpty(){
|
checkEmpty(){
|
||||||
let ifEmpty = true;
|
let ifEmpty = true;
|
||||||
|
|
@ -222,28 +241,16 @@
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 切换登录方式
|
|
||||||
switchType(){
|
|
||||||
if(this.login_type_text=="账号密码") {
|
|
||||||
this.login_type = 'account';
|
|
||||||
this.login_type_text = '验证码';
|
|
||||||
this.login_code = '';
|
|
||||||
} else {
|
|
||||||
this.login_type = 'mobile';
|
|
||||||
this.login_type_text = '账号密码';
|
|
||||||
this.login_password = '';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 前往注册页面
|
// 前往注册页面
|
||||||
goRegister(){
|
goRegister(){
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url:'/pages/register/register'
|
url:'/pages/account-related/register/register'
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// 前往找回密码页面
|
// 前往找回密码页面
|
||||||
goForget(){
|
goForget(){
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url:'/pages/forget/forget'
|
url:'/pages/account-related/forget/forget'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -108,17 +108,18 @@
|
||||||
confirm_password: this.register_qpassword, // 确认密码
|
confirm_password: this.register_qpassword, // 确认密码
|
||||||
affiliation: this.register_unitName //单位名称
|
affiliation: this.register_unitName //单位名称
|
||||||
}
|
}
|
||||||
this.$requst.post('/universal/api.login/register',params).then(res=>{
|
this.goLogin();
|
||||||
if(res.code==1) {
|
// this.$requst.post('/universal/api.login/register',params).then(res=>{
|
||||||
this.$toolAll.tools.showToast('注册成功');
|
// if(res.code==1) {
|
||||||
setTimeout(()=>{
|
// this.$toolAll.tools.showToast('注册成功');
|
||||||
// 调用前往登录页
|
// setTimeout(()=>{
|
||||||
this.goLogin();
|
// // 调用前往登录页
|
||||||
},1000)
|
// this.goLogin();
|
||||||
} else {
|
// },1000)
|
||||||
this.$toolAll.tools.showToast(res.msg);
|
// } else {
|
||||||
}
|
// this.$toolAll.tools.showToast(res.msg);
|
||||||
})
|
// }
|
||||||
|
// })
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 获取验证码
|
// 获取验证码
|
||||||
|
|
@ -140,7 +141,7 @@
|
||||||
}
|
}
|
||||||
},1000)
|
},1000)
|
||||||
// 调用获取短信事件
|
// 调用获取短信事件
|
||||||
this.getMessage(this.register_phone);
|
// this.getMessage(this.register_phone);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -157,41 +158,23 @@
|
||||||
},
|
},
|
||||||
// 检测是否某个输入框为空
|
// 检测是否某个输入框为空
|
||||||
checkEmpty(){
|
checkEmpty(){
|
||||||
let ifEmpty = true;
|
let ifEmpty = false;
|
||||||
if(this.$toolAll.tools.isPhone(this.register_phone)) {
|
if(this.$toolAll.tools.isPhone(this.register_phone)) {
|
||||||
this.$toolAll.tools.showToast('手机号格式不正确');
|
this.$toolAll.tools.showToast('手机号格式不正确');
|
||||||
ifEmpty = false;
|
} else if(!this.register_code) {
|
||||||
return;
|
|
||||||
}
|
|
||||||
if(!this.register_code) {
|
|
||||||
this.$toolAll.tools.showToast('请输入验证码');
|
this.$toolAll.tools.showToast('请输入验证码');
|
||||||
ifEmpty = false;
|
} else if(!this.register_password) {
|
||||||
return;
|
|
||||||
}
|
|
||||||
if(!this.register_password) {
|
|
||||||
this.$toolAll.tools.showToast('密码不能为空');
|
this.$toolAll.tools.showToast('密码不能为空');
|
||||||
ifEmpty = false;
|
} else if(!this.register_qpassword) {
|
||||||
return;
|
|
||||||
}
|
|
||||||
if(!this.register_qpassword) {
|
|
||||||
this.$toolAll.tools.showToast('确认密码不能为空');
|
this.$toolAll.tools.showToast('确认密码不能为空');
|
||||||
ifEmpty = false;
|
} else if(this.register_password != this.register_qpassword) {
|
||||||
return;
|
|
||||||
}
|
|
||||||
if(this.register_password != this.register_qpassword) {
|
|
||||||
this.$toolAll.tools.showToast('两次输入的密码必须相同');
|
this.$toolAll.tools.showToast('两次输入的密码必须相同');
|
||||||
ifEmpty = false;
|
} else if(!this.register_unitName) {
|
||||||
return;
|
|
||||||
}
|
|
||||||
if(!this.register_unitName) {
|
|
||||||
this.$toolAll.tools.showToast('请输入单位名称');
|
this.$toolAll.tools.showToast('请输入单位名称');
|
||||||
ifEmpty = false;
|
} else if(!this.ifAgreen) {
|
||||||
return;
|
|
||||||
}
|
|
||||||
if(!this.ifAgreen) {
|
|
||||||
this.$toolAll.tools.showToast('请勾选协议与政策');
|
this.$toolAll.tools.showToast('请勾选协议与政策');
|
||||||
ifEmpty = false;
|
} else {
|
||||||
return;
|
ifEmpty = true;
|
||||||
}
|
}
|
||||||
return ifEmpty;
|
return ifEmpty;
|
||||||
},
|
},
|
||||||
|
|
@ -244,7 +227,6 @@
|
||||||
switch (index){
|
switch (index){
|
||||||
case 0:
|
case 0:
|
||||||
this.register_phone = '';
|
this.register_phone = '';
|
||||||
console.log(this.register_phone);
|
|
||||||
break;
|
break;
|
||||||
case 1:
|
case 1:
|
||||||
this.register_code = '';
|
this.register_code = '';
|
||||||
|
|
@ -23,7 +23,7 @@
|
||||||
}
|
}
|
||||||
setTimeout(()=>{
|
setTimeout(()=>{
|
||||||
uni.reLaunch({
|
uni.reLaunch({
|
||||||
url:'/pages/login/login'
|
url:'/pages/account-related/login/login'
|
||||||
})
|
})
|
||||||
},3000)
|
},3000)
|
||||||
// #endif
|
// #endif
|
||||||
|
|
@ -33,7 +33,7 @@
|
||||||
}
|
}
|
||||||
setTimeout(()=>{
|
setTimeout(()=>{
|
||||||
uni.reLaunch({
|
uni.reLaunch({
|
||||||
url:'/pages/login/login'
|
url:'/pages/account-related/login/login'
|
||||||
})
|
})
|
||||||
},3000)
|
},3000)
|
||||||
// #endif
|
// #endif
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,77 @@
|
||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
|
<swiperTabSlide @scrollBottom="scrollBottomEv" :list="dataList" :ifloading="ifloading"></swiperTabSlide>
|
||||||
<!-- 底部tab -->
|
<!-- 底部tab -->
|
||||||
<foot-tab :current="3"></foot-tab>
|
<foot-tab :current="3"></foot-tab>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import swiperTabSlide from '@/components/swiper-tab/swiper-tab-slide.vue';
|
||||||
// 底部组件
|
// 底部组件
|
||||||
import footTabOne from '@/components/foot-tabs/foot-tab-one.vue';
|
import footTabOne from '@/components/foot-tabs/foot-tab-one.vue';
|
||||||
export default {
|
export default {
|
||||||
components:{
|
components:{
|
||||||
'foot-tab' :footTabOne
|
'foot-tab' :footTabOne,
|
||||||
|
swiperTabSlide
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
dataList:[
|
||||||
|
[
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
],
|
||||||
|
],
|
||||||
|
ifloading:false,
|
||||||
|
flag:true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
scrollBottomEv(e){
|
||||||
|
if(this.flag){
|
||||||
|
this.flag = false;
|
||||||
|
this.ifloading = true;
|
||||||
|
setTimeout(()=>{
|
||||||
|
for (let i = 0; i < 2; i++) {
|
||||||
|
let obj = {
|
||||||
|
title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99
|
||||||
|
}
|
||||||
|
this.dataList[e].push(obj);
|
||||||
|
}
|
||||||
|
this.ifloading = false;
|
||||||
|
this.flag = true;
|
||||||
|
},1000)
|
||||||
|
// 重新渲染组件
|
||||||
|
this.$forceUpdate();
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,38 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="pad-x50">
|
<view class="pad-x50">
|
||||||
<status-nav-slot>
|
|
||||||
<view slot="leftContent" @tap="goMessage" style="width: 70px;">
|
|
||||||
<view class="home-message-box posir disac">
|
|
||||||
<image src="/static/public/icon-home-message.png" mode=""></image>
|
|
||||||
<view v-if="messageNumber!=0">{{messageNumber}}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view slot="centerContent" class="disjcac">
|
|
||||||
<image style="width: 156rpx;height: 38rpx;" src="/static/public/icom-home-logo.png" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
<!-- #ifdef APP-PLUS -->
|
|
||||||
<view slot="rightContent" class="disac" @tap="callEv">
|
|
||||||
<image class="mar-y10" style="width: 26rpx;height: 26rpx;" src="/static/public/icon-home-phone.png" mode=""></image>
|
|
||||||
<view class="fon26 col3">拨打电话</view>
|
|
||||||
</view>
|
|
||||||
<!-- #endif -->
|
|
||||||
<!-- #ifdef H5 -->
|
|
||||||
<view slot="rightContent" class="disac" @tap="callEv">
|
|
||||||
<image class="mar-y10" style="width: 26rpx;height: 26rpx;" src="/static/public/icon-home-phone.png" mode=""></image>
|
|
||||||
<view class="fon26 col3">拨打电话</view>
|
|
||||||
</view>
|
|
||||||
<!-- #endif -->
|
|
||||||
<!-- #ifdef MP-WEIXIN -->
|
|
||||||
<view slot="rightContent" @tap="goMessage" style="width: 70px;"></view>
|
|
||||||
<!-- #endif -->
|
|
||||||
</status-nav-slot>
|
|
||||||
<!-- banner图 -->
|
|
||||||
<container-subgroup-two>
|
<container-subgroup-two>
|
||||||
<view slot="content" style="margin: 0 -30rpx;">
|
<view slot="content" style="margin: 0 -30rpx;">
|
||||||
<image class="width100" src="/static/public/icon-home-banner.png" mode="widthFix"></image>
|
<image class="width100" src="/static/public/icon-home-banner.png" mode="widthFix" lazy-load></image>
|
||||||
<!-- 解决方案 -->
|
<!-- 解决方案 -->
|
||||||
<view class="home-solution mar-x20 pad30">
|
<view class="home-solution mar-x20 pad30">
|
||||||
<view class="disjbac" @tap="goPlant(0)">
|
<view class="disjbac">
|
||||||
<view>
|
<view>
|
||||||
<view class="fon30 bold" style="color: #00a2e9;">畅想智能-场景化设计</view>
|
<view class="fon30 bold" style="color: #00a2e9;">畅想智能-场景化设计</view>
|
||||||
<view class="fon34 bold col3 mar-s10">解决方案<text class="col9 mar-z10">Solution</text></view>
|
<view class="fon34 bold col3 mar-s10">解决方案<text class="col9 mar-z10">Solution</text></view>
|
||||||
|
|
@ -40,14 +13,14 @@
|
||||||
<image style="width: 50rpx;height: 50rpx;" src="/static/public/icon-home-solution.png" mode=""></image>
|
<image style="width: 50rpx;height: 50rpx;" src="/static/public/icon-home-solution.png" mode=""></image>
|
||||||
</view>
|
</view>
|
||||||
<view class="mar-s30">
|
<view class="mar-s30">
|
||||||
<scroll-view scroll-x>
|
<scroll-img></scroll-img>
|
||||||
<view :class="solutionList.length == 4 ? 'disjbac' : 'disac'">
|
</view>
|
||||||
<view @tap="goDetail(0,item.id)" class="posir flexs" v-for="(item,index) in solutionList" :key="index" style="width: 23%;height: 214rpx;" :style="{marginRight: solutionList.length != 4 ? '20rpx' : ''}">
|
<view class="mar-s30">
|
||||||
<image style="width: 100%;height: 214rpx;" class="radius10 " :src="item.imgsrc" mode="widthFix"></image>
|
<scroll-text @changeEv="switchType"></scroll-text>
|
||||||
<view class="posia solution-title clips1">{{item.title}}</view>
|
<scroll-text-capsule></scroll-text-capsule>
|
||||||
</view>
|
<swiper-tab id="tab" :list="dataList" v-model="current" @changeEv="clickTab"></swiper-tab>
|
||||||
</view>
|
<scroll-text-slide></scroll-text-slide>
|
||||||
</scroll-view>
|
<img-one @chooseEv="chooseEv"></img-one>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -58,25 +31,39 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import statusNavSlot from '@/components/status-navs/status-nav-slot.vue';
|
import scrollImg from '@/components/scroll-views/scroll-img.vue';
|
||||||
// 公告
|
import scrollText from '@/components/scroll-views/scroll-text.vue';
|
||||||
|
import scrollTextCapsule from '@/components/scroll-views/scroll-text-capsule.vue';
|
||||||
|
import swiperTab from '@/components/swiper-tab/swiper-tab.vue';
|
||||||
|
import scrollTextSlide from '@/components/scroll-views/scroll-text-slide.vue';
|
||||||
import footTabOne from '@/components/foot-tabs/foot-tab-one.vue';
|
import footTabOne from '@/components/foot-tabs/foot-tab-one.vue';
|
||||||
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
|
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
|
||||||
|
import imgOne from '@/components/choose-imgs/img-one.vue';
|
||||||
export default {
|
export default {
|
||||||
components:{
|
components:{
|
||||||
statusNavSlot,
|
|
||||||
'foot-tab' :footTabOne,
|
'foot-tab' :footTabOne,
|
||||||
containerSubgroupTwo
|
containerSubgroupTwo,
|
||||||
|
scrollImg,
|
||||||
|
scrollText,
|
||||||
|
scrollTextCapsule,
|
||||||
|
swiperTab,
|
||||||
|
scrollTextSlide,
|
||||||
|
imgOne
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
// 解决方案
|
current:0,
|
||||||
solutionList:[
|
dataList:[
|
||||||
{imgsrc:'/static/deleteImg/flying-img01.png',title:'控制室解决方案'},
|
{title:'标题一'},
|
||||||
{imgsrc:'/static/deleteImg/flying-img02.png',title:'户外屏解决方案'},
|
{title:'标题二标题二'},
|
||||||
{imgsrc:'/static/deleteImg/flying-img03.png',title:'会议室解决方案'},
|
{title:'标题三'},
|
||||||
{imgsrc:'/static/deleteImg/flying-img04.png',title:'实体店解决方案'},
|
{title:'标题四'},
|
||||||
],
|
{title:'标题五'},
|
||||||
|
{title:'标题六标题六标题六'},
|
||||||
|
{title:'标题七'},
|
||||||
|
{title:'标题八'},
|
||||||
|
{title:'标题九'},
|
||||||
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
|
|
@ -84,7 +71,17 @@
|
||||||
this.$toolAll.tools.obtainUrl();
|
this.$toolAll.tools.obtainUrl();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
switchType(id){
|
||||||
|
console.log(id);
|
||||||
|
},
|
||||||
|
// tab点击事件
|
||||||
|
clickTab(index){
|
||||||
|
this.current = index;
|
||||||
|
},
|
||||||
|
// 图片选择事件
|
||||||
|
chooseEv(arr) {
|
||||||
|
console.log(arr,'图片数组');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,25 @@
|
||||||
<template>
|
<template>
|
||||||
<view>
|
<view class="pad-x160">
|
||||||
<notice-one direction="row"></notice-one>
|
<notice-one direction="row"></notice-one>
|
||||||
|
<swiper-adaptive ref="tabsSwiper" :tabs="tabsData" @currentEv="obtainCurrent">
|
||||||
|
<template v-slot="{listData}">
|
||||||
|
<view class="disjbac mar-zy20 pad-sx20 bbot" v-for="(item,index) in listData" :key="index">
|
||||||
|
<view class="posir">
|
||||||
|
<image class="flexs mar-y20 radius10" src="/static/del/500478055.png" mode="" style="width: 200rpx;height: 200rpx;"></image>
|
||||||
|
</view>
|
||||||
|
<view class="width100 disjb fc" style="height: 200rpx;">
|
||||||
|
<view class="line-h40">
|
||||||
|
<view class="fon30 clips2">{{item.title}}{{currentIndex}}</view>
|
||||||
|
<view class="fon24 col9 clips2">{{index}}{{item.content}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="disjbac fon26">
|
||||||
|
<view @tap="chooseImg" class="colf8 bold">￥{{item.price}}</view>
|
||||||
|
<view class="col5b">销量：{{item.salesVolume}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</swiper-adaptive>
|
||||||
<!-- 底部tab -->
|
<!-- 底部tab -->
|
||||||
<foot-tab :current="1"></foot-tab>
|
<foot-tab :current="1"></foot-tab>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -10,17 +29,79 @@
|
||||||
import noticeOne from '@/components/notices/notice-one/notice-one.vue';
|
import noticeOne from '@/components/notices/notice-one/notice-one.vue';
|
||||||
// 底部组件
|
// 底部组件
|
||||||
import footTabOne from '@/components/foot-tabs/foot-tab-one.vue';
|
import footTabOne from '@/components/foot-tabs/foot-tab-one.vue';
|
||||||
|
import swiperAdaptive from '@/components/swiper-tab/swiper-adaptive.vue';
|
||||||
export default {
|
export default {
|
||||||
components:{
|
components:{
|
||||||
'foot-tab' :footTabOne,
|
'foot-tab' :footTabOne,
|
||||||
noticeOne
|
noticeOne,
|
||||||
|
swiperAdaptive
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
tabsData: [
|
||||||
|
{
|
||||||
|
title: '标题1',
|
||||||
|
des: "描述",
|
||||||
|
data: [
|
||||||
|
{id:1,title:'2022年oppo最新款2022年oppo最新款2022年oppo最新款',content:'描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述',price:199,salesVolume:99},
|
||||||
|
{id:2,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
||||||
|
{id:3,title:'2022年oppo最新款',content:'描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述',price:199,salesVolume:99},
|
||||||
|
{id:4,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
||||||
|
{id:5,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
||||||
|
{id:5,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
||||||
|
{id:5,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
title: '标题2',
|
||||||
|
des: "描述",
|
||||||
|
data: [
|
||||||
|
{id:1,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
||||||
|
{id:2,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
||||||
|
{id:3,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
||||||
|
{id:4,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
||||||
|
{id:5,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
title: '标题3',
|
||||||
|
des: "描述",
|
||||||
|
data: [
|
||||||
|
{id:1,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
||||||
|
{id:2,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
||||||
|
{id:3,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
||||||
|
{id:4,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
||||||
|
{id:5,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
||||||
|
{id:1,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
||||||
|
{id:2,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
||||||
|
{id:3,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
||||||
|
{id:4,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
||||||
|
{id:5,title:'2022年oppo最新款',content:'描述描述描述描述描述描述',price:199,salesVolume:99},
|
||||||
|
]
|
||||||
|
}],
|
||||||
|
currentIndex:0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
onReachBottom() {
|
||||||
|
// if(this.currentIndex==0) {
|
||||||
|
for (let i = 0; i < 2; i++) {
|
||||||
|
let obj = {
|
||||||
|
id:1,
|
||||||
|
title:'2022年oppo最新款',
|
||||||
|
content:'描述描述描述描述描述描述',
|
||||||
|
price:199,
|
||||||
|
salesVolume:99,
|
||||||
|
}
|
||||||
|
this.tabsData[this.currentIndex].data.push(obj);
|
||||||
|
}
|
||||||
|
this.$forceUpdate()
|
||||||
|
this.$refs.tabsSwiper.initSwiperHeight(`.list${this.currentIndex}`)
|
||||||
|
console.log(this.tabsData[this.currentIndex].data.length);
|
||||||
|
// }
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
obtainCurrent(e){
|
||||||
|
console.log(e);
|
||||||
|
this.currentIndex = e;
|
||||||
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,205 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="pad20">
|
||||||
|
<!-- 方式一 start -->
|
||||||
|
<view class="disjbac width100 pad-sx20 bbot" @tap="openPicker">
|
||||||
|
<view>{{region}}</view>
|
||||||
|
<i class="icon icon-next col9" style="font-size: 30rpx;"></i>
|
||||||
|
</view>
|
||||||
|
<addressOne @choseVal="choseValue" :lotusAddressData="lotusAddressData"></addressOne>
|
||||||
|
<!-- 方式一 end -->
|
||||||
|
|
||||||
|
<!-- 方式二 start -->
|
||||||
|
<view class="disjbac width100 pad-sx20 bbot" @tap="chooseRegion">
|
||||||
|
<view>{{region1}}</view>
|
||||||
|
<i class="icon icon-next col9" style="font-size: 30rpx;"></i>
|
||||||
|
</view>
|
||||||
|
<!-- 方式二 end -->
|
||||||
|
|
||||||
|
<!-- 方式三 start -->
|
||||||
|
<view class="disjbac width100 pad-sx20 bbot" @tap="chooseAddress1">
|
||||||
|
<view>{{region2}}</view>
|
||||||
|
<i class="icon icon-next col9" style="font-size: 30rpx;"></i>
|
||||||
|
</view>
|
||||||
|
<!-- 方式三 end -->
|
||||||
|
|
||||||
|
<!-- 方式四 start -->
|
||||||
|
<addressThree :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
|
||||||
|
<h2>点击选择省市区</h2>
|
||||||
|
</addressThree>
|
||||||
|
<view class="disjbac width100 pad-sx20 bbot">
|
||||||
|
<view>{{regionName}}</view>
|
||||||
|
<i class="icon icon-next col9" style="font-size: 30rpx;"></i>
|
||||||
|
</view>
|
||||||
|
<!-- 方式四 end -->
|
||||||
|
|
||||||
|
<!-- 方式五 start -->
|
||||||
|
<view class="disjbac width100 pad-sx20 bbot" @tap="openAddres">
|
||||||
|
<view>默认打开地址</view>
|
||||||
|
<i class="icon icon-next col9" style="font-size: 30rpx;"></i>
|
||||||
|
</view>
|
||||||
|
<view class="disjbac width100 pad-sx20 bbot" @tap="openAddres2">
|
||||||
|
<view>自定义：根据省市区名称打开地址</view>
|
||||||
|
<i class="icon icon-next col9" style="font-size: 30rpx;"></i>
|
||||||
|
</view>
|
||||||
|
<view class="disjbac width100 pad-sx20 bbot" @tap="openAddres3">
|
||||||
|
<view>自定义：根据省市区“code”打开地址</view>
|
||||||
|
<i class="icon icon-next col9" style="font-size: 30rpx;"></i>
|
||||||
|
</view>
|
||||||
|
<textarea v-model="pickerText" cols="30" rows="10"></textarea>
|
||||||
|
<!--
|
||||||
|
mask-bg-color="rgba(0, 229, 238, 0.4)" // 自定义遮罩层背景颜色
|
||||||
|
-->
|
||||||
|
<addressFour ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></addressFour>
|
||||||
|
<!-- 方式五 end -->
|
||||||
|
</view>
|
||||||
|
<addressTwo @conceal="conceal" v-if="popup"></addressTwo>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import addressOne from '@/components/choose-address/address-one/address-one.vue';
|
||||||
|
import addressTwo from '@/components/choose-address/address-two/address-two.vue';
|
||||||
|
import addressThree from '@/components/choose-address/address-three/address-three.vue';
|
||||||
|
import addressFour from '@/components/choose-address/address-four/address-four.vue';
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
addressOne,
|
||||||
|
addressTwo,
|
||||||
|
addressThree,
|
||||||
|
addressFour
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
lotusAddressData:{
|
||||||
|
visible:false,
|
||||||
|
provinceName:'',
|
||||||
|
cityName:'',
|
||||||
|
townName:'',
|
||||||
|
},
|
||||||
|
region:'四川省成都市成华区双店路B口',
|
||||||
|
newProvice:'',
|
||||||
|
newCity:'',
|
||||||
|
newDistrict:'',
|
||||||
|
region1:'四川省成都市成华区双店路B口',
|
||||||
|
region2:'请选择地址',
|
||||||
|
popup:false,
|
||||||
|
region3:'请选择地址',
|
||||||
|
region4:[],
|
||||||
|
defaultRegion:['广东省','广州市','番禺区'],
|
||||||
|
defaultRegionCode:'440113',
|
||||||
|
cityPickerValueDefault: [0, 0, 1],
|
||||||
|
pickerText: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getDistrict();
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
regionName(){
|
||||||
|
// 转为字符串
|
||||||
|
return this.region4.map(item=>item.name).join(' ')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 选择地区
|
||||||
|
chooseRegion(){
|
||||||
|
uni.getLocation({
|
||||||
|
type: 'gcj02', //返回可以用于uni.openLocation的经纬度
|
||||||
|
success: (res)=> {
|
||||||
|
const latitude = res.latitude;
|
||||||
|
const longitude = res.longitude;
|
||||||
|
console.log(latitude,longitude,78);
|
||||||
|
uni.chooseLocation({
|
||||||
|
success: (res)=> {
|
||||||
|
console.log(res,81);
|
||||||
|
console.log('位置名称：' + res.name);
|
||||||
|
console.log('详细地址：' + res.address);
|
||||||
|
console.log('纬度：' + res.latitude);
|
||||||
|
console.log('经度：' + res.longitude);
|
||||||
|
this.region1 = `${res.address || ''}${res.name}`
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getDistrict() {
|
||||||
|
uni.getLocation({
|
||||||
|
success:(res)=> {
|
||||||
|
uni.request({
|
||||||
|
url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=B2ABZ-SIDKS-WD2O3-6CJ2U-CDZOT-U3FKF`,
|
||||||
|
header: {
|
||||||
|
'Content-Type':'application/json'
|
||||||
|
},
|
||||||
|
success:(res)=> {
|
||||||
|
console.log('地址数据：',res)
|
||||||
|
this.newProvice = res.data.result.address_component.province
|
||||||
|
this.newCity = res.data.result.address_component.city
|
||||||
|
this.newDistrict = res.data.result.address_component.district
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//打开picker
|
||||||
|
openPicker() {
|
||||||
|
this.lotusAddressData.visible = true;
|
||||||
|
this.lotusAddressData.provinceName = this.newProvice;
|
||||||
|
this.lotusAddressData.cityName = this.newCity;
|
||||||
|
this.lotusAddressData.townName = this.newDistrict;
|
||||||
|
},
|
||||||
|
//回传已选的省市区的值
|
||||||
|
choseValue(res){
|
||||||
|
//res数据源包括已选省市区与省市区code
|
||||||
|
// console.log(res);
|
||||||
|
this.lotusAddressData.visible = res.visible;//visible为显示与关闭组件标识true显示false隐藏
|
||||||
|
//res.isChose = 1省市区已选 res.isChose = 0;未选
|
||||||
|
if(res.isChose){
|
||||||
|
this.lotusAddressData.provinceName = res.province;//省
|
||||||
|
this.lotusAddressData.cityName = res.city;//市
|
||||||
|
this.lotusAddressData.townName = res.town;//区
|
||||||
|
this.region = `${res.province}${res.city}${res.town}`; //region为已选的省市区的值
|
||||||
|
}
|
||||||
|
},
|
||||||
|
chooseAddress1(){
|
||||||
|
this.popup = true;
|
||||||
|
},
|
||||||
|
conceal(param) {
|
||||||
|
// 获取到传过来的 省 市 区 县数据
|
||||||
|
console.log(param);
|
||||||
|
this.region2 = `${param.province}${param.city}${param.area}${param.street}`
|
||||||
|
// 选择完毕后隐藏
|
||||||
|
this.popup = false;
|
||||||
|
},
|
||||||
|
// 获取选择的地区
|
||||||
|
handleGetRegion(region){
|
||||||
|
this.region4 = region
|
||||||
|
},
|
||||||
|
openAddres() {
|
||||||
|
this.cityPickerValueDefault = [0,0,1]
|
||||||
|
this.$refs.simpleAddress.open();
|
||||||
|
},
|
||||||
|
openAddres2() {
|
||||||
|
// 根据 label 获取
|
||||||
|
var index = this.$refs.simpleAddress.queryIndex(['湖北省', '随州市', '曾都区'], 'label');
|
||||||
|
console.log(index);
|
||||||
|
this.cityPickerValueDefault = index.index;
|
||||||
|
this.$refs.simpleAddress.open();
|
||||||
|
},
|
||||||
|
openAddres3() {
|
||||||
|
// 根据value 获取
|
||||||
|
var index = this.$refs.simpleAddress.queryIndex([13, 1302, 130203], 'value');
|
||||||
|
console.log(index);
|
||||||
|
this.cityPickerValueDefault = index.index;
|
||||||
|
this.$refs.simpleAddress.open();
|
||||||
|
},
|
||||||
|
onConfirm(e) {
|
||||||
|
this.pickerText = JSON.stringify(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -43,16 +43,16 @@
|
||||||
</container-subgroup>
|
</container-subgroup>
|
||||||
<!-- 提交保存 -->
|
<!-- 提交保存 -->
|
||||||
<view class="person-btn" @tap="submitData" style="margin-top: -60rpx;">提交保存</view>
|
<view class="person-btn" @tap="submitData" style="margin-top: -60rpx;">提交保存</view>
|
||||||
<city @choseVal="choseValue" :lotusAddressData="lotusAddressData"></city>
|
<addressOne @choseVal="choseValue" :lotusAddressData="lotusAddressData"></addressOne>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import city from '@/components/city/city.vue';
|
import addressOne from '@/components/choose-address/address-one/address-one.vue';
|
||||||
// import city from '@/components/city/city.js';
|
// import city from '@/components/city/city.js';
|
||||||
export default {
|
export default {
|
||||||
components:{
|
components:{
|
||||||
city
|
addressOne
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
|
|
@ -72,16 +72,16 @@ export default {
|
||||||
},
|
},
|
||||||
// Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性），对 state 的加工，是派生出来的数据。 可以在多组件中共享 getter 函数，这样做还可以提高运行效率。
|
// Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性），对 state 的加工，是派生出来的数据。 可以在多组件中共享 getter 函数，这样做还可以提高运行效率。
|
||||||
getters: {
|
getters: {
|
||||||
doneTodos: state => {
|
// doneTodos: state => {
|
||||||
return state.todos.filter(todo => todo.done)
|
// return state.todos.filter(todo => todo.done)
|
||||||
},
|
// },
|
||||||
doneTodosCount: (state, getters) => {
|
// doneTodosCount: (state, getters) => {
|
||||||
//state ：可以访问数据
|
// //state ：可以访问数据
|
||||||
//getters：访问其他函数，等同于 store.getters
|
// //getters：访问其他函数，等同于 store.getters
|
||||||
return getters.doneTodos.length
|
// return getters.doneTodos.length
|
||||||
},
|
// },
|
||||||
getTodoById: (state) => (id) => {
|
// getTodoById: (state) => (id) => {
|
||||||
return state.todos.find(todo => todo.id === id)
|
// return state.todos.find(todo => todo.id === id)
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue