Commit fe2664e7 authored by Mac's avatar Mac

线下服务

parent 50c3ffe0
<template>
<div class="goods-box" :class="{ flex: goods.catPosition == 'left' }">
<view :style="{ margin: goods.catStyle == 1 ? '0px' : '10px 5px' }">
<u-tabs
v-if="goods.showCat && goods.catPosition == 'top' && goods.catList.length > 1"
name="menuName"
:list="goods.catList"
:is-scroll="true"
:active-color="mainColor"
:current="activeKey"
:show-bar="goods.catStyle == 1"
:bold="false"
:type-style="goods.catStyle"
:height="goods.catStyle == 1 ? '88' : '44'"
@change="tabChangeHandler"
></u-tabs>
</view>
<div :class="{ 'right-slider': goods.catPosition == 'top' }">
<!-- 有分类 -->
<template v-if="goods.showCat">
<template v-if="goods.catPosition == 'top'">
<!-- 一行一个 -->
<style1 v-if="goods.listStyle == 1" :goods-info="goods" :good-list="currentList"></style1>
<!-- 一行两个 -->
<style2 v-if="goods.listStyle == 2" :goods-info="goods" :good-list="currentList"></style2>
<!--列表模式-->
<style6 v-if="goods.listStyle == -1" :goods-info="goods" :good-list="currentList"></style6>
</template>
<template v-else-if="goods.catPosition == 'left'">
<!-- 左侧分类 -->
<view>
<view class="left-slider">
<sidebar
:active="activeKey"
v-if="goods.showCat && goods.catPosition == 'left'"
:list="goods.catList"
name="menuName"
:active-color="mainColor"
:border="false"
@change="tabChangeHandler"
></sidebar>
</view>
<!-- 右侧列表 -->
<view class="style4View"><style4 :goods-info="goods" :good-list="currentList"></style4></view>
</view>
</template>
</template>
<!-- 只是商品 -->
<template v-else>
<!--一行一个-->
<style1 v-if="goods.listStyle == 1" :goods-info="goods" :good-list="currentList"></style1>
<!--一行两个-->
<style2 v-if="goods.listStyle == 2" :goods-info="goods" :good-list="currentList"></style2>
<!--列表模式-->
<style6 v-if="goods.listStyle == -1" :goods-info="goods" :good-list="currentList"></style6>
</template>
</div>
</div>
</template>
<script>
import style1 from './style1';
import style2 from './style2';
import style6 from './style6';
import sidebar from '../sidebar/index';
export default {
props: ['goods'],
components: {
style1,
style2,
style6,
sidebar
},
data() {
return {
mainColor: '',
activeKey: 0,
currentList: []
};
},
created() {
this.mainColor = this.$uiConfig.mainColor;
if (this.goods.showCat) {
this.currentList = this.goods.catList[0].goodsList;
} else {
this.currentList = this.goods.list;
}
},
methods: {
tabChangeHandler(i) {
this.currentList = this.goods.catList[i].goodsList;
this.activeKey = i;
}
}
};
</script>
<style>
.style4View {
display: inline-block;
width: 100%;
padding-left: 80px;
box-sizing: border-box;
}
.goods-box {
/* margin: 20rpx 0; */
}
.goods-box .tips {
z-index: 50 !important;
}
.goods-box.flex {
display: flex;
}
.goods-box.flex .left-slider {
width: 80px;
position: absolute;
}
.goods-box.flex .right-slider {
flex: 1;
width: 1rpx;
}
.defaultz .van-sticky {
z-index: 1 !important;
}
.goods-box .van-tabs__scroll {
background: none;
}
.goods-box ._div {
width: 100%;
}
</style>
<template>
<view class='store'
:style="{
'margin-top':goods.PaddingTop+'px',
'padding-right':goods.PaddingRight+'px',
'margin-bottom':goods.PaddingBottom+'px',
'padding-left':goods.PaddingLeft+'px',
'background-color': goods.backgroundColor,
}"
@click="goUrl" >
<view class="box" :style="{'border-radius':goods.SearchFilletPX+'px'}">
<image mode="aspectFill" class="img" :style="{'border-radius':goods.SearchFilletPX+'px'}" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1597637119000_394.png" ></image>
<view class="switchstore" @click.stop="goStorelist()">
<image style="width: 8px;height: 7px;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/switchstore.png"/>
<text style="font-size: 10px;color: #111111;">切换门店</text>
</view>
<view class="content" :style="{'border-bottom-left-radius':goods.SearchFilletPX+'px','border-bottom-right-radius':goods.SearchFilletPX+'px'}">
<view class="c-t">
<view class="c-t-l">
月星环球港门店
</view>
<view class="c-t-r">
距离:20m
</view>
</view>
<view class="address">
成都市锦江区阳光新业中心2号楼2302
</view>
<view class="c-t" style="justify-content: space-between;">
<view>
<image mode="aspectFill" style="width: 11px;height: 11px;" src='https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/osTel.png'/>
<text class="tel">028-12345678</text>
</view>
<view style="font-size: 11px;color: #FFC86D;">
上次消费的店铺
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: ['goods'],
data() {
return {
windowWidth: 0,
posiTop: 0,
laststudy: {},
}
},
created() {
console.log(this.goods)
this.getCurrentStore()
},
methods:{
goUrl(){
},
getCurrentStore(){
this.request2(
{
url: "/api/AppletStores/GetCurrentStore",
data: {storeId:0,position:'30.642926,104.090009'},
},
(res) => {
console.log(1)
}
);
},
goStorelist(){//门店选择
uni.navigateTo({
url:"/pages/reserve/storeList"
})
}
}
}
</script>
<style>
.store {
width: 100%;
height: 184px;
}
.store .box{
width: 100%;
height: 100%;
box-shadow:0 6px 10px 1px #F2F2F2;
font-family: aa;
position: relative;
overflow: hidden;
}
.store .img{
width: 100%;
height: 100%;
}
.store .content{
width: 100%;
height: 80px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10px 15px;
background: #FFF;
position: absolute;
left: 0;
bottom: 0;
}
.store .c-t{
width: 100%;
display: flex;
flex-direction: row;
}
.store .c-t-l{
width: 1;
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 14px;
color: #000000;
}
.store .c-t-r{
width: 80px;
text-align: right;
font-size: 12px;
color: #111111;
}
.store .tel{
font-size: 12px;
color: #555555;
margin-left: 5px;
}
.store .address{
font-size: 11px;color: #727272;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.store .switchstore{
position: absolute;
top: 5px;
right: 5px;
width: 60px;
height: 15px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
background: #FFF;
border-radius: 8px;
padding: 0 2px;
}
</style>
<template>
<div
:style="{
'background-color': goodsInfo.backgroundColor,
'background-image': goodsInfo.backgroundPicUrl,
'border-color': goodsInfo.goodsStyle == 2 ? 'rgb(226, 226, 226)' : ''
}"
>
<div
v-for="(item, gli) in goodList"
:key="gli"
class="good-one"
@click="openGood(item)"
:style="{
border: goodsInfo.goodsStyle == 2 ? '1px solid rgb(226, 226, 226)' : '',
background: goodsInfo.goodsStyle == 1 || goodsInfo.goodsStyle == 2 ? '#FFF' : ''
}"
>
<div class="tips" v-if="goodsInfo.showGoodsTag"><image :src="goodsInfo.goodsTagPicUrl" mode="widthFix" style="width: 100%;" /></div>
<image
style="width: calc(100vw - 24px); height: 66vw;"
:mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'"
:src="item.picUrl"
v-if="goodsInfo.goodsCoverProportion == '3-2'"
/>
<image
style="
width: calc(100vw - 24px);
height: 194px;
border-radius: 10rpx 10rpx 0 0;
"
v-if="goodsInfo.goodsCoverProportion == '1-1'"
:mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'"
:src="item.picUrl"
/>
<div class="good-info">
<div class="good-name" v-if="goodsInfo.showGoodsName">{{ item.name }}</div>
<div class="good-price-info">
<view style="display: flex;flex-direction: row;align-items: flex-end;">
<span class="price" :style="{ color: mainColor }"><Tetx style='font-size: 12px;'></Tetx>{{ goodsInfo.showGoodsPrice ? getPrice(item.price) : '' }}</span>
<text style="margin-left: 5px;font-size: 11px;color: #999999;">已售10件</text>
</view>
<span class="buy" v-if="goodsInfo.showBuyBtn" @click.stop="showSkuHandler(item)">
<u-icon name="cart-o" size="40" :color="mainColor" v-if="goodsInfo.buyBtn == 'cart'" />
<u-icon name="add-o" size="40" :color="mainColor" v-else-if="goodsInfo.buyBtn == 'add'" />
<u-button
type="primary"
size="mini"
:ripple="true"
:color="goodsInfo.buttonColor"
:custom-style="{
'backgroundColor':goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4 ?'#FFF' : goodsInfo.buttonColor ,
'color':goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4 ? goodsInfo.buttonColor : '#FFF'
}"
:plain="goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4?true:false"
:shape="goodsInfo.buyBtnStyle == 3 || goodsInfo.buyBtnStyle == 4 ? 'circle' : 'square'"
v-else
>
{{ goodsInfo.buyBtnText }}
</u-button>
</span>
</div>
</div>
</div>
<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
</div>
</template>
<script>
import auth from '@/components/auth/index.vue';
export default {
components: {
auth
},
props: ['goodList', 'goodsInfo'],
data() {
return {
mainColor: '',
activeKey: 0,
showSku: false,
sku: {},
showAuth: false,
u: {}
};
},
created() {
this.mainColor = this.$uiConfig.mainColor;
},
methods: {
openGood(item) {
uni.navigateTo({ url: '/pages/goods/goods?GoodsId=' + item.id });
},
showSkuHandler(g) {
this.sku = g;
this.u = uni.getStorageSync('mall_UserInfo');
if (!this.u) {
this.u = {
nickName: '未登录',
avatarUrl: ''
};
this.showAuth = true;
} else {
//跳到结算页面
}
},
reloadUserinfo() {
this.u = uni.getStorageSync('mall_UserInfo');
// this.showAuth = false;
},
//关闭登录窗口
gbAuth() {
this.showAuth = false;
}
}
};
</script>
<style>
.good-one {
margin: 12px;
position: relative;
border: 1rpx solid transparent;
border-radius: 10rpx;
padding-bottom: 10rpx;
overflow: hidden;
}
.good-one .tips {
width: 64rpx;
height: 64rpx;
position: absolute;
top: 0;
left: 0;
z-index: 4;
}
.good-one .guding {
position: relative;
}
.good-one .guding .img-box {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.good-one .good-info {
padding: 12rpx;
padding-bottom: 0;
margin-top: -5px;
}
.good-one .good-info .good-name {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 13px;
}
.good-one .good-info .good-price-info {
display: flex;
flex-direction: row;
align-items: center;justify-content: space-between;
}
.good-one .good-info .good-price-info .price {
color: #ff4544;
font-size: 16px;
/* flex: 1; */
}
.good-one .good-info .good-price-info .buy {
/* width: 24px; */
text-align: right;
}
</style>
<template>
<view
style="padding: 12px; padding-bottom: 0;"
:style="{
'background-color': goodsInfo.backgroundColor,
'background-image': goodsInfo.backgroundPicUrl,
'border-color': goodsInfo.goodsStyle == 2 ? 'rgb(226, 226, 226)' : ''
}"
>
<u-row gutter="24">
<u-col span="6" v-for="(item, gli) in goodList" :key="gli">
<view
class="good-two"
@click="openGood(item)"
:style="{
border: goodsInfo.goodsStyle == 2 ? '1px solid rgb(226, 226, 226)' : '',
background: goodsInfo.goodsStyle == 1 || goodsInfo.goodsStyle == 2 ? '#FFF' : ''
}"
>
<view class="tips" v-if="goodsInfo.showGoodsTag"><image :src="goodsInfo.goodsTagPicUrl" mode="widthFix" style="width:100%" /></view>
<view class="img-box">
<view class="img-show">
<image
style="
width: 100%;
height: 100%;
border-radius: 10rpx 10rpx 0 0;
"
:mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'"
:src="item.picUrl"
/>
</view>
</view>
<view class="good-info">
<view class="good-name" v-if="goodsInfo.showGoodsName">{{ item.name }}</view>
<view class="good-price-info">
<view class="price" :style="{ color: mainColor }"><Tetx style='font-size: 12px;'></Tetx>{{ goodsInfo.showGoodsPrice ? getPrice(item.price) : '' }}</view>
<view class="buy" v-if="goodsInfo.showBuyBtn" @click.stop="showSkuHandler(item)">
<u-icon name="cart-o" size="40" :color="mainColor" v-if="goodsInfo.buyBtn == 'cart'" />
<u-icon name="add-o" size="40" :color="mainColor" v-else-if="goodsInfo.buyBtn == 'add'" />
<u-button
type="primary"
size="mini"
:ripple="true"
:color="goodsInfo.buttonColor"
:custom-style="{
'backgroundColor':goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4 ?'#FFF' : goodsInfo.buttonColor ,
'color':goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4 ? goodsInfo.buttonColor : '#FFF'
}"
:plain="goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4?true:false"
:shape="goodsInfo.buyBtnStyle == 3 || goodsInfo.buyBtnStyle == 4 ? 'circle' : 'square'"
v-else
>
{{ goodsInfo.buyBtnText }}
</u-button>
</view>
</view>
</view>
</view>
</u-col>
</u-row>
<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
</view>
</template>
<script>
import auth from '@/components/auth/index.vue';
export default {
components: {
auth
},
props: ['goodList', 'goodsInfo'],
data() {
return {
mainColor: '',
activeKey: 0,
showSku: false,
sku: {},
showAuth: false,
u: {}
};
},
created() {
this.mainColor = this.$uiConfig.mainColor;
},
methods: {
openGood(item) {
uni.navigateTo({ url: '/pages/goods/goods?GoodsId=' + item.id });
},
showSkuHandler(g) {
this.sku = g;
this.u = uni.getStorageSync('mall_UserInfo');
if (!this.u) {
this.u = {
nickName: '未登录',
avatarUrl: ''
};
this.showAuth = true;
} else {
//跳到结算页面
}
},
reloadUserinfo() {
this.u = uni.getStorageSync('mall_UserInfo');
// this.showAuth = false;
},
//关闭登录窗口
gbAuth() {
this.showAuth = false;
}
}
};
</script>
<style>
.good-two {
position: relative;
margin-bottom: 12px;
border: 1rpx solid transparent;
border-radius: 10rpx;
overflow: hidden;
padding-bottom: 10rpx;
}
.good-two .tips {
width: 64rpx;
height: 64rpx;
position: absolute;
top: 0;
left: 0;
z-index: 4;
}
.good-two .img-box {
width: 100%;
height: 186rpx;
/* padding-top: 100%; */
/* position: relative; */
}
.good-two .img-box .img-show {
/* position: absolute; */
width: 100%;
height: 100%;
overflow: hidden;
}
.good-two .guding {
position: relative;
}
.good-two .guding .img-box {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.good-two .good-info {
padding: 6rpx;
margin-top: -5px;
padding-bottom: 0;
}
.good-two .good-info .good-name {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin: 3px 0;
font-size: 13px;
height: 37px;
}
.good-two .good-info .good-price-info {
display: flex;
flex-direction: row;
align-items: center;justify-content: space-between;
}
.good-two .good-info .good-price-info .price {
color: #ff4544;
/* flex: 1; */
font-size: 14px;
}
.good-two .good-info .good-price-info .buy {
/* width: 24px; */
text-align: right;
}
</style>
<template>
<view
style="padding: 12px; padding-bottom: 0;width:100%;"
:style="{
'background-color': goodsInfo.backgroundColor,
'background-image': goodsInfo.backgroundPicUrl,
'border-color': goodsInfo.goodsStyle == 2 ? 'rgb(226, 226, 226)' : ''
}"
>
<view
class="good-four"
v-for="(item, gli) in goodList"
:key="gli"
@click="openGood(item)"
:style="{
border: goodsInfo.goodsStyle == 2 ? '1px solid rgb(226, 226, 226)' : '',
background: goodsInfo.goodsStyle == 1 || goodsInfo.goodsStyle == 2 ? '#FFF' : ''
}"
>
<view class="tips" v-if="goodsInfo.showGoodsTag"><image :src="goodsInfo.goodsTagPicUrl" mode="widthFix" style="width: 100%;" /></view>
<view class="img-box"><image style="width: 100%; height: 100%;border-radius: 10rpx;" :mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'" :src="item.picUrl" /></view>
<view class="good-info">
<view class="good-name" v-if="goodsInfo.showGoodsName">{{ item.name }}</view>
<view class="good-price-info">
<view class="price" :style="{ color: mainColor }"><Tetx style='font-size: 12px;'></Tetx>{{ goodsInfo.showGoodsPrice ? getPrice(item.price) : '' }}</view>
<view class="buy" v-if="goodsInfo.showBuyBtn" @click.stop="showSkuHandler(item)">
<u-icon name="cart-o" size="40" :color="mainColor" v-if="goodsInfo.buyBtn == 'cart'" />
<u-icon name="add-o" size="40" :color="mainColor" v-else-if="goodsInfo.buyBtn == 'add'" />
<u-button
type="primary"
size="mini"
:ripple="true"
:color="goodsInfo.buttonColor"
:custom-style="{
'backgroundColor':goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4 ?'#FFF' : goodsInfo.buttonColor ,
'color':goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4 ? goodsInfo.buttonColor : '#FFF'
}"
:plain="goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4?true:false"
:shape="goodsInfo.buyBtnStyle == 3 || goodsInfo.buyBtnStyle == 4 ? 'circle' : 'square'"
v-else
>
{{ goodsInfo.buyBtnText }}
</u-button>
</view>
</view>
</view>
</view>
<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
</view>
</template>
<script>
import auth from '@/components/auth/index.vue';
export default {
components: {
auth
},
props: ['goodList', 'goodsInfo'],
data() {
return {
mainColor: '',
activeKey: 0,
showSku: false,
sku: {},
showAuth: false,
u: {}
};
},
created() {
this.mainColor = this.$uiConfig.mainColor;
},
methods: {
openGood(item) {
uni.navigateTo({ url: '/pages/goods/goods?GoodsId=' + item.id });
},
showSkuHandler(g) {
this.sku = g;
this.u = uni.getStorageSync('mall_UserInfo');
if (!this.u) {
this.u = {
nickName: '未登录',
avatarUrl: ''
};
this.showAuth = true;
} else {
//跳到结算页面
}
},
reloadUserinfo() {
this.u = uni.getStorageSync('mall_UserInfo');
// this.showAuth = false;
},
//关闭登录窗口
gbAuth() {
this.showAuth = false;
}
}
};
</script>
<style>
.good-four {
position: relative;
margin-bottom: 14px;
display: flex;
height: 72px;
border: 1rpx solid transparent;
border-radius: 10rpx;
box-sizing: border-box;
padding: 0 1px 1px 0;
overflow: hidden;
}
.good-four .tips {
width: 64rpx;
height: 64rpx;
position: absolute;
top: 0;
left: 0;
z-index: 4;
}
.good-four .img-box {
width: 125px;
height: 70px;
border-radius: 10rpx;
}
.good-four .good-info {
padding:0 6px 3px 12px;
flex: 1;
width: 1rpx;
border: 10rpx;
padding-bottom: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
/* width:20%; */
}
.good-four .good-info .good-name {
font-size: 13px;
height: 34px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.good-four .good-info .good-price-info {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.good-four .good-info .good-price-info .price {
color: #ff4544;
/* flex: 1; */
font-size: 14px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.good-four .good-info .good-price-info .buy {
/* width: 24px; */
text-align: right;
}
</style>
......@@ -409,7 +409,20 @@
"path": "personal/payment-order"//课程代付
}]
},
//线下服务
{
"root": "pages/reserve",
"pages": [
{
"path":"storeList"
},{
"path":"storeDetails",
"style": {
"navigationStyle": "custom"
}
}
]
},
//抖音商品短视频
{
"root": "pages/video",
......
This diff is collapsed.
This diff is collapsed.
<template>
<view class="w-picker-view">
<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
<picker-view-column v-for="(group,gIndex) in range" :key="gIndex">
<view class="w-picker-item" v-for="(item,index) in group" :key="index">{{item[nodeKey]}}</view>
</picker-view-column>
</picker-view>
</view>
</template>
<script>
export default {
data() {
return {
pickVal:[],
range:[],
checkObj:{}
};
},
props:{
itemHeight:{
type:String,
default:"44px"
},
value:{
type:[Array,String],
default:""
},
defaultType:{
type:String,
default:"label"
},
options:{
type:Array,
default(){
return []
}
},
defaultProps:{
type:Object,
default(){
return{
lable:"label",
value:"value",
children:"children"
}
}
},
level:{
//多级联动层级,表示几级联动
type:[Number,String],
default:2
}
},
computed:{
nodeKey(){
return this.defaultProps.label;
},
nodeVal(){
return this.defaultProps.value;
},
nodeChild(){
return this.defaultProps.children;
}
},
watch:{
value(val){
if(this.options.length!=0){
this.initData();
}
},
options(val){
this.initData();
}
},
created() {
if(this.options.length!=0){
this.initData();
}
},
methods:{
getData(){
//用来处理初始化数据
let options=this.options;
let col1={},col2={},col3={},col4={};
let arr1=options,arr2=[],arr3=[],arr4=[];
let col1Index=0,col2Index=0,col3Index=0,col4Index=0;
let a1="",a2="",a3="",a4="";
let dVal=[],obj={};
let value=this.value;
let data=[];
a1=value[0];
a2=value[1];
if(this.level>2){
a3=value[2];
}
if(this.level>3){
a4=value[3];
};
/*第1列*/
col1Index=arr1.findIndex((v)=>{
return v[this.defaultType]==a1
});
col1Index=value?(col1Index!=-1?col1Index:0):0;
col1=arr1[col1Index];
/*第2列*/
arr2=arr1[col1Index][this.nodeChild];
col2Index=arr2.findIndex((v)=>{
return v[this.defaultType]==a2
});
col2Index=value?(col2Index!=-1?col2Index:0):0;
col2=arr2[col2Index];
/*第3列*/
if(this.level>2){
arr3=arr2[col2Index][this.nodeChild];
col3Index=arr3.findIndex((v)=>{
return v[this.defaultType]==a3;
});
col3Index=value?(col3Index!=-1?col3Index:0):0;
col3=arr3[col3Index];
};
/*第4列*/
if(this.level>3){
arr4=arr3[col4Index][this.nodeChild];
col4Index=arr4.findIndex((v)=>{
return v[this.defaultType]==a4;
});
col4Index=value?(col4Index!=-1?col4Index:0):0;
col4=arr4[col4Index];
};
switch(this.level*1){
case 2:
dVal=[col1Index,col2Index];
obj={
col1,
col2
}
data=[arr1,arr2];
break;
case 3:
dVal=[col1Index,col2Index,col3Index];
obj={
col1,
col2,
col3
}
data=[arr1,arr2,arr3];
break;
case 4:
dVal=[col1Index,col2Index,col3Index,col4Index];
obj={
col1,
col2,
col3,
col4
}
data=[arr1,arr2,arr3,arr4];
break
}
return {
data,
dVal,
obj
}
},
initData(){
let dataData=this.getData();
let data=dataData.data;
let arr1=data[0];
let arr2=data[1];
let arr3=data[2]||[];
let arr4=data[3]||[];
let obj=dataData.obj;
let col1=obj.col1,col2=obj.col2,col3=obj.col3||{},col4=obj.col4||{};
let result="",value=[];
let range=[];
switch(this.level){
case 2:
value=[col1[this.nodeVal],col2[this.nodeVal]];
result=`${col1[this.nodeKey]+col2[this.nodeKey]}`;
range=[arr1,arr2];
break;
case 3:
value=[col1[this.nodeVal],col2[this.nodeVal],col3[this.nodeVal]];
result=`${col1[this.nodeKey]+col2[this.nodeKey]+col3[this.nodeKey]}`;
range=[arr1,arr2,arr3];
break;
case 4:
value=[col1[this.nodeVal],col2[this.nodeVal],col3[this.nodeVal],col4[this.nodeVal]];
result=`${col1[this.nodeKey]+col2[this.nodeKey]+col3[this.nodeKey]+col4[this.nodeKey]}`;
range=[arr1,arr2,arr3,arr4];
break;
}
this.range=range;
this.checkObj=obj;
this.$nextTick(()=>{
this.pickVal=dataData.dVal;
});
this.$emit("change",{
result:result,
value:value,
obj:obj
})
},
handlerChange(e){
let arr=[...e.detail.value];
let col1Index=arr[0],col2Index=arr[1],col3Index=arr[2]||0,col4Index=arr[3]||0;
let arr1=[],arr2=[],arr3=[],arr4=[];
let col1,col2,col3,col4,obj={};
let result="",value=[];
arr1=this.options;
arr2=(arr1[col1Index]&&arr1[col1Index][this.nodeChild])||arr1[arr1.length-1][this.nodeChild]||[];
col1=arr1[col1Index]||arr1[arr1.length-1]||{};
col2=arr2[col2Index]||arr2[arr2.length-1]||{};
if(this.level>2){
arr3=(arr2[col2Index]&&arr2[col2Index][this.nodeChild])||arr2[arr2.length-1][this.nodeChild];
col3=arr3[col3Index]||arr3[arr3.length-1]||{};
}
if(this.level>3){
arr4=(arr3[col3Index]&&arr3[col3Index][this.nodeChild])||arr3[arr3.length-1][this.nodeChild]||[];
col4=arr4[col4Index]||arr4[arr4.length-1]||{};
}
switch(this.level){
case 2:
obj={
col1,
col2
}
this.range=[arr1,arr2];
result=`${(col1[this.nodeKey]||'')+(col2[this.nodeKey]||'')}`;
value=[col1[this.nodeVal]||'',col2[this.nodeVal]||''];
break;
case 3:
obj={
col1,
col2,
col3
}
this.range=[arr1,arr2,arr3];
result=`${(col1[this.nodeKey]||'')+(col2[this.nodeKey]||'')+(col3[this.nodeKey]||'')}`;
value=[col1[this.nodeVal]||'',col2[this.nodeVal]||'',col3[this.nodeVal]||''];
break;
case 4:
obj={
col1,
col2,
col3,
col4
}
this.range=[arr1,arr2,arr3,arr4];
result=`${(col1[this.nodeKey]||'')+(col2[this.nodeKey]||'')+(col3[this.nodeKey]||'')+(col4[this.nodeKey]||'')}`;
value=[col1[this.nodeVal]||'',col2[this.nodeVal]||'',col3[this.nodeVal]||'',col4[this.nodeVal]||''];
break;
}
this.checkObj=obj;
this.pickVal=arr;
this.$emit("change",{
result:result,
value:value,
obj:obj
})
}
}
}
</script>
<style lang="scss">
@import "./w-picker.css";
</style>
<template>
<view class="w-picker-view">
<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
<picker-view-column>
<view class="w-picker-item" v-for="(item,index) in range.provinces" :key="index">{{item.label}}</view>
</picker-view-column>
<picker-view-column>
<view class="w-picker-item" v-for="(item,index) in range.citys" :key="index">{{item.label}}</view>
</picker-view-column>
<picker-view-column v-if="!hideArea">
<view class="w-picker-item" v-for="(item,index) in range.areas" :key="index">{{item.label}}</view>
</picker-view-column>
</picker-view>
</view>
</template>
<script>
import areaData from "./areadata/areadata.js"
export default {
data() {
return {
pickVal:[],
range:{
provinces:[],
citys:[],
areas:[]
},
checkObj:{}
};
},
props:{
itemHeight:{
type:String,
default:"44px"
},
value:{
type:[Array,String],
default:""
},
defaultType:{
type:String,
default:"label"
},
hideArea:{
type:Boolean,
default:false
}
},
watch:{
value(val){
this.initData();
}
},
created() {
this.initData();
},
methods:{
getData(){
//用来处理初始化数据
let provinces=areaData;
let dVal=[];
let value=this.value;
let a1=value[0];//默认值省
let a2=value[1];//默认值市
let a3=value[2];//默认值区、县
let province,city,area;
let provinceIndex=provinces.findIndex((v)=>{
return v[this.defaultType]==a1
});
provinceIndex=value?(provinceIndex!=-1?provinceIndex:0):0;
let citys=provinces[provinceIndex].children;
let cityIndex=citys.findIndex((v)=>{
return v[this.defaultType]==a2
});
cityIndex=value?(cityIndex!=-1?cityIndex:0):0;
let areas=citys[cityIndex].children;
let areaIndex=areas.findIndex((v)=>{
return v[this.defaultType]==a3;
});
areaIndex=value?(areaIndex!=-1?areaIndex:0):0;
dVal=this.hideArea?[provinceIndex,cityIndex]:[provinceIndex,cityIndex,areaIndex];
province=provinces[provinceIndex];
city=citys[cityIndex];
area=areas[areaIndex];
let obj=this.hideArea?{
province,
city
}:{
province,
city,
area
}
return this.hideArea?{
provinces,
citys,
dVal,
obj
}:{
provinces,
citys,
areas,
dVal,
obj
}
},
initData(){
let dataData=this.getData();
let provinces=dataData.provinces;
let citys=dataData.citys;
let areas=this.hideArea?[]:dataData.areas;
let obj=dataData.obj;
let province=obj.province,city=obj.city,area=this.hideArea?{}:obj.area;
let value=this.hideArea?[province.value,city.value]:[province.value,city.value,area.value];
let result=this.hideArea?`${province.label+city.label}`:`${province.label+city.label+area.label}`;
this.range=this.hideArea?{
provinces,
citys,
}:{
provinces,
citys,
areas
};
this.checkObj=obj;
this.$nextTick(()=>{
this.pickVal=dataData.dVal;
});
this.$emit("change",{
result:result,
value:value,
obj:obj
})
},
handlerChange(e){
let arr=[...e.detail.value];
let provinceIndex=arr[0],cityIndex=arr[1],areaIndex=this.hideArea?0:arr[2];
let provinces=areaData;
let citys=(provinces[provinceIndex]&&provinces[provinceIndex].children)||provinces[provinces.length-1].children||[];
let areas=this.hideArea?[]:((citys[cityIndex]&&citys[cityIndex].children)||citys[citys.length-1].children||[]);
let province=provinces[provinceIndex]||provinces[provinces.length-1],
city=citys[cityIndex]||[citys.length-1],
area=this.hideArea?{}:(areas[areaIndex]||[areas.length-1]);
let obj=this.hideArea?{
province,
city
}:{
province,
city,
area
}
if(this.checkObj.province.label!=province.label){
//当省更新的时候需要刷新市、区县的数据;
this.range.citys=citys;
if(!this.hideArea){
this.range.areas=areas;
}
}
if(this.checkObj.city.label!=city.label){
//当市更新的时候需要刷新区县的数据;
if(!this.hideArea){
this.range.areas=areas;
}
}
this.checkObj=obj;
this.$nextTick(()=>{
this.pickVal=arr;
})
let result=this.hideArea?`${province.label+city.label}`:`${province.label+city.label+area.label}`;
let value=this.hideArea?[province.value,city.value]:[province.value,city.value,area.value];
this.$emit("change",{
result:result,
value:value,
obj:obj
})
}
}
}
</script>
<style lang="scss">
@import "./w-picker.css";
</style>
<template>
<view class="w-picker-view">
<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
<picker-view-column>
<view class="w-picker-item" v-for="(item,index) in range" :key="index">{{item[nodeKey]}}</view>
</picker-view-column>
</picker-view>
</view>
</template>
<script>
export default {
props:{
itemHeight:{
type:String,
default:"44px"
},
options:{
type:[Array,Object],
default(){
return []
}
},
value:{
type:String,
default:""
},
defaultType:{
type:String,
default:"label"
},
defaultProps:{
type:Object,
default(){
return{
label:"label",
value:"value"
}
}
}
},
data() {
return {
pickVal:[]
};
},
computed:{
nodeKey(){
return this.defaultProps.label;
},
nodeValue(){
return this.defaultProps.value;
},
range(){
return this.options
}
},
watch:{
value(val){
if(this.options.length!=0){
this.initData();
}
},
options(val){
this.initData();
}
},
created() {
if(this.options.length!=0){
this.initData();
}
},
methods:{
initData(){
let dVal=this.value||"";
let data=this.range;
let pickVal=[0];
let cur=null;
let label="";
let value,idx;
if(this.defaultType==this.nodeValue){
value=data.find((v)=>v[this.nodeValue]==dVal);
idx=data.findIndex((v)=>v[this.nodeValue]==dVal);
}else{
value=data.find((v)=>v[this.nodeKey]==dVal);
idx=data.findIndex((v)=>v[this.nodeKey]==dVal);
}
pickVal=[idx!=-1?idx:0];
this.$nextTick(()=>{
this.pickVal=pickVal;
});
if(this.defaultType==this.nodeValue){
this.$emit("change",{
result:value?value[this.nodeKey]:data[0][this.nodeKey],
value:dVal||data[0][this.nodeKey],
obj:value?value:data[0]
})
}else{
this.$emit("change",{
result:dVal||data[0][this.nodeKey],
value:value?value[this.nodeValue]:data[0][this.nodeValue],
obj:value?value:data[0]
})
}
},
handlerChange(e){
let arr=[...e.detail.value];
let pickVal=[arr[0]||0];
let data=this.range;
let cur=data[arr[0]];
let label="";
let value="";
this.$nextTick(()=>{
this.pickVal=pickVal;
});
this.$emit("change",{
result:cur[this.nodeKey],
value:cur[this.nodeValue],
obj:cur
})
}
}
}
</script>
<style lang="scss">
@import "./w-picker.css";
</style>
<template>
<view class="w-picker-view">
<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
<picker-view-column>
<view class="w-picker-item" v-for="(item,index) in range.dates" :key="index">{{item.label}}</view>
</picker-view-column>
<picker-view-column>
<view class="w-picker-item" v-for="(item,index) in range.hours" :key="index">{{item.label}}</view>
</picker-view-column>
<picker-view-column>
<view class="w-picker-item" v-for="(item,index) in range.minutes" :key="index">{{item.label}}</view>
</picker-view-column>
</picker-view>
</view>
</template>
<script>
export default {
data() {
return {
pickVal:[],
range:{},
checkObj:{}
};
},
props:{
itemHeight:{
type:String,
default:"44px"
},
value:{
type:[String,Array,Number],
default:""
},
current:{//是否默认选中当前日期
type:Boolean,
default:false
},
expand:{
type:[Number,String],
default:30
}
},
watch:{
value(val){
this.initData();
}
},
created() {
this.initData();
},
methods:{
formatNum(n){
return (Number(n)<10?'0'+Number(n):Number(n)+'');
},
checkValue(value){
let strReg=/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}(:\d{2})?$/,example="2019-12-12 18:05:00或者2019-12-12 18:05";
if(!strReg.test(value)){
console.log(new Error("请传入与mode、fields匹配的value值,例value="+example+""))
}
return strReg.test(value);
},
resetData(year,month,day){
let curDate=this.getCurrenDate();
let curFlag=this.current;
let curYear=curDate.curYear;
let curMonth=curDate.curMonth;
let curDay=curDate.curDay;
let curHour=curDate.curHour;
let months=[],days=[],sections=[];
let disabledAfter=this.disabledAfter;
let monthsLen=disabledAfter?(year*1<curYear?12:curMonth):12;
let totalDays=new Date(year,month,0).getDate();//计算当月有几天;
for(let month=1;month<=monthsLen;month++){
months.push(this.formatNum(month));
};
for(let day=1;day<=daysLen;day++){
days.push(this.formatNum(day));
}
return{
months,
days,
sections
}
},
getData(dVal){
//用来处理初始化数据
let curFlag=this.current;
let disabledAfter=this.disabledAfter;
let dates=[],hours=[],minutes=[];
let curDate=new Date();
let curYear=curDate.getFullYear();
let curMonth=curDate.getMonth();
let curDay=curDate.getDate();
let aDate=new Date(curYear,curMonth,curDay);
for(let i=0;i<this.expand*1;i++){
aDate=new Date(curYear,curMonth,curDay+i);
let year=aDate.getFullYear();
let month=aDate.getMonth()+1;
let day=aDate.getDate();
let label=year+"-"+this.formatNum(month)+"-"+this.formatNum(day);
switch(i){
case 0:
label="今天";
break;
case 1:
label="明天";
break;
case 2:
label="后天";
break
}
dates.push({
label:label,
value:year+"-"+this.formatNum(month)+"-"+this.formatNum(day)
})
};
for(let i=0;i<24;i++){
hours.push({
label:this.formatNum(i),
value:this.formatNum(i)
})
}
for(let i=0;i<60;i++){
minutes.push({
label:this.formatNum(i),
value:this.formatNum(i)
})
}
return {
dates,
hours,
minutes
}
},
getDefaultDate(){
let value=this.value;
let reg=/-/g;
let defaultDate=value?new Date(value.replace(reg,"/")):new Date();
let defaultYear=defaultDate.getFullYear();
let defaultMonth=defaultDate.getMonth()+1;
let defaultDay=defaultDate.getDate();
let defaultDays=new Date(defaultYear,defaultMonth,0).getDate()*1;
return{
defaultDate,
defaultYear,
defaultMonth,
defaultDay,
defaultDays
}
},
getDval(){
let value=this.value;
let dVal=null;
let aDate=new Date();
let year=this.formatNum(aDate.getFullYear());
let month=this.formatNum(aDate.getMonth()+1);
let day=this.formatNum(aDate.getDate());
let date=this.formatNum(year)+"-"+this.formatNum(month)+"-"+this.formatNum(day);
let hour=aDate.getHours();
let minute=aDate.getMinutes();
if(value){
let flag=this.checkValue(value);
if(!flag){
dVal=[date,hour,minute]
}else{
let v=value.split(" ");
dVal=[v[0],...v[1].split(":")];
}
}else{
dVal=[date,hour,minute]
}
return dVal;
},
initData(){
let startDate,endDate,startYear,endYear,startMonth,endMonth,startDay,endDay;
let dates=[],hours=[],minutes=[];
let dVal=[],pickVal=[];
let value=this.value;
let reg=/-/g;
let range={};
let result="",full="",date,hour,minute,obj={};
let defaultDate=this.getDefaultDate();
let defaultYear=defaultDate.defaultYear;
let defaultMonth=defaultDate.defaultMonth;
let defaultDay=defaultDate.defaultDay;
let defaultDays=defaultDate.defaultDays;
let curFlag=this.current;
let disabledAfter=this.disabledAfter;
let dateData=[];
dVal=this.getDval();
dateData=this.getData(dVal);
dates=dateData.dates;
hours=dateData.hours;
minutes=dateData.minutes;
pickVal=[
dates.findIndex(n => n.value == dVal[0])!=-1?dates.findIndex(n => n.value == dVal[0]):0,
hours.findIndex(n => n.value == dVal[1])!=-1?hours.findIndex(n => n.value == dVal[1]):0,
minutes.findIndex(n => n.value == dVal[2])!=-1?minutes.findIndex(n => n.value == dVal[2]):0,
];
range={dates,hours,minutes};
date=dVal[0]?dVal[0]:dates[0].label;
hour=dVal[1]?dVal[1]:hours[0].label;
minute=dVal[2]?dVal[2]:minutes[0].label;
result=full=`${date+' '+hour+':'+minute}`;
obj={
date,
hour,
minute
}
this.range=range;
this.checkObj=obj;
this.$nextTick(()=>{
this.pickVal=pickVal;
});
this.$emit("change",{
result:result,
value:full,
obj:obj
})
},
handlerChange(e){
let arr=[...e.detail.value];
let data=this.range;
let date="",hour="",minute="";
let result="",full="",obj={};
let disabledAfter=this.disabledAfter;
date=(arr[0]||arr[0]==0)?data.dates[arr[0]]||data.dates[data.dates.length-1]:"";
hour=(arr[1]||arr[1]==0)?data.hours[arr[1]]||data.hours[data.hours.length-1]:"";
minute=(arr[2]||arr[2]==0)?data.minutes[arr[2]]||data.minutes[data.minutes.length-1]:"";
result=full=`${date.label+' '+hour.label+':'+minute.label+':00'}`;
obj={
date,
hour,
minute
}
this.checkObj=obj;
this.$emit("change",{
result:result,
value:full,
obj:obj
})
}
}
}
</script>
<style lang="scss">
@import "./w-picker.css";
</style>
<template>
<view class="w-picker-view">
<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
<picker-view-column>
<view class="w-picker-item" v-for="(item,index) in range.hours" :key="index">{{item}}</view>
</picker-view-column>
<picker-view-column>
<view class="w-picker-item" v-for="(item,index) in range.minutes" :key="index">{{item}}</view>
</picker-view-column>
<picker-view-column v-if="second">
<view class="w-picker-item" v-for="(item,index) in range.seconds" :key="index">{{item}}</view>
</picker-view-column>
</picker-view>
</view>
</template>
<script>
export default {
data() {
return {
pickVal:[],
range:{},
checkObj:{}
};
},
props:{
itemHeight:{
type:String,
default:"44px"
},
value:{
type:[String,Array,Number],
default:""
},
current:{//是否默认选中当前日期
type:Boolean,
default:false
},
second:{
type:Boolean,
default:true
}
},
watch:{
value(val){
this.initData();
}
},
created() {
this.initData();
},
methods:{
formatNum(n){
return (Number(n)<10?'0'+Number(n):Number(n)+'');
},
checkValue(value){
let strReg=/^\d{2}:\d{2}:\d{2}$/,example="18:00:05";
if(!strReg.test(value)){
console.log(new Error("请传入与mode、fields匹配的value值,例value="+example+""))
}
return strReg.test(value);
},
resetData(year,month,day,hour,minute){
let curDate=this.getCurrenDate();
let curFlag=this.current;
let curHour=curDate.curHour;
let curMinute=curDate.curMinute;
let curSecond=curDate.curSecond;
for(let hour=0;hour<24;hour++){
hours.push(this.formatNum(hour));
}
for(let minute=0;minute<60;minute++){
minutes.push(this.formatNum(minute));
}
for(let second=0;second<60;second++){
seconds.push(this.formatNum(second));
}
return{
hours,
minutes,
seconds
}
},
getData(curDate){
//用来处理初始化数据
let hours=[],minutes=[],seconds=[];
let curFlag=this.current;
let disabledAfter=this.disabledAfter;
let fields=this.fields;
let curHour=curDate.curHour;
let curMinute=curDate.curMinute;
let curSecond=curDate.curSecond;
for(let hour=0;hour<24;hour++){
hours.push(this.formatNum(hour));
}
for(let minute=0;minute<60;minute++){
minutes.push(this.formatNum(minute));
}
for(let second=0;second<60;second++){
seconds.push(this.formatNum(second));
}
return this.second?{
hours,
minutes,
seconds
}:{
hours,
minutes
}
},
getCurrenDate(){
let curDate=new Date();
let curHour=curDate.getHours();
let curMinute=curDate.getMinutes();
let curSecond=curDate.getSeconds();
return this.second?{
curHour,
curMinute,
curSecond
}:{
curHour,
curMinute,
}
},
getDval(){
let value=this.value;
let fields=this.fields;
let dVal=null;
let aDate=new Date();
let hour=this.formatNum(aDate.getHours());
let minute=this.formatNum(aDate.getMinutes());
let second=this.formatNum(aDate.getSeconds());
if(value){
let flag=this.checkValue(value);
if(!flag){
dVal=[hour,minute,second]
}else{
dVal=value?value.split(":"):[];
}
}else{
dVal=this.second?[hour,minute,second]:[hour,minute]
}
return dVal;
},
initData(){
let curDate=this.getCurrenDate();
let dateData=this.getData(curDate);
let pickVal=[],obj={},full="",result="",hour="",minute="",second="";
let dVal=this.getDval();
let curFlag=this.current;
let disabledAfter=this.disabledAfter;
let hours=dateData.hours;
let minutes=dateData.minutes;
let seconds=dateData.seconds;
let defaultArr=this.second?[
dVal[0]&&hours.indexOf(dVal[0])!=-1?hours.indexOf(dVal[0]):0,
dVal[1]&&minutes.indexOf(dVal[1])!=-1?minutes.indexOf(dVal[1]):0,
dVal[2]&&seconds.indexOf(dVal[2])!=-1?seconds.indexOf(dVal[2]):0
]:[
dVal[0]&&hours.indexOf(dVal[0])!=-1?hours.indexOf(dVal[0]):0,
dVal[1]&&minutes.indexOf(dVal[1])!=-1?minutes.indexOf(dVal[1]):0
];
pickVal=disabledAfter?defaultArr:(curFlag?(this.second?[
hours.indexOf(this.formatNum(curDate.curHour)),
minutes.indexOf(this.formatNum(curDate.curMinute)),
seconds.indexOf(this.formatNum(curDate.curSecond)),
]:[
hours.indexOf(this.formatNum(curDate.curHour)),
minutes.indexOf(this.formatNum(curDate.curMinute))
]):defaultArr);
this.range=dateData;
this.checkObj=obj;
hour=dVal[0]?dVal[0]:hours[0];
minute=dVal[1]?dVal[1]:minutes[0];
if(this.second)second=dVal[2]?dVal[0]:seconds[0];
result=this.second?`${hour+':'+minute+':'+second}`:`${hour+':'+minute}`;
full=this.second?`${hour+':'+minute+':'+second}`:`${hour+':'+minute+':00'}`;
this.$nextTick(()=>{
this.pickVal=pickVal;
});
this.$emit("change",{
result:result,
value:full,
obj:obj
})
},
handlerChange(e){
let arr=[...e.detail.value];
let data=this.range;
let hour="",minute="",second="",result="",full="",obj={};
hour=(arr[0]||arr[0]==0)?data.hours[arr[0]]||data.hours[data.hours.length-1]:"";
minute=(arr[1]||arr[1]==0)?data.minutes[arr[1]]||data.minutes[data.minutes.length-1]:"";
if(this.second)second=(arr[2]||arr[2]==0)?data.seconds[arr[2]]||data.seconds[data.seconds.length-1]:"";
obj=this.second?{
hour,
minute,
second
}:{
hour,
minute
};
this.checkObj=obj;
result=this.second?`${hour+':'+minute+':'+second}`:`${hour+':'+minute}`;
full=this.second?`${hour+':'+minute+':'+second}`:`${hour+':'+minute+':00'}`;
this.$emit("change",{
result:result,
value:full,
obj:obj
})
}
}
}
</script>
<style lang="scss">
@import "./w-picker.css";
</style>
......@@ -7,21 +7,6 @@
<slot></slot>
<text :style="{'color':themeColor}" @tap.stop.prevent="pickerConfirm">确定</text>
</view>
<date-picker
v-if="mode=='date'"
class="w-picker-wrapper"
:startYear="startYear"
:endYear="endYear"
:value="value"
:fields="fields"
:item-height="itemHeight"
:current="current"
:disabled-after="disabledAfter"
@change="handlerChange"
@touchstart="touchStart"
@touchend="touchEnd">
</date-picker>
<range-picker
v-if="mode=='range'"
class="w-picker-wrapper"
......@@ -35,110 +20,20 @@
@touchend="touchEnd">
</range-picker>
<half-picker
v-if="mode=='half'"
class="w-picker-wrapper"
:startYear="startYear"
:endYear="endYear"
:value="value"
:item-height="itemHeight"
:current="current"
:disabled-after="disabledAfter"
@change="handlerChange"
@touchstart="touchStart"
@touchend="touchEnd">
</half-picker>
<shortterm-picker
v-if="mode=='shortTerm'"
class="w-picker-wrapper"
:startYear="startYear"
:endYear="endYear"
:value="value"
:item-height="itemHeight"
:current="current"
expand="60"
:disabled-after="disabledAfter"
@change="handlerChange"
@touchstart="touchStart"
@touchend="touchEnd">
</shortterm-picker>
<time-picker
v-if="mode=='time'"
class="w-picker-wrapper"
:value="value"
:item-height="itemHeight"
:current="current"
:disabled-after="disabledAfter"
:second="second"
@change="handlerChange"
@touchstart="touchStart"
@touchend="touchEnd">
</time-picker>
<selector-picker
v-if="mode=='selector'"
class="w-picker-wrapper"
:value="value"
:item-height="itemHeight"
:options="options"
:default-type="defaultType"
:default-props="defaultProps"
@change="handlerChange"
@touchstart="touchStart"
@touchend="touchEnd">
</selector-picker>
<region-picker
v-if="mode=='region'"
class="w-picker-wrapper"
:value="value"
:hide-area="hideArea"
:default-type="defaultType"
:item-height="itemHeight"
@change="handlerChange"
@touchstart="touchStart"
@touchend="touchEnd">
</region-picker>
<linkage-picker
v-if="mode=='linkage'"
class="w-picker-wrapper"
:value="value"
:options="options"
:level="level"
:default-type="defaultType"
:default-props="defaultProps"
:item-height="itemHeight"
@change="handlerChange"
@touchstart="touchStart"
@touchend="touchEnd">
</linkage-picker>
</view>
</view>
</template>
<script>
import datePicker from "./date-picker.vue"
import rangePicker from "./range-picker.vue"
import halfPicker from "./half-picker.vue"
import shorttermPicker from "./shortterm-picker.vue"
import timePicker from "./time-picker.vue"
import selectorPicker from "./selector-picker.vue"
import regionPicker from "./region-picker.vue"
import linkagePicker from "./linkage-picker.vue"
import rangePicker from "./range-picker.vue"
export default {
name:"w-picker",
components:{
datePicker,
rangePicker,
halfPicker,
timePicker,
selectorPicker,
shorttermPicker,
regionPicker,
linkagePicker
},
props:{
mode:{
......
......@@ -16,6 +16,7 @@
<u-icon name="arrow-left" size="44"></u-icon>
</view>
</view>
<button type="default" open-type="getPhoneNumber" @getphonenumber='getphonenumber'>获取手机号码</button>
<u-tabs
v-if="myPageData.home_pages && myPageData.home_pages.navs.length > 1"
name="name"
......@@ -61,6 +62,10 @@
<argoods v-if="d.id == 'educationArticle'" :goods="d.data"></argoods>
<!-- 最近学习组件 -->
<rstudy v-if="d.id == 'education'" :goods="d.data" ref='study'></rstudy>
<store v-if="d.id == 'reservestore'" :goods="d.data" ></store>
<!-- 线下服务商品 -->
<sindex v-if="d.id == 'goods'" :goods="d.data" :key="di" ></sindex>
</template>
</view>
</template>
......@@ -121,7 +126,8 @@ import guide from "@/components/guidecar/index.vue";
import rstudy from "@/components/study/Rstudy.vue";
import rgoods from "@/components/study/index.vue";
import argoods from "@/components/studyArticle/index.vue";
import store from "@/components/store/store.vue"
import sindex from "@/components/store/index.vue"
export default {
data() {
......@@ -180,7 +186,9 @@ export default {
guide,
rstudy,
rgoods,
argoods
argoods,
store,
sindex
},
onLoad(options) {
let that = this;
......@@ -463,6 +471,20 @@ export default {
},
methods: {
getphonenumber(e){
console.log(e)
uni.checkSession({//检查登录状态是否过期
success:(x)=>{
if(x.errMsg=='checkSession:ok'){//没有过期
console.log('没过期')
}
},
fail:(err)=>{//检测失败重新登录
console.log(err)
}
})
},
//调用获取code
getCode(obj) {
var that = this;
......
This diff is collapsed.
<template>
<view class="storeList">
<view style="width: 100%;height: 50px;background: #FFF;padding: 9px 15px;" >
<u-search placeholder="请输入商户名" v-model="val" radius="40" action-text="搜索" shape="round" @search='gosearch' @custom='gosearch' ></u-search>
</view>
<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" :active-color="mainColor"></u-tabs>
<view v-if="g.length > 0" style="
height: calc(100vh - 90px);
width: 100%;
overflow: hidden;
margin-top: 7px;
">
<scroll-view :scroll-y="true" @scrolltolower="lower" :enable-back-to-top="true" :enable-flex="true" :scroll-top="scrollTop"
style="height: 100%; padding-bottom: 0px;">
<view class='store' style="padding: 7.5px 15px;" v-for="(c, i) in g" :key="i" @click="gostoreDetails()">
<view class="box" >
<image mode="aspectFill" class="img" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1597637119000_394.png" ></image>
<view class="content" >
<view class="c-t">
<view class="c-t-l">
月星环球港门店
</view>
<view class="c-t-r">
距离:20m
</view>
</view>
<view class="address">
成都市锦江区阳光新业中心2号楼2302
</view>
<view class="c-t" style="justify-content: space-between;">
<view>
<image mode="aspectFill" style="width: 11px;height: 11px;" src='https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/osTel.png'/>
<text class="tel">028-12345678</text>
</view>
<view style="font-size: 11px;color: #FFC86D;">
上次消费的店铺
</view>
</view>
</view>
</view>
</view>
<u-loadmore v-if="showLoading" :status="status" :load-text="loadText" :font-size="24" :margin-top="20"
:margin-bottom="20" bg-color="#FAF8F9" />
</scroll-view>
</view>
<view v-if="!loading && g.length== 0 " style="
height: calc(100vh - 90px);
width: calc(100vw - 20px);
padding-top: 10px;
">
<u-empty text="没有找到对应的门店" font-size="36" mode="list" ></u-empty>
</view>
</view>
</template>
<script>
export default {
data() {
return {
pageTitle: "门店列表",
status: "loadmore",
sortStatus: 1,
mainColor: "",
loading: true,
page_count: 1,
g: [],
catId: 0,
loadText: {
loadmore: "轻轻上拉,加载更多",
loading: "努力加载中",
nomore: "没有更多商品了",
},
list:[
{name: '距离'},
{name: '热度'},
],
current: 0,
showLoading: true,
sortShowType: 1,
scrollTop: 0,
old: {
scrollTop: 0,
},
coupon_id: 0,
msg: {
pageIndex: 1,
pageSize: 10,
Name: '',
GoodsType: 0,
CategoryIds: '',
OrderBy: 1,
GoodsPageType:0
},
val:'',
};
},
onLoad(option) {
this.mainColor = this.$uiConfig.mainColor;
this.catId = option.cat_id;
if (option && option.coupon_id && option.UseType) {//课程卡带过来的参数
console.log(option.coupon_id)
if(option.UseType==1){
this.msg.CategoryIds = option.coupon_id
}else if(option.UseType==2){
this.msg.GoodsIds = option.coupon_id
}
}
if (option.CategoryIds) {
this.msg.CategoryIds = option.CategoryIds;
}
},
mounted() {
uni.setNavigationBarTitle({
title: this.pageTitle,
});
this.init();
},
methods: {
change(e) {
this.current = e;
// this.g = [];
// this.msg.pageIndex = 1
// this.init();
},
gosearch(){//确认搜索
console.log(this.val)
},
init() {
this.loading = true;
this.msg.GoodsPageType = uni.getStorageSync("mall_UserInfo")?uni.getStorageSync("mall_UserInfo").UserPageType:0;
this.request2({
url: '/api/AppletSchool/GetAppletCoursePageList',
data: this.msg
},
res => {
this.loading = false;
this.isloading = false;
if (res.resultCode == 1) {
this.g = this.g.concat(res.data.pageData);
this.page_count = res.data.pageCount;
if (this.page_count == 1) {
this.status = "nomore";
} else {
this.status = "loadmore";
}
}
uni.hideNavigationBarLoading();
}
);
},
lower(e) {
if (this.msg.pageIndex < this.page_count) {
this.status = "loading";
this.msg.pageIndex++;
this.init();
} else {
this.status = "nomore";
}
},
gostoreDetails() {
uni.navigateTo({
url: "/pages/reserve/storeDetails",
});
},
},
};
</script>
<style>
.storeList {
height: 100%;
background: #FAF8F9;
position: relative;
}
.storeList .store {
width: 100%;
height: 184px;
/* background: #FAF8F9; */
}
.storeList .box{
width: 100%;
height: 100%;
box-shadow:0 6px 10px 1px #F2F2F2;
font-family: aa;
position: relative;
border-radius: 6px;
overflow: hidden;
}
.storeList .img{
width: 100%;
height: 100%;
border-radius: 6px;
}
.storeList .content{
width: 100%;
height: 80px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10px 15px;
background: #FFF;
position: absolute;
left: 0;
bottom: 0;
}
.storeList .c-t{
width: 100%;
display: flex;
flex-direction: row;
}
.storeList .c-t-l{
width: 1;
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 14px;
color: #000000;
}
.storeList .c-t-r{
width: 80px;
text-align: right;
font-size: 12px;
color: #111111;
}
.storeList .tel{
font-size: 12px;
color: #555555;
margin-left: 5px;
}
.storeList .address{
font-size: 11px;color: #727272;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment