chen
/
template-project
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

新增地址组件、新增滑动wiper-tab组件、新增图片选择组件

master
吃肉的饺子 2022-04-10 21:59:38 +08:00
parent 62beb8931a
commit 631399f32c
42 changed files with 30606 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
App.vue
View File

@ -41,7 +41,7 @@
@import url("./commons/base.css");
/* 项目基础样式 end */
/* 项目页面样式 start */
@import url("./commons/flying-monkey.css");
@import url("./commons/style.css");
/* 项目页面样式 end */
/* 动画样式 start */

1
commons/base.css
View File

@ -48,6 +48,7 @@
.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;}
.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;}

26
commons/icon-font.css
View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 3180711 */
src: url('https://at.alicdn.com/t/font_3180711_7fx7wl7itar.woff2?t=1647479558213') format('woff2'),
url('https://at.alicdn.com/t/font_3180711_7fx7wl7itar.woff?t=1647479558213') format('woff'),
url('https://at.alicdn.com/t/font_3180711_7fx7wl7itar.ttf?t=1647479558213') format('truetype');
src: url('https://at.alicdn.com/t/font_3180711_mjqzq7x5vu.woff2?t=1649586677823') format('woff2'),
url('https://at.alicdn.com/t/font_3180711_mjqzq7x5vu.woff?t=1649586677823') format('woff'),
url('https://at.alicdn.com/t/font_3180711_mjqzq7x5vu.ttf?t=1649586677823') format('truetype');
}
.icon {
@ -13,6 +13,26 @@
-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 {
content: "\e769";
}

0
commons/flying-monkey.css → commons/style.css
View File

420
components/choose-address/address-four/address-four.vue Normal file
View File

@ -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>

12548
components/choose-address/address-four/city-data/area.js Normal file
View File

File diff suppressed because it is too large Load Diff

1507
components/choose-address/address-four/city-data/city.js Normal file
View File

File diff suppressed because it is too large Load Diff

143
components/choose-address/address-four/city-data/province.js Normal file
View File

@ -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;

0
components/city/city.css → components/choose-address/address-one/address-one.css
View File

0
components/city/city.js → components/choose-address/address-one/address-one.js
View File

4
components/city/city.vue → components/choose-address/address-one/address-one.vue
View File

@ -27,7 +27,7 @@
</template>
<script>
import {lotusAddressJson} from "./city.js";
import {lotusAddressJson} from "./address-one.js";
export default {
props:['lotusAddressData'],
data() {
@ -229,5 +229,5 @@
</script>
<style lang="less">
@import "./city.css";
@import "./address-one.css";
</style>

20
components/choose-address/address-special/address-special.vue Normal file
View File

@ -0,0 +1,20 @@
<template>
<view>
</view>
</template>
<script>
export default {
name:"address-special",
data() {
return {
};
}
}
</script>
<style>
</style>

136
components/choose-address/address-three/address-three.vue Normal file
View File

@ -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&&region.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>

1
components/choose-address/address-three/regions.json Normal file
View File

File diff suppressed because one or more lines are too long

217
components/choose-address/address-two/address-two.vue Normal file
View File

@ -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>

12545
components/choose-address/address-two/city-data/area.js Normal file
View File

File diff suppressed because it is too large Load Diff

1503
components/choose-address/address-two/city-data/city.js Normal file
View File

File diff suppressed because it is too large Load Diff

139
components/choose-address/address-two/city-data/province.js Normal file
View File

@ -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;

3
components/choose-address/address-two/city-data/streets.js Normal file
View File

File diff suppressed because one or more lines are too long

185
components/choose-imgs/img-one.vue Normal file
View File

@ -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>

1
components/containers/container-subgroup-two.vue
View File

@ -2,7 +2,6 @@
<view>
<view class="pad-zy30" :style="{paddingBottom: '70px'}">
<slot name="content"></slot>
</view>
</view>
</template>

48
components/scroll-views/scroll-img.vue Normal file
View File

@ -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>

96
components/scroll-views/scroll-text-capsule.vue Normal file
View File

@ -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>

257
components/scroll-views/scroll-text-slide.vue Normal file
View File

@ -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>

44
components/scroll-views/scroll-text.vue Normal file
View File

@ -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>

124
components/swiper-tab/swiper-adaptive.vue Normal file
View File

@ -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>

108
components/swiper-tab/swiper-tab-slide.vue Normal file
View File

@ -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>

7
components/swiper-tab/swiper-tab.vue
View File

@ -8,8 +8,6 @@
:style="{color: (currentIndex === index ? `${itemColor}`: '')}" id="tab_item"
@click="select(item, index)">
<!-- 标题 -->
<!-- <view><slot name="title" :title="item.title"></slot></view> -->
<!-- 标题 -->
<view v-if="!showTitleSlot">{{item.title}}</view>
</view>
</view>
@ -81,7 +79,7 @@
},
methods: {
select(item, index) {
this.$emit('input', index)
this.$emit('changeEv', index)
},
setTabList() {
this.$nextTick(() => {
@ -143,7 +141,8 @@
white-space: nowrap;
&__item {
// flex: 1;
width: 20%;
// width: 20%;
padding: 0 20rpx;
flex-shrink: 0;
text-align: center;
line-height: 90rpx;

17
jsFile/tools.js
View File

@ -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
View File

@ -11,13 +11,35 @@
}
}
}, {
"path": "pages/login/login",
"path": "pages/account-related/login/login",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom" ,//禁用原生导航栏，微信小程序可用
"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",
"style": {
"navigationBarTitleText": "",
@ -37,7 +59,7 @@
"navigationStyle": "custom" //禁用原生导航栏，微信小程序可用
}
}, {
"path": "pages/login/agreement",
"path": "pages/account-related/login/agreement",
"style": {
"navigationBarTitleText": ""
}
@ -54,26 +76,6 @@
"navigationBarTitleText": "意见反馈",
"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包
@ -84,7 +86,16 @@
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}]
} ,{
"path" : "my-address/my-address",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
]
},
{ //B包
"root": "pagesB",

19
pages/forget/forget.vue → pages/account-related/forget/forget.vue
View File

@ -74,14 +74,15 @@
confirm_password: this.forget_qpassword, // 确认密码
affiliation: this.forget_unitname ,//单位名称
}
this.$requst.post('/universal/api.login/password_find',params).then(res=>{
if(res.code==1) {
this.$toolAll.tools.showToast('找回成功');
setTimeout(()=>{uni.navigateBack({delta:1})},1000)
} else {
this.$toolAll.tools.showToast(res.msg);
}
})
uni.navigateBack({delta:1});
// this.$requst.post('/universal/api.login/password_find',params).then(res=>{
// if(res.code==1) {
// this.$toolAll.tools.showToast('找回成功');
// setTimeout(()=>{uni.navigateBack({delta:1})},1000)
// } else {
// this.$toolAll.tools.showToast(res.msg);
// }
// })
}
},
// 获取验证码
@ -103,7 +104,7 @@
}
},1000)
// 调用获取短信事件
this.getMessage(this.forget_phone);
// this.getMessage(this.forget_phone);
}
}
},

0
pages/login/agreement.vue → pages/account-related/login/agreement.vue
View File

75
pages/login/login.vue → pages/account-related/login/login.vue
View File

@ -62,13 +62,13 @@
return {
windowHeight: uni.getSystemInfoSync().windowHeight,
ifPhone:false,
login_phone:'',//登录手机号
login_phone:'18081028996',//登录手机号
ifCode:false,
login_code:'',//登录验证码
login_code:'131499',//登录验证码
ifunitName:false,
login_unitName:'',//登录单位名称
login_unitName:'大向天诚',//登录单位名称
ifPassword:false,
login_password:'',//登录密码
login_password:'1314520',//登录密码
codeText:'获取验证码' ,// 获取验证码按钮文字
flagCode:true ,// 允许点击获取验证码
countDown:null,
@ -91,22 +91,25 @@
username: this.login_type == 'account' ? this.login_phone : '', //账号，login_type 为 account 时必填
affiliation: this.login_unitName // 单位名称
}
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);
}
uni.reLaunch({
url:'/pages/tabbar/pagehome/pagehome'
})
// 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;
}
},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(){
let ifEmpty = true;
@ -222,28 +241,16 @@
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(){
uni.navigateTo({
url:'/pages/register/register'
url:'/pages/account-related/register/register'
})
},
// 前往找回密码页面
goForget(){
uni.navigateTo({
url:'/pages/forget/forget'
url:'/pages/account-related/forget/forget'
})
}
}

62
pages/register/register.vue → pages/account-related/register/register.vue
View File

@ -108,17 +108,18 @@
confirm_password: this.register_qpassword, // 确认密码
affiliation: this.register_unitName //单位名称
}
this.$requst.post('/universal/api.login/register',params).then(res=>{
if(res.code==1) {
this.$toolAll.tools.showToast('注册成功');
setTimeout(()=>{
// 调用前往登录页
this.goLogin();
},1000)
} else {
this.$toolAll.tools.showToast(res.msg);
}
})
this.goLogin();
// this.$requst.post('/universal/api.login/register',params).then(res=>{
// if(res.code==1) {
// this.$toolAll.tools.showToast('注册成功');
// setTimeout(()=>{
// // 调用前往登录页
// this.goLogin();
// },1000)
// } else {
// this.$toolAll.tools.showToast(res.msg);
// }
// })
}
},
// 获取验证码
@ -140,7 +141,7 @@
}
},1000)
// 调用获取短信事件
this.getMessage(this.register_phone);
// this.getMessage(this.register_phone);
}
}
},
@ -157,41 +158,23 @@
},
// 检测是否某个输入框为空
checkEmpty(){
let ifEmpty = true;
let ifEmpty = false;
if(this.$toolAll.tools.isPhone(this.register_phone)) {
this.$toolAll.tools.showToast('手机号格式不正确');
ifEmpty = false;
return;
}
if(!this.register_code) {
} else if(!this.register_code) {
this.$toolAll.tools.showToast('请输入验证码');
ifEmpty = false;
return;
}
if(!this.register_password) {
} else if(!this.register_password) {
this.$toolAll.tools.showToast('密码不能为空');
ifEmpty = false;
return;
}
if(!this.register_qpassword) {
} else if(!this.register_qpassword) {
this.$toolAll.tools.showToast('确认密码不能为空');
ifEmpty = false;
return;
}
if(this.register_password != this.register_qpassword) {
} else if(this.register_password != this.register_qpassword) {
this.$toolAll.tools.showToast('两次输入的密码必须相同');
ifEmpty = false;
return;
}
if(!this.register_unitName) {
} else if(!this.register_unitName) {
this.$toolAll.tools.showToast('请输入单位名称');
ifEmpty = false;
return;
}
if(!this.ifAgreen) {
} else if(!this.ifAgreen) {
this.$toolAll.tools.showToast('请勾选协议与政策');
ifEmpty = false;
return;
} else {
ifEmpty = true;
}
return ifEmpty;
},
@ -244,7 +227,6 @@
switch (index){
case 0:
this.register_phone = '';
console.log(this.register_phone);
break;
case 1:
this.register_code = '';

4
pages/guide-page/guide-page.vue
View File

@ -23,7 +23,7 @@
}
setTimeout(()=>{
uni.reLaunch({
url:'/pages/login/login'
url:'/pages/account-related/login/login'
})
},3000)
// #endif
@ -33,7 +33,7 @@
}
setTimeout(()=>{
uni.reLaunch({
url:'/pages/login/login'
url:'/pages/account-related/login/login'
})
},3000)
// #endif

59
pages/tabbar/feedback/feedback.vue
View File

