Compare commits
No commits in common. "41ea48b154b39dfe041ca7818ecacca567cf3199" and "8fb714feef7d4528b78d2df274f099769bbf927a" have entirely different histories.
41ea48b154
...
8fb714feef
2
App.vue
2
App.vue
@ -34,7 +34,7 @@
|
|||||||
|
|
||||||
page{
|
page{
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
padding-bottom: 180rpx;
|
padding-bottom: 120rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uicon-volume {
|
.uicon-volume {
|
||||||
|
|||||||
62
README-zh.md
62
README-zh.md
@ -1,62 +0,0 @@
|
|||||||
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,6 +5,4 @@ export const apiArr = {
|
|||||||
|
|
||||||
getArea:"/api/v2/administrative-division/child-list",//新版获取省市区
|
getArea:"/api/v2/administrative-division/child-list",//新版获取省市区
|
||||||
getParArea:"/api/v2/administrative-division/info",//新版获取省市区
|
getParArea:"/api/v2/administrative-division/info",//新版获取省市区
|
||||||
|
|
||||||
getRegionList: '/api/v2/wechat/administrative-division-crud/list', // 行政区划信息分页
|
|
||||||
}
|
}
|
||||||
@ -1,47 +1,32 @@
|
|||||||
export const apiArr = {
|
export const apiArr = {
|
||||||
list: '/api/v1/wechat/community/list', // 获取社区列表
|
list: '/api/v1/wechat/community/list', // 获取社区列表
|
||||||
info: '/api/v1/wechat/community/info', // 获取单个社区信息
|
info: '/api/v1/wechat/community/info', // 获取单个社区信息
|
||||||
isJoin: '/api/v1/wechat/community/is-join', // 用户是否加入社区、楼宇、房间
|
isJoin: '/api/v1/wechat/community/is-join', // 用户是否加入社区、楼宇、房间
|
||||||
tipsList: '/api/v1/wechat/community/tips/list', // 获取全部通知列表
|
tipsList: '/api/v1/wechat/community/tips/list', // 获取全部通知列表
|
||||||
oneTips: '/api/v1/wechat/community/tips/one', // 获取单个社区通知
|
oneTips: '/api/v1/wechat/community/tips/one', // 获取单个社区通知
|
||||||
apply: '/api/v1/wechat/community/apply', // 申请加入小区
|
apply: '/api/v1/wechat/community/apply', // 申请加入小区
|
||||||
getFacilityList: '/api/v1/wechat/community/facility/list', //获取楼号，
|
getFacilityList:'/api/v1/wechat/community/facility/list', //获取楼号，
|
||||||
getRoomList: '/api/v1/wechat/community/room/list', //获取房间号
|
getRoomList:'/api/v1/wechat/community/room/list', //获取房间号
|
||||||
ownerList: '/api/v1/wechat/community/owner/list', // 获取社区业主列表
|
ownerList: '/api/v1/wechat/community/owner/list', // 获取社区业主列表
|
||||||
|
|
||||||
submit: "/api/v1/wechat/community/owner/feedback-create", //报修提交
|
submit:"/api/v1/wechat/community/owner/feedback-create", //报修提交
|
||||||
getListByRepair: "/api/v1/wechat/community/owner/feedback-list",//报事报修列表
|
getListByRepair:"/api/v1/wechat/community/owner/feedback-list",//报事报修列表
|
||||||
getInfoById: "/api/v1/wechat/community/owner/feedback-info", //报事报修根据id查询详情
|
getInfoById:"/api/v1/wechat/community/owner/feedback-info", //报事报修根据id查询详情
|
||||||
|
|
||||||
getUserCommunity: "/api/v1/wechat/community/owner/mylist",//获取用户社区信息
|
getUserCommunity:"/api/v1/wechat/community/owner/mylist",//获取用户社区信息
|
||||||
|
|
||||||
get_host_info: 'https://zhsq.hshuishang.com/Miniapi/Index/get_host_info',
|
get_host_info: 'https://zhsq.hshuishang.com/Miniapi/Index/get_host_info',
|
||||||
|
|
||||||
get_community_area_list: "https://zhsq.hshuishang.com/Miniapi/Community/get_community_area_list",
|
get_community_area_list:"https://zhsq.hshuishang.com/Miniapi/Community/get_community_area_list",
|
||||||
|
|
||||||
|
|
||||||
carList: '/api/v1/wechat/community/car/list', // 获取社区列表
|
carList: '/api/v1/wechat/community/car/list', // 获取社区列表
|
||||||
addCar: '/api/v1/wechat/community/car/add', // 添加车辆
|
addCar: '/api/v1/wechat/community/car/add', // 添加车辆
|
||||||
getCarList: '/api/v1/wechat/community/car/list', //获取车辆列表
|
getCarList: '/api/v1/wechat/community/car/list', //获取车辆列表
|
||||||
deleteItem: "/api/v1/wechat/community/car/del",//删除车牌
|
deleteItem: "/api/v1/wechat/community/car/del",//删除车牌
|
||||||
|
|
||||||
getBanner: "/api/v1/wechat/home-page/banner-list",//获取banner图
|
getBanner:"/api/v1/wechat/home-page/banner-list",//获取banner图
|
||||||
getButton: "/api/v1/wechat/home-page/button-list",//获取button
|
getButton:"/api/v1/wechat/home-page/button-list",//获取button
|
||||||
getHotWords: "/api/v1/wechat/home-page/search-hot-word/info",//搜索热词
|
getHotWords:"/api/v1/wechat/home-page/search-hot-word/info",//搜索热词
|
||||||
|
|
||||||
|
|
||||||
getAllList: "/api/v2/wechat/community/get-all-list",//获取小区信息列表
|
|
||||||
commRoomSelect: "/api/v2/wechat/community-room/comm-room-select",//房源筛选器
|
|
||||||
|
|
||||||
commInfo: "/api/v2/wechat/mpuser-crud/community-owner/info",//我的房产信息小区列表
|
|
||||||
create: "/api/v2/wechat/community-owners/create",//创建新的业主信息
|
|
||||||
|
|
||||||
|
|
||||||
getOrderList:"/api/v2/wechat/community-orders/get-all-list",//获取账单
|
|
||||||
getCommunityRoomList:"/api/v2/wechat/community-room/list", //获取房源列表
|
|
||||||
getUserGovenmentMoney:"/api/v2/wechat/government-housing-fund-flow-crud/user", //获取用户公积金
|
|
||||||
createPayOrder:"/api/v2/wechat/community-order-pay/create", //创建缴费
|
|
||||||
getPayOrderInfo:"/api/v2/wechat/community-order-pay/get-one", //根据缴费信息获取支付信息
|
|
||||||
getPayOrderList:"/api/v2/wechat/community-order-pay/get-page", //查询缴费记录
|
|
||||||
OrderPay:"/api/v2/wechat/community-order-pay/preorder",//预下单
|
|
||||||
};
|
};
|
||||||
@ -2,6 +2,5 @@ export const apiArr = {
|
|||||||
login: '/api/v1/wechat/multi-login', // 小程序登录
|
login: '/api/v1/wechat/multi-login', // 小程序登录
|
||||||
loginInfo: '/api/v1/wechat/mpusers/login-info', // 获取用户信息
|
loginInfo: '/api/v1/wechat/mpusers/login-info', // 获取用户信息
|
||||||
loginGetPhone: '/api/v1/wechat/mpusers/get-phone', // 获取用户手机号
|
loginGetPhone: '/api/v1/wechat/mpusers/get-phone', // 获取用户手机号
|
||||||
loginGetUserPhone: "/api/v2/wechat/mpusers/get-phone",
|
loginGetUserPhone:"/api/v2/wechat/mpusers/get-phone"
|
||||||
getCommunityList: '/api/v2/wechat/mpuser-crud/community-owner/info', // 我的房产信息小区列表
|
|
||||||
}
|
}
|
||||||
16
api/shop.js
16
api/shop.js
@ -1,16 +0,0 @@
|
|||||||
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,7 +1,6 @@
|
|||||||
export const apiArr = {
|
export const apiArr = {
|
||||||
getCommunityList:"/api/v2/wechat/community-room/list", //小区房源列表
|
getCommunityList:"/api/v2/wechat/community-room/list", //小区房源列表
|
||||||
getCommunityInfo:"/api/v2/wechat/community-room/info", //小区房源详情
|
getCommunityInfo:"/api/v2/wechat/community-room/info", //小区房源详情
|
||||||
workCommunityRoomList: '/api/v2/wechat/community-room/select', // 房源信息
|
|
||||||
workOrderCategoryCrudList: '/api/v2/wechat/work-order-category-crud/list', // 工单分类信息列表
|
workOrderCategoryCrudList: '/api/v2/wechat/work-order-category-crud/list', // 工单分类信息列表
|
||||||
workOrderCrudCreat: '/api/v2/wechat/work-order-crud/creat', // 报事报修工单信息创建
|
workOrderCrudCreat: '/api/v2/wechat/work-order-crud/creat', // 报事报修工单信息创建
|
||||||
getWorkOrderCrudList: '/api/v2/wechat/work-order-crud/page', // 报事报修工单信息分页
|
getWorkOrderCrudList: '/api/v2/wechat/work-order-crud/page', // 报事报修工单信息分页
|
||||||
@ -10,16 +9,4 @@ export const apiArr = {
|
|||||||
workOrderCrudDispatch: '/api/v2/wechat/work-order-crud/dispatch', // 人员派单
|
workOrderCrudDispatch: '/api/v2/wechat/work-order-crud/dispatch', // 人员派单
|
||||||
workOrderCrudAccept: '/api/v2/wechat/work-order-crud/accept', // 人员接单
|
workOrderCrudAccept: '/api/v2/wechat/work-order-crud/accept', // 人员接单
|
||||||
workOrderCrudUpdate: '/api/v2/wechat/work-order-crud/worker/update', // 工作人员更新工单
|
workOrderCrudUpdate: '/api/v2/wechat/work-order-crud/worker/update', // 工作人员更新工单
|
||||||
|
|
||||||
navPage: '/api/v2/wechat/community-navigation-crud/page', // 小区图标导航信息分页
|
|
||||||
advPage: '/api/v2/wechat/community-advertisement-crud/page', // 小区广告信息分页
|
|
||||||
|
|
||||||
commInfo: '/api/v2/wechat/nav-display-crud/comm/info', // 小区导航设置信息详情
|
|
||||||
|
|
||||||
categoryPage: '/api/v2/wechat/announcement-category-crud/page', // 公告分类信息分页
|
|
||||||
infoPage: '/api/v2/wechat/announcement-crud/page', // 公告信息分页
|
|
||||||
getAnnounceInfo:"/api/v2/wechat/announcement-crud/info" ,//公告详情
|
|
||||||
|
|
||||||
getGovernmentByRoom:"/api/v2/wechat/government-housing-fund-flow-crud/room", //根据房源获取公积金信息
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,161 +1,180 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<u-popup :show="show" closeOnClickOverlay round="20rpx" @close="onClose">
|
<u-popup
|
||||||
|
:show="show"
|
||||||
|
closeOnClickOverlay
|
||||||
|
round="20rpx"
|
||||||
|
@close="onClose"
|
||||||
|
>
|
||||||
<view>
|
<view>
|
||||||
<view class="popup_title">
|
<view class="popup_title">
|
||||||
<view class="popup_label" @click="onClose">取消</view>
|
<view class="popup_label" @click="onClose">取消</view>
|
||||||
<view class="popup_label color_blue" @click="onOk">确认</view>
|
<view class="popup_label color_blue" @click="onOk">确认</view>
|
||||||
</view>
|
</view>
|
||||||
<picker-view indicator-style="height: 50px;" style="width: 100%; height: 400rpx;" :value="id"
|
<picker-view indicator-style="height: 50px;" style="width: 100%; height: 400rpx;" :value="value" @change="bindChange">
|
||||||
@change="bindChange">
|
|
||||||
<picker-view-column>
|
<picker-view-column>
|
||||||
<view v-for="(item, index) in provList" :key="index"
|
<view v-for="(item, index) in provList" :key="index" style="line-height: 50px; text-align: center;">{{item.name}}</view>
|
||||||
style="line-height: 50px; text-align: center;">{{ item.short_name }}</view>
|
|
||||||
</picker-view-column>
|
</picker-view-column>
|
||||||
<picker-view-column>
|
<picker-view-column>
|
||||||
<view v-for="(item, index) in defaultCity" :key="index"
|
<view v-for="(item, index) in defaultCity" :key="index" style="line-height: 50px; text-align: center;">{{item.name}}</view>
|
||||||
style="line-height: 50px; text-align: center;">{{ item.short_name }}</view>
|
|
||||||
</picker-view-column>
|
</picker-view-column>
|
||||||
<picker-view-column>
|
<picker-view-column>
|
||||||
<view v-for="(item, index) in defaultDist" :key="index"
|
<view v-for="(item, index) in defaultDist" :key="index" style="line-height: 50px; text-align: center;">{{item.business_name}}</view>
|
||||||
style="line-height: 50px; text-align: center;">{{ item.short_name }}</view>
|
|
||||||
</picker-view-column>
|
</picker-view-column>
|
||||||
</picker-view>
|
</picker-view>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</u-popup>
|
</u-popup>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {
|
import {
|
||||||
apiArr
|
apiArr
|
||||||
} from '../../api/area';
|
} from '../../api/area';
|
||||||
import { request } from '../../utils';
|
import { request } from '../../utils';
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
show: {
|
show: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
required: true,
|
required: true,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
provList: [], // 省
|
provList: [], // 省
|
||||||
cityList: [], //市
|
cityList: [], //市
|
||||||
distList: [], // 区
|
distList: [], // 区
|
||||||
defaultCity: [], // 默认展示的市区数据
|
|
||||||
defaultDist: [], // 默认展示的县/区数据
|
defaultCity: [], // 默认展示的市区数据
|
||||||
confirmProv: {}, // 默认选中省
|
defaultDist: [], // 默认展示的县/区数据
|
||||||
confirmProv1: {},
|
|
||||||
confirmCity: {}, // 默认选中市
|
confirmProv: {}, // 默认选中省
|
||||||
confirmDist: {}, // 默认选中区/县
|
confirmCity: {}, // 默认选中市
|
||||||
|
confirmDist: {}, // 默认选中区/县
|
||||||
sf: true,
|
}
|
||||||
xsq: {},
|
|
||||||
value2: '',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
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 getCityList(sq, x) {
|
// 获取省份信息
|
||||||
console.log('11swq', sq);
|
async getProvList () {
|
||||||
if (!this.sf) {
|
const res = await request(apiArr.city, 'POST', {}, { silent: false });
|
||||||
console.log('省份没变，查市跟区', this.cityList)
|
return res;
|
||||||
let newDist = this.cityList[sq];
|
},
|
||||||
console.log('新的市信息', newDist);
|
|
||||||
if (this.xsq.ad_code !== newDist.ad_code) {
|
// 获取市区信息
|
||||||
console.log('新市区跟旧市区不一直')
|
async getCityList () {
|
||||||
this.xsq = newDist;
|
const res = await request(apiArr.area, 'POST', {}, { silent: false });
|
||||||
this.getDistList(newDist, x);
|
return res;
|
||||||
} else {
|
},
|
||||||
console.log('新市区跟旧市区一直');
|
|
||||||
this.confirmDist = this.defaultDist[x]
|
// 获取 县/区 信息
|
||||||
|
async getDistList () {
|
||||||
|
const res = await request(apiArr.business, 'POST', {}, { silent: false });
|
||||||
|
return res;
|
||||||
|
},
|
||||||
|
|
||||||
|
async init() {
|
||||||
|
uni.showLoading({
|
||||||
|
title: '加载中',
|
||||||
|
mask: true
|
||||||
|
});
|
||||||
|
try {
|
||||||
|
const proviceList = uni.getStorageSync('proviceList');
|
||||||
|
const cityList = uni.getStorageSync('cityList');
|
||||||
|
const businessList = uni.getStorageSync('businessList');
|
||||||
|
let provRes, cityRes, distRes;
|
||||||
|
|
||||||
|
// 有缓存数据时不进行接口数据请求
|
||||||
|
if (proviceList || cityList || businessList) {
|
||||||
|
provRes = {
|
||||||
|
rows: proviceList
|
||||||
|
};
|
||||||
|
cityRes = {
|
||||||
|
rows: cityList
|
||||||
|
};
|
||||||
|
distRes = {
|
||||||
|
rows: businessList
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
[provRes, cityRes, distRes] = await Promise.all([
|
||||||
|
this.getProvList(),
|
||||||
|
this.getCityList(),
|
||||||
|
this.getDistList(),
|
||||||
|
])
|
||||||
|
// 无缓存时 缓存省市区数据
|
||||||
|
uni.setStorageSync('proviceList',provRes.rows)
|
||||||
|
uni.setStorageSync('cityList',cityRes.rows)
|
||||||
|
uni.setStorageSync('businessList',distRes.rows)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
uni.hideLoading();
|
||||||
|
// 默认展示第一条数据 的市区 和 城区
|
||||||
|
let defaultCity = cityRes.rows.filter((item) => {
|
||||||
|
return item.city_id === provRes.rows[0].city_id
|
||||||
|
});
|
||||||
|
let defaultDist = distRes.rows.filter((item) => {
|
||||||
|
return item.area_id === cityRes.rows[0].area_id
|
||||||
|
});
|
||||||
|
|
||||||
|
this.provList = provRes?.rows; // 全部省信息
|
||||||
|
this.cityList = cityRes?.rows; // 全部市信息
|
||||||
|
this.distList = distRes?.rows; // 全部区信息
|
||||||
|
|
||||||
|
this.defaultCity = defaultCity; // 默认展示 市区
|
||||||
|
this.defaultDist = defaultDist; // 默认展示 县/区
|
||||||
|
|
||||||
|
this.confirmProv = provRes.rows[0];
|
||||||
|
this.confirmCity = defaultCity[0];
|
||||||
|
this.confirmDist = defaultDist[0];
|
||||||
|
} catch (error) {
|
||||||
|
uni.hideLoading();
|
||||||
|
console.log('获取省市区信息异常', error);
|
||||||
}
|
}
|
||||||
return
|
},
|
||||||
}
|
|
||||||
const res = await request(apiArr.getArea, 'POST', { parent_ad_code: this.confirmProv1.ad_code }, { silent: false });
|
// 切换省市区时联动改变参数值
|
||||||
this.cityList = res.rows;
|
bindChange (e) {
|
||||||
let newDist;
|
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});
|
||||||
|
},
|
||||||
|
|
||||||
this.defaultCity = res.rows;
|
|
||||||
this.confirmCity = res.rows[0]; // 拿市的第一条区查区
|
|
||||||
this.getDistList(newDist, x);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// 获取 县/区 信息
|
mounted() {
|
||||||
async getDistList(xsq, x) {
|
this.init();
|
||||||
const res = await request(apiArr.getArea, 'POST', { parent_ad_code: xsq ? xsq.ad_code : this.confirmCity.ad_code }, { silent: false });
|
|
||||||
this.distList = res.rows;
|
|
||||||
this.defaultDist = res.rows;
|
|
||||||
this.confirmDist = res.rows[0] // 区的第一条信息
|
|
||||||
},
|
},
|
||||||
async init() {
|
}
|
||||||
uni.showLoading({
|
|
||||||
title: '加载中',
|
|
||||||
mask: true
|
|
||||||
});
|
|
||||||
try {
|
|
||||||
this.getProvList()
|
|
||||||
uni.hideLoading();
|
|
||||||
} catch (error) {
|
|
||||||
uni.hideLoading();
|
|
||||||
console.log('获取省市区信息异常', error);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 切换省市区时联动改变参数值
|
|
||||||
bindChange(e) {
|
|
||||||
console.log('[1231331], e', e);
|
|
||||||
const { value } = e.detail;
|
|
||||||
// // 每次切换时，根据当前点击的省过滤出所属市区，并且变化县/区
|
|
||||||
let newCrty = this.provList[value[0]];
|
|
||||||
console.log('新的省份信息', newCrty);
|
|
||||||
console.log('旧的省信息', this.confirmProv1);
|
|
||||||
if (newCrty.ad_code === this.confirmProv1.ad_code) {
|
|
||||||
console.log('省份信息没变');
|
|
||||||
this.sf = false;
|
|
||||||
} else {
|
|
||||||
this.sf = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
console.log('this.cityListthis.cityList', this.cityList);
|
|
||||||
this.confirmProv1 = newCrty
|
|
||||||
this.getCityList(value[1], value[2])
|
|
||||||
},
|
|
||||||
|
|
||||||
// 关闭弹窗
|
|
||||||
onClose() {
|
|
||||||
this.$emit('close');
|
|
||||||
},
|
|
||||||
|
|
||||||
// 点击确定传递当前选中省市区信息给父方法
|
|
||||||
onOk() {
|
|
||||||
const { confirmProv1, confirmProv, xsq, confirmCity, confirmDist } = this;
|
|
||||||
this.$emit('selectArea', { confirmProv: confirmProv1, confirmCity: xsq.ad_name ? xsq : confirmCity, confirmDist });
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
this.init();
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@import url('./areaPopup.css');
|
@import url('./areaPopup.css');
|
||||||
</style>
|
</style>
|
||||||
@ -29,32 +29,32 @@
|
|||||||
return {
|
return {
|
||||||
navList: [
|
navList: [
|
||||||
{
|
{
|
||||||
photo:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_home.png",
|
photo:"http://192.168.0.172:5500/footer_home.png",
|
||||||
photoAc:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_homeAc.png",
|
photoAc:"http://192.168.0.172:5500/footer_homeAc.png",
|
||||||
nav_name:"首页",
|
nav_name:"首页",
|
||||||
url:"/pages/index/index"
|
url:"/pages/index/index"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
photo:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_community.png",
|
photo:"http://192.168.0.172:5500/footer_community.png",
|
||||||
photoAc:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_communityAc.png",
|
photoAc:"http://192.168.0.172:5500/footer_communityAc.png",
|
||||||
nav_name:"我的小区",
|
nav_name:"我的小区",
|
||||||
url:"/packages/community/index/index"
|
url:"/packages/community/index/index"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
photo:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_shop.png",
|
photo:"http://192.168.0.172:5500/footer_shop.png",
|
||||||
photoAc:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_shopAc.png",
|
photoAc:"http://192.168.0.172:5500/footer_shopAc.png",
|
||||||
nav_name:"优选商城",
|
nav_name:"优选商城",
|
||||||
url:"/packages/shop/index/index"
|
url:""
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
photo:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_door.png",
|
photo:"http://192.168.0.172:5500/footer_door.png",
|
||||||
photoAc:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_communityAc.png",
|
photoAc:"http://192.168.0.172:5500/footer_doorAc.png",
|
||||||
nav_name:"到家服务",
|
nav_name:"上门服务",
|
||||||
url:"/packages/homeServer/index/index"
|
url:""
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
photo:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_mine.png",
|
photo:"http://192.168.0.172:5500/footer_mine.png",
|
||||||
photoAc:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_mineAc.png",
|
photoAc:"http://192.168.0.172:5500/footer_mineAc.png",
|
||||||
nav_name:"我的",
|
nav_name:"我的",
|
||||||
url:"/pages/user/index"
|
url:"/pages/user/index"
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,74 +0,0 @@
|
|||||||
# 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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
效果图
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,378 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,90 +0,0 @@
|
|||||||
<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,8 +19,7 @@
|
|||||||
/* 模块配置 */
|
/* 模块配置 */
|
||||||
"modules" : {
|
"modules" : {
|
||||||
"Payment" : {},
|
"Payment" : {},
|
||||||
"OAuth" : {},
|
"OAuth" : {}
|
||||||
"Share" : {}
|
|
||||||
},
|
},
|
||||||
/* 应用发布信息 */
|
/* 应用发布信息 */
|
||||||
"distribute" : {
|
"distribute" : {
|
||||||
@ -52,7 +51,7 @@
|
|||||||
"appleiap" : {},
|
"appleiap" : {},
|
||||||
"weixin" : {
|
"weixin" : {
|
||||||
"__platform__" : [ "ios", "android" ],
|
"__platform__" : [ "ios", "android" ],
|
||||||
"appid" : "wxb4018c78fa143450",
|
"appid" : "",
|
||||||
"UniversalLinks" : ""
|
"UniversalLinks" : ""
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -61,12 +60,6 @@
|
|||||||
"appid" : "wxb4018c78fa143450",
|
"appid" : "wxb4018c78fa143450",
|
||||||
"UniversalLinks" : ""
|
"UniversalLinks" : ""
|
||||||
}
|
}
|
||||||
},
|
|
||||||
"share" : {
|
|
||||||
"weixin" : {
|
|
||||||
"appid" : "wxb4018c78fa143450",
|
|
||||||
"UniversalLinks" : ""
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,6 +3,7 @@
|
|||||||
"sass-loader": "^16.0.5"
|
"sass-loader": "^16.0.5"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"pinyin-pro": "^3.26.0",
|
||||||
"sass": "^1.89.2",
|
"sass": "^1.89.2",
|
||||||
"uview-ui": "^2.0.38"
|
"uview-ui": "^2.0.38"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,385 +0,0 @@
|
|||||||
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;
|
|
||||||
}
|
|
||||||
@ -1,98 +0,0 @@
|
|||||||
<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,99 +1,69 @@
|
|||||||
page {
|
.main {
|
||||||
background-color: #fff;
|
margin: 50rpx 80rpx 69rpx;
|
||||||
|
}
|
||||||
display: flex;
|
.table {
|
||||||
flex-direction: column;
|
height: 150rpx;
|
||||||
}
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
.line {
|
flex-direction: column;
|
||||||
height: 20rpx;
|
border-bottom: 1px solid #ebebeb;
|
||||||
width: 100%;
|
}
|
||||||
background-color: #f6f7fb;
|
.label {
|
||||||
}
|
font-weight: bold;
|
||||||
.main{
|
font-size: 32rpx;
|
||||||
margin: 0 80rpx;
|
color: #000000;
|
||||||
padding-top: 26rpx;
|
margin-bottom: 20rpx;
|
||||||
}
|
}
|
||||||
|
.tip {
|
||||||
.table {
|
margin-top: 20rpx;
|
||||||
display: flex;
|
font-weight: bold;
|
||||||
justify-content: center;
|
font-size: 26rpx;
|
||||||
flex-direction: column;
|
color: #999999;
|
||||||
border-bottom: 1px solid #ebebeb;
|
}
|
||||||
box-sizing: border-box;
|
.btn {
|
||||||
margin-bottom: 50rpx;
|
margin: 0 75rpx 0;
|
||||||
padding-bottom: 8rpx;
|
height: 90rpx;
|
||||||
}
|
line-height: 90rpx;
|
||||||
|
background: linear-gradient(91deg, #ff7658 0%, #ff370b 100%);
|
||||||
.label {
|
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||||
font-size: 32rpx;
|
font-weight: 600;
|
||||||
color: #000000;
|
font-size: 36rpx;
|
||||||
margin-bottom: 20rpx;
|
color: #ffffff;
|
||||||
}
|
text-align: center;
|
||||||
|
}
|
||||||
.tip {
|
.popup_container {
|
||||||
margin-top: 20rpx;
|
margin: 0 55rpx;
|
||||||
font-size: 26rpx;
|
}
|
||||||
color: #999999;
|
.popup_title {
|
||||||
}
|
margin-top: 53rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
.btn {
|
color: #222222;
|
||||||
margin: 0 75rpx 0;
|
}
|
||||||
height: 90rpx;
|
.popup_community_name {
|
||||||
line-height: 90rpx;
|
margin: 10rpx 0 14rpx;
|
||||||
background: linear-gradient(91deg, #ff7658 0%, #ff370b 100%);
|
text-align: center;
|
||||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
font-weight: bold;
|
||||||
font-weight: 600;
|
font-size: 30rpx;
|
||||||
font-size: 36rpx;
|
color: #ff370b;
|
||||||
color: #ffffff;
|
}
|
||||||
text-align: center;
|
.popup_desc {
|
||||||
margin-top: 280rpx;
|
font-weight: bold;
|
||||||
}
|
font-size: 26rpx;
|
||||||
|
color: #222222;
|
||||||
.popup_container {
|
margin-bottom: 40rpx;
|
||||||
margin: 0 55rpx;
|
}
|
||||||
}
|
.popup_btn_List {
|
||||||
|
display: flex;
|
||||||
.popup_title {
|
justify-content: space-around;
|
||||||
margin-top: 53rpx;
|
}
|
||||||
font-size: 26rpx;
|
.popup_btn {
|
||||||
color: #222222;
|
width: 170rpx;
|
||||||
}
|
height: 52rpx;
|
||||||
|
line-height: 52rpx;
|
||||||
.popup_community_name {
|
text-align: center;
|
||||||
margin: 10rpx 0 14rpx;
|
background: #d9d9d9;
|
||||||
text-align: center;
|
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||||
font-weight: bold;
|
}
|
||||||
font-size: 30rpx;
|
.popup_btn1 {
|
||||||
color: #ff370b;
|
background: #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;
|
|
||||||
line-height: 52rpx;
|
|
||||||
text-align: center;
|
|
||||||
background: #d9d9d9;
|
|
||||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup_btn1 {
|
|
||||||
background: #ff370b;
|
|
||||||
}
|
|
||||||
.flexBox{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|||||||
@ -1,153 +1,127 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<div class="line"></div>
|
<view class="main">
|
||||||
<view class="main">
|
<view class="table">
|
||||||
<view class="table">
|
<view class="label">小区名称</view>
|
||||||
<view class="label">房产</view>
|
<input type="text" placeholder="请输入小区名称" :value='name' data-name="name" @input="headerInputClick">
|
||||||
<view class="flexBox" @click="choseCommunity">
|
</view>
|
||||||
<input type="text" v-model="changeComm" disabled placeholder="请选择房产">
|
<view class="table">
|
||||||
<u-icon name="arrow-right"></u-icon>
|
<view class="label">物业公司</view>
|
||||||
</view>
|
<input type="text" placeholder="请输入物业公司全称" :value='managementName' data-name="managementName" @input="headerInputClick">
|
||||||
</view>
|
</view>
|
||||||
<view class="table">
|
<view class="table">
|
||||||
<view class="label">姓名</view>
|
<view class="label">小区地址</view>
|
||||||
<input type="text" v-model="nameVal" placeholder="请输入姓名">
|
<input type="text" placeholder="请输入小区地址" :value='addr' data-name="addr" @input="headerInputClick">
|
||||||
</view>
|
</view>
|
||||||
<view class="table">
|
<view class="table">
|
||||||
<view class="label">手机</view>
|
<view class="label">物业服务电话</view>
|
||||||
<input type="text" v-model="phoneVal" placeholder="请输入手机号">
|
<input type="number" placeholder="请输入物业服务电话" :maxlength=11 :value='managementMobile' data-name="managementMobile" @input="headerInputClick">
|
||||||
</view>
|
</view>
|
||||||
<view class="table">
|
<view class="tip">
|
||||||
<view class="label">身份</view>
|
注意:新建的小区平台会与物业进行核实，核实后自动建立。如核实未通过，将会创建失败!
|
||||||
|
|
||||||
<view class="flexBox" @click="chooseIdentity">
|
|
||||||
<input type="number" v-model="selectedLabel" disabled placeholder="请选择身份">
|
|
||||||
<u-icon name="arrow-right"></u-icon>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
</view>
|
|
||||||
<!-- <view class="tip">
|
|
||||||
注意：业主为在物业登记在册的人员，需经过物业审 核确认后，即可成为该房产的业主。如需帮助可与物 业或平台联系。
|
|
||||||
</view> -->
|
|
||||||
</view>
|
</view>
|
||||||
<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>
|
</view>
|
||||||
|
<view class="btn" @click="headerSubmitClick">确定</view>
|
||||||
|
|
||||||
|
<u-popup :show="show" @close="close" mode="center" customStyle="width: 500rpx;" round="20rpx">
|
||||||
|
<view class="popup_container">
|
||||||
|
<view class="popup_title">您是要创建：</view>
|
||||||
|
<view class="popup_community_name">{{ name }}</view>
|
||||||
|
<view class="popup_desc">新建的小区平台会与物业进行核实，核实后自动建立。如核实未通过，将会创建失败!</view>
|
||||||
|
<view class="popup_btn_List">
|
||||||
|
<view class="popup_btn" @click="headerCloseClick">取消</view>
|
||||||
|
<view class="popup_btn popup_btn1" @click="headerPopupSubmitClick">确定</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {
|
import { request,NavgateTo, isPhone } from '../../../utils';
|
||||||
request,
|
import { apiArr } from '../../../api/community';
|
||||||
NavgateTo,
|
export default {
|
||||||
isPhone
|
data() {
|
||||||
} from '../../../utils';
|
return {
|
||||||
import {
|
name: '',
|
||||||
apiArr
|
managementName: '',
|
||||||
} from '../../../api/community';
|
addr: '',
|
||||||
export default {
|
managementMobile: '',
|
||||||
onBackPress(options) {
|
show: false,
|
||||||
console.log('from:' + options.from)
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
headerPopupSubmitClick () {
|
||||||
|
console.log('提交');
|
||||||
|
|
||||||
},
|
},
|
||||||
data() {
|
headerCloseClick() {
|
||||||
return {
|
this.show = false;
|
||||||
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) {
|
headerInputClick(e) {
|
||||||
const {
|
const { name } = e.currentTarget.dataset;
|
||||||
name
|
const { value } = e.detail;
|
||||||
} = e.currentTarget.dataset;
|
this[name] = value;
|
||||||
const {
|
},
|
||||||
value
|
|
||||||
} = e.detail;
|
headerSubmitClick() {
|
||||||
this[name] = value;
|
if(!this.name) {
|
||||||
},
|
uni.showToast({
|
||||||
async headerSubmitClick() {
|
title: '请输入小区名称',
|
||||||
await request(apiArr.create, "POST", {
|
icon: 'none'
|
||||||
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")
|
|
||||||
})
|
})
|
||||||
},
|
return;
|
||||||
choseCommunity() {
|
}
|
||||||
NavgateTo("/packages/community/choseCommunity/index")
|
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) {
|
||||||
|
|
||||||
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) : ''
|
|
||||||
},
|
|
||||||
|
|
||||||
onReachBottom() {
|
onReachBottom() {
|
||||||
|
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@import url("./index.css");
|
@import url("./index.css");
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
<view class="container">
|
<view class="container">
|
||||||
|
|
||||||
<div class="userAva">
|
<div class="userAva">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg1.png" alt="" mode="aspectFill" />
|
<image src="http://192.168.0.172:5500/com_MsgImg1.png" alt="" mode="aspectFill" />
|
||||||
</div>
|
</div>
|
||||||
<div class="Name">MarrekoZhang</div>
|
<div class="Name">MarrekoZhang</div>
|
||||||
|
|
||||||
|
|||||||
@ -1,14 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<div class="searchBox">
|
<div class="searchBox">
|
||||||
<img src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png" alt="" />
|
<img src="http://192.168.0.172:5500/com_communitySearchIcon.png" alt="" />
|
||||||
<input placeholder="请输入小区名称" type="text">
|
<input placeholder="请输入小区名称" type="text">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="communityList">
|
<div class="communityList">
|
||||||
<div class="communityItem" v-for="(item, index) in 5" :key="index" @click="chooseCommunityInfo">
|
<div class="communityItem" v-for="(item, index) in 5" :key="index" @click="chooseCommunityInfo">
|
||||||
<div class="communityItem_img">
|
<div class="communityItem_img">
|
||||||
<img src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_act2Img.png" alt="" />
|
<img src="http://192.168.0.172:5500/com_act2Img.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="communityItem_msg">
|
<div class="communityItem_msg">
|
||||||
@ -21,8 +21,8 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="communityItem_msg_more">
|
<div class="communityItem_msg_more">
|
||||||
<img src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png" alt="" />
|
<img src="http://192.168.0.172:5500/com_check1.png" alt="" />
|
||||||
<!-- <img src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png" alt="" /> -->
|
<!-- <img src="http://192.168.0.172:5500/com_check2.png" alt="" /> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -7,7 +7,7 @@
|
|||||||
<div class="communityList">
|
<div class="communityList">
|
||||||
<div class="communityItem">
|
<div class="communityItem">
|
||||||
<div class="communityItem_img">
|
<div class="communityItem_img">
|
||||||
<image mode="aspectFill" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_act2Img.png" alt="" />
|
<image mode="aspectFill" src="http://192.168.0.172:5500/com_act2Img.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="communityItem_msg">
|
<div class="communityItem_msg">
|
||||||
@ -20,7 +20,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="communityItem_msg_more">
|
<div class="communityItem_msg_more">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communityMore.png" alt="" />
|
<image src="http://192.168.0.172:5500/com_communityMore.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,288 +0,0 @@
|
|||||||
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;
|
|
||||||
}
|
|
||||||
@ -1,285 +0,0 @@
|
|||||||
<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 {
|
.tabItem1 {
|
||||||
background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_tabBg1.png);
|
background: url(http://192.168.0.172:5500/com_tabBg1.png);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabItem2 {
|
.tabItem2 {
|
||||||
background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_tabBg2.png);
|
background: url(http://192.168.0.172:5500/com_tabBg2.png);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabItem3 {
|
.tabItem3 {
|
||||||
background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_tabBg3.png);
|
background: url(http://192.168.0.172:5500/com_tabBg3.png);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -470,7 +470,7 @@ page {
|
|||||||
content: '';
|
content: '';
|
||||||
width: 52rpx;
|
width: 52rpx;
|
||||||
height: 22rpx;
|
height: 22rpx;
|
||||||
background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_active.png);
|
background: url(http://192.168.0.172:5500/com_active.png);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
|
|||||||
@ -2,57 +2,57 @@
|
|||||||
<view class="container">
|
<view class="container">
|
||||||
<view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
<view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
||||||
<view class="searchBox_add">
|
<view class="searchBox_add">
|
||||||
<img src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communityIcon.png" alt="" />
|
<img src="http://192.168.0.172:5500/com_communityIcon.png" alt="" />
|
||||||
我的房产
|
我的房产
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<div class="myRealEstate">
|
<div class="myRealEstate">
|
||||||
<div class="myRealEstates">
|
<div class="myRealEstates">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communityNav.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/com_communityNav.png" mode="aspectFill"></image>
|
||||||
<div class="name">滏阳锦苑</div>
|
<div class="name">滏阳锦苑</div>
|
||||||
<div class="Visitor">访客身份 点击立即入驻本社区</div>
|
<div class="Visitor">访客身份 点击立即入驻本社区</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="Announcement">
|
<div class="Announcement">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_Announcement.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/com_Announcement.png" mode="aspectFill"></image>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div class="msg" @click="notice">
|
<div class="msg" @click="notice">
|
||||||
<div>asdasdasd</div>
|
<div>asdasdasd</div>
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_more.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/com_more.png" mode="aspectFill"></image>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="navList">
|
<div class="navList">
|
||||||
<div class="navItem">
|
<div class="navItem">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_NavIcon1.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/com_NavIcon1.png" mode="aspectFill"></image>
|
||||||
物业服务
|
物业服务
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="navItem" @click="repair">
|
<div class="navItem" @click="repair">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_NavIcon2.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/com_NavIcon2.png" mode="aspectFill"></image>
|
||||||
在线报修
|
在线报修
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="navItem" @click="propertyPayment">
|
<div class="navItem" @click="propertyPayment">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_NavIcon3.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/com_NavIcon3.png" mode="aspectFill"></image>
|
||||||
物业缴费
|
物业缴费
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="navItem">
|
<div class="navItem">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_NavIcon4.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/com_NavIcon4.png" mode="aspectFill"></image>
|
||||||
物业公积
|
物业公积
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="navItem">
|
<div class="navItem">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_NavIcon5.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/com_NavIcon5.png" mode="aspectFill"></image>
|
||||||
社区管家
|
社区管家
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="navItem" @click="mores">
|
<div class="navItem" @click="mores">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_NavIconMore.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/com_NavIconMore.png" mode="aspectFill"></image>
|
||||||
更多
|
更多
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -78,7 +78,7 @@
|
|||||||
|
|
||||||
<div class="nearbyList">
|
<div class="nearbyList">
|
||||||
<div class="emptys" v-if="false">
|
<div class="emptys" v-if="false">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_nearbyList_empty.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/com_nearbyList_empty.png" mode="aspectFill"></image>
|
||||||
周边暂无补贴公积金商家
|
周边暂无补贴公积金商家
|
||||||
|
|
||||||
<div class="emptysBtn">
|
<div class="emptysBtn">
|
||||||
@ -88,21 +88,21 @@
|
|||||||
|
|
||||||
<div class="nearbyList_left">
|
<div class="nearbyList_left">
|
||||||
<div class="nearbyList_leftItem">
|
<div class="nearbyList_leftItem">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_nearbyImg1.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/com_nearbyImg1.png" mode="aspectFill"></image>
|
||||||
</div>
|
</div>
|
||||||
<div class="nearbyList_leftItem">
|
<div class="nearbyList_leftItem">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_nearbyImg1.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/com_nearbyImg1.png" mode="aspectFill"></image>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="nearbyList_right">
|
<div class="nearbyList_right">
|
||||||
<div class="nearbyList_rightItem">
|
<div class="nearbyList_rightItem">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_nearbyImg2.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/com_nearbyImg2.png" mode="aspectFill"></image>
|
||||||
</div>
|
</div>
|
||||||
<div class="nearbyList_rightItem">
|
<div class="nearbyList_rightItem">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_nearbyImg2.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/com_nearbyImg2.png" mode="aspectFill"></image>
|
||||||
</div>
|
</div>
|
||||||
<div class="nearbyList_rightItem">
|
<div class="nearbyList_rightItem">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_nearbyImg2.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/com_nearbyImg2.png" mode="aspectFill"></image>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -124,7 +124,7 @@
|
|||||||
|
|
||||||
<div v-if="active == 0" class="act1">
|
<div v-if="active == 0" class="act1">
|
||||||
<div class="empty" >
|
<div class="empty" >
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_empty.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/com_empty.png" mode="aspectFill"></image>
|
||||||
暂无信息
|
暂无信息
|
||||||
|
|
||||||
<div class="emptyAdd">发布社区互动信息</div>
|
<div class="emptyAdd">发布社区互动信息</div>
|
||||||
@ -133,20 +133,20 @@
|
|||||||
<div class="MsgList_left" v-if="false">
|
<div class="MsgList_left" v-if="false">
|
||||||
<div class="MsgList_leftItem">
|
<div class="MsgList_leftItem">
|
||||||
<div class="MsgList_leftItemImg">
|
<div class="MsgList_leftItemImg">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg1.png" mode="widthFix"></image>
|
<image src="http://192.168.0.172:5500/com_MsgImg1.png" mode="widthFix"></image>
|
||||||
</div>
|
</div>
|
||||||
<div class="MsgList_leftItemName">我家的小猫丢了，谁看见了请联系我~</div>
|
<div class="MsgList_leftItemName">我家的小猫丢了，谁看见了请联系我~</div>
|
||||||
<div class="MsgList_leftItemMsg">
|
<div class="MsgList_leftItemMsg">
|
||||||
<div class="MsgList_leftItemMsg_like">
|
<div class="MsgList_leftItemMsg_like">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_likeIcon.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/com_likeIcon.png" mode="aspectFill"></image>
|
||||||
134
|
134
|
||||||
</div>
|
</div>
|
||||||
<div class="MsgList_leftItemMsg_like">
|
<div class="MsgList_leftItemMsg_like">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_comIcon.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/com_comIcon.png" mode="aspectFill"></image>
|
||||||
134
|
134
|
||||||
</div>
|
</div>
|
||||||
<div class="MsgList_leftItemMsg_like">
|
<div class="MsgList_leftItemMsg_like">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_shareIcon.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/com_shareIcon.png" mode="aspectFill"></image>
|
||||||
134
|
134
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -156,7 +156,7 @@
|
|||||||
<div class="MsgList_right" v-if="false">
|
<div class="MsgList_right" v-if="false">
|
||||||
<div class="MsgList_rightItem">
|
<div class="MsgList_rightItem">
|
||||||
<div class="MsgList_rightItemImg">
|
<div class="MsgList_rightItemImg">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg2.png" mode="widthFix"></image>
|
<image src="http://192.168.0.172:5500/com_MsgImg2.png" mode="widthFix"></image>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="MsgList_rightItemName">
|
<div class="MsgList_rightItemName">
|
||||||
@ -165,15 +165,15 @@
|
|||||||
|
|
||||||
<div class="MsgList_leftItemMsg">
|
<div class="MsgList_leftItemMsg">
|
||||||
<div class="MsgList_leftItemMsg_like">
|
<div class="MsgList_leftItemMsg_like">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_likeIcon.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/com_likeIcon.png" mode="aspectFill"></image>
|
||||||
134
|
134
|
||||||
</div>
|
</div>
|
||||||
<div class="MsgList_leftItemMsg_like">
|
<div class="MsgList_leftItemMsg_like">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_comIcon.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/com_comIcon.png" mode="aspectFill"></image>
|
||||||
134
|
134
|
||||||
</div>
|
</div>
|
||||||
<div class="MsgList_leftItemMsg_like">
|
<div class="MsgList_leftItemMsg_like">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_shareIcon.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/com_shareIcon.png" mode="aspectFill"></image>
|
||||||
134
|
134
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -187,15 +187,15 @@
|
|||||||
|
|
||||||
<div class="MsgList_leftItemMsg">
|
<div class="MsgList_leftItemMsg">
|
||||||
<div class="MsgList_leftItemMsg_like">
|
<div class="MsgList_leftItemMsg_like">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_likeIcon.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/com_likeIcon.png" mode="aspectFill"></image>
|
||||||
134
|
134
|
||||||
</div>
|
</div>
|
||||||
<div class="MsgList_leftItemMsg_like">
|
<div class="MsgList_leftItemMsg_like">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_comIcon.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/com_comIcon.png" mode="aspectFill"></image>
|
||||||
134
|
134
|
||||||
</div>
|
</div>
|
||||||
<div class="MsgList_leftItemMsg_like">
|
<div class="MsgList_leftItemMsg_like">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_shareIcon.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/com_shareIcon.png" mode="aspectFill"></image>
|
||||||
134
|
134
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -206,7 +206,7 @@
|
|||||||
<div v-if="active == 1" class="act2">
|
<div v-if="active == 1" class="act2">
|
||||||
|
|
||||||
<div class="empty" >
|
<div class="empty" >
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_empty.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/com_empty.png" mode="aspectFill"></image>
|
||||||
暂无信息
|
暂无信息
|
||||||
|
|
||||||
<div class="emptyAdd">发布社区互动信息</div>
|
<div class="emptyAdd">发布社区互动信息</div>
|
||||||
@ -214,7 +214,7 @@
|
|||||||
|
|
||||||
<div class="act2Item" v-for="itme in 3">
|
<div class="act2Item" v-for="itme in 3">
|
||||||
<div class="act2Item_left">
|
<div class="act2Item_left">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_act2Img.png" mode="widthFix"></image>
|
<image src="http://192.168.0.172:5500/com_act2Img.png" mode="widthFix"></image>
|
||||||
</div>
|
</div>
|
||||||
<div class="act2Item_right">
|
<div class="act2Item_right">
|
||||||
<div class="act2Item_right_Name">约1.7~2.3斤/份 【软糯甜香】新鲜水果 玉米</div>
|
<div class="act2Item_right_Name">约1.7~2.3斤/份 【软糯甜香】新鲜水果 玉米</div>
|
||||||
@ -224,7 +224,7 @@
|
|||||||
|
|
||||||
<div class="act2Item_right_Btn">
|
<div class="act2Item_right_Btn">
|
||||||
<div class="act2Item_right_Btn_left">
|
<div class="act2Item_right_Btn_left">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_act2Ms.png" mode="widthFix"></image>
|
<image src="http://192.168.0.172:5500/com_act2Ms.png" mode="widthFix"></image>
|
||||||
￥
|
￥
|
||||||
<span>5.58</span>
|
<span>5.58</span>
|
||||||
</div>
|
</div>
|
||||||
@ -242,7 +242,7 @@
|
|||||||
<div v-if="active == 2" class="act2">
|
<div v-if="active == 2" class="act2">
|
||||||
|
|
||||||
<div class="empty" >
|
<div class="empty" >
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_empty.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/com_empty.png" mode="aspectFill"></image>
|
||||||
暂无信息
|
暂无信息
|
||||||
|
|
||||||
<div class="emptyAdd">发布社区互动信息</div>
|
<div class="emptyAdd">发布社区互动信息</div>
|
||||||
@ -250,7 +250,7 @@
|
|||||||
|
|
||||||
<div class="act2Item" v-for="itme in 3">
|
<div class="act2Item" v-for="itme in 3">
|
||||||
<div class="act2Item_left">
|
<div class="act2Item_left">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_act2Img.png" mode="widthFix"></image>
|
<image src="http://192.168.0.172:5500/com_act2Img.png" mode="widthFix"></image>
|
||||||
</div>
|
</div>
|
||||||
<div class="act2Item_right">
|
<div class="act2Item_right">
|
||||||
<div class="act2Item_right_Name">约1.7~2.3斤/份 【软糯甜香】新鲜水果 玉米</div>
|
<div class="act2Item_right_Name">约1.7~2.3斤/份 【软糯甜香】新鲜水果 玉米</div>
|
||||||
@ -278,7 +278,7 @@
|
|||||||
<div v-if="active == 3" class="act4">
|
<div v-if="active == 3" class="act4">
|
||||||
<div class="act4Item" v-for="itme in 4">
|
<div class="act4Item" v-for="itme in 4">
|
||||||
<div class="act4Img">
|
<div class="act4Img">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_act2Img.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/com_act2Img.png" mode="aspectFill"></image>
|
||||||
</div>
|
</div>
|
||||||
<div class="act4Name">
|
<div class="act4Name">
|
||||||
舒克小苏打牙膏（洁白细护）120G
|
舒克小苏打牙膏（洁白细护）120G
|
||||||
|
|||||||
@ -144,9 +144,6 @@ image {
|
|||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
margin-top: 40rpx;
|
margin-top: 40rpx;
|
||||||
}
|
}
|
||||||
.ads_first{
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabs {
|
.tabs {
|
||||||
margin-top: 32rpx;
|
margin-top: 32rpx;
|
||||||
@ -173,7 +170,7 @@ image {
|
|||||||
|
|
||||||
.active2::after {
|
.active2::after {
|
||||||
content: '';
|
content: '';
|
||||||
background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_active.png) no-repeat;
|
background: url(http://192.168.0.172:5500/com_active.png) no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
width: 52rpx;
|
width: 52rpx;
|
||||||
height: 22rpx;
|
height: 22rpx;
|
||||||
@ -299,10 +296,4 @@ image {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 36rpx;
|
font-size: 36rpx;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
}
|
|
||||||
|
|
||||||
.grid_Pic {
|
|
||||||
width: 100rpx;
|
|
||||||
height: 100rpx;
|
|
||||||
margin-bottom: 16rpx;
|
|
||||||
}
|
}
|
||||||
@ -1,518 +1,216 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div
|
<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
||||||
class="searchBox"
|
<div class="searchBox_add">
|
||||||
:style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
|
<div class="emptyCommunity" @click="addCommunity">添加我的房产</div>
|
||||||
>
|
<div class="MyCommunity" v-if="false">
|
||||||
<div class="searchBox_add">
|
|
||||||
<div class="emptyCommunity" @click="addCommunity">
|
|
||||||
{{ communityVal }}
|
|
||||||
</div>
|
|
||||||
<!-- <div class="MyCommunity" v-if="false">
|
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/community_mycommunity.png"
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/community_mycommunity.png"
|
||||||
mode="aspectFill"></image>
|
mode="aspectFill"></image>
|
||||||
<span>惠生活</span>
|
<span>惠生活</span>
|
||||||
<u-icon name="arrow-down" color="#999999" size="28"></u-icon>
|
<u-icon name="arrow-down" color="#999999" size="28"></u-icon>
|
||||||
</div> -->
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="swiperBox1">
|
<div class="swiperBox1">
|
||||||
<swiper @animationfinish="swipers" autoplay circular>
|
<swiper>
|
||||||
<swiper-item
|
<swiper-item>
|
||||||
v-for="(item, index) in bannerList"
|
<image src="http://192.168.0.172:5500/test.png"></image>
|
||||||
:key="index"
|
</swiper-item>
|
||||||
@click="headerServerClick(item)"
|
|
||||||
>
|
|
||||||
<image :src="item.ad_picture" mode="aspectFill" />
|
|
||||||
</swiper-item>
|
|
||||||
</swiper>
|
|
||||||
|
|
||||||
<view class="dot">
|
<swiper-item>
|
||||||
<view
|
<image src="http://192.168.0.172:5500/test.png"></image>
|
||||||
:class="['dotItem', currentIdx == index ? 'active' : '']"
|
</swiper-item>
|
||||||
v-for="(item, index) in bannerList"
|
</swiper>
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- <div class="dot">
|
<div class="dot">
|
||||||
<div class="dotItem"></div>
|
<div class="dotItem"></div>
|
||||||
<div class="dotItem active"></div>
|
<div class="dotItem active"></div>
|
||||||
</div> -->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="swiperBox2">
|
|
||||||
<swiper @animationfinish="swipers" autoplay circular>
|
|
||||||
<swiper-item
|
|
||||||
v-for="(item, index) in streamerList"
|
|
||||||
:key="index"
|
|
||||||
@click="headerServerClick(item)"
|
|
||||||
>
|
|
||||||
<image :src="item.ad_picture" mode="aspectFill" />
|
|
||||||
</swiper-item>
|
|
||||||
</swiper>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- <div class="funcList">
|
|
||||||
<div class="funcItem" v-for="item in functionList" @click="jump(item.mini_program_url)">
|
|
||||||
<image :src="item.nav_icon"></image>
|
|
||||||
{{ item.nav_name }}
|
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div>
|
||||||
|
|
||||||
<view class="funcList">
|
<div class="swiperBox2">
|
||||||
<u-grid :col="rowNum" :border="false">
|
<swiper>
|
||||||
<u-grid-item
|
<swiper-item>
|
||||||
v-for="(item, index) in functionList"
|
<image src="http://192.168.0.172:5500/com_communityNav.png"></image>
|
||||||
@click="jump(item.mini_program_url)"
|
</swiper-item>
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<image class="grid_Pic" :src="item.nav_icon" mode=""></image>
|
|
||||||
<text>{{ item.nav_name }}</text>
|
|
||||||
</u-grid-item>
|
|
||||||
</u-grid>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<div
|
<swiper-item>
|
||||||
v-for="(item, index) in tileList"
|
<image src="http://192.168.0.172:5500/com_communityNav.png"></image>
|
||||||
:key="index"
|
</swiper-item>
|
||||||
:class="['ads', index == 0 ? 'ads_first' : '']"
|
</swiper>
|
||||||
@click="headerServerClick(item)"
|
</div>
|
||||||
>
|
|
||||||
<image :src="item.ad_picture" mode="aspectFill" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tabs">
|
<div class="funcList">
|
||||||
<div
|
<div class="funcItem" v-for="item in functionList" @click="jump(item.link)">
|
||||||
v-for="(item, index) in categoryList"
|
<image :src="item.url"></image>
|
||||||
:key="index"
|
{{ item.name }}
|
||||||
:class="['tabItem', selectedTab === index ? 'active2' : '']"
|
</div>
|
||||||
@click="selectTab(index, item)"
|
</div>
|
||||||
>
|
|
||||||
{{ item.category_name }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="newsList">
|
<div class="ads">
|
||||||
<div
|
<image src="http://192.168.0.172:5500/com_communityNav.png" mode="aspectFill"></image>
|
||||||
class="newsItem"
|
</div>
|
||||||
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="tips">下拉加载后续10条，共计30条</div>
|
<div class="ads">
|
||||||
|
<image src="http://192.168.0.172:5500/com_communityNav.png" mode="aspectFill"></image>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="bigAds" v-if="ads1Show">
|
<div class="tabs">
|
||||||
<div class="bigAdsCon">
|
<div class="tabItem active2">物业公告</div>
|
||||||
<div class="bigAdsCon_img">
|
<div class="tabItem">天气</div>
|
||||||
<swiper @animationfinish="swipers" autoplay circular>
|
<div class="tabItem">放假时间</div>
|
||||||
<swiper-item
|
<div class="tabItem">送饭</div>
|
||||||
v-for="(item, index) in largePopList"
|
</div>
|
||||||
: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="bigAds" v-if="ads2Show">
|
<div class="newsList">
|
||||||
<div class="bigAdsCon2">
|
<div class="newsItem" v-for="item in 4">
|
||||||
<div class="bigAdsCon2_img">
|
<div class="newsItem_left">
|
||||||
<swiper
|
<div class="newsItem_left_tit">关于小区停车场治理通告</div>
|
||||||
:current="currentSwiperIndex"
|
<div class="newsItem_left_sub">高尚</div>
|
||||||
@change="onSwiperChange"
|
</div>
|
||||||
@animationfinish="swipers"
|
<div class="newsItem_right">
|
||||||
autoplay
|
<image src="http://192.168.0.172:5500/test.png"></image>
|
||||||
circular
|
</div>
|
||||||
>
|
</div>
|
||||||
<swiper-item v-for="(item, index) in popList" :key="index">
|
</div>
|
||||||
<image :src="item.ad_picture" mode="aspectFill" />
|
|
||||||
</swiper-item>
|
<div class="tips">下拉加载后续10条，共计30条</div>
|
||||||
</swiper>
|
|
||||||
</div>
|
<div class="bigAds" v-if="ads1Show">
|
||||||
<div class="AdsBtnList">
|
<div class="bigAdsCon">
|
||||||
<div class="AdsBtnItem1" @click="closeAds2">取消</div>
|
<div class="bigAdsCon_img">
|
||||||
<div class="AdsBtnItem2" @click="onDetailClick">了解详情</div>
|
<image src="http://192.168.0.172:5500/test.png"></image>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="close" @click="closeAds">
|
||||||
</div>
|
<image src="http://192.168.0.172:5500/com_close.png"></image>
|
||||||
<nav-footer :current="1" />
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bigAds" v-if="ads2Show">
|
||||||
|
<div class="bigAdsCon2">
|
||||||
|
<div class="bigAdsCon2_img">
|
||||||
|
<image src="http://192.168.0.172:5500/test.png"></image>
|
||||||
|
</div>
|
||||||
|
<div class="AdsBtnList">
|
||||||
|
<div class="AdsBtnItem1" @click="closeAds">取消</div>
|
||||||
|
<div class="AdsBtnItem2">了解详情</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nav-footer :current="1"/>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {
|
import {
|
||||||
request,
|
request,
|
||||||
picUrl,
|
picUrl,
|
||||||
uniqueByField,
|
uniqueByField,
|
||||||
menuButtonInfo,
|
menuButtonInfo,
|
||||||
NavgateTo,
|
NavgateTo
|
||||||
} from "../../../utils";
|
} from '../../../utils';
|
||||||
|
|
||||||
|
import { apiArr } from '../../../api/v2Community';
|
||||||
|
|
||||||
import { apiArr } from "../../../api/v2Community";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
communityVal: "添加我的房产",
|
picUrl,
|
||||||
picUrl,
|
top: "",
|
||||||
top: "",
|
localHeight: "",
|
||||||
localHeight: "",
|
queryPage: {
|
||||||
queryPage: {
|
page_num: 1,
|
||||||
page_num: 1,
|
page_size: 10,
|
||||||
page_size: 10,
|
},
|
||||||
},
|
communityList: [],
|
||||||
communityList: [],
|
flag: false,
|
||||||
flag: false,
|
|
||||||
|
|
||||||
functionList: [],
|
functionList: [
|
||||||
|
{
|
||||||
|
name: "报事报修",
|
||||||
|
link: "",
|
||||||
|
url: "http://192.168.0.172:5500/com_homeIcon1.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "物业缴费",
|
||||||
|
link: "/packages/community/propertyPayment/index",
|
||||||
|
url: "http://192.168.0.172:5500/com_homeIcon2.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "物业公积",
|
||||||
|
link: "",
|
||||||
|
url: "http://192.168.0.172:5500/com_homeIcon3.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "物业公积",
|
||||||
|
link: "",
|
||||||
|
url: "http://192.168.0.172:5500/com_homeIcon4.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "物业服务",
|
||||||
|
link: "",
|
||||||
|
url: "http://192.168.0.172:5500/com_homeIcon5.png",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
ads1Show: false,
|
||||||
|
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: [], //轮播图广告
|
methods: {
|
||||||
currentIdx: 0,
|
desc() {
|
||||||
streamerList: [], //横幅广告
|
NavgateTo("../communityDetail/index")
|
||||||
tileList: [], //平铺广告
|
},
|
||||||
largePopList: [], //巨幅弹屏广告
|
apply() {
|
||||||
popList: [], //弹屏广告
|
NavgateTo("../applyOwer/index")
|
||||||
categoryList: [],
|
},
|
||||||
infoList: [],
|
closeAds() {
|
||||||
selectedTab: 0,
|
this.ads1Show = false
|
||||||
currentAdIndex: 0,
|
this.ads2Show = false
|
||||||
|
},
|
||||||
|
jump(e) {
|
||||||
|
console.log(e);
|
||||||
|
NavgateTo(e)
|
||||||
|
},
|
||||||
|
|
||||||
rowNum: 0,
|
addCommunity(){
|
||||||
colNum: 0,
|
|
||||||
|
},
|
||||||
|
|
||||||
page_size: 10,
|
// getCommunityList() {
|
||||||
page_num: 1,
|
// let that = this
|
||||||
flag: false,
|
// request(apiArr.getCommunityList, 'POST', {
|
||||||
};
|
// page_num: that.queryPage.page_num,
|
||||||
},
|
// page_size: that.queryPage.page_size,
|
||||||
async onLoad(options) {
|
// user_id:""
|
||||||
const meun = menuButtonInfo();
|
// }).then(res => {
|
||||||
this.top = meun.top;
|
// console.log(res)
|
||||||
// this.top = meun.height + meun.top;
|
// if (res.rows.length == that.queryPage.page_size) {
|
||||||
this.localHeight = meun.height;
|
// that.queryPage.page_num++
|
||||||
// this.getCommunityList()
|
// that.flag = true
|
||||||
if (!uni.getStorageSync("changeCommData").id) {
|
// that.communityList = that.communityList.concat(res.rows)
|
||||||
uni.setStorageSync("changeCommData", { name: "森呼吸二期", id: 14 });
|
// }else{
|
||||||
}
|
// that.flag = false
|
||||||
|
// that.communityList = that.communityList.concat(res.rows)
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
|
||||||
this.communityVal = uni.getStorageSync("changeCommData").name;
|
|
||||||
this.getfunctionNum();
|
|
||||||
this.getAdvertising();
|
|
||||||
this.getCategoryList();
|
|
||||||
},
|
|
||||||
|
|
||||||
//上拉刷新
|
}
|
||||||
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>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
@ -1,98 +0,0 @@
|
|||||||
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;
|
|
||||||
}
|
|
||||||
@ -1,99 +0,0 @@
|
|||||||
<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: '';
|
content: '';
|
||||||
width: 52rpx;
|
width: 52rpx;
|
||||||
height: 22rpx;
|
height: 22rpx;
|
||||||
background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_active.png);
|
background: url(http://192.168.0.172:5500/com_active.png);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
|
|||||||
@ -8,7 +8,7 @@
|
|||||||
|
|
||||||
<div class="myRealEstate">
|
<div class="myRealEstate">
|
||||||
<div class="myRealEstates">
|
<div class="myRealEstates">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communityNav.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/com_communityNav.png" mode="aspectFill"></image>
|
||||||
<div class="name">滏阳锦苑</div>
|
<div class="name">滏阳锦苑</div>
|
||||||
<div class="Visitor">访客身份 点击立即入驻本社区</div>
|
<div class="Visitor">访客身份 点击立即入驻本社区</div>
|
||||||
</div>
|
</div>
|
||||||
@ -25,7 +25,7 @@
|
|||||||
<div class="ConList">
|
<div class="ConList">
|
||||||
<div class="ConItem" v-for="item in 3" @click="desc">
|
<div class="ConItem" v-for="item in 3" @click="desc">
|
||||||
<div class="ConItem_left">
|
<div class="ConItem_left">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_act2Img.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/com_act2Img.png" mode="aspectFill"></image>
|
||||||
</div>
|
</div>
|
||||||
<div class="ConItem_right">
|
<div class="ConItem_right">
|
||||||
<div class="ConItem_right_tit">关于小区停车场治理通告</div>
|
<div class="ConItem_right_tit">关于小区停车场治理通告</div>
|
||||||
|
|||||||
@ -6,11 +6,18 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<div class="myRealEstate">
|
||||||
|
<div class="myRealEstates">
|
||||||
|
<image src="http://192.168.0.172:5500/com_communityNav.png" mode="aspectFill"></image>
|
||||||
|
<div class="name">滏阳锦苑</div>
|
||||||
|
<div class="Visitor">访客身份 点击立即入驻本社区</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="Tit">{{Info.title}}</div>
|
<div class="Tit">再生资源回收，让我们一起行动起来！</div>
|
||||||
<div class="subTit">{{Info.author}} {{Info.publish_time}}</div>
|
<div class="subTit">衡水繁花似锦物业管理有限公司 2025年6月6日10:37:27</div>
|
||||||
<div class="Con">
|
<div class="Con">
|
||||||
<rich-text :nodes="Info.content"></rich-text>
|
再生资源回收是一项对我们社会和小区都有益的活动。通过回收再利用废纸、废金属、废塑料、废玻璃和废电子产品等再生资源，我们不仅可以保护环境，还能为我们的小区带来诸多好处。
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
@ -18,16 +25,15 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {
|
import {
|
||||||
request,
|
request,
|
||||||
picUrl,
|
picUrl,
|
||||||
uniqueByField,
|
uniqueByField,
|
||||||
menuButtonInfo,
|
menuButtonInfo
|
||||||
NavgateTo
|
} from '../../../utils';
|
||||||
} from '../../../utils';
|
|
||||||
import {
|
import {
|
||||||
apiArr
|
apiArr
|
||||||
} from '../../../api/v2Community';
|
} from '../../../api/community';
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -35,8 +41,7 @@ export default {
|
|||||||
return {
|
return {
|
||||||
top: "",
|
top: "",
|
||||||
localHeight: "",
|
localHeight: "",
|
||||||
id:"",
|
active: 0
|
||||||
Info:""
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad(options) {
|
onLoad(options) {
|
||||||
@ -44,20 +49,12 @@ export default {
|
|||||||
this.top = meun.top;
|
this.top = meun.top;
|
||||||
// this.top = meun.height + meun.top;
|
// this.top = meun.height + meun.top;
|
||||||
this.localHeight = meun.height;
|
this.localHeight = meun.height;
|
||||||
this.id = options.id
|
|
||||||
this.getInfo()
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
//公告详情
|
changeTab(index) {
|
||||||
getInfo(){
|
this.active = index;
|
||||||
request(apiArr.getAnnounceInfo,"POST",{
|
|
||||||
id:Number(this.id)
|
|
||||||
}).then(res=>{
|
|
||||||
console.log(res);
|
|
||||||
this.Info = res
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
back() {
|
back() {
|
||||||
uni.navigateBack({
|
uni.navigateBack({
|
||||||
|
|||||||
@ -123,7 +123,7 @@ page {
|
|||||||
bottom: -2rpx;
|
bottom: -2rpx;
|
||||||
width: 30rpx;
|
width: 30rpx;
|
||||||
height: 30rpx;
|
height: 30rpx;
|
||||||
background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_activeIcon.png);
|
background: url(http://192.168.0.172:5500/com_activeIcon.png);
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -17,7 +17,10 @@
|
|||||||
|
|
||||||
<div class="label">选择房源信息</div>
|
<div class="label">选择房源信息</div>
|
||||||
<div class="roomList">
|
<div class="roomList">
|
||||||
<div v-for="(item, index) in roomList" :key="index" :class="active == index ?'roomItem active':'roomItem'" @click="changeAct(index)">{{ item.name }}</div>
|
<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>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
@ -45,7 +48,7 @@
|
|||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="row_label">联系电话</div>
|
<div class="row_label">联系电话</div>
|
||||||
<div class="row_con">
|
<div class="row_con">
|
||||||
<input type="number" maxlength="11" placeholder="请输入您的联系方式" :value="contactPhone" data-name="contactPhone" @input="handlerInputClick">
|
<input type="text" placeholder="请输入您的联系方式" :value="contactPhone" data-name="contactPhone" @input="handlerInputClick">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -65,7 +68,7 @@
|
|||||||
<u-upload :fileList="imgList" name="imgList" @afterRead="afterReadImg" @delete="deletePic" multiple
|
<u-upload :fileList="imgList" name="imgList" @afterRead="afterReadImg" @delete="deletePic" multiple
|
||||||
:maxCount="10">
|
:maxCount="10">
|
||||||
<div class="imgCon">
|
<div class="imgCon">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_imageImg.png" mode="widthFix"></image>
|
<image src="http://192.168.0.172:5500/com_imageImg.png" mode="widthFix"></image>
|
||||||
上传图片
|
上传图片
|
||||||
</div>
|
</div>
|
||||||
</u-upload>
|
</u-upload>
|
||||||
@ -78,7 +81,7 @@
|
|||||||
<u-upload v-if="!videoList.url" :fileList="videoList" @afterRead="afterReadVideo" @delete="deleteVideo" name="videoList"
|
<u-upload v-if="!videoList.url" :fileList="videoList" @afterRead="afterReadVideo" @delete="deleteVideo" name="videoList"
|
||||||
:maxCount="1" accept="video">
|
:maxCount="1" accept="video">
|
||||||
<div class="imgCon">
|
<div class="imgCon">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_videoImg.png" mode="widthFix"></image>
|
<image src="http://192.168.0.172:5500/com_videoImg.png" mode="widthFix"></image>
|
||||||
上传视频
|
上传视频
|
||||||
</div>
|
</div>
|
||||||
</u-upload>
|
</u-upload>
|
||||||
@ -125,10 +128,9 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
picUrl,
|
picUrl,
|
||||||
active: 0,
|
active:"1",
|
||||||
top: "",
|
top: "",
|
||||||
localHeight: "",
|
localHeight: "",
|
||||||
roomList: [],
|
|
||||||
columns: [],
|
columns: [],
|
||||||
category: {}, // 保修类型信息
|
category: {}, // 保修类型信息
|
||||||
repairInfo: '', // 问题描述
|
repairInfo: '', // 问题描述
|
||||||
@ -239,8 +241,8 @@ export default {
|
|||||||
title: '提交中'
|
title: '提交中'
|
||||||
});
|
});
|
||||||
const res = await request(apiArr.workOrderCrudCreat, 'POST', {
|
const res = await request(apiArr.workOrderCrudCreat, 'POST', {
|
||||||
"community_id": uni.getStorageSync('changeCommData').id, // 所属小区ID
|
"community_id": 1, // 所属小区ID
|
||||||
"room_id": this.roomList[this.active].room_id, // 房源ID
|
"room_id": 1231, // 房源ID
|
||||||
// "location": "具体位置", // 具体位置
|
// "location": "具体位置", // 具体位置
|
||||||
"order_category_id": this.category.id, // 报修类型ID
|
"order_category_id": this.category.id, // 报修类型ID
|
||||||
"problem_description": this.repairInfo, // 问题描述
|
"problem_description": this.repairInfo, // 问题描述
|
||||||
@ -270,8 +272,6 @@ export default {
|
|||||||
uni.showLoading({
|
uni.showLoading({
|
||||||
title: '加载中'
|
title: '加载中'
|
||||||
})
|
})
|
||||||
const res1 = await request(apiArr.workCommunityRoomList, 'POST', { community_id: uni.getStorageSync('changeCommData').id});
|
|
||||||
this.roomList = res1.rows;
|
|
||||||
const res = await request(apiArr.workOrderCategoryCrudList, 'POST', {});
|
const res = await request(apiArr.workOrderCategoryCrudList, 'POST', {});
|
||||||
uni.hideLoading();
|
uni.hideLoading();
|
||||||
this.columns = res.rows;
|
this.columns = res.rows;
|
||||||
|
|||||||
@ -131,7 +131,7 @@ image {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
right: 8rpx;
|
right: 8rpx;
|
||||||
top: 23rpx;
|
top: 23rpx;
|
||||||
background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_jfImg.png) no-repeat;
|
background: url(http://192.168.0.172:5500/com_jfImg.png) no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -293,9 +293,7 @@ image {
|
|||||||
color: #FF370B;
|
color: #FF370B;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
.sucess{
|
|
||||||
color: #222222;
|
|
||||||
}
|
|
||||||
|
|
||||||
.boxshadow {
|
.boxshadow {
|
||||||
background: rgba(0, 0, 0, 0.16);
|
background: rgba(0, 0, 0, 0.16);
|
||||||
|
|||||||
@ -8,13 +8,12 @@
|
|||||||
|
|
||||||
<div class="community">
|
<div class="community">
|
||||||
<div class="community_left">
|
<div class="community_left">
|
||||||
<image mode="aspectFill"
|
<image mode="aspectFill" src="http://192.168.0.172:5500/test.png" alt="" />
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/test.png" alt="" />
|
|
||||||
</div>
|
</div>
|
||||||
<div class="community_right" @click="changeShow">
|
<div class="community_right" @click="changeShow">
|
||||||
<div class="community_right_text">
|
<div class="community_right_text">
|
||||||
<div class="community_right_text1">{{ currentRoom.name }}</div>
|
<div class="community_right_text1">世纪名城1号楼1单元101室</div>
|
||||||
<div class="community_right_text2">{{ currentCommunityAddr }}</div>
|
<div class="community_right_text2">衡水市上海公馆6A</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="community_right_more">
|
<div class="community_right_more">
|
||||||
<u-icon bold color="#999999" size="30" name="arrow-right" @click="back"></u-icon>
|
<u-icon bold color="#999999" size="30" name="arrow-right" @click="back"></u-icon>
|
||||||
@ -35,11 +34,11 @@
|
|||||||
<div class="homeMoney_box_left2">可抵扣账户金额</div>
|
<div class="homeMoney_box_left2">可抵扣账户金额</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="homeMoney_box_right">
|
<div class="homeMoney_box_right">
|
||||||
<div class="homeMoney_box_right1"><span>￥</span>{{ balanceMoney }}</div>
|
<div class="homeMoney_box_right1"><span>￥</span>9735.00</div>
|
||||||
<div class="homeMoney_box_right2" @click="more">
|
<div class="homeMoney_box_right2">
|
||||||
查看详情
|
查看详情
|
||||||
<div style="margin-left: 12rpx;">
|
<div style="margin-left: 12rpx;">
|
||||||
<u-icon bold color="#894B11" size="30" name="arrow-right" ></u-icon>
|
<u-icon bold color="#894B11" size="30" name="arrow-right" @click="back"></u-icon>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -47,32 +46,29 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="payList" v-if="active == 0">
|
<div class="payList" v-if="active == 0">
|
||||||
<div class="payItem" v-for="(item, index) in Bill" :key="index">
|
<div class="payItem" v-for="item in 1">
|
||||||
<div class="payItem_tit">
|
<div class="payItem_tit">
|
||||||
<div class="payItem_left">
|
<div class="payItem_left">
|
||||||
<checkbox :checked="item.check" @click="checkChange(item, index)"></checkbox>
|
<checkbox value="1"></checkbox>
|
||||||
<div style="margin-left: 24rpx;">{{ item.order_date }}年</div>
|
<div style="margin-left: 24rpx;">2025年</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="payItem_right">
|
<div class="payItem_right">
|
||||||
<span>￥</span>
|
<span>￥</span>
|
||||||
{{ item.unpaid_amount }}
|
4900.00
|
||||||
<p>未缴</p>
|
<p>未缴</p>
|
||||||
|
|
||||||
<div style="margin-left: 40rpx;" @click="changeCheck(item, index)">
|
<div style="margin-left: 40rpx;">
|
||||||
<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-down" @click="back"></u-icon>
|
||||||
<u-icon bold color="#894B11" size="30" name="arrow-up" v-if="item.more"></u-icon>
|
<u-icon bold color="#894B11" size="30" name="arrow-up" @click="back" v-if="false"></u-icon>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="payItem_List" v-for="(items, indes) in item.community_order_rows" v-if="item.more"
|
<div class="payItem_List" v-for="item in 0">
|
||||||
:key="items.order_id">
|
<checkbox value="1"></checkbox>
|
||||||
<checkbox :checked="items.check" @click="itemsCheckChange(items, indes, index)"></checkbox>
|
<div class="Item_time">2025年</div>
|
||||||
<div class="Item_time" v-if="items.billing_cycle == 1">{{ items.order_date }}年</div>
|
<div class="Item_type">车位管理费</div>
|
||||||
<div class="Item_time" v-if="items.billing_cycle == 2">{{ items.order_datetime }}月</div>
|
<div class="Item_money">￥4500.00</div>
|
||||||
<div class="Item_type">{{ items.community_fee_type.type_name }}</div>
|
<div class="Item_status">未付款</div>
|
||||||
<div class="Item_money">￥{{ items.money }}</div>
|
|
||||||
<div class="Item_status" v-if="items.status == 0">未付款</div>
|
|
||||||
<div class="Item_status sucess" v-if="items.status == 1">已付款</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -82,9 +78,7 @@
|
|||||||
<div class="PayTypeItem">
|
<div class="PayTypeItem">
|
||||||
<div class="PayTypeItem_left">
|
<div class="PayTypeItem_left">
|
||||||
<div class="PayTypeItem_img">
|
<div class="PayTypeItem_img">
|
||||||
<image mode="aspectFill"
|
<image mode="aspectFill" src="http://192.168.0.172:5500/com_wechat.png" alt="" />
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
|
|
||||||
alt="" />
|
|
||||||
</div>
|
</div>
|
||||||
<div class="PayTypeItem_con">
|
<div class="PayTypeItem_con">
|
||||||
<div class="PayTypeItem_con_tit">微信支付</div>
|
<div class="PayTypeItem_con_tit">微信支付</div>
|
||||||
@ -93,16 +87,14 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="PayTypeItem_right">
|
<div class="PayTypeItem_right">
|
||||||
<radio :checked="payType == 1" @click="changePayType(1)"></radio>
|
<radio></radio>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="line3"></div>
|
<div class="line3"></div>
|
||||||
<div class="PayTypeItem">
|
<div class="PayTypeItem">
|
||||||
<div class="PayTypeItem_left">
|
<div class="PayTypeItem_left">
|
||||||
<div class="PayTypeItem_img">
|
<div class="PayTypeItem_img">
|
||||||
<image mode="aspectFill"
|
<image mode="aspectFill" src="http://192.168.0.172:5500/com_homeMoney.png" alt="" />
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_homeMoney.png"
|
|
||||||
alt="" />
|
|
||||||
</div>
|
</div>
|
||||||
<div class="PayTypeItem_con">
|
<div class="PayTypeItem_con">
|
||||||
<div class="PayTypeItem_con_tit">物业公积金支付</div>
|
<div class="PayTypeItem_con_tit">物业公积金支付</div>
|
||||||
@ -111,7 +103,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="PayTypeItem_right">
|
<div class="PayTypeItem_right">
|
||||||
<radio :checked="payType == 2" @click="changePayType(2)"></radio>
|
<radio></radio>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -120,46 +112,46 @@
|
|||||||
<div class="bottom_left">
|
<div class="bottom_left">
|
||||||
<span>合计</span>
|
<span>合计</span>
|
||||||
<p>￥</p>
|
<p>￥</p>
|
||||||
{{ currentMoney }}
|
4900.00
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom_right" @click="OrderPay">
|
<div class="bottom_right">
|
||||||
立即支付
|
立即支付
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="payHisList" v-if="active == 1">
|
<div class="payHisList" v-if="active == 1">
|
||||||
<div class="payHisItem" v-for="item in payOrderList" :key="item.id">
|
<div class="payHisItem" v-for="item in 3">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="row_label">缴费金额</div>
|
<div class="row_label">缴费金额</div>
|
||||||
<div class="row_con1">￥{{ item.money }}</div>
|
<div class="row_con1">￥53.1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="row_label2"></div>
|
<div class="row_label2">刚刚</div>
|
||||||
<div class="row_con2">{{ item.pay_time }}支付</div>
|
<div class="row_con2">2025-06-06 18:10支付</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="line4"></div>
|
<div class="line4"></div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="row_label">绑定房源</div>
|
<div class="row_label">绑定房源</div>
|
||||||
<div class="row_con3">
|
<div class="row_con3">
|
||||||
<div class="row_con3_1">{{ item.community_order.length }}个账单</div>
|
<div class="row_con3_1">6个账单</div>
|
||||||
<div class="row_con3_2">明细可从收据查看</div>
|
<div class="row_con3_2">明细可从收据查看</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="row_label">应缴费金额</div>
|
<div class="row_label">应缴费金额</div>
|
||||||
<div class="row_con4">￥{{ item.money }}</div>
|
<div class="row_con4">￥4704.00</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="row_label">物业费公积金抵扣金额</div>
|
<div class="row_label">物业费公积金抵扣金额</div>
|
||||||
<div class="row_con4">-￥{{ item.reduction_money }}</div>
|
<div class="row_con4">-￥4704.00</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="row_label">缴费单号</div>
|
<div class="row_label">缴费单号</div>
|
||||||
<div class="row_con4">{{ item.order_pay_no }} </div>
|
<div class="row_con4">25061700200003 </div>
|
||||||
</div>
|
</div>
|
||||||
<div class="line4"></div>
|
<div class="line4"></div>
|
||||||
<div class="Receipt">收据</div>
|
<div class="Receipt">收据</div>
|
||||||
@ -176,8 +168,8 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="lines"></div>
|
<div class="lines"></div>
|
||||||
<div class="communityList">
|
<div class="communityList">
|
||||||
<div class="communityItem" v-for="item in roomList" :key="item.room_id">
|
<div class="communityItem" v-for="item in 8">
|
||||||
<div class="communityItem_text">{{ item.facility_name }}{{ item.floor }} {{ item.number }}</div>
|
<div class="communityItem_text">2323世纪名城1号楼1单元101室</div>
|
||||||
<div class="communityItem_radio">
|
<div class="communityItem_radio">
|
||||||
<radio></radio>
|
<radio></radio>
|
||||||
</div>
|
</div>
|
||||||
@ -196,13 +188,11 @@
|
|||||||
<span>￥</span>4900.00
|
<span>￥</span>4900.00
|
||||||
</div>
|
</div>
|
||||||
<div class="lines"></div>
|
<div class="lines"></div>
|
||||||
|
|
||||||
<div class="BanlenceList">
|
<div class="BanlenceList">
|
||||||
<div class="banlenceItem">
|
<div class="banlenceItem">
|
||||||
<div class="banlenceItem_left">
|
<div class="banlenceItem_left">
|
||||||
<image mode="aspectFill"
|
<image mode="aspectFill" src="http://192.168.0.172:5500/com_wechat.png" alt="" />
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
|
|
||||||
alt="" />
|
|
||||||
微信支付
|
微信支付
|
||||||
</div>
|
</div>
|
||||||
<div class="banlenceItem_right">
|
<div class="banlenceItem_right">
|
||||||
@ -212,9 +202,7 @@
|
|||||||
<div class="line3"></div>
|
<div class="line3"></div>
|
||||||
<div class="banlenceItem">
|
<div class="banlenceItem">
|
||||||
<div class="banlenceItem_left">
|
<div class="banlenceItem_left">
|
||||||
<image mode="aspectFill"
|
<image mode="aspectFill" src="http://192.168.0.172:5500/com_homeMoney.png" alt="" />
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_homeMoney.png"
|
|
||||||
alt="" />
|
|
||||||
物业公积金支付
|
物业公积金支付
|
||||||
</div>
|
</div>
|
||||||
<div class="banlenceItem_right">
|
<div class="banlenceItem_right">
|
||||||
@ -241,7 +229,6 @@ import {
|
|||||||
picUrl,
|
picUrl,
|
||||||
uniqueByField,
|
uniqueByField,
|
||||||
menuButtonInfo,
|
menuButtonInfo,
|
||||||
formatDate,
|
|
||||||
NavgateTo
|
NavgateTo
|
||||||
} from '../../../utils';
|
} from '../../../utils';
|
||||||
import {
|
import {
|
||||||
@ -254,24 +241,9 @@ export default {
|
|||||||
return {
|
return {
|
||||||
top: "",
|
top: "",
|
||||||
localHeight: "",
|
localHeight: "",
|
||||||
active: 0,
|
active: 1,
|
||||||
show: false,
|
show: false,
|
||||||
show2: false,
|
show2: false,
|
||||||
roomList: [],
|
|
||||||
currentRoom: {},
|
|
||||||
currentCommunity: "", //当前房源
|
|
||||||
currentCommunityAddr: "", //当前房源地址
|
|
||||||
Bill: "", //账单
|
|
||||||
balanceMoney: "",//公积金
|
|
||||||
|
|
||||||
currentMoney: 0, //所选金额
|
|
||||||
|
|
||||||
payType: '1',
|
|
||||||
payInfoId: "",//支付信息id
|
|
||||||
page_size: 10,
|
|
||||||
page_num: 1,
|
|
||||||
payOrderList: [],
|
|
||||||
flag: false,
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad(options) {
|
onLoad(options) {
|
||||||
@ -279,20 +251,12 @@ export default {
|
|||||||
this.top = meun.top;
|
this.top = meun.top;
|
||||||
// this.top = meun.height + meun.top;
|
// this.top = meun.height + meun.top;
|
||||||
this.localHeight = meun.height;
|
this.localHeight = meun.height;
|
||||||
this.currentCommunity = uni.getStorageSync('changeCommData')
|
|
||||||
this.currentCommunityAddr = uni.getStorageSync("currentCommunityAddr")
|
|
||||||
this.getRoomSelect()
|
|
||||||
this.getUserGovenmentMoney()
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
changeTab(index) {
|
changeTab(index) {
|
||||||
this.active = index;
|
this.active = index;
|
||||||
if (index == 1) {
|
|
||||||
this.page_num = 1
|
|
||||||
this.getPayList()
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
back() {
|
back() {
|
||||||
uni.navigateBack({
|
uni.navigateBack({
|
||||||
@ -305,179 +269,6 @@ export default {
|
|||||||
changeShow2() {
|
changeShow2() {
|
||||||
this.show2 = !this.show
|
this.show2 = !this.show
|
||||||
},
|
},
|
||||||
//获取房源
|
|
||||||
getRoomSelect() {
|
|
||||||
request(apiArr.getCommunityRoomList, 'POST', {
|
|
||||||
community_id: this.currentCommunity.id,
|
|
||||||
page_num: 1,
|
|
||||||
page_size: 50
|
|
||||||
}).then(res => {
|
|
||||||
this.roomList = res.rows
|
|
||||||
this.currentRoom = this.roomList[0]
|
|
||||||
this.getOrderList()
|
|
||||||
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
//获取用户公积金
|
|
||||||
async getUserGovenmentMoney() {
|
|
||||||
request(apiArr.getUserGovenmentMoney, "POST", {}).then(res => {
|
|
||||||
console.log(res, '公积金');
|
|
||||||
this.balanceMoney = res.balance_after
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
//获取账单
|
|
||||||
async getOrderList() {
|
|
||||||
await request(apiArr.getOrderList, 'POST', {
|
|
||||||
room_id: this.currentRoom.room_id,
|
|
||||||
page_num: 1,
|
|
||||||
page_size: 50
|
|
||||||
}).then(res => {
|
|
||||||
console.log(res, '账单');
|
|
||||||
res.rows.forEach(item => {
|
|
||||||
item.check = false
|
|
||||||
item.more = false
|
|
||||||
item.community_order_rows.forEach(ite => {
|
|
||||||
ite.check = false
|
|
||||||
})
|
|
||||||
});
|
|
||||||
this.Bill = res.rows
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//账单详情切换展示显示
|
|
||||||
changeCheck(e, index) {
|
|
||||||
this.Bill[index].more = !this.Bill[index].more
|
|
||||||
},
|
|
||||||
//整体选择
|
|
||||||
checkChange(e, index) {
|
|
||||||
this.Bill[index].check = !this.Bill[index].check
|
|
||||||
this.Bill[index].community_order_rows.forEach(item => {
|
|
||||||
if (this.Bill[index].check) {
|
|
||||||
item.check = true
|
|
||||||
} else {
|
|
||||||
item.check = false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 重新计算选中金额
|
|
||||||
let money = 0
|
|
||||||
this.Bill.forEach(item => {
|
|
||||||
item.community_order_rows.forEach(ite => {
|
|
||||||
if (ite.check) {
|
|
||||||
money += ite.money
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
this.currentMoney = money
|
|
||||||
},
|
|
||||||
//具体选择
|
|
||||||
itemsCheckChange(e, indes, index) {
|
|
||||||
this.Bill[index].community_order_rows[indes].check = !this.Bill[index].community_order_rows[indes].check
|
|
||||||
//判断是否全部选中
|
|
||||||
let isAll = this.Bill[index].community_order_rows.every(item => {
|
|
||||||
return item.check
|
|
||||||
})
|
|
||||||
if (isAll) {
|
|
||||||
this.Bill[index].check = true
|
|
||||||
} else {
|
|
||||||
this.Bill[index].check = false
|
|
||||||
}
|
|
||||||
//帮我计算所有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")
|
|
||||||
},
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,145 +0,0 @@
|
|||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,187 +0,0 @@
|
|||||||
<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: '';
|
content: '';
|
||||||
width: 52rpx;
|
width: 52rpx;
|
||||||
height: 22rpx;
|
height: 22rpx;
|
||||||
background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_active.png);
|
background: url(http://192.168.0.172:5500/com_active.png);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
@ -167,23 +167,4 @@ page {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
margin-top: 200rpx;
|
margin-top: 200rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.empty {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
font-weight: normal;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #999999;
|
|
||||||
margin-top: 110rpx;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty image {
|
|
||||||
width: 366rpx;
|
|
||||||
height: 226rpx;
|
|
||||||
margin-bottom: 27rpx;
|
|
||||||
}
|
|
||||||
@ -1,9 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="box">
|
<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_add">
|
||||||
<div class="searchBox_left">
|
<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>
|
||||||
<div class="searchBox_mid">我的报修</div>
|
<div class="searchBox_mid">我的报修</div>
|
||||||
<div class="searchBox_right"></div>
|
<div class="searchBox_right"></div>
|
||||||
@ -11,21 +20,33 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="tabList">
|
<div class="tabList">
|
||||||
<div :class="active == 1 ? 'tab active' : 'tab'" @click="headerTabsClick(1)">
|
<div
|
||||||
待指派 <span>({{ awaitingNumb }})</span>
|
:class="active == 1 ? 'tab active' : 'tab'"
|
||||||
|
@click="headerTabsClick(1)"
|
||||||
|
>
|
||||||
|
待指派 <span>({{awaitingNumb}})</span>
|
||||||
</div>
|
</div>
|
||||||
<div :class="active == 2 ? 'tab active' : 'tab'" @click="headerTabsClick(2)">
|
<div
|
||||||
|
:class="active == 2 ? 'tab active' : 'tab'"
|
||||||
|
@click="headerTabsClick(2)"
|
||||||
|
>
|
||||||
进行中 <span>({{ underwayNum }})</span>
|
进行中 <span>({{ underwayNum }})</span>
|
||||||
</div>
|
</div>
|
||||||
<div :class="active == 4 ? 'tab active' : 'tab'" @click="headerTabsClick(4)">
|
<div
|
||||||
|
:class="active == 4 ? 'tab active' : 'tab'"
|
||||||
|
@click="headerTabsClick(4)"
|
||||||
|
>
|
||||||
已作废 <span>({{ discardNum }})</span>
|
已作废 <span>({{ discardNum }})</span>
|
||||||
</div>
|
</div>
|
||||||
<div :class="active == 3 ? 'tab active' : 'tab'" @click="headerTabsClick(3)">
|
<div
|
||||||
|
:class="active == 3 ? 'tab active' : 'tab'"
|
||||||
|
@click="headerTabsClick(3)"
|
||||||
|
>
|
||||||
已完成 <span>({{ doneNum }})</span>
|
已完成 <span>({{ doneNum }})</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="list.length !== 0" class="orderList" v-for="(item, index) in list" :key="index">
|
<div class="orderList" v-for="(item, index) in list" :key="index">
|
||||||
<div class="orderItem" @click="handlerDetailClick(item.id)">
|
<div class="orderItem" @click="handlerDetailClick(item.id)">
|
||||||
<div :class="['orderItemTit', statusType[item.status].style]">
|
<div :class="['orderItemTit', statusType[item.status].style]">
|
||||||
<div class="orderItemTit_left">工单编号：{{ item.order_code }}</div>
|
<div class="orderItemTit_left">工单编号：{{ item.order_code }}</div>
|
||||||
@ -69,12 +90,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="list.length == 0" class="empty">
|
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_nearbyList_empty.png"
|
|
||||||
mode="aspectFill"></image>
|
|
||||||
暂无数据
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="addBtn" @click="oneRepair">在线报修</div>
|
<div class="addBtn" @click="oneRepair">在线报修</div>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@ -92,11 +107,11 @@ export default {
|
|||||||
page_size: 10,
|
page_size: 10,
|
||||||
flag: false, // 是否下拉请求接口
|
flag: false, // 是否下拉请求接口
|
||||||
list: [], // 列表数组
|
list: [], // 列表数组
|
||||||
awaitingNumb: '', // 待维修工单数量
|
awaitingNumb: '', // 待维修工单数量
|
||||||
underwayNum: '', // 进行中工单数量
|
underwayNum: '', // 进行中工单数量
|
||||||
doneNum: '', // 已完成工单数量
|
doneNum: '', // 已完成工单数量
|
||||||
discardNum: '', // 已废弃工单数量
|
discardNum: '', // 已废弃工单数量
|
||||||
// 状态枚举类型
|
// 状态枚举类型
|
||||||
statusType: {
|
statusType: {
|
||||||
1: {
|
1: {
|
||||||
desc: "待指派",
|
desc: "待指派",
|
||||||
@ -136,18 +151,18 @@ export default {
|
|||||||
this.page_num = 1;
|
this.page_num = 1;
|
||||||
this.getTabsList();
|
this.getTabsList();
|
||||||
},
|
},
|
||||||
async init() {
|
async init() {
|
||||||
const [awaitingNumb, underwayNum, doneNum, discardNum] = await Promise.all([
|
const [awaitingNumb, underwayNum, doneNum, discardNum] = await Promise.all([
|
||||||
this.awaitingRes(),
|
this.awaitingRes(),
|
||||||
this.underwayRes(),
|
this.underwayRes(),
|
||||||
this.doneRes(),
|
this.doneRes(),
|
||||||
this.discardRes(),
|
this.discardRes(),
|
||||||
]);
|
]);
|
||||||
this.awaitingNumb = awaitingNumb;
|
this.awaitingNumb = awaitingNumb;
|
||||||
this.underwayNum = underwayNum;
|
this.underwayNum = underwayNum;
|
||||||
this.discardNum = discardNum;
|
this.discardNum = discardNum;
|
||||||
this.doneNum = doneNum;
|
this.doneNum = doneNum;
|
||||||
},
|
},
|
||||||
async getTabsList() {
|
async getTabsList() {
|
||||||
const res = await request(apiArr.getWorkOrderCrudList, "POST", {
|
const res = await request(apiArr.getWorkOrderCrudList, "POST", {
|
||||||
status: this.active,
|
status: this.active,
|
||||||
@ -167,48 +182,42 @@ export default {
|
|||||||
this.page_num = this.page_num + 1;
|
this.page_num = this.page_num + 1;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 待维修工单数量
|
// 待维修工单数量
|
||||||
async awaitingRes() {
|
async awaitingRes() {
|
||||||
const res = await request(apiArr.getWorkOrderCrudList, "POST", {
|
const res = await request(apiArr.getWorkOrderCrudList, "POST", {
|
||||||
status: 1,
|
status: 1,
|
||||||
page_num: this.page_num,
|
page_num: this.page_num,
|
||||||
page_size: this.page_size,
|
page_size: this.page_size,
|
||||||
});
|
});
|
||||||
return res.total;
|
return res.total;
|
||||||
},
|
},
|
||||||
// 进行中工单数量
|
// 进行中工单数量
|
||||||
async underwayRes() {
|
async underwayRes() {
|
||||||
const res = await request(apiArr.getWorkOrderCrudList, "POST", {
|
const res = await request(apiArr.getWorkOrderCrudList, "POST", {
|
||||||
status: 2,
|
status: 2,
|
||||||
page_num: this.page_num,
|
page_num: this.page_num,
|
||||||
page_size: this.page_size,
|
page_size: this.page_size,
|
||||||
});
|
});
|
||||||
return res.total;
|
return res.total;
|
||||||
},
|
},
|
||||||
// 已废弃工单数量
|
// 已废弃工单数量
|
||||||
async discardRes() {
|
async discardRes() {
|
||||||
const res = await request(apiArr.getWorkOrderCrudList, "POST", {
|
const res = await request(apiArr.getWorkOrderCrudList, "POST", {
|
||||||
status: 3,
|
status: 3,
|
||||||
page_num: this.page_num,
|
page_num: this.page_num,
|
||||||
page_size: this.page_size,
|
page_size: this.page_size,
|
||||||
});
|
});
|
||||||
return res.total;
|
return res.total;
|
||||||
},
|
},
|
||||||
// 已完成工单数量
|
// 已完成工单数量
|
||||||
async doneRes() {
|
async doneRes() {
|
||||||
const res = await request(apiArr.getWorkOrderCrudList, "POST", {
|
const res = await request(apiArr.getWorkOrderCrudList, "POST", {
|
||||||
status: 4,
|
status: 4,
|
||||||
page_num: this.page_num,
|
page_num: this.page_num,
|
||||||
page_size: this.page_size,
|
page_size: this.page_size,
|
||||||
});
|
});
|
||||||
return res.total;
|
return res.total;
|
||||||
},
|
},
|
||||||
|
|
||||||
back() {
|
|
||||||
uni.navigateBack({
|
|
||||||
delta: 1
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
onLoad(options) {
|
onLoad(options) {
|
||||||
@ -216,21 +225,13 @@ export default {
|
|||||||
this.top = meun.top;
|
this.top = meun.top;
|
||||||
this.localHeight = meun.height;
|
this.localHeight = meun.height;
|
||||||
this.init();
|
this.init();
|
||||||
this.getTabsList();
|
this.getTabsList();
|
||||||
},
|
},
|
||||||
onReachBottom() {
|
onReachBottom() {
|
||||||
if (this.flag) {
|
if (this.flag) {
|
||||||
this.init();
|
this.init();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
onPullDownRefresh() {
|
|
||||||
this.list = [];
|
|
||||||
this.flag = false;
|
|
||||||
this.page_num = 1;
|
|
||||||
this.getTabsList();
|
|
||||||
uni.stopPullDownRefresh();
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -88,17 +88,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tabItem1 {
|
.tabItem1 {
|
||||||
background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_tabBg1.png);
|
background: url(http://192.168.0.172:5500/com_tabBg1.png);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabItem2 {
|
.tabItem2 {
|
||||||
background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_tabBg2.png);
|
background: url(http://192.168.0.172:5500/com_tabBg2.png);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabItem3 {
|
.tabItem3 {
|
||||||
background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_tabBg3.png);
|
background: url(http://192.168.0.172:5500/com_tabBg3.png);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -75,128 +75,128 @@ export default {
|
|||||||
return {
|
return {
|
||||||
functionList: [
|
functionList: [
|
||||||
{
|
{
|
||||||
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_serverIcon1.png",
|
icon: "http://192.168.0.172:5500/com_serverIcon1.png",
|
||||||
name: "业主入驻",
|
name: "业主入驻",
|
||||||
url: ""
|
url: ""
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_serverIcon2.png",
|
icon: "http://192.168.0.172:5500/com_serverIcon2.png",
|
||||||
name: "我的房产",
|
name: "我的房产",
|
||||||
url: ""
|
url: ""
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_serverIcon3.png",
|
icon: "http://192.168.0.172:5500/com_serverIcon3.png",
|
||||||
name: "生活缴费",
|
name: "生活缴费",
|
||||||
url: "weixin://dl/business/?t=WvQ1ZJv0J5Z"
|
url: "weixin://dl/business/?t=WvQ1ZJv0J5Z"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_serverIcon4.png",
|
icon: "http://192.168.0.172:5500/com_serverIcon4.png",
|
||||||
name: "便民服务",
|
name: "便民服务",
|
||||||
url: ""
|
url: ""
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_serverIcon5.png",
|
icon: "http://192.168.0.172:5500/com_serverIcon5.png",
|
||||||
name: "物业公积金",
|
name: "物业公积金",
|
||||||
url: ""
|
url: ""
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_serverIcon6.png",
|
icon: "http://192.168.0.172:5500/com_serverIcon6.png",
|
||||||
name: "社区互动",
|
name: "社区互动",
|
||||||
url: ""
|
url: ""
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_serverIcon7.png",
|
icon: "http://192.168.0.172:5500/com_serverIcon7.png",
|
||||||
name: "物业公积金",
|
name: "物业公积金",
|
||||||
url: ""
|
url: ""
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_serverIcon8.png",
|
icon: "http://192.168.0.172:5500/com_serverIcon8.png",
|
||||||
name: "物业服务",
|
name: "物业服务",
|
||||||
url: ""
|
url: ""
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_serverIcon9.png",
|
icon: "http://192.168.0.172:5500/com_serverIcon9.png",
|
||||||
name: "报事报修",
|
name: "报事报修",
|
||||||
url: ""
|
url: ""
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_serverIcon10.png",
|
icon: "http://192.168.0.172:5500/com_serverIcon10.png",
|
||||||
name: "物业缴费",
|
name: "物业缴费",
|
||||||
url: ""
|
url: ""
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_serverIcon11.png",
|
icon: "http://192.168.0.172:5500/com_serverIcon11.png",
|
||||||
name: "纠纷调解",
|
name: "纠纷调解",
|
||||||
url: ""
|
url: ""
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_serverIcon12.png",
|
icon: "http://192.168.0.172:5500/com_serverIcon12.png",
|
||||||
name: "社区管家",
|
name: "社区管家",
|
||||||
url: ""
|
url: ""
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
localList: [
|
localList: [
|
||||||
{
|
{
|
||||||
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_localIcon1.png",
|
icon: "http://192.168.0.172:5500/com_localIcon1.png",
|
||||||
name: "美食",
|
name: "美食",
|
||||||
url: ""
|
url: ""
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_localIcon2.png",
|
icon: "http://192.168.0.172:5500/com_localIcon2.png",
|
||||||
name: "家教",
|
name: "家教",
|
||||||
url: ""
|
url: ""
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_localIcon3.png",
|
icon: "http://192.168.0.172:5500/com_localIcon3.png",
|
||||||
name: "超市",
|
name: "超市",
|
||||||
url: ""
|
url: ""
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_localIcon4.png",
|
icon: "http://192.168.0.172:5500/com_localIcon4.png",
|
||||||
name: "健身",
|
name: "健身",
|
||||||
url: ""
|
url: ""
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
shopList: [
|
shopList: [
|
||||||
{
|
{
|
||||||
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_shopIcon1.png",
|
icon: "http://192.168.0.172:5500/com_shopIcon1.png",
|
||||||
name: "电商购物",
|
name: "电商购物",
|
||||||
url: ""
|
url: ""
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_shopIcon2.png",
|
icon: "http://192.168.0.172:5500/com_shopIcon2.png",
|
||||||
name: "社区团购",
|
name: "社区团购",
|
||||||
url: ""
|
url: ""
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_shopIcon3.png",
|
icon: "http://192.168.0.172:5500/com_shopIcon3.png",
|
||||||
name: "本地优选",
|
name: "本地优选",
|
||||||
url: ""
|
url: ""
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_shopIcon4.png",
|
icon: "http://192.168.0.172:5500/com_shopIcon4.png",
|
||||||
name: "社区拼团",
|
name: "社区拼团",
|
||||||
url: ""
|
url: ""
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
cardList: [
|
cardList: [
|
||||||
{
|
{
|
||||||
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_cardIcon1.png",
|
icon: "http://192.168.0.172:5500/com_cardIcon1.png",
|
||||||
name: "我的积分",
|
name: "我的积分",
|
||||||
url: ""
|
url: ""
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_cardIcon2.png",
|
icon: "http://192.168.0.172:5500/com_cardIcon2.png",
|
||||||
name: "积分兑换",
|
name: "积分兑换",
|
||||||
url: ""
|
url: ""
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_cardIcon3.png",
|
icon: "http://192.168.0.172:5500/com_cardIcon3.png",
|
||||||
name: "我的优惠卡",
|
name: "我的优惠卡",
|
||||||
url: ""
|
url: ""
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_cardIcon4.png",
|
icon: "http://192.168.0.172:5500/com_cardIcon4.png",
|
||||||
name: "我的会员卡",
|
name: "我的会员卡",
|
||||||
url: ""
|
url: ""
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,411 +0,0 @@
|
|||||||
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%;
|
|
||||||
}
|
|
||||||
@ -1,296 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,176 +0,0 @@
|
|||||||
.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;
|
|
||||||
}
|
|
||||||
@ -1,185 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,397 +0,0 @@
|
|||||||
.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%;
|
|
||||||
}
|
|
||||||
@ -1,318 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,504 +0,0 @@
|
|||||||
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;
|
|
||||||
}
|
|
||||||
@ -1,417 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,102 +0,0 @@
|
|||||||
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;
|
|
||||||
}
|
|
||||||
@ -1,92 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
.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;
|
|
||||||
}
|
|
||||||
@ -1,50 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,288 +0,0 @@
|
|||||||
.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%;
|
|
||||||
}
|
|
||||||
@ -1,265 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,419 +0,0 @@
|
|||||||
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;
|
|
||||||
}
|
|
||||||
@ -1,292 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,189 +0,0 @@
|
|||||||
.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 子项溢出 */
|
|
||||||
}
|
|
||||||
@ -1,125 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,46 +0,0 @@
|
|||||||
<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
418
packages/homeServer/vendor/index.css
vendored
@ -1,418 +0,0 @@
|
|||||||
.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
152
packages/homeServer/vendor/index.vue
vendored
@ -1,152 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,419 +0,0 @@
|
|||||||
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;
|
|
||||||
}
|
|
||||||
@ -1,234 +0,0 @@
|
|||||||
<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 {
|
.container {
|
||||||
background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_pointbg.png);
|
background: url(http://192.168.0.172:5500/local_pointbg.png);
|
||||||
background-size: 750rpx 423rpx;
|
background-size: 750rpx 423rpx;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -11,15 +11,15 @@
|
|||||||
<div class="point">{{banlance}}</div>
|
<div class="point">{{banlance}}</div>
|
||||||
<div class="funList">
|
<div class="funList">
|
||||||
<div class="funItem">
|
<div class="funItem">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_fun1.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/local_fun1.png" mode="aspectFill"></image>
|
||||||
积分商城
|
积分商城
|
||||||
</div>
|
</div>
|
||||||
<div class="funItem">
|
<div class="funItem">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_fun2.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/local_fun2.png" mode="aspectFill"></image>
|
||||||
积分抽奖
|
积分抽奖
|
||||||
</div>
|
</div>
|
||||||
<div class="funItem">
|
<div class="funItem">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_fun3.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/local_fun3.png" mode="aspectFill"></image>
|
||||||
兑换优惠券
|
兑换优惠券
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -3,14 +3,14 @@
|
|||||||
<div class="Msg">
|
<div class="Msg">
|
||||||
<div class="Msg_Tit">
|
<div class="Msg_Tit">
|
||||||
<div class="Msg_Tit_left">
|
<div class="Msg_Tit_left">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/user_ava.png" v-if="!info.user.avatar" mode="aspectFill">
|
<image src="http://192.168.0.172:5500/user_ava.png" v-if="!info.user.avatar" mode="aspectFill">
|
||||||
</image>
|
</image>
|
||||||
<image :src="picUrl + info.user.avatar" v-if="info.user.avatar" mode="aspectFill"></image>
|
<image :src="picUrl + info.user.avatar" v-if="info.user.avatar" mode="aspectFill"></image>
|
||||||
{{ info.user.nick_name }}
|
{{ info.user.nick_name }}
|
||||||
</div>
|
</div>
|
||||||
<div class="Msg_Tit_right">
|
<div class="Msg_Tit_right">
|
||||||
<image v-for="indez in 5"
|
<image v-for="indez in 5"
|
||||||
:src="indez < info.satisfaction ? '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'"
|
:src="indez < info.satisfaction ? 'http://192.168.0.172:5500/local_start1.png' : 'http://192.168.0.172:5500/local_start2.png'"
|
||||||
mode="aspectFill"></image>
|
mode="aspectFill"></image>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -22,21 +22,21 @@
|
|||||||
<div class="Msg_iconList">
|
<div class="Msg_iconList">
|
||||||
<div class="Msg_iconList_left">
|
<div class="Msg_iconList_left">
|
||||||
<div class="Msg_iconList_leftIcon">
|
<div class="Msg_iconList_leftIcon">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_review.png" mode="widthFix"></image>
|
<image src="http://192.168.0.172:5500/local_review.png" mode="widthFix"></image>
|
||||||
{{ info.merchant_evaluation_reply_list ? info.merchant_evaluation_reply_list.length : 0 }}
|
{{ info.merchant_evaluation_reply_list ? info.merchant_evaluation_reply_list.length : 0 }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="Msg_iconList_leftIcon">
|
<div class="Msg_iconList_leftIcon">
|
||||||
<image v-if="info.is_like == 2" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_likeIcon.png" mode="widthFix"
|
<image v-if="info.is_like == 2" src="http://192.168.0.172:5500/com_likeIcon.png" mode="widthFix"
|
||||||
@click="like(info)"></image>
|
@click="like(info)"></image>
|
||||||
<image v-if="info.is_like == 1" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_likeIcon2.png"
|
<image v-if="info.is_like == 1" src="http://192.168.0.172:5500/com_likeIcon2.png"
|
||||||
mode="widthFix" @click="unlike(info)"></image>
|
mode="widthFix" @click="unlike(info)"></image>
|
||||||
{{ info.merchant_evaluation_like_list ? info.merchant_evaluation_like_list.length : 0 }}
|
{{ info.merchant_evaluation_like_list ? info.merchant_evaluation_like_list.length : 0 }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="Msg_iconList_right">
|
<div class="Msg_iconList_right">
|
||||||
<div class="Msg_iconList_leftIcon" @click="deletes" v-if="isDelte">
|
<div class="Msg_iconList_leftIcon" @click="deletes" v-if="isDelte">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_del.png" mode="widthFix"></image>
|
<image src="http://192.168.0.172:5500/local_del.png" mode="widthFix"></image>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -45,7 +45,7 @@
|
|||||||
<div class="reply" v-for="item in replyList">
|
<div class="reply" v-for="item in replyList">
|
||||||
<div class="reply_tit">
|
<div class="reply_tit">
|
||||||
<div class="reply_tit_left">
|
<div class="reply_tit_left">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/user_ava.png" v-if="!item.user.avatar" mode="aspectFill">
|
<image src="http://192.168.0.172:5500/user_ava.png" v-if="!item.user.avatar" mode="aspectFill">
|
||||||
</image>
|
</image>
|
||||||
<image :src="picUrl + item.user.avatar" v-if="item.user.avatar" mode="aspectFill"></image>
|
<image :src="picUrl + item.user.avatar" v-if="item.user.avatar" mode="aspectFill"></image>
|
||||||
{{ item.user.nick_name }}
|
{{ item.user.nick_name }}
|
||||||
@ -58,7 +58,7 @@
|
|||||||
|
|
||||||
<div class="comment">
|
<div class="comment">
|
||||||
<div class="comment_con">
|
<div class="comment_con">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_send.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/local_send.png" mode="aspectFill"></image>
|
||||||
<input type="text" v-model="reply_content" placeholder="说点什么">
|
<input type="text" v-model="reply_content" placeholder="说点什么">
|
||||||
|
|
||||||
<button id="send" @click="sendComment">发送</button>
|
<button id="send" @click="sendComment">发送</button>
|
||||||
|
|||||||
@ -15,7 +15,7 @@
|
|||||||
<div class="startList">
|
<div class="startList">
|
||||||
<div class="start" v-for="(item, index) in 5" :key="index" @click="setRating(index + 1)">
|
<div class="start" v-for="(item, index) in 5" :key="index" @click="setRating(index + 1)">
|
||||||
<image
|
<image
|
||||||
:src="index < rating ? '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'"
|
:src="index < rating ? 'http://192.168.0.172:5500/local_start1.png' : 'http://192.168.0.172:5500/local_start2.png'"
|
||||||
mode="aspectFill"></image>
|
mode="aspectFill"></image>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -55,7 +55,7 @@
|
|||||||
<u-upload v-if="active === 1 && videoList.length === 0" :fileList="videoList"
|
<u-upload v-if="active === 1 && videoList.length === 0" :fileList="videoList"
|
||||||
@afterRead="afterReadVideo2" @delete="deletePic2" name="1" :maxCount="1" accept="video">
|
@afterRead="afterReadVideo2" @delete="deletePic2" name="1" :maxCount="1" accept="video">
|
||||||
<div class="videoCon">
|
<div class="videoCon">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_videoImg.png" mode="widthFix"></image>
|
<image src="http://192.168.0.172:5500/com_videoImg.png" mode="widthFix"></image>
|
||||||
上传视频
|
上传视频
|
||||||
</div>
|
</div>
|
||||||
</u-upload>
|
</u-upload>
|
||||||
@ -64,7 +64,7 @@
|
|||||||
<video id="myVideo" :src="picUrl + videoList2[0].url" playsinline webkit-playsinline></video>
|
<video id="myVideo" :src="picUrl + videoList2[0].url" playsinline webkit-playsinline></video>
|
||||||
<div class="mask" @click="playFullScreenVideo">
|
<div class="mask" @click="playFullScreenVideo">
|
||||||
<div class="mask_con">
|
<div class="mask_con">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_play.png" mode="widthFix"></image>
|
<image src="http://192.168.0.172:5500/local_play.png" mode="widthFix"></image>
|
||||||
</div>
|
</div>
|
||||||
<div class="mask_cancel" @click="cancels">取消</div>
|
<div class="mask_cancel" @click="cancels">取消</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -13,7 +13,7 @@
|
|||||||
<!-- <u-icon name="star-fill" color="#FFB84D" /> -->
|
<!-- <u-icon name="star-fill" color="#FFB84D" /> -->
|
||||||
<div class="startList">
|
<div class="startList">
|
||||||
<image v-for="index in 5"
|
<image v-for="index in 5"
|
||||||
:src="index < item.rating ? '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'"
|
: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>
|
mode="aspectFill"></image>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -46,13 +46,13 @@
|
|||||||
<div class="Msg">
|
<div class="Msg">
|
||||||
<div class="Msg_Tit">
|
<div class="Msg_Tit">
|
||||||
<div class="Msg_Tit_left">
|
<div class="Msg_Tit_left">
|
||||||
<image src="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="http://192.168.0.172:5500/user_ava.png" v-if="!item.user.avatar" mode="aspectFill"></image>
|
||||||
<image :src="picUrl + item.user.avatar" v-if="item.user.avatar" mode="aspectFill"></image>
|
<image :src="picUrl + item.user.avatar" v-if="item.user.avatar" mode="aspectFill"></image>
|
||||||
{{ item.user.nick_name }}
|
{{ item.user.nick_name }}
|
||||||
</div>
|
</div>
|
||||||
<div class="Msg_Tit_right">
|
<div class="Msg_Tit_right">
|
||||||
<image v-for="indez in 5"
|
<image v-for="indez in 5"
|
||||||
:src="indez < item.satisfaction ? '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'"
|
:src="indez < item.satisfaction ? 'http://192.168.0.172:5500/local_start1.png' : 'http://192.168.0.172:5500/local_start2.png'"
|
||||||
mode="aspectFill"></image>
|
mode="aspectFill"></image>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -64,14 +64,14 @@
|
|||||||
<div class="Msg_iconList">
|
<div class="Msg_iconList">
|
||||||
<div class="Msg_iconList_left">
|
<div class="Msg_iconList_left">
|
||||||
<div class="Msg_iconList_leftIcon">
|
<div class="Msg_iconList_leftIcon">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_review.png" mode="widthFix"></image>
|
<image src="http://192.168.0.172:5500/local_review.png" mode="widthFix"></image>
|
||||||
{{ item.merchant_evaluation_reply_list ? item.merchant_evaluation_reply_list.length : 0 }}
|
{{ item.merchant_evaluation_reply_list ? item.merchant_evaluation_reply_list.length : 0 }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="Msg_iconList_leftIcon">
|
<div class="Msg_iconList_leftIcon">
|
||||||
<image v-if="item.is_like == 2" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_likeIcon.png" mode="widthFix"
|
<image v-if="item.is_like == 2" src="http://192.168.0.172:5500/com_likeIcon.png" mode="widthFix"
|
||||||
@click="like(item)"></image>
|
@click="like(item)"></image>
|
||||||
<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"
|
<image v-if="item.is_like == 1" src="http://192.168.0.172:5500/com_likeIcon2.png" mode="widthFix"
|
||||||
@click="unlike(item)"></image>
|
@click="unlike(item)"></image>
|
||||||
{{ item.merchant_evaluation_like_list ? item.merchant_evaluation_like_list.length : 0 }}
|
{{ item.merchant_evaluation_like_list ? item.merchant_evaluation_like_list.length : 0 }}
|
||||||
</div>
|
</div>
|
||||||
@ -89,11 +89,11 @@
|
|||||||
<view>导航</view>
|
<view>导航</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="left_label" @click="handlePhoneClick">
|
<view class="left_label" @click="handlePhoneClick">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/localLife_detail_Frame.png" mode="" />
|
<image src="http://127.0.0.1:5500/assets/localLife_detail_Frame.png" mode="" />
|
||||||
<view>电话</view>
|
<view>电话</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="left_label" @click="handleDiscussClick">
|
<view class="left_label" @click="handleDiscussClick">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/localLife_shopList_Group_1334.png" mode="" />
|
<image src="http://127.0.0.1:5500/assets/localLife_shopList_Group_1334.png" mode="" />
|
||||||
<view>点评</view>
|
<view>点评</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@ -34,7 +34,7 @@ image {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_pointbg.png);
|
background: url(http://192.168.0.172:5500/local_pointbg.png);
|
||||||
background-size: 750rpx 423rpx;
|
background-size: 750rpx 423rpx;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -31,7 +31,7 @@
|
|||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="row_label">消费用户</div>
|
<div class="row_label">消费用户</div>
|
||||||
<div class="row_con">
|
<div class="row_con">
|
||||||
<image src="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="http://192.168.0.172:5500/user_ava.png" v-if="!item.user.avatar" mode="aspectFill"></image>
|
||||||
<image :src="picUrl + item.user.avatar" v-if="item.user.avatar" mode="aspectFill"></image>
|
<image :src="picUrl + item.user.avatar" v-if="item.user.avatar" mode="aspectFill"></image>
|
||||||
|
|
||||||
{{ item.user.nick_name }}
|
{{ item.user.nick_name }}
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="local">
|
<div class="local">
|
||||||
<image id="local" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_localIcon.png" mode="aspectFill"></image>
|
<image id="local" src="http://192.168.0.172:5500/local_localIcon.png" mode="aspectFill"></image>
|
||||||
{{address}}
|
{{address}}
|
||||||
<u-icon name="arrow-down" color="#999999" size="28"></u-icon>
|
<u-icon name="arrow-down" color="#999999" size="28"></u-icon>
|
||||||
</div>
|
</div>
|
||||||
@ -9,7 +9,7 @@
|
|||||||
|
|
||||||
<div class="search">
|
<div class="search">
|
||||||
<div class="searchBox">
|
<div class="searchBox">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/com_communitySearchIcon.png" mode="aspectFill"></image>
|
||||||
<input type="text" placeholder="请输入您想搜索的内容">
|
<input type="text" placeholder="请输入您想搜索的内容">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -36,9 +36,9 @@
|
|||||||
<!-- <scroll-view scroll-x="true" enhanced enable-flex class="scrollBox">
|
<!-- <scroll-view scroll-x="true" enhanced enable-flex class="scrollBox">
|
||||||
<div class="scrollView">
|
<div class="scrollView">
|
||||||
<div class="scroll-viewItem" v-for="(item, index) in 4" @click="checkItem(index)">
|
<div class="scroll-viewItem" v-for="(item, index) in 4" @click="checkItem(index)">
|
||||||
<image v-show="!checkedItems[index]" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_uncheck.png"
|
<image v-show="!checkedItems[index]" src="http://192.168.0.172:5500/local_uncheck.png"
|
||||||
mode="aspectFill"></image>
|
mode="aspectFill"></image>
|
||||||
<image v-show="checkedItems[index]" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local-check.png"
|
<image v-show="checkedItems[index]" src="http://192.168.0.172:5500/local-check.png"
|
||||||
mode="aspectFill"></image>
|
mode="aspectFill"></image>
|
||||||
买单返物业费
|
买单返物业费
|
||||||
</div>
|
</div>
|
||||||
@ -62,13 +62,13 @@
|
|||||||
<div class="merchantItem_right_con">
|
<div class="merchantItem_right_con">
|
||||||
<div class="merchantItem_right_con_left">
|
<div class="merchantItem_right_con_left">
|
||||||
<div class="startList">
|
<div class="startList">
|
||||||
<image v-for="index in 5" :src="index < item.rating ? '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>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<div class="merchangtItem_tag" v-if="item.refund_property_fee_ratio">买单反物业费</div>
|
<div class="merchangtItem_tag" v-if="item.refund_property_fee_ratio">买单反物业费</div>
|
||||||
<div class="merchangtItem_tag" v-if="item.refund_user_points_ratio">买单反积分</div>
|
<div class="merchangtItem_tag" v-if="item.refund_user_points_ratio">买单反积分</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="merchantItem_right_con_right">
|
<div class="merchantItem_right_con_right">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_review.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/local_review.png" mode="aspectFill"></image>
|
||||||
点评
|
点评
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -81,12 +81,12 @@
|
|||||||
|
|
||||||
<div class="btnList">
|
<div class="btnList">
|
||||||
<div class="btn_left">
|
<div class="btn_left">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_serverIcon.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/local_serverIcon.png" mode="aspectFill"></image>
|
||||||
到店服务券
|
到店服务券
|
||||||
</div>
|
</div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div class="btn_right">
|
<div class="btn_right">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/lcoal_payIcon.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/lcoal_payIcon.png" mode="aspectFill"></image>
|
||||||
快捷支付记录
|
快捷支付记录
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -13,13 +13,11 @@ image {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-left: 20rpx;
|
padding-left: 20rpx;
|
||||||
position: relative;
|
|
||||||
z-index: 3;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
position: relative;
|
position: relative;
|
||||||
/* background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_payImg.png);
|
/* background: url(http://192.168.0.172:5500/local_payImg.png);
|
||||||
background-size: 750rpx 302rpx;
|
background-size: 750rpx 302rpx;
|
||||||
background-repeat: no-repeat; */
|
background-repeat: no-repeat; */
|
||||||
}
|
}
|
||||||
|
|||||||
@ -62,7 +62,7 @@
|
|||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div class="btnItem" @click="home">首页</div>
|
<div class="btnItem" @click="home">首页</div>
|
||||||
<div class="btnItem2" @click="changeBoxshadow">
|
<div class="btnItem2" @click="changeBoxshadow">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_qrcode.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/local_qrcode.png" mode="aspectFill"></image>
|
||||||
本页二维码
|
本页二维码
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="sucessImg">
|
<div class="sucessImg">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_sucess.png" mode="aspectFill"></image>
|
<image src="http://192.168.0.172:5500/local_sucess.png" mode="aspectFill"></image>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="text1">支付成功</div>
|
<div class="text1">支付成功</div>
|
||||||
|
|||||||
@ -23,7 +23,7 @@
|
|||||||
<view class="discuss">
|
<view class="discuss">
|
||||||
<image
|
<image
|
||||||
class="discuss_pic"
|
class="discuss_pic"
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/localLife_shopList_Group_1334.png"
|
src="http://127.0.0.1:5500/assets/localLife_shopList_Group_1334.png"
|
||||||
/>
|
/>
|
||||||
<text>点评</text>
|
<text>点评</text>
|
||||||
</view>
|
</view>
|
||||||
@ -49,7 +49,7 @@ export default {
|
|||||||
list: [
|
list: [
|
||||||
{
|
{
|
||||||
title: "李氏济世堂",
|
title: "李氏济世堂",
|
||||||
pic: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_Mask_group.png",
|
pic: "http://127.0.0.1:5500/assets/index_Mask_group.png",
|
||||||
desc: ["到家服务", "买单返物业费", "买单返物业费"],
|
desc: ["到家服务", "买单返物业费", "买单返物业费"],
|
||||||
address: "苏州市太仓市城厢镇桃园三村11幢105市",
|
address: "苏州市太仓市城厢镇桃园三村11幢105市",
|
||||||
distance: "898km",
|
distance: "898km",
|
||||||
@ -57,7 +57,7 @@ export default {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "美容美发",
|
title: "美容美发",
|
||||||
pic: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_Mask_group.png",
|
pic: "http://127.0.0.1:5500/assets/index_Mask_group.png",
|
||||||
desc: [ "买单返物业费"],
|
desc: [ "买单返物业费"],
|
||||||
address: "苏州市太仓市城厢镇桃园三村11幢105市",
|
address: "苏州市太仓市城厢镇桃园三村11幢105市",
|
||||||
distance: "898km",
|
distance: "898km",
|
||||||
|
|||||||
@ -1,143 +0,0 @@
|
|||||||
.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;
|
|
||||||
}
|
|
||||||
@ -1,122 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,67 +0,0 @@
|
|||||||
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
@ -1,62 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,125 +0,0 @@
|
|||||||
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;
|
|
||||||
}
|
|
||||||
@ -1,138 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,163 +0,0 @@
|
|||||||
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;
|
|
||||||
}
|
|
||||||
@ -1,350 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,142 +0,0 @@
|
|||||||
.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;
|
|
||||||
}
|
|
||||||
@ -1,128 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,371 +0,0 @@
|
|||||||
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;
|
|
||||||
}
|
|
||||||
@ -1,434 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,553 +0,0 @@
|
|||||||
.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;
|
|
||||||
}
|
|
||||||
@ -1,370 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,228 +0,0 @@
|
|||||||
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;
|
|
||||||
}
|
|
||||||
@ -1,128 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,217 +0,0 @@
|
|||||||
.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;
|
|
||||||
}
|
|
||||||
@ -1,246 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,199 +0,0 @@
|
|||||||
.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%;
|
|
||||||
}
|
|
||||||
@ -1,239 +0,0 @@
|
|||||||
<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 {
|
.container {
|
||||||
background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shopEn_apply.png) no-repeat;
|
background: url(http://192.168.0.172:5500/shopEn_apply.png) no-repeat;
|
||||||
background-size: 750rpx 497rpx;
|
background-size: 750rpx 497rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding-top: 290rpx;
|
padding-top: 290rpx;
|
||||||
|
|||||||
@ -55,7 +55,7 @@
|
|||||||
<u-upload :fileList="imgList" @afterRead="afterReadImg" @delete="deletePic" name="1" multiple
|
<u-upload :fileList="imgList" @afterRead="afterReadImg" @delete="deletePic" name="1" multiple
|
||||||
:maxCount="10">
|
:maxCount="10">
|
||||||
<div class="imgCon">
|
<div class="imgCon">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_imageImg.png" mode="widthFix"></image>
|
<image src="http://192.168.0.172:5500/com_imageImg.png" mode="widthFix"></image>
|
||||||
上传图片
|
上传图片
|
||||||
</div>
|
</div>
|
||||||
</u-upload>
|
</u-upload>
|
||||||
@ -68,7 +68,7 @@
|
|||||||
<u-upload :fileList="imgList3" @afterRead="afterReadImg2" @delete="deletePic2" name="1" multiple
|
<u-upload :fileList="imgList3" @afterRead="afterReadImg2" @delete="deletePic2" name="1" multiple
|
||||||
:maxCount="10">
|
:maxCount="10">
|
||||||
<div class="imgCon">
|
<div class="imgCon">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_imageImg.png" mode="widthFix"></image>
|
<image src="http://192.168.0.172:5500/com_imageImg.png" mode="widthFix"></image>
|
||||||
上传图片
|
上传图片
|
||||||
</div>
|
</div>
|
||||||
</u-upload>
|
</u-upload>
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user