Compare commits
59 Commits
8fb714feef
...
41ea48b154
| Author | SHA1 | Date | |
|---|---|---|---|
| 41ea48b154 | |||
| 3a5ff55440 | |||
| 29dfab5b6d | |||
| 53d506c084 | |||
| b8aacb162f | |||
| fb7bb4aa9f | |||
| 78cec5bfc5 | |||
|
|
6f3c5ceb63 | ||
| 2c3b890ef1 | |||
| e30d9cf0f8 | |||
|
|
4a308bc46f | ||
| ec2293bcb0 | |||
| bc3eb44016 | |||
|
|
f588a5a0dc | ||
|
|
1afbd2d972 | ||
| 50ffe412a7 | |||
|
|
ac23f91ea1 | ||
|
|
04e3f4eed8 | ||
|
|
add52699ad | ||
| 8147ba69de | |||
|
|
142e1ad8fe | ||
| e829761f5d | |||
|
|
c7ffd3bbb1 | ||
| 46634806f8 | |||
|
|
2055c112c2 | ||
| 309e1f82fe | |||
|
|
2348c61e9c | ||
|
|
fb491dad1c | ||
| fe37c404d9 | |||
| 9a9aec8dd9 | |||
| 5bf36b96e9 | |||
| bc345b71ac | |||
| a44b8dc457 | |||
| 424c1e8df7 | |||
| 2a4cf0b780 | |||
| ffe6f6239b | |||
| 15987d83b3 | |||
|
|
2c071d2d86 | ||
| bef2944dff | |||
| 249ef5c13d | |||
|
|
19d0568909 | ||
|
|
4d85ad9606 | ||
| c2a2f16b55 | |||
| 0ca233908e | |||
| a6f89f0a9a | |||
|
|
2aa560e081 | ||
|
|
41b0781ad7 | ||
|
|
2b148c85e8 | ||
|
|
b8bd07a9af | ||
| b043e7ce74 | |||
| ca37db003b | |||
| 702d3ffcec | |||
|
|
3c88a2d879 | ||
| 6db9b3becf | |||
| adae1a52e4 | |||
| 20a324aeec | |||
| c89b8a20bb | |||
| 91e503a159 | |||
| a99046b840 |
2
App.vue
2
App.vue
@ -34,7 +34,7 @@
|
||||
|
||||
page{
|
||||
font-size: 28rpx;
|
||||
padding-bottom: 120rpx;
|
||||
padding-bottom: 180rpx;
|
||||
}
|
||||
|
||||
.uicon-volume {
|
||||
|
||||
62
README-zh.md
Normal file
62
README-zh.md
Normal 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>
|
||||
-->
|
||||
@ -5,4 +5,6 @@ export const apiArr = {
|
||||
|
||||
getArea:"/api/v2/administrative-division/child-list",//新版获取省市区
|
||||
getParArea:"/api/v2/administrative-division/info",//新版获取省市区
|
||||
|
||||
getRegionList: '/api/v2/wechat/administrative-division-crud/list', // 行政区划信息分页
|
||||
}
|
||||
@ -1,23 +1,23 @@
|
||||
export const apiArr = {
|
||||
list: '/api/v1/wechat/community/list', // 获取社区列表
|
||||
info: '/api/v1/wechat/community/info', // 获取单个社区信息
|
||||
list: '/api/v1/wechat/community/list', // 获取社区列表
|
||||
info: '/api/v1/wechat/community/info', // 获取单个社区信息
|
||||
isJoin: '/api/v1/wechat/community/is-join', // 用户是否加入社区、楼宇、房间
|
||||
tipsList: '/api/v1/wechat/community/tips/list', // 获取全部通知列表
|
||||
oneTips: '/api/v1/wechat/community/tips/one', // 获取单个社区通知
|
||||
apply: '/api/v1/wechat/community/apply', // 申请加入小区
|
||||
getFacilityList:'/api/v1/wechat/community/facility/list', //获取楼号,
|
||||
getRoomList:'/api/v1/wechat/community/room/list', //获取房间号
|
||||
ownerList: '/api/v1/wechat/community/owner/list', // 获取社区业主列表
|
||||
tipsList: '/api/v1/wechat/community/tips/list', // 获取全部通知列表
|
||||
oneTips: '/api/v1/wechat/community/tips/one', // 获取单个社区通知
|
||||
apply: '/api/v1/wechat/community/apply', // 申请加入小区
|
||||
getFacilityList: '/api/v1/wechat/community/facility/list', //获取楼号,
|
||||
getRoomList: '/api/v1/wechat/community/room/list', //获取房间号
|
||||
ownerList: '/api/v1/wechat/community/owner/list', // 获取社区业主列表
|
||||
|
||||
submit:"/api/v1/wechat/community/owner/feedback-create", //报修提交
|
||||
getListByRepair:"/api/v1/wechat/community/owner/feedback-list",//报事报修列表
|
||||
getInfoById:"/api/v1/wechat/community/owner/feedback-info", //报事报修根据id查询详情
|
||||
submit: "/api/v1/wechat/community/owner/feedback-create", //报修提交
|
||||
getListByRepair: "/api/v1/wechat/community/owner/feedback-list",//报事报修列表
|
||||
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_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', // 获取社区列表
|
||||
@ -25,8 +25,23 @@ export const apiArr = {
|
||||
getCarList: '/api/v1/wechat/community/car/list', //获取车辆列表
|
||||
deleteItem: "/api/v1/wechat/community/car/del",//删除车牌
|
||||
|
||||
getBanner:"/api/v1/wechat/home-page/banner-list",//获取banner图
|
||||
getButton:"/api/v1/wechat/home-page/button-list",//获取button
|
||||
getHotWords:"/api/v1/wechat/home-page/search-hot-word/info",//搜索热词
|
||||
getBanner: "/api/v1/wechat/home-page/banner-list",//获取banner图
|
||||
getButton: "/api/v1/wechat/home-page/button-list",//获取button
|
||||
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",//预下单
|
||||
};
|
||||
@ -2,5 +2,6 @@ export const apiArr = {
|
||||
login: '/api/v1/wechat/multi-login', // 小程序登录
|
||||
loginInfo: '/api/v1/wechat/mpusers/login-info', // 获取用户信息
|
||||
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
16
api/shop.js
Normal 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', // 查询订单
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
export const apiArr = {
|
||||
getCommunityList:"/api/v2/wechat/community-room/list", //小区房源列表
|
||||
getCommunityInfo:"/api/v2/wechat/community-room/info", //小区房源详情
|
||||
workCommunityRoomList: '/api/v2/wechat/community-room/select', // 房源信息
|
||||
workOrderCategoryCrudList: '/api/v2/wechat/work-order-category-crud/list', // 工单分类信息列表
|
||||
workOrderCrudCreat: '/api/v2/wechat/work-order-crud/creat', // 报事报修工单信息创建
|
||||
getWorkOrderCrudList: '/api/v2/wechat/work-order-crud/page', // 报事报修工单信息分页
|
||||
@ -9,4 +10,16 @@ export const apiArr = {
|
||||
workOrderCrudDispatch: '/api/v2/wechat/work-order-crud/dispatch', // 人员派单
|
||||
workOrderCrudAccept: '/api/v2/wechat/work-order-crud/accept', // 人员接单
|
||||
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", //根据房源获取公积金信息
|
||||
|
||||
};
|
||||
|
||||
@ -1,180 +1,161 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-popup
|
||||
:show="show"
|
||||
closeOnClickOverlay
|
||||
round="20rpx"
|
||||
@close="onClose"
|
||||
>
|
||||
<u-popup :show="show" closeOnClickOverlay round="20rpx" @close="onClose">
|
||||
<view>
|
||||
<view class="popup_title">
|
||||
<view class="popup_label" @click="onClose">取消</view>
|
||||
<view class="popup_label color_blue" @click="onOk">确认</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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
apiArr
|
||||
} from '../../api/area';
|
||||
import { request } from '../../utils';
|
||||
export default {
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: true,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
provList: [], // 省
|
||||
cityList: [], //市
|
||||
distList: [], // 区
|
||||
import {
|
||||
apiArr
|
||||
} from '../../api/area';
|
||||
import { request } from '../../utils';
|
||||
export default {
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: true,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
provList: [], // 省
|
||||
cityList: [], //市
|
||||
distList: [], // 区
|
||||
defaultCity: [], // 默认展示的市区数据
|
||||
defaultDist: [], // 默认展示的县/区数据
|
||||
confirmProv: {}, // 默认选中省
|
||||
confirmProv1: {},
|
||||
confirmCity: {}, // 默认选中市
|
||||
confirmDist: {}, // 默认选中区/县
|
||||
|
||||
defaultCity: [], // 默认展示的市区数据
|
||||
defaultDist: [], // 默认展示的县/区数据
|
||||
sf: true,
|
||||
xsq: {},
|
||||
value2: '',
|
||||
}
|
||||
},
|
||||
|
||||
confirmProv: {}, // 默认选中省
|
||||
confirmCity: {}, // 默认选中市
|
||||
confirmDist: {}, // 默认选中区/县
|
||||
}
|
||||
methods: {
|
||||
// 获取省份信息
|
||||
async getProvList() {
|
||||
const res = await request(apiArr.getArea, 'POST', {}, { silent: false });
|
||||
this.provList = res.rows;
|
||||
this.confirmProv1 = res.rows[0]
|
||||
// 缓存省市区数据
|
||||
this.getCityList();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 获取省份信息
|
||||
async getProvList () {
|
||||
const res = await request(apiArr.city, 'POST', {}, { silent: false });
|
||||
return res;
|
||||
},
|
||||
|
||||
// 获取市区信息
|
||||
async getCityList () {
|
||||
const res = await request(apiArr.area, 'POST', {}, { silent: false });
|
||||
return res;
|
||||
},
|
||||
|
||||
// 获取 县/区 信息
|
||||
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);
|
||||
// 获取市区信息
|
||||
async getCityList(sq, x) {
|
||||
console.log('11swq', sq);
|
||||
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]
|
||||
}
|
||||
},
|
||||
|
||||
// 切换省市区时联动改变参数值
|
||||
bindChange (e) {
|
||||
console.log('[1231331], e', e);
|
||||
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});
|
||||
},
|
||||
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);
|
||||
},
|
||||
|
||||
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>
|
||||
|
||||
<style>
|
||||
@import url('./areaPopup.css');
|
||||
@import url('./areaPopup.css');
|
||||
</style>
|
||||
@ -29,32 +29,32 @@
|
||||
return {
|
||||
navList: [
|
||||
{
|
||||
photo:"http://192.168.0.172:5500/footer_home.png",
|
||||
photoAc:"http://192.168.0.172:5500/footer_homeAc.png",
|
||||
photo:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_home.png",
|
||||
photoAc:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_homeAc.png",
|
||||
nav_name:"首页",
|
||||
url:"/pages/index/index"
|
||||
},
|
||||
{
|
||||
photo:"http://192.168.0.172:5500/footer_community.png",
|
||||
photoAc:"http://192.168.0.172:5500/footer_communityAc.png",
|
||||
photo:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_community.png",
|
||||
photoAc:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_communityAc.png",
|
||||
nav_name:"我的小区",
|
||||
url:"/packages/community/index/index"
|
||||
},
|
||||
{
|
||||
photo:"http://192.168.0.172:5500/footer_shop.png",
|
||||
photoAc:"http://192.168.0.172:5500/footer_shopAc.png",
|
||||
photo:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_shop.png",
|
||||
photoAc:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_shopAc.png",
|
||||
nav_name:"优选商城",
|
||||
url:""
|
||||
url:"/packages/shop/index/index"
|
||||
},
|
||||
{
|
||||
photo:"http://192.168.0.172:5500/footer_door.png",
|
||||
photoAc:"http://192.168.0.172:5500/footer_doorAc.png",
|
||||
nav_name:"上门服务",
|
||||
url:""
|
||||
photo:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_door.png",
|
||||
photoAc:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_communityAc.png",
|
||||
nav_name:"到家服务",
|
||||
url:"/packages/homeServer/index/index"
|
||||
},
|
||||
{
|
||||
photo:"http://192.168.0.172:5500/footer_mine.png",
|
||||
photoAc:"http://192.168.0.172:5500/footer_mineAc.png",
|
||||
photo:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_mine.png",
|
||||
photoAc:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_mineAc.png",
|
||||
nav_name:"我的",
|
||||
url:"/pages/user/index"
|
||||
},
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
效果图
|
||||
|
||||

|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -19,7 +19,8 @@
|
||||
/* 模块配置 */
|
||||
"modules" : {
|
||||
"Payment" : {},
|
||||
"OAuth" : {}
|
||||
"OAuth" : {},
|
||||
"Share" : {}
|
||||
},
|
||||
/* 应用发布信息 */
|
||||
"distribute" : {
|
||||
@ -51,7 +52,7 @@
|
||||
"appleiap" : {},
|
||||
"weixin" : {
|
||||
"__platform__" : [ "ios", "android" ],
|
||||
"appid" : "",
|
||||
"appid" : "wxb4018c78fa143450",
|
||||
"UniversalLinks" : ""
|
||||
}
|
||||
},
|
||||
@ -60,6 +61,12 @@
|
||||
"appid" : "wxb4018c78fa143450",
|
||||
"UniversalLinks" : ""
|
||||
}
|
||||
},
|
||||
"share" : {
|
||||
"weixin" : {
|
||||
"appid" : "wxb4018c78fa143450",
|
||||
"UniversalLinks" : ""
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
"sass-loader": "^16.0.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"pinyin-pro": "^3.26.0",
|
||||
"sass": "^1.89.2",
|
||||
"uview-ui": "^2.0.38"
|
||||
}
|
||||
|
||||
385
packages/community/CommunityNotice/index.css
Normal file
385
packages/community/CommunityNotice/index.css
Normal 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;
|
||||
}
|
||||
98
packages/community/CommunityNotice/index.vue
Normal file
98
packages/community/CommunityNotice/index.vue
Normal 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>
|
||||
@ -1,25 +1,42 @@
|
||||
.main {
|
||||
margin: 50rpx 80rpx 69rpx;
|
||||
page {
|
||||
background-color: #fff;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 20rpx;
|
||||
width: 100%;
|
||||
background-color: #f6f7fb;
|
||||
}
|
||||
.main{
|
||||
margin: 0 80rpx;
|
||||
padding-top: 26rpx;
|
||||
}
|
||||
|
||||
.table {
|
||||
height: 150rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 50rpx;
|
||||
padding-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.tip {
|
||||
margin-top: 20rpx;
|
||||
font-weight: bold;
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 0 75rpx 0;
|
||||
height: 90rpx;
|
||||
@ -30,15 +47,19 @@
|
||||
font-size: 36rpx;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
margin-top: 280rpx;
|
||||
}
|
||||
|
||||
.popup_container {
|
||||
margin: 0 55rpx;
|
||||
}
|
||||
|
||||
.popup_title {
|
||||
margin-top: 53rpx;
|
||||
font-size: 26rpx;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.popup_community_name {
|
||||
margin: 10rpx 0 14rpx;
|
||||
text-align: center;
|
||||
@ -46,16 +67,19 @@
|
||||
font-size: 30rpx;
|
||||
color: #ff370b;
|
||||
}
|
||||
|
||||
.popup_desc {
|
||||
font-weight: bold;
|
||||
font-size: 26rpx;
|
||||
color: #222222;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.popup_btn_List {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.popup_btn {
|
||||
width: 170rpx;
|
||||
height: 52rpx;
|
||||
@ -64,6 +88,12 @@
|
||||
background: #d9d9d9;
|
||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||
}
|
||||
|
||||
.popup_btn1 {
|
||||
background: #ff370b;
|
||||
}
|
||||
.flexBox{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@ -1,127 +1,153 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="main">
|
||||
<view class="table">
|
||||
<view class="label">小区名称</view>
|
||||
<input type="text" placeholder="请输入小区名称" :value='name' data-name="name" @input="headerInputClick">
|
||||
</view>
|
||||
<view class="table">
|
||||
<view class="label">物业公司</view>
|
||||
<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 class="container">
|
||||
<div class="line"></div>
|
||||
<view class="main">
|
||||
<view class="table">
|
||||
<view class="label">房产</view>
|
||||
<view class="flexBox" @click="choseCommunity">
|
||||
<input type="text" v-model="changeComm" disabled placeholder="请选择房产">
|
||||
<u-icon name="arrow-right"></u-icon>
|
||||
</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>
|
||||
</u-popup>
|
||||
</view>
|
||||
<view class="btn" @click="headerSubmitClick">确定</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>
|
||||
|
||||
<script>
|
||||
import { request,NavgateTo, isPhone } from '../../../utils';
|
||||
import { apiArr } from '../../../api/community';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: '',
|
||||
managementName: '',
|
||||
addr: '',
|
||||
managementMobile: '',
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
headerPopupSubmitClick () {
|
||||
console.log('提交');
|
||||
import {
|
||||
request,
|
||||
NavgateTo,
|
||||
isPhone
|
||||
} from '../../../utils';
|
||||
import {
|
||||
apiArr
|
||||
} from '../../../api/community';
|
||||
export default {
|
||||
onBackPress(options) {
|
||||
console.log('from:' + options.from)
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
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) {
|
||||
const { name } = e.currentTarget.dataset;
|
||||
const { value } = e.detail;
|
||||
this[name] = value;
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
|
||||
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>
|
||||
|
||||
<style>
|
||||
@import url("./index.css");
|
||||
@import url("./index.css");
|
||||
</style>
|
||||
@ -3,7 +3,7 @@
|
||||
<view class="container">
|
||||
|
||||
<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 class="Name">MarrekoZhang</div>
|
||||
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<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">
|
||||
</div>
|
||||
|
||||
<div class="communityList">
|
||||
<div class="communityItem" v-for="(item, index) in 5" :key="index" @click="chooseCommunityInfo">
|
||||
<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 class="communityItem_msg">
|
||||
@ -21,8 +21,8 @@
|
||||
</div>
|
||||
|
||||
<div class="communityItem_msg_more">
|
||||
<img src="http://192.168.0.172:5500/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_check1.png" alt="" />
|
||||
<!-- <img src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png" alt="" /> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<div class="communityList">
|
||||
<div class="communityItem">
|
||||
<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 class="communityItem_msg">
|
||||
@ -20,7 +20,7 @@
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
288
packages/community/choseCommunity/index.css
Normal file
288
packages/community/choseCommunity/index.css
Normal 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;
|
||||
}
|
||||
285
packages/community/choseCommunity/index.vue
Normal file
285
packages/community/choseCommunity/index.vue
Normal 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>
|
||||
@ -378,17 +378,17 @@ page {
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@ -470,7 +470,7 @@ page {
|
||||
content: '';
|
||||
width: 52rpx;
|
||||
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;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
|
||||
@ -2,57 +2,57 @@
|
||||
<view class="container">
|
||||
<view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
||||
<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>
|
||||
|
||||
<div class="myRealEstate">
|
||||
<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="Visitor">访客身份 点击立即入驻本社区</div>
|
||||
</div>
|
||||
|
||||
|
||||
<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="msg" @click="notice">
|
||||
<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 class="navList">
|
||||
<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 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 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 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 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 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>
|
||||
@ -78,7 +78,7 @@
|
||||
|
||||
<div class="nearbyList">
|
||||
<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">
|
||||
@ -88,21 +88,21 @@
|
||||
|
||||
<div class="nearbyList_left">
|
||||
<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 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_right">
|
||||
<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 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 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>
|
||||
@ -124,7 +124,7 @@
|
||||
|
||||
<div v-if="active == 0" class="act1">
|
||||
<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>
|
||||
@ -133,20 +133,20 @@
|
||||
<div class="MsgList_left" v-if="false">
|
||||
<div class="MsgList_leftItem">
|
||||
<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 class="MsgList_leftItemName">我家的小猫丢了,谁看见了请联系我~</div>
|
||||
<div class="MsgList_leftItemMsg">
|
||||
<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
|
||||
</div>
|
||||
<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
|
||||
</div>
|
||||
<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
|
||||
</div>
|
||||
</div>
|
||||
@ -156,7 +156,7 @@
|
||||
<div class="MsgList_right" v-if="false">
|
||||
<div class="MsgList_rightItem">
|
||||
<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 class="MsgList_rightItemName">
|
||||
@ -165,15 +165,15 @@
|
||||
|
||||
<div class="MsgList_leftItemMsg">
|
||||
<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
|
||||
</div>
|
||||
<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
|
||||
</div>
|
||||
<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
|
||||
</div>
|
||||
</div>
|
||||
@ -187,15 +187,15 @@
|
||||
|
||||
<div class="MsgList_leftItemMsg">
|
||||
<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
|
||||
</div>
|
||||
<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
|
||||
</div>
|
||||
<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
|
||||
</div>
|
||||
</div>
|
||||
@ -206,7 +206,7 @@
|
||||
<div v-if="active == 1" class="act2">
|
||||
|
||||
<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>
|
||||
@ -214,7 +214,7 @@
|
||||
|
||||
<div class="act2Item" v-for="itme in 3">
|
||||
<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 class="act2Item_right">
|
||||
<div class="act2Item_right_Name">约1.7~2.3斤/份 【软糯甜香】新鲜水果 玉米</div>
|
||||
@ -224,7 +224,7 @@
|
||||
|
||||
<div class="act2Item_right_Btn">
|
||||
<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>
|
||||
</div>
|
||||
@ -242,7 +242,7 @@
|
||||
<div v-if="active == 2" class="act2">
|
||||
|
||||
<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>
|
||||
@ -250,7 +250,7 @@
|
||||
|
||||
<div class="act2Item" v-for="itme in 3">
|
||||
<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 class="act2Item_right">
|
||||
<div class="act2Item_right_Name">约1.7~2.3斤/份 【软糯甜香】新鲜水果 玉米</div>
|
||||
@ -278,7 +278,7 @@
|
||||
<div v-if="active == 3" class="act4">
|
||||
<div class="act4Item" v-for="itme in 4">
|
||||
<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 class="act4Name">
|
||||
舒克小苏打牙膏(洁白细护)120G
|
||||
|
||||
@ -144,6 +144,9 @@ image {
|
||||
margin: 0 auto;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
.ads_first{
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
margin-top: 32rpx;
|
||||
@ -170,7 +173,7 @@ image {
|
||||
|
||||
.active2::after {
|
||||
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%;
|
||||
width: 52rpx;
|
||||
height: 22rpx;
|
||||
@ -297,3 +300,9 @@ image {
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.grid_Pic {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
@ -1,216 +1,518 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
||||
<div class="searchBox_add">
|
||||
<div class="emptyCommunity" @click="addCommunity">添加我的房产</div>
|
||||
<div class="MyCommunity" v-if="false">
|
||||
<div class="container">
|
||||
<div
|
||||
class="searchBox"
|
||||
:style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
|
||||
>
|
||||
<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"
|
||||
mode="aspectFill"></image>
|
||||
<span>惠生活</span>
|
||||
<u-icon name="arrow-down" color="#999999" size="28"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="swiperBox1">
|
||||
<swiper>
|
||||
<swiper-item>
|
||||
<image src="http://192.168.0.172:5500/test.png"></image>
|
||||
</swiper-item>
|
||||
<div class="swiperBox1">
|
||||
<swiper @animationfinish="swipers" autoplay circular>
|
||||
<swiper-item
|
||||
v-for="(item, index) in bannerList"
|
||||
:key="index"
|
||||
@click="headerServerClick(item)"
|
||||
>
|
||||
<image :src="item.ad_picture" mode="aspectFill" />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<swiper-item>
|
||||
<image src="http://192.168.0.172:5500/test.png"></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="dot">
|
||||
<view
|
||||
:class="['dotItem', currentIdx == index ? 'active' : '']"
|
||||
v-for="(item, index) in bannerList"
|
||||
:key="index"
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<div class="dot">
|
||||
<!-- <div class="dot">
|
||||
<div class="dotItem"></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 class="swiperBox2">
|
||||
<swiper>
|
||||
<swiper-item>
|
||||
<image src="http://192.168.0.172:5500/com_communityNav.png"></image>
|
||||
</swiper-item>
|
||||
<view class="funcList">
|
||||
<u-grid :col="rowNum" :border="false">
|
||||
<u-grid-item
|
||||
v-for="(item, index) in functionList"
|
||||
@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>
|
||||
<image src="http://192.168.0.172:5500/com_communityNav.png"></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, index) in tileList"
|
||||
:key="index"
|
||||
:class="['ads', index == 0 ? 'ads_first' : '']"
|
||||
@click="headerServerClick(item)"
|
||||
>
|
||||
<image :src="item.ad_picture" mode="aspectFill" />
|
||||
</div>
|
||||
|
||||
<div class="funcList">
|
||||
<div class="funcItem" v-for="item in functionList" @click="jump(item.link)">
|
||||
<image :src="item.url"></image>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<div
|
||||
v-for="(item, index) in categoryList"
|
||||
:key="index"
|
||||
:class="['tabItem', selectedTab === index ? 'active2' : '']"
|
||||
@click="selectTab(index, item)"
|
||||
>
|
||||
{{ item.category_name }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ads">
|
||||
<image src="http://192.168.0.172:5500/com_communityNav.png" mode="aspectFill"></image>
|
||||
</div>
|
||||
<div class="newsList">
|
||||
<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">
|
||||
<image src="http://192.168.0.172:5500/com_communityNav.png" mode="aspectFill"></image>
|
||||
</div>
|
||||
<div class="tips">下拉加载后续10条,共计30条</div>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="tabItem active2">物业公告</div>
|
||||
<div class="tabItem">天气</div>
|
||||
<div class="tabItem">放假时间</div>
|
||||
<div class="tabItem">送饭</div>
|
||||
</div>
|
||||
<div class="bigAds" v-if="ads1Show">
|
||||
<div class="bigAdsCon">
|
||||
<div class="bigAdsCon_img">
|
||||
<swiper @animationfinish="swipers" autoplay circular>
|
||||
<swiper-item
|
||||
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="newsItem" v-for="item in 4">
|
||||
<div class="newsItem_left">
|
||||
<div class="newsItem_left_tit">关于小区停车场治理通告</div>
|
||||
<div class="newsItem_left_sub">高尚</div>
|
||||
</div>
|
||||
<div class="newsItem_right">
|
||||
<image src="http://192.168.0.172:5500/test.png"></image>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tips">下拉加载后续10条,共计30条</div>
|
||||
|
||||
<div class="bigAds" v-if="ads1Show">
|
||||
<div class="bigAdsCon">
|
||||
<div class="bigAdsCon_img">
|
||||
<image src="http://192.168.0.172:5500/test.png"></image>
|
||||
</div>
|
||||
<div class="close" @click="closeAds">
|
||||
<image src="http://192.168.0.172:5500/com_close.png"></image>
|
||||
</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>
|
||||
<div class="bigAds" v-if="ads2Show">
|
||||
<div class="bigAdsCon2">
|
||||
<div class="bigAdsCon2_img">
|
||||
<swiper
|
||||
:current="currentSwiperIndex"
|
||||
@change="onSwiperChange"
|
||||
@animationfinish="swipers"
|
||||
autoplay
|
||||
circular
|
||||
>
|
||||
<swiper-item v-for="(item, index) in popList" :key="index">
|
||||
<image :src="item.ad_picture" mode="aspectFill" />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</div>
|
||||
<div class="AdsBtnList">
|
||||
<div class="AdsBtnItem1" @click="closeAds2">取消</div>
|
||||
<div class="AdsBtnItem2" @click="onDetailClick">了解详情</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav-footer :current="1" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
request,
|
||||
picUrl,
|
||||
uniqueByField,
|
||||
menuButtonInfo,
|
||||
NavgateTo
|
||||
} from '../../../utils';
|
||||
|
||||
import { apiArr } from '../../../api/v2Community';
|
||||
request,
|
||||
picUrl,
|
||||
uniqueByField,
|
||||
menuButtonInfo,
|
||||
NavgateTo,
|
||||
} from "../../../utils";
|
||||
|
||||
import { apiArr } from "../../../api/v2Community";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
picUrl,
|
||||
top: "",
|
||||
localHeight: "",
|
||||
queryPage: {
|
||||
page_num: 1,
|
||||
page_size: 10,
|
||||
},
|
||||
communityList: [],
|
||||
flag: false,
|
||||
data() {
|
||||
return {
|
||||
communityVal: "添加我的房产",
|
||||
picUrl,
|
||||
top: "",
|
||||
localHeight: "",
|
||||
queryPage: {
|
||||
page_num: 1,
|
||||
page_size: 10,
|
||||
},
|
||||
communityList: [],
|
||||
flag: false,
|
||||
|
||||
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",
|
||||
},
|
||||
],
|
||||
functionList: [],
|
||||
|
||||
ads1Show: false,
|
||||
ads2Show: false,
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
const meun = menuButtonInfo();
|
||||
this.top = meun.top;
|
||||
// this.top = meun.height + meun.top;
|
||||
this.localHeight = meun.height;
|
||||
// this.getCommunityList()
|
||||
},
|
||||
ads1Show: false,
|
||||
ads2Show: false,
|
||||
|
||||
bannerList: [], //轮播图广告
|
||||
currentIdx: 0,
|
||||
streamerList: [], //横幅广告
|
||||
tileList: [], //平铺广告
|
||||
largePopList: [], //巨幅弹屏广告
|
||||
popList: [], //弹屏广告
|
||||
categoryList: [],
|
||||
infoList: [],
|
||||
selectedTab: 0,
|
||||
currentAdIndex: 0,
|
||||
|
||||
methods: {
|
||||
desc() {
|
||||
NavgateTo("../communityDetail/index")
|
||||
},
|
||||
apply() {
|
||||
NavgateTo("../applyOwer/index")
|
||||
},
|
||||
closeAds() {
|
||||
this.ads1Show = false
|
||||
this.ads2Show = false
|
||||
},
|
||||
jump(e) {
|
||||
console.log(e);
|
||||
NavgateTo(e)
|
||||
},
|
||||
rowNum: 0,
|
||||
colNum: 0,
|
||||
|
||||
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
|
||||
// request(apiArr.getCommunityList, 'POST', {
|
||||
// page_num: that.queryPage.page_num,
|
||||
// page_size: that.queryPage.page_size,
|
||||
// user_id:""
|
||||
// }).then(res => {
|
||||
// console.log(res)
|
||||
// if (res.rows.length == that.queryPage.page_size) {
|
||||
// that.queryPage.page_num++
|
||||
// that.flag = true
|
||||
// that.communityList = that.communityList.concat(res.rows)
|
||||
// }else{
|
||||
// that.flag = false
|
||||
// that.communityList = that.communityList.concat(res.rows)
|
||||
// }
|
||||
// })
|
||||
// },
|
||||
},
|
||||
//上拉刷新
|
||||
onPullDownRefresh() {
|
||||
this.communityVal = uni.getStorageSync("changeCommData").name;
|
||||
this.bannerList = [];
|
||||
this.currentIdx = 0;
|
||||
this.streamerList = []; //横幅广告
|
||||
this.tileList = []; //平铺广告
|
||||
this.largePopList = []; //巨幅弹屏广告
|
||||
this.popList = []; //弹屏广告
|
||||
this.categoryList = [];
|
||||
this.infoList = [];
|
||||
this.selectedTab = 0;
|
||||
this.currentAdIndex = 0;
|
||||
this.getfunctionNum();
|
||||
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>
|
||||
|
||||
<style>
|
||||
|
||||
98
packages/community/myCommunity/index.css
Normal file
98
packages/community/myCommunity/index.css
Normal 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;
|
||||
}
|
||||
99
packages/community/myCommunity/index.vue
Normal file
99
packages/community/myCommunity/index.vue
Normal 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>
|
||||
@ -307,7 +307,7 @@ page {
|
||||
content: '';
|
||||
width: 52rpx;
|
||||
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;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
<div class="myRealEstate">
|
||||
<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="Visitor">访客身份 点击立即入驻本社区</div>
|
||||
</div>
|
||||
@ -25,7 +25,7 @@
|
||||
<div class="ConList">
|
||||
<div class="ConItem" v-for="item in 3" @click="desc">
|
||||
<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 class="ConItem_right">
|
||||
<div class="ConItem_right_tit">关于小区停车场治理通告</div>
|
||||
|
||||
@ -6,18 +6,11 @@
|
||||
</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="subTit">衡水繁花似锦物业管理有限公司 2025年6月6日10:37:27</div>
|
||||
<div class="Tit">{{Info.title}}</div>
|
||||
<div class="subTit">{{Info.author}} {{Info.publish_time}}</div>
|
||||
<div class="Con">
|
||||
再生资源回收是一项对我们社会和小区都有益的活动。通过回收再利用废纸、废金属、废塑料、废玻璃和废电子产品等再生资源,我们不仅可以保护环境,还能为我们的小区带来诸多好处。
|
||||
<rich-text :nodes="Info.content"></rich-text>
|
||||
</div>
|
||||
|
||||
</view>
|
||||
@ -25,15 +18,16 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
request,
|
||||
picUrl,
|
||||
uniqueByField,
|
||||
menuButtonInfo
|
||||
} from '../../../utils';
|
||||
import {
|
||||
request,
|
||||
picUrl,
|
||||
uniqueByField,
|
||||
menuButtonInfo,
|
||||
NavgateTo
|
||||
} from '../../../utils';
|
||||
import {
|
||||
apiArr
|
||||
} from '../../../api/community';
|
||||
} from '../../../api/v2Community';
|
||||
|
||||
|
||||
export default {
|
||||
@ -41,7 +35,8 @@ export default {
|
||||
return {
|
||||
top: "",
|
||||
localHeight: "",
|
||||
active: 0
|
||||
id:"",
|
||||
Info:""
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
@ -49,12 +44,20 @@ export default {
|
||||
this.top = meun.top;
|
||||
// this.top = meun.height + meun.top;
|
||||
this.localHeight = meun.height;
|
||||
this.id = options.id
|
||||
this.getInfo()
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
changeTab(index) {
|
||||
this.active = index;
|
||||
//公告详情
|
||||
getInfo(){
|
||||
request(apiArr.getAnnounceInfo,"POST",{
|
||||
id:Number(this.id)
|
||||
}).then(res=>{
|
||||
console.log(res);
|
||||
this.Info = res
|
||||
})
|
||||
},
|
||||
back() {
|
||||
uni.navigateBack({
|
||||
|
||||
@ -123,7 +123,7 @@ page {
|
||||
bottom: -2rpx;
|
||||
width: 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%;
|
||||
}
|
||||
|
||||
|
||||
@ -17,10 +17,7 @@
|
||||
|
||||
<div class="label">选择房源信息</div>
|
||||
<div class="roomList">
|
||||
<div :class="active == '1'?'roomItem active':'roomItem'" @click="changeAct(1)">1号楼1单位101</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 v-for="(item, index) in roomList" :key="index" :class="active == index ?'roomItem active':'roomItem'" @click="changeAct(index)">{{ item.name }}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
@ -48,7 +45,7 @@
|
||||
<div class="row">
|
||||
<div class="row_label">联系电话</div>
|
||||
<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>
|
||||
|
||||
@ -68,7 +65,7 @@
|
||||
<u-upload :fileList="imgList" name="imgList" @afterRead="afterReadImg" @delete="deletePic" multiple
|
||||
:maxCount="10">
|
||||
<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>
|
||||
</u-upload>
|
||||
@ -81,7 +78,7 @@
|
||||
<u-upload v-if="!videoList.url" :fileList="videoList" @afterRead="afterReadVideo" @delete="deleteVideo" name="videoList"
|
||||
:maxCount="1" accept="video">
|
||||
<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>
|
||||
</u-upload>
|
||||
@ -128,9 +125,10 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
picUrl,
|
||||
active:"1",
|
||||
active: 0,
|
||||
top: "",
|
||||
localHeight: "",
|
||||
roomList: [],
|
||||
columns: [],
|
||||
category: {}, // 保修类型信息
|
||||
repairInfo: '', // 问题描述
|
||||
@ -241,8 +239,8 @@ export default {
|
||||
title: '提交中'
|
||||
});
|
||||
const res = await request(apiArr.workOrderCrudCreat, 'POST', {
|
||||
"community_id": 1, // 所属小区ID
|
||||
"room_id": 1231, // 房源ID
|
||||
"community_id": uni.getStorageSync('changeCommData').id, // 所属小区ID
|
||||
"room_id": this.roomList[this.active].room_id, // 房源ID
|
||||
// "location": "具体位置", // 具体位置
|
||||
"order_category_id": this.category.id, // 报修类型ID
|
||||
"problem_description": this.repairInfo, // 问题描述
|
||||
@ -272,6 +270,8 @@ export default {
|
||||
uni.showLoading({
|
||||
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', {});
|
||||
uni.hideLoading();
|
||||
this.columns = res.rows;
|
||||
|
||||
@ -131,7 +131,7 @@ image {
|
||||
position: absolute;
|
||||
right: 8rpx;
|
||||
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%;
|
||||
}
|
||||
|
||||
@ -293,7 +293,9 @@ image {
|
||||
color: #FF370B;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.sucess{
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.boxshadow {
|
||||
background: rgba(0, 0, 0, 0.16);
|
||||
|
||||
@ -8,12 +8,13 @@
|
||||
|
||||
<div class="community">
|
||||
<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 class="community_right" @click="changeShow">
|
||||
<div class="community_right_text">
|
||||
<div class="community_right_text1">世纪名城1号楼1单元101室</div>
|
||||
<div class="community_right_text2">衡水市上海公馆6A</div>
|
||||
<div class="community_right_text1">{{ currentRoom.name }}</div>
|
||||
<div class="community_right_text2">{{ currentCommunityAddr }}</div>
|
||||
</div>
|
||||
<div class="community_right_more">
|
||||
<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>
|
||||
<div class="homeMoney_box_right">
|
||||
<div class="homeMoney_box_right1"><span>¥</span>9735.00</div>
|
||||
<div class="homeMoney_box_right2">
|
||||
<div class="homeMoney_box_right1"><span>¥</span>{{ balanceMoney }}</div>
|
||||
<div class="homeMoney_box_right2" @click="more">
|
||||
查看详情
|
||||
<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>
|
||||
@ -46,29 +47,32 @@
|
||||
</div>
|
||||
|
||||
<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_left">
|
||||
<checkbox value="1"></checkbox>
|
||||
<div style="margin-left: 24rpx;">2025年</div>
|
||||
<checkbox :checked="item.check" @click="checkChange(item, index)"></checkbox>
|
||||
<div style="margin-left: 24rpx;">{{ item.order_date }}年</div>
|
||||
</div>
|
||||
<div class="payItem_right">
|
||||
<span>¥</span>
|
||||
4900.00
|
||||
{{ item.unpaid_amount }}
|
||||
<p>未缴</p>
|
||||
|
||||
<div style="margin-left: 40rpx;">
|
||||
<u-icon bold color="#894B11" size="30" name="arrow-down" @click="back"></u-icon>
|
||||
<u-icon bold color="#894B11" size="30" name="arrow-up" @click="back" v-if="false"></u-icon>
|
||||
<div style="margin-left: 40rpx;" @click="changeCheck(item, index)">
|
||||
<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" v-if="item.more"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="payItem_List" v-for="item in 0">
|
||||
<checkbox value="1"></checkbox>
|
||||
<div class="Item_time">2025年</div>
|
||||
<div class="Item_type">车位管理费</div>
|
||||
<div class="Item_money">¥4500.00</div>
|
||||
<div class="Item_status">未付款</div>
|
||||
<div class="payItem_List" v-for="(items, indes) in item.community_order_rows" v-if="item.more"
|
||||
:key="items.order_id">
|
||||
<checkbox :checked="items.check" @click="itemsCheckChange(items, indes, index)"></checkbox>
|
||||
<div class="Item_time" v-if="items.billing_cycle == 1">{{ items.order_date }}年</div>
|
||||
<div class="Item_time" v-if="items.billing_cycle == 2">{{ items.order_datetime }}月</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>
|
||||
@ -78,7 +82,9 @@
|
||||
<div class="PayTypeItem">
|
||||
<div class="PayTypeItem_left">
|
||||
<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 class="PayTypeItem_con">
|
||||
<div class="PayTypeItem_con_tit">微信支付</div>
|
||||
@ -87,14 +93,16 @@
|
||||
</div>
|
||||
|
||||
<div class="PayTypeItem_right">
|
||||
<radio></radio>
|
||||
<radio :checked="payType == 1" @click="changePayType(1)"></radio>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line3"></div>
|
||||
<div class="PayTypeItem">
|
||||
<div class="PayTypeItem_left">
|
||||
<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 class="PayTypeItem_con">
|
||||
<div class="PayTypeItem_con_tit">物业公积金支付</div>
|
||||
@ -103,7 +111,7 @@
|
||||
</div>
|
||||
|
||||
<div class="PayTypeItem_right">
|
||||
<radio></radio>
|
||||
<radio :checked="payType == 2" @click="changePayType(2)"></radio>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -112,46 +120,46 @@
|
||||
<div class="bottom_left">
|
||||
<span>合计</span>
|
||||
<p>¥</p>
|
||||
4900.00
|
||||
{{ currentMoney }}
|
||||
</div>
|
||||
<div class="bottom_right">
|
||||
<div class="bottom_right" @click="OrderPay">
|
||||
立即支付
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<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_label">缴费金额</div>
|
||||
<div class="row_con1">¥53.1</div>
|
||||
<div class="row_con1">¥{{ item.money }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row_label2">刚刚</div>
|
||||
<div class="row_con2">2025-06-06 18:10支付</div>
|
||||
<div class="row_label2"></div>
|
||||
<div class="row_con2">{{ item.pay_time }}支付</div>
|
||||
</div>
|
||||
<div class="line4"></div>
|
||||
<div class="row">
|
||||
<div class="row_label">绑定房源</div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row_label">应缴费金额</div>
|
||||
<div class="row_con4">¥4704.00</div>
|
||||
<div class="row_con4">¥{{ item.money }}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row_label">物业费公积金抵扣金额</div>
|
||||
<div class="row_con4">-¥4704.00</div>
|
||||
<div class="row_con4">-¥{{ item.reduction_money }}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row_label">缴费单号</div>
|
||||
<div class="row_con4">25061700200003 </div>
|
||||
<div class="row_con4">{{ item.order_pay_no }} </div>
|
||||
</div>
|
||||
<div class="line4"></div>
|
||||
<div class="Receipt">收据</div>
|
||||
@ -168,8 +176,8 @@
|
||||
</div>
|
||||
<div class="lines"></div>
|
||||
<div class="communityList">
|
||||
<div class="communityItem" v-for="item in 8">
|
||||
<div class="communityItem_text">2323世纪名城1号楼1单元101室</div>
|
||||
<div class="communityItem" v-for="item in roomList" :key="item.room_id">
|
||||
<div class="communityItem_text">{{ item.facility_name }}{{ item.floor }} {{ item.number }}</div>
|
||||
<div class="communityItem_radio">
|
||||
<radio></radio>
|
||||
</div>
|
||||
@ -192,7 +200,9 @@
|
||||
<div class="BanlenceList">
|
||||
<div class="banlenceItem">
|
||||
<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 class="banlenceItem_right">
|
||||
@ -202,7 +212,9 @@
|
||||
<div class="line3"></div>
|
||||
<div class="banlenceItem">
|
||||
<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 class="banlenceItem_right">
|
||||
@ -229,6 +241,7 @@ import {
|
||||
picUrl,
|
||||
uniqueByField,
|
||||
menuButtonInfo,
|
||||
formatDate,
|
||||
NavgateTo
|
||||
} from '../../../utils';
|
||||
import {
|
||||
@ -241,9 +254,24 @@ export default {
|
||||
return {
|
||||
top: "",
|
||||
localHeight: "",
|
||||
active: 1,
|
||||
active: 0,
|
||||
show: 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) {
|
||||
@ -251,12 +279,20 @@ export default {
|
||||
this.top = meun.top;
|
||||
// this.top = meun.height + meun.top;
|
||||
this.localHeight = meun.height;
|
||||
this.currentCommunity = uni.getStorageSync('changeCommData')
|
||||
this.currentCommunityAddr = uni.getStorageSync("currentCommunityAddr")
|
||||
this.getRoomSelect()
|
||||
this.getUserGovenmentMoney()
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
changeTab(index) {
|
||||
this.active = index;
|
||||
if (index == 1) {
|
||||
this.page_num = 1
|
||||
this.getPayList()
|
||||
}
|
||||
},
|
||||
back() {
|
||||
uni.navigateBack({
|
||||
@ -269,6 +305,179 @@ export default {
|
||||
changeShow2() {
|
||||
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
|
||||
}
|
||||
//帮我计算所有Bill的的community_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")
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
145
packages/community/providentFund/index.scss
Normal file
145
packages/community/providentFund/index.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
187
packages/community/providentFund/index.vue
Normal file
187
packages/community/providentFund/index.vue
Normal 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>
|
||||
@ -57,7 +57,7 @@
|
||||
content: '';
|
||||
width: 52rpx;
|
||||
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;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
@ -168,3 +168,22 @@ page {
|
||||
margin: 0 auto;
|
||||
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;
|
||||
}
|
||||
|
||||
@ -1,18 +1,9 @@
|
||||
<template>
|
||||
<view class="box">
|
||||
<div
|
||||
class="searchBox"
|
||||
:style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
|
||||
>
|
||||
<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
||||
<div class="searchBox_add">
|
||||
<div class="searchBox_left">
|
||||
<u-icon
|
||||
bold
|
||||
color="#000"
|
||||
size="40"
|
||||
name="arrow-left"
|
||||
@click="back"
|
||||
></u-icon>
|
||||
<u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
|
||||
</div>
|
||||
<div class="searchBox_mid">我的报修</div>
|
||||
<div class="searchBox_right"></div>
|
||||
@ -20,33 +11,21 @@
|
||||
</div>
|
||||
|
||||
<div class="tabList">
|
||||
<div
|
||||
:class="active == 1 ? 'tab active' : 'tab'"
|
||||
@click="headerTabsClick(1)"
|
||||
>
|
||||
待指派 <span>({{awaitingNumb}})</span>
|
||||
<div :class="active == 1 ? 'tab active' : 'tab'" @click="headerTabsClick(1)">
|
||||
待指派 <span>({{ awaitingNumb }})</span>
|
||||
</div>
|
||||
<div
|
||||
:class="active == 2 ? 'tab active' : 'tab'"
|
||||
@click="headerTabsClick(2)"
|
||||
>
|
||||
<div :class="active == 2 ? 'tab active' : 'tab'" @click="headerTabsClick(2)">
|
||||
进行中 <span>({{ underwayNum }})</span>
|
||||
</div>
|
||||
<div
|
||||
:class="active == 4 ? 'tab active' : 'tab'"
|
||||
@click="headerTabsClick(4)"
|
||||
>
|
||||
<div :class="active == 4 ? 'tab active' : 'tab'" @click="headerTabsClick(4)">
|
||||
已作废 <span>({{ discardNum }})</span>
|
||||
</div>
|
||||
<div
|
||||
:class="active == 3 ? 'tab active' : 'tab'"
|
||||
@click="headerTabsClick(3)"
|
||||
>
|
||||
<div :class="active == 3 ? 'tab active' : 'tab'" @click="headerTabsClick(3)">
|
||||
已完成 <span>({{ doneNum }})</span>
|
||||
</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="['orderItemTit', statusType[item.status].style]">
|
||||
<div class="orderItemTit_left">工单编号:{{ item.order_code }}</div>
|
||||
@ -90,6 +69,12 @@
|
||||
</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>
|
||||
</view>
|
||||
</template>
|
||||
@ -107,11 +92,11 @@ export default {
|
||||
page_size: 10,
|
||||
flag: false, // 是否下拉请求接口
|
||||
list: [], // 列表数组
|
||||
awaitingNumb: '', // 待维修工单数量
|
||||
underwayNum: '', // 进行中工单数量
|
||||
doneNum: '', // 已完成工单数量
|
||||
discardNum: '', // 已废弃工单数量
|
||||
// 状态枚举类型
|
||||
awaitingNumb: '', // 待维修工单数量
|
||||
underwayNum: '', // 进行中工单数量
|
||||
doneNum: '', // 已完成工单数量
|
||||
discardNum: '', // 已废弃工单数量
|
||||
// 状态枚举类型
|
||||
statusType: {
|
||||
1: {
|
||||
desc: "待指派",
|
||||
@ -151,18 +136,18 @@ export default {
|
||||
this.page_num = 1;
|
||||
this.getTabsList();
|
||||
},
|
||||
async init() {
|
||||
const [awaitingNumb, underwayNum, doneNum, discardNum] = await Promise.all([
|
||||
this.awaitingRes(),
|
||||
this.underwayRes(),
|
||||
this.doneRes(),
|
||||
this.discardRes(),
|
||||
]);
|
||||
this.awaitingNumb = awaitingNumb;
|
||||
this.underwayNum = underwayNum;
|
||||
this.discardNum = discardNum;
|
||||
this.doneNum = doneNum;
|
||||
},
|
||||
async init() {
|
||||
const [awaitingNumb, underwayNum, doneNum, discardNum] = await Promise.all([
|
||||
this.awaitingRes(),
|
||||
this.underwayRes(),
|
||||
this.doneRes(),
|
||||
this.discardRes(),
|
||||
]);
|
||||
this.awaitingNumb = awaitingNumb;
|
||||
this.underwayNum = underwayNum;
|
||||
this.discardNum = discardNum;
|
||||
this.doneNum = doneNum;
|
||||
},
|
||||
async getTabsList() {
|
||||
const res = await request(apiArr.getWorkOrderCrudList, "POST", {
|
||||
status: this.active,
|
||||
@ -182,42 +167,48 @@ export default {
|
||||
this.page_num = this.page_num + 1;
|
||||
}
|
||||
},
|
||||
// 待维修工单数量
|
||||
async awaitingRes() {
|
||||
const res = await request(apiArr.getWorkOrderCrudList, "POST", {
|
||||
// 待维修工单数量
|
||||
async awaitingRes() {
|
||||
const res = await request(apiArr.getWorkOrderCrudList, "POST", {
|
||||
status: 1,
|
||||
page_num: this.page_num,
|
||||
page_size: this.page_size,
|
||||
});
|
||||
return res.total;
|
||||
},
|
||||
// 进行中工单数量
|
||||
async underwayRes() {
|
||||
const res = await request(apiArr.getWorkOrderCrudList, "POST", {
|
||||
return res.total;
|
||||
},
|
||||
// 进行中工单数量
|
||||
async underwayRes() {
|
||||
const res = await request(apiArr.getWorkOrderCrudList, "POST", {
|
||||
status: 2,
|
||||
page_num: this.page_num,
|
||||
page_size: this.page_size,
|
||||
});
|
||||
return res.total;
|
||||
},
|
||||
// 已废弃工单数量
|
||||
async discardRes() {
|
||||
const res = await request(apiArr.getWorkOrderCrudList, "POST", {
|
||||
return res.total;
|
||||
},
|
||||
// 已废弃工单数量
|
||||
async discardRes() {
|
||||
const res = await request(apiArr.getWorkOrderCrudList, "POST", {
|
||||
status: 3,
|
||||
page_num: this.page_num,
|
||||
page_size: this.page_size,
|
||||
});
|
||||
return res.total;
|
||||
},
|
||||
// 已完成工单数量
|
||||
async doneRes() {
|
||||
const res = await request(apiArr.getWorkOrderCrudList, "POST", {
|
||||
return res.total;
|
||||
},
|
||||
// 已完成工单数量
|
||||
async doneRes() {
|
||||
const res = await request(apiArr.getWorkOrderCrudList, "POST", {
|
||||
status: 4,
|
||||
page_num: this.page_num,
|
||||
page_size: this.page_size,
|
||||
});
|
||||
return res.total;
|
||||
},
|
||||
return res.total;
|
||||
},
|
||||
|
||||
back() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
@ -225,13 +216,21 @@ export default {
|
||||
this.top = meun.top;
|
||||
this.localHeight = meun.height;
|
||||
this.init();
|
||||
this.getTabsList();
|
||||
this.getTabsList();
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.flag) {
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
|
||||
onPullDownRefresh() {
|
||||
this.list = [];
|
||||
this.flag = false;
|
||||
this.page_num = 1;
|
||||
this.getTabsList();
|
||||
uni.stopPullDownRefresh();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -88,17 +88,17 @@
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
@ -75,128 +75,128 @@ export default {
|
||||
return {
|
||||
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: "业主入驻",
|
||||
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: "我的房产",
|
||||
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: "生活缴费",
|
||||
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: "便民服务",
|
||||
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: "物业公积金",
|
||||
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: "社区互动",
|
||||
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: "物业公积金",
|
||||
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: "物业服务",
|
||||
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: "报事报修",
|
||||
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: "物业缴费",
|
||||
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: "纠纷调解",
|
||||
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: "社区管家",
|
||||
url: ""
|
||||
},
|
||||
],
|
||||
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: "美食",
|
||||
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: "家教",
|
||||
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: "超市",
|
||||
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: "健身",
|
||||
url: ""
|
||||
},
|
||||
],
|
||||
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: "电商购物",
|
||||
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: "社区团购",
|
||||
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: "本地优选",
|
||||
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: "社区拼团",
|
||||
url: ""
|
||||
},
|
||||
],
|
||||
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: "我的积分",
|
||||
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: "积分兑换",
|
||||
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: "我的优惠卡",
|
||||
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: "我的会员卡",
|
||||
url: ""
|
||||
},
|
||||
|
||||
411
packages/homeServer/chooseMaster/index.css
Normal file
411
packages/homeServer/chooseMaster/index.css
Normal 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%;
|
||||
}
|
||||
296
packages/homeServer/chooseMaster/index.vue
Normal file
296
packages/homeServer/chooseMaster/index.vue
Normal 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>
|
||||
176
packages/homeServer/classify/index.css
Normal file
176
packages/homeServer/classify/index.css
Normal 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;
|
||||
}
|
||||
185
packages/homeServer/classify/index.vue
Normal file
185
packages/homeServer/classify/index.vue
Normal 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>
|
||||
397
packages/homeServer/index/index.css
Normal file
397
packages/homeServer/index/index.css
Normal 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%;
|
||||
}
|
||||
318
packages/homeServer/index/index.vue
Normal file
318
packages/homeServer/index/index.vue
Normal 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>
|
||||
504
packages/homeServer/masterInfo/index.css
Normal file
504
packages/homeServer/masterInfo/index.css
Normal 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;
|
||||
}
|
||||
417
packages/homeServer/masterInfo/index.vue
Normal file
417
packages/homeServer/masterInfo/index.vue
Normal 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>
|
||||
102
packages/homeServer/masterReview/index.css
Normal file
102
packages/homeServer/masterReview/index.css
Normal 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;
|
||||
}
|
||||
92
packages/homeServer/masterReview/index.vue
Normal file
92
packages/homeServer/masterReview/index.vue
Normal 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>
|
||||
20
packages/homeServer/noticeDetials/index.css
Normal file
20
packages/homeServer/noticeDetials/index.css
Normal 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;
|
||||
}
|
||||
50
packages/homeServer/noticeDetials/index.vue
Normal file
50
packages/homeServer/noticeDetials/index.vue
Normal 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>
|
||||
288
packages/homeServer/search/index.css
Normal file
288
packages/homeServer/search/index.css
Normal 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%;
|
||||
}
|
||||
265
packages/homeServer/search/index.vue
Normal file
265
packages/homeServer/search/index.vue
Normal 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>
|
||||
419
packages/homeServer/searchInfo/index.css
Normal file
419
packages/homeServer/searchInfo/index.css
Normal 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;
|
||||
}
|
||||
292
packages/homeServer/searchInfo/index.vue
Normal file
292
packages/homeServer/searchInfo/index.vue
Normal 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>
|
||||
189
packages/homeServer/serverInfo/index.css
Normal file
189
packages/homeServer/serverInfo/index.css
Normal 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 子项溢出 */
|
||||
}
|
||||
125
packages/homeServer/serverInfo/index.vue
Normal file
125
packages/homeServer/serverInfo/index.vue
Normal 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>
|
||||
0
packages/homeServer/serverList/index.css
Normal file
0
packages/homeServer/serverList/index.css
Normal file
46
packages/homeServer/serverList/index.vue
Normal file
46
packages/homeServer/serverList/index.vue
Normal 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
418
packages/homeServer/vendor/index.css
vendored
Normal 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
152
packages/homeServer/vendor/index.vue
vendored
Normal 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>
|
||||
419
packages/homeServer/vendorSearch/index.css
Normal file
419
packages/homeServer/vendorSearch/index.css
Normal 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;
|
||||
}
|
||||
234
packages/homeServer/vendorSearch/index.vue
Normal file
234
packages/homeServer/vendorSearch/index.vue
Normal 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>
|
||||
@ -34,7 +34,7 @@ image {
|
||||
}
|
||||
|
||||
.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-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@ -11,15 +11,15 @@
|
||||
<div class="point">{{banlance}}</div>
|
||||
<div class="funList">
|
||||
<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 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 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>
|
||||
|
||||
@ -3,14 +3,14 @@
|
||||
<div class="Msg">
|
||||
<div class="Msg_Tit">
|
||||
<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 :src="picUrl + info.user.avatar" v-if="info.user.avatar" mode="aspectFill"></image>
|
||||
{{ info.user.nick_name }}
|
||||
</div>
|
||||
<div class="Msg_Tit_right">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@ -22,21 +22,21 @@
|
||||
<div class="Msg_iconList">
|
||||
<div class="Msg_iconList_left">
|
||||
<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 }}
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
{{ info.merchant_evaluation_like_list ? info.merchant_evaluation_like_list.length : 0 }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="Msg_iconList_right">
|
||||
<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>
|
||||
@ -45,7 +45,7 @@
|
||||
<div class="reply" v-for="item in replyList">
|
||||
<div class="reply_tit">
|
||||
<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 :src="picUrl + item.user.avatar" v-if="item.user.avatar" mode="aspectFill"></image>
|
||||
{{ item.user.nick_name }}
|
||||
@ -58,7 +58,7 @@
|
||||
|
||||
<div class="comment">
|
||||
<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="说点什么">
|
||||
|
||||
<button id="send" @click="sendComment">发送</button>
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
<div class="startList">
|
||||
<div class="start" v-for="(item, index) in 5" :key="index" @click="setRating(index + 1)">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@ -55,7 +55,7 @@
|
||||
<u-upload v-if="active === 1 && videoList.length === 0" :fileList="videoList"
|
||||
@afterRead="afterReadVideo2" @delete="deletePic2" name="1" :maxCount="1" accept="video">
|
||||
<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>
|
||||
</u-upload>
|
||||
@ -64,7 +64,7 @@
|
||||
<video id="myVideo" :src="picUrl + videoList2[0].url" playsinline webkit-playsinline></video>
|
||||
<div class="mask" @click="playFullScreenVideo">
|
||||
<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 class="mask_cancel" @click="cancels">取消</div>
|
||||
</div>
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
<!-- <u-icon name="star-fill" color="#FFB84D" /> -->
|
||||
<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'"
|
||||
: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>
|
||||
|
||||
@ -46,13 +46,13 @@
|
||||
<div class="Msg">
|
||||
<div class="Msg_Tit">
|
||||
<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>
|
||||
{{ item.user.nick_name }}
|
||||
</div>
|
||||
<div class="Msg_Tit_right">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@ -64,14 +64,14 @@
|
||||
<div class="Msg_iconList">
|
||||
<div class="Msg_iconList_left">
|
||||
<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 }}
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
{{ item.merchant_evaluation_like_list ? item.merchant_evaluation_like_list.length : 0 }}
|
||||
</div>
|
||||
@ -89,11 +89,11 @@
|
||||
<view>导航</view>
|
||||
</view>
|
||||
<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 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>
|
||||
|
||||
@ -34,7 +34,7 @@ image {
|
||||
}
|
||||
|
||||
.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-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
<div class="row">
|
||||
<div class="row_label">消费用户</div>
|
||||
<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>
|
||||
|
||||
{{ item.user.nick_name }}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<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}}
|
||||
<u-icon name="arrow-down" color="#999999" size="28"></u-icon>
|
||||
</div>
|
||||
@ -9,7 +9,7 @@
|
||||
|
||||
<div class="search">
|
||||
<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="请输入您想搜索的内容">
|
||||
</div>
|
||||
</div>
|
||||
@ -36,9 +36,9 @@
|
||||
<!-- <scroll-view scroll-x="true" enhanced enable-flex class="scrollBox">
|
||||
<div class="scrollView">
|
||||
<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>
|
||||
<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>
|
||||
买单返物业费
|
||||
</div>
|
||||
@ -62,13 +62,13 @@
|
||||
<div class="merchantItem_right_con">
|
||||
<div class="merchantItem_right_con_left">
|
||||
<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 class="merchangtItem_tag" v-if="item.refund_property_fee_ratio">买单反物业费</div>
|
||||
<div class="merchangtItem_tag" v-if="item.refund_user_points_ratio">买单反积分</div>
|
||||
</div>
|
||||
<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>
|
||||
@ -81,12 +81,12 @@
|
||||
|
||||
<div class="btnList">
|
||||
<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 class="line"></div>
|
||||
<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>
|
||||
|
||||
@ -13,11 +13,13 @@ image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 20rpx;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.container {
|
||||
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-repeat: no-repeat; */
|
||||
}
|
||||
|
||||
@ -62,7 +62,7 @@
|
||||
<div class="line"></div>
|
||||
<div class="btnItem" @click="home">首页</div>
|
||||
<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>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<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 class="text1">支付成功</div>
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
<view class="discuss">
|
||||
<image
|
||||
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>
|
||||
</view>
|
||||
@ -49,7 +49,7 @@ export default {
|
||||
list: [
|
||||
{
|
||||
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: ["到家服务", "买单返物业费", "买单返物业费"],
|
||||
address: "苏州市太仓市城厢镇桃园三村11幢105市",
|
||||
distance: "898km",
|
||||
@ -57,7 +57,7 @@ export default {
|
||||
},
|
||||
{
|
||||
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: [ "买单返物业费"],
|
||||
address: "苏州市太仓市城厢镇桃园三村11幢105市",
|
||||
distance: "898km",
|
||||
|
||||
143
packages/myOrders/billInfo/index.css
Normal file
143
packages/myOrders/billInfo/index.css
Normal 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;
|
||||
}
|
||||
122
packages/myOrders/billInfo/index.vue
Normal file
122
packages/myOrders/billInfo/index.vue
Normal 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>
|
||||
67
packages/myOrders/freightBill/index.css
Normal file
67
packages/myOrders/freightBill/index.css
Normal 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;
|
||||
}
|
||||
62
packages/myOrders/freightBill/index.vue
Normal file
62
packages/myOrders/freightBill/index.vue
Normal 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>
|
||||
125
packages/myOrders/index/index.css
Normal file
125
packages/myOrders/index/index.css
Normal 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;
|
||||
}
|
||||
138
packages/myOrders/index/index.vue
Normal file
138
packages/myOrders/index/index.vue
Normal 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>
|
||||
163
packages/shop/addAddress/index.css
Normal file
163
packages/shop/addAddress/index.css
Normal 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;
|
||||
}
|
||||
350
packages/shop/addAddress/index.vue
Normal file
350
packages/shop/addAddress/index.vue
Normal 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>
|
||||
142
packages/shop/address/index.css
Normal file
142
packages/shop/address/index.css
Normal 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;
|
||||
}
|
||||
128
packages/shop/address/index.vue
Normal file
128
packages/shop/address/index.vue
Normal 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>
|
||||
371
packages/shop/goods/index.css
Normal file
371
packages/shop/goods/index.css
Normal 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;
|
||||
}
|
||||
434
packages/shop/goods/index.vue
Normal file
434
packages/shop/goods/index.vue
Normal 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>
|
||||
553
packages/shop/index/index.css
Normal file
553
packages/shop/index/index.css
Normal 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;
|
||||
}
|
||||
370
packages/shop/index/index.vue
Normal file
370
packages/shop/index/index.vue
Normal 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>
|
||||
228
packages/shop/search/index.css
Normal file
228
packages/shop/search/index.css
Normal 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;
|
||||
}
|
||||
128
packages/shop/search/index.vue
Normal file
128
packages/shop/search/index.vue
Normal 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>
|
||||
217
packages/shop/shopCar/index.css
Normal file
217
packages/shop/shopCar/index.css
Normal 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;
|
||||
}
|
||||
246
packages/shop/shopCar/index.vue
Normal file
246
packages/shop/shopCar/index.vue
Normal 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>
|
||||
199
packages/shop/submitOrder/index.css
Normal file
199
packages/shop/submitOrder/index.css
Normal 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%;
|
||||
}
|
||||
239
packages/shop/submitOrder/index.vue
Normal file
239
packages/shop/submitOrder/index.vue
Normal 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>
|
||||
@ -5,7 +5,7 @@ page {
|
||||
}
|
||||
|
||||
.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;
|
||||
box-sizing: border-box;
|
||||
padding-top: 290rpx;
|
||||
|
||||
@ -55,7 +55,7 @@
|
||||
<u-upload :fileList="imgList" @afterRead="afterReadImg" @delete="deletePic" name="1" multiple
|
||||
:maxCount="10">
|
||||
<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>
|
||||
</u-upload>
|
||||
@ -68,7 +68,7 @@
|
||||
<u-upload :fileList="imgList3" @afterRead="afterReadImg2" @delete="deletePic2" name="1" multiple
|
||||
:maxCount="10">
|
||||
<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>
|
||||
</u-upload>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user