@ -1,24 +1,77 @@
<template>
<view>
<swiperTabSlide @scrollBottom="scrollBottomEv" :list="dataList" :ifloading="ifloading"></swiperTabSlide>
<!-- 底部tab -->
<foot-tab :current="3"></foot-tab>
</view>
</template>
<script>
import swiperTabSlide from '@/components/swiper-tab/swiper-tab-slide.vue';
// 底部组件
import footTabOne from '@/components/foot-tabs/foot-tab-one.vue';
export default {
components:{
'foot-tab' :footTabOne
'foot-tab' :footTabOne,
swiperTabSlide
},
data() {
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: {
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>

95
pages/tabbar/pagehome/pagehome.vue
View File

@ -1,38 +1,11 @@
<template>
<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>
<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="disjbac" @tap="goPlant(0)">
<view class="disjbac">
<view>
<view class="fon30 bold" style="color: #00a2e9;">畅想智能-场景化设计</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>
</view>
<view class="mar-s30">
<scroll-view scroll-x>
<view :class="solutionList.length == 4 ? 'disjbac' : 'disac'">
<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' : ''}">
<image style="width: 100%;height: 214rpx;" class="radius10 " :src="item.imgsrc" mode="widthFix"></image>
<view class="posia solution-title clips1">{{item.title}}</view>
</view>
</view>
</scroll-view>
<scroll-img></scroll-img>
</view>
<view class="mar-s30">
<scroll-text @changeEv="switchType"></scroll-text>
<scroll-text-capsule></scroll-text-capsule>
<swiper-tab id="tab" :list="dataList" v-model="current" @changeEv="clickTab"></swiper-tab>
<scroll-text-slide></scroll-text-slide>
<img-one @chooseEv="chooseEv"></img-one>
</view>
</view>
</view>
@ -58,25 +31,39 @@
</template>
<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 containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
import imgOne from '@/components/choose-imgs/img-one.vue';
export default {
components:{
statusNavSlot,
'foot-tab' :footTabOne,
containerSubgroupTwo
containerSubgroupTwo,
scrollImg,
scrollText,
scrollTextCapsule,
swiperTab,
scrollTextSlide,
imgOne
},
data() {
return {
// 解决方案
solutionList:[
{imgsrc:'/static/deleteImg/flying-img01.png',title:'控制室解决方案'},
{imgsrc:'/static/deleteImg/flying-img02.png',title:'户外屏解决方案'},
{imgsrc:'/static/deleteImg/flying-img03.png',title:'会议室解决方案'},
{imgsrc:'/static/deleteImg/flying-img04.png',title:'实体店解决方案'},
],
current:0,
dataList:[
{title:'标题一'},
{title:'标题二标题二'},
{title:'标题三'},
{title:'标题四'},
{title:'标题五'},
{title:'标题六标题六标题六'},
{title:'标题七'},
{title:'标题八'},
{title:'标题九'},
]
}
},
onLoad() {
@ -84,7 +71,17 @@
this.$toolAll.tools.obtainUrl();
},
methods: {
switchType(id){
console.log(id);
},
// tab点击事件
clickTab(index){
this.current = index;
},
// 图片选择事件
chooseEv(arr) {
console.log(arr,'图片数组');
}
}
}
</script>

87
pages/tabbar/project-list/project-list.vue
View File

@ -1,6 +1,25 @@
<template>
<view>
<view class="pad-x160">
<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 -->
<foot-tab :current="1"></foot-tab>
</view>
@ -10,17 +29,79 @@
import noticeOne from '@/components/notices/notice-one/notice-one.vue';
// 底部组件
import footTabOne from '@/components/foot-tabs/foot-tab-one.vue';
import swiperAdaptive from '@/components/swiper-tab/swiper-adaptive.vue';
export default {
components:{
'foot-tab' :footTabOne,
noticeOne
noticeOne,
swiperAdaptive
},
data() {
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: {
obtainCurrent(e){
console.log(e);
this.currentIndex = e;
},
}
}

205
pagesA/my-address/my-address.vue Normal file
View File

@ -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>

6
pagesB/service-range/service-range.vue
View File

@ -43,16 +43,16 @@
</container-subgroup>
<!-- 提交保存 -->
<view class="person-btn" @tap="submitData" style="margin-top: -60rpx;">提交保存</view>
<city @choseVal="choseValue" :lotusAddressData="lotusAddressData"></city>
<addressOne @choseVal="choseValue" :lotusAddressData="lotusAddressData"></addressOne>
</view>
</template>
<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';
export default {
components:{
city
addressOne
},
data() {
return {

BIN
static/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

22
store/modules/moduleB.js
View File

@ -72,16 +72,16 @@ export default {
},
// Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性），对 state 的加工，是派生出来的数据。 可以在多组件中共享 getter 函数，这样做还可以提高运行效率。
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
},
doneTodosCount: (state, getters) => {
//state ：可以访问数据
//getters：访问其他函数，等同于 store.getters
return getters.doneTodos.length
},
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
// doneTodos: state => {
// return state.todos.filter(todo => todo.done)
// },
// doneTodosCount: (state, getters) => {
// //state ：可以访问数据
// //getters：访问其他函数，等同于 store.getters
// return getters.doneTodos.length
// },
// getTodoById: (state) => (id) => {
// return state.todos.find(todo => todo.id === id)
// }
}
}