初始化
This commit is contained in:
魏啾
337
pages/index/components/clothing/index.vue
Normal file
337
pages/index/components/clothing/index.vue
Normal file
@@ -0,0 +1,337 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<!-- <view class="contentclothingimage" v-if="list.theme_re.img != null">
|
||||
<image :src="list.theme_re.img" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="contentclothingbox" v-if="list.theme_re.img != null">
|
||||
<view class="fourcontents">
|
||||
<u-scroll-list indicatorActiveColor="#6C6E8D" :indicator="false">
|
||||
<view class="scrollfourcontents" v-for="(item, index) in list.theme_re.data" :key="index"
|
||||
@click="eeInfoseries(item)">
|
||||
<view class="scrollfourcontenttitems flex-colum" :style="index == 0 ?'margin-left: 0;':''">
|
||||
<image class="scrolltowcontentitem_images" :src="item.host_img" mode="aspectFill">
|
||||
</image>
|
||||
<view class="scrolltowcontentitem_ones">
|
||||
{{item.series}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-scroll-list>
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentclothingimage" v-if="list.new.img != null">
|
||||
<image :src="list.new.img" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="contentclothingboxoone" v-if="list.new.img != null">
|
||||
<view class="fourcontentsoneitem flex-between" v-for="(item,index) in list.new.data" :key="index"
|
||||
@click="mallInfoInfo(item)">
|
||||
<image class="fourcontentsoneitemimage" :src="item.host_img" mode="aspectFill"></image>
|
||||
<view class="fourcontentsoneitemtext flex-colum-start">
|
||||
<view class="fourcontentsoneitemtextone">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="fourcontentsoneitemtexttow">
|
||||
￥{{item.price}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentclothingimageclassimagebuya" v-if="list.discount">
|
||||
<image :src="list.discount" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="contentclothingimageclass flex-center">
|
||||
<image class="contentclothingclassimage" src="@/static/4.png" mode="aspectFill"></image>
|
||||
<view class="contentclothingimageclassbox flex-between">
|
||||
<view class="contentclothingimageclassboxitem flex-center" v-for="(item,index) in 3" :key="index">
|
||||
<view class="contentclothingimageclassboxitemone">
|
||||
50
|
||||
</view>
|
||||
<view class="contentclothingimageclassboxitemtow flex-colum-start">
|
||||
<text>RMB</text>
|
||||
<text>满300元使用</text>
|
||||
</view>
|
||||
<view class="contentclothingimageclassboxitemabsolute">
|
||||
领
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="contentclothingboxoone">
|
||||
<view class="fourcontentsoneitemtow flex-between">
|
||||
<view class="fourcontentsoneitemtowitem" v-for="(item,index) in list" :key="index"
|
||||
@click="mallInfoInfo(item)">
|
||||
<image class="fourcontentsoneitemtowitemimage" :src="item.host_img" mode="aspectFill"></image>
|
||||
<view class="fourcontentsoneitemtowitemone">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="fourcontentsoneitemtowitemtow">
|
||||
￥{{item.price}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
bgbutton: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
mallInfoInfo(e) { //查看订单详情
|
||||
if (e.spec_type == 1) {
|
||||
uni.pro.navigateTo('mall/mallInfo', {
|
||||
id: e.id,
|
||||
})
|
||||
} else {
|
||||
uni.pro.navigateTo('mall/mallInfos', {
|
||||
id: e.id,
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.index {
|
||||
width: 100%;
|
||||
|
||||
.contentclothingimageclassimagebuya {
|
||||
width: auto;
|
||||
margin: 48rpx 0;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.contentclothingimageclass {
|
||||
margin-top: 50rpx;
|
||||
|
||||
.contentclothingclassimage {
|
||||
width: 224.35rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.contentclothingimageclassbox {
|
||||
position: relative;
|
||||
margin-top: 18rpx;
|
||||
width: 100%;
|
||||
background: #ABAD98;
|
||||
border-radius: 18rpx;
|
||||
border: 2rpx solid #404136;
|
||||
padding: 28rpx 18rpx;
|
||||
|
||||
.contentclothingimageclassboxitem:nth-child(1) {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.contentclothingimageclassboxitem {
|
||||
position: relative;
|
||||
border-left: 1rpx dashed #fff;
|
||||
padding: 0 18rpx;
|
||||
|
||||
.contentclothingimageclassboxitemone {
|
||||
font-size: 48rpx;
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.contentclothingimageclassboxitemtow {
|
||||
margin-left: 10rpx;
|
||||
|
||||
text:nth-child(1) {
|
||||
font-size: 16rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
font-size: 20rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
}
|
||||
|
||||
.contentclothingimageclassboxitemabsolute {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 18rpx;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
text-align: center;
|
||||
font-size: 16rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
background: #7e8a83;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contentclothingimageclassbox::after {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
left: -11px;
|
||||
bottom: 50%;
|
||||
transform: translateY(50%);
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 0 11px 11px 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.contentclothingimageclassbox::before {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
right: -11px;
|
||||
bottom: 50%;
|
||||
transform: translateY(50%);
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 11px 0 0 11px;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.contentclothingimage {
|
||||
width: 130rpx;
|
||||
height: 52rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.contentclothingbox {
|
||||
.fourcontents {
|
||||
.scrollfourcontents {
|
||||
padding: 22rpx 0;
|
||||
|
||||
.scrollfourcontenttitems {
|
||||
width: 246rpx;
|
||||
height: 296rpx;
|
||||
margin-left: 30rpx;
|
||||
position: relative;
|
||||
|
||||
.scrolltowcontentitem_images {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 18rpx;
|
||||
}
|
||||
|
||||
.scrolltowcontentitem_ones {
|
||||
position: absolute;
|
||||
padding: 8rpx 10rpx;
|
||||
bottom: 12rpx;
|
||||
left: 14rpx;
|
||||
background: rgba(0, 0, 0, 0.32);
|
||||
border-radius: 20rpx;
|
||||
font-size: 18rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contentclothingboxoone {
|
||||
.fourcontentsoneitem {
|
||||
width: 100%;
|
||||
margin-top: 24rpx;
|
||||
|
||||
.fourcontentsoneitemimage {
|
||||
width: 278rpx;
|
||||
border-radius: 18rpx;
|
||||
height: 194rpx;
|
||||
}
|
||||
|
||||
.fourcontentsoneitemtext {
|
||||
flex: 1;
|
||||
height: 194rpx;
|
||||
margin-left: 10rpx;
|
||||
|
||||
.fourcontentsoneitemtextone {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fourcontentsoneitemtexttow {
|
||||
margin-top: 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fourcontentsoneitemtow {
|
||||
width: 100%;
|
||||
.fourcontentsoneitemtowitem:nth-child(1) {
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
.fourcontentsoneitemtowitem:nth-child(2) {
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
.fourcontentsoneitemtowitem {
|
||||
margin-top: 32rpx;
|
||||
width: 330rpx;
|
||||
|
||||
.fourcontentsoneitemtowitemimage {
|
||||
border-radius: 18rpx;
|
||||
width: 330rpx;
|
||||
height: 356rpx;
|
||||
}
|
||||
|
||||
.fourcontentsoneitemtowitemone {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-top: 16rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.fourcontentsoneitemtowitemtow {
|
||||
margin-top: 10rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
69
pages/index/components/clothingmetals/index.vue
Normal file
69
pages/index/components/clothingmetals/index.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="clothingmetals flex-between">
|
||||
<view class="clothingmetalsitem flex-colum" v-for="(item,index) in list" :key="index"
|
||||
@click="eeInfoseries(item)">
|
||||
<view class="clothingmetalsitemimage">
|
||||
<image :src="item.img" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="clothingmetalsitem_text">
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
data: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
eeInfoseries(e) {
|
||||
uni.pro.navigateTo('mall/series', {
|
||||
id: e.id,
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.clothingmetals {
|
||||
padding: 32rpx 28rpx 0rpx 28rpx;
|
||||
.clothingmetalsitem {
|
||||
.clothingmetalsitemimage {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background: #fafafa;
|
||||
border-radius: 50%;
|
||||
image {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.clothingmetalsitem_text {
|
||||
margin-top: 18rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
104
pages/index/components/employees/index.vue
Normal file
104
pages/index/components/employees/index.vue
Normal file
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="towcontent">
|
||||
<u-scroll-list :indicatorActiveColor="bgbutton" indicatorWidth='40' :indicator='true'>
|
||||
<view class="scrolltowcontent" v-for="(item, index) in list" :key="index" @click="click1(item,index)">
|
||||
<view class="scrolltowcontentitem flex-colum">
|
||||
<image class="scrolltowcontentitem_image" :src="item.avatar" mode="aspectFill"></image>
|
||||
<view class="scrolltowcontentitem_one">
|
||||
{{item.nickname}}
|
||||
</view>
|
||||
<view class="scrolltowcontentitem_tow">
|
||||
{{item.position}}
|
||||
</view>
|
||||
<view class="scrolltowcontentitem_there">
|
||||
预约
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-scroll-list>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
bgbutton: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
click1(e) {
|
||||
uni.pro.navigateTo('order/orderInfos', {
|
||||
id: e.id,
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.towcontent {
|
||||
margin-left: 8rpx;
|
||||
|
||||
.scrolltowcontent {
|
||||
padding: 24rpx 0;
|
||||
|
||||
.scrolltowcontentitem {
|
||||
margin-left: 24rpx;
|
||||
padding: 16rpx 42rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 4rpx 6rpx 2rpx rgba(0, 0, 0, 0.11);
|
||||
border-radius: 18rpx;
|
||||
|
||||
.scrolltowcontentitem_image {
|
||||
width: 116rpx;
|
||||
height: 116rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.scrolltowcontentitem_one {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
margin-top: 6rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.scrolltowcontentitem_tow {
|
||||
margin-top: 2rpx;
|
||||
font-size: 22rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.scrolltowcontentitem_there {
|
||||
margin-top: 12rpx;
|
||||
padding: 4rpx 28rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
229
pages/index/components/flashsale/index.vue
Normal file
229
pages/index/components/flashsale/index.vue
Normal file
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<view class="onecontenttowone flex-start">
|
||||
<view class="onecontenttowone_one">
|
||||
{{title}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="indexbox">
|
||||
<view class="indexboxitem flex-start" v-for="(item,index) in list" :key="index" @click="mallInfoInfo(item)">
|
||||
<image class="indexboxitemimage" :src="item.host_img" mode="aspectFill"></image>
|
||||
<view class="indexboxitemleft flex-colum-start">
|
||||
<view class="indexboxitemleftone">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="indexboxitemlefttow">
|
||||
{{item.intro}}
|
||||
</view>
|
||||
<view class="indexboxitemleftthere flex-colum-start">
|
||||
<view class="indexboxitemlefttheretext flex-start">
|
||||
<view class="indexboxitemlefttheretextone">
|
||||
<text>¥</text>
|
||||
<text>{{item.price}}</text>
|
||||
</view>
|
||||
<view class="indexboxitemlefttheretexttow">
|
||||
¥{{item.y_price}}
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="indexboxitemleftthere_countdown flex-start">
|
||||
<text class="indexboxitemleftthere_countdowntext">倒计时:</text>
|
||||
<view v-if="item.end_times == 0" class="indexboxitemleftthere_countdowntexts">
|
||||
已失效
|
||||
</view>
|
||||
<view v-else class="indexboxitemleftthere_countdowntexts">
|
||||
<uni-countdown @timeup="updateCity" :day="item.end_times.d" :hour="item.end_times.h"
|
||||
:minute="item.end_times.m" :second="item.end_times.s"
|
||||
:indexs='index'></uni-countdown>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniCountdown from '@/components/countdown.vue'
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '银收客'
|
||||
},
|
||||
|
||||
},
|
||||
components: {
|
||||
uniCountdown
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
updateCity(data) {
|
||||
this.list[data].end_times = 0;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
mallInfoInfo(e) { //查看订单详情
|
||||
if (e.end_times != 0) {
|
||||
if (e.spec_type == 1) {
|
||||
uni.pro.navigateTo('mall/mallInfo', {
|
||||
id: e.id,
|
||||
})
|
||||
} else {
|
||||
uni.pro.navigateTo('mall/mallInfos', {
|
||||
id: e.id,
|
||||
})
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '请购时间以结束',
|
||||
icon: "none"
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.index {
|
||||
width: 100%;
|
||||
padding: 32rpx 32rpx 0 32rpx;
|
||||
|
||||
.onecontenttowone::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4rpx;
|
||||
height: 20rpx;
|
||||
background: var(--bg-color-buttonone);
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.onecontenttowone {
|
||||
.onecontenttowone_one {
|
||||
margin-left: 8rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
}
|
||||
|
||||
.indexbox {
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.indexboxitem {
|
||||
margin-top: 24rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
||||
border-radius: 18rpx;
|
||||
padding: 16rpx;
|
||||
|
||||
.indexboxitemimage {
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.indexboxitemleft {
|
||||
flex: auto;
|
||||
height: 220rpx;
|
||||
margin-left: 24rpx;
|
||||
justify-content: flex-start;
|
||||
|
||||
.indexboxitemleftone {
|
||||
width: 400rpx;
|
||||
font-size: 32rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.indexboxitemlefttow {
|
||||
width: 400rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-top: 16rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.indexboxitemleftthere {
|
||||
margin-top: 34rpx;
|
||||
padding-left: 26rpx;
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
background: url(@/static/imge/flashsale.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.indexboxitemlefttheretext {
|
||||
.indexboxitemlefttheretextone {
|
||||
text {
|
||||
font-family: SourceHanSansCN-Bold, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #FF5053;
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
font-weight: bold;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
text:nth-child(1) {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.indexboxitemlefttheretexttow {
|
||||
margin-left: 12rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #999999;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
.indexboxitemleftthere_countdown {
|
||||
.indexboxitemleftthere_countdowntext {
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
font-size: 18rpx;
|
||||
}
|
||||
|
||||
.indexboxitemleftthere_countdowntexts {
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
margin-left: 16rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
100
pages/index/components/flower/index.vue
Normal file
100
pages/index/components/flower/index.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="clothingmetals flex-between">
|
||||
<view class="clothingmetalsitem flex-colum" v-for="(item,index) in list" :key="index"
|
||||
@click="eeInfoseries(item)">
|
||||
<image class="clothingmetalsitemimage" :src="item.img" mode="aspectFill"></image>
|
||||
<view class="clothingmetalsitem_text flex-colum-start">
|
||||
<text>{{item.title}}</text>
|
||||
<text>{{item.english}}</text>
|
||||
</view>
|
||||
<view class="clothingmetalsitem_box flex-center">
|
||||
<text>立即前往</text>
|
||||
<u-icon name="arrow-right" color="##b1b1b1" size="8"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
data: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
eeInfoseries(e) {
|
||||
uni.pro.navigateTo('mall/series', {
|
||||
id: e.id,
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.clothingmetals {
|
||||
padding: 32rpx 28rpx 0rpx 28rpx;
|
||||
|
||||
.clothingmetalsitem {
|
||||
position: relative;
|
||||
width: 48%;
|
||||
height: 194rpx;
|
||||
|
||||
.clothingmetalsitemimage {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 194rpx;
|
||||
}
|
||||
|
||||
.clothingmetalsitem_text {
|
||||
position: absolute;
|
||||
left: 20rpx;
|
||||
top: 20rpx;
|
||||
text:nth-child(1) {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #679D96;
|
||||
}
|
||||
text:nth-child(2) {
|
||||
margin-top: 2rpx;
|
||||
font-size: 16rpx;
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
.clothingmetalsitem_box{
|
||||
position: absolute;
|
||||
left: 20rpx;
|
||||
text-align: center;
|
||||
bottom: 20rpx;
|
||||
width: 128rpx;
|
||||
height: 40rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
281
pages/index/components/index.vue
Normal file
281
pages/index/components/index.vue
Normal file
@@ -0,0 +1,281 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<!-- <navbar :Background='Background' :navtitle='navtitle' :navboxshow="navboxshow" @fatherMethod='fatherMethod'>
|
||||
</navbar> -->
|
||||
<view class="content">
|
||||
<view class="content_item flex-between" v-for="(item,index) in list" :key="index" @click="eeInfo(item)">
|
||||
<view class="content_itemone flex-start">
|
||||
<image :src="item.avatar" mode="aspectFill"></image>
|
||||
<view class="content_itemonetext flex-colum-start">
|
||||
<view class="content_itemonetextone">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<!-- <view class="content_itemonetexttow">
|
||||
<text>5.0分</text>
|
||||
<text>销量</text>
|
||||
</view> -->
|
||||
<view class="content_itemonetextthere">
|
||||
{{item.label}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_itemtow">
|
||||
{{item.distance}}
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="list.length==0 && is_end == true" class="flex-colum">
|
||||
<image :src="bgnothave" mode="aspectFill">
|
||||
</image>
|
||||
</view>
|
||||
<u-loadmore :status="form.status" />
|
||||
|
||||
</view>
|
||||
<bottombbar :valuebbar='0'></bottombbar>
|
||||
</view>
|
||||
</template>
|
||||
<!-- https://cdn.uviewui.com/uview/resources/3c56cbc6216b47db61e37090fdb6619.jpg -->
|
||||
<script>
|
||||
import navbar from '@/components/navbar.vue'
|
||||
import bottombbar from '@/components/bottombbar.vue'
|
||||
export default {
|
||||
components: {
|
||||
navbar,
|
||||
bottombbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
navtitle: '美发店', //名称
|
||||
navboxshow: '0', //显示
|
||||
Background: '#fff',
|
||||
list: [],
|
||||
bgnothave:uni.getStorageSync('bgnothave'),
|
||||
is_end: false,
|
||||
lng: '108.95399',
|
||||
lat: '34.30997',
|
||||
form: {
|
||||
page: 1,
|
||||
status: 'loadmore',
|
||||
},
|
||||
}
|
||||
},
|
||||
async onLoad(e) {
|
||||
await this.$onLaunched
|
||||
// #ifdef MP-WEIXIN
|
||||
this.getAuthorizeInfo() //获取位置请求 金纬度
|
||||
// #endif
|
||||
uni.pro.navigateTo('index/indexInfo')
|
||||
if (!uni.getStorageSync('loginuser')) { //未登录状态
|
||||
this.userlogin()
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
|
||||
this.positionindex()
|
||||
},
|
||||
onReachBottom() {
|
||||
this.positionindex()
|
||||
},
|
||||
methods: {
|
||||
// 用户授权
|
||||
getAuthorizeInfo() {
|
||||
uni.authorize({
|
||||
scope: 'scope.userLocation',
|
||||
success: () => {
|
||||
// 允许授权
|
||||
this.getLocationInfo();
|
||||
},
|
||||
fail: () => {
|
||||
// 拒绝授权
|
||||
this.openConfirm();
|
||||
}
|
||||
})
|
||||
},
|
||||
eeInfo(e) { //跳转
|
||||
console.log(e)
|
||||
uni.cache.set('store_id', e.id) // 判断显示哪家的作品
|
||||
uni.cache.set('details_id', e)
|
||||
uni.pro.navigateTo('index/indexInfo')
|
||||
},
|
||||
// 获取地理位置
|
||||
getLocationInfo() {
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
success: (res) => {
|
||||
this.lng = res.longitude
|
||||
this.lat = res.latitude
|
||||
this.positionindex()
|
||||
},
|
||||
fail: (err) => {
|
||||
this.positionindex()
|
||||
console.log(err, '获取错误')
|
||||
}
|
||||
});
|
||||
},
|
||||
// 再次获取授权。当用户第一次拒绝后再次请求授权
|
||||
openConfirm() {
|
||||
uni.showModal({
|
||||
title: '请求授权当前位置',
|
||||
content: '需要获取您的地理位置，请确认授权',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.openSetting(); // 打开地图权限设置
|
||||
} else if (res.cancel) {
|
||||
uni.showToast({
|
||||
title: '你拒绝了授权，无法获得周边位置信息',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
this.positionindex()
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
async userlogin() {
|
||||
let res = await this.api.userlogin({
|
||||
code: uni.cache.get('weixincode'),
|
||||
// #ifdef H5
|
||||
code: '0c3KOzFa1lkuMF0enAHa1Eu2xG1KOzFJ'
|
||||
// #endif
|
||||
})
|
||||
try {
|
||||
if (res) {
|
||||
uni.cache.set('loginuser', res);
|
||||
this.positionindex()
|
||||
} else {
|
||||
uni.cache.set('loginuser', 0);
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
},
|
||||
async positionindex() {
|
||||
let res = await this.api.positionindex({
|
||||
lng: this.lng,
|
||||
lat: this.lat,
|
||||
page: this.form.page,
|
||||
})
|
||||
if (res.length == 0) {
|
||||
this.is_end = true
|
||||
this.form.status = 'nomore'
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
this.form.page = ++this.form.page;
|
||||
setTimeout(() => {
|
||||
this.list = [...this.list, ...res];
|
||||
if (res.length == 10) {
|
||||
this.form.status = 'loading';
|
||||
} else {
|
||||
this.is_end = true;
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
}, 500)
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.index {
|
||||
.content {
|
||||
padding: 0 28rpx;
|
||||
|
||||
.content_item {
|
||||
border-radius: 12rpx;
|
||||
background: #fff;
|
||||
margin-top: 20rpx;
|
||||
padding: 28rpx 24rpx;
|
||||
|
||||
.content_itemone {
|
||||
image {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.content_itemonetext {
|
||||
width: 300rpx;
|
||||
margin-left: 16rpx;
|
||||
height: 140rpx;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.content_itemonetextone {
|
||||
max-width: 300rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.content_itemonetexttow {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
text:nth-child(1) {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #f37f2f;
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
margin-left: 20rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #585858;
|
||||
}
|
||||
}
|
||||
|
||||
.content_itemonetextthere {
|
||||
max-width: 300rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: 500;
|
||||
padding: 5rpx 8rpx;
|
||||
border-radius: 10rpx;
|
||||
border: 1rpx solid #b1b1b1;
|
||||
color: #b1b1b1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content_itemtow {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-colum_image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
text {
|
||||
margin-top: 30rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
97
pages/index/components/popula/index.vue
Normal file
97
pages/index/components/popula/index.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="fourcontent">
|
||||
<u-scroll-list indicatorActiveColor="#6C6E8D" indicatorWidth='40' :indicator="false">
|
||||
<view class="scrollfourcontent" v-for="(item, index) in list" :key="index"
|
||||
@click="eeInfo(item)">
|
||||
<view class="scrollfourcontenttitem flex-colum">
|
||||
<image class="scrolltowcontentitem_image" :src="item.img" mode="aspectFill"></image>
|
||||
<view class="scrolltowcontentitem_one">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="scrolltowcontentitem_tow">
|
||||
{{item.price}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-scroll-list>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
data: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
eeInfo(e) { //热门项目
|
||||
uni.pro.navigateTo('order/orderInfo', {
|
||||
id: e.id,
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.fourcontent {
|
||||
margin-left: 8rpx;
|
||||
|
||||
.scrollfourcontent {
|
||||
padding: 22rpx 0;
|
||||
|
||||
.scrollfourcontenttitem {
|
||||
width: 280rpx;
|
||||
margin-left: 30rpx;
|
||||
align-items: flex-start;
|
||||
padding-bottom: 16rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 4rpx 6rpx 2px rgba(0, 0, 0, 0.16);
|
||||
border-radius: 18rpx;
|
||||
|
||||
.scrolltowcontentitem_image {
|
||||
border-top-left-radius: 18rpx;
|
||||
border-top-right-radius: 18rpx;
|
||||
width: 280rpx;
|
||||
height: 292rpx;
|
||||
}
|
||||
|
||||
.scrolltowcontentitem_one {
|
||||
padding-left: 16rpx;
|
||||
padding-top: 16rpx;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #28292D;
|
||||
}
|
||||
|
||||
.scrolltowcontentitem_tow {
|
||||
margin-left: 16rpx;
|
||||
margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Roboto-Bold, Roboto;
|
||||
font-weight: bold;
|
||||
color: #F45C4C;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
95
pages/index/components/recommend/index.vue
Normal file
95
pages/index/components/recommend/index.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<view class="onecontenttowone flex-start">
|
||||
<view class="onecontenttowone_one">
|
||||
{{title}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="indexbox flex-between">
|
||||
<image class="indexboxone" @click="eeInfoseries(list[0].mother_id)" :src="list[0].mother_img" mode="widthFix"></image>
|
||||
<view class="flex-colum-start">
|
||||
<image class="indexboxtow" @click="eeInfoseries(list[1].mother_id)" :src="list[1].mother_img" mode="widthFix"></image>
|
||||
<image class="indexboxthere" @click="eeInfoseries(list[2].mother_id)" :src="list[2].mother_img" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '银收客'
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
eeInfoseries(e) {
|
||||
uni.pro.navigateTo('mall/series', {
|
||||
id: e.id,
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.index {
|
||||
width: 100%;
|
||||
padding: 32rpx 32rpx 0 32rpx;
|
||||
|
||||
.onecontenttowone::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4rpx;
|
||||
height: 20rpx;
|
||||
background: var(--bg-color-buttonone);
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.onecontenttowone {
|
||||
.onecontenttowone_one {
|
||||
margin-left: 8rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
}
|
||||
|
||||
.indexbox {
|
||||
margin-top: 24rpx;
|
||||
|
||||
.indexboxone {
|
||||
width: 336rpx;
|
||||
height: 400rpx;
|
||||
}
|
||||
|
||||
.flex-colum-start {
|
||||
justify-content: space-between;
|
||||
height: 400rpx;
|
||||
|
||||
.indexboxtow {
|
||||
width: 334rpx;
|
||||
height: 188rpx;
|
||||
}
|
||||
|
||||
.indexboxthere {
|
||||
margin-top: 28rpx;
|
||||
width: 334rpx;
|
||||
height: 188rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
181
pages/index/components/salezone/index.vue
Normal file
181
pages/index/components/salezone/index.vue
Normal file
@@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<view class="onecontenttowone flex-start">
|
||||
<view class="onecontenttowone_one">
|
||||
{{title}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="indexbox">
|
||||
<view class="indexboxitem flex-start" v-for="(item,index) in list" :key="index">
|
||||
<image class="indexboxitemimage" :src="item.host_img" mode="aspectFill"></image>
|
||||
<view class="indexboxitemleft flex-colum-start">
|
||||
<view class="indexboxitemleftone">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="indexboxitemlefttow">
|
||||
{{item.intro}}
|
||||
</view>
|
||||
<view class="indexboxitemleftthere flex-start">
|
||||
<view class="indexboxitemleftthere_one">
|
||||
<text>¥</text>
|
||||
<text>{{item.price}}</text>
|
||||
</view>
|
||||
<view class="indexboxitemleftthere_tow">
|
||||
¥{{item.y_price}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="indexboxitembox" @click="mallInfoInfo(item)">
|
||||
立即抢购
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '银收客'
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
mallInfoInfo(e) { //查看订单详情
|
||||
uni.pro.navigateTo('mall/mallInfo', {
|
||||
id: e.id,
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.index {
|
||||
width: 100%;
|
||||
padding: 32rpx;
|
||||
|
||||
.onecontenttowone::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4rpx;
|
||||
height: 20rpx;
|
||||
background: var(--bg-color-buttonone);
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.onecontenttowone {
|
||||
.onecontenttowone_one {
|
||||
margin-left: 8rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
}
|
||||
|
||||
.indexbox {
|
||||
.indexboxitem {
|
||||
margin-top: 24rpx;
|
||||
position: relative;
|
||||
padding: 24rpx;
|
||||
width: 100%;
|
||||
height: 212rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
||||
border-radius: 18rpx;
|
||||
|
||||
.indexboxitemimage {
|
||||
width: 164rpx;
|
||||
height: 164rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.indexboxitemleft {
|
||||
height: 164rpx;
|
||||
margin-left: 12rpx;
|
||||
width: 60%;
|
||||
|
||||
.indexboxitemleftone {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.indexboxitemlefttow {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.indexboxitemleftthere {
|
||||
margin-top: 20rpx;
|
||||
align-items: flex-end;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.indexboxitemleftthere_one {
|
||||
font-size: 34rpx;
|
||||
font-family: SourceHanSansCN-Bold, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #FC5F69;
|
||||
|
||||
text:nth-child(1) {
|
||||
font-size: 24rpx;
|
||||
font-family: SourceHanSansCN-Bold, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #FC5F69;
|
||||
}
|
||||
}
|
||||
|
||||
.indexboxitemleftthere_tow {
|
||||
text-decoration: line-through;
|
||||
margin-left: 12rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.indexboxitembox {
|
||||
position: absolute;
|
||||
right: 24rpx;
|
||||
bottom: 24rpx;
|
||||
background: var(--bgbuttonqq);
|
||||
border-radius: 24rpx;
|
||||
padding: 8rpx 22rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: SourceHanSansCN-Bold, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
182
pages/index/components/specials/index.vue
Normal file
182
pages/index/components/specials/index.vue
Normal file
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<view class="indexbox">
|
||||
<image class="indexboximage" :src="img" mode=""></image>
|
||||
<view class="indexbox_box">
|
||||
<view class="indexbox_boxtop flex-between" @click="specials">
|
||||
<view class="indexbox_boxtopone">
|
||||
{{title}}
|
||||
</view>
|
||||
<view class="indexbox_boxtoptow">
|
||||
更多<text>></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="indexbox_boxitem flex-between">
|
||||
<view class="indexbox_boxitem_item flex-colum-start" v-for="(item,index) in list" :key="index"
|
||||
@click="mallInfoInfo(item)">
|
||||
<view class="indexbox_boxitem_itemimage">
|
||||
<image :src="item.host_img" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="indexbox_boxitem_itemone">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="indexbox_boxitem_itemtow flex-start">
|
||||
<text>￥</text>
|
||||
<text>{{item.price}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '每日特价'
|
||||
},
|
||||
img: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
specials(e) { //查看订单详情
|
||||
uni.pro.navigateTo('index/specials', {
|
||||
id: e.id,
|
||||
})
|
||||
},
|
||||
mallInfoInfo(e) { //查看订单详情
|
||||
uni.pro.navigateTo('mall/mallInfo', {
|
||||
id: e.id,
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.index {
|
||||
.indexbox {
|
||||
margin: 32rpx 28rpx 0 28rpx;
|
||||
position: relative;
|
||||
height: 378rpx;
|
||||
|
||||
.indexboximage {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 378rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.indexbox_box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
padding: 16rpx;
|
||||
|
||||
.indexbox_boxtop {
|
||||
margin-top: 8rpx;
|
||||
width: 100%;
|
||||
|
||||
.indexbox_boxtopone {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.indexbox_boxtoptow {
|
||||
font-size: 18rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #FD6C60;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx;
|
||||
padding: 6rpx 16rpx;
|
||||
|
||||
text {
|
||||
font-size: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.indexbox_boxitem {
|
||||
margin-top: 16rpx;
|
||||
padding: 16rpx 12rpx;
|
||||
background: #ffffff;
|
||||
|
||||
.indexbox_boxitem_item {
|
||||
.indexbox_boxitem_itemimage {
|
||||
width: 148rpx;
|
||||
height: 148rpx;
|
||||
background: #F8F8F8;
|
||||
border-radius: 8rpx;
|
||||
|
||||
image {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.indexbox_boxitem_itemone {
|
||||
width: 148rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.indexbox_boxitem_itemtow {
|
||||
margin-top: 12rpx;
|
||||
padding-right: 10rpx;
|
||||
justify-content: flex-end;
|
||||
background: url(@/static/imge/specials.png) no-repeat;
|
||||
background-size: cover;
|
||||
width: 148rpx;
|
||||
height: 48rpx;
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
|
||||
text {
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
text:nth-child(1) {
|
||||
line-height: 50rpx;
|
||||
font-size: 16rpx;
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
line-height: 48rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
194
pages/index/components/vipclass/index.vue
Normal file
194
pages/index/components/vipclass/index.vue
Normal file
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="theretowcontent flex-between">
|
||||
<view class="theretowcontent_item flex-colum" v-for="(item,index) in list" :key="index"
|
||||
@click="clickmemberinfos(item)">
|
||||
<view :class="index == 0?'theretowcontent_item_one':'theretowcontent_item_ones'">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view :class="index == 0?'theretowcontent_item_tow':'theretowcontent_item_tows'">
|
||||
￥{{item.price}}/<text>{{item.frequ}}次</text>
|
||||
</view>
|
||||
<view :class="index == 0?'theretowcontent_item_there':'theretowcontent_item_theres'">
|
||||
({{item.show}})
|
||||
</view>
|
||||
<view :class="index == 0?'theretowcontent_item_box':'theretowcontent_item_boxs'">
|
||||
{{item.is_user_sec == '0'?'购买':'加购'}}
|
||||
</view>
|
||||
<image class="theretowcontent_item_image" :src="item.img" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
data: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
clickmemberinfos(e) { //购买会员卡
|
||||
if (e.is_user_sec == 0) {
|
||||
uni.pro.navigateTo('my/member/memberinfos', {
|
||||
id: e.id,
|
||||
})
|
||||
// async toworder() { //会员卡
|
||||
// let res = await this.api.userreceivebalancecar({
|
||||
// store_id: uni.cache.get('store_id') // 判断显示哪家的作品
|
||||
// })
|
||||
// uni.showToast({
|
||||
// title: '领取成功',
|
||||
// icon: 'none'
|
||||
// });
|
||||
// setTimeout(() => {
|
||||
// uni.pro.navigateTo('my/member/index')
|
||||
// }, 1500);
|
||||
// },
|
||||
} else {
|
||||
uni.pro.navigateTo('my/member/memberinfo', {
|
||||
id: e.id,
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.theretowcontent {
|
||||
width: 100%;
|
||||
padding: 24rpx 32rpx;
|
||||
|
||||
.theretowcontent_item {
|
||||
padding: 16rpx;
|
||||
width: 48%;
|
||||
border-radius: 10rpx;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
.theretowcontent_item_one {
|
||||
width: 55%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.theretowcontent_item_ones {
|
||||
width: 55%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #422A07;
|
||||
}
|
||||
|
||||
.theretowcontent_item_tow {
|
||||
margin-top: 20rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Roboto-Regular, Roboto;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
|
||||
text {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.theretowcontent_item_tows {
|
||||
margin-top: 20rpx;
|
||||
font-family: Roboto-Regular, Roboto;
|
||||
font-weight: 400;
|
||||
color: #422A07;
|
||||
font-size: 28rpx;
|
||||
|
||||
text {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.theretowcontent_item_there {
|
||||
margin-top: 6rpx;
|
||||
font-size: 20rpx;
|
||||
width: 100%;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #D1CECE;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.theretowcontent_item_theres {
|
||||
margin-top: 6rpx;
|
||||
font-size: 20rpx;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #422A07;
|
||||
}
|
||||
|
||||
.theretowcontent_item_box {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 16rpx;
|
||||
padding: 6rpx 26rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Roboto-Bold, Roboto;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.73) 0%, rgba(128, 128, 128, 0.73) 100%);
|
||||
box-shadow: 0px 6px 12rpx 2rpx rgba(49, 47, 47, 0.85);
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.theretowcontent_item_boxs {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 16rpx;
|
||||
padding: 6rpx 26rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Roboto-Bold, Roboto;
|
||||
font-weight: bold;
|
||||
color: #F6AE5B;
|
||||
background: linear-gradient(180deg, #F9F9F9 0%, #FADAB5 100%);
|
||||
box-shadow: 0px 6rpx 12rpx 2px rgba(226, 172, 110, 0.55);
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.theretowcontent_item_image {
|
||||
border-radius: 16rpx;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1163
pages/index/hotel.vue
Normal file
1163
pages/index/hotel.vue
Normal file
File diff suppressed because it is too large
Load Diff
665
pages/index/index.vue
Normal file
665
pages/index/index.vue
Normal file
@@ -0,0 +1,665 @@
|
||||
<template>
|
||||
<view class="index" :style="[theme]">
|
||||
<view class="onecontent" v-if="listswiper.length != 0">
|
||||
<u-swiper indicator :list="listswiper" indicatorMode='dot' height='144' radius='12'></u-swiper>
|
||||
</view>
|
||||
<!-- clothingmetals服装金刚区 -->
|
||||
<clothingmetals v-if="list.goods_type.length != 0 && model_type == 'Dress'" :list='list.goods_type'>
|
||||
</clothingmetals>
|
||||
<!-- clothingmetals鲜花服装金刚区 -->
|
||||
<flower v-if="list.goods_type.length != 0 && model_type == 'Flower'" :list='list.goods_type'></flower>
|
||||
<!-- 每日特价 -->
|
||||
<specials v-if="list.special.data.length != 0" :img='list.special.img' :list='list.special.data'
|
||||
:title='list.special.title'></specials>
|
||||
<!-- 限时抢购 -->
|
||||
<flashsale v-if="list.panic.data.length != 0" :title='list.panic.title' :list='list.panic.data'></flashsale>
|
||||
<!-- 热榜推荐-->
|
||||
<view class="contentclothing" v-if="list.is_re.img != null" style="margin-top: 16rpx;">
|
||||
<view class="contentclothingimage" v-if="list.is_re.img != null">
|
||||
<image :src="list.is_re.img" mode="aspectFill"></image>
|
||||
</view>
|
||||
<clothing v-if="list.is_re.data.length != 0" :list='list.is_re.data'></clothing>
|
||||
</view>
|
||||
<!-- 优秀好员工第一份 -->
|
||||
<view v-if="list.people.length != 0" style="margin-top: 16rpx;">
|
||||
<view class="contenttext">
|
||||
<text class="contenttexttext">{{list.position_nickname || ''}}</text>
|
||||
</view>
|
||||
<employees :list='list.people' :bgbutton='theme.bgbutton'></employees>
|
||||
</view>
|
||||
<!-- 优秀好员工第二份 -->
|
||||
<view v-if="list.people_two.length != 0">
|
||||
<view class="contenttext">
|
||||
<text class="contenttexttext">{{list.position_nickname_two || ''}}</text>
|
||||
</view>
|
||||
<employees :list='list.people_two' :bgbutton='theme.bgbutton'></employees>
|
||||
</view>
|
||||
<!-- 会员卡 -->
|
||||
<vipclass v-if="list.vip.length != 0" :list='list.vip'></vipclass>
|
||||
<!-- 热门推荐 -->
|
||||
<recommend :title='list.mother_goods_type.title' :list='list.mother_goods_type.data'
|
||||
v-if="list.mother_goods_type.data.length != 0"></recommend>
|
||||
<!-- 秒杀专区 -->
|
||||
<salezone :title='list.goods.title' :list='list.goods.data' v-if="list.goods.data.length != 0"></salezone>
|
||||
<!-- 热门项目 -->
|
||||
<view v-if="list.service.length != 0" style="margin-top: 16rpx;">
|
||||
<view class="contenttext">
|
||||
<text class="contenttexttext">热门项目</text>
|
||||
</view>
|
||||
<popula :list='list.service'></popula>
|
||||
</view>
|
||||
|
||||
<bottombbar :valuebbar='0'></bottombbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from 'dayjs'
|
||||
import bottombbar from '@/components/bottombbar.vue'
|
||||
import clothingmetals from './components/clothingmetals/index.vue'
|
||||
import employees from './components/employees/index.vue'
|
||||
import clothing from './components/clothing/index.vue'
|
||||
import flower from './components/flower/index.vue'
|
||||
import vipclass from './components/vipclass/index.vue'
|
||||
import recommend from './components/recommend/index.vue'
|
||||
import salezone from './components/salezone/index.vue'
|
||||
import popula from './components/popula/index.vue'
|
||||
import specials from './components/specials/index.vue'
|
||||
import flashsale from './components/flashsale/index.vue'
|
||||
export default {
|
||||
components: {
|
||||
bottombbar,
|
||||
clothingmetals,
|
||||
employees,
|
||||
clothing,
|
||||
flower,
|
||||
recommend,
|
||||
salezone,
|
||||
popula,
|
||||
vipclass,
|
||||
specials,
|
||||
flashsale
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
model_type: '',
|
||||
indicators: false,
|
||||
list: {
|
||||
vip: [],
|
||||
service: [],
|
||||
people: [],
|
||||
people_two: [],
|
||||
goods_type: [],
|
||||
mother_goods_type: {
|
||||
data: [],
|
||||
img: null
|
||||
},
|
||||
goods: {
|
||||
data: [],
|
||||
img: null
|
||||
},
|
||||
special: {
|
||||
data: [],
|
||||
img: '',
|
||||
title: '每日特价'
|
||||
},
|
||||
panic: {
|
||||
data: [],
|
||||
title: '限时抢购'
|
||||
},
|
||||
theme_re: {
|
||||
data: [],
|
||||
img: null
|
||||
},
|
||||
is_re: {
|
||||
data: [],
|
||||
img: null
|
||||
},
|
||||
new: {
|
||||
data: [],
|
||||
img: null
|
||||
}
|
||||
},
|
||||
listswiper: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
async onLoad(e) {
|
||||
// #ifdef H5
|
||||
await this.$onLaunched
|
||||
// #endif
|
||||
try {
|
||||
if (e.scene) {
|
||||
uni.cache.set('store_id', e.scene) // 判断显示哪家的作品
|
||||
this.userloginss() //刷新初始数据
|
||||
} else {
|
||||
// #ifdef MP-WEIXIN || MP-ALIPAY
|
||||
if (!uni.cache.get('loginuser').userinfo) {
|
||||
this.userloginss() //刷新初始数据
|
||||
} else {
|
||||
this.indexnewappclassindex()
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
} catch (e) {}
|
||||
// #ifdef H5
|
||||
let res = await this.api.userlogin({
|
||||
code: '0c3KOzFa1lkuMF0enAHa1Eu2xG1KOzFJ',
|
||||
store_id: 65, // 判断显示哪家的作品
|
||||
//【2,美容】【62,美发】【63,健身】【65,口腔】【66,足疗按摩】【89,社区】
|
||||
//【72,宠物生活】【74,婚纱摄影】【79,服装】【80,鲜花】【82, 送水】【88, 母婴】【99, 酒店】
|
||||
})
|
||||
if (res) {
|
||||
if (res.model_type == 'Hotel') {
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/hotel'
|
||||
});
|
||||
}
|
||||
uni.cache.set('loginuser', res);
|
||||
uni.cache.set('store_id', res.store_id) // 判断显示哪家的2
|
||||
uni.cache.set('openId', res.userinfo.open_id);
|
||||
this.indexnewappclassindex()
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
onShow() {
|
||||
if (uni.getStorageSync('loginuser').model_type == 'Hotel') {
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/hotel'
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click1(a, e) { //优秀员工跳转
|
||||
uni.pro.navigateTo('order/orderInfos', {
|
||||
id: a.id,
|
||||
})
|
||||
},
|
||||
async userloginss() {
|
||||
// #ifdef MP-WEIXIN || MP-ALIPAY
|
||||
uni.login({ //alipay weixin
|
||||
// #ifdef MP-ALIPAY
|
||||
provider: 'alipay',
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
provider: 'weixin',
|
||||
// #endif
|
||||
success: async (data) => {
|
||||
console.log(data)
|
||||
try {
|
||||
uni.cache.set('weixincode', data.code);
|
||||
let res = await this.api.userlogin({
|
||||
code: uni.cache.get('weixincode'),
|
||||
store_id: uni.cache.get('store_id') // 判断显示哪家的作品
|
||||
})
|
||||
if (res) {
|
||||
if (res.model_type == 'Hotel') {
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/hotel'
|
||||
});
|
||||
}
|
||||
uni.cache.set('loginuser', res);
|
||||
uni.cache.set('store_id', res.store_id) // 判断显示哪家的作品
|
||||
uni.cache.set('openId', res.userinfo.open_id);
|
||||
// uni.pro.navigateTo('order/orderInfos')
|
||||
this.indexnewappclassindex()
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
|
||||
},
|
||||
async clickmemberinfos(e) { //购买会员卡
|
||||
if (e.is_user_sec == 0) {
|
||||
uni.pro.navigateTo('my/member/memberinfos', {
|
||||
id: e.id,
|
||||
})
|
||||
// async toworder() { //会员卡
|
||||
// let res = await this.api.userreceivebalancecar({
|
||||
// store_id: uni.cache.get('store_id') // 判断显示哪家的作品
|
||||
// })
|
||||
// uni.showToast({
|
||||
// title: '领取成功',
|
||||
// icon: 'none'
|
||||
// });
|
||||
// setTimeout(() => {
|
||||
// uni.pro.navigateTo('my/member/index')
|
||||
// }, 1500);
|
||||
// },
|
||||
} else {
|
||||
uni.pro.navigateTo('my/member/memberinfo', {
|
||||
id: e.id,
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
mallInfoInfo(e) { //查看订单详情
|
||||
uni.pro.navigateTo('mall/mallInfo', {
|
||||
id: e.id,
|
||||
})
|
||||
},
|
||||
|
||||
eeInfoseries(e) {
|
||||
uni.pro.navigateTo('mall/series', {
|
||||
id: e.goods_type_id,
|
||||
})
|
||||
},
|
||||
async indexnewappclassindex() { //首页数据
|
||||
let res = await this.api.indexnewappclassindex({
|
||||
store_id: uni.cache.get('store_id')
|
||||
})
|
||||
try {
|
||||
if (res) {
|
||||
//前端模拟数据
|
||||
this.list = res
|
||||
if (res.vip) { //会员卡
|
||||
this.list.vip = res.vip
|
||||
} else {
|
||||
this.list.vip = []
|
||||
}
|
||||
if (res.people_two) { ///优秀员工2
|
||||
this.list.people_two = res.people_two
|
||||
} else {
|
||||
this.list.people_two = []
|
||||
}
|
||||
if (res.service) { //热门项目
|
||||
this.list.service = res.service
|
||||
} else {
|
||||
this.list.service = []
|
||||
}
|
||||
if (res.people) { //优秀员工1
|
||||
this.list.people = res.people
|
||||
} else {
|
||||
this.list.people = []
|
||||
}
|
||||
if (res.store.bananer) { //轮播
|
||||
this.listswiper = res.store.bananer
|
||||
} else {
|
||||
this.listswiper = []
|
||||
}
|
||||
if (res.mother_goods_type) { //热门推荐 母婴
|
||||
this.list.mother_goods_type = res.mother_goods_type
|
||||
} else {
|
||||
this.$set(this.list, 'mother_goods_type', {
|
||||
img: null,
|
||||
data: []
|
||||
})
|
||||
}
|
||||
if (res.goods) { //秒杀专区
|
||||
this.list.goods = res.goods
|
||||
} else {
|
||||
this.$set(this.list, 'goods', {
|
||||
img: null,
|
||||
data: []
|
||||
})
|
||||
}
|
||||
if (res.special) { //每日特价
|
||||
this.list.special = res.special
|
||||
this.list.special.data = res.special.data.slice(0, 4)
|
||||
} else {
|
||||
this.$set(this.list, 'special', {
|
||||
img: null,
|
||||
title: '每日特价',
|
||||
data: []
|
||||
})
|
||||
}
|
||||
if (res.panic) { //限时抢购
|
||||
this.list.panic = res.panic
|
||||
var dates = new Date().getTime();
|
||||
let recommendList = this.list.panic.data;
|
||||
recommendList.forEach((item, index) => {
|
||||
var leftTime = item.end_time - dates; //计算两日期之间相差的毫秒数
|
||||
if (leftTime >= 0) {
|
||||
let d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
|
||||
let h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
|
||||
let m = Math.floor(leftTime / 1000 / 60 % 60);
|
||||
let s = Math.floor(leftTime / 1000 % 60);
|
||||
item.end_times = {
|
||||
d: d,
|
||||
h: h,
|
||||
m: m,
|
||||
s: s
|
||||
}
|
||||
} else {
|
||||
item.end_times = 0
|
||||
}
|
||||
})
|
||||
this.list.panic.data = recommendList
|
||||
} else {
|
||||
this.$set(this.list, 'panic', {
|
||||
title: '限时抢购',
|
||||
data: []
|
||||
})
|
||||
}
|
||||
if (res.theme_re) { //服装
|
||||
this.list.theme_re = res.theme_re
|
||||
} else {
|
||||
this.$set(this.list, 'theme_re', {
|
||||
img: null,
|
||||
data: []
|
||||
})
|
||||
}
|
||||
if (res.discount) { //服装
|
||||
this.list.discount = res.discount
|
||||
} else {
|
||||
this.$set(this.list, 'new', {
|
||||
discount: null,
|
||||
})
|
||||
}
|
||||
if (res.new) { //服装
|
||||
this.list.new = res.new
|
||||
} else {
|
||||
this.$set(this.list, 'new', {
|
||||
img: null,
|
||||
data: []
|
||||
})
|
||||
}
|
||||
if (res.goods_type) { //服装金刚区
|
||||
this.list.goods_type = res.goods_type
|
||||
} else {
|
||||
this.$set(this.list, 'goods_type', [])
|
||||
}
|
||||
if (res.is_re) { //服装
|
||||
this.list.is_re = res.is_re
|
||||
} else {
|
||||
this.$set(this.list, 'is_re', {
|
||||
img: null,
|
||||
data: []
|
||||
})
|
||||
}
|
||||
uni.cache.set('store_id', res.store.id) // 返回的id
|
||||
if (uni.cache.get('store_id')) { //store_id 行业id
|
||||
this.$store.dispatch("actionsclassification");
|
||||
}
|
||||
uni.setNavigationBarTitle({ //定义标题
|
||||
title: res.store.title
|
||||
});
|
||||
this.model_type = uni.cache.get('loginuser').model_type //类别分类
|
||||
|
||||
// this.list.describe = res.describe.replace(/\<img/g,
|
||||
// '<img style="max-width:100%;height:auto" ');
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
::v-deep .u-scroll-list__indicator {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.index {
|
||||
.onecontent {
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.contentclothing {
|
||||
padding: 8rpx 32rpx;
|
||||
width: 100%;
|
||||
|
||||
.contentclothingimageclassimagebuya {
|
||||
width: auto;
|
||||
margin: 48rpx 0;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.contentclothingimageclass {
|
||||
margin-top: 50rpx;
|
||||
|
||||
.contentclothingclassimage {
|
||||
width: 224.35rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.contentclothingimageclassbox {
|
||||
position: relative;
|
||||
margin-top: 18rpx;
|
||||
width: 100%;
|
||||
background: #ABAD98;
|
||||
border-radius: 18rpx;
|
||||
border: 2rpx solid #404136;
|
||||
padding: 28rpx 18rpx;
|
||||
|
||||
.contentclothingimageclassboxitem:nth-child(1) {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.contentclothingimageclassboxitem {
|
||||
position: relative;
|
||||
border-left: 1rpx dashed #fff;
|
||||
padding: 0 18rpx;
|
||||
|
||||
.contentclothingimageclassboxitemone {
|
||||
font-size: 48rpx;
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.contentclothingimageclassboxitemtow {
|
||||
margin-left: 10rpx;
|
||||
|
||||
text:nth-child(1) {
|
||||
font-size: 16rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
font-size: 20rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
}
|
||||
|
||||
.contentclothingimageclassboxitemabsolute {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 18rpx;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
text-align: center;
|
||||
font-size: 16rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
background: #7e8a83;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contentclothingimageclassbox::after {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
left: -11px;
|
||||
bottom: 50%;
|
||||
transform: translateY(50%);
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 0 11px 11px 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.contentclothingimageclassbox::before {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
right: -11px;
|
||||
bottom: 50%;
|
||||
transform: translateY(50%);
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 11px 0 0 11px;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.contentclothingimage {
|
||||
width: 130rpx;
|
||||
height: 52rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.contentclothingbox {
|
||||
.fourcontents {
|
||||
.scrollfourcontents {
|
||||
padding: 22rpx 0;
|
||||
|
||||
.scrollfourcontenttitems {
|
||||
width: 246rpx;
|
||||
height: 296rpx;
|
||||
margin-left: 30rpx;
|
||||
position: relative;
|
||||
|
||||
.scrolltowcontentitem_images {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 18rpx;
|
||||
}
|
||||
|
||||
.scrolltowcontentitem_ones {
|
||||
position: absolute;
|
||||
padding: 8rpx 10rpx;
|
||||
bottom: 12rpx;
|
||||
left: 14rpx;
|
||||
background: rgba(0, 0, 0, 0.32);
|
||||
border-radius: 20rpx;
|
||||
font-size: 18rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contentclothingboxoone {
|
||||
.fourcontentsoneitem {
|
||||
width: 100%;
|
||||
margin-top: 24rpx;
|
||||
|
||||
.fourcontentsoneitemimage {
|
||||
width: 278rpx;
|
||||
border-radius: 18rpx;
|
||||
height: 194rpx;
|
||||
}
|
||||
|
||||
.fourcontentsoneitemtext {
|
||||
flex: 1;
|
||||
height: 194rpx;
|
||||
margin-left: 10rpx;
|
||||
|
||||
.fourcontentsoneitemtextone {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fourcontentsoneitemtexttow {
|
||||
margin-top: 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fourcontentsoneitemtow {
|
||||
width: 100%;
|
||||
|
||||
.fourcontentsoneitemtowitem {
|
||||
margin-top: 32rpx;
|
||||
width: 330rpx;
|
||||
|
||||
.fourcontentsoneitemtowitemimage {
|
||||
border-radius: 18rpx;
|
||||
width: 330rpx;
|
||||
height: 356rpx;
|
||||
}
|
||||
|
||||
.fourcontentsoneitemtowitemone {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-top: 16rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.fourcontentsoneitemtowitemtow {
|
||||
margin-top: 10rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contenttext {
|
||||
padding: 0 32rpx;
|
||||
|
||||
.contenttexttext {
|
||||
width: auto;
|
||||
position: relative;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.contenttexttext::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -5rpx;
|
||||
right: -6rpx;
|
||||
z-index: 0;
|
||||
display: inline-block;
|
||||
width: 118rpx;
|
||||
height: 10rpx;
|
||||
background: var(--bgbuttonbackground);
|
||||
border-radius: 8rpx;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
600
pages/index/indexInfo.vue
Normal file
600
pages/index/indexInfo.vue
Normal file
@@ -0,0 +1,600 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<!-- <navbar :Background='Background' :navtitle='navtitle' :navMethodcan='1' :navboxshow="navboxshow"
|
||||
@fatherMethod='fatherMethod'>
|
||||
</navbar> -->
|
||||
<image class="index_top_imge" :src="list.store.background" mode="aspectFill"></image>
|
||||
<view class="index_box">
|
||||
<view class="oneindex_box">
|
||||
<view class="oneindex_box_image">
|
||||
<image :src="list.store.avatar" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="oneindex_box_text flex-start">
|
||||
<view class="oneindex_box_text_one">
|
||||
{{list.store.title}}
|
||||
</view>
|
||||
<view class="oneindex_box_text_tow flex-start">
|
||||
<u-rate :count="count" v-model="list.store.score" readonly active-color="#f1cb66"
|
||||
inactive-color="#F1CB66"></u-rate>
|
||||
<text class="oneindex_box_text_towtext">{{list.store.score}}.0</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towindex_box_text flex-between">
|
||||
<view class="towindex_box_text_one">
|
||||
营业时间：{{list.store.b_hours}}
|
||||
</view>
|
||||
<view class="towindex_box_text_tow flex-start" @click="mobilemobile(list.store.mobile)">
|
||||
<u-icon name="phone-fill" color="#2ca248" size="20"></u-icon>
|
||||
<text>联系商家</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towindex_box_dw flex-start" @click="openmap">
|
||||
<image src="@/static/positioning.png" mode="aspectFill"></image>
|
||||
<text style="margin-left: 12rpx;">{{list.store.address}}</text>
|
||||
</view>
|
||||
<view class="towindex_box_bouttn flex-start">
|
||||
<text v-for="(item,index) in list.store.label" :key="index">{{item}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towindextow" @click="toworder()" v-if="list.is_balance_vip == 0">
|
||||
<image :src="list.vip_img" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="thereindexone flex-between">
|
||||
<view class="thereindexone_item flex-colum" v-for="(item,indexs) in list.store_type" :key="indexs"
|
||||
@click="clickthereindexone(item.id)">
|
||||
<image :src="item.img" mode="aspectFill"></image>
|
||||
<text>{{item.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fourindexone">
|
||||
<view class="fourindexone_one flex-center">
|
||||
<text class="fourindexone_one_o"></text>
|
||||
<text class="fourindexone_one-text">预约服务</text>
|
||||
<text class="fourindexone_one_T"></text>
|
||||
</view>
|
||||
<view class="fourindexone_box flex-colum" v-for="(item,index) in list.store_service" :key="index"
|
||||
@click="eeInfo(item)">
|
||||
<view class="fourindexone_item flex-start">
|
||||
<image class="fourindexone_itemimage" :src="item.img" mode="aspectFill"></image>
|
||||
<view class="fourindexone_itemview flex-colum-start">
|
||||
<view class="fourindexone_itemview_one">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="fourindexone_itemview_tow">
|
||||
{{item.describe}}
|
||||
</view>
|
||||
<view class="fourindexone_itemview_there flex-start">
|
||||
<view class="fourindexone_itemview_there_text">
|
||||
<text>¥</text>{{item.price}}
|
||||
</view>
|
||||
<view class="fourindexone_itemview_there_text_x">
|
||||
¥{{item.y_price}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fourindexone_item_there">
|
||||
立即预约
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fiveindexone">
|
||||
<view class="fiveindexonehtml" v-html="list.describe">
|
||||
</view>
|
||||
<view class="sixindex" @click="clickthereindexone(0)">
|
||||
立马预约服务
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<bottombbar :valuebbar='1'></bottombbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navbar from '@/components/navbar.vue'
|
||||
import bottombbar from '@/components/bottombbar.vue'
|
||||
export default {
|
||||
components: {
|
||||
navbar,
|
||||
bottombbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
navtitle: '', //名称
|
||||
navboxshow: '3', //显示
|
||||
Background: '#fff',
|
||||
count: 5,
|
||||
value: 2,
|
||||
list: {}
|
||||
}
|
||||
},
|
||||
async onLoad(e) {
|
||||
if (e) {
|
||||
uni.cache.set('store_id', e.scene) // 判断显示哪家的作品
|
||||
}
|
||||
await this.$onLaunched
|
||||
// uni.reLaunch({
|
||||
// url: '/pages/index/components/hairdressing'
|
||||
// })
|
||||
this.indexappclassindex()
|
||||
},
|
||||
methods: {
|
||||
async userlogin() { //登录
|
||||
let res = await this.api.userlogin({
|
||||
code: uni.cache.get('weixincode'),
|
||||
// #ifdef H5
|
||||
code: '0c3KOzFa1lkuMF0enAHa1Eu2xG1KOzFJ'
|
||||
// #endif
|
||||
})
|
||||
try {
|
||||
if (res) {
|
||||
uni.cache.set('loginuser', res);
|
||||
this.positionindex()
|
||||
} else {
|
||||
uni.cache.set('loginuser', 0);
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
},
|
||||
fatherMethod() {
|
||||
uni.cache.set('details_id', '')
|
||||
uni.cache.set('store_id', '')
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
},
|
||||
async toworder() { //会员卡
|
||||
let res = await this.api.userreceivebalancecar({
|
||||
store_id: uni.cache.get('store_id') // 判断显示哪家的作品
|
||||
})
|
||||
uni.showToast({
|
||||
title: '领取成功',
|
||||
icon: 'none'
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.pro.navigateTo('my/member/index')
|
||||
}, 1500);
|
||||
},
|
||||
openmap() { //打开地图
|
||||
uni.openLocation({
|
||||
latitude: Number(this.list.store.lat),
|
||||
longitude: Number(this.list.store.lng),
|
||||
name: this.list.store.title,
|
||||
address: this.list.store.address,
|
||||
success: (res) => {
|
||||
console.log('success');
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log(res)
|
||||
}
|
||||
})
|
||||
},
|
||||
eeInfo(e) { //查看订单详情
|
||||
uni.pro.navigateTo('order/orderInfo', {
|
||||
id: e.id,
|
||||
})
|
||||
},
|
||||
clickthereindexone(e) {
|
||||
uni.pro.navigateTo('order/index', {
|
||||
id: e
|
||||
})
|
||||
},
|
||||
mobilemobile(e) { //打电话
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: e //仅为示例
|
||||
});
|
||||
},
|
||||
async indexappclassindex() { //店铺详情
|
||||
let res = await this.api.indexappclassindex({
|
||||
store_id: uni.cache.get('store_id')
|
||||
})
|
||||
try {
|
||||
if (res) {
|
||||
console.log(res)
|
||||
this.list = res
|
||||
uni.cache.set('store_id', res.store.id) // 返回的id
|
||||
if (uni.cache.get('store_id')) {
|
||||
this.$store.dispatch("actionsclassification");
|
||||
}
|
||||
uni.setNavigationBarTitle({
|
||||
title: res.store.title
|
||||
});
|
||||
this.list.describe = res.describe.replace(/\<img/g,
|
||||
'<img style="max-width:100%;height:auto" ');
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
|
||||
.index {
|
||||
.index_top_imge {
|
||||
width: 100%;
|
||||
height: 448rpx;
|
||||
z-index: 98;
|
||||
}
|
||||
|
||||
.index_box {
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
background: #FFFFFF;
|
||||
border-radius: 26rpx 26rpx 0px 0px;
|
||||
|
||||
.oneindex_box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 44rpx 28rpx;
|
||||
|
||||
.oneindex_box_image {
|
||||
position: absolute;
|
||||
left: 28rpx;
|
||||
top: -28rpx;
|
||||
width: 108rpx;
|
||||
height: 108rpx;
|
||||
|
||||
image {
|
||||
border-radius: 20rpx;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.oneindex_box_text {
|
||||
margin-left: 140rpx;
|
||||
|
||||
.oneindex_box_text_one {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.oneindex_box_text_tow {
|
||||
.oneindex_box_text_towtext {
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #F1CB66;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towindex_box_text {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.towindex_box_text_one {
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towindex_box_text_tow {
|
||||
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.towindex_box_dw {
|
||||
image {
|
||||
width: 25.37rpx;
|
||||
height: 33.02rpx;
|
||||
}
|
||||
|
||||
margin-top: 24rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular,
|
||||
Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.towindex_box_bouttn {
|
||||
margin-top: 32rpx;
|
||||
|
||||
text:nth-child(1) {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-left: 16rpx;
|
||||
padding: 8rpx 14rpx;
|
||||
background: #F7F7F7;
|
||||
border-radius: 8rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towindextow {
|
||||
padding: 32rpx;
|
||||
border-top: 16rpx solid #F7F7F7;
|
||||
border-bottom: 16rpx solid #F7F7F7;
|
||||
background: #FFFFFF;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 150rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.thereindexone {
|
||||
padding: 32rpx 28rpx;
|
||||
|
||||
.thereindexone_item {
|
||||
image {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-top: 16rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fourindexone {
|
||||
padding: 32rpx 28rpx;
|
||||
|
||||
.fourindexone_one {
|
||||
font-size: 32rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #1A1A1A;
|
||||
|
||||
.fourindexone_one_o {
|
||||
display: inline-block;
|
||||
width: 34rpx;
|
||||
height: 4rpx;
|
||||
background: linear-gradient(94deg, rgba(255, 255, 255, 0) 0%, #373746 100%);
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.fourindexone_one-text {
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
|
||||
.fourindexone_one_T {
|
||||
display: inline-block;
|
||||
width: 34rpx;
|
||||
height: 4rpx;
|
||||
background: linear-gradient(266deg, rgba(255, 255, 255, 0) 0%, #373746 100%);
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fourindexone_box {
|
||||
.fourindexone_item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 32rpx 0;
|
||||
border-bottom: 1rpx dashed #F7F7F7;
|
||||
|
||||
.fourindexone_itemimage {
|
||||
width: 164rpx;
|
||||
height: 164rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.fourindexone_item_there {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 32rpx;
|
||||
padding: 16rpx 22rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(180deg, #A3A7D5 0%, #414154 100%);
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.fourindexone_itemview {
|
||||
|
||||
height: 164rpx;
|
||||
justify-content: space-evenly;
|
||||
margin-left: 24rpx;
|
||||
|
||||
.fourindexone_itemview_one {
|
||||
width: 300rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.fourindexone_itemview_tow {
|
||||
width: 300rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.fourindexone_itemview_there {
|
||||
.fourindexone_itemview_there_text {
|
||||
font-size: 34rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #FC5F69;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fourindexone_itemview_there_text_x {
|
||||
margin-left: 12rpx;
|
||||
text-decoration: line-through;
|
||||
font-size: 20rpx;
|
||||
font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fiveindexone {
|
||||
// padding: 32rpx 28rpx;
|
||||
width: 100%;
|
||||
|
||||
// background: linear-gradient(309deg, #FFFFFF 0%, #1A1A1A 100%);
|
||||
// border-radius: 32rpx 32rpx 0px 0px;
|
||||
.fiveindexonehtml {
|
||||
width: 100%;
|
||||
|
||||
/deep/ img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.fiveindexone_one {
|
||||
.fiveindexone_oneimage {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
|
||||
.fiveindexone_one_text {
|
||||
margin-left: 12rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.fiveindextow {
|
||||
padding: 28rpx;
|
||||
margin-top: 32rpx;
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 18rpx;
|
||||
|
||||
.fiveindextowitem:nth-child(1) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.fiveindextowitem {
|
||||
margin-top: 32rpx;
|
||||
width: 100%;
|
||||
|
||||
view {
|
||||
width: 33%;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fiveindexthere {
|
||||
overflow-x: scroll;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.fiveindexthere_item:nth-child(1) {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.fiveindexthere_item {
|
||||
margin-left: 54rpx;
|
||||
|
||||
.fiveindexthere_itemimage {
|
||||
width: 120rpx;
|
||||
height: 152rpx;
|
||||
}
|
||||
|
||||
.fiveindexthere_item_one {
|
||||
margin-top: 8rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.fiveindexthere_item_tow {
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 0.57);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fiveindexfour {
|
||||
.fiveindexfourimage {
|
||||
margin-top: 70rpx;
|
||||
position: relative;
|
||||
width: 370rpx;
|
||||
height: 396rpx;
|
||||
background: linear-gradient(316deg, #636363 0%, #ACACAC 100%);
|
||||
border-radius: 16rpx;
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
top: -30rpx;
|
||||
left: -18rpx;
|
||||
border-radius: 16rpx;
|
||||
width: 372rpx;
|
||||
height: 412rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fiveindexfourtext {
|
||||
flex: 1;
|
||||
margin-left: 70rpx;
|
||||
|
||||
text {
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sixindex {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
padding: 24rpx 0;
|
||||
text-align: center;
|
||||
background: linear-gradient(360deg, #FBDDBB 0%, #FEE3C5 100%);
|
||||
border-radius: 48rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #422A07;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
151
pages/index/iose.vue
Normal file
151
pages/index/iose.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<button @tap="chooseVideo()">视频上传</button>
|
||||
<button @tap="img()">图片上传</button>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
var timetamp = new Date().getTime();
|
||||
var uploadFileSize = 1024 * 1024 * 100; // 上传文件的大小限制100m
|
||||
var osshost = ''; //阿里云对象储存地址
|
||||
function random_string(len) {
|
||||
len = len || 32;
|
||||
var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
|
||||
var maxPos = chars.length;
|
||||
var pwd = '';
|
||||
for (let i = 0; i < len; i++) {
|
||||
pwd += chars.charAt(Math.floor(Math.random() * maxPos));
|
||||
}
|
||||
return pwd;
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
videoSrc: '',
|
||||
Imgsrc: '',
|
||||
showVideo: false,
|
||||
formData: {
|
||||
original: 0,
|
||||
type: 1,
|
||||
detail: '',
|
||||
tags: '',
|
||||
images: [],
|
||||
video: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
chooseVideo() {
|
||||
var self = this;
|
||||
uni.chooseVideo({
|
||||
count: 1,
|
||||
sourceType: ['camera', 'album'],
|
||||
success: function(res) {
|
||||
let videoSrc = res.tempFilePath;
|
||||
if (res.size > uploadFileSize) {
|
||||
uni.showToast({
|
||||
title: '文件大小超过系统上传限制：' + uploadFileSize,
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
});
|
||||
return;
|
||||
}
|
||||
let fileName = self.getFileName(videoSrc);
|
||||
self.fileUpload('video',videoSrc,fileName);
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '取消选择视频',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
//图片上传
|
||||
img() {
|
||||
var self = this;
|
||||
uni.chooseImage({
|
||||
count: 1, //默认9
|
||||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album', 'camera'], //从相册选择
|
||||
success: function(res) {
|
||||
let Imgsrc = res.tempFilePaths[0];
|
||||
let fileName = self.getFileName(Imgsrc); // 自定义上传后的文件名称
|
||||
self.fileUpload('video',Imgsrc,fileName);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 文件上传
|
||||
fileUpload(type, path, stroeAs) {
|
||||
let self = this;
|
||||
uni.showLoading({
|
||||
title: '文件上传中'
|
||||
});
|
||||
var requestTask = uni.request({
|
||||
url: '', //请求后台签名地址。
|
||||
complete: res => {
|
||||
var data = res.data.data;
|
||||
uni.uploadFile({
|
||||
url: data.host, //后台给的阿里云存储给的上传地址
|
||||
filePath: path,
|
||||
fileType: type,
|
||||
name: 'file',
|
||||
formData: {
|
||||
key: stroeAs, //文件名
|
||||
policy: data.policy, //后台获取超时时间
|
||||
OSSAccessKeyId: data.accessid, //后台获取临时ID
|
||||
success_action_status: '200', //让服务端返回200,不然，默认会返回204
|
||||
signature: data.signature //后台获取签名
|
||||
},
|
||||
success: res => {
|
||||
console.log(res);
|
||||
// console.log('uploadImage success, res is:', res);
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '上传成功',
|
||||
icon: 'success',
|
||||
duration: 1000
|
||||
});
|
||||
if (type === 'image') {
|
||||
self.imageList = self.imageList.concat(path);
|
||||
self.formData.images.push(osshost + '/' + stroeAs);
|
||||
}
|
||||
if (type === 'video') {
|
||||
self.showVideo = true;
|
||||
self.formData.video = osshost + '/' + stroeAs;
|
||||
}
|
||||
},
|
||||
fail: err => {
|
||||
uni.hideLoading();
|
||||
uni.showModal({
|
||||
content: err.errMsg,
|
||||
showCancel: false
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
_getSuffix(filename) {
|
||||
let pos = filename.lastIndexOf('.');
|
||||
let suffix = '';
|
||||
if (pos != -1) {
|
||||
suffix = filename.substring(pos);
|
||||
}
|
||||
return suffix;
|
||||
},
|
||||
getFileName(filename) {
|
||||
return (
|
||||
'user_dir/' +
|
||||
new Date().getTime() +
|
||||
Math.random()
|
||||
.toString(36)
|
||||
.substring(3, 20) +
|
||||
this._getSuffix(filename)
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
29
pages/index/lange.vue
Normal file
29
pages/index/lange.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<view class="dark-bg" :style="theme">
|
||||
<view class="bg-test"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.bg-test {
|
||||
width: 300px;
|
||||
height: 160px;
|
||||
border-radius: 10px;
|
||||
background-color: var(--bg-color-button);
|
||||
}
|
||||
</style>
|
||||
143
pages/index/member/index.vue
Normal file
143
pages/index/member/index.vue
Normal file
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="onecontentone">
|
||||
我的会员卡(3)
|
||||
</view>
|
||||
<view class="flex-colum">
|
||||
<view class="towcontentitem" v-if="list.length>0" v-for="(item,index) in list" :key="index"
|
||||
@click="eeInfo(item)">
|
||||
<image class="towcontentitemimage" src="@/static/1.png" mode="aspectFill"></image>
|
||||
<view class="towcontentitemone flex-start">
|
||||
<image class="towcontentitemoneimage" src="@/static/logo.png" mode="aspectFill"></image>
|
||||
<text class="towcontentitemonetext" style="color: #fff;">剪发卡</text>
|
||||
</view>
|
||||
<view class="towcontentitemtow flex-start">
|
||||
<text class="towcontentitemtowetext" style="color: #fff;">剪发卡</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="list.length==0 && is_end == true" class="flex-colum">
|
||||
<image :src="bgnothave" mode="widthFix">
|
||||
</image>
|
||||
</view>
|
||||
<u-loadmore :status="form.status" />>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgnothave:uni.getStorageSync('bgnothave'),
|
||||
is_end: false,
|
||||
list: [{
|
||||
id: 1
|
||||
}, {
|
||||
id: 2
|
||||
}],
|
||||
form: {
|
||||
page: 1,
|
||||
status: 'loadmore',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
eeInfo(e) {
|
||||
console.log(e.type)
|
||||
if (e.type == 'balance') {
|
||||
uni.pro.navigateTo('my/member/memberinfo', {
|
||||
id: e,
|
||||
})
|
||||
} else {
|
||||
uni.pro.navigateTo('my/member/memberone', {
|
||||
id: e,
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.content {
|
||||
border-top: 16rpx solid #f7f7f7;
|
||||
padding: 0 28rpx;
|
||||
|
||||
.flex-colum_image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
text {
|
||||
margin-top: 30rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.onecontentone {
|
||||
padding-top: 32rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.flex-colum {
|
||||
.towcontentitem {
|
||||
margin-top: 22rpx;
|
||||
width: 96%;
|
||||
position: relative;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.towcontentitemimage {
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12rpx;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.towcontentitemone {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
.towcontentitemoneimage {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
}
|
||||
|
||||
.towcontentitemonetext {
|
||||
margin-left: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #422A07;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemtow {
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
margin-top: 52rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #422A07;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
327
pages/index/member/memberinfo.vue
Normal file
327
pages/index/member/memberinfo.vue
Normal file
@@ -0,0 +1,327 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="towcontentitem">
|
||||
<image class="towcontentitemimage" src="@/static/1.png" mode="aspectFill"></image>
|
||||
<view class="fourcontentitemabsolute">
|
||||
年卡会员
|
||||
</view>
|
||||
<view class="towcontentitemone flex-start">
|
||||
<image class="towcontentitemoneimage" src="@/static/logo.png" mode="aspectFill"></image>
|
||||
<view class="towcontentitemonetext flex-colum-start">
|
||||
<text class="towcontentitemonetextone" style="color: #fff;">剪发卡</text>
|
||||
<text class="towcontentitemonetexttow" style="color: #fff;">保洁清洗卡</text>
|
||||
</view>
|
||||
<view class="towcontentitemoneabsolute">
|
||||
加购
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontentitemprogress">
|
||||
<!-- <u-line-progress :percentage="30" activeColor="#ff0000"></u-line-progress> -->
|
||||
续费
|
||||
</view>
|
||||
<view class="towcontentitemtow flex-between">
|
||||
<text class="towcontentitemtowetext" style="color: #fff;">VIP202304241154982648</text>
|
||||
<text class="towcontentitemtowetext" style="color: #fff;">保洁清洗卡</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontentitem">
|
||||
<view class="therecontentitemtext">
|
||||
会员详情
|
||||
</view>
|
||||
<view class="therecontentitemone">
|
||||
<view class="therecontentitemoneiten flex-between" @click="order">
|
||||
<text class="therecontentitemoneitentetxt">账单明细</text>
|
||||
<u-icon name="arrow-right" color="#808080" size="18"></u-icon>
|
||||
</view>
|
||||
<view class="therecontentitemoneiten flex-between" @click="overlayshow = true">
|
||||
<text class="therecontentitemoneitentetxt">账单明细</text>
|
||||
<u-icon name="arrow-right" color="#808080" size="18"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-overlay :show="overlayshow" @click="overlayshow = false">
|
||||
<view class="warp">
|
||||
<view class="rect" @tap.stop>
|
||||
<view class="onerect flex-center">
|
||||
<view>【洗剪吹】新娘造型</view>
|
||||
<u-icon @click="overlayshow = false" class="onerecticon" name="backspace" color="#000000"
|
||||
size="28"></u-icon>
|
||||
</view>
|
||||
<view class="towrect">
|
||||
商品
|
||||
</view>
|
||||
<view class="thererect flex-between">
|
||||
<view class="thererectone">
|
||||
年卡会员
|
||||
</view>
|
||||
<view class="thererecttow">
|
||||
<text>￥</text>300
|
||||
</view>
|
||||
</view>
|
||||
<view class="fourrect flex-between">
|
||||
<view class="fourrectone">
|
||||
<text>共计:</text>￥300
|
||||
</view>
|
||||
<view class="fourrecttow">
|
||||
立即购买
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-overlay>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
overlayshow: false,
|
||||
numberbox: "",
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
order(e) {
|
||||
uni.pro.navigateTo('my/order/index', {
|
||||
e: 0
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 32rpx 28rpx;
|
||||
|
||||
.towcontentitem {
|
||||
margin-top: 22rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.fourcontentitemabsolute {
|
||||
z-index: 9;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding: 6rpx 28rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0px 6rpx 12rpx rgba(255, 255, 255, 0.19);
|
||||
background: linear-gradient(NaNdeg, #4A4A4A 0%, #919191 100%);
|
||||
border-radius: 0px 12rpx 0px 12rpx;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.towcontentitemimage {
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12rpx;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.towcontentitemone {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
|
||||
.towcontentitemoneimage {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
}
|
||||
|
||||
.towcontentitemoneabsolute {
|
||||
position: absolute;
|
||||
padding: 8rpx 44rpx;
|
||||
right: 0;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(130deg, #F4AE46 0%, #EE9437 100%);
|
||||
box-shadow: 0px 4rpx 8rpx 2rpx rgba(243, 169, 67, 0.37);
|
||||
border-radius: 28rpx;
|
||||
}
|
||||
|
||||
.towcontentitemonetext {
|
||||
height: 76rpx;
|
||||
margin-left: 16rpx;
|
||||
|
||||
.towcontentitemonetextone {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #422A07;
|
||||
}
|
||||
|
||||
.towcontentitemonetexttow {
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #422A07;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemprogressa {
|
||||
padding: 8rpx 44rpx;
|
||||
width: 50%;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
margin-top: 54rpx;
|
||||
}
|
||||
|
||||
.towcontentitemprogress {
|
||||
margin-top: 24rpx;
|
||||
background: linear-gradient(318deg, #6E6E6E 0%, #404040 100%);
|
||||
box-shadow: 0px 4rpx 8rpx 2rpx #8D8D8D;
|
||||
border-radius: 28rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.towcontentitemtow {
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
margin-top: 68rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #422A07;
|
||||
}
|
||||
}
|
||||
|
||||
.therecontentitem {
|
||||
margin-top: 32rpx;
|
||||
width: 100%;
|
||||
padding: 32rpx 32rpx 0 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
|
||||
.therecontentitemtext {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.therecontentitemone {
|
||||
.therecontentitemoneiten:nth-child(1) {
|
||||
border-top: none !important;
|
||||
}
|
||||
|
||||
.therecontentitemoneiten {
|
||||
padding: 32rpx 0;
|
||||
border-top: 1px solid #F7F7F7;
|
||||
|
||||
.therecontentitemoneitentetxt {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.warp {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
.rect {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 60rpx 60rpx 0px 0px;
|
||||
padding: 48rpx 32rpx 32rpx 32rpx;
|
||||
|
||||
.onerect {
|
||||
position: relative;
|
||||
padding-bottom: 48rpx;
|
||||
|
||||
image {
|
||||
width: 124rpx;
|
||||
height: 124rpx;
|
||||
}
|
||||
|
||||
view {
|
||||
margin-left: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.onerecticon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
.towrect{
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
.thererect{
|
||||
margin-top: 16rpx;
|
||||
.thererectone{
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
.thererecttow{
|
||||
text{
|
||||
font-size: 16rpx;
|
||||
}
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Heavy, PingFang SC;
|
||||
font-weight: 800;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
}
|
||||
.fourrect{
|
||||
margin-top: 44rpx;
|
||||
.fourrectone{
|
||||
text{
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
font-size: 40rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FC5F69;
|
||||
}
|
||||
.fourrecttow{
|
||||
background: linear-gradient(143deg, #8689AF 0%, #494A5F 100%);
|
||||
border-radius: 34rpx;
|
||||
padding: 10rpx 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
219
pages/index/specials.vue
Normal file
219
pages/index/specials.vue
Normal file
@@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<navbar v-if="op!=1" :style="'background-color: rgba(255, 255, 255,' + op +')'" :Background='Background'
|
||||
:navtitle='navtitle' :navboxshow="navboxshow" @fatherMethod='navfatherMethod'>
|
||||
</navbar>
|
||||
<navbar v-else :Background="'#fff'" :navtitle='navtitle' :navboxshow="navboxshow" @fatherMethod='navfatherMethod'>
|
||||
</navbar>
|
||||
<view class="indexbox">
|
||||
<view class="indexbox_boxitem flex-between">
|
||||
<view class="indexbox_boxitem_item flex-colum-start" v-for="(item,index) in list" :key="index"
|
||||
@click="eeInfo(item)">
|
||||
<view class="indexbox_boxitem_itemimage">
|
||||
<image :src="item.host_img" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="indexbox_boxitem_itemone">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="indexbox_boxitem_itemtow flex-start">
|
||||
<text>￥</text>
|
||||
<text>{{item.price}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="list.length==0 && is_end == true" style="margin-top: 100rpx;width: 100%;" class="flex-colum">
|
||||
<image :src="bgnothave" mode="aspectFill">
|
||||
</image>
|
||||
</view>
|
||||
<view class="flex-colum" style="width: 100%;">
|
||||
<u-loadmore :status="form.status" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navbar from '@/components/navbar.vue'
|
||||
export default {
|
||||
components: {
|
||||
navbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
navtitle: '购物商城', //名称
|
||||
navboxshow: '4', //显示
|
||||
Background: 'none',
|
||||
list: [],
|
||||
is_end: false,
|
||||
form: {
|
||||
page: 1,
|
||||
status: 'loadmore',
|
||||
},
|
||||
statusBarHeight: 0,
|
||||
op: 0,
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
this.statusBarHeight = res.statusBarHeight
|
||||
}
|
||||
})
|
||||
},
|
||||
onPageScroll(res) {
|
||||
// res.scrollTop 为页面滚动距离
|
||||
let top = res.scrollTop
|
||||
// height为状态栏高度+自定义导航栏标题内容高度（这里是44px）
|
||||
let height = this.statusBarHeight + 44
|
||||
// 判断滚动高度
|
||||
// 如果小于顶部自定义导航的高度
|
||||
if (top <= height) {
|
||||
// 透明度(op) = 滚动距离/导航栏高度
|
||||
// (不做操作 直接计算 this.op = top/height 也可以实现)
|
||||
// 由于(滚动距离/导航栏高度)得到0-1之间小数点后n位小数
|
||||
// 四舍五入后得到的只能是0/1
|
||||
// 因此做如下操作
|
||||
this.op = Math.round(top / height * 100) / 100
|
||||
} else {
|
||||
// 如果滚动距离大于导航高度，则透明度值为1（不透明）
|
||||
this.op = 1
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
this.shoppingindex()
|
||||
},
|
||||
onShow() {
|
||||
this.shoppingindex()
|
||||
},
|
||||
methods: {
|
||||
async shoppingindex() {
|
||||
let res = await this.api.shoppingbuyingspeciallist({
|
||||
page: this.form.page
|
||||
})
|
||||
if (res.length == 0) {
|
||||
this.is_end = true
|
||||
this.form.status = 'nomore'
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
this.form.page = ++this.form.page;
|
||||
setTimeout(() => {
|
||||
this.list = [...this.list, ...res];
|
||||
if (res.length == 10) {
|
||||
this.form.status = 'loading';
|
||||
} else {
|
||||
this.is_end = true;
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
init_fn() {
|
||||
this.list = []
|
||||
this.is_end = false
|
||||
this.form.page = 1
|
||||
this.form.status = 'loadmore'
|
||||
this.shoppingindex()
|
||||
},
|
||||
eeInfo(e) { //查看订单详情
|
||||
if (e.spec_type == 1) {
|
||||
uni.pro.navigateTo('mall/mallInfo', {
|
||||
id: e.id,
|
||||
})
|
||||
} else {
|
||||
uni.pro.navigateTo('mall/mallInfos', {
|
||||
id: e.id,
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
width: 100%;
|
||||
background: url(@/static/imge/specialss.png) no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.index {
|
||||
.indexbox {
|
||||
border-radius: 30rpx 30rpx 0px 0px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-top: 48rpx;
|
||||
padding: 0rpx 28rpx 32rpx 28rpx;
|
||||
background: #fff;
|
||||
|
||||
.indexbox_boxitem:after {
|
||||
content: "";
|
||||
flex: 0 0 220rpx;
|
||||
/* 如何计算233
|
||||
ulist的width是500px，li的width是100px ，根据运行结果，每一行有四个格子，三个间隔，500-100-100-33-33=244，有一点小误差调一调就差不多了
|
||||
*/
|
||||
}
|
||||
|
||||
.indexbox_boxitem {
|
||||
background: #ffffff;
|
||||
|
||||
.indexbox_boxitem_item {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.indexbox_boxitem_itemimage {
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
background: #F8F8F8;
|
||||
border-radius: 8rpx;
|
||||
|
||||
image {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.indexbox_boxitem_itemone {
|
||||
width: 220rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-top: 16rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.indexbox_boxitem_itemtow {
|
||||
margin-top: 10rpx;
|
||||
padding-right: 10rpx;
|
||||
justify-content: flex-end;
|
||||
background: url(@/static/imge/specials.png) no-repeat;
|
||||
background-size: cover;
|
||||
width: 148rpx;
|
||||
height: 48rpx;
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
|
||||
text {
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
text:nth-child(1) {
|
||||
line-height: 50rpx;
|
||||
font-size: 16rpx;
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
line-height: 48rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user