hly
/
universal-wechat-uniapp-241007
generated from hly/uniapp-shop-templates
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

上传

master
前端-胡立永 4 months ago
parent
a79b8fa74e
commit
e36ec50299
4 changed files with 226 additions and 274 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +131
    -0
      components/post/actorList.vue
  2. +84
    -0
      components/post/postList.vue
  3. +9
    -1
      pages/index/activity.vue
  4. +2
    -273
      pages/index/index.vue

+ 131
- 0
components/post/actorList.vue View File

@ -0,0 +1,131 @@
<template>
<view class="postList">
<view class="item" v-for="(item, index) in list"
@click="$utils.navigateTo('/publish/actorDetail?id=' + item.id)"
:key="index">
<image
:src="item.image &&
item.image.split(',')[0]"
mode="aspectFill"></image>
<view class="text">
<view class="title">
<view class="t">
{{ item.name }}
</view>
<view class="auth"
v-if="item.isState == 'Y'">
已认证
</view>
</view>
<view class="info">
{{ item.photographerContent }}
</view>
<view class="createBy">
<!-- <view class="">
发布人：{{ item.createBy }}
</view> -->
<view class="">
{{ $dayjs(item.createTime).format('YYYY-MM-DD') }}
</view>
</view>
<view class="phone">
联系方式 <text>去查看</text>
</view>
<view class="price"
v-if="item.money">
价格 <text>￥{{ item.money }}</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name:"postList",
props : ['list'],
data() {
return {
};
}
}
</script>
<style lang="scss" scoped>
.postList{
.item{
height: 240rpx;
width: 100%;
background-color: #fff;
overflow: hidden;
border-radius: 10rpx;
color: #777;
display: flex;
font-size: 24rpx;
margin: 30rpx 0;
image{
width: 50%;
height: 100%;
}
.text{
display: flex;
flex-direction: column;
padding: 16rpx;
width: 50%;
.title{
font-size: 30rpx;
color: #000;
display: flex;
align-items: center;
.t{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
.auth{
color: $uni-color-red;
border: 1px solid $uni-color-red;
font-size: 20rpx;
margin-left: 10rpx;
width: 60rpx;
line-height: 30rpx;
height: 30rpx;
flex-shrink: 0;
}
}
.info{
color: #000;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient: vertical;
}
.createBy{
display: flex;
margin-top: auto;
margin-bottom: 5rpx;
justify-content: space-between;
&>view{
display: flex;
align-items: center;
justify-content: center;
}
}
.phone{
text{
color: #000;
}
}
.price{
color: $uni-color-red;
}
text{
padding-left: 10rpx;
}
}
}
}
</style>

+ 84
- 0
components/post/postList.vue View File

@ -0,0 +1,84 @@
<template>
<view class="postList">
<view class="item" v-for="(item, index) in list"
@click="$utils.navigateTo('/publish/postDetail?id=' + item.id)"
:key="index">
<image
:src="item.image &&
item.image.split(',')[0]" mode="aspectFill"></image>
<view class="text">
<view class="title">
{{ item.title }}
</view>
<view class="createBy">
<view class="">
发布人：{{ item.userId }}
</view>
<view class="">
<uv-icon
size="26rpx"
name="thumb-up"></uv-icon>
{{ item.dropNum?item.dropNum:0 }}
</view>
</view>
<view class="createTime">
{{ $dayjs(item.createTime).format('YYYY-MM-DD') }}
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name:"postList",
props : ['list'],
data() {
return {
};
}
}
</script>
<style lang="scss" scoped>
.postList{
.item{
height: 200rpx;
width: 100%;
background-color: #fff;
overflow: hidden;
border-radius: 10rpx;
color: #777;
display: flex;
font-size: 24rpx;
margin: 30rpx 0;
image{
width: 50%;
height: 100%;
}
.text{
display: flex;
flex-direction: column;
padding: 16rpx;
width: 50%;
.title{
font-size: 30rpx;
font-weight: 600;
color: #000;
}
.createBy{
display: flex;
margin-top: auto;
margin-bottom: 10rpx;
justify-content: space-between;
&>view{
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
}
</style>

+ 9
- 1
pages/index/activity.vue View File

@ -1,15 +1,23 @@
<template> <template>
<view class="page"> <view class="page">
<navbar/>
<postList :list="list"/>
<tabber select="1" /> <tabber select="1" />
</view> </view>
</template> </template>
<script> <script>
import tabber from '@/components/base/tabbar.vue' import tabber from '@/components/base/tabbar.vue'
import postList from '@/components/post/postList.vue'
import mixinsList from '@/mixins/list.js'
export default { export default {
mixins : [mixinsList],
components : { components : {
tabber
tabber,
postList
}, },
data() { data() {
return { return {


+ 2
- 273
pages/index/index.vue View File

@ -13,297 +13,26 @@
<script> <script>
import PrivacyAgreementPoup from '@/components/config/PrivacyAgreementPoup.vue' import PrivacyAgreementPoup from '@/components/config/PrivacyAgreementPoup.vue'
import Position from '@/utils/position.js'
import tabber from '@/components/base/tabbar.vue' import tabber from '@/components/base/tabbar.vue'
import productList from '@/components/user/productList.vue'
import { mapGetters } from 'vuex'
// import selectArea from '../../components/selectArea.vue';
import mixinsList from '@/mixins/list.js'
export default { export default {
mixins : [mixinsList],
components : { components : {
tabber, tabber,
productList,
PrivacyAgreementPoup, PrivacyAgreementPoup,
}, },
data() { data() {
return { return {
area: '长沙',
text : '长沙市刘师傅在服务过程中客户投诉“服务过程中有不文明的行为”.....',
queryParams: {
pageNo: 1,
pageSize: 10,
title: ''
},
bannerList: [
{
url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
},
{
url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
},
{
url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
},
],
productList: [],
} }
}, },
computed : { computed : {
...mapGetters(['userShop']),
}, },
methods: { methods: {
//显示选择地区
showSelectArea() {
// this.$refs.selectArea.open()
},
//搜索地址
searchAddress() {
Position.getLocation(res => {
Position.selectAddress(res.longitude, res.latitude, success => {
let address = this.extractProvinceAndCity(success)
this.queryParams.title = address.city
})
})
},
//提取用户选择的地址信息(省市县信息)
extractProvinceAndCity(res) { //提取用户选择的地址信息(省市)
if (!res.address && res.name) { //用户直接选择城市的逻辑
return {
province: '',
city: res.name
};
}
if (res.address) { //用户选择了详细地址，要从详细地址中提取出省市县信息
// 使用正则表达式匹配省市县
const regex = /(?<province>[\u4e00-\u9fa5]+?省)(?<city>[\u4e00-\u9fa5]+?(?:市|自治州|盟|地区))/;
const match = res.address.match(regex);
if (match) { // 如果匹配成功，则返回省和市的信息
return {
province: match.groups.province,
city: match.groups.city
};
}
}
return { //用户没选择地址就点了确定按钮
province: '',
city: ''
}
},
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.search {
height: 82rpx;
width: 710rpx;
background: #FFFFFF;
margin: 20rpx auto;
border-radius: 41rpx;
box-sizing: border-box;
padding: 0 15rpx;
display: flex;
align-items: center;
// justify-content: space-between;
.left-area,
.center-area {
display: flex;
align-items: center;
}
.left-area {
max-width: 160rpx;
image {
flex-shrink: 0;
width: 26rpx;
height: 26rpx;
}
.area {
font-size: 24rpx;
display: -webkit-box;
-webkit-line-clamp: 2;
/* 限制显示两行 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
color: #292929;
}
.parting-line {
flex-shrink: 0;
font-size: 26rpx;
color: #ccc;
margin: 0rpx 5rpx;
}
}
.center-area {
display: flex;
flex-wrap: nowrap;
align-items: center;
width: calc(100% - 290rpx);
margin-left: 30rpx;
image {
width: 26rpx;
height: 26rpx;
}
.van-field {
background-color: transparent;
box-sizing: border-box;
height: 82rpx;
line-height: 82rpx;
width: calc(100% - 30rpx);
padding: 0rpx 10rpx 0rpx 0rpx;
input {
height: 82rpx;
font-size: 60rpx;
}
}
}
.right-area {
.search-button {
background: #60BDA2;
height: 60rpx;
width: 130rpx;
font-size: 26rpx;
border-radius: 35rpx;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.swipe{
overflow: hidden;
border-radius: 20rpx;
margin: 20rpx;
}
.page{
& /deep/ .uv-icon__icon{
font-size: 30rpx !important;
}
// 水洗店
.userShop{
.list{
display: flex;
flex-wrap: wrap;
.item{
display: flex;
justify-content: center;
align-items: center;
width: 330rpx;
margin: 20rpx;
padding: 30rpx 0;
color: #FFFFFF;
line-height: 50rpx;
border-radius: 20rpx;
font-size: 28rpx;
.num{
font-size: 38rpx;
font-weight: 900;
}
image{
width: 110rpx;
height: 110rpx;
margin-left: 20rpx;
}
&:nth-child(1){
background: #F07A77;
}
&:nth-child(2){
background: #F48B4E;
}
&:nth-child(3){
background: #6487E1;
}
&:nth-child(4){
background: #61B7E6;
}
}
}
}
// 酒店
.user{
padding: 20rpx;
.shop{
position: relative;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
margin-top: 20rpx;
border-radius: 20rpx;
padding: 20rpx;
overflow: hidden;
.image{
width: 180rpx;
height: 180rpx;
margin-right: 20rpx;
border-radius: 20rpx;
}
.shopInfo{
font-size: 22rpx;
.title{
font-size: 30rpx;
}
.tags{
display: flex;
.tag{
padding: 4rpx 6rpx;
border: 1rpx solid #FFAC6E;
color: #FFAC6E;
margin-right: 10rpx;
margin-top: 10rpx;
font-size: 18rpx;
}
}
.time{
margin-top: 10rpx;
display: flex;
}
.address{
margin-top: 10rpx;
display: flex;
}
}
.btns{
margin-left: auto;
display: flex;
align-items: center;
justify-content: center;
.btn{
background-color: $uni-color;
color: #fff;
box-shadow: 0 0 5rpx 5rpx #FFAC6E;
padding: 10rpx 20rpx;
flex-shrink: 0;
border-radius: 35rpx;
}
}
.tips{
position: absolute;
top: 0;
right: 0;
font-size: 24rpx;
color: #FFAC6E;
background-color: #FEF5EE;
padding: 10rpx 20rpx;
border-radius: 10rpx;
}
}
}
}
</style> </style>

Write Preview
Loading…
Cancel
Save