Compare commits

...

59 Commits

Author SHA1 Message Date
41ea48b154 feat:支付问题 2025-07-18 15:55:39 +08:00
3a5ff55440 feat: 合并代码解决冲突 2025-07-18 09:58:20 +08:00
29dfab5b6d feat: 收货地址相关接口调用And地区选择器组件bug修复 2025-07-18 09:53:16 +08:00
53d506c084 feat:调用购物车 默认地址接口 修改商品详情bug 2025-07-17 18:31:40 +08:00
b8aacb162f feat:商品信息购物车数量问题 2025-07-17 15:34:49 +08:00
fb7bb4aa9f feat:调用购物车 商品接口-v2 2025-07-17 10:18:22 +08:00
78cec5bfc5 feat:运费单 2025-07-16 09:38:22 +08:00
赵毅
6f3c5ceb63 feat: 我的订单首页 2025-07-15 17:58:53 +08:00
2c3b890ef1 feat:购物车地址页完成 2025-07-15 17:35:24 +08:00
e30d9cf0f8 feat:新增购物车页 2025-07-15 16:37:46 +08:00
赵毅
4a308bc46f feat : 完善一下小程序到家服务的筛选 2025-07-14 11:49:16 +08:00
ec2293bcb0 feat:合并代码 更换图片路径 2025-07-12 11:25:00 +08:00
bc3eb44016 feat:更改图片路径 2025-07-12 11:20:51 +08:00
赵毅
f588a5a0dc style : 服务到家 - 全部服务更改一些样式 2025-07-12 11:18:40 +08:00
赵毅
1afbd2d972 fix : 修复我的小区页公告切换会追加数据而不是切换的bug 2025-07-12 11:06:22 +08:00
50ffe412a7 feat:合并代码 2025-07-12 10:45:47 +08:00
赵毅
ac23f91ea1 feat : 完善到家服务模块页面 2025-07-12 10:21:02 +08:00
赵毅
04e3f4eed8 feat : 合并代码 2025-07-11 15:38:30 +08:00
赵毅
add52699ad feat : 到家服务 搜索部分页面 2025-07-11 15:34:22 +08:00
8147ba69de feat:新增选择师傅 服务商详情 师傅详情 2025-07-11 11:39:03 +08:00
赵毅
142e1ad8fe feat: 合并代码 2025-07-11 09:11:44 +08:00
e829761f5d feat:新增师傅列表 筛选样式 2025-07-10 18:30:50 +08:00
赵毅
c7ffd3bbb1 feat : 到家服务首页页面 2025-07-10 18:20:46 +08:00
46634806f8 feat:筛选 师傅样式 2025-07-10 18:06:39 +08:00
赵毅
2055c112c2 feat: 合并代码 2025-07-10 15:36:44 +08:00
309e1f82fe feat:新增上门服务页面 2025-07-10 15:26:25 +08:00
赵毅
2348c61e9c feat: 合并代码 2025-07-10 15:22:17 +08:00
赵毅
fb491dad1c feat: 合并代码 2025-07-10 15:17:45 +08:00
fe37c404d9 fix: 合并冲突 2025-07-10 14:55:09 +08:00
9a9aec8dd9 feat: 登录增加调用获取用户房源信息接口 2025-07-10 14:53:12 +08:00
5bf36b96e9 feat:调用物业公积金接口-未完成 2025-07-10 14:48:53 +08:00
bc345b71ac feat: 合并代码 2025-07-10 10:00:52 +08:00
a44b8dc457 物业缴费-v1 2025-07-10 09:55:53 +08:00
424c1e8df7 fix: 修复城市选择列表点击城市信息无法获取参数bug 2025-07-10 09:50:45 +08:00
2a4cf0b780 物业缴费-v1 2025-07-10 09:50:43 +08:00
ffe6f6239b fix: 修复地区选择组件bug,房产添加切换城市功能增加 2025-07-09 17:22:54 +08:00
15987d83b3 feat: 合并代码 2025-07-09 16:20:36 +08:00
赵毅
2c071d2d86 修改我的小区金刚区显示数量 2025-07-09 15:21:32 +08:00
bef2944dff feat: 合并代码 2025-07-09 12:03:00 +08:00
249ef5c13d feat: 报事报修完善 2025-07-09 11:59:23 +08:00
赵毅
19d0568909 修复弹窗广告bug 2025-07-09 11:52:46 +08:00
赵毅
4d85ad9606 修改弹窗广告的获取索引的bug 2025-07-09 11:38:24 +08:00
c2a2f16b55 合并处理-v1 2025-07-09 11:09:37 +08:00
0ca233908e 合并-1 2025-07-09 10:25:17 +08:00
a6f89f0a9a 电商完成 2025-07-09 10:15:30 +08:00
赵毅
2aa560e081 我的小区 - 公告部分接口 2025-07-08 16:27:48 +08:00
赵毅
41b0781ad7 添加我的房产 2025-07-07 15:15:10 +08:00
赵毅
2b148c85e8 我的房产 2025-07-07 09:54:39 +08:00
赵毅
b8bd07a9af 添加我的房产 2025-07-05 15:19:10 +08:00
b043e7ce74 feat: 合并代码 2025-07-03 17:43:51 +08:00
ca37db003b Merge branch 'feature/yi' of https://git.hshuishang.com/qiaojiale/uniapp-ZHSQ into myb 2025-07-03 17:21:19 +08:00
702d3ffcec feat: 城市列表页搜索功能增加防抖And商家管理退款静态页面开发 2025-07-03 17:19:17 +08:00
赵毅
3c88a2d879 店铺管理 & 订单列表 2025-07-03 17:17:29 +08:00
6db9b3becf feat: 增加导航栏 2025-06-30 18:13:16 +08:00
adae1a52e4 feat: 合并分支 2025-06-30 18:04:30 +08:00
20a324aeec feat: 物业公积金静态页面开发And城市选择列表接口联调 2025-06-30 17:59:34 +08:00
c89b8a20bb 我的社区页 2025-06-30 17:58:57 +08:00
91e503a159 Merge branch 'master' of https://git.hshuishang.com/qiaojiale/uniapp-ZHSQ into myb 2025-06-30 11:05:34 +08:00
a99046b840 feat: update 2025-06-30 11:04:41 +08:00
157 changed files with 16347 additions and 38861 deletions

View File

@ -34,7 +34,7 @@
page{ page{
font-size: 28rpx; font-size: 28rpx;
padding-bottom: 120rpx; padding-bottom: 180rpx;
} }
.uicon-volume { .uicon-volume {

62
README-zh.md Normal file
View File

@ -0,0 +1,62 @@
Git 提交规范
- feat 新增功能
- fix 修复 Bug
- docs 文档更新(如 README、CHANGELOG 等)
- style 代码样式调整(如空格、格式化等,不涉及功能变更)
- refactor 代码重构(既不修复 Bug 也不新增功能)
- perf 性能优化
- test 添加或修改测试代码
- chore 构建过程或辅助工具的变动(如依赖更新、配置文件修改等)
- revert 回滚之前的提交
代码规范
- 使用v-for时必须添加:key
- 组件props必须定义类型和默认值
- 复杂逻辑必须添加注释
- 敏感信息不硬编码
- 变量/函数:小驼峰式命名 (camelCase)
- 组件/类:小驼峰式命名 (pascalCase)
- 合理使用缓存
- 避免不必要的重渲染
- 工具函数放在/utils目录
- 公共组件放在/components目录
常见 class 命名规范
- container 用于页面最外层容器
- header 头部区域
- main 主要内容区域
- footer 底部区域
- left 左侧区域
- right 右侧区域
- title 标题
- nav 导航区域
- banner 轮播图/广告 区域
- tabs 标签区域
- list 列表区域
循环调用避坑指南:
- 页面: page/shopcity/index.vue 城市选择列表页
- 背景: 城市名称列表依赖于父级城市英文首字母简写例A、B、C 循环项下的list 进行循环展示
- 场景: 城市列表点击,需要获取点击的城市信息
- 问题: 触发点击事件函数无法接收入参item
- 解决方案: 改为箭头函数 @click="() => { headerSelectMapClick(item) }"
- 原因: 查询DeepSeek给出的解释是 箭头函数创建了一个闭包,保留了 item 的引用 即使列表重新渲染,也能保持对正确 item 的引用
- 该解释是否正确 不确定 有待考量
- 示例代码
<!--
<scroll-view class="list-scroll" scroll-y :scroll-into-view="activeId" @scroll="handleScroll">
<view v-for="(group, index) in groupedData" :key="index" class="white_container" :id="'group-' + group.letter">
<view class="letter-title">{{ group.letter }}</view>
<view v-for="(item, ind) in group.list"
:key="item.id"
:class="['list-item', ind === group.list.length - 1 && 'no_border']"
@click="headerSelectMapClick(item)" // TODO问题点 为什么无法获取点击的item参数
>
{{ item.name }}
</view>
</view>
</scroll-view>
-->

View File

@ -5,4 +5,6 @@ export const apiArr = {
getArea:"/api/v2/administrative-division/child-list",//新版获取省市区 getArea:"/api/v2/administrative-division/child-list",//新版获取省市区
getParArea:"/api/v2/administrative-division/info",//新版获取省市区 getParArea:"/api/v2/administrative-division/info",//新版获取省市区
getRegionList: '/api/v2/wechat/administrative-division-crud/list', // 行政区划信息分页
} }

View File

@ -1,23 +1,23 @@
export const apiArr = { export const apiArr = {
list: '/api/v1/wechat/community/list', // 获取社区列表 list: '/api/v1/wechat/community/list', // 获取社区列表
info: '/api/v1/wechat/community/info', // 获取单个社区信息 info: '/api/v1/wechat/community/info', // 获取单个社区信息
isJoin: '/api/v1/wechat/community/is-join', // 用户是否加入社区、楼宇、房间 isJoin: '/api/v1/wechat/community/is-join', // 用户是否加入社区、楼宇、房间
tipsList: '/api/v1/wechat/community/tips/list', // 获取全部通知列表 tipsList: '/api/v1/wechat/community/tips/list', // 获取全部通知列表
oneTips: '/api/v1/wechat/community/tips/one', // 获取单个社区通知 oneTips: '/api/v1/wechat/community/tips/one', // 获取单个社区通知
apply: '/api/v1/wechat/community/apply', // 申请加入小区 apply: '/api/v1/wechat/community/apply', // 申请加入小区
getFacilityList:'/api/v1/wechat/community/facility/list', //获取楼号, getFacilityList: '/api/v1/wechat/community/facility/list', //获取楼号,
getRoomList:'/api/v1/wechat/community/room/list', //获取房间号 getRoomList: '/api/v1/wechat/community/room/list', //获取房间号
ownerList: '/api/v1/wechat/community/owner/list', // 获取社区业主列表 ownerList: '/api/v1/wechat/community/owner/list', // 获取社区业主列表
submit:"/api/v1/wechat/community/owner/feedback-create", //报修提交 submit: "/api/v1/wechat/community/owner/feedback-create", //报修提交
getListByRepair:"/api/v1/wechat/community/owner/feedback-list",//报事报修列表 getListByRepair: "/api/v1/wechat/community/owner/feedback-list",//报事报修列表
getInfoById:"/api/v1/wechat/community/owner/feedback-info", //报事报修根据id查询详情 getInfoById: "/api/v1/wechat/community/owner/feedback-info", //报事报修根据id查询详情
getUserCommunity:"/api/v1/wechat/community/owner/mylist",//获取用户社区信息 getUserCommunity: "/api/v1/wechat/community/owner/mylist",//获取用户社区信息
get_host_info: 'https://zhsq.hshuishang.com/Miniapi/Index/get_host_info', get_host_info: 'https://zhsq.hshuishang.com/Miniapi/Index/get_host_info',
get_community_area_list:"https://zhsq.hshuishang.com/Miniapi/Community/get_community_area_list", get_community_area_list: "https://zhsq.hshuishang.com/Miniapi/Community/get_community_area_list",
carList: '/api/v1/wechat/community/car/list', // 获取社区列表 carList: '/api/v1/wechat/community/car/list', // 获取社区列表
@ -25,8 +25,23 @@ export const apiArr = {
getCarList: '/api/v1/wechat/community/car/list', //获取车辆列表 getCarList: '/api/v1/wechat/community/car/list', //获取车辆列表
deleteItem: "/api/v1/wechat/community/car/del",//删除车牌 deleteItem: "/api/v1/wechat/community/car/del",//删除车牌
getBanner:"/api/v1/wechat/home-page/banner-list",//获取banner图 getBanner: "/api/v1/wechat/home-page/banner-list",//获取banner图
getButton:"/api/v1/wechat/home-page/button-list",//获取button getButton: "/api/v1/wechat/home-page/button-list",//获取button
getHotWords:"/api/v1/wechat/home-page/search-hot-word/info",//搜索热词 getHotWords: "/api/v1/wechat/home-page/search-hot-word/info",//搜索热词
getAllList: "/api/v2/wechat/community/get-all-list",//获取小区信息列表
commRoomSelect: "/api/v2/wechat/community-room/comm-room-select",//房源筛选器
commInfo: "/api/v2/wechat/mpuser-crud/community-owner/info",//我的房产信息小区列表
create: "/api/v2/wechat/community-owners/create",//创建新的业主信息
getOrderList:"/api/v2/wechat/community-orders/get-all-list",//获取账单
getCommunityRoomList:"/api/v2/wechat/community-room/list", //获取房源列表
getUserGovenmentMoney:"/api/v2/wechat/government-housing-fund-flow-crud/user", //获取用户公积金
createPayOrder:"/api/v2/wechat/community-order-pay/create", //创建缴费
getPayOrderInfo:"/api/v2/wechat/community-order-pay/get-one", //根据缴费信息获取支付信息
getPayOrderList:"/api/v2/wechat/community-order-pay/get-page", //查询缴费记录
OrderPay:"/api/v2/wechat/community-order-pay/preorder",//预下单
}; };

View File

@ -2,5 +2,6 @@ export const apiArr = {
login: '/api/v1/wechat/multi-login', // 小程序登录 login: '/api/v1/wechat/multi-login', // 小程序登录
loginInfo: '/api/v1/wechat/mpusers/login-info', // 获取用户信息 loginInfo: '/api/v1/wechat/mpusers/login-info', // 获取用户信息
loginGetPhone: '/api/v1/wechat/mpusers/get-phone', // 获取用户手机号 loginGetPhone: '/api/v1/wechat/mpusers/get-phone', // 获取用户手机号
loginGetUserPhone:"/api/v2/wechat/mpusers/get-phone" loginGetUserPhone: "/api/v2/wechat/mpusers/get-phone",
getCommunityList: '/api/v2/wechat/mpuser-crud/community-owner/info', // 我的房产信息小区列表
} }

16
api/shop.js Normal file
View File

@ -0,0 +1,16 @@
export const apiArr = {
goodsCateList: "/api/v2/wechat/commodity/cate",//商品分类列表
getGoodsList: "/api/v2/wechat/commodity", //商品分类
getGoodsInfo: "/api/v2/wechat/commodity/info", //商品详情
getCar: "/api/v2/wechat/commodity/cart",//购物车
getCarCount: "/api/v2/wechat/commodity/cart/all_count",//购物车数量
addCar: "/api/v2/wechat/commodity/cart/add",//添加购物车
deleteCar: "/api/v2/wechat/commodity/cart/delete",//删除购物车
updateCar: "/api/v2/wechat/commodity/cart/update",//更新购物车信息
getUserDefAddress: "/api/v2/wechat/commodity/receiving_address/get_default",//获取用户默认地址
createOrder: "/api/v2/wechat/commodity/order/create",//创建商品订单
payOrder: "/api/v2/wechat/commodity/order/pay",//支付订单
settingDefaultAddress: '/api/v2/wechat/commodity/receiving_address/default', // 收货地址设置默认
updateAddress: '/api/v2/wechat/commodity/receiving_address/update', // 收货地址修改
queryOrder: '/api/v2/wechat/commodity/order/trade_query', // 查询订单
}

View File

@ -1,6 +1,7 @@
export const apiArr = { export const apiArr = {
getCommunityList:"/api/v2/wechat/community-room/list", //小区房源列表 getCommunityList:"/api/v2/wechat/community-room/list", //小区房源列表
getCommunityInfo:"/api/v2/wechat/community-room/info", //小区房源详情 getCommunityInfo:"/api/v2/wechat/community-room/info", //小区房源详情
workCommunityRoomList: '/api/v2/wechat/community-room/select', // 房源信息
workOrderCategoryCrudList: '/api/v2/wechat/work-order-category-crud/list', // 工单分类信息列表 workOrderCategoryCrudList: '/api/v2/wechat/work-order-category-crud/list', // 工单分类信息列表
workOrderCrudCreat: '/api/v2/wechat/work-order-crud/creat', // 报事报修工单信息创建 workOrderCrudCreat: '/api/v2/wechat/work-order-crud/creat', // 报事报修工单信息创建
getWorkOrderCrudList: '/api/v2/wechat/work-order-crud/page', // 报事报修工单信息分页 getWorkOrderCrudList: '/api/v2/wechat/work-order-crud/page', // 报事报修工单信息分页
@ -9,4 +10,16 @@ export const apiArr = {
workOrderCrudDispatch: '/api/v2/wechat/work-order-crud/dispatch', // 人员派单 workOrderCrudDispatch: '/api/v2/wechat/work-order-crud/dispatch', // 人员派单
workOrderCrudAccept: '/api/v2/wechat/work-order-crud/accept', // 人员接单 workOrderCrudAccept: '/api/v2/wechat/work-order-crud/accept', // 人员接单
workOrderCrudUpdate: '/api/v2/wechat/work-order-crud/worker/update', // 工作人员更新工单 workOrderCrudUpdate: '/api/v2/wechat/work-order-crud/worker/update', // 工作人员更新工单
navPage: '/api/v2/wechat/community-navigation-crud/page', // 小区图标导航信息分页
advPage: '/api/v2/wechat/community-advertisement-crud/page', // 小区广告信息分页
commInfo: '/api/v2/wechat/nav-display-crud/comm/info', // 小区导航设置信息详情
categoryPage: '/api/v2/wechat/announcement-category-crud/page', // 公告分类信息分页
infoPage: '/api/v2/wechat/announcement-crud/page', // 公告信息分页
getAnnounceInfo:"/api/v2/wechat/announcement-crud/info" ,//公告详情
getGovernmentByRoom:"/api/v2/wechat/government-housing-fund-flow-crud/room", //根据房源获取公积金信息
}; };

View File

@ -1,180 +1,161 @@
<template> <template>
<view> <view>
<u-popup <u-popup :show="show" closeOnClickOverlay round="20rpx" @close="onClose">
:show="show"
closeOnClickOverlay
round="20rpx"
@close="onClose"
>
<view> <view>
<view class="popup_title"> <view class="popup_title">
<view class="popup_label" @click="onClose">取消</view> <view class="popup_label" @click="onClose">取消</view>
<view class="popup_label color_blue" @click="onOk">确认</view> <view class="popup_label color_blue" @click="onOk">确认</view>
</view> </view>
<picker-view indicator-style="height: 50px;" style="width: 100%; height: 400rpx;" :value="value" @change="bindChange"> <picker-view indicator-style="height: 50px;" style="width: 100%; height: 400rpx;" :value="id"
@change="bindChange">
<picker-view-column> <picker-view-column>
<view v-for="(item, index) in provList" :key="index" style="line-height: 50px; text-align: center;">{{item.name}}</view> <view v-for="(item, index) in provList" :key="index"
style="line-height: 50px; text-align: center;">{{ item.short_name }}</view>
</picker-view-column> </picker-view-column>
<picker-view-column> <picker-view-column>
<view v-for="(item, index) in defaultCity" :key="index" style="line-height: 50px; text-align: center;">{{item.name}}</view> <view v-for="(item, index) in defaultCity" :key="index"
style="line-height: 50px; text-align: center;">{{ item.short_name }}</view>
</picker-view-column> </picker-view-column>
<picker-view-column> <picker-view-column>
<view v-for="(item, index) in defaultDist" :key="index" style="line-height: 50px; text-align: center;">{{item.business_name}}</view> <view v-for="(item, index) in defaultDist" :key="index"
style="line-height: 50px; text-align: center;">{{ item.short_name }}</view>
</picker-view-column> </picker-view-column>
</picker-view> </picker-view>
</view> </view>
</u-popup> </u-popup>
</view> </view>
</template> </template>
<script> <script>
import { import {
apiArr apiArr
} from '../../api/area'; } from '../../api/area';
import { request } from '../../utils'; import { request } from '../../utils';
export default { export default {
props: { props: {
show: { show: {
type: Boolean, type: Boolean,
default: false, default: false,
required: true, required: true,
} }
}, },
data() { data() {
return { return {
provList: [], // provList: [], //
cityList: [], // cityList: [], //
distList: [], // distList: [], //
defaultCity: [], //
defaultDist: [], // /
confirmProv: {}, //
confirmProv1: {},
confirmCity: {}, //
confirmDist: {}, // /
defaultCity: [], // sf: true,
defaultDist: [], // / xsq: {},
value2: '',
}
},
confirmProv: {}, // methods: {
confirmCity: {}, // //
confirmDist: {}, // / async getProvList() {
} const res = await request(apiArr.getArea, 'POST', {}, { silent: false });
this.provList = res.rows;
this.confirmProv1 = res.rows[0]
//
this.getCityList();
}, },
methods: { //
// async getCityList(sq, x) {
async getProvList () { console.log('11swq', sq);
const res = await request(apiArr.city, 'POST', {}, { silent: false }); if (!this.sf) {
return res; console.log('省份没变,查市跟区', this.cityList)
}, let newDist = this.cityList[sq];
console.log('新的市信息', newDist);
// if (this.xsq.ad_code !== newDist.ad_code) {
async getCityList () { console.log('新市区跟旧市区不一直')
const res = await request(apiArr.area, 'POST', {}, { silent: false }); this.xsq = newDist;
return res; this.getDistList(newDist, x);
}, } else {
console.log('新市区跟旧市区一直');
// / this.confirmDist = this.defaultDist[x]
async getDistList () {
const res = await request(apiArr.business, 'POST', {}, { silent: false });
return res;
},
async init() {
uni.showLoading({
title: '加载中',
mask: true
});
try {
const proviceList = uni.getStorageSync('proviceList');
const cityList = uni.getStorageSync('cityList');
const businessList = uni.getStorageSync('businessList');
let provRes, cityRes, distRes;
//
if (proviceList || cityList || businessList) {
provRes = {
rows: proviceList
};
cityRes = {
rows: cityList
};
distRes = {
rows: businessList
};
} else {
[provRes, cityRes, distRes] = await Promise.all([
this.getProvList(),
this.getCityList(),
this.getDistList(),
])
//
uni.setStorageSync('proviceList',provRes.rows)
uni.setStorageSync('cityList',cityRes.rows)
uni.setStorageSync('businessList',distRes.rows)
}
uni.hideLoading();
//
let defaultCity = cityRes.rows.filter((item) => {
return item.city_id === provRes.rows[0].city_id
});
let defaultDist = distRes.rows.filter((item) => {
return item.area_id === cityRes.rows[0].area_id
});
this.provList = provRes?.rows; //
this.cityList = cityRes?.rows; //
this.distList = distRes?.rows; //
this.defaultCity = defaultCity; //
this.defaultDist = defaultDist; // /
this.confirmProv = provRes.rows[0];
this.confirmCity = defaultCity[0];
this.confirmDist = defaultDist[0];
} catch (error) {
uni.hideLoading();
console.log('获取省市区信息异常', error);
} }
}, return
}
// const res = await request(apiArr.getArea, 'POST', { parent_ad_code: this.confirmProv1.ad_code }, { silent: false });
bindChange (e) { this.cityList = res.rows;
console.log('[1231331], e', e); let newDist;
const {value } = e.detail;
const {provList, cityList, distList} = this;
// /
let newCrty = cityList.filter((item) => item.city_id === provList[value[0]].city_id);
let newDist = distList.filter((item) => item.area_id === newCrty[value[1]].area_id);
this.defaultCity = newCrty;
this.defaultDist = newDist;
//
this.confirmProv = provList[value[0]];
this.confirmCity = newCrty[value[1]];
this.confirmDist = newDist[value[2]];
},
//
onClose() {
this.$emit('close');
},
//
onOk() {
const { confirmProv, confirmCity, confirmDist } = this;
this.$emit('selectArea', {confirmProv, confirmCity, confirmDist});
},
this.defaultCity = res.rows;
this.confirmCity = res.rows[0]; //
this.getDistList(newDist, x);
}, },
mounted() { // /
this.init(); async getDistList(xsq, x) {
const res = await request(apiArr.getArea, 'POST', { parent_ad_code: xsq ? xsq.ad_code : this.confirmCity.ad_code }, { silent: false });
this.distList = res.rows;
this.defaultDist = res.rows;
this.confirmDist = res.rows[0] //
}, },
} async init() {
uni.showLoading({
title: '加载中',
mask: true
});
try {
this.getProvList()
uni.hideLoading();
} catch (error) {
uni.hideLoading();
console.log('获取省市区信息异常', error);
}
},
//
bindChange(e) {
console.log('[1231331], e', e);
const { value } = e.detail;
// // /
let newCrty = this.provList[value[0]];
console.log('新的省份信息', newCrty);
console.log('旧的省信息', this.confirmProv1);
if (newCrty.ad_code === this.confirmProv1.ad_code) {
console.log('省份信息没变');
this.sf = false;
} else {
this.sf = true;
}
console.log('this.cityListthis.cityList', this.cityList);
this.confirmProv1 = newCrty
this.getCityList(value[1], value[2])
},
//
onClose() {
this.$emit('close');
},
//
onOk() {
const { confirmProv1, confirmProv, xsq, confirmCity, confirmDist } = this;
this.$emit('selectArea', { confirmProv: confirmProv1, confirmCity: xsq.ad_name ? xsq : confirmCity, confirmDist });
},
},
mounted() {
this.init();
},
}
</script> </script>
<style> <style>
@import url('./areaPopup.css'); @import url('./areaPopup.css');
</style> </style>

View File

@ -29,32 +29,32 @@
return { return {
navList: [ navList: [
{ {
photo:"http://192.168.0.172:5500/footer_home.png", photo:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_home.png",
photoAc:"http://192.168.0.172:5500/footer_homeAc.png", photoAc:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_homeAc.png",
nav_name:"首页", nav_name:"首页",
url:"/pages/index/index" url:"/pages/index/index"
}, },
{ {
photo:"http://192.168.0.172:5500/footer_community.png", photo:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_community.png",
photoAc:"http://192.168.0.172:5500/footer_communityAc.png", photoAc:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_communityAc.png",
nav_name:"我的小区", nav_name:"我的小区",
url:"/packages/community/index/index" url:"/packages/community/index/index"
}, },
{ {
photo:"http://192.168.0.172:5500/footer_shop.png", photo:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_shop.png",
photoAc:"http://192.168.0.172:5500/footer_shopAc.png", photoAc:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_shopAc.png",
nav_name:"优选商城", nav_name:"优选商城",
url:"" url:"/packages/shop/index/index"
}, },
{ {
photo:"http://192.168.0.172:5500/footer_door.png", photo:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_door.png",
photoAc:"http://192.168.0.172:5500/footer_doorAc.png", photoAc:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_communityAc.png",
nav_name:"上门服务", nav_name:"到家服务",
url:"" url:"/packages/homeServer/index/index"
}, },
{ {
photo:"http://192.168.0.172:5500/footer_mine.png", photo:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_mine.png",
photoAc:"http://192.168.0.172:5500/footer_mineAc.png", photoAc:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_mineAc.png",
nav_name:"我的", nav_name:"我的",
url:"/pages/user/index" url:"/pages/user/index"
}, },

View File

@ -0,0 +1,74 @@
# slider-range
uni-app 滑块区间选择组件
可根据具体需求,修改、自定义其他内容。
## 属性说明
|属性名|类型|默认值|说明|
| -- | -- | --|--|
| value | Array<Number, Number> | [0,100] |滑块已选中区间的值|
| min | Number| 0 | 滑块区间最小值 |
| max | Number | 100 | 滑块区间最大值 |
| step | Number | 1 | 拖动时的步长 |
| disabled | Boolean | false | 是否为禁用状态 |
| height | Number | 50 | 滑块容器高度 |
| barHeight | Number | 5 | 滑块进度条高度 |
| backgroundColor | String | #e9e9e9| 滑块进度条背景色|
| activeColor | String | #1aad19 | 已选中区间进度条颜色|
| blockSize | Number | 20 | 滑块大小 |
| blockColor | String | #fff | 滑块颜色 |
| decorationVisible | Boolean | false | 是否显示滑块内装饰元素|
| tipVisible | Boolean | true | 是否显示滑块值提示文本 |
| fomat| Function | | 滑块值提示文本格式化函数,**注意**:小程序中此属性必传,否则会报错,如果无需格式化,可以简单返回原始值: `format(val) { return val }`H5中可以不传。|
## 使用示例
```html
<slider-range
:value="rangeValue"
:min="rangeMin"
:max="rangMax"
:step="5"
:bar-height="3"
:block-size="26"
background-color="#EEEEF6"
active-color="#FF6B00"
:format="format"
:decorationVisible="true"
@change="handleRangeChange"
></slider-range>
```
```javascript
import SliderRange from '../components/slider-range/index.vue'
export default {
components: {
SliderRange
},
data() {
return {
rangeMin: 5,
rangMax: 200,
rangeValue: [10, 50]
}
},
methods: {
format(val) {
return val + '%'
},
handleRangeChange(e) {
this.rangeValue = e
}
}
}
```
效果图
![](http://images.alisali.cn/img_20190715175325.png)

View File

@ -0,0 +1,378 @@
<template>
<view
class="slider-range"
:class="{ disabled: disabled }"
:style="{ paddingLeft: blockSize / 2 + 'px', paddingRight: blockSize / 2 + 'px' }"
>
<view class="slider-range-inner" :style="{ height: height + 'px' }">
<view
class="slider-bar"
:style="{
height: barHeight + 'px',
}"
>
<!-- 背景条 -->
<view
class="slider-bar-bg"
:style="{
backgroundColor: backgroundColor,
}"
></view>
<!-- 滑块实际区间 -->
<view
class="slider-bar-inner"
:style="{
width: ((values[1] - values[0]) / (max - min)) * 100 + '%',
left: lowerHandlePosition + '%',
backgroundColor: activeColor,
}"
></view>
</view>
<!-- 滑动块- -->
<view
class="slider-handle-block"
:class="{ decoration: decorationVisible }"
:style="{
backgroundColor: blockColor,
width: blockSize + 'px',
height: blockSize + 'px',
left: lowerHandlePosition + '%',
}"
@touchstart="_onTouchStart"
@touchmove="_onBlockTouchMove"
@touchend="_onBlockTouchEnd"
data-tag="lowerBlock"
></view>
<!-- 滑动块- -->
<view
class="slider-handle-block"
:class="{ decoration: decorationVisible }"
:style="{
backgroundColor: blockColor,
width: blockSize + 'px',
height: blockSize + 'px',
left: higherHandlePosition + '%',
}"
@touchstart="_onTouchStart"
@touchmove="_onBlockTouchMove"
@touchend="_onBlockTouchEnd"
data-tag="higherBlock"
></view>
<!-- 滑块值提示 -->
<view v-if="tipVisible" class="range-tip" :style="lowerTipStyle">{{ format(values[0]) }}</view>
<view v-if="tipVisible" class="range-tip" :style="higherTipStyle">{{ format(values[1]) }}</view>
</view>
</view>
</template>
<script>
export default {
components: {},
props: {
//
value: {
type: Array,
default: function() {
return [0, 100]
},
},
//
min: {
type: Number,
default: 0,
},
//
max: {
type: Number,
default: 100,
},
step: {
type: Number,
default: 1,
},
format: {
type: Function,
default: function(val) {
return val
},
},
disabled: {
type: Boolean,
default: false,
},
//
height: {
height: Number,
default: 50,
},
//
barHeight: {
type: Number,
default: 5,
},
//
backgroundColor: {
type: String,
default: '#e9e9e9',
},
//
activeColor: {
type: String,
default: '#1aad19',
},
//
blockSize: {
type: Number,
default: 20,
},
blockColor: {
type: String,
default: '#fff',
},
tipVisible: {
type: Boolean,
default: true,
},
decorationVisible: {
type: Boolean,
default: false,
},
},
data() {
return {
values: [this.min, this.max],
startDragPos: 0, //
startVal: 0, //
}
},
computed: {
//
lowerHandlePosition() {
return ((this.values[0] - this.min) / (this.max - this.min)) * 100
},
//
higherHandlePosition() {
return ((this.values[1] - this.min) / (this.max - this.min)) * 100
},
lowerTipStyle() {
if (this.lowerHandlePosition < 90) {
return `left: ${this.lowerHandlePosition}%;`
}
return `right: ${100 - this.lowerHandlePosition}%;transform: translate(50%, -100%);`
},
higherTipStyle() {
if (this.higherHandlePosition < 90) {
return `left: ${this.higherHandlePosition}%;`
}
return `right: ${100 - this.higherHandlePosition}%;transform: translate(50%, -100%);`
},
},
created: function() {},
onLoad: function(option) {},
watch: {
//
value: {
immediate: true,
handler(newVal, oldVal) {
if (this._isValuesValid(newVal) && (newVal[0] !== this.values[0] || newVal[1] !== this.values[1])) {
this._updateValue(newVal)
}
},
},
},
methods: {
_updateValue(newVal) {
//
if (this.step >= this.max - this.min) {
throw new RangeError('Invalid slider step or slider range')
}
let newValues = []
if (Array.isArray(newVal)) {
newValues = [newVal[0], newVal[1]]
}
if (typeof newValues[0] !== 'number') {
newValues[0] = this.values[0]
} else {
newValues[0] = Math.round((newValues[0] - this.min) / this.step) * this.step + this.min
}
if (typeof newValues[1] !== 'number') {
newValues[1] = this.values[1]
} else {
newValues[1] = Math.round((newValues[1] - this.min) / this.step) * this.step + this.min
}
//
if (this.values[0] === newValues[0] && this.values[1] === newValues[1]) {
return
}
//
if (newValues[0] < this.min) {
newValues[0] = this.min
}
//
if (newValues[1] > this.max) {
newValues[1] = this.max
}
// 使
if (newValues[0] >= newValues[1]) {
//
if (newValues[0] === this.values[0]) {
newValues[1] = newValues[0] + this.step
} else {
//
newValues[0] = newValues[1] - this.step
}
}
this.values = newValues
this.$emit('change', this.values)
},
_onTouchStart: function(event) {
if (this.disabled) {
return
}
this.isDragging = true
let tag = event.target.dataset.tag
//h5
let e = event.changedTouches ? event.changedTouches[0] : event
this.startDragPos = e.pageX
this.startVal = tag === 'lowerBlock' ? this.values[0] : this.values[1]
},
_onBlockTouchMove: function(e) {
if (this.disabled) {
return
}
this._onDrag(e)
},
_onBlockTouchEnd: function(e) {
if (this.disabled) {
return
}
this.isDragging = false
this._onDrag(e)
},
_onDrag(event) {
if (!this.isDragging) {
return
}
let view = uni
.createSelectorQuery()
.in(this)
.select('.slider-range-inner')
view
.boundingClientRect(data => {
let sliderWidth = data.width
const tag = event.target.dataset.tag
let e = event.changedTouches ? event.changedTouches[0] : event
let diff = ((e.pageX - this.startDragPos) / sliderWidth) * (this.max - this.min)
let nextVal = this.startVal + diff
if (tag === 'lowerBlock') {
this._updateValue([nextVal, null])
} else {
this._updateValue([null, nextVal])
}
})
.exec()
},
_isValuesValid: function(values) {
return Array.isArray(values) && values.length == 2
},
},
}
</script>
<style scoped>
.slider-range {
position: relative;
padding-top: 40rpx;
}
.slider-range-inner {
position: relative;
width: 100%;
}
.slider-range.disabled .slider-bar-inner {
opacity: 0.35;
}
.slider-range.disabled .slider-handle-block {
cursor: not-allowed;
}
.slider-bar {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
}
.slider-bar-bg {
position: absolute;
width: 100%;
height: 100%;
border-radius: 10000px;
z-index: 10;
}
.slider-bar-inner {
position: absolute;
width: 100%;
height: 100%;
border-radius: 10000px;
z-index: 11;
}
.slider-handle-block {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
box-shadow: 0 0 3px 2px rgba(227, 229, 241, 0.5);
z-index: 12;
}
.slider-handle-block.decoration::before {
position: absolute;
content: '';
width: 6upx;
height: 24upx;
top: 50%;
left: 29%;
transform: translateY(-50%);
background: #eeedf2;
border-radius: 3upx;
z-index: 13;
}
.slider-handle-block.decoration::after {
position: absolute;
content: '';
width: 6upx;
height: 24upx;
top: 50%;
right: 29%;
transform: translateY(-50%);
background: #eeedf2;
border-radius: 3upx;
z-index: 13;
}
.range-tip {
position: absolute;
top: 0;
font-size: 24upx;
color: #666;
transform: translate(-50%, -100%);
}
</style>

View File

@ -0,0 +1,90 @@
<template>
<view class="demo-slider-range">
<view class="section-title">普通用法</view>
<view class="slider-item">
<slider-range
:value="slider1.rangeValue"
:min="slider1.min"
:max="slider1.max"
:step="slider1.step"
:bar-height="barHeight"
:block-size="blockSize"
:background-color="backgroundColor"
:format="format1"
@change="handleRangeChange"
></slider-range>
</view>
<view class="section-title">自定义</view>
<view class="slider-item">
<slider-range
:value="slider2.rangeValue"
:min="slider2.min"
:max="slider2.max"
:step="slider2.step"
:bar-height="barHeight"
:block-size="blockSize"
:background-color="backgroundColor"
:active-color="slider2.activeColor"
:format="format2"
:decorationVisible="slider2.decorationVisible"
@change="handleRangeChange"
></slider-range>
</view>
</view>
</template>
<script>
import SliderRange from '../../components/slider-range/index.vue'
export default {
components: {
SliderRange,
},
data() {
return {
barHeight: 3,
blockSize: 26,
backgroundColor: '#EEEEF6',
slider1: {
min: 50,
max: 200,
step: 10,
rangeValue: [50, 150],
},
slider2: {
rangeMin: 0,
rangMax: 100,
rangeValue: [8, 80],
step: 1,
activeColor: '#FF6B00',
decorationVisible: true,
},
}
},
methods: {
format1(val) {
return val
},
format2(val) {
return `${val}%`
},
handleRangeChange(e) {
this.rangeValue = e
},
},
}
</script>
<style>
.demo-slider-range {
background-color: #fff;
padding: 100rpx 40rpx 0;
}
.section-title {
padding: 0 0 20rpx;
color: #666;
}
.slider-item:not(:last-child) {
margin-bottom: 100rpx;
}
</style>

View File

@ -19,7 +19,8 @@
/* */ /* */
"modules" : { "modules" : {
"Payment" : {}, "Payment" : {},
"OAuth" : {} "OAuth" : {},
"Share" : {}
}, },
/* */ /* */
"distribute" : { "distribute" : {
@ -51,7 +52,7 @@
"appleiap" : {}, "appleiap" : {},
"weixin" : { "weixin" : {
"__platform__" : [ "ios", "android" ], "__platform__" : [ "ios", "android" ],
"appid" : "", "appid" : "wxb4018c78fa143450",
"UniversalLinks" : "" "UniversalLinks" : ""
} }
}, },
@ -60,6 +61,12 @@
"appid" : "wxb4018c78fa143450", "appid" : "wxb4018c78fa143450",
"UniversalLinks" : "" "UniversalLinks" : ""
} }
},
"share" : {
"weixin" : {
"appid" : "wxb4018c78fa143450",
"UniversalLinks" : ""
}
} }
} }
} }

View File

@ -3,7 +3,6 @@
"sass-loader": "^16.0.5" "sass-loader": "^16.0.5"
}, },
"dependencies": { "dependencies": {
"pinyin-pro": "^3.26.0",
"sass": "^1.89.2", "sass": "^1.89.2",
"uview-ui": "^2.0.38" "uview-ui": "^2.0.38"
} }

View File

@ -0,0 +1,385 @@
page {
background-color: #F6F6FA;
}
.container {
display: flex;
flex-direction: column;
min-height: calc(100vh - 120rpx);
width: 100%;
}
.searchBox {
display: flex;
align-items: center;
padding: 0 20rpx;
/* margin-top: 35rpx; */
justify-content: space-between;
background-color: #fff;
}
.searchBox_add {
display: flex;
align-items: center;
font-weight: 400;
font-size: 30rpx;
color: #000000;
}
.searchBox_add image {
width: 30rpx;
height: 30rpx;
margin-right: 16rpx;
}
.myRealEstate {
font-weight: 700;
padding-top: 36rpx;
font-weight: normal;
font-size: 36rpx;
color: #222222;
text-align: center;
background-color: #fff;
padding-bottom: 27rpx;
}
.myRealEstate .btn {
width: 600rpx;
height: 90rpx;
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
border-radius: 100rpx 100rpx 100rpx 100rpx;
font-weight: normal;
font-size: 36rpx;
color: #FFFFFF;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
margin-top: 30rpx;
}
.nearby {
padding: 0 20rpx;
margin-top: 20rpx;
background-color: #fff;
padding-top: 20rpx;
box-sizing: border-box;
flex: 1;
}
.nearbyTit {
display: flex;
justify-content: space-between;
}
.nearbyTit_left {
font-size: 36rpx;
color: #222222;
font-weight: 700;
}
.nearbyTit_right {
font-size: 26rpx;
color: #999999;
display: flex;
align-items: center;
}
.nearbyTit_right image {
width: 30rpx;
height: 30rpx;
}
.empty {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-weight: normal;
font-size: 28rpx;
color: #999999;
margin-top: 110rpx;
width: 100%;
}
.empty image {
width: 366rpx;
height: 226rpx;
margin-bottom: 27rpx;
}
.communityItem {
border-bottom: 1rpx solid #EBEBEB;
margin-top: 32rpx;
}
.communityItem_msg {
font-size: 26rpx;
color: #999999;
margin-top: 20rpx;
padding-bottom: 30rpx;
}
.communityItem_Box {
display: flex;
}
.communityItem_Box_left {
width: 180rpx;
overflow: hidden;
height: 180rpx;
border-radius: 20rpx 20rpx 20rpx 20rpx;
margin-right: 20rpx;
}
.communityItem_Box_left image {
width: 100%;
height: 100%;
}
.communityItem_Box_right {
flex: 1;
}
.communityItem_Box_right_tit {
font-size: 32rpx;
color: #222222;
margin-bottom: 8rpx;
}
.communityItem_Box_right_com {
font-size: 26rpx;
color: #555555;
margin-top: 8rpx;
height: 72rpx;
line-height: 36rpx;
-webkit-line-clamp: 2;
/* 限制显示 2 行 */
-webkit-box-orient: vertical;
/* 垂直排列 */
overflow: hidden;
/* 超出部分隐藏 */
text-overflow: ellipsis;
display: -webkit-box;
}
.communityItem_Box_right_msg {
margin-top: 14rpx;
}
.communityItem_Box_right_msg_right {
width: 140rpx;
height: 40rpx;
background: #FF370B;
border-radius: 100rpx 100rpx 100rpx 100rpx;
font-size: 26rpx;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
}
.communityItem_Box_right_msg {
display: flex;
align-items: center;
justify-content: space-between;
}
.communityItem_Box_right_msg_left {
display: flex;
align-items: center;
}
.communityItem_Box_right_msg_left1 {
width: 110rpx;
height: 40rpx;
background: rgba(255, 81, 42, 0.1);
border-radius: 100rpx 100rpx 100rpx 100rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 22rpx;
color: #555555;
margin-right: 20rpx;
}
.communityItem_Box_right_msg_left1 image {
width: 24rpx;
height: 24rpx;
margin-right: 10rpx;
}
.communityItem_Box_right_msg_left2 {
width: 110rpx;
height: 40rpx;
background: #FFF2DA;
border-radius: 100rpx 100rpx 100rpx 100rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 22rpx;
color: #555555;
}
.communityItem_Box_right_msg_left2 image {
width: 24rpx;
height: 24rpx;
margin-right: 10rpx;
}
.myRealEstateEmpty {
display: flex;
}
.myRealEstates {
width: 710rpx;
height: 200rpx;
margin: 0 auto;
position: relative;
}
.myRealEstates image {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.name {
font-size: 50rpx;
color: #FFFFFF;
text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.6);
text-align: center;
position: relative;
z-index: 2;
padding-top: 24rpx;
}
.Visitor {
font-weight: normal;
font-size: 24rpx;
color: #FFFFFF;
width: 380rpx;
display: flex;
align-items: center;
justify-content: center;
height: 52rpx;
margin: 0 auto;
margin-top: 30rpx;
position: relative;
z-index: 2;
background: rgba(0, 0, 0, 0.3);
border-radius: 10rpx 10rpx 10rpx 10rpx;
}
.tabList {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx;
box-sizing: border-box;
width: 100%;
font-weight: normal;
font-size: 30rpx;
color: #222222;
background-color: #f6f6fa;
}
.active {
position: relative;
color: #222222;
font-weight: 700;
}
.active::after {
content: '';
width: 52rpx;
height: 22rpx;
background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_active.png);
background-size: cover;
position: absolute;
left: 50%;
bottom: -20rpx;
transform: translateX(-50%);
}
.ConList{
background-color: #fff;
}
.ConItem {
display: flex;
padding: 30rpx 0;
margin: 0 20rpx;
box-sizing: border-box;
border-bottom: 1rpx solid #EBEBEB;;
}
.ConItem_left {
width: 180rpx;
height: 160rpx;
margin-right: 20rpx;
}
.ConItem_right {
flex: 1;
}
.ConItem_right_tit {
font-size: 32rpx;
color: #222222;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ConItem_right_time {
font-size: 26rpx;
color: #999999;
margin-top: 10rpx;
}
.ConItem_right_msg {
display: flex;
align-items: center;
margin-top: 30rpx;
}
.ConItem_right_msg2 {
font-weight: normal;
font-size: 24rpx;
color: #FFFFFF;
width: 80rpx;
height: 36rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
color: #FFFFFF;
border-radius: 5rpx 5rpx 5rpx 5rpx;
background: #FF370B;
margin-right: 13rpx;
}
.ConItem_right_msg1 {
width: 80rpx;
height: 36rpx;
background: #D9D9D9;
border-radius: 5rpx 5rpx 5rpx 5rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
color: #222222;
}

View File

@ -0,0 +1,98 @@
<template>
<view class="container">
<view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
<view class="searchBox_add">
<u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
</view>
</view>
<div class="myRealEstate">
<div class="myRealEstates">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communityNav.png" mode="aspectFill"></image>
<div class="name">滏阳锦苑</div>
<div class="Visitor">访客身份 点击立即入驻本社区</div>
</div>
</div>
<div class="tabList">
<div @click="changeTab(0)" :class="active == 0 ? 'active' : ''">全部公告</div>
<div @click="changeTab(1)" :class="active == 1 ? 'active' : ''">安全消防</div>
<div @click="changeTab(2)" :class="active == 2 ? 'active' : ''">小区通知</div>
<div @click="changeTab(3)" :class="active == 3 ? 'active' : ''">社区活动</div>
<div @click="changeTab(4)" :class="active == 4 ? 'active' : ''">党建</div>
</div>
<div class="ConList">
<div class="ConItem" v-for="item in 3" @click="desc">
<div class="ConItem_left">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_act2Img.png" mode="aspectFill"></image>
</div>
<div class="ConItem_right">
<div class="ConItem_right_tit">关于小区停车场治理通告</div>
<div class="ConItem_right_time">2025年5月27日 11:14:29</div>
<div class="ConItem_right_msg">
<div class="ConItem_right_msg2">
最新
</div>
<div class="ConItem_right_msg1">
置顶
</div>
</div>
</div>
</div>
</div>
</view>
</template>
<script>
import {
request,
picUrl,
uniqueByField,
menuButtonInfo,
NavgateTo
} from '../../../utils';
import {
apiArr
} from '../../../api/community';
export default {
data() {
return {
top: "",
localHeight: "",
active: 0
}
},
onLoad(options) {
const meun = menuButtonInfo();
this.top = meun.top;
// this.top = meun.height + meun.top;
this.localHeight = meun.height;
},
methods: {
changeTab(index) {
this.active = index;
},
back() {
uni.navigateBack({
delta: 1
});
},
desc(){
NavgateTo('../noticeDesc/index');
},
},
}
</script>
<style>
@import url("./index.css");
</style>

View File

@ -1,25 +1,42 @@
.main { page {
margin: 50rpx 80rpx 69rpx; background-color: #fff;
display: flex;
flex-direction: column;
} }
.line {
height: 20rpx;
width: 100%;
background-color: #f6f7fb;
}
.main{
margin: 0 80rpx;
padding-top: 26rpx;
}
.table { .table {
height: 150rpx;
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
border-bottom: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb;
box-sizing: border-box;
margin-bottom: 50rpx;
padding-bottom: 8rpx;
} }
.label { .label {
font-weight: bold;
font-size: 32rpx; font-size: 32rpx;
color: #000000; color: #000000;
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
.tip { .tip {
margin-top: 20rpx; margin-top: 20rpx;
font-weight: bold;
font-size: 26rpx; font-size: 26rpx;
color: #999999; color: #999999;
} }
.btn { .btn {
margin: 0 75rpx 0; margin: 0 75rpx 0;
height: 90rpx; height: 90rpx;
@ -30,15 +47,19 @@
font-size: 36rpx; font-size: 36rpx;
color: #ffffff; color: #ffffff;
text-align: center; text-align: center;
margin-top: 280rpx;
} }
.popup_container { .popup_container {
margin: 0 55rpx; margin: 0 55rpx;
} }
.popup_title { .popup_title {
margin-top: 53rpx; margin-top: 53rpx;
font-size: 26rpx; font-size: 26rpx;
color: #222222; color: #222222;
} }
.popup_community_name { .popup_community_name {
margin: 10rpx 0 14rpx; margin: 10rpx 0 14rpx;
text-align: center; text-align: center;
@ -46,16 +67,19 @@
font-size: 30rpx; font-size: 30rpx;
color: #ff370b; color: #ff370b;
} }
.popup_desc { .popup_desc {
font-weight: bold; font-weight: bold;
font-size: 26rpx; font-size: 26rpx;
color: #222222; color: #222222;
margin-bottom: 40rpx; margin-bottom: 40rpx;
} }
.popup_btn_List { .popup_btn_List {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
} }
.popup_btn { .popup_btn {
width: 170rpx; width: 170rpx;
height: 52rpx; height: 52rpx;
@ -64,6 +88,12 @@
background: #d9d9d9; background: #d9d9d9;
border-radius: 100rpx 100rpx 100rpx 100rpx; border-radius: 100rpx 100rpx 100rpx 100rpx;
} }
.popup_btn1 { .popup_btn1 {
background: #ff370b; background: #ff370b;
} }
.flexBox{
display: flex;
align-items: center;
justify-content: space-between;
}

View File

@ -1,127 +1,153 @@
<template> <template>
<view class="container"> <view class="container">
<view class="main"> <div class="line"></div>
<view class="table"> <view class="main">
<view class="label">小区名称</view> <view class="table">
<input type="text" placeholder="请输入小区名称" :value='name' data-name="name" @input="headerInputClick"> <view class="label">房产</view>
</view> <view class="flexBox" @click="choseCommunity">
<view class="table"> <input type="text" v-model="changeComm" disabled placeholder="请选择房产">
<view class="label">物业公司</view> <u-icon name="arrow-right"></u-icon>
<input type="text" placeholder="请输入物业公司全称" :value='managementName' data-name="managementName" @input="headerInputClick">
</view>
<view class="table">
<view class="label">小区地址</view>
<input type="text" placeholder="请输入小区地址" :value='addr' data-name="addr" @input="headerInputClick">
</view>
<view class="table">
<view class="label">物业服务电话</view>
<input type="number" placeholder="请输入物业服务电话" :maxlength=11 :value='managementMobile' data-name="managementMobile" @input="headerInputClick">
</view>
<view class="tip">
注意:新建的小区平台会与物业进行核实核实后自动建立如核实未通过将会创建失败!
</view>
</view>
<view class="btn" @click="headerSubmitClick">确定</view>
<u-popup :show="show" @close="close" mode="center" customStyle="width: 500rpx;" round="20rpx">
<view class="popup_container">
<view class="popup_title">您是要创建</view>
<view class="popup_community_name">{{ name }}</view>
<view class="popup_desc">新建的小区平台会与物业进行核实核实后自动建立如核实未通过将会创建失败!</view>
<view class="popup_btn_List">
<view class="popup_btn" @click="headerCloseClick">取消</view>
<view class="popup_btn popup_btn1" @click="headerPopupSubmitClick">确定</view>
</view> </view>
</view>
<view class="table">
<view class="label">姓名</view>
<input type="text" v-model="nameVal" placeholder="请输入姓名">
</view>
<view class="table">
<view class="label">手机</view>
<input type="text" v-model="phoneVal" placeholder="请输入手机号">
</view>
<view class="table">
<view class="label">身份</view>
<view class="flexBox" @click="chooseIdentity">
<input type="number" v-model="selectedLabel" disabled placeholder="请选择身份">
<u-icon name="arrow-right"></u-icon>
</view>
</view>
<!-- <view class="tip">
注意业主为在物业登记在册的人员需经过物业审 核确认后即可成为该房产的业主如需帮助可与物 业或平台联系
</view> -->
</view> </view>
</u-popup> <view class="btn" @click="headerSubmitClick">确定</view>
</view>
<u-popup :show="show" @close="close" mode="bottom" customStyle="width: 500rpx;" round="20rpx">
<u-picker :show="show" :columns="columns" keyName="label" @cancel="close" @confirm="confirm"></u-picker>
</u-popup>
</view>
</template> </template>
<script> <script>
import { request,NavgateTo, isPhone } from '../../../utils'; import {
import { apiArr } from '../../../api/community'; request,
export default { NavgateTo,
data() { isPhone
return { } from '../../../utils';
name: '', import {
managementName: '', apiArr
addr: '', } from '../../../api/community';
managementMobile: '', export default {
show: false, onBackPress(options) {
} console.log('from:' + options.from)
}, },
methods: { data() {
headerPopupSubmitClick () { return {
console.log('提交'); communityId: '',
roomId: '',
managementMobile: '',
show: false,
changeComm: '',
columns: [
[{
label: "业主",
value: "1"
},
{
label: "家属",
value: "2"
},
{
label: "租客",
value: "3"
},
{
label: "访客",
value: "4"
},
]
],
selectedValue: '',
selectedLabel: '',
nameVal: '',
phoneVal: '',
}
},
methods: {
close() {
this.show = false
},
chooseIdentity() {
this.show = true
console.log()
},
confirm(selected) {
console.log(selected.value[0].value)
this.selectedValue = selected.value[0].value
this.selectedLabel = selected.value[0].label
this.show = false
},
headerCloseClick() {
this.show = false;
},
headerInputClick(e) {
const {
name
} = e.currentTarget.dataset;
const {
value
} = e.detail;
this[name] = value;
},
async headerSubmitClick() {
await request(apiArr.create, "POST", {
community_id: parseInt(this.communityId),
room_id: parseInt(this.roomId),
user_id: uni.getStorageSync('userId'),
name: this.nameVal, //
mobile: this.phoneVal, //
type: parseInt(this.selectedValue), //
id_type: 1
}).then(res => {
console.log(res)
uni.showToast({
title: '创建成功',
icon: "none",
duration: 2000
});
NavgateTo("/packages/community/myCommunity/index")
})
},
choseCommunity() {
NavgateTo("/packages/community/choseCommunity/index")
},
}, },
headerCloseClick() {
this.show = false; onLoad(options) {
console.log("接收到的参数:", options);
this.communityId = options.community_id ? decodeURIComponent(options.community_id) : ''
this.roomId = options.room_id ? decodeURIComponent(options.room_id) : ''
this.changeComm = options.changeVal ? decodeURIComponent(options.changeVal) : ''
}, },
headerInputClick(e) { onReachBottom() {
const { name } = e.currentTarget.dataset;
const { value } = e.detail;
this[name] = value;
}, },
}
headerSubmitClick() {
if(!this.name) {
uni.showToast({
title: '请输入小区名称',
icon: 'none'
})
return;
}
if(!this.managementName) {
uni.showToast({
title: '请输入物业公司',
icon: 'none'
})
return;
}
if(!this.addr) {
uni.showToast({
title: '请输入小区地址',
icon: 'none'
})
return;
}
if(!this.managementMobile) {
uni.showToast({
title: '请输入物业联系电话',
icon: 'none'
})
return;
}
if(this.managementMobile.length !== 11) {
uni.showToast({
title: '请输入正确的11位电话号码',
icon: 'none'
})
return;
}
if(!isPhone(this.managementMobile)) {
uni.showToast({
title: '请输入正确的手机号',
icon: 'none'
})
return;
}
this.show = true;
}
},
onLoad(options) {
},
onReachBottom() {
},
}
</script> </script>
<style> <style>
@import url("./index.css"); @import url("./index.css");
</style> </style>

View File

@ -3,7 +3,7 @@
<view class="container"> <view class="container">
<div class="userAva"> <div class="userAva">
<image src="http://192.168.0.172:5500/com_MsgImg1.png" alt="" mode="aspectFill" /> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg1.png" alt="" mode="aspectFill" />
</div> </div>
<div class="Name">MarrekoZhang</div> <div class="Name">MarrekoZhang</div>

View File

@ -1,14 +1,14 @@
<template> <template>
<view class="container"> <view class="container">
<div class="searchBox"> <div class="searchBox">
<img src="http://192.168.0.172:5500/com_communitySearchIcon.png" alt="" /> <img src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png" alt="" />
<input placeholder="请输入小区名称" type="text"> <input placeholder="请输入小区名称" type="text">
</div> </div>
<div class="communityList"> <div class="communityList">
<div class="communityItem" v-for="(item, index) in 5" :key="index" @click="chooseCommunityInfo"> <div class="communityItem" v-for="(item, index) in 5" :key="index" @click="chooseCommunityInfo">
<div class="communityItem_img"> <div class="communityItem_img">
<img src="http://192.168.0.172:5500/com_act2Img.png" alt="" /> <img src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_act2Img.png" alt="" />
</div> </div>
<div class="communityItem_msg"> <div class="communityItem_msg">
@ -21,8 +21,8 @@
</div> </div>
<div class="communityItem_msg_more"> <div class="communityItem_msg_more">
<img src="http://192.168.0.172:5500/com_check1.png" alt="" /> <img src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png" alt="" />
<!-- <img src="http://192.168.0.172:5500/com_check2.png" alt="" /> --> <!-- <img src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png" alt="" /> -->
</div> </div>
</div> </div>

View File

@ -7,7 +7,7 @@
<div class="communityList"> <div class="communityList">
<div class="communityItem"> <div class="communityItem">
<div class="communityItem_img"> <div class="communityItem_img">
<image mode="aspectFill" src="http://192.168.0.172:5500/com_act2Img.png" alt="" /> <image mode="aspectFill" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_act2Img.png" alt="" />
</div> </div>
<div class="communityItem_msg"> <div class="communityItem_msg">
@ -20,7 +20,7 @@
</div> </div>
<div class="communityItem_msg_more"> <div class="communityItem_msg_more">
<image src="http://192.168.0.172:5500/com_communityMore.png" alt="" /> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communityMore.png" alt="" />
</div> </div>
</div> </div>

View File

@ -0,0 +1,288 @@
page {
background-color: #f6f7fb;
}
image {
width: 100%;
height: 100%;
}
.container {}
.currentAdd {
display: flex;
align-items: center;
justify-content: space-between;
padding: 26rpx 20rpx;
box-sizing: border-box;
background-color: #fff;
}
.currentAdd_left {
font-size: 34rpx;
color: #222222;
font-weight: 700;
}
.currentAdd_right {
font-size: 30rpx;
color: #FF370B;
display: flex;
align-items: center;
}
.currentAdd_right image {
width: 30rpx;
height: 27rpx;
margin-left: 10rpx;
}
.search {
display: flex;
align-items: center;
justify-content: space-between;
width: 710rpx;
height: 70rpx;
background: #FFFFFF;
border-radius: 100rpx 100rpx 100rpx 100rpx;
padding: 16rpx 30rpx;
box-sizing: border-box;
margin: 0 auto;
margin-top: 20rpx;
}
.search image {
width: 30rpx;
height: 30rpx;
}
.communityList {
background-color: #fff;
margin-top: 20rpx;
}
.communityItem {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30rpx 20rpx;
border-bottom: 1rpx solid #EBEBEB;
;
}
.communityItem_tit {
font-size: 30rpx;
color: #222222;
}
.communityItem_address {
font-size: 26rpx;
color: #999999;
margin-top: 10rpx;
}
.communityItem_right image {
width: 16rpx;
height: 30rpx;
}
/* 最后一个communityItem */
.communityItem:last-child {
border-bottom: none;
}
.empty {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: #fff;
padding-bottom: 200rpx;
margin-top: 20rpx;
padding-top: 111rpx;
}
.empty image {
width: 340rpx;
height: 225.59rpx;
}
.empty span {
margin-top: -40rpx;
font-size: 26rpx;
color: #999999;
}
.floorList {
background-color: #fff;
margin-top: 20rpx;
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 30rpx 20rpx;
}
.roomList {
background-color: #fff;
margin-top: 20rpx;
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 30rpx 20rpx;
}
.floorItem {
font-size: 28rpx;
color: #222222;
border-radius: 10rpx 10rpx 10rpx 10rpx;
border: 1rpx solid #222222;
margin-right: 46rpx;
margin-bottom: 30rpx;
width: 200rpx;
height: 60rpx;
white-space: nowrap;
display: flex;
align-items: center;
justify-content: center;
}
.floorItem:nth-child(3n) {
margin-right: 0;
}
.active {
border: 1rpx solid #FF370B;
background: #FFF5F5;
position: relative;
}
.active::after {
content: '';
width: 24rpx;
height: 30rpx;
position: absolute;
right: 0;
bottom: 0;
background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_activeIcon.png) no-repeat;
background-size: 100% 100%;
}
.roomItem {
width: 120rpx;
height: 60rpx;
border-radius: 10rpx 10rpx 10rpx 10rpx;
color: #222222;
border: 1rpx solid #222222;
font-size: 28rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 50rpx;
margin-bottom: 30rpx;
white-space: nowrap;
}
.roomItem:nth-child(4n) {
margin-right: 0;
}
.active2 {
border: 1rpx solid #FF370B;
background: #FFF5F5;
position: relative;
}
.active2::after {
content: '';
width: 24rpx;
height: 30rpx;
position: absolute;
right: 0;
bottom: 0;
background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_activeIcon.png) no-repeat;
background-size: 100% 100%;
}
.dialogBox {
background: rgba(0, 0, 0, 0.16);
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
}
.dialogBoxCon {
width: 600rpx;
height: 374rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
box-sizing: border-box;
padding-top: 40rpx;
margin-top: -200rpx;
}
.dialogBoxCon1 {
font-size: 30rpx;
color: #222222;
font-weight: 600;
text-align: center;
}
.dialogBoxCon2 {
font-size: 36rpx;
color: #FF370B;
font-weight: 600;
margin-top: 28rpx;
text-align: center;
}
.dialogBoxCon3 {
font-size: 32rpx;
color: #FF370B;
text-align: center;
}
.dialogBoxConBtnList {
display: flex;
align-items: center;
justify-content: center;
margin-top: 55rpx;
}
.dialogBoxConBtnItem1 {
width: 230rpx;
height: 70rpx;
background: #D9D9D9;
border-radius: 100rpx 100rpx 100rpx 100rpx;
font-size: 36rpx;
color: #222222;
display: flex;
align-items: center;
justify-content: center;
}
.dialogBoxConBtnItem2 {
font-size: 36rpx;
color: #FFFFFF;
width: 230rpx;
height: 70rpx;
background: #FF370B;
border-radius: 100rpx 100rpx 100rpx 100rpx;
margin-left: 50rpx;
display: flex;
align-items: center;
justify-content: center;
}

View File

@ -0,0 +1,285 @@
<template>
<div class="container">
<div class="currentAdd">
<div class="currentAdd_left">{{city.region}}</div>
<div class="currentAdd_right" @click="changeAddress">
切换城市
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_choseAddress.png"></image>
</div>
</div>
<div class="communityBox" v-if="step == 1">
<div class="search">
<input type="text" placeholder="请输入小区名称" v-model="communityName">
<image @click="searchByName" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"></image>
</div>
<!-- @click="chooseCommunity(item)" -->
<div class="communityList">
<div class="communityItem" v-for="item in communityList" :key="item.community_id" @click="nextStep(item)">
<div class="communityItem_left">
<div class="communityItem_tit">{{item.name}}</div>
<div class="communityItem_address">{{item.addr}}</div>
</div>
<div class="communityItem_right">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communityMore.png"></image>
</div>
</div>
</div>
<div class="empty" v-if="!communityList">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_noSearch.png"></image>
<span>未找到相关信息的小区</span>
</div>
</div>
<!-- <div class="communityBox" v-if="step == 2">
<div class="search">
<input type="text" placeholder="请输入楼栋名称">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"></image>
</div>
<div class="floorList">
<div @click="nextStep(item)" class="floorItem" v-for="(item,index) in foloorList" :key="index">
{{item.label}}
</div>
</div>
<div class="empty" v-if="!foloorList">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_noSearch.png"></image>
<span>未找到相关信息的楼栋</span>
</div>
</div> -->
<div class="communityBox" v-if="step == 2">
<div class="search">
<input v-model="searchQuery" type="text" placeholder="请输入楼栋名称">
<image @click="searchName" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"></image>
</div>
<div class="floorList">
<div @click="nextStep(item)" class="floorItem" v-for="(item, index) in filteredFloorsList" :key="index">
{{ item.label }}
</div>
</div>
<div class="empty" v-if="filteredFloorsList.length === 0">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_noSearch.png"></image>
<span>未找到相关信息的楼栋</span>
</div>
</div>
<div class="communityBox" v-if="step == 3">
<div class="search">
<input v-model="searchQuery" type="text" placeholder="请输入楼层名称">
<image @click="searchName" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"></image>
</div>
<div class="roomList">
<!-- <div class="roomItem" v-for="(item,index) in 5" :class="index == 1?'active2':''"> -->
<div @click="nextStep(item)" class="roomItem" v-for="(item,index) in filteredFloorsList" :key="index">
{{item.label}}
</div>
</div>
<div class="empty" v-if="filteredFloorsList.length === 0">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_noSearch.png"></image>
<span>未找到相关信息的楼层</span>
</div>
</div>
<div class="communityBox" v-if="step == 4">
<div class="search">
<input v-model="searchQuery" type="text" placeholder="请输入房间名称">
<image @click="searchName" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"></image>
</div>
<div class="roomList">
<!-- <div class="roomItem" v-for="(item,index) in 5" :class="index == 1?'active2':''"> -->
<div @click="nextStep(item)" class="roomItem" v-for="(item,index) in filteredFloorsList" :key="index">
{{item.label}}
</div>
</div>
<div class="empty" v-if="filteredFloorsList.length === 0">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_noSearch.png"></image>
<span>未找到相关信息的房间</span>
</div>
</div>
<areaPopup :show="show" @selectArea="selectArea" @close="close"></areaPopup>
<div class="dialogBox" v-if="dialogBoxShow">
<div class="dialogBoxCon">
<div class="dialogBoxCon1">确认选择</div>
<div class="dialogBoxCon2">{{cName}}</div>
<div class="dialogBoxCon3">{{facilityName + fName + rName}}</div>
<div class="dialogBoxConBtnList">
<div class="dialogBoxConBtnItem1" @click="dialogBoxShow = false">取消</div>
<div class="dialogBoxConBtnItem2" @click="confirmComm">确定</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {
apiArr
} from '../../../api/community';
import {
request,
picUrl,
uniqueByField,
menuButtonInfo,
NavgateTo
} from '../../../utils';
export default {
data() {
return {
show: false,
step: "1",
communityName: '',
cName: '',
fName: '',
communityId: '',
communityList: [],
facilityName: '',
// foloorList: [],
// floorsList: [],
rName: '',
roomId: '',
// roomList: [],
page_num: 1,
page_size: 10,
dialogBoxShow: false,
searchQuery: '',
filteredFloorsList: [],
searchList: [],
city: uni.getStorageSync('location'),
currentCommunity:""
}
},
methods: {
changeAddress() {
this.show = true
},
close() {
this.show = false
},
selectArea(val) {
console.log(val);
this.city = {
region: val.confirmDist.ad_name.split(',').join(''),
...val.confirmDist
}
this.searchByName();
this.show = false
},
async searchByName() {
console.log(this.communityName,'zzz')
await request(apiArr.getAllList, "POST", {
community_id: '',
name: this.communityName,
comm_code: '',
ad_code: this.city.ad_code ? this.city.ad_code : uni.getStorageSync('ad_code'),
page_num: this.page_num,
page_size: this.page_size
}).then(res => {
console.log(res.rows)
this.communityList = res.rows
})
},
async nextStep(item) {
this.communityId = item.community_id ? item.community_id : this.communityId;
this.facilityName = this.facilityName ? this.facilityName : item.label;
this.fName = this.step == 4 ? this.fName : (this.facilityName ? item.label : '')
await request(apiArr.commRoomSelect, "POST", {
community_ids: item.community_id ? item.community_id : this.communityId,
facility_names: this.facilityName,
floors: this.facilityName ? (this.facilityName == this.fName ? '' : item.label) : '',
}).then(res => {
this.filteredFloorsList = this.step == 4 ? this.filteredFloorsList : res.rows
this.searchList = res.rows
this.searchQuery = ''
if (this.step == '1') {
this.step = '2';
this.cName = item.name;
// this.foloorList = res.rows
} else if (this.step == '2') {
this.step = '3';
// this.floorsList = res.rows
} else if (this.step == '3') {
console.log(item.label);
this.fName = item.label;
// this.roomList = res.rows
this.step = '4';
} else {
this.dialogBoxShow = true;
this.rName = item.label
this.romId = item.value
}
})
},
searchName() {
//
this.filteredFloorsList = this.searchList.filter(item =>
item.label.includes(this.searchQuery)
);
},
confirmComm() {
const params = {
changeVal: `${this.cName}${this.facilityName}${this.fName}${this.rName}`,
community_id: this.communityId,
room_id: this.romId
};
console.log(params)
//
function createQueryString(params) {
return Object.keys(params)
.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
.join('&');
}
//
const targetPath = "/packages/community/addCommunity/index";
const queryString = createQueryString(params);
const fullPath = `${targetPath}?${queryString}`;
//
NavgateTo(fullPath);
},
//
chooseCommunity(e){
this.currentCommunity = e
this.getRoomSelect()
},
//
getRoomSelect(){
request(apiArr.commRoomSelect,"POST",{
community_ids:this.currentCommunity.community_id,
}).then(res=>{
console.log(res);
this.step = 2
})
},
},
onLoad(options) {
const meun = menuButtonInfo();
this.searchByName()
},
onReachBottom() {
},
}
</script>
<style>
@import url("./index.css");
</style>

View File

@ -378,17 +378,17 @@ page {
} }
.tabItem1 { .tabItem1 {
background: url(http://192.168.0.172:5500/com_tabBg1.png); background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_tabBg1.png);
background-size: cover; background-size: cover;
} }
.tabItem2 { .tabItem2 {
background: url(http://192.168.0.172:5500/com_tabBg2.png); background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_tabBg2.png);
background-size: cover; background-size: cover;
} }
.tabItem3 { .tabItem3 {
background: url(http://192.168.0.172:5500/com_tabBg3.png); background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_tabBg3.png);
background-size: cover; background-size: cover;
} }
@ -470,7 +470,7 @@ page {
content: ''; content: '';
width: 52rpx; width: 52rpx;
height: 22rpx; height: 22rpx;
background: url(http://192.168.0.172:5500/com_active.png); background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_active.png);
background-size: cover; background-size: cover;
position: absolute; position: absolute;
left: 50%; left: 50%;

View File

@ -2,57 +2,57 @@
<view class="container"> <view class="container">
<view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }"> <view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
<view class="searchBox_add"> <view class="searchBox_add">
<img src="http://192.168.0.172:5500/com_communityIcon.png" alt="" /> <img src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communityIcon.png" alt="" />
我的房产 我的房产
</view> </view>
</view> </view>
<div class="myRealEstate"> <div class="myRealEstate">
<div class="myRealEstates"> <div class="myRealEstates">
<image src="http://192.168.0.172:5500/com_communityNav.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communityNav.png" mode="aspectFill"></image>
<div class="name">滏阳锦苑</div> <div class="name">滏阳锦苑</div>
<div class="Visitor">访客身份 点击立即入驻本社区</div> <div class="Visitor">访客身份 点击立即入驻本社区</div>
</div> </div>
<div class="Announcement"> <div class="Announcement">
<image src="http://192.168.0.172:5500/com_Announcement.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_Announcement.png" mode="aspectFill"></image>
<div class="line"></div> <div class="line"></div>
<div class="msg" @click="notice"> <div class="msg" @click="notice">
<div>asdasdasd</div> <div>asdasdasd</div>
<image src="http://192.168.0.172:5500/com_more.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_more.png" mode="aspectFill"></image>
</div> </div>
</div> </div>
</div> </div>
<div class="navList"> <div class="navList">
<div class="navItem"> <div class="navItem">
<image src="http://192.168.0.172:5500/com_NavIcon1.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_NavIcon1.png" mode="aspectFill"></image>
物业服务 物业服务
</div> </div>
<div class="navItem" @click="repair"> <div class="navItem" @click="repair">
<image src="http://192.168.0.172:5500/com_NavIcon2.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_NavIcon2.png" mode="aspectFill"></image>
在线报修 在线报修
</div> </div>
<div class="navItem" @click="propertyPayment"> <div class="navItem" @click="propertyPayment">
<image src="http://192.168.0.172:5500/com_NavIcon3.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_NavIcon3.png" mode="aspectFill"></image>
物业缴费 物业缴费
</div> </div>
<div class="navItem"> <div class="navItem">
<image src="http://192.168.0.172:5500/com_NavIcon4.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_NavIcon4.png" mode="aspectFill"></image>
物业公积 物业公积
</div> </div>
<div class="navItem"> <div class="navItem">
<image src="http://192.168.0.172:5500/com_NavIcon5.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_NavIcon5.png" mode="aspectFill"></image>
社区管家 社区管家
</div> </div>
<div class="navItem" @click="mores"> <div class="navItem" @click="mores">
<image src="http://192.168.0.172:5500/com_NavIconMore.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_NavIconMore.png" mode="aspectFill"></image>
更多 更多
</div> </div>
</div> </div>
@ -78,7 +78,7 @@
<div class="nearbyList"> <div class="nearbyList">
<div class="emptys" v-if="false"> <div class="emptys" v-if="false">
<image src="http://192.168.0.172:5500/com_nearbyList_empty.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_nearbyList_empty.png" mode="aspectFill"></image>
周边暂无补贴公积金商家 周边暂无补贴公积金商家
<div class="emptysBtn"> <div class="emptysBtn">
@ -88,21 +88,21 @@
<div class="nearbyList_left"> <div class="nearbyList_left">
<div class="nearbyList_leftItem"> <div class="nearbyList_leftItem">
<image src="http://192.168.0.172:5500/com_nearbyImg1.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_nearbyImg1.png" mode="aspectFill"></image>
</div> </div>
<div class="nearbyList_leftItem"> <div class="nearbyList_leftItem">
<image src="http://192.168.0.172:5500/com_nearbyImg1.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_nearbyImg1.png" mode="aspectFill"></image>
</div> </div>
</div> </div>
<div class="nearbyList_right"> <div class="nearbyList_right">
<div class="nearbyList_rightItem"> <div class="nearbyList_rightItem">
<image src="http://192.168.0.172:5500/com_nearbyImg2.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_nearbyImg2.png" mode="aspectFill"></image>
</div> </div>
<div class="nearbyList_rightItem"> <div class="nearbyList_rightItem">
<image src="http://192.168.0.172:5500/com_nearbyImg2.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_nearbyImg2.png" mode="aspectFill"></image>
</div> </div>
<div class="nearbyList_rightItem"> <div class="nearbyList_rightItem">
<image src="http://192.168.0.172:5500/com_nearbyImg2.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_nearbyImg2.png" mode="aspectFill"></image>
</div> </div>
</div> </div>
</div> </div>
@ -124,7 +124,7 @@
<div v-if="active == 0" class="act1"> <div v-if="active == 0" class="act1">
<div class="empty" > <div class="empty" >
<image src="http://192.168.0.172:5500/com_empty.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_empty.png" mode="aspectFill"></image>
暂无信息 暂无信息
<div class="emptyAdd">发布社区互动信息</div> <div class="emptyAdd">发布社区互动信息</div>
@ -133,20 +133,20 @@
<div class="MsgList_left" v-if="false"> <div class="MsgList_left" v-if="false">
<div class="MsgList_leftItem"> <div class="MsgList_leftItem">
<div class="MsgList_leftItemImg"> <div class="MsgList_leftItemImg">
<image src="http://192.168.0.172:5500/com_MsgImg1.png" mode="widthFix"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg1.png" mode="widthFix"></image>
</div> </div>
<div class="MsgList_leftItemName">我家的小猫丢了谁看见了请联系我~</div> <div class="MsgList_leftItemName">我家的小猫丢了谁看见了请联系我~</div>
<div class="MsgList_leftItemMsg"> <div class="MsgList_leftItemMsg">
<div class="MsgList_leftItemMsg_like"> <div class="MsgList_leftItemMsg_like">
<image src="http://192.168.0.172:5500/com_likeIcon.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_likeIcon.png" mode="aspectFill"></image>
134 134
</div> </div>
<div class="MsgList_leftItemMsg_like"> <div class="MsgList_leftItemMsg_like">
<image src="http://192.168.0.172:5500/com_comIcon.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_comIcon.png" mode="aspectFill"></image>
134 134
</div> </div>
<div class="MsgList_leftItemMsg_like"> <div class="MsgList_leftItemMsg_like">
<image src="http://192.168.0.172:5500/com_shareIcon.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_shareIcon.png" mode="aspectFill"></image>
134 134
</div> </div>
</div> </div>
@ -156,7 +156,7 @@
<div class="MsgList_right" v-if="false"> <div class="MsgList_right" v-if="false">
<div class="MsgList_rightItem"> <div class="MsgList_rightItem">
<div class="MsgList_rightItemImg"> <div class="MsgList_rightItemImg">
<image src="http://192.168.0.172:5500/com_MsgImg2.png" mode="widthFix"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg2.png" mode="widthFix"></image>
</div> </div>
<div class="MsgList_rightItemName"> <div class="MsgList_rightItemName">
@ -165,15 +165,15 @@
<div class="MsgList_leftItemMsg"> <div class="MsgList_leftItemMsg">
<div class="MsgList_leftItemMsg_like"> <div class="MsgList_leftItemMsg_like">
<image src="http://192.168.0.172:5500/com_likeIcon.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_likeIcon.png" mode="aspectFill"></image>
134 134
</div> </div>
<div class="MsgList_leftItemMsg_like"> <div class="MsgList_leftItemMsg_like">
<image src="http://192.168.0.172:5500/com_comIcon.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_comIcon.png" mode="aspectFill"></image>
134 134
</div> </div>
<div class="MsgList_leftItemMsg_like"> <div class="MsgList_leftItemMsg_like">
<image src="http://192.168.0.172:5500/com_shareIcon.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_shareIcon.png" mode="aspectFill"></image>
134 134
</div> </div>
</div> </div>
@ -187,15 +187,15 @@
<div class="MsgList_leftItemMsg"> <div class="MsgList_leftItemMsg">
<div class="MsgList_leftItemMsg_like"> <div class="MsgList_leftItemMsg_like">
<image src="http://192.168.0.172:5500/com_likeIcon.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_likeIcon.png" mode="aspectFill"></image>
134 134
</div> </div>
<div class="MsgList_leftItemMsg_like"> <div class="MsgList_leftItemMsg_like">
<image src="http://192.168.0.172:5500/com_comIcon.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_comIcon.png" mode="aspectFill"></image>
134 134
</div> </div>
<div class="MsgList_leftItemMsg_like"> <div class="MsgList_leftItemMsg_like">
<image src="http://192.168.0.172:5500/com_shareIcon.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_shareIcon.png" mode="aspectFill"></image>
134 134
</div> </div>
</div> </div>
@ -206,7 +206,7 @@
<div v-if="active == 1" class="act2"> <div v-if="active == 1" class="act2">
<div class="empty" > <div class="empty" >
<image src="http://192.168.0.172:5500/com_empty.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_empty.png" mode="aspectFill"></image>
暂无信息 暂无信息
<div class="emptyAdd">发布社区互动信息</div> <div class="emptyAdd">发布社区互动信息</div>
@ -214,7 +214,7 @@
<div class="act2Item" v-for="itme in 3"> <div class="act2Item" v-for="itme in 3">
<div class="act2Item_left"> <div class="act2Item_left">
<image src="http://192.168.0.172:5500/com_act2Img.png" mode="widthFix"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_act2Img.png" mode="widthFix"></image>
</div> </div>
<div class="act2Item_right"> <div class="act2Item_right">
<div class="act2Item_right_Name">约1.7~2.3/ 软糯甜香新鲜水果 玉米</div> <div class="act2Item_right_Name">约1.7~2.3/ 软糯甜香新鲜水果 玉米</div>
@ -224,7 +224,7 @@
<div class="act2Item_right_Btn"> <div class="act2Item_right_Btn">
<div class="act2Item_right_Btn_left"> <div class="act2Item_right_Btn_left">
<image src="http://192.168.0.172:5500/com_act2Ms.png" mode="widthFix"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_act2Ms.png" mode="widthFix"></image>
<span>5.58</span> <span>5.58</span>
</div> </div>
@ -242,7 +242,7 @@
<div v-if="active == 2" class="act2"> <div v-if="active == 2" class="act2">
<div class="empty" > <div class="empty" >
<image src="http://192.168.0.172:5500/com_empty.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_empty.png" mode="aspectFill"></image>
暂无信息 暂无信息
<div class="emptyAdd">发布社区互动信息</div> <div class="emptyAdd">发布社区互动信息</div>
@ -250,7 +250,7 @@
<div class="act2Item" v-for="itme in 3"> <div class="act2Item" v-for="itme in 3">
<div class="act2Item_left"> <div class="act2Item_left">
<image src="http://192.168.0.172:5500/com_act2Img.png" mode="widthFix"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_act2Img.png" mode="widthFix"></image>
</div> </div>
<div class="act2Item_right"> <div class="act2Item_right">
<div class="act2Item_right_Name">约1.7~2.3/ 软糯甜香新鲜水果 玉米</div> <div class="act2Item_right_Name">约1.7~2.3/ 软糯甜香新鲜水果 玉米</div>
@ -278,7 +278,7 @@
<div v-if="active == 3" class="act4"> <div v-if="active == 3" class="act4">
<div class="act4Item" v-for="itme in 4"> <div class="act4Item" v-for="itme in 4">
<div class="act4Img"> <div class="act4Img">
<image src="http://192.168.0.172:5500/com_act2Img.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_act2Img.png" mode="aspectFill"></image>
</div> </div>
<div class="act4Name"> <div class="act4Name">
舒克小苏打牙膏洁白细护120G 舒克小苏打牙膏洁白细护120G

View File

@ -144,6 +144,9 @@ image {
margin: 0 auto; margin: 0 auto;
margin-top: 40rpx; margin-top: 40rpx;
} }
.ads_first{
margin-top: 0;
}
.tabs { .tabs {
margin-top: 32rpx; margin-top: 32rpx;
@ -170,7 +173,7 @@ image {
.active2::after { .active2::after {
content: ''; content: '';
background: url(http://192.168.0.172:5500/com_active.png) no-repeat; background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_active.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: 52rpx; width: 52rpx;
height: 22rpx; height: 22rpx;
@ -297,3 +300,9 @@ image {
font-size: 36rpx; font-size: 36rpx;
color: #FFFFFF; color: #FFFFFF;
} }
.grid_Pic {
width: 100rpx;
height: 100rpx;
margin-bottom: 16rpx;
}

View File

@ -1,216 +1,518 @@
<template> <template>
<div class="container"> <div class="container">
<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }"> <div
<div class="searchBox_add"> class="searchBox"
<div class="emptyCommunity" @click="addCommunity">添加我的房产</div> :style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
<div class="MyCommunity" v-if="false"> >
<div class="searchBox_add">
<div class="emptyCommunity" @click="addCommunity">
{{ communityVal }}
</div>
<!-- <div class="MyCommunity" v-if="false">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/community_mycommunity.png" <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/community_mycommunity.png"
mode="aspectFill"></image> mode="aspectFill"></image>
<span>惠生活</span> <span>惠生活</span>
<u-icon name="arrow-down" color="#999999" size="28"></u-icon> <u-icon name="arrow-down" color="#999999" size="28"></u-icon>
</div> </div> -->
</div> </div>
</div> </div>
<div class="swiperBox1"> <div class="swiperBox1">
<swiper> <swiper @animationfinish="swipers" autoplay circular>
<swiper-item> <swiper-item
<image src="http://192.168.0.172:5500/test.png"></image> v-for="(item, index) in bannerList"
</swiper-item> :key="index"
@click="headerServerClick(item)"
>
<image :src="item.ad_picture" mode="aspectFill" />
</swiper-item>
</swiper>
<swiper-item> <view class="dot">
<image src="http://192.168.0.172:5500/test.png"></image> <view
</swiper-item> :class="['dotItem', currentIdx == index ? 'active' : '']"
</swiper> v-for="(item, index) in bannerList"
:key="index"
>
</view>
</view>
<div class="dot"> <!-- <div class="dot">
<div class="dotItem"></div> <div class="dotItem"></div>
<div class="dotItem active"></div> <div class="dotItem active"></div>
</div> -->
</div>
<div class="swiperBox2">
<swiper @animationfinish="swipers" autoplay circular>
<swiper-item
v-for="(item, index) in streamerList"
:key="index"
@click="headerServerClick(item)"
>
<image :src="item.ad_picture" mode="aspectFill" />
</swiper-item>
</swiper>
</div>
<!-- <div class="funcList">
<div class="funcItem" v-for="item in functionList" @click="jump(item.mini_program_url)">
<image :src="item.nav_icon"></image>
{{ item.nav_name }}
</div> </div>
</div> </div> -->
<div class="swiperBox2"> <view class="funcList">
<swiper> <u-grid :col="rowNum" :border="false">
<swiper-item> <u-grid-item
<image src="http://192.168.0.172:5500/com_communityNav.png"></image> v-for="(item, index) in functionList"
</swiper-item> @click="jump(item.mini_program_url)"
:key="index"
>
<image class="grid_Pic" :src="item.nav_icon" mode=""></image>
<text>{{ item.nav_name }}</text>
</u-grid-item>
</u-grid>
</view>
<swiper-item> <div
<image src="http://192.168.0.172:5500/com_communityNav.png"></image> v-for="(item, index) in tileList"
</swiper-item> :key="index"
</swiper> :class="['ads', index == 0 ? 'ads_first' : '']"
</div> @click="headerServerClick(item)"
>
<image :src="item.ad_picture" mode="aspectFill" />
</div>
<div class="funcList"> <div class="tabs">
<div class="funcItem" v-for="item in functionList" @click="jump(item.link)"> <div
<image :src="item.url"></image> v-for="(item, index) in categoryList"
{{ item.name }} :key="index"
</div> :class="['tabItem', selectedTab === index ? 'active2' : '']"
</div> @click="selectTab(index, item)"
>
{{ item.category_name }}
</div>
</div>
<div class="ads"> <div class="newsList">
<image src="http://192.168.0.172:5500/com_communityNav.png" mode="aspectFill"></image> <div
</div> class="newsItem"
v-for="item in infoList"
@click="detail(item)"
:key="item.id"
>
<div class="newsItem_left">
<div class="newsItem_left_tit">{{ item.title }}</div>
<div class="newsItem_left_sub">{{ item.author }}</div>
</div>
<div class="newsItem_right">
<image :src="item.list_image" mode="aspectFill" />
</div>
</div>
</div>
<div class="ads"> <div class="tips">下拉加载后续10条共计30条</div>
<image src="http://192.168.0.172:5500/com_communityNav.png" mode="aspectFill"></image>
</div>
<div class="tabs"> <div class="bigAds" v-if="ads1Show">
<div class="tabItem active2">物业公告</div> <div class="bigAdsCon">
<div class="tabItem">天气</div> <div class="bigAdsCon_img">
<div class="tabItem">放假时间</div> <swiper @animationfinish="swipers" autoplay circular>
<div class="tabItem">送饭</div> <swiper-item
</div> v-for="(item, index) in largePopList"
:key="index"
@click="headerServerClick(item)"
>
<image :src="item.ad_picture" mode="aspectFill" />
</swiper-item>
</swiper>
</div>
<div class="close" @click="closeAds">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_close.png"
>
</image>
</div>
</div>
</div>
<div class="newsList"> <div class="bigAds" v-if="ads2Show">
<div class="newsItem" v-for="item in 4"> <div class="bigAdsCon2">
<div class="newsItem_left"> <div class="bigAdsCon2_img">
<div class="newsItem_left_tit">关于小区停车场治理通告</div> <swiper
<div class="newsItem_left_sub">高尚</div> :current="currentSwiperIndex"
</div> @change="onSwiperChange"
<div class="newsItem_right"> @animationfinish="swipers"
<image src="http://192.168.0.172:5500/test.png"></image> autoplay
</div> circular
</div> >
</div> <swiper-item v-for="(item, index) in popList" :key="index">
<image :src="item.ad_picture" mode="aspectFill" />
<div class="tips">下拉加载后续10条共计30条</div> </swiper-item>
</swiper>
<div class="bigAds" v-if="ads1Show"> </div>
<div class="bigAdsCon"> <div class="AdsBtnList">
<div class="bigAdsCon_img"> <div class="AdsBtnItem1" @click="closeAds2">取消</div>
<image src="http://192.168.0.172:5500/test.png"></image> <div class="AdsBtnItem2" @click="onDetailClick">了解详情</div>
</div> </div>
<div class="close" @click="closeAds"> </div>
<image src="http://192.168.0.172:5500/com_close.png"></image> </div>
</div> <nav-footer :current="1" />
</div> </div>
</div>
<div class="bigAds" v-if="ads2Show">
<div class="bigAdsCon2">
<div class="bigAdsCon2_img">
<image src="http://192.168.0.172:5500/test.png"></image>
</div>
<div class="AdsBtnList">
<div class="AdsBtnItem1" @click="closeAds">取消</div>
<div class="AdsBtnItem2">了解详情</div>
</div>
</div>
</div>
<nav-footer :current="1"/>
</div>
</template> </template>
<script> <script>
import { import {
request, request,
picUrl, picUrl,
uniqueByField, uniqueByField,
menuButtonInfo, menuButtonInfo,
NavgateTo NavgateTo,
} from '../../../utils'; } from "../../../utils";
import { apiArr } from '../../../api/v2Community';
import { apiArr } from "../../../api/v2Community";
export default { export default {
data() { data() {
return { return {
picUrl, communityVal: "添加我的房产",
top: "", picUrl,
localHeight: "", top: "",
queryPage: { localHeight: "",
page_num: 1, queryPage: {
page_size: 10, page_num: 1,
}, page_size: 10,
communityList: [], },
flag: false, communityList: [],
flag: false,
functionList: [ functionList: [],
{
name: "报事报修",
link: "",
url: "http://192.168.0.172:5500/com_homeIcon1.png",
},
{
name: "物业缴费",
link: "/packages/community/propertyPayment/index",
url: "http://192.168.0.172:5500/com_homeIcon2.png",
},
{
name: "物业公积",
link: "",
url: "http://192.168.0.172:5500/com_homeIcon3.png",
},
{
name: "物业公积",
link: "",
url: "http://192.168.0.172:5500/com_homeIcon4.png",
},
{
name: "物业服务",
link: "",
url: "http://192.168.0.172:5500/com_homeIcon5.png",
},
],
ads1Show: false, ads1Show: false,
ads2Show: false, ads2Show: false,
}
},
onLoad(options) {
const meun = menuButtonInfo();
this.top = meun.top;
// this.top = meun.height + meun.top;
this.localHeight = meun.height;
// this.getCommunityList()
},
bannerList: [], //广
currentIdx: 0,
streamerList: [], //广
tileList: [], //广
largePopList: [], //广
popList: [], //广
categoryList: [],
infoList: [],
selectedTab: 0,
currentAdIndex: 0,
methods: { rowNum: 0,
desc() { colNum: 0,
NavgateTo("../communityDetail/index")
},
apply() {
NavgateTo("../applyOwer/index")
},
closeAds() {
this.ads1Show = false
this.ads2Show = false
},
jump(e) {
console.log(e);
NavgateTo(e)
},
addCommunity(){ page_size: 10,
page_num: 1,
flag: false,
};
},
async onLoad(options) {
const meun = menuButtonInfo();
this.top = meun.top;
// this.top = meun.height + meun.top;
this.localHeight = meun.height;
// this.getCommunityList()
if (!uni.getStorageSync("changeCommData").id) {
uni.setStorageSync("changeCommData", { name: "森呼吸二期", id: 14 });
}
}, this.communityVal = uni.getStorageSync("changeCommData").name;
this.getfunctionNum();
this.getAdvertising();
this.getCategoryList();
},
// getCommunityList() { //
// let that = this onPullDownRefresh() {
// request(apiArr.getCommunityList, 'POST', { this.communityVal = uni.getStorageSync("changeCommData").name;
// page_num: that.queryPage.page_num, this.bannerList = [];
// page_size: that.queryPage.page_size, this.currentIdx = 0;
// user_id:"" this.streamerList = []; //广
// }).then(res => { this.tileList = []; //广
// console.log(res) this.largePopList = []; //广
// if (res.rows.length == that.queryPage.page_size) { this.popList = []; //广
// that.queryPage.page_num++ this.categoryList = [];
// that.flag = true this.infoList = [];
// that.communityList = that.communityList.concat(res.rows) this.selectedTab = 0;
// }else{ this.currentAdIndex = 0;
// that.flag = false this.getfunctionNum();
// that.communityList = that.communityList.concat(res.rows) this.getAdvertising();
// } this.getCategoryList();
// }) uni.stopPullDownRefresh();
// }, },
}, //
onReachBottom() {
if (this.flag) {
this.page_num++;
this.getCategoryList();
}
},
methods: {
// desc() {
// NavgateTo("../communityDetail/index")
// },
apply() {
NavgateTo("../applyOwer/index");
},
closeAds() {
this.ads1Show = false;
},
closeAds2() {
this.ads2Show = false;
},
jump(e) {
if (!e) {
this.NotOpen();
return;
}
NavgateTo(e);
},
} addCommunity() {
NavgateTo("/packages/community/myCommunity/index");
},
swipers(event) {
//
this.currentIdx = event.detail.current;
},
async getfunctionNum() {
const res = await request(
apiArr.commInfo,
"POST",
{},
{
slice: false,
}
);
this.rowNum = res.nav_row_num_comm;
this.colNum = res.nav_row_total_comm;
return await this.getfunctionList();
},
async getfunctionList() {
const res = await request(apiArr.navPage, "POST", {
community_id: Number(uni.getStorageSync("changeCommData").id),
page_num: 1,
page_size: 50,
});
console.log(res, "xx");
// rowNum colNum
const totalItems = this.rowNum * this.colNum;
// 使 slice totalItems
this.functionList = res.rows.slice(0, totalItems).map((item) => {
return {
...item,
nav_icon: picUrl + item.nav_icon,
};
});
console.log("functionList", this.functionList);
},
async getAdvertising() {
const res = await request(apiArr.advPage, "POST", {
community_id: Number(uni.getStorageSync("changeCommData").id),
ad_position: 1,
page_num: 1,
page_size: 50,
});
this.bannerList = res.rows.map((item) => {
return {
...item,
ad_picture: picUrl + item.ad_picture,
};
});
const res2 = await request(apiArr.advPage, "POST", {
community_id: Number(uni.getStorageSync("changeCommData").id),
ad_position: 2,
page_num: 1,
page_size: 50,
});
this.streamerList = res2.rows.map((item) => {
return {
...item,
ad_picture: picUrl + item.ad_picture,
};
});
const res3 = await request(apiArr.advPage, "POST", {
community_id: Number(uni.getStorageSync("changeCommData").id),
ad_position: 3,
page_num: 1,
page_size: 50,
});
this.tileList = res3.rows.map((item) => {
return {
...item,
ad_picture: picUrl + item.ad_picture,
};
});
const res4 = await request(apiArr.advPage, "POST", {
community_id: Number(uni.getStorageSync("changeCommData").id),
ad_position: 4,
page_num: 1,
page_size: 50,
});
this.largePopList = res4.rows.map((item) => {
return {
...item,
ad_picture: picUrl + item.ad_picture,
};
});
this.ads1Show = res4.rows.length !== 0 ? true : false;
const res5 = await request(apiArr.advPage, "POST", {
community_id: Number(uni.getStorageSync("changeCommData").id),
ad_position: 5,
page_num: 1,
page_size: 50,
});
this.popList = res5.rows.map((item) => {
return {
...item,
ad_picture: picUrl + item.ad_picture,
};
});
this.ads2Show = res5.rows.length !== 0 ? true : false;
},
headerServerClick(e) {
console.log("当前点击内容", e);
if (!e.link_url) {
this.NotOpen();
return;
}
if (e.link_url) {
// #ifdef APP-PLUS
uni.navigateTo({
url: "/pages/webview/webview?url=" + encodeURIComponent(e.link_url),
});
// #endif
// #ifdef H5
window.open(e.link_url, "_blank");
// #endif
// #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU
if (e.appid) {
uni.navigateToMiniProgram({
appId: e.appid,
path: e.link_url,
//
extraData: {
data1: "test",
},
success(res) {
console.log("打开成功", res);
},
});
} else {
NavgateTo(e.link_url);
// NavgateTo('/packages/localLife/index/index')
}
// 使web-view
// uni.showModal({
// title: '',
// content: ': ' + e.link_url,
// confirmText: '',
// success(res) {
// if (res.confirm) {
// uni.setClipboardData({
// data: e.link_url,
// success() {
// uni.showToast({
// title: '',
// icon: 'success'
// });
// }
// });
// }
// }
// });
// #endif
}
},
onSwiperChange(e) {
this.currentAdIndex = e.detail.current;
},
onDetailClick() {
// 广
const currentAd = this.popList[this.currentAdIndex];
if (currentAd) {
this.headerServerClick(currentAd);
} else if (this.popList.length > 0) {
// 使
this.headerServerClick(this.popList[0]);
}
},
NotOpen() {
uni.showModal({
title: "提示",
content: "此功能暂未开通!",
showCancel: false,
complete: (res) => {
if (res.cancel) {
}
},
});
},
async getCategoryList() {
const res = await request(apiArr.categoryPage, "POST", {
community_id: Number(uni.getStorageSync("changeCommData").id),
category_code: "",
category_name: "",
page_num: 1,
page_size: 30,
});
this.categoryList = res.rows;
this.selectTab(0, res.rows[0]);
},
async selectTab(index, item) {
this.selectedTab = index;
console.log("选中的tab:", index);
const res = await request(apiArr.infoPage, "POST", {
community_id: Number(uni.getStorageSync("changeCommData").id),
announcement_category_id: item.id,
title: "",
category_name: "",
page_num: this.page_num,
page_size: this.page_size,
});
if (res.rows && res.rows.length == this.page_size) {
this.flag = true;
} else {
this.flag = false;
}
res.rows = res.rows.map((item) => {
return {
...item,
list_image: picUrl + item.list_image,
};
});
this.infoList.splice(0, this.infoList.length);
this.infoList = this.infoList.concat(res.rows);
},
detail(e) {
console.log(e);
NavgateTo("../noticeDesc/index?id=" + e.id);
},
},
};
</script> </script>
<style> <style>

View File

@ -0,0 +1,98 @@
page {
background-color: #f6f7fb;
padding: 0;
}
.container {
min-height: 100vh;
}
image {
width: 100%;
height: 100%;
}
.empty {
font-size: 28rpx;
color: #999999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 180rpx;
}
.empty image {
width: 340rpx;
height: 240rpx;
}
.addBtn {
width: 600rpx;
height: 90rpx;
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
border-radius: 100rpx 100rpx 100rpx 100rpx;
font-size: 36rpx;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 100rpx;
}
.communityList {
padding: 0 20rpx;
background-color: #fff;
margin-top: 20rpx;
}
.communityItem {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1rpx solid #EBEBEB;
padding: 30rpx 0;
}
.communityItem_left{
display: flex;
align-items: center;
}
.communityItem_left_img {
width: 160rpx;
height: 140rpx;
border-radius: 20rpx;
overflow: hidden;
margin-right: 30rpx;
}
.communityItem_left_msg{
flex: 1;
}
.communityItem_left_msg_tit {
font-size: 30rpx;
color: #222222;
}
.communityItem_left_msg_tit span {
color: #FF370B;
}
.communityItem_left_msg_msg {
font-size: 26rpx;
color: #999999;
}
.communityItem_right{
width: 34rpx;
height: 34rpx;
margin-left: 80rpx;
}
/* 最后一个 communityItem */
.communityItem:last-child {
border-bottom: none;
}

View File

@ -0,0 +1,99 @@
<template>
<view class="container">
<view class="empty" v-if="false">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_newEmpty.png"
alt="" />
没有添加任何房产
</view>
<div class="communityList">
<div class="communityItem" v-for="item in communityList" :key="item.community_id"
@click="choseCommunity(item)">
<div class="communityItem_left">
<div class="communityItem_left_img">
<image :src="item.pic" mode="aspectFill"></image>
</div>
<div class="communityItem_left_msg">
<div class="communityItem_left_msg_tit">{{ item.name }}<span> {{ item.room_owner_list.length }}
</span></div>
<div class="communityItem_left_msg_msg">{{ item.addr }}</div>
</div>
</div>
<div class="communityItem_right">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png"
v-if="item.community_id != currentCommunity.id"></image>
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png"
v-if="item.community_id == currentCommunity.id"></image>
</div>
</div>
</div>
<div class="addBtn" @click="addCommunity">添加我的房产</div>
</view>
</template>
<script>
import {
request,
NavgateTo,
isPhone,
picUrl
} from '../../../utils';
import {
apiArr
} from '../../../api/community';
export default {
data() {
return {
communityList: [],
page_num: 1,
page_size: 10,
currentCommunity: {}
}
},
methods: {
addCommunity() {
NavgateTo("/packages/community/addCommunity/index")
},
async getList() {
await request(apiArr.commInfo, "POST", {
user_id: uni.getStorageSync('userId'),
longitude: uni.getStorageSync('location').lng,
latitude: uni.getStorageSync('location').lat,
page_num: this.page_num,
page_size: this.page_size
}).then(res => {
res.rows.forEach(item => {
item.pic = item.pic.startsWith('http') ? item.pic : picUrl + item.pic
});
this.communityList = res.rows
})
},
// toUpview(item) {
// uni.setStorageSync('changeCommData', { id: item.community_id, name: item.name });
// NavgateTo("/packages/community/index/index")
// },
choseCommunity(e) {
this.currentCommunity = e
uni.setStorageSync('changeCommData', { id: e.community_id, name: e.name });
uni.setStorageSync('currentCommunityAddr',e.addr);
NavgateTo("/packages/community/index/index")
},
},
onLoad(options) {
this.currentCommunity = uni.getStorageSync('changeCommData')
console.log(this.currentCommunity, 'currentCommunity');
this.getList();
},
onReachBottom() { },
}
</script>
<style>
@import url("./index.css");
</style>

View File

@ -307,7 +307,7 @@ page {
content: ''; content: '';
width: 52rpx; width: 52rpx;
height: 22rpx; height: 22rpx;
background: url(http://192.168.0.172:5500/com_active.png); background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_active.png);
background-size: cover; background-size: cover;
position: absolute; position: absolute;
left: 50%; left: 50%;

View File

@ -8,7 +8,7 @@
<div class="myRealEstate"> <div class="myRealEstate">
<div class="myRealEstates"> <div class="myRealEstates">
<image src="http://192.168.0.172:5500/com_communityNav.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communityNav.png" mode="aspectFill"></image>
<div class="name">滏阳锦苑</div> <div class="name">滏阳锦苑</div>
<div class="Visitor">访客身份 点击立即入驻本社区</div> <div class="Visitor">访客身份 点击立即入驻本社区</div>
</div> </div>
@ -25,7 +25,7 @@
<div class="ConList"> <div class="ConList">
<div class="ConItem" v-for="item in 3" @click="desc"> <div class="ConItem" v-for="item in 3" @click="desc">
<div class="ConItem_left"> <div class="ConItem_left">
<image src="http://192.168.0.172:5500/com_act2Img.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_act2Img.png" mode="aspectFill"></image>
</div> </div>
<div class="ConItem_right"> <div class="ConItem_right">
<div class="ConItem_right_tit">关于小区停车场治理通告</div> <div class="ConItem_right_tit">关于小区停车场治理通告</div>

View File

@ -6,18 +6,11 @@
</view> </view>
</view> </view>
<div class="myRealEstate">
<div class="myRealEstates">
<image src="http://192.168.0.172:5500/com_communityNav.png" mode="aspectFill"></image>
<div class="name">滏阳锦苑</div>
<div class="Visitor">访客身份 点击立即入驻本社区</div>
</div>
</div>
<div class="Tit">再生资源回收让我们一起行动起来</div> <div class="Tit">{{Info.title}}</div>
<div class="subTit">衡水繁花似锦物业管理有限公司 2025年6月6日10:37:27</div> <div class="subTit">{{Info.author}} {{Info.publish_time}}</div>
<div class="Con"> <div class="Con">
再生资源回收是一项对我们社会和小区都有益的活动通过回收再利用废纸废金属废塑料废玻璃和废电子产品等再生资源我们不仅可以保护环境还能为我们的小区带来诸多好处 <rich-text :nodes="Info.content"></rich-text>
</div> </div>
</view> </view>
@ -25,15 +18,16 @@
</template> </template>
<script> <script>
import { import {
request, request,
picUrl, picUrl,
uniqueByField, uniqueByField,
menuButtonInfo menuButtonInfo,
} from '../../../utils'; NavgateTo
} from '../../../utils';
import { import {
apiArr apiArr
} from '../../../api/community'; } from '../../../api/v2Community';
export default { export default {
@ -41,7 +35,8 @@ export default {
return { return {
top: "", top: "",
localHeight: "", localHeight: "",
active: 0 id:"",
Info:""
} }
}, },
onLoad(options) { onLoad(options) {
@ -49,12 +44,20 @@ export default {
this.top = meun.top; this.top = meun.top;
// this.top = meun.height + meun.top; // this.top = meun.height + meun.top;
this.localHeight = meun.height; this.localHeight = meun.height;
this.id = options.id
this.getInfo()
}, },
methods: { methods: {
changeTab(index) { //
this.active = index; getInfo(){
request(apiArr.getAnnounceInfo,"POST",{
id:Number(this.id)
}).then(res=>{
console.log(res);
this.Info = res
})
}, },
back() { back() {
uni.navigateBack({ uni.navigateBack({

View File

@ -123,7 +123,7 @@ page {
bottom: -2rpx; bottom: -2rpx;
width: 30rpx; width: 30rpx;
height: 30rpx; height: 30rpx;
background: url(http://192.168.0.172:5500/com_activeIcon.png); background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_activeIcon.png);
background-size: 100% 100%; background-size: 100% 100%;
} }

View File

@ -17,10 +17,7 @@
<div class="label">选择房源信息</div> <div class="label">选择房源信息</div>
<div class="roomList"> <div class="roomList">
<div :class="active == '1'?'roomItem active':'roomItem'" @click="changeAct(1)">1号楼1单位101</div> <div v-for="(item, index) in roomList" :key="index" :class="active == index ?'roomItem active':'roomItem'" @click="changeAct(index)">{{ item.name }}</div>
<div :class="active == '2'?'roomItem active':'roomItem'" @click="changeAct(2)">1号楼1单位101</div>
<div :class="active == '3'?'roomItem active':'roomItem'" @click="changeAct(3)">1号楼1单位101</div>
<div :class="active == '4'?'roomItem active':'roomItem'" @click="changeAct(4)">1号楼1单位101</div>
</div> </div>
<div class="row"> <div class="row">
@ -48,7 +45,7 @@
<div class="row"> <div class="row">
<div class="row_label">联系电话</div> <div class="row_label">联系电话</div>
<div class="row_con"> <div class="row_con">
<input type="text" placeholder="请输入您的联系方式" :value="contactPhone" data-name="contactPhone" @input="handlerInputClick"> <input type="number" maxlength="11" placeholder="请输入您的联系方式" :value="contactPhone" data-name="contactPhone" @input="handlerInputClick">
</div> </div>
</div> </div>
@ -68,7 +65,7 @@
<u-upload :fileList="imgList" name="imgList" @afterRead="afterReadImg" @delete="deletePic" multiple <u-upload :fileList="imgList" name="imgList" @afterRead="afterReadImg" @delete="deletePic" multiple
:maxCount="10"> :maxCount="10">
<div class="imgCon"> <div class="imgCon">
<image src="http://192.168.0.172:5500/com_imageImg.png" mode="widthFix"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_imageImg.png" mode="widthFix"></image>
上传图片 上传图片
</div> </div>
</u-upload> </u-upload>
@ -81,7 +78,7 @@
<u-upload v-if="!videoList.url" :fileList="videoList" @afterRead="afterReadVideo" @delete="deleteVideo" name="videoList" <u-upload v-if="!videoList.url" :fileList="videoList" @afterRead="afterReadVideo" @delete="deleteVideo" name="videoList"
:maxCount="1" accept="video"> :maxCount="1" accept="video">
<div class="imgCon"> <div class="imgCon">
<image src="http://192.168.0.172:5500/com_videoImg.png" mode="widthFix"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_videoImg.png" mode="widthFix"></image>
上传视频 上传视频
</div> </div>
</u-upload> </u-upload>
@ -128,9 +125,10 @@ export default {
data() { data() {
return { return {
picUrl, picUrl,
active:"1", active: 0,
top: "", top: "",
localHeight: "", localHeight: "",
roomList: [],
columns: [], columns: [],
category: {}, // category: {}, //
repairInfo: '', // repairInfo: '', //
@ -241,8 +239,8 @@ export default {
title: '提交中' title: '提交中'
}); });
const res = await request(apiArr.workOrderCrudCreat, 'POST', { const res = await request(apiArr.workOrderCrudCreat, 'POST', {
"community_id": 1, // ID "community_id": uni.getStorageSync('changeCommData').id, // ID
"room_id": 1231, // ID "room_id": this.roomList[this.active].room_id, // ID
// "location": "", // // "location": "", //
"order_category_id": this.category.id, // ID "order_category_id": this.category.id, // ID
"problem_description": this.repairInfo, // "problem_description": this.repairInfo, //
@ -272,6 +270,8 @@ export default {
uni.showLoading({ uni.showLoading({
title: '加载中' title: '加载中'
}) })
const res1 = await request(apiArr.workCommunityRoomList, 'POST', { community_id: uni.getStorageSync('changeCommData').id});
this.roomList = res1.rows;
const res = await request(apiArr.workOrderCategoryCrudList, 'POST', {}); const res = await request(apiArr.workOrderCategoryCrudList, 'POST', {});
uni.hideLoading(); uni.hideLoading();
this.columns = res.rows; this.columns = res.rows;

View File

@ -131,7 +131,7 @@ image {
position: absolute; position: absolute;
right: 8rpx; right: 8rpx;
top: 23rpx; top: 23rpx;
background: url(http://192.168.0.172:5500/com_jfImg.png) no-repeat; background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_jfImg.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
@ -293,7 +293,9 @@ image {
color: #FF370B; color: #FF370B;
font-weight: 700; font-weight: 700;
} }
.sucess{
color: #222222;
}
.boxshadow { .boxshadow {
background: rgba(0, 0, 0, 0.16); background: rgba(0, 0, 0, 0.16);

View File

@ -8,12 +8,13 @@
<div class="community"> <div class="community">
<div class="community_left"> <div class="community_left">
<image mode="aspectFill" src="http://192.168.0.172:5500/test.png" alt="" /> <image mode="aspectFill"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/test.png" alt="" />
</div> </div>
<div class="community_right" @click="changeShow"> <div class="community_right" @click="changeShow">
<div class="community_right_text"> <div class="community_right_text">
<div class="community_right_text1">世纪名城1号楼1单元101室</div> <div class="community_right_text1">{{ currentRoom.name }}</div>
<div class="community_right_text2">衡水市上海公馆6A</div> <div class="community_right_text2">{{ currentCommunityAddr }}</div>
</div> </div>
<div class="community_right_more"> <div class="community_right_more">
<u-icon bold color="#999999" size="30" name="arrow-right" @click="back"></u-icon> <u-icon bold color="#999999" size="30" name="arrow-right" @click="back"></u-icon>
@ -34,11 +35,11 @@
<div class="homeMoney_box_left2">可抵扣账户金额</div> <div class="homeMoney_box_left2">可抵扣账户金额</div>
</div> </div>
<div class="homeMoney_box_right"> <div class="homeMoney_box_right">
<div class="homeMoney_box_right1"><span></span>9735.00</div> <div class="homeMoney_box_right1"><span></span>{{ balanceMoney }}</div>
<div class="homeMoney_box_right2"> <div class="homeMoney_box_right2" @click="more">
查看详情 查看详情
<div style="margin-left: 12rpx;"> <div style="margin-left: 12rpx;">
<u-icon bold color="#894B11" size="30" name="arrow-right" @click="back"></u-icon> <u-icon bold color="#894B11" size="30" name="arrow-right" ></u-icon>
</div> </div>
</div> </div>
</div> </div>
@ -46,29 +47,32 @@
</div> </div>
<div class="payList" v-if="active == 0"> <div class="payList" v-if="active == 0">
<div class="payItem" v-for="item in 1"> <div class="payItem" v-for="(item, index) in Bill" :key="index">
<div class="payItem_tit"> <div class="payItem_tit">
<div class="payItem_left"> <div class="payItem_left">
<checkbox value="1"></checkbox> <checkbox :checked="item.check" @click="checkChange(item, index)"></checkbox>
<div style="margin-left: 24rpx;">2025</div> <div style="margin-left: 24rpx;">{{ item.order_date }}</div>
</div> </div>
<div class="payItem_right"> <div class="payItem_right">
<span></span> <span></span>
4900.00 {{ item.unpaid_amount }}
<p>未缴</p> <p>未缴</p>
<div style="margin-left: 40rpx;"> <div style="margin-left: 40rpx;" @click="changeCheck(item, index)">
<u-icon bold color="#894B11" size="30" name="arrow-down" @click="back"></u-icon> <u-icon bold color="#894B11" size="30" name="arrow-down" v-if="!item.more"></u-icon>
<u-icon bold color="#894B11" size="30" name="arrow-up" @click="back" v-if="false"></u-icon> <u-icon bold color="#894B11" size="30" name="arrow-up" v-if="item.more"></u-icon>
</div> </div>
</div> </div>
</div> </div>
<div class="payItem_List" v-for="item in 0"> <div class="payItem_List" v-for="(items, indes) in item.community_order_rows" v-if="item.more"
<checkbox value="1"></checkbox> :key="items.order_id">
<div class="Item_time">2025</div> <checkbox :checked="items.check" @click="itemsCheckChange(items, indes, index)"></checkbox>
<div class="Item_type">车位管理费</div> <div class="Item_time" v-if="items.billing_cycle == 1">{{ items.order_date }}</div>
<div class="Item_money">4500.00</div> <div class="Item_time" v-if="items.billing_cycle == 2">{{ items.order_datetime }}</div>
<div class="Item_status">未付款</div> <div class="Item_type">{{ items.community_fee_type.type_name }}</div>
<div class="Item_money">{{ items.money }}</div>
<div class="Item_status" v-if="items.status == 0">未付款</div>
<div class="Item_status sucess" v-if="items.status == 1">已付款</div>
</div> </div>
</div> </div>
</div> </div>
@ -78,7 +82,9 @@
<div class="PayTypeItem"> <div class="PayTypeItem">
<div class="PayTypeItem_left"> <div class="PayTypeItem_left">
<div class="PayTypeItem_img"> <div class="PayTypeItem_img">
<image mode="aspectFill" src="http://192.168.0.172:5500/com_wechat.png" alt="" /> <image mode="aspectFill"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
alt="" />
</div> </div>
<div class="PayTypeItem_con"> <div class="PayTypeItem_con">
<div class="PayTypeItem_con_tit">微信支付</div> <div class="PayTypeItem_con_tit">微信支付</div>
@ -87,14 +93,16 @@
</div> </div>
<div class="PayTypeItem_right"> <div class="PayTypeItem_right">
<radio></radio> <radio :checked="payType == 1" @click="changePayType(1)"></radio>
</div> </div>
</div> </div>
<div class="line3"></div> <div class="line3"></div>
<div class="PayTypeItem"> <div class="PayTypeItem">
<div class="PayTypeItem_left"> <div class="PayTypeItem_left">
<div class="PayTypeItem_img"> <div class="PayTypeItem_img">
<image mode="aspectFill" src="http://192.168.0.172:5500/com_homeMoney.png" alt="" /> <image mode="aspectFill"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_homeMoney.png"
alt="" />
</div> </div>
<div class="PayTypeItem_con"> <div class="PayTypeItem_con">
<div class="PayTypeItem_con_tit">物业公积金支付</div> <div class="PayTypeItem_con_tit">物业公积金支付</div>
@ -103,7 +111,7 @@
</div> </div>
<div class="PayTypeItem_right"> <div class="PayTypeItem_right">
<radio></radio> <radio :checked="payType == 2" @click="changePayType(2)"></radio>
</div> </div>
</div> </div>
</div> </div>
@ -112,46 +120,46 @@
<div class="bottom_left"> <div class="bottom_left">
<span>合计</span> <span>合计</span>
<p></p> <p></p>
4900.00 {{ currentMoney }}
</div> </div>
<div class="bottom_right"> <div class="bottom_right" @click="OrderPay">
立即支付 立即支付
</div> </div>
</div> </div>
<div class="payHisList" v-if="active == 1"> <div class="payHisList" v-if="active == 1">
<div class="payHisItem" v-for="item in 3"> <div class="payHisItem" v-for="item in payOrderList" :key="item.id">
<div class="row"> <div class="row">
<div class="row_label">缴费金额</div> <div class="row_label">缴费金额</div>
<div class="row_con1">53.1</div> <div class="row_con1">{{ item.money }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="row_label2">刚刚</div> <div class="row_label2"></div>
<div class="row_con2">2025-06-06 18:10支付</div> <div class="row_con2">{{ item.pay_time }}支付</div>
</div> </div>
<div class="line4"></div> <div class="line4"></div>
<div class="row"> <div class="row">
<div class="row_label">绑定房源</div> <div class="row_label">绑定房源</div>
<div class="row_con3"> <div class="row_con3">
<div class="row_con3_1">6个账单</div> <div class="row_con3_1">{{ item.community_order.length }}个账单</div>
<div class="row_con3_2">明细可从收据查看</div> <div class="row_con3_2">明细可从收据查看</div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="row_label">应缴费金额</div> <div class="row_label">应缴费金额</div>
<div class="row_con4">4704.00</div> <div class="row_con4">{{ item.money }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="row_label">物业费公积金抵扣金额</div> <div class="row_label">物业费公积金抵扣金额</div>
<div class="row_con4">-4704.00</div> <div class="row_con4">-{{ item.reduction_money }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="row_label">缴费单号</div> <div class="row_label">缴费单号</div>
<div class="row_con4">25061700200003 </div> <div class="row_con4">{{ item.order_pay_no }} </div>
</div> </div>
<div class="line4"></div> <div class="line4"></div>
<div class="Receipt">收据</div> <div class="Receipt">收据</div>
@ -168,8 +176,8 @@
</div> </div>
<div class="lines"></div> <div class="lines"></div>
<div class="communityList"> <div class="communityList">
<div class="communityItem" v-for="item in 8"> <div class="communityItem" v-for="item in roomList" :key="item.room_id">
<div class="communityItem_text">2323世纪名城1号楼1单元101室</div> <div class="communityItem_text">{{ item.facility_name }}{{ item.floor }} {{ item.number }}</div>
<div class="communityItem_radio"> <div class="communityItem_radio">
<radio></radio> <radio></radio>
</div> </div>
@ -192,7 +200,9 @@
<div class="BanlenceList"> <div class="BanlenceList">
<div class="banlenceItem"> <div class="banlenceItem">
<div class="banlenceItem_left"> <div class="banlenceItem_left">
<image mode="aspectFill" src="http://192.168.0.172:5500/com_wechat.png" alt="" /> <image mode="aspectFill"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
alt="" />
微信支付 微信支付
</div> </div>
<div class="banlenceItem_right"> <div class="banlenceItem_right">
@ -202,7 +212,9 @@
<div class="line3"></div> <div class="line3"></div>
<div class="banlenceItem"> <div class="banlenceItem">
<div class="banlenceItem_left"> <div class="banlenceItem_left">
<image mode="aspectFill" src="http://192.168.0.172:5500/com_homeMoney.png" alt="" /> <image mode="aspectFill"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_homeMoney.png"
alt="" />
物业公积金支付 物业公积金支付
</div> </div>
<div class="banlenceItem_right"> <div class="banlenceItem_right">
@ -229,6 +241,7 @@ import {
picUrl, picUrl,
uniqueByField, uniqueByField,
menuButtonInfo, menuButtonInfo,
formatDate,
NavgateTo NavgateTo
} from '../../../utils'; } from '../../../utils';
import { import {
@ -241,9 +254,24 @@ export default {
return { return {
top: "", top: "",
localHeight: "", localHeight: "",
active: 1, active: 0,
show: false, show: false,
show2: false, show2: false,
roomList: [],
currentRoom: {},
currentCommunity: "", //
currentCommunityAddr: "", //
Bill: "", //
balanceMoney: "",//
currentMoney: 0, //
payType: '1',
payInfoId: "",//id
page_size: 10,
page_num: 1,
payOrderList: [],
flag: false,
} }
}, },
onLoad(options) { onLoad(options) {
@ -251,12 +279,20 @@ export default {
this.top = meun.top; this.top = meun.top;
// this.top = meun.height + meun.top; // this.top = meun.height + meun.top;
this.localHeight = meun.height; this.localHeight = meun.height;
this.currentCommunity = uni.getStorageSync('changeCommData')
this.currentCommunityAddr = uni.getStorageSync("currentCommunityAddr")
this.getRoomSelect()
this.getUserGovenmentMoney()
}, },
methods: { methods: {
changeTab(index) { changeTab(index) {
this.active = index; this.active = index;
if (index == 1) {
this.page_num = 1
this.getPayList()
}
}, },
back() { back() {
uni.navigateBack({ uni.navigateBack({
@ -269,6 +305,179 @@ export default {
changeShow2() { changeShow2() {
this.show2 = !this.show this.show2 = !this.show
}, },
//
getRoomSelect() {
request(apiArr.getCommunityRoomList, 'POST', {
community_id: this.currentCommunity.id,
page_num: 1,
page_size: 50
}).then(res => {
this.roomList = res.rows
this.currentRoom = this.roomList[0]
this.getOrderList()
})
},
//
async getUserGovenmentMoney() {
request(apiArr.getUserGovenmentMoney, "POST", {}).then(res => {
console.log(res, '公积金');
this.balanceMoney = res.balance_after
})
},
//
async getOrderList() {
await request(apiArr.getOrderList, 'POST', {
room_id: this.currentRoom.room_id,
page_num: 1,
page_size: 50
}).then(res => {
console.log(res, '账单');
res.rows.forEach(item => {
item.check = false
item.more = false
item.community_order_rows.forEach(ite => {
ite.check = false
})
});
this.Bill = res.rows
})
},
//
changeCheck(e, index) {
this.Bill[index].more = !this.Bill[index].more
},
//
checkChange(e, index) {
this.Bill[index].check = !this.Bill[index].check
this.Bill[index].community_order_rows.forEach(item => {
if (this.Bill[index].check) {
item.check = true
} else {
item.check = false
}
})
//
let money = 0
this.Bill.forEach(item => {
item.community_order_rows.forEach(ite => {
if (ite.check) {
money += ite.money
}
})
})
this.currentMoney = money
},
//
itemsCheckChange(e, indes, index) {
this.Bill[index].community_order_rows[indes].check = !this.Bill[index].community_order_rows[indes].check
//
let isAll = this.Bill[index].community_order_rows.every(item => {
return item.check
})
if (isAll) {
this.Bill[index].check = true
} else {
this.Bill[index].check = false
}
//Billcommunity_order_rows
let money = 0
this.Bill.forEach(item => {
item.community_order_rows.forEach(ite => {
if (ite.check) {
money += ite.money
}
})
})
this.currentMoney = money
},
//
changePayType(e) {
this.payType = e
},
//
async createPay() {
let order_ids = []
this.Bill.forEach(item => {
item.community_order_rows.forEach(items => {
if (items.check) {
order_ids.push(items.order_id)
}
})
})
let name_mini = ''
if(this.payType == 1){
name_mini = '微信'
}else{
name_mini = '物业公积金'
}
if(!this.currentMoney){
return uni.showToast({
title: '请选择账单',
duration: 2000
});
}
await request(apiArr.createPayOrder, "POST", {
order_ids: order_ids,
community_id: this.currentCommunity.id,
room_id: this.currentRoom.room_id,
pay_user_id: uni.getStorageSync('userId'),
user_name: uni.getStorageSync('nickName'),
pay_user_name: uni.getStorageSync('nickName'),
//
pay_time: formatDate(new Date()),
money: this.currentMoney,
name_mini
}).then(res => {
console.log(res);
this.payInfoId = res.id
this.getPayInfo()
})
},
//
async getPayInfo() {
await request(apiArr.getPayOrderInfo, "POST", { order_pay_id: 6}).then(res => {
this.OrderPay()
})
},
//
async OrderPay(){
// this.payInfoId
await request(apiArr.OrderPay, "POST", { order_pay_id: 6}).then(res => {
console.log(res);
})
},
//
getPayList() {
request(apiArr.getPayOrderList, "POST",
{
room_id: this.currentRoom.room_id,
page_num: this.page_num,
page_size: this.page_size
}).then(res => {
console.log(res);
let flag = false
if (res.rows && res.rows.length == this.page_size) {
flag = true
} else {
flag = false
}
this.flag = flag
this.payOrderList = this.payOrderList.concat(res.rows)
})
},
//
more(){
NavgateTo("../providentFund/index")
},
}, },

View File

@ -0,0 +1,145 @@
page {
background-color: #f6f7fb;
}
.container {
.container_body {
background: url("https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/community_providentFund_Group_1523.png") no-repeat;
background-size: 100% 100%;
}
.title {
margin-top: 11rpx;
margin-bottom: 20rpx;
text-align: center;
font-size: 36rpx;
color: #ffffff;
}
.title_bottom {
display: flex;
justify-content: center;
align-items: baseline;
font-size: 60rpx;
color: #ffffff;
margin-bottom: 24rpx;
view {
margin-right: 19rpx;
}
}
.name {
display: flex;
justify-content: center;
font-size: 28rpx;
color: #ffffff;
padding-bottom: 68rpx;
text {
margin-right: 10rpx;
}
}
.main {
margin: 20rpx 20rpx 0;
.person_info {
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
padding: 26rpx 32rpx 20rpx 20rpx;
margin-top: 20rpx;
&:first-child {
margin-top: 0;
}
.item {
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
.label {
font-size: 28rpx;
color: #999999;
position: relative;
.popup {
position: absolute;
padding: 20rpx;
width: 542rpx;
top: -200rpx;
background: rgba(0,0,0,0.7);
border-radius: 20rpx 20rpx 20rpx 20rpx;
font-size: 28rpx;
color: #FFFFFF;
.angle {
position: absolute;
bottom: -10px; /* 调整箭头位置 */
left: 128px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgba(0,0,0,0.7);
}
}
}
.fix {
display: flex;
text {
margin-right: 10rpx;
}
}
.desc {
font-size: 28rpx;
color: #222222;
}
&:last-child{
margin-bottom: 0;
}
}
}
}
.btn {
width: 600rpx;
height: 90rpx;
line-height: 90rpx;
background: linear-gradient( 91deg, #FF7658 0%, #FF370B 100%);
border-radius: 100rpx 100rpx 100rpx 100rpx;
text-align: center;
font-size: 36rpx;
color: #FFFFFF;
margin: 77rpx auto 0;
}
.select_Popup {
.header {
margin: 0 33rpx;
height: 93rpx;
display: flex;
justify-content: space-between;
align-items: center;
.title {
font-size: 32rpx;
color: #222222;
}
.close {
font-size: 28rpx;
color: #999999;
}
}
.line {
height: 20rpx;
background: #F6F7FB;
}
.main {
max-height: 420rpx;
overflow: scroll;
margin: 0 20rpx;
.item {
height: 103rpx;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1rpx solid #EBEBEB;;
text {
font-size: 32rpx;
color: #222222;
}
.pic {
width: 34rpx;
height: 34rpx;
margin-right: 16rpx;
}
}
}
}
}

View File

@ -0,0 +1,187 @@
<template>
<view class="container">
<u-navbar title=" " leftIconSize="20px" leftIconColor="#FFFFFF" bgColor="transparent" :autoBack="true" />
<view class="container_body" :style="{ paddingTop: top + 'px' }">
<view class="title">物业公积金</view>
<view class="title_bottom">
<view>{{ moeny }}</view>
<u-icon name="info-circle" size="30rpx" color="linear-gradient( 180deg, #FFFFFF 0%, #FFD7D7 100%);" />
</view>
<view class="name" @click="headerSwitchClick">
<text>{{defaultName.name}}</text>
<u-icon name="arrow-right" color="#FFFFFF" size="30rpx" />
</view>
</view>
<view class="main">
<view class="person_info" v-for="(item,index) in list.owners" :key="index">
<view class="item">
<view class="label">姓名</view>
<view class="desc">{{ item.name }}</view>
</view>
<view class="item">
<view class="label">身份</view>
<view class="desc" v-if="item.type == 1">业主</view>
<view class="desc" v-if="item.type == 2">家属</view>
<view class="desc" v-if="item.type == 3">租户</view>
<view class="desc" v-if="item.type == 4">访客</view>
</view>
<view class="item">
<view class="label">手机号</view>
<view class="desc">{{item.mobile}}</view>
</view>
<view class="item">
<view class="label">房产总数</view>
<view class="desc">{{ item.count_of_rooms }}</view>
</view>
<view class="item">
<view class="label fix">
<text>物业费公积金总余额</text>
<u-icon name="info-circle-fill" size="30rpx" color="red" @click="headerIconClick(index)" />
<view class="popup" v-if="item.popupShow" @click="headerIconClick(index)">
{{ item.identity == '业主' ? ownerDesc : desc }}
<view class="angle"></view>
</view>
</view>
<view class="desc">{{item.property_fund_balance}}</view>
</view>
</view>
</view>
<view class="btn">去抵扣物业账单</view>
<u-popup :show="show" :round="50" @close="close">
<view class="select_Popup">
<view class="header">
<view></view>
<view class="title">选择房源</view>
<view class="close" @click="close">取消</view>
</view>
<view class="line"></view>
<view class="main">
<view class="item" v-for="(item,index) in houseList" :key="index" @click="headerConfirmClick(item)">
<text>{{ item.name }}</text>
<image
v-if="item.checked"
class="pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/community_providentFund_Group_1444.png"
mode="scaleToFill"
/>
<image
v-else
class="pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/community_providentFund_Ellipse_160.png"
mode="scaleToFill"
/>
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import {
request,
picUrl,
uniqueByField,
menuButtonInfo,
} from '../../../utils';
import { apiArr } from '../../../api/v2Community';
export default {
data() {
return {
top: '',
moeny: '0.00',
show: false,
ownerDesc: '本房产的物业公积金为该房产的所有成员物业公积金总和。无需经过成员同意便可用于本房产的物业费抵扣,一旦成功抵扣,成员所拥有的物业公积金将自动进行扣除。',
desc: '物业公积金可通用至您加入的所有房产,任一房产的物业相关费用均可用该物业公积金抵扣。',
defaultName: '',
list: [
],
houseList: [
],
roomList:[]
}
},
async onLoad(options) {
this.defaultName = {
...this.houseList[0],
checked: true
};
const meun = menuButtonInfo();
this.top = meun.height + meun.top;
await this.getRoomList()
await this.getInfo()
},
methods: {
headerConfirmClick(item) {
this.defaultName = {
...item,
checked: true
};
this.show = false;
this.getInfo()
},
//
headerSwitchClick() {
this.show = true;
const newRes = this.roomList.map(item => {
if (item.name === this.defaultName.name) {
return {
...item,
checked: true
}
}
return {
...item,
checked: false
}
});
console.log('newResnewRes', newRes);
this.houseList = newRes;
},
//
headerIconClick(ind) {
this.list.owners[ind].popupShow = !this.list.owners[ind].popupShow
},
close() {
this.show = false;
},
async getRoomList(){
await request(apiArr.getCommunityList,"POST",{
page_num:1,
page_size:50,
community_id:uni.getStorageSync("changeCommData").id
}).then(res=>{
res.rows.forEach(item=>{
item.checked = false
})
this.roomList = res.rows
this.defaultName = res.rows[0]
})
},
async getInfo(){
await request(apiArr.getGovernmentByRoom,"POST",{
room_id:this.defaultName.room_id
}).then(res=>{
res.owners.forEach(item => {
item.popupShow = false
});
this.list = res
})
},
},
}
</script>
<style lang="scss">
@import './index.scss';
</style>

View File

@ -57,7 +57,7 @@
content: ''; content: '';
width: 52rpx; width: 52rpx;
height: 22rpx; height: 22rpx;
background: url(http://192.168.0.172:5500/com_active.png); background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_active.png);
background-size: cover; background-size: cover;
position: absolute; position: absolute;
left: 50%; left: 50%;
@ -168,3 +168,22 @@ page {
margin: 0 auto; margin: 0 auto;
margin-top: 200rpx; margin-top: 200rpx;
} }
.empty {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-weight: normal;
font-size: 28rpx;
color: #999999;
margin-top: 110rpx;
width: 100%;
}
.empty image {
width: 366rpx;
height: 226rpx;
margin-bottom: 27rpx;
}

View File

@ -1,18 +1,9 @@
<template> <template>
<view class="box"> <view class="box">
<div <div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
class="searchBox"
:style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
>
<div class="searchBox_add"> <div class="searchBox_add">
<div class="searchBox_left"> <div class="searchBox_left">
<u-icon <u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
bold
color="#000"
size="40"
name="arrow-left"
@click="back"
></u-icon>
</div> </div>
<div class="searchBox_mid">我的报修</div> <div class="searchBox_mid">我的报修</div>
<div class="searchBox_right"></div> <div class="searchBox_right"></div>
@ -20,33 +11,21 @@
</div> </div>
<div class="tabList"> <div class="tabList">
<div <div :class="active == 1 ? 'tab active' : 'tab'" @click="headerTabsClick(1)">
:class="active == 1 ? 'tab active' : 'tab'" 待指派 <span>({{ awaitingNumb }})</span>
@click="headerTabsClick(1)"
>
待指派 <span>({{awaitingNumb}})</span>
</div> </div>
<div <div :class="active == 2 ? 'tab active' : 'tab'" @click="headerTabsClick(2)">
:class="active == 2 ? 'tab active' : 'tab'"
@click="headerTabsClick(2)"
>
进行中 <span>({{ underwayNum }})</span> 进行中 <span>({{ underwayNum }})</span>
</div> </div>
<div <div :class="active == 4 ? 'tab active' : 'tab'" @click="headerTabsClick(4)">
:class="active == 4 ? 'tab active' : 'tab'"
@click="headerTabsClick(4)"
>
已作废 <span>({{ discardNum }})</span> 已作废 <span>({{ discardNum }})</span>
</div> </div>
<div <div :class="active == 3 ? 'tab active' : 'tab'" @click="headerTabsClick(3)">
:class="active == 3 ? 'tab active' : 'tab'"
@click="headerTabsClick(3)"
>
已完成 <span>({{ doneNum }})</span> 已完成 <span>({{ doneNum }})</span>
</div> </div>
</div> </div>
<div class="orderList" v-for="(item, index) in list" :key="index"> <div v-if="list.length !== 0" class="orderList" v-for="(item, index) in list" :key="index">
<div class="orderItem" @click="handlerDetailClick(item.id)"> <div class="orderItem" @click="handlerDetailClick(item.id)">
<div :class="['orderItemTit', statusType[item.status].style]"> <div :class="['orderItemTit', statusType[item.status].style]">
<div class="orderItemTit_left">工单编号{{ item.order_code }}</div> <div class="orderItemTit_left">工单编号{{ item.order_code }}</div>
@ -90,6 +69,12 @@
</div> </div>
</div> </div>
<div v-if="list.length == 0" class="empty">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_nearbyList_empty.png"
mode="aspectFill"></image>
暂无数据
</div>
<div class="addBtn" @click="oneRepair">在线报修</div> <div class="addBtn" @click="oneRepair">在线报修</div>
</view> </view>
</template> </template>
@ -107,11 +92,11 @@ export default {
page_size: 10, page_size: 10,
flag: false, // flag: false, //
list: [], // list: [], //
awaitingNumb: '', // awaitingNumb: '', //
underwayNum: '', // underwayNum: '', //
doneNum: '', // doneNum: '', //
discardNum: '', // discardNum: '', //
// //
statusType: { statusType: {
1: { 1: {
desc: "待指派", desc: "待指派",
@ -151,18 +136,18 @@ export default {
this.page_num = 1; this.page_num = 1;
this.getTabsList(); this.getTabsList();
}, },
async init() { async init() {
const [awaitingNumb, underwayNum, doneNum, discardNum] = await Promise.all([ const [awaitingNumb, underwayNum, doneNum, discardNum] = await Promise.all([
this.awaitingRes(), this.awaitingRes(),
this.underwayRes(), this.underwayRes(),
this.doneRes(), this.doneRes(),
this.discardRes(), this.discardRes(),
]); ]);
this.awaitingNumb = awaitingNumb; this.awaitingNumb = awaitingNumb;
this.underwayNum = underwayNum; this.underwayNum = underwayNum;
this.discardNum = discardNum; this.discardNum = discardNum;
this.doneNum = doneNum; this.doneNum = doneNum;
}, },
async getTabsList() { async getTabsList() {
const res = await request(apiArr.getWorkOrderCrudList, "POST", { const res = await request(apiArr.getWorkOrderCrudList, "POST", {
status: this.active, status: this.active,
@ -182,42 +167,48 @@ export default {
this.page_num = this.page_num + 1; this.page_num = this.page_num + 1;
} }
}, },
// //
async awaitingRes() { async awaitingRes() {
const res = await request(apiArr.getWorkOrderCrudList, "POST", { const res = await request(apiArr.getWorkOrderCrudList, "POST", {
status: 1, status: 1,
page_num: this.page_num, page_num: this.page_num,
page_size: this.page_size, page_size: this.page_size,
}); });
return res.total; return res.total;
}, },
// //
async underwayRes() { async underwayRes() {
const res = await request(apiArr.getWorkOrderCrudList, "POST", { const res = await request(apiArr.getWorkOrderCrudList, "POST", {
status: 2, status: 2,
page_num: this.page_num, page_num: this.page_num,
page_size: this.page_size, page_size: this.page_size,
}); });
return res.total; return res.total;
}, },
// //
async discardRes() { async discardRes() {
const res = await request(apiArr.getWorkOrderCrudList, "POST", { const res = await request(apiArr.getWorkOrderCrudList, "POST", {
status: 3, status: 3,
page_num: this.page_num, page_num: this.page_num,
page_size: this.page_size, page_size: this.page_size,
}); });
return res.total; return res.total;
}, },
// //
async doneRes() { async doneRes() {
const res = await request(apiArr.getWorkOrderCrudList, "POST", { const res = await request(apiArr.getWorkOrderCrudList, "POST", {
status: 4, status: 4,
page_num: this.page_num, page_num: this.page_num,
page_size: this.page_size, page_size: this.page_size,
}); });
return res.total; return res.total;
}, },
back() {
uni.navigateBack({
delta: 1
})
}
}, },
onLoad(options) { onLoad(options) {
@ -225,13 +216,21 @@ export default {
this.top = meun.top; this.top = meun.top;
this.localHeight = meun.height; this.localHeight = meun.height;
this.init(); this.init();
this.getTabsList(); this.getTabsList();
}, },
onReachBottom() { onReachBottom() {
if (this.flag) { if (this.flag) {
this.init(); this.init();
} }
}, },
onPullDownRefresh() {
this.list = [];
this.flag = false;
this.page_num = 1;
this.getTabsList();
uni.stopPullDownRefresh();
},
}; };
</script> </script>

View File

@ -88,17 +88,17 @@
} }
.tabItem1 { .tabItem1 {
background: url(http://192.168.0.172:5500/com_tabBg1.png); background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_tabBg1.png);
background-size: cover; background-size: cover;
} }
.tabItem2 { .tabItem2 {
background: url(http://192.168.0.172:5500/com_tabBg2.png); background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_tabBg2.png);
background-size: cover; background-size: cover;
} }
.tabItem3 { .tabItem3 {
background: url(http://192.168.0.172:5500/com_tabBg3.png); background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_tabBg3.png);
background-size: cover; background-size: cover;
} }

View File

@ -75,128 +75,128 @@ export default {
return { return {
functionList: [ functionList: [
{ {
icon: "http://192.168.0.172:5500/com_serverIcon1.png", icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_serverIcon1.png",
name: "业主入驻", name: "业主入驻",
url: "" url: ""
}, },
{ {
icon: "http://192.168.0.172:5500/com_serverIcon2.png", icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_serverIcon2.png",
name: "我的房产", name: "我的房产",
url: "" url: ""
}, },
{ {
icon: "http://192.168.0.172:5500/com_serverIcon3.png", icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_serverIcon3.png",
name: "生活缴费", name: "生活缴费",
url: "weixin://dl/business/?t=WvQ1ZJv0J5Z" url: "weixin://dl/business/?t=WvQ1ZJv0J5Z"
}, },
{ {
icon: "http://192.168.0.172:5500/com_serverIcon4.png", icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_serverIcon4.png",
name: "便民服务", name: "便民服务",
url: "" url: ""
}, },
{ {
icon: "http://192.168.0.172:5500/com_serverIcon5.png", icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_serverIcon5.png",
name: "物业公积金", name: "物业公积金",
url: "" url: ""
}, },
{ {
icon: "http://192.168.0.172:5500/com_serverIcon6.png", icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_serverIcon6.png",
name: "社区互动", name: "社区互动",
url: "" url: ""
}, },
{ {
icon: "http://192.168.0.172:5500/com_serverIcon7.png", icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_serverIcon7.png",
name: "物业公积金", name: "物业公积金",
url: "" url: ""
}, },
{ {
icon: "http://192.168.0.172:5500/com_serverIcon8.png", icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_serverIcon8.png",
name: "物业服务", name: "物业服务",
url: "" url: ""
}, },
{ {
icon: "http://192.168.0.172:5500/com_serverIcon9.png", icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_serverIcon9.png",
name: "报事报修", name: "报事报修",
url: "" url: ""
}, },
{ {
icon: "http://192.168.0.172:5500/com_serverIcon10.png", icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_serverIcon10.png",
name: "物业缴费", name: "物业缴费",
url: "" url: ""
}, },
{ {
icon: "http://192.168.0.172:5500/com_serverIcon11.png", icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_serverIcon11.png",
name: "纠纷调解", name: "纠纷调解",
url: "" url: ""
}, },
{ {
icon: "http://192.168.0.172:5500/com_serverIcon12.png", icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_serverIcon12.png",
name: "社区管家", name: "社区管家",
url: "" url: ""
}, },
], ],
localList: [ localList: [
{ {
icon: "http://192.168.0.172:5500/com_localIcon1.png", icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_localIcon1.png",
name: "美食", name: "美食",
url: "" url: ""
}, },
{ {
icon: "http://192.168.0.172:5500/com_localIcon2.png", icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_localIcon2.png",
name: "家教", name: "家教",
url: "" url: ""
}, },
{ {
icon: "http://192.168.0.172:5500/com_localIcon3.png", icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_localIcon3.png",
name: "超市", name: "超市",
url: "" url: ""
}, },
{ {
icon: "http://192.168.0.172:5500/com_localIcon4.png", icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_localIcon4.png",
name: "健身", name: "健身",
url: "" url: ""
}, },
], ],
shopList: [ shopList: [
{ {
icon: "http://192.168.0.172:5500/com_shopIcon1.png", icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_shopIcon1.png",
name: "电商购物", name: "电商购物",
url: "" url: ""
}, },
{ {
icon: "http://192.168.0.172:5500/com_shopIcon2.png", icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_shopIcon2.png",
name: "社区团购", name: "社区团购",
url: "" url: ""
}, },
{ {
icon: "http://192.168.0.172:5500/com_shopIcon3.png", icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_shopIcon3.png",
name: "本地优选", name: "本地优选",
url: "" url: ""
}, },
{ {
icon: "http://192.168.0.172:5500/com_shopIcon4.png", icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_shopIcon4.png",
name: "社区拼团", name: "社区拼团",
url: "" url: ""
}, },
], ],
cardList: [ cardList: [
{ {
icon: "http://192.168.0.172:5500/com_cardIcon1.png", icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_cardIcon1.png",
name: "我的积分", name: "我的积分",
url: "" url: ""
}, },
{ {
icon: "http://192.168.0.172:5500/com_cardIcon2.png", icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_cardIcon2.png",
name: "积分兑换", name: "积分兑换",
url: "" url: ""
}, },
{ {
icon: "http://192.168.0.172:5500/com_cardIcon3.png", icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_cardIcon3.png",
name: "我的优惠卡", name: "我的优惠卡",
url: "" url: ""
}, },
{ {
icon: "http://192.168.0.172:5500/com_cardIcon4.png", icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_cardIcon4.png",
name: "我的会员卡", name: "我的会员卡",
url: "" url: ""
}, },

View File

@ -0,0 +1,411 @@
page {
background-color: #f6f6fa;
padding: 0 !important;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.header {
z-index: 9;
}
.main {
flex: 1;
box-sizing: border-box;
overflow: hidden;
overflow-y: auto;
position: relative;
}
.searchBox {
display: flex;
align-items: center;
background-color: #fff;
}
.Filter {
display: flex;
align-items: center;
background-color: #fff;
}
.Filter_right {
width: 133rpx;
height: 110rpx;
background: #FFFFFF;
border-radius: 0rpx 0rpx 0rpx 0rpx;
font-size: 30rpx;
color: #FF370B;
display: flex;
align-items: center;
justify-content: center;
}
.Filter_right image {
width: 26rpx;
height: 30rpx;
margin-left: 7rpx;
}
.iptBox {
width: 431rpx;
height: 70rpx;
background: #F6F7FB;
border-radius: 100rpx 100rpx 100rpx 100rpx;
margin-left: 40rpx;
display: flex;
align-items: center;
padding-left: 30rpx;
box-sizing: border-box;
}
.iptBox image {
width: 30rpx;
height: 30rpx;
margin-right: 16rpx;
}
.iptBox .u-input {
padding: 0 !important;
background-color: transparent !important;
}
.Filter_left {
display: flex;
align-items: center;
overflow: hidden;
overflow-x: auto;
white-space: nowrap;
}
.FilterItem {
font-size: 28rpx;
color: #222222;
display: flex;
align-items: center;
padding: 0 20rpx;
margin-right: 10rpx;
}
.FilterItem image {
width: 24rpx;
height: 15rpx;
margin-left: 10rpx;
}
.MasterList {
margin-top: 30rpx;
}
.MasterItem {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
.MasterItem_left {
width: 32rpx;
height: 32rpx;
margin-left: 20rpx;
}
.MasterItem_right {
flex: 1;
margin-left: 40rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
margin-right: 20rpx;
}
.MasterItem_info {
box-sizing: border-box;
padding: 12rpx 0 20rpx 20rpx;
display: flex;
align-items: flex-start;
}
.MasterItem_Info_left {
display: flex;
flex-direction: column;
justify-content: center;
width: 130rpx;
margin-right: 40rpx;
}
.MasterItem_Info_left image {
width: 130rpx;
height: 130rpx;
}
.state {
width: 110rpx;
height: 40rpx;
border-radius: 100rpx 100rpx 100rpx 100rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #FFFFFF;
margin: 0 auto;
margin-top: -20rpx;
z-index: 2;
position: relative;
}
.state1 {
background: #AECE2B;
}
.state2 {
background: #CECECE;
}
.state3 {
background: #FF370B;
}
.MasterItem_Info_right {
flex: 1;
}
.MasterItem_Info_right_1 {
display: flex;
align-items: center;
font-size: 36rpx;
color: #222222;
}
.Medal {
width: 35rpx;
height: 40rpx;
margin-left: 6rpx;
margin-right: 28rpx;
}
.star {
width: 22rpx;
height: 22rpx;
margin-right: 6rpx;
}
.MasterItem_Info_right_1 span {
font-size: 26rpx;
color: #000000;
}
.MasterItem_Info_right_2 {
font-size: 26rpx;
color: #999999;
margin-top: 8rpx;
}
.MasterItem_Info_right_3 {
font-size: 26rpx;
display: flex;
color: #999999;
align-items: center;
margin-top: 16rpx;
}
.MasterItem_Info_right_3 span {
color: #FF370B;
}
.MasterItem_Info_right_4 {
display: flex;
align-items: center;
margin-top: 16rpx;
}
.tagItem {
width: 130rpx;
height: 40rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100rpx 100rpx 100rpx 100rpx;
font-size: 22rpx;
color: #555555;
margin-right: 10rpx;
}
.tag1 {
background: rgba(255, 178, 23, 0.1);
}
.tag2 {
background: rgba(255, 81, 42, 0.1);
}
.tag3 {
background: rgba(175, 175, 175, 0.1);
}
.MasterItem_Info_right_5 {
font-size: 28rpx;
color: #999999;
display: flex;
align-items: center;
margin-top: 16rpx;
}
.MasterItem_Info_right_5 span {
color: #FF370B;
}
.MasterItem_Info_right_6 {
display: flex;
align-items: center;
margin-top: 20rpx;
}
.MasterItem_Info_right_6 image {
width: 110rpx;
height: 110rpx;
margin-right: 20rpx;
border-radius: 20rpx;
overflow: hidden;
}
.MasterItem_more {
font-weight: normal;
font-size: 28rpx;
color: #FF370B;
padding: 30rpx 0;
border-top: 1rpx solid #EBEBEB;
text-align: center;
}
.Btn {
font-size: 36rpx;
color: #FFFFFF;
width: 600rpx;
height: 90rpx;
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
border-radius: 100rpx 100rpx 100rpx 100rpx;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
left: 50%;
bottom: 60rpx;
transform: translateX(-50%);
z-index: 3;
}
.local {
display: flex;
align-items: center;
}
.local span {
font-weight: 700;
}
.filterMore1 {
display: flex;
align-items: center;
overflow: hidden;
overflow-x: auto;
white-space: nowrap;
margin-top: 20rpx;
}
.filterMoreItem {
font-size: 28rpx;
color: #222222;
display: flex;
align-items: center;
background-color: #f6f6fa;
padding: 0 20rpx;
margin-right: 10rpx;
margin-right: 20rpx;
border-radius: 20rpx;
padding: 10rpx 20rpx;
}
.filterMore2_item {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
color: #999;
}
.filterMore2_item_left {}
.active2 {
color: #ff702c !important;
}
.filterMore2_item_left2 {
color: #000;
}
.filterMore3Item {
font-size: 26rpx;
color: #555555;
width: 130rpx;
height: 50rpx;
background: #F6F7FB;
border-radius: 10rpx 10rpx 10rpx 10rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 40rpx;
margin-bottom: 18rpx;
}
.filterMore3Item:nth-child(4n) {
margin-right: 0;
}
.fullscreen-black-bg {
/* position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, .4);
box-sizing: border-box;
z-index: 9;
overflow: hidden; */
}
.FilterMore3 {
width: 100%;
background-color: #fff;
padding: 20rpx;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
}
.FilterMore {
width: 100%;
background-color: #fff;
padding: 20rpx;
box-sizing: border-box;
}
.dialogBox{
position: absolute;
background-color: rgba(0, 0, 0, .4);
z-index:8;
width: 100%;
height: 100%;
}

View File

@ -0,0 +1,296 @@
<template>
<view class="container">
<div class="header">
<div
class="searchBox"
:style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
>
<view class="searchBox_add">
<u-icon
bold
color="#000"
size="40"
name="arrow-left"
@click="back"
></u-icon>
</view>
<div class="iptBox">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
></image>
<u--input
placeholder="请输入内容"
border="none"
v-model="value"
@change="change"
></u--input>
</div>
</div>
<div class="Filter">
<div class="Filter_left">
<div class="FilterItem" @click="showDialog(1)">
附近
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png"
></image>
</div>
<div class="FilterItem" @click="showDialog(2)">
综合
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png"
></image>
</div>
<div class="FilterItem" @click="showDialog(3)">
排序
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png"
></image>
</div>
<div class="FilterItem" @click="showDialog(4)">
分类
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png"
></image>
</div>
<div class="FilterItem" @click="showDialog(5)">
性别
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png"
></image>
</div>
</div>
<div class="Filter_right">
筛选
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filter.png"
></image>
</div>
</div>
<!-- 位置筛选 -->
<div class="FilterMore" v-if="show1">
<div class="local">距离 <span>上海公馆</span></div>
<div class="filterMore1">
<div class="filterMoreItem">附近</div>
<div class="filterMoreItem">500m</div>
<div class="filterMoreItem">1km</div>
<div class="filterMoreItem">3km</div>
<div class="filterMoreItem">5km</div>
<div class="filterMoreItem">10km</div>
</div>
</div>
<!-- 综合筛选 -->
<div class="FilterMore" v-if="show2">
<div class="filterMore2_item">
<div class="filterMore2_item_left">综合</div>
<div class="filterMore2_item_right">
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
</div>
</div>
<div class="filterMore2_item">
<div class="filterMore2_item_left active2">从高到低</div>
<div class="filterMore2_item_right">
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
</div>
</div>
<div class="filterMore2_item">
<div class="filterMore2_item_left">从低到高</div>
<div class="filterMore2_item_right">
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
</div>
</div>
</div>
<!-- 排序筛选 -->
<div class="FilterMore" v-if="show3">
<div class="filterMore2_item">
<div class="filterMore2_item_left2">智能排序</div>
<div class="filterMore2_item_right">
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
</div>
</div>
<div class="filterMore2_item">
<div class="filterMore2_item_left2 active2">距离优先</div>
<div class="filterMore2_item_right">
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
</div>
</div>
<div class="filterMore2_item">
<div class="filterMore2_item_left2">好评优先</div>
<div class="filterMore2_item_right">
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
</div>
</div>
<div class="filterMore2_item">
<div class="filterMore2_item_left2">销量优先</div>
<div class="filterMore2_item_right">
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
</div>
</div>
</div>
<!-- 分类筛选 -->
<div class="FilterMore3" v-if="show4">
<div class="filterMore3Item" v-for="(item, index) in 9" :key="index">
家电维修
</div>
</div>
<!-- 性别筛选 -->
<div class="FilterMore3" v-if="show5">
<div class="filterMore3Item"></div>
<div class="filterMore3Item"></div>
</div>
</div>
<div class="main">
<!-- 遮罩 -->
<div class="dialogBox" v-if="isShowDia"></div>
<div class="MasterList">
<div class="MasterItem" v-for="(item, index) in 3" :key="index">
<div class="MasterItem_left">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/community_providentFund_Group_1444.png"
></image>
<image
v-if="false"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/community_providentFund_Ellipse_160.png"
>
</image>
</div>
<div class="MasterItem_right">
<div class="MasterItem_info">
<div class="MasterItem_Info_left">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/home_icon12.png"
></image>
<div class="state state1">待服务</div>
<div class="state state2" v-if="false">休息中</div>
<div class="state state3" v-if="false">服务中</div>
</div>
<div class="MasterItem_Info_right">
<div class="MasterItem_Info_right_1">
林师傅
<image
class="Medal"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_Champion.png"
>
</image>
<image
class="Medal"
v-if="false"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_RunnerUp.png"
>
</image>
<image
class="star"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start1.png"
></image>
<span>4.8</span>
</div>
<div class="MasterItem_Info_right_2">
52 广东梅州人 5-10
</div>
<div class="MasterItem_Info_right_3">
<span>500+</span>预定 <span>100+</span>评价
</div>
<div class="MasterItem_Info_right_4">
<div class="tagItem tag1">积极主动</div>
<div class="tagItem tag2">技术精湛</div>
<div class="tagItem tag3">技术精湛</div>
</div>
<div class="MasterItem_Info_right_5">
价格范围 <span>500-800</span>
</div>
<div class="MasterItem_Info_right_6">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg1.png"
></image>
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg1.png"
></image>
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg1.png"
></image>
</div>
</div>
</div>
<div class="MasterItem_more" @click="masterInfo">查看资料</div>
</div>
</div>
</div>
<div class="Btn">确定</div>
</div>
</view>
</template>
<script>
import {
request,
picUrl,
NavgateTo,
menuButtonInfo,
} from "../../../utils/index";
import { apiArr } from "../../../api/reservation";
export default {
data() {
return {
top: "",
localHeight: "",
show1: false,
show2: false,
show3: false,
show4: false,
show5: false,
isShowDia: false,
};
},
methods: {
masterInfo() {
NavgateTo("../masterInfo/index");
},
back() {
NavgateTo("1");
},
showDialog(index) {
this[`show${index}`] = !this[`show${index}`];
this.logOtherButtons(index);
this.isShowDia = this[`show${index}`];
},
logOtherButtons(excludeIndex) {
for (let i = 1; i <= 5; i++) {
if (i !== excludeIndex) {
this[`show${i}`] = false;
}
}
},
},
onReady() {},
onLoad(options) {
const meun = menuButtonInfo();
this.top = meun.top;
// this.top = meun.height + meun.top;
this.localHeight = meun.height;
},
onShow() {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {},
};
</script>
<style>
@import url("./index.css");
</style>

View File

@ -0,0 +1,176 @@
.container {
height: 95vh;
}
/* 位置和搜索样式 */
#local {
height: 30rpx;
width: 28.08rpx;
margin-right: 17rpx;
}
.location-search {
display: flex;
padding: 16rpx 30rpx;
/* background-color: #f5f7fb; */
border-radius: 60rpx;
gap: 16rpx;
height: 35rpx;
margin-top: 15rpx;
align-items: center;
}
.location {
display: flex;
align-items: center;
gap: 8rpx;
padding-right: 16rpx;
}
.location-text {
font-size: 26rpx;
color: #333;
}
.arrow-down {
width: 24rpx;
height: 24rpx;
}
.search-box {
flex: 1;
display: flex;
align-items: center;
gap: 12rpx;
background-color: #f5f7fb;
border-radius: 60rpx;
padding: 15rpx 24rpx;
}
.search-icon {
width: 25rpx;
height: 25rpx;
margin-right: 5rpx;
}
.search-placeholder {
font-size: 26rpx;
color: #999;
}
.main {
margin-top: 20rpx;
display: flex;
height: calc(100vh - 20rpx);
}
.left-menu {
width: 200rpx;
height: 100%;
background-color: #f5f7fb;
border-right: 1rpx solid #eee;
}
.menu-scroll {
height: 100%;
}
.menu-item {
height: 100rpx;
line-height: 100rpx;
text-align: center;
font-size: 28rpx;
color: #333;
position: relative;
}
.menu-item.active {
background-color: #fff;
color: #333;
}
.menu-item.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 8rpx;
height: 100%;
}
.right-content {
flex: 1;
height: 100%;
padding: 20rpx;
box-sizing: border-box;
}
.content-scroll {
height: 100%;
}
.content-img{
height: 200rpx;
border-radius: 20rpx;
}
.content-section {
/* margin-bottom: 30rpx; */
}
.section-text{
margin-right: 10rpx;
color: #ed3d16;
}
.section-title {
height: 80rpx;
line-height: 80rpx;
font-size: 28rpx;
font-weight: bold;
color: #333;
border-bottom: 1rpx solid #eee;
}
.section-content {
padding: 20rpx 0;
}
.service-category {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20rpx;
padding: 20rpx;
background-color: #fff;
/* margin-bottom: 20rpx; */
}
.category-item {
display: flex;
flex-direction: column;
align-items: center;
}
.category-icon {
width: 80rpx;
height: 80rpx;
margin-bottom: 12rpx;
border-radius: 10rpx;
}
.category-name {
font-size: 24rpx;
color: #333;
}
.content-item {
height: 150rpx;
margin-bottom: 20rpx;
background-color: #f9f9f9;
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
color: #666;
}

View File

@ -0,0 +1,185 @@
<template>
<view class="container">
<!-- 位置和搜索 -->
<view class="location-search">
<view class="location" @click="chooseLocation">
<image
id="local"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_localIcon.png"
mode="aspectFill"
></image>
<text class="location-text">{{ currentLocation }}</text>
<u-icon name="arrow-down" color="#999999" size="28"></u-icon>
</view>
<view class="search-box">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
class="search-icon"
></image>
<input class="search-placeholder" placeholder="请输入您要找的服务" />
</view>
</view>
<view class="main">
<view class="left-menu">
<scroll-view class="menu-scroll" scroll-y>
<view
v-for="(item, index) in categories"
:key="index"
class="menu-item"
:class="{ active: currentIndex === index }"
@click="scrollToSection(item.id, index)"
>
{{ item.name }}
</view>
</scroll-view>
</view>
<view class="right-content">
<scroll-view
class="content-scroll"
:scroll-into-view="currentSection"
scroll-y
scroll-with-animation
>
<view id="top" style="height: 1px; opacity: 0"></view>
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/guanggao4.png"
class="content-img"
></image>
<view
v-for="(item, index) in categories"
:key="index"
:id="item.id"
class="content-section"
>
<view class="section-title">
<text class="section-text">|</text>
{{ item.name }}
</view>
<!-- 这里添加每个分类对应的内容 -->
<view class="section-content">
<view class="service-category">
<view
class="category-item"
v-for="(item, index) in serviceCategories"
:key="index"
@click="navigateToService(item)"
>
<image :src="item.icon" class="category-icon"></image>
<text class="category-name">{{ item.name }}</text>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</view>
</template>
<script>
import {
request,
picUrl,
NavgateTo,
menuButtonInfo,
} from "../../../utils/index";
import { apiArr } from "../../../api/reservation";
export default {
data() {
return {
top: "",
localHeight: "",
currentLocation: "衡水市桃城区",
categories: [
{
id: "category1",
name: "家电维修",
},
{
id: "category2",
name: "数码维修",
},
{
id: "category3",
name: "家电清洗",
},
{
id: "category4",
name: "洗衣洗鞋",
},
{
id: "category5",
name: "精细擦窗",
},
{
id: "category6",
name: "家庭保姆",
},
{
id: "category7",
name: "管道疏通",
},
{
id: "category8",
name: "家庭保洁",
},
{
id: "category9",
name: "整理收纳",
},
{
id: "category10",
name: "母婴服务",
},
],
serviceCategories: [
{
name: "家电维修",
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_top3.png",
},
{
name: "数码维修",
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_top3.png",
},
{
name: "电器清洗",
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_top3.png",
},
{
name: "洗衣洗鞋",
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_top3.png",
},
{
name: "精细擦窗",
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_top3.png",
},
],
currentIndex: 0,
currentSection: "top",
};
},
methods: {
scrollToSection(id, index) {
this.currentIndex = index;
this.$nextTick(() => {
this.currentSection = index === 0 ? "top" : id;
});
},
navigateToService(item) {
uni.navigateTo({
url: `/packages/homeServer/serverInfo/index?service=${encodeURIComponent(
JSON.stringify(item)
)}`,
});
},
},
};
</script>
<style>
@import url("./index.css");
</style>

View File

@ -0,0 +1,397 @@
.container {
margin-top: 87rpx;
padding: 0 15rpx;
background-color: whte;
}
/* 头部样式 */
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 20rpx;
background-color: #fff;
}
.title {
font-size: 36rpx;
font-weight: bold;
color: #333;
}
.header-right {
display: flex;
gap: 30rpx;
}
.icon {
width: 40rpx;
height: 40rpx;
}
/* 位置和搜索样式 */
.location-search {
display: flex;
padding: 16rpx 30rpx;
background-color: #f5f7fb;
border-radius: 60rpx;
gap: 16rpx;
height: 35rpx;
margin-top: 15rpx;
}
.location {
display: flex;
align-items: center;
gap: 8rpx;
padding-right: 16rpx;
border-right: 2rpx solid #eee;
}
.location-text {
font-size: 26rpx;
color: #333;
}
.arrow-down {
width: 24rpx;
height: 24rpx;
}
.search-box {
flex: 1;
display: flex;
align-items: center;
gap: 12rpx;
background-color: #f5f7fb;
border-radius: 60rpx;
padding: 14rpx 24rpx;
}
.search-icon {
width: 25rpx;
height: 25rpx;
margin-right: 5rpx;
object-fit: cover;
}
.search-placeholder {
font-size: 26rpx;
color: #999;
}
/* 服务分类样式 */
.service-category {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20rpx;
padding: 20rpx;
background-color: #fff;
margin-bottom: 20rpx;
}
.category-item {
display: flex;
flex-direction: column;
align-items: center;
}
.category-icon {
width: 80rpx;
height: 80rpx;
margin-bottom: 12rpx;
}
.category-name {
font-size: 24rpx;
color: #333;
}
/* 公告样式 */
.announcement {
display: flex;
align-items: center;
padding: 16rpx 20rpx;
background-color: #f4f4f4;
margin-bottom: 20rpx;
border-radius: 15rpx;
}
.announcement-flex {
display: flex;
align-items: center;
}
.announcement-title {
font-size: 28rpx;
font-weight: bold;
color: #FF512A;
}
.announcement-img {
width: 25rpx;
height: 30rpx;
}
.hrStyle {
margin: 0 15rpx;
color: #c5c5c5;
}
.announcement-content {
flex: 1;
font-size: 26rpx;
color: #666;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.arrow-right {
width: 28rpx;
height: 28rpx;
}
/* 广告横幅样式 */
.banner-container {
padding: 0 20rpx 20rpx;
}
.banner-swiper {
border-radius: 16rpx;
overflow: hidden;
}
.banner-img {
width: 100%;
}
.serverList {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.serverItem {
border-radius: 30rpx;
box-sizing: border-box;
font-weight: 600;
font-size: 26rpx;
color: #222222;
position: relative;
margin-bottom: 12rpx;
}
.serverList_left {
display: block;
width: 260rpx;
height: 350rpx;
margin-right: 17rpx;
border-radius: 30rpx;
}
.serverList_left image {
height: 100%;
object-fit: cover;
}
.serverList_right {
width: 445rpx;
height: 350rpx;
}
.serverItem1 {
width: 440rpx;
height: 170rpx;
}
.serverItem2 {
width: 440rpx;
height: 170rpx;
}
/* 立即联系样式 */
.contact-section {
display: flex;
align-items: center;
gap: 20rpx;
padding: 24rpx;
background-color: #fcf4f0;
margin: 20rpx 0;
border-radius: 16rpx;
}
.contact-icon {
width: 80rpx;
height: 80rpx;
}
.contact-icon2 {
width: 50rpx;
height: 50rpx;
}
.contact-text {
flex: 1;
}
.contact-title {
font-size: 28rpx;
font-weight: bold;
color: #333;
margin-bottom: 4rpx;
}
.contact-subtitle {
font-size: 24rpx;
color: #999;
}
/* */
.interval {
width: 100vw;
height: 20rpx;
background-color: #f7f6fb;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
}
/* 热门服务样式 */
.hot-services {
padding: 20rpx;
border: 1rpx solid #e8e8e8;
}
.section-header {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20rpx;
}
.section-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.section-arrow {
width: 32rpx;
height: 32rpx;
margin-right: 10rpx;
}
.service-list {
display: flex;
flex-direction: column;
gap: 20rpx;
}
.service-card {
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
}
/* 服务信息样式 */
.service-info {
display: flex;
align-items: flex-end;
width: 100%;
padding: 20rpx;
}
.service-info-left {
width: 60%;
}
.service-info-left-top {
display: flex;
align-items: flex-end;
}
.service-info-right {
width: 35%;
display: flex;
justify-content: flex-end;
}
.service-footer {
align-items: center;
gap: 15rpx;
}
.service-image {
width: 100%;
height: 240rpx;
}
.service-image2 {
width: 35rpx;
height: 35rpx;
}
.service-badge {
position: absolute;
top: 20rpx;
left: 20rpx;
background-color: #FF512A;
color: #fff;
font-size: 24rpx;
padding: 4rpx 16rpx;
border-radius: 20rpx;
}
.service-name {
font-size: 30rpx;
font-weight: bold;
color: #333;
margin-bottom: 4rpx;
margin-right: 15rpx;
}
.service-tag {
display: inline-block;
color: #e1ca9b;
font-size: 22rpx;
padding: 2rpx 0;
border-radius: 20rpx;
margin-bottom: 4rpx;
}
.service-desc {
font-size: 24rpx;
color: #666;
margin-bottom: 20rpx;
line-height: 1.5;
}
.service-count {
font-size: 24rpx;
color: #999;
margin-left: 15rpx;
}
.service-button {
background-color: #FF512A;
color: #fff;
font-size: 26rpx;
padding: 12rpx 36rpx;
border-radius: 60rpx;
}
/* 回到顶部 */
.toUp {
width: 100rpx;
height: 100rpx;
position: fixed;
right: 33rpx;
bottom: 320rpx;
z-index: 10;
}
.toUp image {
width: 100%;
height: 100%;
}

View File

@ -0,0 +1,318 @@
<template>
<view class="container">
<!-- 头部标题 -->
<view class="header">
<text class="title">榴园到家 服务至上</text>
</view>
<!-- 位置和搜索 -->
<view class="location-search">
<view class="location" @click="chooseLocation">
<text class="location-text">{{ currentLocation }}</text>
<!-- <image src="" class="arrow-down"></image> -->
<u-icon name="arrow-down" color="#999999" size="28"></u-icon>
</view>
<view class="search-box" @click="searchService">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
class="search-icon"
mode="aspectFit"
></image>
<text class="search-placeholder">请输入您要找的服务</text>
</view>
</view>
<!-- 服务分类 -->
<view class="service-category">
<view
class="category-item"
v-for="(item, index) in serviceCategories"
:key="index"
@click="navigateToService(item)"
>
<image :src="item.icon" class="category-icon"></image>
<text class="category-name">{{ item.name }}</text>
</view>
</view>
<!-- 到家公告 -->
<view class="announcement">
<view class="announcement-flex">
到家
<text class="announcement-title"> 公告</text>
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_notice1.png"
class="announcement-img"
mode="aspectFit"
></image>
</view>
<view class="hrStyle">|</view>
<text class="announcement-content"
>公告内容公告内容公告内容公告内容...</text
>
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_notice2.png"
class="arrow-right"
@click="lookNotice"
mode="aspectFit"
></image>
</view>
<!-- 广告横幅 -->
<view class="serverList">
<view class="serverList_left">
<!-- <view> -->
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/guanggao1.png" mode="aspectFit"/>
<!-- <swiper-item v-for="(item, index) in homeLeftList" :key="index">
<image :src="item.pic_src" alt="" mode="aspectFit" />
</swiper-item> -->
<!-- </view> -->
</view>
<view class="serverList_right">
<view
:class="['serverItem', `serverItem${index + 1}`]"
@tap="headerServerClick(item)"
v-for="(item, index) in homeRightList"
:key="index"
>
<image :src="item.pic_src" mode="" />
</view>
</view>
</view>
<!-- 立即联系 -->
<view class="contact-section" @click="contactService">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_kefu1.png"
class="contact-icon"
></image>
<view class="contact-text">
<text class="contact-title">立即联系</text>
<br />
<text class="contact-subtitle">未找到您需要的服务</text>
</view>
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_kefu2.png"
class="contact-icon2"
></image>
</view>
<view class="interval"></view>
<!-- 推荐热门服务 -->
<view class="hot-services">
<view class="section-header">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_bottom1.png"
class="section-arrow"
></image>
<text class="section-title">推荐热门服务</text>
</view>
<view class="service-list">
<view
class="service-card"
v-for="(service, index) in hotServiceList"
:key="index"
>
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/ceshi.png"
class="service-image"
></image>
<view class="service-info">
<view class="service-info-left">
<view class="service-info-left-top">
<text class="service-name">{{ service.name }}</text>
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_bottom2.png"
class="service-image2"
></image>
<text class="service-tag">{{ service.tag }}</text>
</view>
<br />
<text class="service-desc">{{ service.description }}</text>
</view>
<view class="service-info-right">
<view class="service-footer">
<view
class="service-button"
@click="navigateToReservation(service)"
>
<text class="button-text">去预约</text>
</view>
<text class="service-count">{{ service.count }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
<nav-footer :current="3" />
<!-- 回到顶部 -->
<div class="toUp" @click="scrollToTop">
<u-badge
numberType="limit"
type="error"
max="99"
:value="value"
></u-badge>
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/toUp.png"></image>
</div>
</view>
</template>
<script>
import {
request,
picUrl,
NavgateTo,
menuButtonInfo,
} from "../../../utils/index";
import { apiArr } from "../../../api/reservation";
import nav from "../../../components/nav/nav";
export default {
components: {
nav,
},
data() {
return {
//
currentLocation: "衡水市桃城区",
//
serviceCategories: [
{
name: "家电维修",
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_top1.png",
},
{
name: "数码维修",
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_top2.png",
},
{
name: "电器清洗",
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_top3.png",
},
{
name: "洗衣洗鞋",
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_top4.png",
},
{
name: "精细擦窗",
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_top5.png",
},
{
name: "整理收纳",
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_top6.png",
},
{
name: "家庭保姆",
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_top7.png",
},
{
name: "母婴服务",
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_top8.png",
},
{
name: "管道疏通",
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_top9.png",
},
{
name: "家庭保洁",
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_top10.png",
},
],
homeLeftList: [
{
title: "",
pic_src: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/guanggao1.png",
},
],
homeRightList: [
{
title: "",
pic_src: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/guanggao2.png",
},
{
title: "",
pic_src: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/guanggao3.png",
},
],
//
hotServiceList: [
{
id: 1,
name: "空调清洗",
badge: "推荐",
tag: "平台保障",
description: "专业保洁团队,全屋深度清洁,去除顽固污渍,还您清新居所",
count: "已预约100+",
},
],
};
},
methods: {
//
chooseLocation() {
uni.navigateTo({
url: "/packages/areaPopup/index",
});
},
//
searchService() {
uni.navigateTo({
url: "/packages/homeServer/search/index",
});
},
//
navigateToService(item) {
uni.navigateTo({
url: "/packages/homeServer/classify/index",
});
// uni.navigateTo({
// url: `/packages/homeServer/serverInfo/index?service=${encodeURIComponent(
// JSON.stringify(item)
// )}`,
// });
},
//
navigateToReservation(service) {
// uni.navigateTo({
// url: `/packages/homeServer/reservation/index?id=${service.id}&name=${service.name}`,
// });
NavgateTo("/packages/homeServer/searchInfo/index");
},
//
contactService() {
uni.makePhoneCall({
phoneNumber: "400-123-4567",
});
},
//
getCurrentLocation() {
// API
console.log("获取当前位置信息");
},
//
scrollToTop() {
uni.pageScrollTo({
scrollTop: 0,
duration: 300,
});
},
//
lookNotice() {
NavgateTo("/packages/homeServer/noticeDetials/index");
},
},
onLoad() {
this.getCurrentLocation();
},
};
</script>
<style>
@import url("./index.css");
</style>

View File

@ -0,0 +1,504 @@
page {
background-color: #f6f7fb;
}
.searchBox {
display: flex;
align-items: center;
background-color: #fff;
padding-bottom: 30rpx;
}
.searchBox_left,
.searchBox_right,
.searchBox_mid {
flex: 1;
}
.searchBox_left {
padding-left: 20rpx;
}
.searchBox_right {
opacity: 0;
padding-right: 20rpx;
}
.searchBox_mid {
font-size: 40rpx;
color: #222222;
text-align: center;
}
.banner {
margin: 0 auto;
background-color: #fff;
width: 100%;
}
.banner swiper {
margin: 0 auto;
width: 710rpx;
height: 307rpx;
}
.dotList {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
margin-top: 10rpx;
padding-bottom: 20rpx;
}
.dot {
width: 8rpx;
height: 8rpx;
background: #555555;
border-radius: 50%;
margin-right: 6rpx;
}
.active {
background: #FF370B;
width: 20rpx;
height: 8rpx;
border-radius: 10rpx 10rpx 10rpx 10rpx;
}
.master {
background-color: #fff;
margin-top: 30rpx;
padding: 26rpx 20rpx;
}
.master_info {
display: flex;
align-items: flex-start;
}
.master_info_left {
display: flex;
flex-direction: column;
justify-content: center;
width: 130rpx;
margin-right: 42rpx;
}
.master_info_left image {
width: 130rpx;
height: 130rpx;
}
.state {
width: 110rpx;
height: 40rpx;
border-radius: 100rpx 100rpx 100rpx 100rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #FFFFFF;
margin: 0 auto;
margin-top: -20rpx;
z-index: 2;
position: relative;
}
.state1 {
background: #AECE2B;
}
.state2 {
background: #CECECE;
}
.state3 {
background: #FF370B;
}
.master_info_right {
flex: 1;
}
.master_info_right1 {
display: flex;
align-items: center;
font-size: 36rpx;
color: #222222;
}
.Medal {
width: 35rpx;
height: 40rpx;
margin-left: 6rpx;
margin-right: 28rpx;
}
.star {
width: 22rpx;
height: 22rpx;
margin-right: 6rpx;
}
.master_info_right1 span {
font-size: 26rpx;
color: #000000;
}
.master_info_right2 {
font-size: 28rpx;
color: #999999;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 16rpx;
}
.master_info_right2 span {
color: #FF370B;
}
.master_info_right3 {
margin-top: 13rpx;
}
.master_info_right3_item {
display: flex;
align-items: center;
font-size: 26rpx;
color: #999999;
margin-bottom: 10rpx;
}
.master_info_right3_item span {
font-size: 26rpx;
color: #222222;
margin-left: 23rpx;
}
.master_info_right3_item>div {
margin-right: 27rpx;
}
.master_msg {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 54rpx;
}
.master_msg_item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #999999;
}
.master_msg_item image {
width: 90rpx;
height: 90rpx;
margin-bottom: 6rox;
}
.master_msg_itemText {
font-size: 30rpx;
color: #222222;
font-weight: 700;
}
.master_tagList {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-top: 56rpx;
}
.master_tag {
width: 130rpx;
height: 40rpx;
background: rgba(255, 178, 23, 0.1);
border-radius: 100rpx 100rpx 100rpx 100rpx;
font-size: 22rpx;
color: #555555;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10rpx;
margin-bottom: 20rpx;
}
.master_tag:nth-child(2n) {
background: rgba(255, 81, 42, 0.1);
}
.master_tag:nth-child(3n) {
background: #F7F7F7;
}
.master_tag:nth-child(5n) {
margin-right: 0;
}
.Badge {
margin-top: 20rpx;
padding: 20rpx;
box-sizing: border-box;
background-color: #fff;
}
.imgList {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.Tit {
font-size: 36rpx;
color: #222222;
font-weight: 600;
}
.imgList {
margin-top: 20rpx;
}
.imgItem {
width: 164rpx;
height: 123rpx;
margin-right: 25rpx;
margin-bottom: 20rpx;
}
.imgItem:nth-child(3n) {
margin-right: 0;
}
.recommend {
padding: 20rpx;
background-color: #fff;
margin-top: 20rpx;
}
.mt20 {
margin-top: 20rpx;
padding-bottom: 20rpx;
border-bottom: 1rpx solid #eee;
}
.mt20:last-child {
border-bottom: none;
}
.mt20 .master_info_right1 {
display: flex;
align-items: center;
justify-content: space-between;
}
.mt20 .master_info_right_left {
display: flex;
align-items: center;
}
.master_info_right_right {
font-size: 28rpx;
color: #FF370B;
}
.mt20 .master_info_right2 {
font-size: 26rpx;
color: #999999;
}
.mt20 .master_info_right3 {
display: flex;
font-size: 26rpx;
color: #999;
}
.mt20 .master_info_right3 span {
color: #FF370B;
}
.MasterItem_Info_right_4 {
display: flex;
align-items: center;
margin-top: 16rpx;
}
.tagItem {
width: 130rpx;
height: 40rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100rpx 100rpx 100rpx 100rpx;
font-size: 22rpx;
color: #555555;
margin-right: 10rpx;
}
.tag1 {
background: rgba(255, 178, 23, 0.1);
}
.tag2 {
background: rgba(255, 81, 42, 0.1);
}
.tag3 {
background: rgba(175, 175, 175, 0.1);
}
.MasterItem_Info_right_5 {
font-size: 28rpx;
color: #999999;
display: flex;
align-items: center;
margin-top: 16rpx;
}
.MasterItem_Info_right_5 span {
color: #FF370B;
}
.Evaluate {
background-color: #fff;
padding: 20rpx;
margin-top: 20rpx;
}
.EvaluateItem {
padding-bottom: 30rpx;
border-bottom: 1rpx solid #EBEBEB;
}
.evaluateItem_header {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.evaluateItem_ava {
width: 90rpx;
height: 90rpx;
border-radius: 50%;
overflow: hidden;
}
.evaluateItem_msg {
flex: 1;
margin-left: 26rpx;
}
.evaluateItem_time {
font-size: 26rpx;
color: #999999;
}
.evaluateItem_msg1 {
font-size: 26rpx;
color: #999999;
margin-bottom: 8rpx;
}
.evaluateItem_msg2 {
display: flex;
align-items: center;
}
.evaluateItem_msg2 image {
width: 22rpx;
height: 22rpx;
margin-right: 6rpx;
}
.evaluateItem_main {
font-size: 26rpx;
color: #222222;
margin-top: 30rpx;
}
.Evaluate .Tit {
margin-bottom: 30rpx;
}
.footer {
width: 750rpx;
background: #FFFFFF;
box-shadow: 3rpx -3rpx 15rpx 0rpx rgba(255, 27, 27, 0.05);
padding: 26rpx 40rpx;
box-sizing: border-box;
display: flex;
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
.footerbtn1 {
width: 200rpx;
height: 70rpx;
background: linear-gradient(91deg, #FFB95E 0%, #FF9100 100%);
border-radius: 100rpx 100rpx 100rpx 100rpx;
font-size: 36rpx;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
margin-left: 14rpx;
}
.footerbtn2 {
width: 200rpx;
height: 70rpx;
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
border-radius: 100rpx 100rpx 100rpx 100rpx;
font-size: 36rpx;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
}
.footerIcon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 24rpx;
color: #222222;
margin-right: 52rpx;
}
#footerIcon1 {
width: 38.33rpx;
height: 40rpx;
margin-bottom: 12rpx;
}
#footerIcon2 {
width: 40rpx;
height: 37rpx;
margin-bottom: 12rpx;
}
.more {
font-size: 28rpx;
color: #FF370B;
text-align: center;
padding: 20rpx;
box-sizing: border-box;
}

View File

@ -0,0 +1,417 @@
<template>
<view class="container">
<div
class="searchBox"
:style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
>
<view class="searchBox_left">
<u-icon
bold
color="#000"
size="40"
name="arrow-left"
@click="back"
></u-icon>
</view>
<div class="searchBox_mid">刘师傅</div>
<div class="searchBox_right">
<u-icon
bold
color="#000"
size="40"
name="arrow-left"
@click="back"
></u-icon>
</div>
</div>
<!-- 阿姨 -->
<div class="aunt" v-if="false">
<div class="banner">
<swiper>
<swiper-item>
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_banner.png"
></image>
</swiper-item>
</swiper>
<div class="dotList">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<div class="master">
<div class="master_info">
<div class="master_info_left">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/home_icon12.png"></image>
<div class="state state1">待服务</div>
<div class="state state2" v-if="false">休息中</div>
<div class="state state3" v-if="false">服务中</div>
</div>
<div class="master_info_right">
<div class="master_info_right1">
林师傅
<image
class="Medal"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_Champion.png"
></image>
<image
class="Medal"
v-if="false"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_RunnerUp.png"
>
</image>
<image
class="star"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start1.png"
></image>
<span>4.8</span>
</div>
<div class="master_info_right2">
价格范围 <span>500-800</span>
</div>
<div class="master_info_right3">
<div class="master_info_right3_item">
<div>专业性</div>
<u-line-progress
class="gradient-progress"
:showText="false"
:percentage="100"
activeColor="transparent"
></u-line-progress>
<span>80</span>
</div>
<div class="master_info_right3_item">
<div>好评率</div>
<u-line-progress
class="gradient-progress"
:showText="false"
:percentage="30"
activeColor="transparent"
></u-line-progress>
<span>80%</span>
</div>
<div class="master_info_right3_item">
<div>准时率</div>
<u-line-progress
class="gradient-progress"
:showText="false"
:percentage="30"
activeColor="transparent"
></u-line-progress>
<span>80%</span>
</div>
</div>
</div>
</div>
<div class="master_msg">
<div class="master_msg_item">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_masterIcon1.png"
></image>
<div class="master_msg_itemText">52</div>
<div>广东梅州人</div>
</div>
<div class="master_msg_item">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_masterIcon2.png"
></image>
<div class="master_msg_itemText">5-10</div>
<div>服务经验</div>
</div>
<div class="master_msg_item">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_masterIcon3.png"
></image>
<div class="master_msg_itemText">500+</div>
<div>成功预约</div>
</div>
<div class="master_msg_item">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_masterIcon4.png"
></image>
<div class="master_msg_itemText">100+</div>
<div>用户评价</div>
</div>
</div>
<div class="master_tagList">
<div class="master_tag" v-for="(item, index) in 8" :key="index">
积极主动
</div>
</div>
</div>
<div class="Badge">
<div class="Tit">职业证书</div>
<div class="imgList">
<div class="imgItem" v-for="(item, index) in 5" :key="index">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg1.png"></image>
</div>
</div>
</div>
<div class="recommend">
<div class="Tit">推荐师傅</div>
<div class="master_info mt20" v-for="(item, index) in 3" :key="index">
<div class="master_info_left">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/home_icon12.png"></image>
<div class="state state1">待服务</div>
<div class="state state2" v-if="false">休息中</div>
<div class="state state3" v-if="false">服务中</div>
</div>
<div class="master_info_right">
<div class="master_info_right1">
<div class="master_info_right_left">
林师傅
<image
class="Medal"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_Champion.png"
></image>
<image
class="Medal"
v-if="false"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_RunnerUp.png"
>
</image>
<image
class="star"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start1.png"
></image>
<span>4.8</span>
</div>
<div class="master_info_right_right">查看资料</div>
</div>
<div class="master_info_right2">52 广东梅州人 5-10</div>
<div class="master_info_right3">
<span>500+</span>预定<span>100+</span>评价
</div>
<div class="MasterItem_Info_right_4">
<div class="tagItem tag1">积极主动</div>
<div class="tagItem tag2">技术精湛</div>
<div class="tagItem tag3">技术精湛</div>
</div>
<div class="MasterItem_Info_right_5">
价格范围 <span>500-800</span>
</div>
</div>
</div>
</div>
</div>
<!-- 师傅 -->
<div class="masters">
<div class="master">
<div class="master_info">
<div class="master_info_left">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/home_icon12.png"></image>
<div class="state state1">待服务</div>
<div class="state state2" v-if="false">休息中</div>
<div class="state state3" v-if="false">服务中</div>
</div>
<div class="master_info_right">
<div class="master_info_right1">
林师傅
<image
class="Medal"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_Champion.png"
></image>
<image
class="Medal"
v-if="false"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_RunnerUp.png"
>
</image>
<image
class="star"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start1.png"
></image>
<span>4.8</span>
</div>
<div class="master_info_right2">
价格范围 <span>500-800</span>
</div>
<div class="master_info_right3">
<div class="master_info_right3_item">
<div>专业性</div>
<u-line-progress
class="gradient-progress"
:showText="false"
:percentage="100"
activeColor="transparent"
></u-line-progress>
<span>80</span>
</div>
<div class="master_info_right3_item">
<div>好评率</div>
<u-line-progress
class="gradient-progress"
:showText="false"
:percentage="30"
activeColor="transparent"
></u-line-progress>
<span>80%</span>
</div>
<div class="master_info_right3_item">
<div>准时率</div>
<u-line-progress
class="gradient-progress"
:showText="false"
:percentage="30"
activeColor="transparent"
></u-line-progress>
<span>80%</span>
</div>
</div>
</div>
</div>
<div class="master_msg">
<div class="master_msg_item">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_masterIcon1.png"
></image>
<div class="master_msg_itemText">52</div>
<div>广东梅州人</div>
</div>
<div class="master_msg_item">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_masterIcon2.png"
></image>
<div class="master_msg_itemText">5-10</div>
<div>服务经验</div>
</div>
<div class="master_msg_item">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_masterIcon3.png"
></image>
<div class="master_msg_itemText">500+</div>
<div>成功预约</div>
</div>
<div class="master_msg_item">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_masterIcon4.png"
></image>
<div class="master_msg_itemText">100+</div>
<div>用户评价</div>
</div>
</div>
<div class="master_tagList">
<div class="master_tag" v-for="(item, index) in 8" :key="index">
积极主动
</div>
</div>
</div>
<div class="Evaluate">
<div class="Tit">客户点评</div>
<div class="EvaluateItem">
<div class="evaluateItem_header">
<div class="evaluateItem_ava">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg1.png"></image>
</div>
<div class="evaluateItem_msg">
<div class="evaluateItem_msg1">TP</div>
<div class="evaluateItem_msg2">
<image
v-for="(item, index) in 5"
:key="index"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_stait.png"
></image>
</div>
</div>
<div class="evaluateItem_time">2025-06-24</div>
</div>
<div class="evaluateItem_main">真好啊真棒啊优秀</div>
</div>
<div class="more" @click="EvaluateMore">查看更多</div>
</div>
<div class="Badge">
<div class="Tit">职业证书</div>
<div class="imgList">
<div class="imgItem" v-for="(item, index) in 5" :key="index">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg1.png"></image>
</div>
</div>
</div>
</div>
<!-- 底部 -->
<div class="footer">
<div class="footerIcon" @click="Vendor">
<image
id="footerIcon1"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_serverInfoIcon.png"
></image>
服务商
</div>
<div class="footerIcon">
<image
id="footerIcon2"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_CollectIcon.png"
></image>
收藏
</div>
<div class="footerbtn1">联系客服</div>
<div class="footerbtn2">立即预约</div>
</div>
</view>
</template>
<script>
import {
request,
picUrl,
NavgateTo,
menuButtonInfo,
} from "../../../utils/index";
import { apiArr } from "../../../api/reservation";
export default {
data() {
return {
top: "",
localHeight: "",
};
},
methods: {
EvaluateMore() {
NavgateTo("../masterReview/index");
},
Vendor() {
NavgateTo("../vendor/index");
},
back() {
NavgateTo("1");
},
},
onReady() {},
onLoad(options) {
const meun = menuButtonInfo();
this.top = meun.top;
this.localHeight = meun.height;
},
onShow() {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {},
};
</script>
<style>
@import url("./index.css");
/* 添加渐变色样式 */
.u-line-progress__line {
background: linear-gradient(90deg, #ffffff 0%, #ff370b 100%) !important;
}
</style>

View File

@ -0,0 +1,102 @@
page {
background-color: #f6f7fb;
}
.searchBox {
display: flex;
align-items: center;
background-color: #fff;
padding-bottom: 30rpx;
}
.searchBox_left,
.searchBox_right,
.searchBox_mid {
flex: 1;
}
.searchBox_left {
padding-left: 20rpx;
}
.searchBox_right {
opacity: 0;
padding-right: 20rpx;
}
.searchBox_mid {
font-size: 40rpx;
color: #222222;
text-align: center;
}
.EvaluateList {
margin-top: 20rpx;
background-color: #fff;
padding: 0 20rpx;
box-sizing: border-box;
}
.EvaluateItem {
padding-bottom: 30rpx;
margin-top: 30rpx;
border-bottom: 1rpx solid #EBEBEB;
}
.evaluateItem_header {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.evaluateItem_ava {
width: 90rpx;
height: 90rpx;
border-radius: 50%;
overflow: hidden;
}
.evaluateItem_msg {
flex: 1;
margin-left: 26rpx;
}
.evaluateItem_time {
font-size: 26rpx;
color: #999999;
}
.evaluateItem_msg1 {
font-size: 26rpx;
color: #999999;
margin-bottom: 8rpx;
}
.evaluateItem_msg2 {
display: flex;
align-items: center;
}
.evaluateItem_msg2 image {
width: 22rpx;
height: 22rpx;
margin-right: 6rpx;
}
.evaluateItem_main {
font-size: 26rpx;
color: #222222;
margin-top: 30rpx;
}
.evaluateItem_Score {
font-size: 26rpx;
color: #999999;
margin-top: 10rpx;
}
.EvaluateItem:last-child{
border-bottom: none;
}

View File

@ -0,0 +1,92 @@
<template>
<view class="container">
<div
class="searchBox"
:style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
>
<view class="searchBox_left">
<u-icon
bold
color="#000"
size="40"
name="arrow-left"
@click="back"
></u-icon>
</view>
<div class="searchBox_mid">评价(38)</div>
<div class="searchBox_right">
<u-icon
bold
color="#000"
size="40"
name="arrow-left"
@click="back"
></u-icon>
</div>
</div>
<div class="EvaluateList">
<div class="EvaluateItem" v-for="(item, index) in 3" :key="index">
<div class="evaluateItem_header">
<div class="evaluateItem_ava">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg1.png"></image>
</div>
<div class="evaluateItem_msg">
<div class="evaluateItem_msg1">TP</div>
<div class="evaluateItem_msg2">
<image
v-for="(item, index) in 5"
:key="index"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_stait.png"
></image>
</div>
</div>
<div class="evaluateItem_time">2025-06-24</div>
</div>
<div class="evaluateItem_main">真好啊真棒啊优秀</div>
<div class="evaluateItem_Score">技术评级70</div>
</div>
</div>
</view>
</template>
<script>
import {
request,
picUrl,
NavgateTo,
menuButtonInfo,
} from "../../../utils/index";
import { apiArr } from "../../../api/reservation";
export default {
data() {
return {
top: "",
localHeight: "",
};
},
methods: {
back() {
NavgateTo("1");
},
},
onReady() {},
onLoad(options) {
const meun = menuButtonInfo();
this.top = meun.top;
this.localHeight = meun.height;
},
onShow() {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {},
};
</script>
<style>
@import url("./index.css");
</style>

View File

@ -0,0 +1,20 @@
.container{
padding: 10rpx 20rpx;
}
.title{
font-weight: bold;
text-align: center;
font-size: 32rpx;
}
.info{
font-size: 22rpx;
color: #969696;
text-align: center;
margin:10rpx 0 20rpx 0 ;
}
.content{
font-size: 28rpx;
}

View File

@ -0,0 +1,50 @@
<template>
<view class="container">
<view class="title">{{ noticeContent.title }}</view>
<view class="info">{{ noticeContent.info }}</view>
<view class="main">{{ noticeContent.content }}</view>
</view>
</template>
<script>
import {
request,
picUrl,
NavgateTo,
menuButtonInfo,
} from "../../../utils/index";
import { apiArr } from "../../../api/reservation";
export default {
data() {
return {
top: "",
localHeight: "",
noticeContent: {
title: "公告标题",
info: "发布时间:xxxxx 来源:xxxxx",
content: "备受打击咖啡壶死啊尽快代发hi艰苦撒等哈覅u阿手打发哈",
img: "",
},
};
},
methods: {},
onReady() {},
onload(options) {
const meun = menuButtonInfo();
this.top = meun.top;
this.localHeight = meun.height;
},
onShow() {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {},
};
</script>
<style>
@import url("./index.css");
</style>

View File

@ -0,0 +1,288 @@
.container {
margin-top: 81rpx;
padding: 0 15rpx;
background-color: whte;
}
/* 搜索栏样式 */
.search-bar {
width: 520rpx;
display: flex;
align-items: center;
padding: 16rpx 20rpx 16rpx 0;
background-color: #fff;
border-bottom: 1rpx solid #f5f5f5;
}
.search-input-container {
flex: 1;
display: flex;
align-items: center;
background-color: #f5f7fb;
border-radius: 60rpx;
padding: 14rpx 24rpx;
margin-left: 20rpx;
}
.search-icon {
width: 28rpx;
height: 28rpx;
margin-right: 16rpx;
}
.search-input {
flex: 1;
font-size: 26rpx;
font-weight: 300;
background: transparent;
}
.cancel-btn {
font-size: 28rpx;
color: #333;
margin-left: 20rpx;
}
/* 加载状态样式 */
.loading-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 999;
}
.loading-spinner {
width: 80rpx;
height: 80rpx;
border: 8rpx solid #949494;
border-radius: 50%;
border-top-color: #333;
animation: spin 1s ease-in-out infinite;
margin-bottom: 20rpx;
}
.loading-text {
font-size: 32rpx;
color: #949494;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* 搜索指定内容 */
.specifiedContent {
min-height: 30rpx;
margin: 20rpx 10rpx 40rpx 10rpx;
}
.specifiedContent-title {
font-size: 26rpx;
font-weight: bold;
color: #333;
margin-bottom: 20rpx;
}
.specifiedContent-list {
display: flex;
gap: 20rpx;
flex-wrap: wrap;
}
.specifiedContent-item {
display: flex;
align-items: center;
font-size: 23rpx;
font-weight: 500;
background-color: #f5f7fb;
padding: 10rpx 20rpx;
border-radius: 8rpx;
}
.specifiedContent-img {
width: 26rpx;
height: 26rpx;
margin-right: 10rpx;
}
.search-history {
min-height: 30rpx;
margin: 20rpx 10rpx;
}
.history-header {
display: flex;
justify-content: space-between;
align-items: center;
/* margin-bottom: 10rpx; */
}
/* 搜索历史 */
.history-title {
font-size: 26rpx;
font-weight: bold;
color: #333;
margin-bottom: 20rpx;
}
.history-list {
display: flex;
gap: 20rpx;
flex-wrap: wrap;
}
.history-item {
display: flex;
align-items: center;
font-size: 23rpx;
font-weight: 500;
background-color: #f5f7fb;
padding: 10rpx 20rpx;
border-radius: 8rpx;
}
/* 有数据 */
.hot-services {
margin: 20rpx;
border: 1rpx solid #e8e8e8;
}
.section-header {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20rpx;
}
.section-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.section-arrow {
width: 32rpx;
height: 32rpx;
margin-right: 10rpx;
}
.service-list {
display: flex;
flex-direction: column;
gap: 20rpx;
}
.service-card {
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
}
.service-info {
display: flex;
align-items: flex-end;
width: 100%;
padding: 20rpx;
}
.service-info-left {
width: 60%;
}
.service-info-left-top {
display: flex;
align-items: flex-end;
}
.service-info-right {
width: 35%;
display: flex;
justify-content: flex-end;
}
.service-footer {
align-items: center;
gap: 15rpx;
}
.service-image {
width: 100%;
height: 240rpx;
}
.service-image2 {
width: 35rpx;
height: 35rpx;
}
.service-badge {
position: absolute;
top: 20rpx;
left: 20rpx;
background-color: #FF512A;
color: #fff;
font-size: 24rpx;
padding: 4rpx 16rpx;
border-radius: 20rpx;
}
.service-name {
font-size: 30rpx;
font-weight: bold;
color: #333;
margin-bottom: 4rpx;
margin-right: 15rpx;
}
.service-tag {
display: inline-block;
color: #e1ca9b;
font-size: 22rpx;
padding: 2rpx 0;
border-radius: 20rpx;
margin-bottom: 4rpx;
}
.service-desc {
font-size: 24rpx;
color: #666;
margin-bottom: 20rpx;
line-height: 1.5;
}
.service-count {
font-size: 24rpx;
color: #999;
margin-left: 15rpx;
}
.service-button {
background-color: #FF512A;
color: #fff;
font-size: 26rpx;
padding: 12rpx 36rpx;
border-radius: 60rpx;
}
/* 回到顶部 */
.toUp {
width: 100rpx;
height: 100rpx;
position: fixed;
right: 33rpx;
bottom: 250rpx;
z-index: 10;
}
.toUp image {
width: 100%;
height: 100%;
}

View File

@ -0,0 +1,265 @@
<template>
<view class="container">
<!-- 搜索栏 -->
<view class="search-bar">
<u-icon
bold
color="#000"
size="40"
name="arrow-left"
class="back-icon"
@click="back"
></u-icon>
<view class="search-input-container">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
class="search-icon"
></image>
<input
type="text"
class="search-input"
placeholder="请选择搜索指定内容"
v-model="searchText"
@confirm="handleSearch"
/>
</view>
</view>
<!-- 搜索指定内容 -->
<view
class="specifiedContent"
v-if="!isLoading && specifiedContent.length > 0 && !hasResult"
>
<view class="specifiedContent-title">搜索指定内容</view>
<view class="specifiedContent-list">
<view
class="specifiedContent-item"
v-for="(item, index) in specifiedContent"
:key="index"
@click="handleHistoryClick(item.name)"
>
<image class="specifiedContent-img" :src="item.icon"></image>
<view>{{ item.name }}</view>
</view>
</view>
</view>
<!-- 搜索历史 -->
<view
class="search-history"
v-if="!isLoading && searchHistory.length > 0 && !hasResult"
>
<view class="history-header">
<view class="history-title">搜索历史</view>
<u-icon
name="trash"
color="#999999"
size="28"
class="history-trash"
@click="deleteHistory"
></u-icon>
</view>
<view class="history-list">
<view
class="history-item"
v-for="(item, index) in searchHistory"
:key="index"
@click="handleHistoryClick(item)"
>
{{ item }}
</view>
</view>
</view>
<!-- 搜索结果 -->
<view class="search-result" v-if="!isLoading && hasResult">
<view class="hot-services">
<view class="service-list">
<view
class="service-card"
v-for="(service, index) in hotServiceList"
:key="index"
>
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/ceshi.png"
class="service-image"
/>
<view class="service-info">
<view class="service-info-left">
<view class="service-info-left-top">
<text class="service-name">{{ service.name }}</text>
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_bottom2.png"
class="service-image2"
></image>
<text class="service-tag">{{ service.tag }}</text>
</view>
<br />
<text class="service-desc">{{ service.description }}</text>
</view>
<view class="service-info-right">
<view class="service-footer">
<view
class="service-button"
@click="navigateToReservation(service)"
>
<text class="button-text" @click="goSubscribe">去预约</text>
</view>
<text class="service-count">{{ service.count }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 加载状态 -->
<view class="loading-container" v-if="isLoading">
<view class="loading-spinner"></view>
<text class="loading-text">加载中...</text>
</view>
<!-- 回到顶部 -->
<div
class="toUp"
v-show="searchHistory.length > 0 && isShowToTop"
@click="scrollToTop"
>
<u-badge
numberType="limit"
type="error"
max="99"
:value="value"
></u-badge>
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/toUp.png"></image>
</div>
</view>
</template>
<script>
import { request, NavgateTo } from "../../../utils/index";
export default {
data() {
return {
isShowToTop: false,
searchText: "",
isLoading: false,
specifiedContent: [
{
name: "服务",
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png",
},
{
name: "阿石",
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png",
},
{
name: "阿榴",
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png",
},
],
searchHistory: [],
hasResult: false,
hotServiceList: [
{
id: 1,
name: "空调清洗",
image: "",
badge: "推荐",
tag: "平台保障",
description: "专业保洁团队,全屋深度清洁,去除顽固污渍,还您清新居所",
count: "已预约100+",
},
],
};
},
created() {
const history = uni.getStorageSync("searchHistory") || [];
this.searchHistory = history;
window.addEventListener("scroll", this.handleScroll);
},
beforeUnmount() {
window.removeEventListener("scroll", this.handleScroll);
},
methods: {
handleScroll() {
this.isShowToTop = window.pageYOffset > 200;
},
scrollToTop() {
uni.pageScrollTo({
scrollTop: 0,
duration: 300,
});
},
back() {
NavgateTo("1");
},
//
handleSearch() {
const keyword = this.searchText.trim();
if (!keyword) return;
//
if (!this.searchHistory.includes(keyword)) {
this.searchHistory.unshift(keyword);
uni.setStorageSync("searchHistory", this.searchHistory);
}
//
this.isLoading = true;
this.hasResult = false;
//
setTimeout(() => {
this.isLoading = false;
this.hasResult = true; //
}, 1500);
},
//
handleHistoryClick(keyword) {
this.searchText = keyword;
this.handleSearch();
},
//
handleCancel() {
uni.navigateBack();
},
//
deleteHistory() {
uni.showModal({
// title: "",
content: "删除所有搜素历史?",
success: (res) => {
if (res.confirm) {
console.log("用户点击确定");
uni.removeStorageSync("searchHistory");
this.getSearchHistory();
} else if (res.cancel) {
console.log("用户点击取消");
}
},
});
},
//
getSearchHistory() {
this.searchHistory = uni.getStorageSync("searchHistory") || [];
},
//
goSubscribe() {
NavgateTo("/packages/homeServer/searchInfo/index");
},
},
};
</script>
<style>
@import url("./index.css");
</style>

View File

@ -0,0 +1,419 @@
page {
background-color: #f6f6fa;
padding: 0 !important;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.header {
z-index: 9;
}
.main {
flex: 1;
box-sizing: border-box;
overflow: hidden;
overflow-y: auto;
position: relative;
padding-bottom: 160rpx;
}
.searchBox {
display: flex;
align-items: center;
background-color: #fff;
}
.Filter {
display: flex;
align-items: center;
background-color: #fff;
}
.Filter_right {
width: 133rpx;
height: 110rpx;
background: #FFFFFF;
border-radius: 0rpx 0rpx 0rpx 0rpx;
font-size: 30rpx;
color: #FF370B;
display: flex;
align-items: center;
justify-content: center;
}
.Filter_right image {
width: 26rpx;
height: 30rpx;
margin-left: 7rpx;
}
.iptBox {
width: 431rpx;
height: 70rpx;
background: #F6F7FB;
border-radius: 100rpx 100rpx 100rpx 100rpx;
margin-left: 40rpx;
display: flex;
align-items: center;
padding-left: 30rpx;
box-sizing: border-box;
}
.iptBox image {
width: 30rpx;
height: 30rpx;
margin-right: 16rpx;
}
.iptBox .u-input {
padding: 0 !important;
background-color: transparent !important;
}
.Filter_left {
display: flex;
align-items: center;
overflow: hidden;
overflow-x: auto;
white-space: nowrap;
}
.FilterItem {
font-size: 28rpx;
color: #222222;
display: flex;
align-items: center;
padding: 0 20rpx;
margin-right: 10rpx;
}
.FilterItem image {
width: 24rpx;
height: 15rpx;
margin-left: 10rpx;
}
.MasterList {
margin-top: 30rpx;
background-color: #fff;
padding: 12rpx 20rpx 20rpx 20rpx;
}
.MasterItem {
display: flex;
align-items: center;
margin-bottom: 20rpx;
border-bottom: 1rpx solid #EBEBEB;
box-sizing: border-box;
padding-bottom: 30rpx;
padding-top: 20rpx;
}
.MasterItem:last-child{
border-bottom: none;
}
.MasterItem_right {
flex: 1;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
}
.MasterItem_info {
box-sizing: border-box;
display: flex;
align-items: flex-start;
}
.MasterItem_Info_left {
display: flex;
flex-direction: column;
justify-content: center;
width: 130rpx;
margin-right: 40rpx;
}
.MasterItem_Info_left image {
width: 130rpx;
height: 130rpx;
}
.state {
width: 110rpx;
height: 40rpx;
border-radius: 100rpx 100rpx 100rpx 100rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #FFFFFF;
margin: 0 auto;
margin-top: -20rpx;
z-index: 2;
position: relative;
}
.state1 {
background: #AECE2B;
}
.state2 {
background: #CECECE;
}
.state3 {
background: #FF370B;
}
.MasterItem_Info_right {
flex: 1;
}
.MasterItem_Info_right_1 {
display: flex;
align-items: center;
font-size: 36rpx;
color: #222222;
justify-content: space-between;
}
.Medal {
width: 35rpx;
height: 40rpx;
margin-left: 6rpx;
margin-right: 28rpx;
}
.star {
width: 22rpx;
height: 22rpx;
margin-right: 6rpx;
}
.MasterItem_Info_right_1 span {
font-size: 26rpx;
color: #000000;
}
.MasterItem_Info_right_2 {
font-size: 26rpx;
color: #999999;
margin-top: 8rpx;
}
.MasterItem_Info_right_3 {
font-size: 26rpx;
display: flex;
color: #999999;
align-items: center;
margin-top: 16rpx;
}
.MasterItem_Info_right_3 span {
color: #FF370B;
}
.MasterItem_Info_right_4 {
display: flex;
align-items: center;
margin-top: 16rpx;
}
.tagItem {
width: 130rpx;
height: 40rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100rpx 100rpx 100rpx 100rpx;
font-size: 22rpx;
color: #555555;
margin-right: 10rpx;
}
.tag1 {
background: rgba(255, 178, 23, 0.1);
}
.tag2 {
background: rgba(255, 81, 42, 0.1);
}
.tag3 {
background: rgba(175, 175, 175, 0.1);
}
.MasterItem_Info_right_5 {
font-size: 28rpx;
color: #999999;
display: flex;
align-items: center;
margin-top: 16rpx;
}
.MasterItem_Info_right_5 span {
color: #FF370B;
}
.MasterItem_Info_right_6 {
display: flex;
align-items: center;
margin-top: 20rpx;
}
.MasterItem_Info_right_6 image {
width: 110rpx;
height: 110rpx;
margin-right: 20rpx;
border-radius: 20rpx;
overflow: hidden;
}
.Btn {
font-size: 36rpx;
color: #FFFFFF;
width: 600rpx;
height: 90rpx;
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
border-radius: 100rpx 100rpx 100rpx 100rpx;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
left: 50%;
bottom: 60rpx;
transform: translateX(-50%);
z-index: 3;
}
.local {
display: flex;
align-items: center;
}
.local span {
font-weight: 700;
}
.filterMore1 {
display: flex;
align-items: center;
overflow: hidden;
overflow-x: auto;
white-space: nowrap;
margin-top: 20rpx;
}
.filterMoreItem {
font-size: 28rpx;
color: #222222;
display: flex;
align-items: center;
background-color: #f6f6fa;
padding: 0 20rpx;
margin-right: 10rpx;
margin-right: 20rpx;
border-radius: 20rpx;
padding: 10rpx 20rpx;
}
.filterMore2_item {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
color: #999;
}
.filterMore2_item_left {}
.active2 {
color: #ff702c !important;
}
.filterMore2_item_left2 {
color: #000;
}
.filterMore3Item {
font-size: 26rpx;
color: #555555;
width: 130rpx;
height: 50rpx;
background: #F6F7FB;
border-radius: 10rpx 10rpx 10rpx 10rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 40rpx;
margin-bottom: 18rpx;
}
.filterMore3Item:nth-child(4n) {
margin-right: 0;
}
.fullscreen-black-bg {
/* position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, .4);
box-sizing: border-box;
z-index: 9;
overflow: hidden; */
}
.FilterMore3 {
width: 100%;
background-color: #fff;
padding: 20rpx;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
}
.FilterMore {
width: 100%;
background-color: #fff;
padding: 20rpx;
box-sizing: border-box;
}
.dialogBox {
position: absolute;
background-color: rgba(0, 0, 0, .4);
z-index: 8;
width: 100%;
height: 100%;
}
.master_info_right_left{
display: flex;
align-items: center;
}
.master_info_right_right {
font-size: 28rpx;
color: #FF370B;
}

View File

@ -0,0 +1,292 @@
<template>
<view class="container">
<div class="header">
<div
class="searchBox"
:style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
>
<view class="searchBox_add">
<u-icon
bold
color="#000"
size="40"
name="arrow-left"
@click="back"
></u-icon>
</view>
<div class="iptBox">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
></image>
<u--input
placeholder="请输入内容"
border="none"
v-model="value"
@change="change"
></u--input>
</div>
</div>
<div class="Filter">
<div class="Filter_left">
<div class="FilterItem" @click="showDialog(1)">
附近
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png"
></image>
</div>
<div class="FilterItem" @click="showDialog(2)">
综合
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png"
></image>
</div>
<div class="FilterItem" @click="showDialog(3)">
排序
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png"
></image>
</div>
<div class="FilterItem" @click="showDialog(4)">
分类
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png"
></image>
</div>
<div class="FilterItem" @click="showDialog(5)">
性别
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png"
></image>
</div>
</div>
<div class="Filter_right">
筛选
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filter.png"
></image>
</div>
</div>
<!-- 位置筛选 -->
<div class="FilterMore" v-if="show1">
<div class="local">距离 <span>上海公馆</span></div>
<div class="filterMore1">
<div class="filterMoreItem">附近</div>
<div class="filterMoreItem">500m</div>
<div class="filterMoreItem">1km</div>
<div class="filterMoreItem">3km</div>
<div class="filterMoreItem">5km</div>
<div class="filterMoreItem">10km</div>
</div>
</div>
<!-- 综合筛选 -->
<div class="FilterMore" v-if="show2">
<div class="filterMore2_item">
<div class="filterMore2_item_left">综合</div>
<div class="filterMore2_item_right">
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
</div>
</div>
<div class="filterMore2_item">
<div class="filterMore2_item_left active2">从高到低</div>
<div class="filterMore2_item_right">
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
</div>
</div>
<div class="filterMore2_item">
<div class="filterMore2_item_left">从低到高</div>
<div class="filterMore2_item_right">
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
</div>
</div>
</div>
<!-- 排序筛选 -->
<div class="FilterMore" v-if="show3">
<div class="filterMore2_item">
<div class="filterMore2_item_left2">智能排序</div>
<div class="filterMore2_item_right">
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
</div>
</div>
<div class="filterMore2_item">
<div class="filterMore2_item_left2 active2">距离优先</div>
<div class="filterMore2_item_right">
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
</div>
</div>
<div class="filterMore2_item">
<div class="filterMore2_item_left2">好评优先</div>
<div class="filterMore2_item_right">
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
</div>
</div>
<div class="filterMore2_item">
<div class="filterMore2_item_left2">销量优先</div>
<div class="filterMore2_item_right">
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
</div>
</div>
</div>
<!-- 分类筛选 -->
<div class="FilterMore3" v-if="show4">
<div class="filterMore3Item" v-for="(item, index) in 9" :key="index">
家电维修
</div>
</div>
<!-- 性别筛选 -->
<div class="FilterMore3" v-if="show5">
<div class="filterMore3Item"></div>
<div class="filterMore3Item"></div>
</div>
</div>
<div class="main">
<!-- 遮罩 -->
<div class="dialogBox" v-if="isShowDia"></div>
<div class="MasterList">
<div class="MasterItem" v-for="(item, index) in 3" :key="index">
<div class="MasterItem_right">
<div class="MasterItem_info">
<div class="MasterItem_Info_left">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/home_icon12.png"
></image>
<div class="state state1">待服务</div>
<div class="state state2" v-if="false">休息中</div>
<div class="state state3" v-if="false">服务中</div>
</div>
<div class="MasterItem_Info_right">
<div class="MasterItem_Info_right_1">
<div class="master_info_right_left">
林师傅
<image
class="Medal"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_Champion.png"
>
</image>
<image
class="Medal"
v-if="false"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_RunnerUp.png"
>
</image>
<image
class="star"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start1.png"
></image>
<span>4.8</span>
</div>
<div class="master_info_right_right" @click="masterInfo">
查看资料
</div>
</div>
<div class="MasterItem_Info_right_2">
52 广东梅州人 5-10
</div>
<div class="MasterItem_Info_right_3">
<span>500+</span>预定 <span>100+</span>评价
</div>
<div class="MasterItem_Info_right_4">
<div class="tagItem tag1">积极主动</div>
<div class="tagItem tag2">技术精湛</div>
<div class="tagItem tag3">技术精湛</div>
</div>
<div class="MasterItem_Info_right_5">
价格范围 <span>500-800</span>
</div>
<div class="MasterItem_Info_right_6">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg1.png"
></image>
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg1.png"
></image>
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg1.png"
></image>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="Btn">确定</div>
</div>
</view>
</template>
<script>
import {
request,
picUrl,
NavgateTo,
menuButtonInfo,
} from "../../../utils/index";
import { apiArr } from "../../../api/reservation";
export default {
data() {
return {
top: "",
localHeight: "",
show1: false,
show2: false,
show3: false,
show4: false,
show5: false,
isShowDia: false,
};
},
methods: {
masterInfo() {
NavgateTo("../masterInfo/index");
},
back() {
NavgateTo("1");
},
showDialog(index) {
this[`show${index}`] = !this[`show${index}`];
this.logOtherButtons(index);
this.isShowDia = this[`show${index}`]
},
logOtherButtons(excludeIndex) {
for (let i = 1; i <= 5; i++) {
if (i !== excludeIndex) {
this[`show${i}`] = false
}
}
},
},
onReady() {},
onLoad(options) {
const meun = menuButtonInfo();
this.top = meun.top;
// this.top = meun.height + meun.top;
this.localHeight = meun.height;
},
onShow() {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {},
};
</script>
<style>
@import url("./index.css");
</style>

View File

@ -0,0 +1,189 @@
.banner {
margin: 0 auto;
margin-top: 30rpx;
width: 100%;
}
.banner swiper {
margin: 0 auto;
width: 710rpx;
height: 307rpx;
}
.dotList {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
margin-top: 10rpx;
padding-bottom: 20rpx;
}
.dot {
width: 8rpx;
height: 8rpx;
background: #555555;
border-radius: 50%;
margin-right: 6rpx;
}
.active {
background: #FF370B;
width: 20rpx;
height: 8rpx;
border-radius: 10rpx 10rpx 10rpx 10rpx;
}
.line {
height: 20rpx;
width: 100%;
background-color: #f6f7fb;
}
.serverTitBox {
padding: 30rpx 20rpx;
box-sizing: border-box;
}
.serverTit {
display: flex;
align-items: center;
justify-content: space-between;
}
.serverTit_right {
font-size: 26rpx;
color: #999999;
}
.serverTit_left {
display: flex;
align-items: center;
}
.tit {
font-size: 40rpx;
color: #222222;
font-weight: 700;
}
.msg {
font-size: 26rpx;
color: #E9BE62;
display: flex;
align-items: center;
margin-left: 36rpx;
}
.serverCon {
margin-top: 30rpx;
font-size: 26rpx;
color: #999999;
}
.priceSelect {
padding: 24rpx 20rpx;
}
.serverList {
padding: 20rpx;
box-sizing: border-box;
}
.serverListTit {
font-size: 63rpx;
color: #222222;
font-weight: 600;
}
.serverItem {
display: flex;
padding: 20rpx;
border-bottom: 1rpx solid #EBEBEB;
}
.serverItem_left {
width: 140rpx;
height: 140rpx;
margin-right: 14rpx;
border-radius: 20rpx;
overflow: hidden;
}
.serverItem_right {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
}
.msg_tit {
font-size: 30rpx;
color: #222222;
margin-bottom: 20rpx;
}
.msg_price {
font-size: 26rpx;
color: rgba(153, 153, 153, 0.6);
display: flex;
align-items: center;
}
.msg_price span {
color: #FF370B;
}
.serverItem_right_btn {
width: 180rpx;
height: 50rpx;
background: #FF370B;
border-radius: 100rpx 100rpx 100rpx 100rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
color: #FFFFFF;
}
.serverItem_right_btn .more {
width: 26rpx;
height: 26rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.range {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
overflow: hidden;
/* 防止内容溢出 */
}
.minPrice,
.maxPrice {
width: 70rpx;
height: 70rpx;
background: #F6F7FB;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
color: #999999;
margin-top: 20rpx;
}
.slider-range {
flex: 1 !important;
margin: 0 10rpx;
/* 添加左右间距 */
min-width: 0;
/* 防止 flex 子项溢出 */
}

View File

@ -0,0 +1,125 @@
<template>
<view class="container">
<div class="banner">
<swiper>
<swiper-item>
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_banner.png"></image>
</swiper-item>
</swiper>
<div class="dotList">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<div class="line"></div>
<div class="serverTitBox">
<div class="serverTit">
<div class="serverTit_left">
<div class="tit">空调清洗</div>
<div class="msg">
平台保障
</div>
</div>
<div class="serverTit_right">已预约100+</div>
</div>
<div class="serverCon">专业保洁团队全屋深度清洁去除顽固污渍还您清新居所还您清新居所</div>
</div>
<div class="line"></div>
<div class="priceSelect">
<div class="tit">价格范围</div>
<div class="range">
<div class="minPrice">10</div>
<slider-range style="flex: 1;" :value="rangeValue" :min="rangeMin" :max="rangeMax" :step="5" :bar-height="3"
:block-size="26" background-color="#EEEEF6" active-color="#FF6B00" :format="format"
:decorationVisible="true" @change="handleRangeChange"></slider-range>
<div class="maxPrice">39</div>
</div>
</div>
<div class="serverList">
<div class="serverListTit">匹配的服务商(3)</div>
<div class="serverItem" @click="selectVendor">
<div class="serverItem_left">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/test.png"></image>
</div>
<div class="serverItem_right">
<div class="serverItem_right_msg">
<div class="msg_tit">安心家政</div>
<div class="msg_price">价格范围 <span>80-150</span></div>
</div>
<div class="serverItem_right_btn" @click="selectMaster">
选择师傅
<div class="more">
<u-icon name="arrow-right" color="#fff" size="28"></u-icon>
</div>
</div>
</div>
</div>
</div>
</view>
</template>
<script>
import { request, picUrl, NavgateTo, menuButtonInfo } from '../../../utils/index';
import { apiArr } from '../../../api/reservation';
import SliderRange from '@/components/primewind-sliderrange/components/primewind-sliderrange/index.vue'
export default {
components: {
//
SliderRange
},
data() {
return {
top: "",
localHeight: "",
rangeMin: 5,
rangeMax: 200,
rangeValue: [10, 50]
}
},
methods: {
format(val) {
return val + '%'
},
handleRangeChange(e) {
this.rangeValue = e
},
selectVendor(){
NavgateTo("../vendor/index")
},
selectMaster(){
NavgateTo("../chooseMaster/index")
},
},
onReady() {
},
onLoad(options) {
const meun = menuButtonInfo();
this.top = meun.top;
this.localHeight = meun.height;
},
onShow() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
}
</script>
<style>
@import url("./index.css");
</style>

View File

View File

@ -0,0 +1,46 @@
<template>
<view class="container">
</view>
</template>
<script>
import { request, picUrl, NavgateTo, menuButtonInfo } from '../../../utils/index';
import { apiArr } from '../../../api/reservation';
export default {
data() {
return {
top: "",
localHeight: ""
}
},
methods: {
},
onReady() {
},
onload(options) {
const meun = menuButtonInfo();
this.top = meun.top;
this.localHeight = meun.height;
},
onShow() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
}
</script>
<style>
@import url("./index.css");
</style>

418
packages/homeServer/vendor/index.css vendored Normal file
View File

@ -0,0 +1,418 @@
.searchIpt {
width: 710rpx;
height: 70rpx;
background: #F6F7FB;
border-radius: 100rpx 100rpx 100rpx 100rpx;
margin: 0 auto;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 0 36rpx;
margin-bottom: 30rpx;
}
.searchIpt image {
width: 30rpx;
height: 30rpx;
margin-right: 20rpx;
}
.line {
height: 30rpx;
background-color: #f6f7fb;
}
.vendor {
padding: 20rpx;
box-sizing: border-box;
}
.vendorInfo {
display: flex;
align-items: center;
justify-content: space-between;
}
.vendorInfo_left {
display: flex;
align-items: center;
}
.vendorInfo_img {
width: 130rpx;
height: 130rpx;
border-radius: 20rpx;
overflow: hidden;
margin-right: 22rpx;
}
.vendorInfo_info {
flex: 1;
}
.vendor_name {
font-size: 36rpx;
color: #222222;
}
.vendor_fs {
font-size: 28rpx;
color: #999999;
margin-top: 16rpx;
}
.vendorInfo_right {
display: flex;
align-items: center;
font-size: 26rpx;
color: #555555;
}
.vendorInfo_right image {
width: 32rpx;
height: 32rpx;
margin-right: 8rpx;
}
.vendorMsg {
display: flex;
margin-top: 34rpx;
align-items: center;
justify-content: space-between;
}
.vendorMsg_Item {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
.vendorMsg_Item image {
width: 70rpx;
height: 70rpx;
margin-right: 10rpx;
}
.vendorMsg_Item_msg {
font-size: 26rpx;
color: #999999;
}
.vendorMsg_Item_msg .num {
font-size: 30rpx;
color: #222222;
font-weight: 700;
}
.tabList {
display: flex;
align-items: center;
padding-top: 11rpx;
height: 74rpx;
box-sizing: border-box;
padding-bottom: 18rpx;
}
.tabItem {
height: 100%;
flex: 1;
font-size: 32rpx;
color: #999999;
text-align: center;
}
.tabItem:first-child {
border-right: 1rpx solid #EBEBEB;
}
.active {
color: #000000;
position: relative;
}
.active::after {
content: '';
width: 100%;
height: 2rpx;
background: #FF370B;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -18rpx;
}
.cateList {
display: flex;
flex-wrap: wrap;
padding: 30rpx 20rpx;
box-sizing: border-box;
padding-bottom: 0;
}
.cateItem {
font-size: 26rpx;
color: #999999;
background: #F6F7FB;
border-radius: 10rpx 10rpx 10rpx 10rpx;
padding: 10rpx 14rpx;
margin-right: 50rpx;
margin-bottom: 20rpx;
box-sizing: border-box;
}
.active2{
background: #FFF5F5;
border: 1rpx solid #FF370B;
color: #FF370B;
}
.cateItem:nth-child(4n){
margin-right: 0;
}
.master_info {
display: flex;
align-items: flex-start;
box-sizing: border-box;
padding: 30rpx 20rpx;
border-bottom: 1rpx solid #EBEBEB;
}
.master_info:last-child {
border-bottom: none;
}
.master_info_left {
display: flex;
flex-direction: column;
justify-content: center;
width: 130rpx;
margin-right: 42rpx;
}
.master_info_left image {
width: 130rpx;
height: 130rpx;
}
.state {
width: 110rpx;
height: 40rpx;
border-radius: 100rpx 100rpx 100rpx 100rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #FFFFFF;
margin: 0 auto;
margin-top: -20rpx;
z-index: 2;
position: relative;
}
.state1 {
background: #AECE2B;
}
.state2 {
background: #CECECE;
}
.state3 {
background: #FF370B;
}
.master_info_right {
flex: 1;
}
.master_info_right1 {
display: flex;
align-items: center;
font-size: 36rpx;
color: #222222;
}
.Medal {
width: 35rpx;
height: 40rpx;
margin-left: 6rpx;
margin-right: 28rpx;
}
.star {
width: 22rpx;
height: 22rpx;
margin-right: 6rpx;
}
.master_info_right1 span {
font-size: 26rpx;
color: #000000;
}
.master_info_right2 {
font-size: 28rpx;
color: #999999;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 16rpx;
}
.master_info_right2 span {
color: #FF370B;
}
.master_info_right3 {
margin-top: 13rpx;
}
.master_info_right3_item {
display: flex;
align-items: center;
font-size: 26rpx;
color: #999999;
margin-bottom: 10rpx;
}
.master_info_right3_item span {
font-size: 26rpx;
color: #222222;
margin-left: 23rpx;
}
.master_info_right3_item>div {
margin-right: 27rpx;
}
.master_msg {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 54rpx;
}
.master_msg_item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #999999;
}
.master_msg_item image {
width: 90rpx;
height: 90rpx;
margin-bottom: 6rox;
}
.master_msg_itemText {
font-size: 30rpx;
color: #222222;
font-weight: 700;
}
.master_tagList {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-top: 56rpx;
}
.master_tag {
width: 130rpx;
height: 40rpx;
background: rgba(255, 178, 23, 0.1);
border-radius: 100rpx 100rpx 100rpx 100rpx;
font-size: 22rpx;
color: #555555;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10rpx;
margin-bottom: 20rpx;
}
.master_tag:nth-child(2n) {
background: rgba(255, 81, 42, 0.1);
}
.master_tag:nth-child(3n) {
background: #F7F7F7;
}
.master_tag:nth-child(5n) {
margin-right: 0;
}
.master_info_right_left {
display: flex;
align-items: center;
}
.master_info_right_right {
font-size: 28rpx;
color: #FF370B;
}
.master_info_right2 {
font-size: 26rpx;
color: #999999;
}
.master_info_right3 {
display: flex;
font-size: 26rpx;
color: #999;
}
.master_info_right3 span {
color: #FF370B;
}
.MasterItem_Info_right_4 {
display: flex;
align-items: center;
margin-top: 16rpx;
}
.tagItem {
width: 130rpx;
height: 40rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100rpx 100rpx 100rpx 100rpx;
font-size: 22rpx;
color: #555555;
margin-right: 10rpx;
}
.tag1 {
background: rgba(255, 178, 23, 0.1);
}
.tag2 {
background: rgba(255, 81, 42, 0.1);
}
.tag3 {
background: rgba(175, 175, 175, 0.1);
}
.MasterItem_Info_right_5 {
font-size: 28rpx;
color: #999999;
display: flex;
align-items: center;
margin-top: 16rpx;
}
.MasterItem_Info_right_5 span {
color: #FF370B;
}

152
packages/homeServer/vendor/index.vue vendored Normal file
View File

@ -0,0 +1,152 @@
<template>
<view class="container">
<div class="searchIpt" @click="search">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"></image>
<u--input placeholder="请输入内容" border="none" disabled v-model="value" @change="change"></u--input>
</div>
<div class="line"></div>
<div class="vendor">
<div class="vendorInfo">
<div class="vendorInfo_left">
<div class="vendorInfo_img">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg1.png"></image>
</div>
<div class="vendorInfo_info">
<div class="vendor_name">专业到家服务</div>
<div class="vendor_fs">120个粉丝</div>
</div>
</div>
<div class="vendorInfo_right">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start1.png"></image>
<image v-if="false" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start2.png"></image>
<div>收藏</div>
<div v-if="false">取消收藏</div>
</div>
</div>
<div class="vendorMsg">
<div class="vendorMsg_Item">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_masterIcon1.png"></image>
<div class="vendorMsg_Item_msg">
<div class="num">150+</div>
<div>服务师傅</div>
</div>
</div>
<div class="vendorMsg_Item">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_CumulativeIcon.png"></image>
<div class="vendorMsg_Item_msg">
<div class="num">5000+</div>
<div>累计订单</div>
</div>
</div>
<div class="vendorMsg_Item">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_masterIcon2.png"></image>
<div class="vendorMsg_Item_msg">
<div class="num">10+</div>
<div>行业经验</div>
</div>
</div>
</div>
</div>
<div class="line"></div>
<div class="tabList">
<div class="tabItem active">推荐</div>
<div class="tabItem">分类</div>
</div>
<div class="cateList">
<div class="cateItem active2" v-for="item,index in 5" :key="index">家电清洗</div>
</div>
<div class="master_info" v-for="(item, index) in 3" :key="index">
<div class="master_info_left">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/home_icon12.png"></image>
<div class="state state1">待服务</div>
<div class="state state2" v-if="false">休息中</div>
<div class="state state3" v-if="false">服务中</div>
</div>
<div class="master_info_right">
<div class="master_info_right1">
<div class="master_info_right_left">林师傅
<image class="Medal" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_Champion.png"></image>
<image class="Medal" v-if="false" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_RunnerUp.png">
</image>
<image class="star" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start1.png"></image>
<span>4.8</span>
</div>
<div class="master_info_right_right">
查看资料
</div>
</div>
<div class="master_info_right2">
52 广东梅州人 5-10
</div>
<div class="master_info_right3">
<span>500+</span>预定<span>100+</span>评价
</div>
<div class="MasterItem_Info_right_4">
<div class="tagItem tag1">积极主动</div>
<div class="tagItem tag2">技术精湛</div>
<div class="tagItem tag3">技术精湛</div>
</div>
<div class="MasterItem_Info_right_5">
价格范围 <span>500-800</span>
</div>
</div>
</div>
</view>
</template>
<script>
import { request, picUrl, NavgateTo, menuButtonInfo } from '../../../utils/index';
import { apiArr } from '../../../api/reservation';
export default {
data() {
return {
top: "",
localHeight: "",
value: ""
}
},
methods: {
search(){
//
// NavgateTo("../vendorSearch/index")
},
},
onReady() {
},
onLoad(options) {
const meun = menuButtonInfo();
this.top = meun.top;
this.localHeight = meun.height;
},
onShow() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
}
</script>
<style>
@import url("./index.css");
</style>

View File

@ -0,0 +1,419 @@
page {
background-color: #f6f6fa;
padding: 0 !important;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.header {
z-index: 9;
}
.main {
flex: 1;
box-sizing: border-box;
overflow: hidden;
overflow-y: auto;
position: relative;
padding-bottom: 160rpx;
}
.searchBox {
display: flex;
align-items: center;
background-color: #fff;
}
.Filter {
display: flex;
align-items: center;
background-color: #fff;
}
.Filter_right {
width: 133rpx;
height: 110rpx;
background: #FFFFFF;
border-radius: 0rpx 0rpx 0rpx 0rpx;
font-size: 30rpx;
color: #FF370B;
display: flex;
align-items: center;
justify-content: center;
}
.Filter_right image {
width: 26rpx;
height: 30rpx;
margin-left: 7rpx;
}
.iptBox {
width: 431rpx;
height: 70rpx;
background: #F6F7FB;
border-radius: 100rpx 100rpx 100rpx 100rpx;
margin-left: 40rpx;
display: flex;
align-items: center;
padding-left: 30rpx;
box-sizing: border-box;
}
.iptBox image {
width: 30rpx;
height: 30rpx;
margin-right: 16rpx;
}
.iptBox .u-input {
padding: 0 !important;
background-color: transparent !important;
}
.Filter_left {
display: flex;
align-items: center;
overflow: hidden;
overflow-x: auto;
white-space: nowrap;
}
.FilterItem {
font-size: 28rpx;
color: #222222;
display: flex;
align-items: center;
padding: 0 20rpx;
margin-right: 10rpx;
}
.FilterItem image {
width: 24rpx;
height: 15rpx;
margin-left: 10rpx;
}
.MasterList {
margin-top: 30rpx;
background-color: #fff;
padding: 12rpx 20rpx 20rpx 20rpx;
}
.MasterItem {
display: flex;
align-items: center;
margin-bottom: 20rpx;
border-bottom: 1rpx solid #EBEBEB;
box-sizing: border-box;
padding-bottom: 30rpx;
padding-top: 20rpx;
}
.MasterItem:last-child{
border-bottom: none;
}
.MasterItem_right {
flex: 1;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
}
.MasterItem_info {
box-sizing: border-box;
display: flex;
align-items: flex-start;
}
.MasterItem_Info_left {
display: flex;
flex-direction: column;
justify-content: center;
width: 130rpx;
margin-right: 40rpx;
}
.MasterItem_Info_left image {
width: 130rpx;
height: 130rpx;
}
.state {
width: 110rpx;
height: 40rpx;
border-radius: 100rpx 100rpx 100rpx 100rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #FFFFFF;
margin: 0 auto;
margin-top: -20rpx;
z-index: 2;
position: relative;
}
.state1 {
background: #AECE2B;
}
.state2 {
background: #CECECE;
}
.state3 {
background: #FF370B;
}
.MasterItem_Info_right {
flex: 1;
}
.MasterItem_Info_right_1 {
display: flex;
align-items: center;
font-size: 36rpx;
color: #222222;
justify-content: space-between;
}
.Medal {
width: 35rpx;
height: 40rpx;
margin-left: 6rpx;
margin-right: 28rpx;
}
.star {
width: 22rpx;
height: 22rpx;
margin-right: 6rpx;
}
.MasterItem_Info_right_1 span {
font-size: 26rpx;
color: #000000;
}
.MasterItem_Info_right_2 {
font-size: 26rpx;
color: #999999;
margin-top: 8rpx;
}
.MasterItem_Info_right_3 {
font-size: 26rpx;
display: flex;
color: #999999;
align-items: center;
margin-top: 16rpx;
}
.MasterItem_Info_right_3 span {
color: #FF370B;
}
.MasterItem_Info_right_4 {
display: flex;
align-items: center;
margin-top: 16rpx;
}
.tagItem {
width: 130rpx;
height: 40rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100rpx 100rpx 100rpx 100rpx;
font-size: 22rpx;
color: #555555;
margin-right: 10rpx;
}
.tag1 {
background: rgba(255, 178, 23, 0.1);
}
.tag2 {
background: rgba(255, 81, 42, 0.1);
}
.tag3 {
background: rgba(175, 175, 175, 0.1);
}
.MasterItem_Info_right_5 {
font-size: 28rpx;
color: #999999;
display: flex;
align-items: center;
margin-top: 16rpx;
}
.MasterItem_Info_right_5 span {
color: #FF370B;
}
.MasterItem_Info_right_6 {
display: flex;
align-items: center;
margin-top: 20rpx;
}
.MasterItem_Info_right_6 image {
width: 110rpx;
height: 110rpx;
margin-right: 20rpx;
border-radius: 20rpx;
overflow: hidden;
}
.Btn {
font-size: 36rpx;
color: #FFFFFF;
width: 600rpx;
height: 90rpx;
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
border-radius: 100rpx 100rpx 100rpx 100rpx;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
left: 50%;
bottom: 60rpx;
transform: translateX(-50%);
z-index: 3;
}
.local {
display: flex;
align-items: center;
}
.local span {
font-weight: 700;
}
.filterMore1 {
display: flex;
align-items: center;
overflow: hidden;
overflow-x: auto;
white-space: nowrap;
margin-top: 20rpx;
}
.filterMoreItem {
font-size: 28rpx;
color: #222222;
display: flex;
align-items: center;
background-color: #f6f6fa;
padding: 0 20rpx;
margin-right: 10rpx;
margin-right: 20rpx;
border-radius: 20rpx;
padding: 10rpx 20rpx;
}
.filterMore2_item {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
color: #999;
}
.filterMore2_item_left {}
.active2 {
color: #ff702c !important;
}
.filterMore2_item_left2 {
color: #000;
}
.filterMore3Item {
font-size: 26rpx;
color: #555555;
width: 130rpx;
height: 50rpx;
background: #F6F7FB;
border-radius: 10rpx 10rpx 10rpx 10rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 40rpx;
margin-bottom: 18rpx;
}
.filterMore3Item:nth-child(4n) {
margin-right: 0;
}
.fullscreen-black-bg {
/* position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, .4);
box-sizing: border-box;
z-index: 9;
overflow: hidden; */
}
.FilterMore3 {
width: 100%;
background-color: #fff;
padding: 20rpx;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
}
.FilterMore {
width: 100%;
background-color: #fff;
padding: 20rpx;
box-sizing: border-box;
}
.dialogBox {
position: absolute;
background-color: rgba(0, 0, 0, .4);
z-index: 8;
width: 100%;
height: 100%;
}
.master_info_right_left{
display: flex;
align-items: center;
}
.master_info_right_right {
font-size: 28rpx;
color: #FF370B;
}

View File

@ -0,0 +1,234 @@
<template>
<view class="container">
<div class="header">
<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
<view class="searchBox_add">
<u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
</view>
<div class="iptBox">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"></image>
<u--input placeholder="请输入内容" border="none" v-model="value" @change="change"></u--input>
</div>
</div>
<div class="Filter">
<div class="Filter_left">
<div class="FilterItem" @click="show1 = !show1">
接单量
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png"></image>
</div>
<div class="FilterItem" @click="show2 = !show2">
满意度
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png"></image>
</div>
<div class="FilterItem" @click="show3 = !show3">
排序
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png"></image>
</div>
<div class="FilterItem" @click="show4 = !show4">
分类
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png"></image>
</div>
<div class="FilterItem" @click="show5 = !show5">
性别
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png"></image>
</div>
</div>
<div class="Filter_right">
筛选
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filter.png"></image>
</div>
</div>
<!-- 位置筛选 -->
<div class="FilterMore" v-if="show1">
<div class="local">距离 <span>上海公馆</span></div>
<div class="filterMore1">
<div class="filterMoreItem">附近</div>
<div class="filterMoreItem">500m</div>
<div class="filterMoreItem">1km</div>
<div class="filterMoreItem">3km</div>
<div class="filterMoreItem">5km</div>
<div class="filterMoreItem">10km</div>
</div>
</div>
<!-- 综合筛选 -->
<div class="FilterMore" v-if="show2">
<div class="filterMore2_item">
<div class="filterMore2_item_left">综合</div>
<div class="filterMore2_item_right">
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
</div>
</div>
<div class="filterMore2_item">
<div class="filterMore2_item_left active2">从高到低</div>
<div class="filterMore2_item_right">
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
</div>
</div>
<div class="filterMore2_item">
<div class="filterMore2_item_left">从低到高</div>
<div class="filterMore2_item_right">
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
</div>
</div>
</div>
<!-- 排序筛选 -->
<div class="FilterMore" v-if="show3">
<div class="filterMore2_item">
<div class="filterMore2_item_left2">智能排序</div>
<div class="filterMore2_item_right">
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
</div>
</div>
<div class="filterMore2_item">
<div class="filterMore2_item_left2 active2">距离优先</div>
<div class="filterMore2_item_right">
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
</div>
</div>
<div class="filterMore2_item">
<div class="filterMore2_item_left2">好评优先</div>
<div class="filterMore2_item_right">
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
</div>
</div>
<div class="filterMore2_item">
<div class="filterMore2_item_left2">销量优先</div>
<div class="filterMore2_item_right">
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
</div>
</div>
</div>
<!-- 分类筛选 -->
<div class="FilterMore3" v-if="show4">
<div class="filterMore3Item" v-for="(item, index) in 9" :key="index">家电维修</div>
</div>
<!-- 性别筛选 -->
<div class="FilterMore3" v-if="show5">
<div class="filterMore3Item"></div>
<div class="filterMore3Item"></div>
</div>
</div>
<div class="main">
<!-- 遮罩 -->
<div class="dialogBox" v-if="show1"></div>
<div class="MasterList">
<div class="MasterItem" v-for="(item, index) in 3" :key="index">
<div class="MasterItem_right">
<div class="MasterItem_info">
<div class="MasterItem_Info_left">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/home_icon12.png"></image>
<div class="state state1">待服务</div>
<div class="state state2" v-if="false">休息中</div>
<div class="state state3" v-if="false">服务中</div>
</div>
<div class="MasterItem_Info_right">
<div class="MasterItem_Info_right_1">
<div class="master_info_right_left">
林师傅
<image class="Medal" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_Champion.png">
</image>
<image class="Medal" v-if="false"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_RunnerUp.png">
</image>
<image class="star" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start1.png"></image>
<span>4.8</span>
</div>
<div class="master_info_right_right" @click="masterInfo">
查看资料
</div>
</div>
<div class="MasterItem_Info_right_2">52 广东梅州人 5-10</div>
<div class="MasterItem_Info_right_3">
<span>500+</span>预定 <span>100+</span>评价
</div>
<div class="MasterItem_Info_right_4">
<div class="tagItem tag1">积极主动</div>
<div class="tagItem tag2">技术精湛</div>
<div class="tagItem tag3">技术精湛</div>
</div>
<div class="MasterItem_Info_right_5">
价格范围 <span>500-800</span>
</div>
<div class="MasterItem_Info_right_6">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg1.png"></image>
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg1.png"></image>
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg1.png"></image>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="Btn">
确定
</div>
</div>
</view>
</template>
<script>
import { request, picUrl, NavgateTo, menuButtonInfo } from '../../../utils/index';
import { apiArr } from '../../../api/reservation';
export default {
data() {
return {
top: "",
localHeight: "",
show1: false,
show2: false,
show3: false,
show4: false,
show5: false,
}
},
methods: {
masterInfo() {
NavgateTo("../masterInfo/index")
},
back(){
NavgateTo("1")
},
},
onReady() {
},
onLoad(options) {
const meun = menuButtonInfo();
this.top = meun.top;
// this.top = meun.height + meun.top;
this.localHeight = meun.height;
},
onShow() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
}
</script>
<style>
@import url("./index.css");
</style>

View File

@ -34,7 +34,7 @@ image {
} }
.container { .container {
background: url(http://192.168.0.172:5500/local_pointbg.png); background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_pointbg.png);
background-size: 750rpx 423rpx; background-size: 750rpx 423rpx;
background-repeat: no-repeat; background-repeat: no-repeat;
} }

View File

@ -11,15 +11,15 @@
<div class="point">{{banlance}}</div> <div class="point">{{banlance}}</div>
<div class="funList"> <div class="funList">
<div class="funItem"> <div class="funItem">
<image src="http://192.168.0.172:5500/local_fun1.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_fun1.png" mode="aspectFill"></image>
积分商城 积分商城
</div> </div>
<div class="funItem"> <div class="funItem">
<image src="http://192.168.0.172:5500/local_fun2.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_fun2.png" mode="aspectFill"></image>
积分抽奖 积分抽奖
</div> </div>
<div class="funItem"> <div class="funItem">
<image src="http://192.168.0.172:5500/local_fun3.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_fun3.png" mode="aspectFill"></image>
兑换优惠券 兑换优惠券
</div> </div>
</div> </div>

View File

@ -3,14 +3,14 @@
<div class="Msg"> <div class="Msg">
<div class="Msg_Tit"> <div class="Msg_Tit">
<div class="Msg_Tit_left"> <div class="Msg_Tit_left">
<image src="http://192.168.0.172:5500/user_ava.png" v-if="!info.user.avatar" mode="aspectFill"> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/user_ava.png" v-if="!info.user.avatar" mode="aspectFill">
</image> </image>
<image :src="picUrl + info.user.avatar" v-if="info.user.avatar" mode="aspectFill"></image> <image :src="picUrl + info.user.avatar" v-if="info.user.avatar" mode="aspectFill"></image>
{{ info.user.nick_name }} {{ info.user.nick_name }}
</div> </div>
<div class="Msg_Tit_right"> <div class="Msg_Tit_right">
<image v-for="indez in 5" <image v-for="indez in 5"
:src="indez < info.satisfaction ? 'http://192.168.0.172:5500/local_start1.png' : 'http://192.168.0.172:5500/local_start2.png'" :src="indez < info.satisfaction ? 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start1.png' : 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start2.png'"
mode="aspectFill"></image> mode="aspectFill"></image>
</div> </div>
</div> </div>
@ -22,21 +22,21 @@
<div class="Msg_iconList"> <div class="Msg_iconList">
<div class="Msg_iconList_left"> <div class="Msg_iconList_left">
<div class="Msg_iconList_leftIcon"> <div class="Msg_iconList_leftIcon">
<image src="http://192.168.0.172:5500/local_review.png" mode="widthFix"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_review.png" mode="widthFix"></image>
{{ info.merchant_evaluation_reply_list ? info.merchant_evaluation_reply_list.length : 0 }} {{ info.merchant_evaluation_reply_list ? info.merchant_evaluation_reply_list.length : 0 }}
</div> </div>
<div class="Msg_iconList_leftIcon"> <div class="Msg_iconList_leftIcon">
<image v-if="info.is_like == 2" src="http://192.168.0.172:5500/com_likeIcon.png" mode="widthFix" <image v-if="info.is_like == 2" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_likeIcon.png" mode="widthFix"
@click="like(info)"></image> @click="like(info)"></image>
<image v-if="info.is_like == 1" src="http://192.168.0.172:5500/com_likeIcon2.png" <image v-if="info.is_like == 1" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_likeIcon2.png"
mode="widthFix" @click="unlike(info)"></image> mode="widthFix" @click="unlike(info)"></image>
{{ info.merchant_evaluation_like_list ? info.merchant_evaluation_like_list.length : 0 }} {{ info.merchant_evaluation_like_list ? info.merchant_evaluation_like_list.length : 0 }}
</div> </div>
</div> </div>
<div class="Msg_iconList_right"> <div class="Msg_iconList_right">
<div class="Msg_iconList_leftIcon" @click="deletes" v-if="isDelte"> <div class="Msg_iconList_leftIcon" @click="deletes" v-if="isDelte">
<image src="http://192.168.0.172:5500/local_del.png" mode="widthFix"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_del.png" mode="widthFix"></image>
</div> </div>
</div> </div>
</div> </div>
@ -45,7 +45,7 @@
<div class="reply" v-for="item in replyList"> <div class="reply" v-for="item in replyList">
<div class="reply_tit"> <div class="reply_tit">
<div class="reply_tit_left"> <div class="reply_tit_left">
<image src="http://192.168.0.172:5500/user_ava.png" v-if="!item.user.avatar" mode="aspectFill"> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/user_ava.png" v-if="!item.user.avatar" mode="aspectFill">
</image> </image>
<image :src="picUrl + item.user.avatar" v-if="item.user.avatar" mode="aspectFill"></image> <image :src="picUrl + item.user.avatar" v-if="item.user.avatar" mode="aspectFill"></image>
{{ item.user.nick_name }} {{ item.user.nick_name }}
@ -58,7 +58,7 @@
<div class="comment"> <div class="comment">
<div class="comment_con"> <div class="comment_con">
<image src="http://192.168.0.172:5500/local_send.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_send.png" mode="aspectFill"></image>
<input type="text" v-model="reply_content" placeholder="说点什么"> <input type="text" v-model="reply_content" placeholder="说点什么">
<button id="send" @click="sendComment">发送</button> <button id="send" @click="sendComment">发送</button>

View File

@ -15,7 +15,7 @@
<div class="startList"> <div class="startList">
<div class="start" v-for="(item, index) in 5" :key="index" @click="setRating(index + 1)"> <div class="start" v-for="(item, index) in 5" :key="index" @click="setRating(index + 1)">
<image <image
:src="index < rating ? 'http://192.168.0.172:5500/local_start1.png' : 'http://192.168.0.172:5500/local_start2.png'" :src="index < rating ? 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start1.png' : 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start2.png'"
mode="aspectFill"></image> mode="aspectFill"></image>
</div> </div>
</div> </div>
@ -55,7 +55,7 @@
<u-upload v-if="active === 1 && videoList.length === 0" :fileList="videoList" <u-upload v-if="active === 1 && videoList.length === 0" :fileList="videoList"
@afterRead="afterReadVideo2" @delete="deletePic2" name="1" :maxCount="1" accept="video"> @afterRead="afterReadVideo2" @delete="deletePic2" name="1" :maxCount="1" accept="video">
<div class="videoCon"> <div class="videoCon">
<image src="http://192.168.0.172:5500/com_videoImg.png" mode="widthFix"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_videoImg.png" mode="widthFix"></image>
上传视频 上传视频
</div> </div>
</u-upload> </u-upload>
@ -64,7 +64,7 @@
<video id="myVideo" :src="picUrl + videoList2[0].url" playsinline webkit-playsinline></video> <video id="myVideo" :src="picUrl + videoList2[0].url" playsinline webkit-playsinline></video>
<div class="mask" @click="playFullScreenVideo"> <div class="mask" @click="playFullScreenVideo">
<div class="mask_con"> <div class="mask_con">
<image src="http://192.168.0.172:5500/local_play.png" mode="widthFix"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_play.png" mode="widthFix"></image>
</div> </div>
<div class="mask_cancel" @click="cancels">取消</div> <div class="mask_cancel" @click="cancels">取消</div>
</div> </div>

View File

@ -13,7 +13,7 @@
<!-- <u-icon name="star-fill" color="#FFB84D" /> --> <!-- <u-icon name="star-fill" color="#FFB84D" /> -->
<div class="startList"> <div class="startList">
<image v-for="index in 5" <image v-for="index in 5"
:src="index < item.rating ? 'http://192.168.0.172:5500/local_start1.png' : 'http://192.168.0.172:5500/local_start2.png'" :src="index < item.rating ? 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start1.png' : 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start2.png'"
mode="aspectFill"></image> mode="aspectFill"></image>
</div> </div>
@ -46,13 +46,13 @@
<div class="Msg"> <div class="Msg">
<div class="Msg_Tit"> <div class="Msg_Tit">
<div class="Msg_Tit_left"> <div class="Msg_Tit_left">
<image src="http://192.168.0.172:5500/user_ava.png" v-if="!item.user.avatar" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/user_ava.png" v-if="!item.user.avatar" mode="aspectFill"></image>
<image :src="picUrl + item.user.avatar" v-if="item.user.avatar" mode="aspectFill"></image> <image :src="picUrl + item.user.avatar" v-if="item.user.avatar" mode="aspectFill"></image>
{{ item.user.nick_name }} {{ item.user.nick_name }}
</div> </div>
<div class="Msg_Tit_right"> <div class="Msg_Tit_right">
<image v-for="indez in 5" <image v-for="indez in 5"
:src="indez < item.satisfaction ? 'http://192.168.0.172:5500/local_start1.png' : 'http://192.168.0.172:5500/local_start2.png'" :src="indez < item.satisfaction ? 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start1.png' : 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start2.png'"
mode="aspectFill"></image> mode="aspectFill"></image>
</div> </div>
</div> </div>
@ -64,14 +64,14 @@
<div class="Msg_iconList"> <div class="Msg_iconList">
<div class="Msg_iconList_left"> <div class="Msg_iconList_left">
<div class="Msg_iconList_leftIcon"> <div class="Msg_iconList_leftIcon">
<image src="http://192.168.0.172:5500/local_review.png" mode="widthFix"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_review.png" mode="widthFix"></image>
{{ item.merchant_evaluation_reply_list ? item.merchant_evaluation_reply_list.length : 0 }} {{ item.merchant_evaluation_reply_list ? item.merchant_evaluation_reply_list.length : 0 }}
</div> </div>
<div class="Msg_iconList_leftIcon"> <div class="Msg_iconList_leftIcon">
<image v-if="item.is_like == 2" src="http://192.168.0.172:5500/com_likeIcon.png" mode="widthFix" <image v-if="item.is_like == 2" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_likeIcon.png" mode="widthFix"
@click="like(item)"></image> @click="like(item)"></image>
<image v-if="item.is_like == 1" src="http://192.168.0.172:5500/com_likeIcon2.png" mode="widthFix" <image v-if="item.is_like == 1" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_likeIcon2.png" mode="widthFix"
@click="unlike(item)"></image> @click="unlike(item)"></image>
{{ item.merchant_evaluation_like_list ? item.merchant_evaluation_like_list.length : 0 }} {{ item.merchant_evaluation_like_list ? item.merchant_evaluation_like_list.length : 0 }}
</div> </div>
@ -89,11 +89,11 @@
<view>导航</view> <view>导航</view>
</view> </view>
<view class="left_label" @click="handlePhoneClick"> <view class="left_label" @click="handlePhoneClick">
<image src="http://127.0.0.1:5500/assets/localLife_detail_Frame.png" mode="" /> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/localLife_detail_Frame.png" mode="" />
<view>电话</view> <view>电话</view>
</view> </view>
<view class="left_label" @click="handleDiscussClick"> <view class="left_label" @click="handleDiscussClick">
<image src="http://127.0.0.1:5500/assets/localLife_shopList_Group_1334.png" mode="" /> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/localLife_shopList_Group_1334.png" mode="" />
<view>点评</view> <view>点评</view>
</view> </view>
</view> </view>

View File

@ -34,7 +34,7 @@ image {
} }
.container { .container {
background: url(http://192.168.0.172:5500/local_pointbg.png); background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_pointbg.png);
background-size: 750rpx 423rpx; background-size: 750rpx 423rpx;
background-repeat: no-repeat; background-repeat: no-repeat;
} }

View File

@ -31,7 +31,7 @@
<div class="row"> <div class="row">
<div class="row_label">消费用户</div> <div class="row_label">消费用户</div>
<div class="row_con"> <div class="row_con">
<image src="http://192.168.0.172:5500/user_ava.png" v-if="!item.user.avatar" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/user_ava.png" v-if="!item.user.avatar" mode="aspectFill"></image>
<image :src="picUrl + item.user.avatar" v-if="item.user.avatar" mode="aspectFill"></image> <image :src="picUrl + item.user.avatar" v-if="item.user.avatar" mode="aspectFill"></image>
{{ item.user.nick_name }} {{ item.user.nick_name }}

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="container"> <div class="container">
<div class="local"> <div class="local">
<image id="local" src="http://192.168.0.172:5500/local_localIcon.png" mode="aspectFill"></image> <image id="local" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_localIcon.png" mode="aspectFill"></image>
{{address}} {{address}}
<u-icon name="arrow-down" color="#999999" size="28"></u-icon> <u-icon name="arrow-down" color="#999999" size="28"></u-icon>
</div> </div>
@ -9,7 +9,7 @@
<div class="search"> <div class="search">
<div class="searchBox"> <div class="searchBox">
<image src="http://192.168.0.172:5500/com_communitySearchIcon.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png" mode="aspectFill"></image>
<input type="text" placeholder="请输入您想搜索的内容"> <input type="text" placeholder="请输入您想搜索的内容">
</div> </div>
</div> </div>
@ -36,9 +36,9 @@
<!-- <scroll-view scroll-x="true" enhanced enable-flex class="scrollBox"> <!-- <scroll-view scroll-x="true" enhanced enable-flex class="scrollBox">
<div class="scrollView"> <div class="scrollView">
<div class="scroll-viewItem" v-for="(item, index) in 4" @click="checkItem(index)"> <div class="scroll-viewItem" v-for="(item, index) in 4" @click="checkItem(index)">
<image v-show="!checkedItems[index]" src="http://192.168.0.172:5500/local_uncheck.png" <image v-show="!checkedItems[index]" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_uncheck.png"
mode="aspectFill"></image> mode="aspectFill"></image>
<image v-show="checkedItems[index]" src="http://192.168.0.172:5500/local-check.png" <image v-show="checkedItems[index]" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local-check.png"
mode="aspectFill"></image> mode="aspectFill"></image>
买单返物业费 买单返物业费
</div> </div>
@ -62,13 +62,13 @@
<div class="merchantItem_right_con"> <div class="merchantItem_right_con">
<div class="merchantItem_right_con_left"> <div class="merchantItem_right_con_left">
<div class="startList"> <div class="startList">
<image v-for="index in 5" :src="index < item.rating ? 'http://192.168.0.172:5500/local_start1.png' : 'http://192.168.0.172:5500/local_start2.png'" mode="aspectFill"></image> <image v-for="index in 5" :src="index < item.rating ? 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start1.png' : 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start2.png'" mode="aspectFill"></image>
</div> </div>
<div class="merchangtItem_tag" v-if="item.refund_property_fee_ratio">买单反物业费</div> <div class="merchangtItem_tag" v-if="item.refund_property_fee_ratio">买单反物业费</div>
<div class="merchangtItem_tag" v-if="item.refund_user_points_ratio">买单反积分</div> <div class="merchangtItem_tag" v-if="item.refund_user_points_ratio">买单反积分</div>
</div> </div>
<div class="merchantItem_right_con_right"> <div class="merchantItem_right_con_right">
<image src="http://192.168.0.172:5500/local_review.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_review.png" mode="aspectFill"></image>
点评 点评
</div> </div>
</div> </div>
@ -81,12 +81,12 @@
<div class="btnList"> <div class="btnList">
<div class="btn_left"> <div class="btn_left">
<image src="http://192.168.0.172:5500/local_serverIcon.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_serverIcon.png" mode="aspectFill"></image>
到店服务券 到店服务券
</div> </div>
<div class="line"></div> <div class="line"></div>
<div class="btn_right"> <div class="btn_right">
<image src="http://192.168.0.172:5500/lcoal_payIcon.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/lcoal_payIcon.png" mode="aspectFill"></image>
快捷支付记录 快捷支付记录
</div> </div>
</div> </div>

View File

@ -13,11 +13,13 @@ image {
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 20rpx; padding-left: 20rpx;
position: relative;
z-index: 3;
} }
.container { .container {
position: relative; position: relative;
/* background: url(http://192.168.0.172:5500/local_payImg.png); /* background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_payImg.png);
background-size: 750rpx 302rpx; background-size: 750rpx 302rpx;
background-repeat: no-repeat; */ background-repeat: no-repeat; */
} }

View File

@ -62,7 +62,7 @@
<div class="line"></div> <div class="line"></div>
<div class="btnItem" @click="home">首页</div> <div class="btnItem" @click="home">首页</div>
<div class="btnItem2" @click="changeBoxshadow"> <div class="btnItem2" @click="changeBoxshadow">
<image src="http://192.168.0.172:5500/local_qrcode.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_qrcode.png" mode="aspectFill"></image>
本页二维码 本页二维码
</div> </div>
</div> </div>

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="container"> <div class="container">
<div class="sucessImg"> <div class="sucessImg">
<image src="http://192.168.0.172:5500/local_sucess.png" mode="aspectFill"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_sucess.png" mode="aspectFill"></image>
</div> </div>
<div class="text1">支付成功</div> <div class="text1">支付成功</div>

View File

@ -23,7 +23,7 @@
<view class="discuss"> <view class="discuss">
<image <image
class="discuss_pic" class="discuss_pic"
src="http://127.0.0.1:5500/assets/localLife_shopList_Group_1334.png" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/localLife_shopList_Group_1334.png"
/> />
<text>点评</text> <text>点评</text>
</view> </view>
@ -49,7 +49,7 @@ export default {
list: [ list: [
{ {
title: "李氏济世堂", title: "李氏济世堂",
pic: "http://127.0.0.1:5500/assets/index_Mask_group.png", pic: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_Mask_group.png",
desc: ["到家服务", "买单返物业费", "买单返物业费"], desc: ["到家服务", "买单返物业费", "买单返物业费"],
address: "苏州市太仓市城厢镇桃园三村11幢105市", address: "苏州市太仓市城厢镇桃园三村11幢105市",
distance: "898km", distance: "898km",
@ -57,7 +57,7 @@ export default {
}, },
{ {
title: "美容美发", title: "美容美发",
pic: "http://127.0.0.1:5500/assets/index_Mask_group.png", pic: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_Mask_group.png",
desc: [ "买单返物业费"], desc: [ "买单返物业费"],
address: "苏州市太仓市城厢镇桃园三村11幢105市", address: "苏州市太仓市城厢镇桃园三村11幢105市",
distance: "898km", distance: "898km",

View File

@ -0,0 +1,143 @@
.line {
background-color: #F6F7FB;
height: 20rpx;
}
.orderItem {
padding: 0 20rpx;
padding-bottom: 20rpx;
}
.orderItem1 {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 30rpx;
border-bottom: 1rpx solid #EBEBEB;
padding-top: 16rpx;
margin-bottom: 33rpx;
}
.orderItem_left {
display: flex;
align-items: center;
font-size: 50rpx;
color: #FF370B;
display: flex;
}
.orderItem_left span {
font-size: 28rpx;
}
.orderItem_left #state1 {
width: 110rpx;
height: 40rpx;
margin-left: 18rpx;
}
.orderItem_left #state2 {
width: 160rpx;
height: 40rpx;
margin-left: 18rpx;
}
.orderItem_right {
display: flex;
align-items: center;
font-size: 26rpx;
color: #999999;
}
.orderItem_right image {
width: 32rpx;
height: 32rpx;
margin-right: 14rpx;
}
.row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10rpx 0;
}
.row_label {
font-size: 28rpx;
color: #999999;
white-space: nowrap;
margin-right: 110rpx;
}
.row_con {
font-size: 28rpx;
color: #222222;
display: flex;
align-items: center;
text-align: right;
}
.orderItemTit2 {
font-size: 34rpx;
color: #222222;
font-weight: 600;
padding-top: 30rpx;
}
.dialog {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .4);
}
.dialogCon {
width: 610rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
box-sizing: border-box;
padding: 0 54rpx;
margin: 0 auto;
margin-top: 20vh;
}
.dialogCon_tit {
text-align: center;
padding-top: 53rpx;
margin-bottom: 40rpx;
}
.dialogCon_row {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
.dialogCon_row_label {
font-size: 28rpx;
color: #999999;
margin-right: 84rpx;
}
.orange {
color: #FF370B;
}
.dialogCon_row:last-child{
margin-bottom: 0;
}
.btn {
font-size: 34rpx;
color: #FF370B;
text-align: center;
padding-top: 30rpx;
border-top: 1rpx solid #EBEBEB;
margin-top: 42rpx;
padding-bottom: 35rpx;
}

View File

@ -0,0 +1,122 @@
<template>
<view class="container">
<div class="line"></div>
<div class="orderItem">
<div class="orderItem1">
<div class="orderItem_left">
<span></span>4704.00
<image v-if="false" id="state1" src="http://192.168.0.172:5500/7.15/myOrder_BillState1.png"></image>
<image id="state2" src="http://192.168.0.172:5500/7.15/myOrder_BillState2.png"></image>
</div>
<div class="orderItem_right" @click="changeDialog">
<image src="http://192.168.0.172:5500/7.15/myOrder_Explanation.png"></image>
运费说明
</div>
</div>
<div class="row">
<div class="row_label">运费单号</div>
<div class="row_con">155323454224524454</div>
</div>
<div class="row">
<div class="row_label">下单时间</div>
<div class="row_con">2021-04-16 11:11:11</div>
</div>
</div>
<div class="line"></div>
<div class="orderItem">
<div class="orderItemTit2">关联订单号</div>
<div class="row">
<div class="row_label">订单1</div>
<div class="row_con">
142047425444415
<u-icon name="arrow-right"></u-icon>
</div>
</div>
<div class="row">
<div class="row_label">订单2</div>
<div class="row_con">
142047425444415
<u-icon name="arrow-right"></u-icon>
</div>
</div>
</div>
<div class="line"></div>
<div class="orderItem">
<div class="orderItemTit2">关联订单号</div>
<div class="row">
<div class="row_label">门店名称</div>
<div class="row_con">
马路边边马路边边马路边边马路边边马
路边边马路边边马路边边马路边边
</div>
</div>
</div>
<div class="dialog" v-if="dialog">
<div class="dialogCon">
<div class="dialogCon_tit">运费退款详情</div>
<div class="dialogCon_row">
<div class="dialogCon_row_label">退款金额</div>
<div class="dialogCon_row_con orange">40.00</div>
</div>
<div class="dialogCon_row">
<div class="dialogCon_row_label">退款状态</div>
<div class="dialogCon_row_con">已完成</div>
</div>
<div class="dialogCon_row">
<div class="dialogCon_row_label">退款方式</div>
<div class="dialogCon_row_con">微信退款</div>
</div>
<div class="dialogCon_row">
<div class="dialogCon_row_label">退款时间</div>
<div class="dialogCon_row_con">2021-02-04 18:55:55</div>
</div>
<div class="btn" @click="changeDialog">我知道了</div>
</div>
</div>
</view>
</template>
<script>
import {
apiArr
} from '../../../api/doorToDoor';
import {
picUrl,
menuButtonInfo,
request,
NavgateTo
} from '../../../utils';
export default {
data() {
return {
top: "",
localHeight: "",
type: "error",
dialog:false,
}
},
methods: {
changeDialog(){
this.dialog = !this.dialog
},
},
onLoad(options) {
const meun = menuButtonInfo();
this.top = meun.top;
this.localHeight = meun.height;
},
onReachBottom() {
},
}
</script>
<style>
@import url("./index.css");
</style>

View File

@ -0,0 +1,67 @@
.billImg {
margin-top: 70rpx;
}
.billImg image {
width: 199rpx;
height: 170.12rpx;
margin: 0 auto;
}
.billText {
font-size: 28rpx;
color: #999999;
text-align: center;
margin-top: 25rpx;
}
.orderList {
background: #FFFFFF;
box-shadow: 0rpx 2rpx 11rpx 0rpx rgba(0, 0, 0, 0.25);
border-radius: 20rpx 20rpx 20rpx 20rpx;
width: 620rpx;
padding: 68rpx 53rpx;
box-sizing: border-box;
margin: 0 auto;
margin-top: 56rpx;
}
.Tit {
font-size: 36rpx;
color: #222222;
margin-bottom: 10rpx;
}
.item_msg {
font-size: 28rpx;
color: #999999;
margin: 10rpx 0;
}
.item_msg span {
font-size: 28rpx;
color: #FF370B;
font-weight: 700;
}
.line {
height: 2rpx;
width: 100%;
border-bottom: 1rpx dashed #D9D9D9;
}
.btn {
width: 600rpx;
height: 90rpx;
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
border-radius: 100rpx 100rpx 100rpx 100rpx;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
margin-top: 80rpx;
font-size: 36rpx;
color: #FFFFFF;
}

View File

@ -0,0 +1,62 @@
<template>
<view class="container">
<view class="billImg">
<image src="http://192.168.0.172:5500/7.15/myOrder_Bill.png"></image>
</view>
<div class="billText">您还有订单未支付哦~</div>
<div class="orderList">
<div class="orderItem">
<div class="Tit">运费单</div>
<div class="item_msg">运费单号384575564714555645556</div>
<div class="item_msg">运费金额<span>329.88</span></div>
<div class="line"></div>
<div class="Tit">订单</div>
<div class="item_msg">订单编号384575564714555645556</div>
<div class="item_msg">订单金额<span>329.88</span></div>
</div>
</div>
<div class="btn">
支付989.64
</div>
</view>
</template>
<script>
import {
apiArr
} from '../../../api/doorToDoor';
import {
picUrl,
menuButtonInfo,
request,
NavgateTo
} from '../../../utils';
export default {
data() {
return {
top: "",
localHeight: "",
type: "error",
}
},
methods: {
},
onLoad(options) {
const meun = menuButtonInfo();
this.top = meun.top;
this.localHeight = meun.height;
},
onReachBottom() {
},
}
</script>
<style>
@import url("./index.css");
</style>

View File

@ -0,0 +1,125 @@
page {
background-color: #f6f7fb;
padding-bottom: 0;
min-height: 100vh;
}
.tabs {
display: flex;
align-items: center;
background: #ffffff;
height: 100rpx;
padding: 0 20rpx;
box-sizing: border-box;
}
.tabItem {
font-size: 25rpx;
color: #222222;
margin-right: 60rpx;
height: 42rpx;
}
.active2 {
font-size: 25rpx;
font-weight: 700;
position: relative;
}
.active2::after {
content: '';
background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_active.png) no-repeat;
background-size: 100% 100%;
width: 52rpx;
height: 22rpx;
position: absolute;
left: 50%;
bottom: -16rpx;
transform: translateX(-50%);
}
.contentList {
margin: 20rpx;
min-height: 250rpx;
background-color: #ffffff;
border-radius: 20rpx;
padding: 10rpx;
}
.order-header {
display: flex;
justify-content: space-between;
padding: 20rpx;
font-size: 24rpx;
color: #a3a3a3;
border-bottom: 1rpx solid #eee;
}
.status {
color: #ff5252;
font-weight: bold;
}
.goods-list {
display: flex;
flex-wrap: wrap;
padding: 15rpx;
gap: 15rpx;
}
.goods-item {
width: 120rpx;
height: 120rpx;
}
.goods-img {
width: 100%;
height: 100%;
border-radius: 8rpx;
}
.order-footer {
padding: 15rpx;
margin-top: 20rpx;
border-top: 1rpx solid #eee;
}
.order-footer-text {
font-size: 24rpx;
display: flex;
justify-content: flex-end;
}
.order-footer-text text{
color: #ff3710;
margin-left: 10rpx;
font-weight: bold;
}
.btn-group {
display: flex;
justify-content: flex-end;
margin-top: 30rpx;
}
.cancel-btn {
width: 160rpx;
height: 60rpx;
background: #d9d9d9;
color: black;
border: 1rpx solid #ddd;
border-radius: 30rpx;
font-size: 24rpx;
margin: 0 20rpx;
}
.pay-btn {
width: 160rpx;
height: 60rpx;
background: #ff5252;
color: #fff;
border: none;
border-radius: 30rpx;
font-size: 24rpx;
margin: 0;
}

View File

@ -0,0 +1,138 @@
<template>
<view class="container">
<view class="tabs">
<view
v-for="(item, index) in categoryList"
:key="index"
:class="['tabItem', selectedTab === index ? 'active2' : '']"
@click="selectTab(index, item)"
>
{{ item.category_name }}
</view>
</view>
<view class="content">
<view v-for="(category, catIndex) in categoryList" :key="catIndex">
<view v-if="selectedTab === catIndex">
<view v-for="(item, index) in orderData" :key="index">
<view class="contentList">
<!-- 订单头部信息 -->
<view class="order-header">
<text>提交订单{{ item.createTime }}</text>
<text class="status">{{ item.status }}</text>
</view>
<!-- 商品列表 -->
<view class="goods-list">
<view
v-for="(goods, goodsIndex) in item.goodsList"
:key="goodsIndex"
class="goods-item"
>
<image :src="goods.image" class="goods-img"></image>
</view>
</view>
<!-- 订单底部信息 -->
<view class="order-footer">
<view class="order-footer-text"
>{{ item.totalCount }}件商品共计
<text> {{ item.totalPrice }}</text>
</view>
<view class="btn-group">
<button class="cancel-btn" @click="cancelOrder">
取消订单
</button>
<button class="pay-btn" @click="goToPay">立即支付</button>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
categoryList: [
{ category_name: "全部" },
{ category_name: "待付款" },
{ category_name: "待发货" },
{ category_name: "配送中" },
{ category_name: "已完成" },
],
selectedTab: 0,
orderData: [
{
createTime: "2025-07-15 23:23:23",
status: "待付款",
goodsList: [
{ image: "/static/logo.png" },
{ image: "/static/logo.png" },
{ image: "/static/logo.png" },
{ image: "/static/logo.png" },
{ image: "/static/logo.png" },
],
totalCount: 1,
totalPrice: "¥4704.00",
},
{
createTime: "2025-07-15 23:23:23",
status: "待发货",
goodsList: [
{ image: "/static/logo.png" },
{ image: "/static/logo.png" },
{ image: "/static/logo.png" },
{ image: "/static/logo.png" },
{ image: "/static/logo.png" },
],
totalCount: 2,
totalPrice: "¥4704.00",
},
{
createTime: "2025-07-15 23:23:23",
status: "已取消",
goodsList: [
{ image: "/static/logo.png" },
{ image: "/static/logo.png" },
{ image: "/static/logo.png" },
{ image: "/static/logo.png" },
{ image: "/static/logo.png" },
],
totalCount: 3,
totalPrice: "¥4704.00",
},
],
};
},
methods: {
selectTab(index, item) {
this.selectedTab = index;
},
cancelOrder() {
//
uni.showModal({
title: "提示",
content: "确定要取消订单吗?",
success: (res) => {
if (res.confirm) {
// API
}
},
});
},
goToPay() {
//
uni.navigateTo({
url: "/kitchen/pay/index",
});
},
},
};
</script>
<style>
@import url("./index.css");
</style>

View File

@ -0,0 +1,163 @@
page {
background-color: #f6f7fb;
}
.container {
background-color: #fff;
}
.row {
display: flex;
align-items: flex-start;
margin: 0 30rpx;
padding-top: 30rpx;
}
.row_label {
display: flex;
font-size: 28rpx;
color: #999999;
white-space: nowrap;
}
.row_label span {
color: #FF370B;
}
.row_con {
flex: 1;
border-bottom: 1rpx solid #EBEBEB;
margin-left: 84rpx;
padding-left: 12rpx;
padding-bottom: 30rpx;
}
.tabList {
display: flex;
align-items: center;
justify-content: center;
margin-top: 45rpx;
}
.tabItem {
flex: 1;
text-align: center;
font-size: 32rpx;
color: #999999;
border-right: 1rpx solid #EBEBEB;
padding: 14rpx 0;
}
.tabItem:last-child {
border-right: 0;
}
.active {
color: #222222;
position: relative;
}
.active::after {
content: '';
width: 100%;
height: 2rpx;
background-color: #FF370B;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -5rpx;
}
.row_con .u-input {
background-color: transparent !important;
}
.currentAddress {
background: #F6F6FA;
border-radius: 10rpx 10rpx 10rpx 10rpx;
padding: 30rpx 24rpx;
}
.tips {
font-size: 26rpx;
color: rgba(255, 0, 0, 0.808);
margin-top: 10rpx;
}
.currentAddress1 {
display: flex;
align-items: flex-end;
}
.currentAddress1_right {
width: 91rpx;
height: 51rpx;
border-radius: 10rpx 10rpx 10rpx 10rpx;
border: 1rpx solid #999999;
font-size: 28rpx;
color: #222222;
display: flex;
align-items: center;
justify-content: center;
margin-left: 50rpx;
}
.currentAddress2 {
font-size: 26rpx;
color: #999999;
margin-top: 6rpx;
}
.choseAddress {
font-size: 28rpx;
color: #999999;
padding-bottom: 20rpx;
}
.isdef {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30rpx 20rpx;
background-color: #fff;
}
.isdef_left1 {
font-size: 32rpx;
color: #222222;
}
.isdef_left2 {
font-size: 28rpx;
color: #999999;
margin-top: 10rpx;
}
.isdef_right {
width: 28rpx;
height: 28rpx;
}
.noneborder {
border-bottom: none;
}
.btn {
width: 600rpx;
height: 90rpx;
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
border-radius: 100rpx 100rpx 100rpx 100rpx;
font-size: 36rpx;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 120rpx;
}

View File

@ -0,0 +1,350 @@
<template>
<view class="container">
<div class="row">
<div class="row_label"><span>*</span>收货人</div>
<div class="row_con">
<u--input placeholder="请输入姓名" clearable border="none" v-model="name"></u--input>
</div>
</div>
<div class="row">
<div class="row_label"><span>*</span>手机号</div>
<div class="row_con">
<u--input type="number" placeholder="请输入手机号" clearable border="none" v-model="phone" ></u--input>
</div>
</div>
<div class="tabList">
<div class="tabItem" :class="{ 'active': tab == 0 }" @click="changeTab(0)">地图选址</div>
<div class="tabItem" :class="{ 'active': tab == 1 }" @click="changeTab(1)">地区选择</div>
</div>
<div class="tabItems" v-if="tab == 0">
<div class="row">
<div class="row_label">地址</div>
<div class="row_con">
<div class="choseAddress" @click="chooseAddress">
<text v-if="showOrientation">请选择地址</text>
<text v-if="!showOrientation" style="color: #000;">{{ orientation.region }} {{orientation.district}}</text>
</div>
<div class="currentAddress" v-if="showOrientation">
<div class="currentAddress1">
<div class="currentAddress1_left">当前定位{{orientation.district}}</div>
<div class="currentAddress1_right" @click="headerConfirmClick">使用</div>
</div>
<div class="currentAddress2">{{orientation.region}}</div>
</div>
</div>
</div>
<div class="row">
<div class="row_label">门牌号</div>
<div class="row_con noneborder">
<u--input placeholder="例6栋201室" clearable border="none" v-model="houseNumber"></u--input>
<!-- <div class="tips">记得完善门牌号</div> -->
</div>
</div>
</div>
<div class="tabItems" v-if="tab == 1">
<view>
<picker-view indicator-style="height: 50px;" style="width: 100%; height: 400rpx;" :value="id"
@change="bindChange">
<picker-view-column>
<view v-for="(item, index) in provList" :key="index"
style="line-height: 50px; text-align: center;">{{ item.short_name }}</view>
</picker-view-column>
<picker-view-column>
<view v-for="(item, index) in defaultCity" :key="index"
style="line-height: 50px; text-align: center;">{{ item.short_name }}</view>
</picker-view-column>
<picker-view-column>
<view v-for="(item, index) in defaultDist" :key="index"
style="line-height: 50px; text-align: center;">{{ item.short_name }}</view>
</picker-view-column>
</picker-view>
</view>
<div class="row">
<div class="row_label"><span>*</span>详细地址</div>
<div class="row_con">
<u--input placeholder="小区、门牌号" clearable border="none" v-model="houseNumber"></u--input>
</div>
</div>
</div>
<div class="line"></div>
<div class="isdef" @click="headerSettingDefaultAddressClick">
<div class="isdef_left">
<div class="isdef_left1">设置默认地址</div>
<div class="isdef_left2">提醒下单时会优先选择</div>
</div>
<div class="isdef_right">
<img v-if="isDefault == 2" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png" alt="" />
<img v-if="isDefault == 1" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png" alt="" />
</div>
</div>
<div class="btn" @click="headerSubmitClick">确定</div>
</view>
</template>
<script>
import {
apiArr
} from '../../../api/area';
import { apiArr as apiArr2 } from '../../../api/shop';
import {
picUrl,
menuButtonInfo,
request,
NavgateTo
} from '../../../utils';
export default {
data() {
return {
top: "",
localHeight: "",
value: '',
type: "error",
tab: 0,
provList: [], //
cityList: [], //
distList: [], //
defaultCity: [], //
defaultDist: [], // /
confirmProv: {}, //
confirmProv1: {},
confirmCity: {}, //
confirmDist: {}, // /
sf: true,
xsq: {},
value2: '',
isShow: false,
id: '',
type: '',
orientation: uni.getStorageSync('location'),
name: '',
phone: '',
houseNumber: '',
isDefault: 2,
showOrientation: true,
}
},
methods: {
changeTab(e) {
this.tab = e;
},
chooseAddress() {
console.log(123);
this.isShow = true;
NavgateTo("/pages/shopcity/shopcity")
},
/////////////////////////////////// ///////////////////////////////////////////
//
async getProvList() {
const res = await request(apiArr.getArea, 'POST', {}, { silent: false });
this.provList = res.rows;
this.confirmProv1 = res.rows[0]
//
this.getCityList();
},
//
async getCityList(sq, x,) {
console.log('11swq', sq);
console.log('获取x', x);
if (!this.sf) {
console.log('省份没变,查市跟区', this.cityList)
let newDist = this.cityList[sq];
console.log('新的市信息', newDist);
if (this.xsq.ad_code !== newDist.ad_code) {
console.log('新市区跟旧市区不一直')
this.xsq = newDist;
this.getDistList(newDist, x);
} else {
console.log('新市区跟旧市区一直');
this.confirmDist = this.defaultDist[x]
}
return
}
const res = await request(apiArr.getArea, 'POST', { parent_ad_code: this.confirmProv1.ad_code }, { silent: false });
this.cityList = res.rows;
let newDist;
this.defaultCity = res.rows;
this.confirmCity = res.rows[0]; //
this.getDistList(newDist, x);
},
// /
async getDistList(xsq, x) {
console.log('页面传递的x',x);
const res = await request(apiArr.getArea, 'POST', { parent_ad_code: xsq ? xsq.ad_code : this.confirmCity.ad_code }, { silent: false });
this.distList = res.rows;
this.defaultDist = res.rows;
this.confirmDist = res.rows[0] //
},
async headerSubmitClick() {
console.log('省' ,this.confirmProv1);
console.log('xsq' ,this.xsq);
console.log('confirmCity' ,this.confirmCity);
console.log('confirmDist' ,this.confirmDist);
const { confirmProv1, xsq, confirmCity, confirmDist } = this;
if(!this.name) {
uni.showToast({
title: '请输入收货人名称',
icon: 'none'
})
return
}
if(!this.phone) {
uni.showToast({
title: '请输入收货人手机号',
icon: 'none'
})
return
}
if(this.tab == 0 && this.showOrientation) {
uni.showToast({
title: '请输入收货地址',
icon: 'none'
})
return
}
if(!this.houseNumber) {
uni.showToast({
title: '请输入门牌号',
icon: 'none'
})
return
}
if(this.type === 'edit') {
const res = await request(apiArr2.updateAddress, "POST", {
id: this.id,
name: this.name,
phone: this.phone,
address: this.tab === 0 ? this.orientation.region + this.orientation.district : `${confirmProv1.short_name}${xsq.short_name ? xsq.short_name : confirmCity.short_name}${confirmDist.short_name}`,
house_number: this.houseNumber,
is_default: this.isDefault
}, { nested: true})
console.log('编辑成功', res);
if(res.code === 1) {
uni.showToast({
title: '地址更新成功',
icon: 'success',
mask: true
})
setTimeout(() => {
uni.navigateBack({
delta: 1
})
}, 1000)
}
} else {
const res = await request(apiArr2.addAddress, 'POST', {
name: this.name,
phone: this.phone,
address: this.tab === 0 ? this.orientation.region + this.orientation.district : `${confirmProv1.short_name}${xsq.short_name ? xsq.short_name : confirmCity.short_name}${confirmDist.short_name}`,
house_number: this.houseNumber,
is_default: this.isDefault
}, { nested: true})
if(res.code === 1) {
uni.showToast({
title: '地址添加成功',
icon: 'success',
mask: true
})
setTimeout(() => {
uni.navigateBack({
delta: 1
})
}, 1000)
}
}
},
headerConfirmClick() {
this.showOrientation = false;
this.isShow = true;
this.orientation = uni.getStorageSync('location');
},
headerSettingDefaultAddressClick() {
this.isDefault = this.isDefault == 2 ? 1 : 2;
},
async init() {
uni.showLoading({
title: '加载中',
mask: true
});
try {
this.getProvList()
uni.hideLoading();
} catch (error) {
uni.hideLoading();
console.log('获取省市区信息异常', error);
}
},
//
bindChange(e) {
console.log('[1231331], e', e);
const { value } = e.detail;
// // /
let newCrty = this.provList[value[0]];
console.log('新的省份信息', newCrty);
console.log('旧的省信息', this.confirmProv1);
if (newCrty.ad_code === this.confirmProv1.ad_code) {
console.log('省份信息没变');
this.sf = false;
} else {
this.sf = true;
}
console.log('this.cityListthis.cityList', this.cityList);
this.confirmProv1 = newCrty
this.getCityList(value[1], value[2])
},
/////////////////////////////////// ///////////////////////////////////////////
},
onLoad(options) {
console.log('12231', options);
if(options.item) {
const item = JSON.parse(options.item);
console.log('1231', item);
this.name = item.name;
this.phone = item.phone;
this.orientation = {
region: item.address,
district: ''
}
this.showOrientation = false;
this.id = item.id;
this.type = 'edit';
this.isShow = false;
this.isDefault = item.is_default;
this.houseNumber = item.house_number;
}
const meun = menuButtonInfo();
this.top = meun.top;
this.localHeight = meun.height;
this.init()
},
onShow() {
if(!this.isShow ) return;
if(this.orientation.district !== uni.getStorageSync('location').district) {
this.orientation = uni.getStorageSync('location');
this.showOrientation = false;
}
},
onReachBottom() {
},
}
</script>
<style>
@import url("./index.css");
</style>

View File

@ -0,0 +1,142 @@
.addressItem {
padding: 30rpx 30rpx;
padding-bottom: 40rpx;
border-bottom: 1rpx solid #EBEBEB;
box-sizing: border-box;
}
.addressItem_top {
font-size: 36rpx;
color: #222222;
display: flex;
}
.addressItem_top .is_def {
font-size: 22rpx;
color: #FF370B;
width: 90rpx;
height: 40rpx;
background: rgba(255, 81, 42, 0.1);
border-radius: 100rpx 100rpx 100rpx 100rpx;
display: flex;
align-items: center;
justify-content: center;
margin-left: 18rpx;
}
.addressItem_mid {
font-size: 26rpx;
color: #222222;
margin-top: 10rpx;
}
.addressItem_footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 30rpx;
}
.addressItem_footer_left {
font-size: 26rpx;
color: #555555;
}
.addressItem_footer_left div {
display: flex;
align-items: center;
}
.addressItem_footer_left image {
width: 32rpx;
height: 32rpx;
margin-right: 10rpx;
}
.addressItem_footer_right {
display: flex;
align-items: center;
}
.btn1 {
width: 120rpx;
height: 55rpx;
background: #EEEEEE;
border-radius: 100rpx 100rpx 100rpx 100rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
color: #555555;
margin-right: 40rpx;
}
.btn2 {
font-size: 28rpx;
color: #555555;
width: 120rpx;
height: 55rpx;
background: #F6EFDF;
border-radius: 100rpx 100rpx 100rpx 100rpx;
display: flex;
align-items: center;
justify-content: center;
}
.addressItem_def {
background: #FFF8F8;
}
.footer {
width: 100%;
padding: 16rpx 0;
padding-bottom: 40rpx;
background: #FFFFFF;
box-shadow: 3rpx -3rpx 15rpx 0rpx rgba(255, 27, 27, 0.05);
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
.footerBtn {
width: 600rpx;
height: 90rpx;
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
border-radius: 100rpx 100rpx 100rpx 100rpx;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
font-size: 36rpx;
color: #FFFFFF;
}
.empty image {
width: 340rpx;
height: 264.59rpx;
margin: 0 auto;
margin-top: 160rpx;
}
.empty_text {
text-align: center;
font-size: 28rpx;
color: #C5C5C5;
margin-top: -40rpx;
}
.addBtn {
width: 600rpx;
height: 90rpx;
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
border-radius: 100rpx 100rpx 100rpx 100rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 36rpx;
color: #FFFFFF;
margin: 0 auto;
margin-top: 40rpx;
}

View File

@ -0,0 +1,128 @@
<template>
<view class="container">
<div class="hasAddress">
<div class="addressList">
<div class="addressItem" v-for="item, index in list" :key="index" :class="{ 'addressItem_def': index == 0 }">
<div class="addressItem_top">
{{item.name}} {{item.phone}} <div v-if="item.is_default === 1" class="is_def">默认</div>
</div>
<div class="addressItem_mid">{{item.address}}{{ item.house_number }}</div>
<div class="addressItem_footer">
<div class="addressItem_footer_left">
<div v-if="item.is_default !== 1" @click="headerSettingDefault(item.id)">
<image src="http://192.168.0.172:5500/7.15/shop_checked1.png"></image>
设为默认
</div>
<div v-if="item.is_default === 1">
<image src="http://192.168.0.172:5500/7.15/shop_checked2.png"></image>
已默认
</div>
</div>
<div class="addressItem_footer_right">
<div class="btn1" @click="deleteItem(item.id )">删除</div>
<div class="btn2" @click="editItem(item)">修改</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footerBtn" @click="addAddress">新增收货地址</div>
</div>
</div>
<div class="empty" v-if="false">
<image src="http://192.168.0.172:5500/7.15/shop_noAdd.png"></image>
<div class="empty_text">暂无收货地址</div>
<div class="addBtn" @click="addAddress">添加收货地址</div>
</div>
</view>
</template>
<script>
import { apiArr } from '../../../api/shop';
import {
menuButtonInfo,
request,
NavgateTo
} from '../../../utils';
export default {
data() {
return {
top: "",
localHeight: "",
value: 3,
type: "error",
list: [],
}
},
methods: {
addAddress(){
NavgateTo("../addAddress/index")
},
editItem(item) {
NavgateTo(`../addAddress/index?item=${JSON.stringify(item)}`)
},
async headerSettingDefault(id) {
const res = await request(apiArr.settingDefaultAddress, 'POST', { id }, { silent: true, nested: true });
if(res.code === 1){
uni.showToast({
title: '设置成功',
icon: 'success',
mask: true
})
this.init();
}
},
deleteItem(id){
const _this = this;
uni.showModal({
title: '提示',
content: '是否删除地址',
success: async function (res) {
if (res.confirm) {
console.log('用户点击确定');
const res = await request(apiArr.addressDel, 'POST', { id });
uni.showToast({
title: '删除成功',
icon: 'success',
mask: true
})
_this.init();
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
async init() {
const res = await request(apiArr.addressList, 'POST', {});
this.list = res.address_list;
}
},
onLoad(options) {
const meun = menuButtonInfo();
this.top = meun.top;
this.localHeight = meun.height;
},
onShow() {
this.init();
},
onReachBottom() {
},
}
</script>
<style>
@import url("./index.css");
</style>

View File

@ -0,0 +1,371 @@
page {
background-color: #fff;
padding-bottom: 0;
min-height: 100vh;
}
image {
width: 100%;
height: 100%;
}
.header {
position: absolute;
z-index: 2;
width: 750rpx;
height: 243rpx;
background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
}
.searchBox {
display: flex;
align-items: center;
z-index: 2;
}
.searchBox_left {
box-sizing: border-box;
padding-left: 20rpx;
}
.swiper {
height: 750rpx;
width: 750rpx;
position: relative;
}
.swiper swiper {
width: 100%;
height: 100%;
}
.swiper .NumDot {
width: 100rpx;
height: 50rpx;
background: rgba(0, 0, 0, 0.5);
border-radius: 100rpx 100rpx 100rpx 100rpx;
font-size: 30rpx;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 27rpx;
bottom: 20rpx;
}
.Money {
display: flex;
align-items: flex-end;
margin-top: 40rpx;
font-weight: bold;
font-size: 80rpx;
color: #FF370B;
margin-left: 12rpx;
}
.MoneyMark {
font-size: 60rpx;
padding-bottom: 6rpx;
}
.MoneyUnit {
font-size: 40rpx;
font-weight: 400;
padding-bottom: 10rpx;
}
.oldMoney {
font-size: 40rpx;
color: #C7C7C7;
margin-left: 30rpx;
padding-bottom: 4rpx;
}
.GGBox {
margin: 0 20rpx;
display: flex;
justify-content: space-between;
margin-top: 30rpx;
}
.GG_rigth {
display: flex;
align-items: center;
}
.GG_left {
display: flex;
align-items: center;
flex: 1;
flex-wrap: nowrap;
overflow: hidden;
overflow-x: auto;
margin-right: 40rpx;
}
.GG_Item {
font-size: 26rpx;
color: #999999;
background: #F6F7FB;
border-radius: 10rpx 10rpx 10rpx 10rpx;
padding: 12rpx 16rpx;
white-space: nowrap;
margin-right: 20rpx;
}
.Tit {
font-size: 36rpx;
color: #222222;
margin: 0 20rpx;
margin-top: 20rpx;
font-weight: 700;
}
.Msg {
font-size: 26rpx;
color: #999999;
margin: 0 20rpx;
margin-top: 20rpx;
}
.GoodsMsg {
font-size: 33rpx;
color: #222222;
margin: 0 20rpx;
margin-top: 55rpx;
font-weight: 700;
}
.Msg_Item {
display: flex;
align-items: center;
border-bottom: 1rpx solid #EBEBEB;
;
}
.Msg_ItemTit {
width: 120rpx;
margin-right: 100rpx;
font-size: 28rpx;
color: #999999;
margin: 0 20rpx;
padding: 30rpx 0;
}
.Msg_ItemCon {
font-size: 28rpx;
color: #222222;
display: flex;
align-items: center;
}
.Msg_ItemCon image {
width: 28rpx;
height: 28rpx;
}
.GoosMsg {
width: 100%;
}
.GoosMsg image {
width: 100%;
height: auto;
}
.Car {
width: 750rpx;
height: 123rpx;
background: #FFFFFF;
box-shadow: 3rpx -3rpx 15rpx 0rpx rgba(255, 27, 27, 0.05);
display: flex;
position: fixed;
left: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
padding: 0 30rpx;
justify-content: space-between;
}
.car_left {
display: flex;
align-items: center;
font-size: 24rpx;
color: #222222;
}
.car_left image {
width: 40rpx;
height: 40rpx;
}
.car_right {
width: 470rpx;
height: 70rpx;
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
border-radius: 100rpx 100rpx 100rpx 100rpx;
font-size: 36rpx;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
margin-top: 26rpx;
}
.cars {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
.share {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-right: 36rpx;
}
.u-badge {
position: absolute;
right: 0;
top: -10rpx;
}
.car_right .input {
font-size: 36rpx;
color: #FFFFFF;
font-weight: 700;
}
.shadow {
background: rgba(0, 0, 0, 0.4);
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 9;
}
.shadowBox1 {
height: 250rpx;
width: 100%;
background-color: #fff;
position: absolute;
left: 0;
bottom: 0;
display: flex;
}
.shadowBox1Item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 28rpx;
color: #000000;
}
.shadowBox1Item image {
width: 100rpx;
height: 100rpx;
margin-bottom: 26rpx;
}
.shadowBox2 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: auto;
height: auto;
}
.shadowBox_img {
width: 600rpx;
height: 945rpx;
background: url('https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share_bg.png') no-repeat;
background-size: 100% 100%;
}
.shadowBox_btn {
font-size: 36rpx;
color: #FFFFFF;
width: 600rpx;
height: 90rpx;
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
border-radius: 100rpx 100rpx 100rpx 100rpx;
display: flex;
align-items: center;
justify-content: center;
margin-top: 60rpx;
}
.boxshadow_tit {
font-size: 32rpx;
color: #222222;
text-align: center;
padding-top: 40rpx;
}
.boxshadow_img {
width: 450rpx;
height: 600rpx;
margin: 0 auto;
margin-top: 40rpx;
}
.line {
margin: 0 auto;
width: 556rpx;
height: 1rpx;
border-bottom: 1rpx dashed #E9E9E9;
margin-top: 40rpx;
}
.shadowBoxInfo {
display: flex;
align-items: center;
margin-left: 62rpx;
margin-top: 11rpx;
}
.shadowboxInfo_left {
width: 130rpx;
height: 130rpx;
background: #EFEFEF;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin-right: 36rpx;
}
.shadowboxInfo_right_1 {
font-size: 32rpx;
color: #222222;
margin-bottom: 10rpx;
}
.shadowboxInfo_right_2 {
font-size: 26rpx;
color: #999999;
}
.active{
background: #FF370B;
color: #fff;
}

View File

@ -0,0 +1,434 @@
<template>
<view>
<div class="header">
<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
<div class="searchBox_left" @click="back">
<u-icon name="arrow-left" size="20px" color="#000"></u-icon>
</div>
</div>
</div>
<div class="swiper">
<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" @change="changeIndex">
<swiper-item v-for="(item, index) in currentGG.goods_carousel" :key="index">
<image :src="picUrl + item"></image>
</swiper-item>
</swiper>
<div class="NumDot">
{{ currentIndex }} /{{ currentGG.goods_carousel.length }}
</div>
</div>
<div class="Money">
<div class="MoneyMark"></div>{{ currentGG.sales_price }} <div class="MoneyUnit">/{{ currentGG.goods_unit }}
</div>
<div class="oldMoney">{{ currentGG.market_price }}</div>
</div>
<!-- 规格 -->
<!-- @click="changeGG2(item, index)" :class="index == currentGGIndex ? 'active' : ''"> -->
<div class="GGBox">
<div class="GG_left">
<div class="GG_Item" v-for="(item, index) in info.commodity_goods_info_list" :key="item.id"
@click="changeGG(item, index)" :class="index == currentGGIndex ? 'active' : ''">
{{ item.goods_spec }} / {{ item.goods_unit }}
</div>
</div>
<div class="GG_rigth">{{ info.commodity_goods_info_list.length }}<u-icon size="26rpx"
name="arrow-right"></u-icon></div>
</div>
<div class="Tit">{{ currentGG.goods_name }}</div>
<div class="Msg">{{ currentGG.commodity_brief }}</div>
<div class="GoodsMsg">
商品详情
</div>
<div class="Msg_Item">
<div class="Msg_ItemTit">商品编号</div>
<div class="Msg_ItemCon" @click="copys(currentGG.goods_no)">{{ currentGG.goods_no }} <image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_copy.png"></image>
</div>
</div>
<div class="Msg_Item">
<div class="Msg_ItemTit">规格说明</div>
<div class="Msg_ItemCon">{{ currentGG.goods_spec }}</div>
</div>
<div class="Msg_Item">
<div class="Msg_ItemTit">售卖单位</div>
<div class="Msg_ItemCon">{{ currentGG.goods_unit }}</div>
</div>
<div class="GoosMsg">
<image v-for="item in currentGG.goods_detail_pic" :src="picUrl + item" mode="widthFix"></image>
</div>
<!-- 底部购物车 -->
<div class="Car">
<div class="car_left">
<div class="share" @click="share">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share.png"
mode="widthFix"></image>
分享
</div>
<div class="cars" @click="car">
<u-badge numberType="limit" :type="type" max="99" :value="carNum"></u-badge>
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car.png"
mode="widthFix"></image>
购物车
</div>
</div>
<div class="car_right"
v-if="!info.commodity_goods_info_list[currentGGIndex].cart_count || info.commodity_goods_info_list[currentGGIndex].cart_count.count == 0"
@click="addCar">
加入购物车
</div>
<div class="car_right" v-if="info.commodity_goods_info_list[currentGGIndex].cart_count.count > 0">
<u-number-box v-model="info.commodity_goods_info_list[currentGGIndex].cart_count.count"
@change="changeCar" min="0">
<view slot="minus" class="minus">
<u-icon name="minus" size="36" bold></u-icon>
</view>
<text slot="input" style="width: 200rpx;text-align: center;" class="input">
{{ info.commodity_goods_info_list[currentGGIndex].cart_count.count }}</text>
<view slot="plus" class="plus">
<u-icon name="plus" color="#FFFFFF" size="36" bold></u-icon>
</view>
</u-number-box>
</div>
</div>
<!-- 分享 -->
<div class="shadow" @click.stop="changeShadow" v-if="boxshadow1">
<div class="shadowBox1">
<div class="shadowBox1Item" @click="shareFriend">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_WX.png"
mode="aspectFill"></image>
微信好友
</div>
<div class="shadowBox1Item" @click="openSave">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_saveImg.png"
mode="aspectFill"></image>
生成海报
</div>
</div>
</div>
<!-- 海报 -->
<div class="shadow" @click="changeShadow2" v-if="boxshadow2">
<div class="shadowBox2">
<div class="shadowBox_img">
<div class="boxshadow_tit">今日商品推荐</div>
<div class="boxshadow_img">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share_img.png">
</image>
</div>
<div class="line"></div>
<div class="shadowBoxInfo">
<div class="shadowboxInfo_left">二维码</div>
<div class="shadowboxInfo_right">
<div class="shadowboxInfo_right_1">正鲜生</div>
<div class="shadowboxInfo_right_2">
长按识别小程序 <br>
数量有限马上抢购</div>
</div>
</div>
</div>
<div class="shadowBox_btn" @click.stop="saveImg">保存海报</div>
</div>
</div>
</view>
</template>
<script>
import {
apiArr
} from '../../../api/shop';
import {
picUrl,
menuButtonInfo,
request,
NavgateTo
} from '../../../utils';
export default {
data() {
return {
picUrl,
top: "",
localHeight: "",
carNum: '',
prevCarNum: "",
currentNum: "0",//
type: "error",
boxshadow1: false,
boxshadow2: false,
id: "",
info: "",
currentIndex: "1",//
currentGG: "", //
currentGGIndex: "", //index
carOrderList: [],
}
},
methods: {
changeIndex(e) {
this.currentIndex = e.detail.current + 1
},
back() {
uni.navigateBack({
delta: 1
});
},
//
shareFriend() {
this.boxshadow2 = false
return
// uniapp
uni.share({
provider: 'weixin',
type: 'link',
scene: 'session',
link: 'https://uniapp.dcloud.net.cn/',
title: '商品名称',
imageUrl: '',
success: (res) => {
uni.showToast({
title: '分享成功',
icon: 'success',
duration: 2000
});
this.boxshadow1 = false
},
fail: (err) => {
console.log('分享失败', err);
this.boxshadow1 = false
}
});
},
changeShadow() {
this.boxshadow1 = false
},
openSave() {
this.boxshadow1 = false
this.boxshadow2 = true
},
//
saveImg() {
this.boxshadow2 = false
//
uni.downloadFile({
url: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share_img.png',
success: (res) => {
if (res.statusCode === 200) {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: (res) => {
uni.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
});
},
fail: (err) => {
console.log('保存失败', err);
}
});
}
},
fail: (err) => {
console.log('下载失败', err);
}
});
},
changeShadow2() {
this.boxshadow2 = false
},
//
share() {
this.boxshadow1 = true
},
//
getGoodsInfo() {
request(apiArr.getGoodsInfo, "POST", {
id: this.id
}).then(res => {
console.log(res);
this.info = res
res.commodity_goods_info_list.forEach(item => {
item.goods_detail_pic = item.goods_detail_pic.split(',')
item.goods_carousel = item.goods_carousel.split(',')
item.commodity_pic = item.commodity_pic.split(',')
});
this.currentGG = res.commodity_goods_info_list[0]
this.currentGGIndex = 0
})
},
copys(e) {
uni.setClipboardData({
data: e,
success: (res) => {
uni.showToast({
title: '复制成功',
icon: 'success',
duration: 2000
});
}
});
},
// changeGG2(item, index) {
// request(apiArr.addCar,"POST",{
// goods_id:item.id,
// count:1
// })
// },
changeGG(item, index) {
this.currentGG = item
this.currentGGIndex = index
if (this.currentGG.cart_count) {
this.currentNum = this.currentGG.cart_count.count
} else {
this.currentGG.cart_count = { count: 0 }
}
},
car() {
NavgateTo('../shopCar/index')
},
//
getShopCar() {
request(apiArr.getCarCount, 'POST', {}).then(res => {
this.carNum = res.total
this.prevCarNum = res.total
})
},
//
getShopCarList() {
request(apiArr.getCar, 'POST', {}).then(res => {
this.carOrderList = res.commodity_cart_list
})
},
addCar() {
let that = this
//
let goods_id_and_count = []
this.info.commodity_goods_info_list[this.currentGGIndex].cart_count = { count: 1 }
this.info.commodity_goods_info_list.forEach(item => {
console.log(item);
goods_id_and_count.push({
goods_id: item.id,
count: item.cart_count.count
})
})
request(apiArr.updateCar, "POST", {
goods_id_and_count
}).then(res => {
that.getShopCar()
that.getShopCarList()
})
// let flag = false
// this.carOrderList.forEach(item => {
// if (item.goods_id == this.info.commodity_goods_info_list[this.currentGGIndex].id) {
// flag = true
// }
// })
// console.log(flag);
// if (flag) {
// this.info.commodity_goods_info_list[this.currentGGIndex].cart_count = { count: 1 }
// let carNum = 0
// this.info.commodity_goods_info_list.forEach(item => {
// carNum += item.cart_count.count
// })
// this.carNum = carNum
// } else {
// }
},
changeCar(newValue) {
this.info.commodity_goods_info_list[this.currentGGIndex].cart_count.count = newValue.value
this.carOrderList.forEach(item=>{
if(item.commodity_goods_info.id == this.info.commodity_goods_info_list[this.currentGGIndex].id){
console.log(item,'item');
item.count = newValue.value
}
})
let carNum = 0
this.carOrderList.forEach(item=>{
carNum += item.count
})
// let carNum = 0
// this.info.commodity_goods_info_list.forEach(item => {
// if (item.cart_count) {
// carNum += item.cart_count.count
// }
// })
this.carNum = carNum
},
},
onLoad(options) {
const meun = menuButtonInfo();
this.top = meun.top;
this.localHeight = meun.height;
this.id = options.id
},
onReachBottom() {
},
onShow() {
this.getGoodsInfo()
this.getShopCar()
this.getShopCarList()
},
onHide() {
let goods_id_and_count = []
this.info.commodity_goods_info_list.forEach(item => {
goods_id_and_count.push({
goods_id: item.id,
count: item.cart_count.count
})
})
request(apiArr.updateCar, "POST", {
goods_id_and_count
})
return
},
}
</script>
<style>
@import url("./index.css");
</style>

View File

@ -0,0 +1,553 @@
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
page {
padding: 0;
}
.header {
height: 360rpx;
width: 750rpx;
background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_bg.png) no-repeat;
background-size: 100% 100%;
}
.searchBox {
display: flex;
align-items: center;
z-index: 2;
}
.searchBox_left {
box-sizing: border-box;
padding-left: 20rpx;
}
.searchBox_ipt {
width: 431rpx;
height: 70rpx;
background: #FFFFFF;
border-radius: 100rpx 100rpx 100rpx 100rpx;
margin-left: 40rpx;
box-sizing: border-box;
padding-left: 30rpx;
display: flex;
align-items: center;
}
.searchBox_ipt image {
width: 30rpx;
height: 30rpx;
margin-right: 16rpx;
}
.slide {
display: flex;
align-items: center;
flex-wrap: nowrap;
box-sizing: border-box;
padding-left: 18rpx;
margin-top: 10rpx;
}
.open {
font-size: 30rpx;
color: #FF370B;
display: flex;
align-items: center;
justify-content: center;
width: 73rpx;
height: 194rpx;
/* 文字竖着 */
writing-mode: vertical-rl;
}
.open image {
width: 30rpx;
height: 25.8rpx;
margin-top: 4rpx;
}
.slide_con {
display: flex;
align-items: center;
flex-wrap: nowrap;
overflow: hidden;
overflow-x: auto;
flex: 1;
}
.slide_conBox {
margin-right: 40rpx;
}
.slide_item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.slide_item image {
width: 100rpx;
height: 100rpx;
margin-bottom: 18rpx;
}
.slide_item text {
font-size: 28rpx;
color: #222222;
white-space: nowrap;
}
.Con {
flex: 1;
display: flex;
overflow: hidden;
}
.Con_left {
background-color: #F6F7FB;
height: 100%;
overflow: hidden;
overflow-y: auto;
flex: 0 0 200rpx;
}
.CateItem {
font-size: 30rpx;
color: #000000;
display: flex;
align-items: center;
justify-content: center;
padding: 35rpx 0;
}
.CateItem .hot {
width: 25.82rpx;
height: 30rpx;
margin-right: 4rpx;
}
.CateItem .bao {
width: 28rpx;
height: 28rpx;
margin-right: 4rpx;
}
.Con_right {
flex: 1;
position: relative;
box-sizing: border-box;
/* padding: 10rpx 20rpx; */
box-sizing: border-box;
overflow: hidden;
position: relative;
overflow-y: auto;
}
.CateInfo_tit {
padding: 20rpx 0;
padding-left: 15rpx;
font-size: 28rpx;
color: #222222;
border-bottom: 1rpx solid #EBEBEB;
position: relative;
width: 100%;
}
.CateInfo_tit::after {
content: '';
position: absolute;
left: 0rpx;
top: 50%;
transform: translateY(-50%);
width: 5rpx;
height: 28rpx;
background: #FF370B;
border-radius: 0rpx 3rpx 3rpx 0rpx;
}
.CateInfo_Item {
/* display: flex; */
margin-top: 26rpx;
}
.CateInfo_Item_Box {
display: flex;
}
.CateInfo_Item_left {
width: 140rpx;
min-width: 140rpx;
height: 140rpx;
border-radius: 20rpx 20rpx 20rpx 20rpx;
overflow: hidden;
margin-right: 3rpx;
margin-right: 20rpx;
}
.CateInfo_Item_left image {
width: 100%;
height: 100%;
}
.CateInfo_Item_right {
flex: 1;
border-bottom: 1rpx solid #EBEBEB;
padding-bottom: 30rpx;
}
.CateInfo_Item_right_Tit {
font-size: 30rpx;
color: #000000;
font-weight: bold;
}
.CateInfo_Item_right_subtit {
font-size: 26rpx;
color: #999999;
margin-top: 10rpx;
}
.CateInfo_Item_Money {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 27rpx;
}
.CateInfo_Item_Money_left {
font-size: 34rpx;
color: #FF370B;
}
.CateInfo_Item_Money_left span {
font-size: 28rpx;
}
.CateInfo_Item_Money_right .input {
padding: 0;
}
.minus {
width: 22px;
height: 22px;
border-width: 1px;
border-color: #E6E6E6;
border-style: solid;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.input {
padding: 0 10px;
}
.plus {
width: 22px;
height: 22px;
background-color: #FF0000;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.gg {
width: 142rpx;
height: 40rpx;
background: #FFEBEB;
border-radius: 20rpx 20rpx 20rpx 20rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
color: #FF370B;
margin-top: 12rpx;
margin-left: 6rpx;
}
.CateList_Box {
display: flex;
overflow: hidden;
position: relative;
z-index: 9;
padding: 20rpx 10rpx;
}
.CateList {
display: flex;
overflow: hidden;
overflow-x: auto;
flex: 1;
flex-wrap: nowrap;
scrollbar-width: none;
-ms-overflow-style: none;
}
.CateList_Item {
min-width: 110rpx;
height: 40rpx;
background: #F6F7FB;
border-radius: 10rpx 10rpx 10rpx 10rpx;
padding: 5rpx 30rpx;
font-size: 26rpx;
color: #222222;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16rpx;
white-space: nowrap;
/* margin-bottom: 30rpx; */
}
.CateList::-webkit-scrollbar {
display: none;
}
.CateList_Item_active {
background: #FF370B;
color: #FFFFFF;
}
.more {
display: flex;
align-items: center;
justify-content: center;
margin-left: 10rpx;
}
.CateInfo {
margin: 0 10rpx;
padding: 10rpx 10rpx;
}
.CateListShowBox {}
.containerShow {
background: rgba(34, 34, 34, 0.4);
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: 2;
}
.headerShow {
height: auto;
}
.header2 .slide_con {
flex-wrap: wrap;
}
.header2 {
height: auto;
padding-bottom: 30rpx;
position: absolute;
left: 0;
top: 0;
z-index: 11;
}
.header2 .slide .slide_con .slide_conBox:nth-child(5n) {
margin-right: 0;
}
.hides {
display: flex;
align-items: center;
font-size: 28rpx;
color: #999999;
margin-top: 50rpx;
justify-content: center;
}
.op0 {
opacity: 0;
}
.boxshadow {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.3);
z-index: 10;
}
.activeCateList {
display: flex;
align-items: center;
flex-wrap: wrap;
background: #FFFFFF;
padding: 20rpx 12rpx;
padding-right: 0;
position: absolute;
z-index: 9;
width: 100%;
}
.activeCateList .CateList_Item {
margin-bottom: 16rpx;
margin-right: 28rpx;
}
.activeCateList .CateList_Item:nth-child(4n) {
margin-right: 0;
}
.boxshadow2 {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.3);
z-index: 8;
}
.bgf {
background-color: #fff;
}
.btn {
width: 510rpx;
height: 80rpx;
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
border-radius: 100rpx 100rpx 100rpx 100rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 36rpx;
color: #FFFFFF;
font-family: 700;
margin-top: 40rpx;
}
.btn .cir {
width: 40rpx;
height: 40rpx;
border: 1rpx solid #FFFFFF;
border-radius: 50%;
margin-left: 20rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.GGList {
width: 482rpx;
background: rgba(255, 239, 239, 0.5);
border-radius: 20rpx 20rpx 20rpx 20rpx;
padding: 25rpx 16rpx;
box-sizing: border-box;
margin-left: 26rpx;
}
.noneBor {
border-bottom: none;
}
.GGItem {
display: flex;
align-items: center;
margin-bottom: 10rpx;
}
.GGItem_Image {
width: 120rpx;
height: 100rpx;
border-radius: 20rpx 20rpx 20rpx 20rpx;
margin-right: 20rpx;
}
.GGItem_Con_Tit {
font-size: 28rpx;
color: #000000;
}
.GGItem_Con {
flex: 1;
}
.GGItem_Con_Msg_left {
display: flex;
font-size: 30rpx;
color: #FF370B;
}
.GGItem_Con_Msg_left span {
font-size: 24rpx;
}
.GGItem_Con_Msg {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20rpx;
}
.GGItem_Con_Msg_right .input {
padding: 0;
}
.shadow {
background: rgba(0, 0, 0, 0.4);
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.shadowBox1{
height: 250rpx;
width: 100%;
background-color: #fff;
}
.shop_car{
width: 140rpx;
height: 140rpx;
position: fixed;
right: 33rpx;
bottom: 180rpx;
z-index: 10;
}
.shop_car image{
width: 100%;
height: 100%;
}
.u-badge {
position: absolute;
right: 0;
top: -10rpx;
}

View File

@ -0,0 +1,370 @@
<template>
<div class="container">
<!-- 顶部展开后的阴影 -->
<div class="boxshadow" v-if="topShow"></div>
<div class="header" :class="topShow ? 'op0' : ''">
<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
<div class="searchBox_left">
<!-- <u-icon name="arrow-left" size="20px" color="#000"></u-icon> -->
</div>
<div class="searchBox_ipt" @click="searchPage">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
mode="aspectFill"></image>
<input disabled type="text" placeholder="输入商品名称">
</div>
</div>
<div class="slide">
<div class="slide_con">
<div v-for="(item, index) in CateList" :key="index" class="slide_conBox">
<view class="slide_item">
<image :src="picUrl + item.category_pic" mode="aspectFill"></image>
<text>{{ item.category_name }}</text>
</view>
</div>
</div>
<div class="open" @click="topOpen" v-if="!topShow">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_openIcon.png"
mode="aspectFill"></image>
</div>
</div>
</div>
<!-- 整体展开的顶部 -->
<div class="header header2" v-if="topShow">
<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
<div class="searchBox_left">
<u-icon name="arrow-left" size="20px" color="#000"></u-icon>
</div>
<div class="searchBox_ipt">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
mode="aspectFill"></image>
<input type="text" placeholder="输入商品名称">
</div>
</div>
<div class="slide">
<div class="slide_con">
<div v-for="(item, index) in CateList" :key="index" class="slide_conBox">
<view class="slide_item">
<image :src="picUrl + item.category_pic" mode="aspectFill"></image>
<text>{{ item.category_name }}</text>
</view>
</div>
</div>
</div>
<div class="hides" @click="topOpen">
收起 <u-icon name="arrow-up"></u-icon>
</div>
</div>
<div class="Con">
<div class="Con_left">
<div class="CateItem" v-for="item in leftCateList" :key="item.id" @click="changeLeftCate(item.id)">
<!-- <image v-if="false" class="hot"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_hot.png"
mode="aspectFill">
</image> -->
<!-- <image class="bao"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_bao.png"
mode="aspectFill"></image> -->
{{ item.category_name }}
</div>
</div>
<div class="Con_right">
<div class="CateList_Box" :class="cateListShow ? 'bgf' : ''">
<div class="CateList" ref="cateListRef">
<div class="CateList_Item" v-for="(item, index) in tagList" :key="item.id"
:class="index == rightTopActive ? 'CateList_Item_active' : ''" @click="checkItem(index)">{{ item.tag_name }}
</div>
</div>
<div class="more" @click="changeCateListShow">
<u-icon v-if="!cateListShow" name="arrow-down"></u-icon>
<u-icon v-if="cateListShow" name="arrow-up"></u-icon>
</div>
</div>
<!-- 右下展开的内容 -->
<div class="activeCateList" v-if="cateListShow">
<div class="CateList_Item" v-for="(item, index) in tagList" :key="index"
:class="index == rightTopActive ? 'CateList_Item_active' : ''" @click="checkItem(index)">{{ item.tag_name }}
</div>
</div>
<!-- 右下阴影 -->
<div class="boxshadow2" v-if="cateListShow"></div>
<div class="CateInfo" v-for="(item, index) in tagList" :key="item.id">
<div class="CateInfo_tit">
{{ item.tag_name }}
</div>
<div class="CateInfo_Item" v-for="items in item.commodity_info_list" :key="items.id">
<div class="CateInfo_Item_Box">
<div class="CateInfo_Item_left" @click="goods(items.id)">
<image
:src="picUrl + items.commodity_pic"
mode="aspectFill"></image>
</div>
<div class="CateInfo_Item_right" :class="GGshow ? 'noneBor' : ''">
<div class="CateInfo_Item_right_Tit" @click="goods(items.id)">{{items.commodity_name}}</div>
<div class="CateInfo_Item_right_subtit" @click="goods(items.id)">{{items.commodity_intro}}</div>
<div class="CateInfo_Item_Money">
<div class="CateInfo_Item_Money_left">
<span></span>{{ items.commodity_goods_info_list[0].sales_price }}
</div>
<div class="CateInfo_Item_Money_right">
<u-number-box v-model="value">
<view slot="minus" class="minus">
<u-icon name="minus" size="20"></u-icon>
</view>
<text slot="input" style="width: 50px;text-align: center;" class="input">{{
value }}</text>
<view slot="plus" class="plus">
<u-icon name="plus" color="#FFFFFF" size="20"></u-icon>
</view>
</u-number-box>
</div>
</div>
<div class="gg" @click="chooseGG(items)" v-if="items.commodity_goods_info_list.length > 1 && !items.isShow">
选择规格 <u-icon name="arrow-down" size="26rpx" color="#FF370B"></u-icon>
</div>
<div class="gg" @click="chooseGG(items)" v-if="items.commodity_goods_info_list.length > 1 && items.isShow">
收起 <u-icon name="arrow-up" size="26rpx" color="#FF370B"></u-icon>
</div>
</div>
</div>
<div class="GGList" v-if="items.isShow">
<div class="GGItem" v-for="ite in items.commodity_goods_info_list" @click="goods(items.id)">
<div class="GGItem_Image">
<image
:src="picUrl + ite.commodity_pic"
mode="aspectFill"></image>
</div>
<div class="GGItem_Con">
<div class="GGItem_Con_Tit">{{ite.goods_name}}</div>
<div class="GGItem_Con_Msg">
<div class="GGItem_Con_Msg_left">
<span></span>{{ ite.sales_price }}
</div>
<div class="GGItem_Con_Msg_right">
<u-number-box v-model="value">
<view slot="minus" class="minus">
<u-icon name="minus" size="20"></u-icon>
</view>
<text slot="input" style="width: 50px;text-align: center;"
class="input">{{
value }}</text>
<view slot="plus" class="plus">
<u-icon name="plus" color="#FFFFFF" size="20"></u-icon>
</view>
</u-number-box>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 按钮 -->
<!-- <div class="btn">
查看全部商品
<div class="cir">
<u-icon name="arrow-right" color="#fff" size="12px"></u-icon>
</div>
</div> -->
</div>
</div>
</div>
<nav-footer :current="2" />
<div class="shop_car" @click="shopCar">
<u-badge numberType="limit" type="error" max="99" :value="carNum"></u-badge>
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car_num.png"></image>
<!-- <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car_empty.png"></image> -->
</div>
</div>
</template>
<script>
import {
apiArr
} from '../../../api/shop';
import {
picUrl,
menuButtonInfo,
request,
NavgateTo
} from '../../../utils';
export default {
data() {
return {
picUrl,
flag: false,
top: "",
localHeight: "",
search: "",
value: "1",
cateListShow: false,
iconList: [
{
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon1.png",
name: "休闲零食"
},
{
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon2.png",
name: "肉蛋果蔬"
},
{
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon3.png",
name: "酒水饮料"
},
{
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon4.png",
name: "家具电器"
},
{
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon5.png",
name: "电脑手机"
},
{
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon1.png",
name: "休闲零食"
},
{
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon2.png",
name: "肉蛋果蔬"
},
{
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon3.png",
name: "酒水饮料"
},
{
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon4.png",
name: "家具电器"
},
{
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_icon5.png",
name: "电脑手机"
},
],
rightTopActive: 0,
topShow: false,
GGshow: false,
CateList:[],//
currentFirstId:"",
leftCateList:[], //
currentSecondId:"",
rightCateList:[], //
currentThirdId:"",
tagList:[],
carNum:"",
}
},
methods: {
//
changeCateListShow() {
this.cateListShow = !this.cateListShow
},
//
checkItem(index) {
this.rightTopActive = index
},
//
topOpen() {
this.topShow = !this.topShow
},
//
chooseGG(e) {
e.isShow = !e.isShow
},
//
searchPage() {
NavgateTo('../search/index')
},
//
goods(e) {
NavgateTo(`../goods/index?id=${e}`)
},
//
shopCar(){
NavgateTo("../shopCar/index")
},
//
getCateList(){
request(apiArr.goodsCateList,"POST",{}).then(res=>{
console.log(res);
this.CateList = res.commodity_category_list
this.firstId = res.commodity_category_list[0].id
this.leftCateList = res.commodity_category_list[0].level_two_category
this.secondId = res.commodity_category_list[0].level_two_category[0].id
this.getGoodsList()
})
},
getGoodsList(){
request(apiArr.getGoodsList,'POST',{
user_id:"",
id:this.secondId
}).then(res=>{
res.commodity_list.forEach(item => {
item.commodity_info_list.forEach(item=>{
item.isShow = false
})
});
this.tagList = res.commodity_list
})
},
getShopCarList(){
request(apiArr.getCar,"POST",).then(res=>{
console.log(res);
this.carNum = res.total
})
},
changeLeftCate(e){
this.secondId = e
this.getGoodsList()
},
},
onLoad(options) {
const meun = menuButtonInfo();
this.top = meun.top;
this.localHeight = meun.height;
this.getCateList()
this.getShopCarList()
},
onReachBottom() {
if (this.flag) {
}
},
}
</script>
<style>
@import url("./index.css");
</style>

View File

@ -0,0 +1,228 @@
page {
background-color: #fff;
padding-bottom: 0;
min-height: 100vh;
}
image {
width: 100%;
height: 100%;
}
.searchBox {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 20rpx;
margin-top: 30rpx;
}
.searchBox_left {
width: 622rpx;
height: 70rpx;
background: #F6F7FB;
border-radius: 100rpx 100rpx 100rpx 100rpx;
display: flex;
box-sizing: border-box;
padding: 0 30rpx;
align-items: center;
}
.searchBox_left image {
width: 30rpx;
height: 30rpx;
margin-right: 20rpx;
}
.searchBox_left .u-input {
flex: 1;
padding: 0;
border: none;
}
.searchBox_right {
width: 60rpx;
position: relative;
}
.searchBox_right image {
width: 40rpx;
height: 40rpx;
}
.cars {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
.u-badge {
position: absolute;
right: 0;
top: -10rpx;
}
.his {
margin: 0 20rpx;
margin-top: 48rpx;
}
.hisTit {
font-size: 33rpx;
color: #222222;
font-weight: 700;
}
.HisList {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-top: 30rpx;
}
.HisItem {
min-width: 130rpx;
background: #F6F7FB;
border-radius: 10rpx 10rpx 10rpx 10rpx;
font-size: 26rpx;
color: #555555;
display: flex;
align-items: center;
justify-content: center;
padding: 10rpx 14rpx;
box-sizing: border-box;
margin-right: 40rpx;
white-space: nowrap;
margin-bottom: 20rpx;
}
.HisItem:nth-child(4n) {
margin-right: 0;
}
.searchMoreItem {
margin: 0 50rpx;
padding: 20rpx 0;
border-bottom: 1rpx solid #EBEBEB;
}
.empty {
display: flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #999999;
flex-direction: column;
margin: 0 auto;
margin-top: 118rpx;
}
.empty {
width: 340rpx;
height: 226rpx;
}
.iconBox {
display: flex;
flex-direction: column;
}
.iconBox image {
width: 31rpx;
height: 16rpx;
}
.searchSubItem {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
font-size: 33rpx;
color: #222222;
}
.searchSubTit {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 50rpx;
}
.searchList {
margin-top: 36rpx;
}
.searchItem {
display: flex;
align-items: center;
margin: 0 20rpx;
}
.searchItem_left {
width: 140rpx;
height: 140rpx;
border-radius: 20rpx 20rpx 20rpx 20rpx;
overflow: hidden;
margin-right: 20rpx;
}
.searchItem_right {
flex: 1;
}
.searchItem_right_tit {
font-size: 30rpx;
color: #000000;
font-weight: 600;
}
.searchItem_right_subTit {
font-size: 26rpx;
color: #999999;
margin-top: 10rpx;
}
.searchItem_right_Money {
display: flex;
align-items: center;
justify-content: space-between;
}
.Money_left {
font-size: 34rpx;
color: #FF370B;
display: flex;
align-items: flex-end;
margin-top: 26rpx;
}
.money_unit {
font-size: 28rpx;
}
.Money_dw {
font-size: 26rpx;
}
.minus {
border: 1rpx solid #999999;
background-color: transparent !important;
width: 30rpx;
height: 30rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.plus {
width: 30rpx;
height: 30rpx;
background: linear-gradient(140deg, #FFA28D 0%, #FF370B 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}

View File

@ -0,0 +1,128 @@
<template>
<view class="merchantList">
<div class="searchBox">
<div class="searchBox_left">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"></image>
<u--input @focus="iptFocus" @blur="iptBlur" placeholder="搜索商品" border="surround" clearable></u--input>
</div>
<div class="searchBox_right">
<div class="cars">
<u-badge numberType="limit" type="error" max="99" :value="value"></u-badge>
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car.png" mode="widthFix"></image>
</div>
</div>
</div>
<!-- 搜索联系 -->
<div class="searchMore" v-if="isSearch">
<div class="searchMoreItem">猪肉肠</div>
<div class="searchMoreItem">猪肉肠</div>
<div class="searchMoreItem">猪肉肠</div>
</div>
<!-- 搜索历史 -->
<div class="his" v-if="isSearch">
<div class="hisTit">搜索历史</div>
<div class="HisList">
<div class="HisItem">羊肉</div>
<div class="HisItem">火锅底料</div>
<div class="HisItem">蒜蓉辣酱</div>
<div class="HisItem">蒜蓉辣酱</div>
<div class="HisItem">蒜蓉辣酱</div>
<div class="HisItem">蒜蓉辣酱</div>
</div>
</div>
<!-- 未搜索到 -->
<div class="empty" v-if="false">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_noSearch.png"></image>
对不起没有找到您想要的商品
</div>
<div class="searchList">
<div class="searchSubTit">
<div class="searchSubItem">综合</div>
<div class="searchSubItem">
价格
<div class="iconBox">
</div>
</div>
</div>
<div class="searchItem">
<div class="searchItem_left">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_act2Img.png" mode="widthFix"></image>
</div>
<div class="searchItem_right">
<div class="searchItem_right_tit">泰国金枕榴莲</div>
<div class="searchItem_right_subTit">商品介绍商品介绍</div>
<div class="searchItem_right_Money">
<div class="Money_left">
<div class="money_unit"></div>
125.9
<div class="Money_dw">/</div>
</div>
<div class="Money_right">
<u-number-box v-model="value">
<view slot="minus" class="minus">
<u-icon name="minus" size="22" bold></u-icon>
</view>
<text slot="input" style="width: 80rpx;text-align: center;" class="input">{{ value
}}</text>
<view slot="plus" class="plus">
<u-icon name="plus" color="#FFFFFF" size="22" bold></u-icon>
</view>
</u-number-box>
</div>
</div>
</div>
</div>
</div>
</view>
</template>
<script>
import {
apiArr
} from '../../../api/doorToDoor';
import {
picUrl,
menuButtonInfo,
request,
NavgateTo
} from '../../../utils';
export default {
data() {
return {
flag: false,
value: 3,
isSearch: false,
}
},
methods: {
search() {
},
ipt1(e) {
console.log(e);
},
iptFocus() {
this.isSearch = true
},
iptBlur() {
this.isSearch = false
},
},
onLoad(options) {
},
onReachBottom() {
if (this.flag) {
}
},
}
</script>
<style>
@import url("./index.css");
</style>

View File

@ -0,0 +1,217 @@
.searchBox {
display: flex;
align-items: center;
z-index: 2;
padding-bottom: 30rpx;
}
.searchBox_mid {
font-size: 40rpx;
color: #222222;
flex: 1;
text-align: center;
}
.searchBox_left {
box-sizing: border-box;
padding-left: 20rpx;
flex: 1;
}
.searchBox_right {
opacity: 0;
flex: 1;
}
.empty {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 160rpx;
}
.empty image {
width: 340rpx;
height: 253.51rpx;
}
.empty div {
font-size: 26rpx;
color: #999999;
margin-top: -40rpx;
text-align: center;
}
.deleteIcon {
margin: 0 40rpx;
box-sizing: border-box;
margin-top: 36rpx;
display: flex;
justify-content: flex-end;
}
.goodsItem {
display: flex;
align-items: center;
margin: 0 20rpx;
padding: 30rpx 0;
box-sizing: border-box;
border-bottom: 1rpx solid #EBEBEB;
}
.goodsItem_left {
width: 32rpx;
height: 32rpx;
margin-right: 32rpx;
}
.goodsItem_right {
flex: 1;
}
.goodsItem_msg {
display: flex;
align-items: center;
}
.goodsItem_msg_right {
flex: 1;
}
.goodsItem_msg_img {
width: 140rpx;
height: 140rpx;
border-radius: 20rpx 20rpx 20rpx 20rpx;
margin-right: 20rpx;
}
.goodsItem_msg_right {
flex: 1;
}
.goodsItem_msg_right_msg_left {
display: flex;
align-items: center;
font-size: 34rpx;
color: #FF370B;
margin-top: 26rpx;
}
.goodsItem_msg_right_tit {
font-size: 30rpx;
color: #000000;
font-weight: 700;
}
.goodsItem_msg_right_subTit {
font-size: 26rpx;
color: #999999;
margin-top: 10rpx;
}
.goodsItem_msg_right_msg {
display: flex;
align-items: center;
justify-content: space-between;
}
.goodsItem_msg_right_msg_left span {
font-size: 28rpx;
}
.goodsItem_msg_right_msg_right {
display: flex;
align-items: center;
}
.minus {
width: 22px;
height: 22px;
border-width: 1px;
border-color: #E6E6E6;
border-style: solid;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.input {
padding: 0 10px;
}
.plus {
width: 22px;
height: 22px;
background-color: #FF0000;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.footer {
width: 750rpx;
background: #FFFFFF;
box-shadow: 3rpx -3rpx 15rpx 0rpx rgba(255, 27, 27, 0.05);
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 40rpx 20rpx;
position: fixed;
left: 0;
right: 0;
bottom: 0;
justify-content: space-between;
}
.footer_left {
display: flex;
align-items: center;
}
.footer_all {
font-size: 28rpx;
color: #000000;
display: flex;
align-items: center;
}
.footer_all image {
width: 28rpx;
height: 28rpx;
margin-right: 16rpx;
}
.footer_total {
font-weight: bold;
font-size: 40rpx;
color: #FF370B;
margin-left: 90rpx;
}
.footer_total span {
font-size: 32rpx;
color: #222222;
font-weight: 400;
}
.footer_right {
font-size: 36rpx;
color: #FFFFFF;
font-weight: 700;
width: 230rpx;
height: 70rpx;
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
border-radius: 100rpx 100rpx 100rpx 100rpx;
display: flex;
align-items: center;
justify-content: center;
}

View File

@ -0,0 +1,246 @@
<template>
<view>
<div class="header">
<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
<div class="searchBox_left" @click="back">
<u-icon name="arrow-left" size="20px" color="#000"></u-icon>
</div>
<div class="searchBox_mid">购物车({{ shopCarTotal }}) </div>
<div class="searchBox_right">
<u-icon name="arrow-left" size="20px" color="#000"></u-icon>
</div>
</div>
</div>
<div class="main">
<div class="deleteIcon" @click="deleteItem">
<u-icon name="trash" size="50rpx"></u-icon>
</div>
<div class="goodsList">
<div class="goodsItem" v-for="item, index in shopCarList" :key="item.id">
<div class="goodsItem_left" @click="changeChecked(item, index)">
<image v-if="!item.checked" src="http://192.168.0.172:5500/7.15/shop_checked1.png"></image>
<image v-if="item.checked" src="http://192.168.0.172:5500/7.15/shop_checked2.png"></image>
</div>
<div class="goodsItem_right">
<div class="goodsItem_msg">
<div class="goodsItem_msg_img">
<image :src="picUrl + item.commodity_goods_info.commodity_pic">
</image>
</div>
<div class="goodsItem_msg_right">
<div class="goodsItem_msg_right_tit">{{ item.commodity_goods_info.goods_name }}</div>
<div class="goodsItem_msg_right_subTit">{{ item.commodity_goods_info.goods_intro }}
</div>
<div class="goodsItem_msg_right_msg">
<div class="goodsItem_msg_right_msg_left">
<span></span>{{ item.commodity_goods_info.sales_price }} <span>/{{
item.commodity_goods_info.goods_unit }}</span>
</div>
<div class="goodsItem_msg_right_msg_right">
<u-number-box v-model="item.count" :asyncChange="true" min="0">
<view slot="minus" class="minus" @click="minus(item, index)">
<u-icon name="minus" size="32" bold></u-icon>
</view>
<text slot="input" style="width: 80rpx;text-align: center;" class="input">{{
item.count }}</text>
<view slot="plus" class="plus" @click="add(item, index)">
<u-icon name="plus" color="#FFFFFF" size="32" bold></u-icon>
</view>
</u-number-box>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer_left">
<div class="footer_all" @click="allChecked">
<image v-if="!isAllchecked"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png">
</image>
<image v-if="isAllchecked"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png">
</image>
全选
</div>
<div class="footer_total">
<span>合计</span>
{{ shopMoney }}
</div>
</div>
<div class="footer_right" @click="submitOrder">
结算
</div>
</div>
</div>
<div class="empty" v-if="false">
<image src="http://192.168.0.172:5500/7.15/shop_empty.png"></image>
<div>
啥也没有 <br>
赶紧去shopping吧~
</div>
</div>
</view>
</template>
<script>
import {
apiArr
} from '../../../api/shop';
import {
picUrl,
menuButtonInfo,
request,
NavgateTo
} from '../../../utils';
export default {
data() {
return {
picUrl,
top: "",
localHeight: "",
value: 3,
type: "error",
shopCarList: [],
shopCarTotal: 0,
shopMoney: 0,
isAllchecked: false
}
},
methods: {
back() {
NavgateTo("1")
},
submitOrder() {
let arr = []
this.shopCarList.forEach(item => {
if (item.checked) {
arr.push(item)
}
})
NavgateTo(`../submitOrder/index?shopCarList=${JSON.stringify(arr)}`)
},
getShopCar() {
request(apiArr.getCar, 'POST', {}).then(res => {
res.commodity_cart_list.forEach(item => {
item.checked = false
});
this.shopCarTotal = res.total
this.shopCarList = res.commodity_cart_list
})
},
//
changeChecked(item, index) {
this.shopCarList[index].checked = !this.shopCarList[index].checked
this.calcTotal()
//
this.isAllchecked = this.shopCarList.every(item => item.checked)
},
//
allChecked() {
this.isAllchecked = !this.isAllchecked
// Bug !this.allChecked !this.isAllchecked
if (this.isAllchecked) {
this.shopCarList.forEach(item => {
item.checked = true
});
} else {
this.shopCarList.forEach(item => {
item.checked = false
});
}
this.calcTotal()
},
//
calcTotal() {
let total = 0
this.shopCarList.forEach(item => {
console.log(item);
if (item.checked) {
total += item.commodity_goods_info.sales_price * item.count
}
});
this.shopMoney = total
},
minus(item, index) {
let that = this
if (item.count === 1) {
request(apiArr.deleteCar, "POST", {
ids: [item.id]
}).then(res => {
that.shopCarList.splice(index, 1)
that.calcTotal()
})
}
this.shopCarList[index].count = this.shopCarList[index].count - 1
this.calcTotal()
},
add(item, index) {
this.shopCarList[index].count = this.shopCarList[index].count + 1
this.calcTotal()
},
deleteItem() {
let that = this
uni.showModal({
title: '提示',
content: '确定删除所选商品吗',
success: function (res) {
if (res.confirm) {
let ids = []
that.shopCarList.forEach(item => {
if (item.checked) {
ids.push(item.id)
item.checked = false
}
})
request(apiArr.deleteCar, "POST", {
ids
}).then(res => {
uni.showToast({
title: '删除成功',
duration: 2000
});
that.getShopCar()
that.calcTotal()
}).catch(err => {
console.log(err);
})
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
},
onLoad(options) {
const meun = menuButtonInfo();
this.top = meun.top;
this.localHeight = meun.height;
this.getShopCar()
},
onReachBottom() {
},
}
</script>
<style>
@import url("./index.css");
</style>

View File

@ -0,0 +1,199 @@
.address {
background: #F6F7FB;
margin-top: 46rpx;
padding: 20rpx 0;
}
.border {
height: 7rpx;
width: 100%;
}
.address_Info {
padding: 30rpx 20rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
}
.address_Info_left_tit {
font-size: 36rpx;
color: #222222;
font-weight: 700;
}
.address_Info_left_name {
font-size: 28rpx;
color: #555555;
margin-top: 30rpx;
}
.address_Info_left_addr {
margin-top: 10rpx;
}
.goodsItem {
display: flex;
align-items: center;
margin: 0 20rpx;
padding: 30rpx 0;
box-sizing: border-box;
border-bottom: 1rpx solid #EBEBEB;
}
.goodsItem_msg_right {
flex: 1;
}
.goodsItem_msg_img {
width: 140rpx;
height: 140rpx;
border-radius: 20rpx 20rpx 20rpx 20rpx;
margin-right: 20rpx;
}
.goodsItem_msg_right {
flex: 1;
}
.goodsItem_msg_right_msg_left {
display: flex;
align-items: center;
font-size: 34rpx;
color: #FF370B;
margin-top: 26rpx;
}
.goodsItem_msg_right_tit {
font-size: 30rpx;
color: #000000;
font-weight: 700;
}
.goodsItem_msg_right_subTit {
font-size: 26rpx;
color: #999999;
margin-top: 10rpx;
}
.goodsItem_msg_right_msg {
display: flex;
align-items: center;
justify-content: space-between;
}
.goodsItem_msg_right_msg_left span {
font-size: 28rpx;
}
.goodsItem_msg_right_msg_right {
display: flex;
align-items: center;
}
.minus {
width: 22px;
height: 22px;
border-width: 1px;
border-color: #E6E6E6;
border-style: solid;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.input {
padding: 0 10px;
}
.plus {
width: 22px;
height: 22px;
background-color: #FF0000;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.line {
height: 20rpx;
background: #F6F7FB;
}
.goodsItem:last-child {
border-bottom: none;
}
.goodsCate:last-child .line {
display: none;
}
.yf {
display: flex;
justify-content: flex-end;
align-items: center;
font-size: 32rpx;
color: #FF370B;
padding: 30rpx 20rpx;
box-sizing: border-box;
}
.yf span {
color: #222222;
}
.footer {
width: 750rpx;
background: #FFFFFF;
box-shadow: 3rpx -3rpx 15rpx 0rpx rgba(255, 27, 27, 0.05);
padding: 16rpx 75rpx;
padding-bottom: 30rpx;
box-sizing: border-box;
display: flex;
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
.btn {
font-size: 36rpx;
color: #FFFFFF;
width: 600rpx;
height: 90rpx;
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
border-radius: 100rpx 100rpx 100rpx 100rpx;
display: flex;
align-items: center;
justify-content: center;
}
.address_Info_btn {
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
border-radius: 100rpx 100rpx 100rpx 100rpx;
height: 90rpx;
width: 600rpx;
font-size: 36rpx;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.noneDef{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}

View File

@ -0,0 +1,239 @@
<template>
<view class="container">
<div class="address">
<div class="border">
<image src="http://192.168.0.172:5500/7.15/shop_border.png" mode="widthFix"></image>
</div>
<div class="address_Info" @click="choseAddress" v-if="defAddress">
<div class="address_Info_left">
<div class="address_Info_left_tit">收货地址</div>
<div class="address_Info_left_name">{{ defAddress.name }} {{ defAddress.phone }}</div>
<div class="address_Info_left_addr">{{ defAddress.address }}{{ defAddress.house_number }}</div>
</div>
</div>
<div class="address_Info" @click="addAddress" v-if="!defAddress">
<div class="address_Info_left noneDef">
<div class="address_Info_btn">添加收货地址</div>
</div>
</div>
<div class="border">
<image src="http://192.168.0.172:5500/7.15/shop_border.png" mode="widthFix"></image>
</div>
</div>
<div class="goodsCate" v-for="items, indexs in carList" :key="indexs">
<div class="goodsItem">
<div class="goodsItem_msg_img">
<image :src="picUrl + items.commodity_goods_info.commodity_pic">
</image>
</div>
<div class="goodsItem_msg_right">
<div class="goodsItem_msg_right_tit">{{ items.commodity_goods_info.goods_name }}</div>
<div class="goodsItem_msg_right_subTit">{{ items.commodity_goods_info.goods_intro }}</div>
<div class="goodsItem_msg_right_msg">
<div class="goodsItem_msg_right_msg_left">
<span></span>{{ items.commodity_goods_info.sales_price }}
<span>/{{ items.commodity_goods_info.goods_unit }}</span>
</div>
<div class="goodsItem_msg_right_msg_right">
<u-number-box v-model="value">
<view slot="minus" class="minus" @click="minus(items, indexs)">
<u-icon name="minus" size="32" bold></u-icon>
</view>
<text slot="input" style="width: 80rpx;text-align: center;" class="input">
{{ items.count }}
</text>
<view slot="plus" class="plus" @click="add(items, indexs)">
<u-icon name="plus" color="#FFFFFF" size="32" bold></u-icon>
</view>
</u-number-box>
</div>
</div>
</div>
</div>
<div class="yf">
<span>运费</span>9.9
</div>
<div class="line"></div>
</div>
<div class="footer">
<div class="btn" @click="craeteOrder">立即支付{{ totalMony }}</div>
</div>
</view>
</template>
<script>
import {
apiArr
} from '../../../api/shop';
import {
picUrl,
menuButtonInfo,
request,
NavgateTo
} from '../../../utils';
export default {
data() {
return {
picUrl,
top: "",
localHeight: "",
value: 3,
type: "error",
carList: [],
totalMony: 0,
defAddress: {},
order_id: ""
}
},
methods: {
choseAddress() {
NavgateTo('../address/index')
},
addAddress() {
NavgateTo('../addAddress/index')
},
calcTotal() {
let total = 0
this.carList.forEach(item => {
total += item.commodity_goods_info.sales_price * item.count
})
this.totalMony = total
},
minus(item, index) {
let that = this
if (item.count === 1) {
request(apiArr.deleteCar, "POST", {
ids: [item.id]
}).then(res => {
that.carList.splice(index, 1)
that.calcTotal()
})
}
this.carList[index].count = this.carList[index].count - 1
this.calcTotal()
},
add(item, index) {
this.carList[index].count = this.carList[index].count + 1
this.calcTotal()
},
//
getUserAddress() {
request(apiArr.getUserDefAddress, "POST", {}).then(res => {
this.defAddress = res.default_address
})
},
craeteOrder() {
uni.showLoading({
title: '加载中',
})
let goods_list = []
this.carList.forEach(item => {
goods_list.push({
goods_id: item.commodity_goods_info.id,
count: item.count,
})
})
request(apiArr.createOrder, "POST", {
goods_list,
address_id: this.defAddress.id
}).then(res => {
uni.hideLoading()
this.order_id = res.order_id
this.payOrder()
}).catch(err => {
uni.hideLoading()
})
},
payOrder() {
request(apiArr.payOrder, "POST", {
order_id: this.order_id
}).then(res => {
let that = this; // this
let resCopy = JSON.parse(JSON.stringify(res))
this.WxPay(resCopy)
})
},
WxPay(resCopy) {
let that = this
uni.requestPayment({
"provider": "wxpay",
"orderInfo": {
"appid": "wxb4018c78fa143450", //
"noncestr": resCopy.nonceStr, //
"package": resCopy.package, //
"prepayid":resCopy.prepayId,
"timestamp": resCopy.timeStamp, //
"paysign": resCopy.paySign,
"partnerid":resCopy.partnerId
},
timeStamp: resCopy.timeStamp,
nonceStr: resCopy.nonceStr,
package: resCopy.package,
signType: resCopy.signType,
paySign: resCopy.paySign,
success(res) {
console.log(res);
},
fail(e) {
console.log(e.errMsg);
}
})
// uni.requestPayment({
// provider: 'wxpay',
// timeStamp: resCopy.timeStamp,
// nonceStr: resCopy.nonceStr,
// package: resCopy.package,
// signType: resCopy.signType,
// paySign: resCopy.paySign,
// success: function (res) {
// console.log('success:' + JSON.stringify(res));
// that.queryOrder()
// },
// fail: function (err) {
// console.log('fail:' + JSON.stringify(err));
// }
// })
},
queryOrder() {
request(apiArr.queryOrder, "POST", {
order_id: this.order_id
}).then(res => {
console.log(res);
})
},
},
onShow() {
this.getUserAddress()
},
onLoad(options) {
const meun = menuButtonInfo();
this.top = meun.top;
this.localHeight = meun.height;
this.carList = JSON.parse(options.shopCarList)
this.calcTotal()
},
onReachBottom() {
},
}
</script>
<style>
@import url("./index.css");
</style>

View File

@ -5,7 +5,7 @@ page {
} }
.container { .container {
background: url(http://192.168.0.172:5500/shopEn_apply.png) no-repeat; background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shopEn_apply.png) no-repeat;
background-size: 750rpx 497rpx; background-size: 750rpx 497rpx;
box-sizing: border-box; box-sizing: border-box;
padding-top: 290rpx; padding-top: 290rpx;

View File

@ -55,7 +55,7 @@
<u-upload :fileList="imgList" @afterRead="afterReadImg" @delete="deletePic" name="1" multiple <u-upload :fileList="imgList" @afterRead="afterReadImg" @delete="deletePic" name="1" multiple
:maxCount="10"> :maxCount="10">
<div class="imgCon"> <div class="imgCon">
<image src="http://192.168.0.172:5500/com_imageImg.png" mode="widthFix"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_imageImg.png" mode="widthFix"></image>
上传图片 上传图片
</div> </div>
</u-upload> </u-upload>
@ -68,7 +68,7 @@
<u-upload :fileList="imgList3" @afterRead="afterReadImg2" @delete="deletePic2" name="1" multiple <u-upload :fileList="imgList3" @afterRead="afterReadImg2" @delete="deletePic2" name="1" multiple
:maxCount="10"> :maxCount="10">
<div class="imgCon"> <div class="imgCon">
<image src="http://192.168.0.172:5500/com_imageImg.png" mode="widthFix"></image> <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_imageImg.png" mode="widthFix"></image>
上传图片 上传图片
</div> </div>
</u-upload> </u-upload>

Some files were not shown because too many files have changed in this diff Show More